diff --git a/src/pages/admin/AdminProducts.tsx b/src/pages/admin/AdminProducts.tsx index 9b5380f..ff35ea2 100644 --- a/src/pages/admin/AdminProducts.tsx +++ b/src/pages/admin/AdminProducts.tsx @@ -12,9 +12,11 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@ import { Switch } from '@/components/ui/switch'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; +import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; +import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'; import { toast } from '@/hooks/use-toast'; import { Skeleton } from '@/components/ui/skeleton'; -import { Plus, Pencil, Trash2, Search, X, BookOpen } from 'lucide-react'; +import { Plus, Pencil, Trash2, Search, X, BookOpen, ChevronsUpDown } from 'lucide-react'; import { RichTextEditor } from '@/components/RichTextEditor'; import { formatIDR } from '@/lib/format'; import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'; @@ -91,7 +93,7 @@ export default function AdminProducts() { const [filterType, setFilterType] = useState('all'); const [filterStatus, setFilterStatus] = useState('all'); const [collaborators, setCollaborators] = useState([]); - const [collaboratorSearch, setCollaboratorSearch] = useState(''); + const [collaboratorPickerOpen, setCollaboratorPickerOpen] = useState(false); useEffect(() => { if (user && isAdmin) { @@ -133,12 +135,6 @@ export default function AdminProducts() { // Get unique product types from actual products const productTypes = ['all', ...Array.from(new Set(products.map(p => p.type)))]; - const filteredCollaborators = collaborators.filter((c) => { - const q = collaboratorSearch.trim().toLowerCase(); - if (!q) return true; - return (c.name || '').toLowerCase().includes(q) || (c.email || '').toLowerCase().includes(q); - }); - const clearFilters = () => { setSearchQuery(''); setFilterType('all'); @@ -170,14 +166,12 @@ export default function AdminProducts() { profit_share_percentage: product.profit_share_percentage ?? 50, auto_grant_access: product.auto_grant_access ?? true, }); - setCollaboratorSearch(''); setDialogOpen(true); }; const handleNew = () => { setEditingProduct(null); setForm(emptyProduct); - setCollaboratorSearch(''); setDialogOpen(true); }; @@ -563,36 +557,52 @@ export default function AdminProducts() { {form.type === 'webinar' && (
-
- - setCollaboratorSearch(e.target.value)} - placeholder="Cari nama atau email..." - className="border-2" - /> -
- - {collaboratorSearch && filteredCollaborators.length === 0 && ( -

Tidak ada kolaborator yang cocok.

- )} + + + + + + + + + Tidak ada kolaborator yang cocok. + + { + setForm({ ...form, collaborator_user_id: '' }); + setCollaboratorPickerOpen(false); + }} + > + Tanpa kolaborator (solo) + + {collaborators.map((c) => ( + { + setForm({ ...form, collaborator_user_id: c.id }); + setCollaboratorPickerOpen(false); + }} + > + {(c.name || 'User') + (c.email ? ` (${c.email})` : '')} + + ))} + + + + +
{!!form.collaborator_user_id && (