From 8be40dc0f9d7bae8af35a4edf67ba612e050c647 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Tue, 3 Feb 2026 17:33:13 +0700
Subject: [PATCH] Add searchable collaborator selector in admin products

---
 src/pages/admin/AdminProducts.tsx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/pages/admin/AdminProducts.tsx b/src/pages/admin/AdminProducts.tsx
index d0aa277..9b5380f 100644
--- a/src/pages/admin/AdminProducts.tsx
+++ b/src/pages/admin/AdminProducts.tsx
@@ -91,6 +91,7 @@ export default function AdminProducts() {
   const [filterType, setFilterType] = useState<string>('all');
   const [filterStatus, setFilterStatus] = useState<string>('all');
   const [collaborators, setCollaborators] = useState<CollaboratorProfile[]>([]);
+  const [collaboratorSearch, setCollaboratorSearch] = useState('');
 
   useEffect(() => {
     if (user && isAdmin) {
@@ -132,6 +133,11 @@ 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('');
@@ -164,12 +170,14 @@ 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);
   };
 
@@ -555,6 +563,15 @@ export default function AdminProducts() {
               </div>
               {form.type === 'webinar' && (
                 <div className="space-y-4 border-2 border-border rounded-lg p-4">
+                  <div className="space-y-2">
+                    <Label>Cari Kolaborator</Label>
+                    <Input
+                      value={collaboratorSearch}
+                      onChange={(e) => setCollaboratorSearch(e.target.value)}
+                      placeholder="Cari nama atau email..."
+                      className="border-2"
+                    />
+                  </div>
                   <div className="space-y-2">
                     <Label>Kolaborator (opsional)</Label>
                     <Select
@@ -566,13 +583,16 @@ export default function AdminProducts() {
                       </SelectTrigger>
                       <SelectContent>
                         <SelectItem value="__none__">Tanpa kolaborator (solo)</SelectItem>
-                        {collaborators.map((c) => (
+                        {filteredCollaborators.map((c) => (
                           <SelectItem key={c.id} value={c.id}>
                             {(c.name || 'User') + (c.email ? ` (${c.email})` : '')}
                           </SelectItem>
                         ))}
                       </SelectContent>
                     </Select>
+                    {collaboratorSearch && filteredCollaborators.length === 0 && (
+                      <p className="text-sm text-muted-foreground">Tidak ada kolaborator yang cocok.</p>
+                    )}
                   </div>
 
                   {!!form.collaborator_user_id && (