feat(cfdi): add autocomplete for emisor and receptor filters

- Add /cfdi/emisores and /cfdi/receptores API endpoints
- Search by RFC or nombre with ILIKE
- Show suggestions dropdown while typing (min 2 chars)
- Click suggestion to select and populate filter input
- Show loading state while searching

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/web/app/(dashboard)/cfdi/page.tsx

@@ -8,7 +8,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { useCfdis, useCreateCfdi, useDeleteCfdi } from '@/lib/hooks/use-cfdi';
-import { createManyCfdis } from '@/lib/api/cfdi';
+import { createManyCfdis, searchEmisores, searchReceptores, type EmisorReceptor } from '@/lib/api/cfdi';
 import type { CfdiFilters, TipoCfdi, Cfdi } from '@horux/shared';
 import type { CreateCfdiData } from '@/lib/api/cfdi';
 import { FileText, Search, ChevronLeft, ChevronRight, Plus, Upload, Trash2, X, FileUp, CheckCircle, AlertCircle, Loader2, Eye, Filter, XCircle, Calendar, User, Building2 } from 'lucide-react';
@@ -238,6 +238,9 @@ export default function CfdiPage() {
     receptor: '',
   });
   const [openFilter, setOpenFilter] = useState<'fecha' | 'emisor' | 'receptor' | null>(null);
+  const [emisorSuggestions, setEmisorSuggestions] = useState<EmisorReceptor[]>([]);
+  const [receptorSuggestions, setReceptorSuggestions] = useState<EmisorReceptor[]>([]);
+  const [loadingSuggestions, setLoadingSuggestions] = useState(false);
   const [showForm, setShowForm] = useState(false);
   const [showBulkForm, setShowBulkForm] = useState(false);
   const [formData, setFormData] = useState<CreateCfdiData>(initialFormData);
@@ -288,6 +291,52 @@ export default function CfdiPage() {
     setFilters({ ...filters, search: searchTerm, page: 1 });
   };
 
+  // Debounced search for emisor suggestions
+  const handleEmisorSearch = useCallback(async (value: string) => {
+    setColumnFilters(prev => ({ ...prev, emisor: value }));
+    if (value.length < 2) {
+      setEmisorSuggestions([]);
+      return;
+    }
+    setLoadingSuggestions(true);
+    try {
+      const results = await searchEmisores(value);
+      setEmisorSuggestions(results);
+    } catch {
+      setEmisorSuggestions([]);
+    } finally {
+      setLoadingSuggestions(false);
+    }
+  }, []);
+
+  // Debounced search for receptor suggestions
+  const handleReceptorSearch = useCallback(async (value: string) => {
+    setColumnFilters(prev => ({ ...prev, receptor: value }));
+    if (value.length < 2) {
+      setReceptorSuggestions([]);
+      return;
+    }
+    setLoadingSuggestions(true);
+    try {
+      const results = await searchReceptores(value);
+      setReceptorSuggestions(results);
+    } catch {
+      setReceptorSuggestions([]);
+    } finally {
+      setLoadingSuggestions(false);
+    }
+  }, []);
+
+  const selectEmisor = (emisor: EmisorReceptor) => {
+    setColumnFilters(prev => ({ ...prev, emisor: emisor.nombre }));
+    setEmisorSuggestions([]);
+  };
+
+  const selectReceptor = (receptor: EmisorReceptor) => {
+    setColumnFilters(prev => ({ ...prev, receptor: receptor.nombre }));
+    setReceptorSuggestions([]);
+  };
+
   const applyDateFilter = () => {
     setFilters({
       ...filters,
@@ -1227,18 +1276,38 @@ export default function CfdiPage() {
                                 <Filter className="h-3.5 w-3.5" />
                               </button>
                             </PopoverTrigger>
-                            <PopoverContent className="w-64" align="start">
+                            <PopoverContent className="w-72" align="start">
                               <div className="space-y-3">
                                 <h4 className="font-medium text-sm">Filtrar por emisor</h4>
-                                <div>
+                                <div className="relative">
                                   <Label className="text-xs">RFC o Nombre</Label>
                                   <Input
                                     placeholder="Buscar emisor..."
                                     className="h-8 text-sm"
                                     value={columnFilters.emisor}
-                                    onChange={(e) => setColumnFilters({ ...columnFilters, emisor: e.target.value })}
+                                    onChange={(e) => handleEmisorSearch(e.target.value)}
                                     onKeyDown={(e) => e.key === 'Enter' && applyEmisorFilter()}
                                   />
+                                  {emisorSuggestions.length > 0 && (
+                                    <div className="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-900 border rounded-md shadow-lg max-h-48 overflow-y-auto z-50">
+                                      {emisorSuggestions.map((emisor, idx) => (
+                                        <button
+                                          key={idx}
+                                          type="button"
+                                          className="w-full px-3 py-2 text-left text-sm hover:bg-muted transition-colors border-b last:border-b-0"
+                                          onClick={() => selectEmisor(emisor)}
+                                        >
+                                          <p className="font-medium truncate">{emisor.nombre}</p>
+                                          <p className="text-xs text-muted-foreground">{emisor.rfc}</p>
+                                        </button>
+                                      ))}
+                                    </div>
+                                  )}
+                                  {loadingSuggestions && columnFilters.emisor.length >= 2 && (
+                                    <div className="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-900 border rounded-md shadow-lg p-2 text-center text-sm text-muted-foreground">
+                                      Buscando...
+                                    </div>
+                                  )}
                                 </div>
                                 <div className="flex gap-2">
                                   <Button size="sm" className="flex-1" onClick={applyEmisorFilter}>
@@ -1264,18 +1333,38 @@ export default function CfdiPage() {
                                 <Filter className="h-3.5 w-3.5" />
                               </button>
                             </PopoverTrigger>
-                            <PopoverContent className="w-64" align="start">
+                            <PopoverContent className="w-72" align="start">
                               <div className="space-y-3">
                                 <h4 className="font-medium text-sm">Filtrar por receptor</h4>
-                                <div>
+                                <div className="relative">
                                   <Label className="text-xs">RFC o Nombre</Label>
                                   <Input
                                     placeholder="Buscar receptor..."
                                     className="h-8 text-sm"
                                     value={columnFilters.receptor}
-                                    onChange={(e) => setColumnFilters({ ...columnFilters, receptor: e.target.value })}
+                                    onChange={(e) => handleReceptorSearch(e.target.value)}
                                     onKeyDown={(e) => e.key === 'Enter' && applyReceptorFilter()}
                                   />
+                                  {receptorSuggestions.length > 0 && (
+                                    <div className="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-900 border rounded-md shadow-lg max-h-48 overflow-y-auto z-50">
+                                      {receptorSuggestions.map((receptor, idx) => (
+                                        <button
+                                          key={idx}
+                                          type="button"
+                                          className="w-full px-3 py-2 text-left text-sm hover:bg-muted transition-colors border-b last:border-b-0"
+                                          onClick={() => selectReceptor(receptor)}
+                                        >
+                                          <p className="font-medium truncate">{receptor.nombre}</p>
+                                          <p className="text-xs text-muted-foreground">{receptor.rfc}</p>
+                                        </button>
+                                      ))}
+                                    </div>
+                                  )}
+                                  {loadingSuggestions && columnFilters.receptor.length >= 2 && (
+                                    <div className="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-900 border rounded-md shadow-lg p-2 text-center text-sm text-muted-foreground">
+                                      Buscando...
+                                    </div>
+                                  )}
                                 </div>
                                 <div className="flex gap-2">
                                   <Button size="sm" className="flex-1" onClick={applyReceptorFilter}>

apps/web/lib/api/cfdi.ts

@@ -98,3 +98,20 @@ export async function getCfdiXml(id: string): Promise<string> {
   });
   return response.data;
 }
+
+export interface EmisorReceptor {
+  rfc: string;
+  nombre: string;
+}
+
+export async function searchEmisores(search: string): Promise<EmisorReceptor[]> {
+  if (search.length < 2) return [];
+  const response = await apiClient.get<EmisorReceptor[]>(`/cfdi/emisores?search=${encodeURIComponent(search)}`);
+  return response.data;
+}
+
+export async function searchReceptores(search: string): Promise<EmisorReceptor[]> {
+  if (search.length < 2) return [];
+  const response = await apiClient.get<EmisorReceptor[]>(`/cfdi/receptores?search=${encodeURIComponent(search)}`);
+  return response.data;
+}