feat(cfdi): add filter icons with popover dropdowns per column

- Create Popover component using Radix UI
- Add filter icon next to Fecha, Emisor, Receptor headers
- Each icon opens a popover with filter inputs
- Show active filters as badges in card header
- Filter icons highlight when filter is active
- Apply filters on Enter or click Apply button
- Remove filters individually with X on badge

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

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

@@ -11,7 +11,8 @@ import { useCfdis, useCreateCfdi, useDeleteCfdi } from '@/lib/hooks/use-cfdi';
 import { createManyCfdis } 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 } from 'lucide-react';
+import { FileText, Search, ChevronLeft, ChevronRight, Plus, Upload, Trash2, X, FileUp, CheckCircle, AlertCircle, Loader2, Eye, Filter, XCircle, Calendar, User, Building2 } from 'lucide-react';
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
 import { CfdiViewerModal } from '@/components/cfdi/cfdi-viewer-modal';
 import { getCfdiById } from '@/lib/api/cfdi';
 import { useAuthStore } from '@/stores/auth-store';
@@ -230,13 +231,13 @@ export default function CfdiPage() {
     limit: 20,
   });
   const [searchTerm, setSearchTerm] = useState('');
-  const [showColumnFilters, setShowColumnFilters] = useState(false);
   const [columnFilters, setColumnFilters] = useState({
     fechaInicio: '',
     fechaFin: '',
     emisor: '',
     receptor: '',
   });
+  const [openFilter, setOpenFilter] = useState<'fecha' | 'emisor' | 'receptor' | null>(null);
   const [showForm, setShowForm] = useState(false);
   const [showBulkForm, setShowBulkForm] = useState(false);
   const [formData, setFormData] = useState<CreateCfdiData>(initialFormData);
@@ -287,35 +288,56 @@ export default function CfdiPage() {
     setFilters({ ...filters, search: searchTerm, page: 1 });
   };
 
-  const applyColumnFilters = () => {
+  const applyDateFilter = () => {
     setFilters({
       ...filters,
       fechaInicio: columnFilters.fechaInicio || undefined,
       fechaFin: columnFilters.fechaFin || undefined,
+      page: 1,
+    });
+    setOpenFilter(null);
+  };
+
+  const applyEmisorFilter = () => {
+    setFilters({
+      ...filters,
       emisor: columnFilters.emisor || undefined,
+      page: 1,
+    });
+    setOpenFilter(null);
+  };
+
+  const applyReceptorFilter = () => {
+    setFilters({
+      ...filters,
       receptor: columnFilters.receptor || undefined,
       page: 1,
     });
+    setOpenFilter(null);
   };
 
-  const clearColumnFilters = () => {
+  const clearDateFilter = () => {
-    setColumnFilters({
+    setColumnFilters({ ...columnFilters, fechaInicio: '', fechaFin: '' });
-      fechaInicio: '',
+    setFilters({ ...filters, fechaInicio: undefined, fechaFin: undefined, page: 1 });
-      fechaFin: '',
+    setOpenFilter(null);
-      emisor: '',
-      receptor: '',
-    });
-    setFilters({
-      ...filters,
-      fechaInicio: undefined,
-      fechaFin: undefined,
-      emisor: undefined,
-      receptor: undefined,
-      page: 1,
-    });
   };
 
-  const hasActiveColumnFilters = columnFilters.fechaInicio || columnFilters.fechaFin || columnFilters.emisor || columnFilters.receptor;
+  const clearEmisorFilter = () => {
+    setColumnFilters({ ...columnFilters, emisor: '' });
+    setFilters({ ...filters, emisor: undefined, page: 1 });
+    setOpenFilter(null);
+  };
+
+  const clearReceptorFilter = () => {
+    setColumnFilters({ ...columnFilters, receptor: '' });
+    setFilters({ ...filters, receptor: undefined, page: 1 });
+    setOpenFilter(null);
+  };
+
+  const hasDateFilter = filters.fechaInicio || filters.fechaFin;
+  const hasEmisorFilter = filters.emisor;
+  const hasReceptorFilter = filters.receptor;
+  const hasActiveColumnFilters = hasDateFilter || hasEmisorFilter || hasReceptorFilter;
 
   const handleFilterType = (tipo?: TipoCfdi) => {
     setFilters({ ...filters, tipo, page: 1 });
@@ -1102,22 +1124,35 @@ export default function CfdiPage() {
                 <FileText className="h-4 w-4" />
                 CFDIs ({data?.total || 0})
               </CardTitle>
-              <div className="flex items-center gap-2">
+              {hasActiveColumnFilters && (
-                {hasActiveColumnFilters && (
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                  <Button variant="ghost" size="sm" onClick={clearColumnFilters} className="text-muted-foreground">
+                  <span>Filtros activos:</span>
-                    <XCircle className="h-4 w-4 mr-1" />
+                  {hasDateFilter && (
-                    Limpiar filtros
+                    <span className="px-2 py-0.5 bg-primary/10 text-primary rounded-full flex items-center gap-1">
-                  </Button>
+                      Fecha
-                )}
+                      <button onClick={clearDateFilter} className="hover:text-destructive">
-                <Button
+                        <X className="h-3 w-3" />
-                  variant={showColumnFilters ? 'default' : 'outline'}
+                      </button>
-                  size="sm"
+                    </span>
-                  onClick={() => setShowColumnFilters(!showColumnFilters)}
+                  )}
-                >
+                  {hasEmisorFilter && (
-                  <Filter className="h-4 w-4 mr-1" />
+                    <span className="px-2 py-0.5 bg-primary/10 text-primary rounded-full flex items-center gap-1">
-                  Filtros
+                      Emisor: {filters.emisor}
-                </Button>
+                      <button onClick={clearEmisorFilter} className="hover:text-destructive">
-              </div>
+                        <X className="h-3 w-3" />
+                      </button>
+                    </span>
+                  )}
+                  {hasReceptorFilter && (
+                    <span className="px-2 py-0.5 bg-primary/10 text-primary rounded-full flex items-center gap-1">
+                      Receptor: {filters.receptor}
+                      <button onClick={clearReceptorFilter} className="hover:text-destructive">
+                        <X className="h-3 w-3" />
+                      </button>
+                    </span>
+                  )}
+                </div>
+              )}
             </div>
           </CardHeader>
           <CardContent>
@@ -1134,68 +1169,134 @@ export default function CfdiPage() {
                 <table className="w-full">
                   <thead>
                     <tr className="border-b text-left text-sm text-muted-foreground">
-                      <th className="pb-2 font-medium">Fecha</th>
+                      <th className="pb-3 font-medium">
-                      <th className="pb-2 font-medium">Tipo</th>
+                        <div className="flex items-center gap-1">
-                      <th className="pb-2 font-medium">Folio</th>
+                          Fecha
-                      <th className="pb-2 font-medium">Emisor</th>
+                          <Popover open={openFilter === 'fecha'} onOpenChange={(open) => setOpenFilter(open ? 'fecha' : null)}>
-                      <th className="pb-2 font-medium">Receptor</th>
+                            <PopoverTrigger asChild>
-                      <th className="pb-2 font-medium text-right">Total</th>
+                              <button className={`p-1 rounded hover:bg-muted ${hasDateFilter ? 'text-primary' : ''}`}>
-                      <th className="pb-2 font-medium">Estado</th>
+                                <Filter className="h-3.5 w-3.5" />
-                      <th className="pb-2 font-medium"></th>
+                              </button>
-                      {canEdit && <th className="pb-2 font-medium"></th>}
+                            </PopoverTrigger>
+                            <PopoverContent className="w-64" align="start">
+                              <div className="space-y-3">
+                                <h4 className="font-medium text-sm">Filtrar por fecha</h4>
+                                <div className="space-y-2">
+                                  <div>
+                                    <Label className="text-xs">Desde</Label>
+                                    <Input
+                                      type="date"
+                                      className="h-8 text-sm"
+                                      value={columnFilters.fechaInicio}
+                                      onChange={(e) => setColumnFilters({ ...columnFilters, fechaInicio: e.target.value })}
+                                    />
+                                  </div>
+                                  <div>
+                                    <Label className="text-xs">Hasta</Label>
+                                    <Input
+                                      type="date"
+                                      className="h-8 text-sm"
+                                      value={columnFilters.fechaFin}
+                                      onChange={(e) => setColumnFilters({ ...columnFilters, fechaFin: e.target.value })}
+                                    />
+                                  </div>
+                                </div>
+                                <div className="flex gap-2">
+                                  <Button size="sm" className="flex-1" onClick={applyDateFilter}>
+                                    Aplicar
+                                  </Button>
+                                  {hasDateFilter && (
+                                    <Button size="sm" variant="outline" onClick={clearDateFilter}>
+                                      Limpiar
+                                    </Button>
+                                  )}
+                                </div>
+                              </div>
+                            </PopoverContent>
+                          </Popover>
+                        </div>
+                      </th>
+                      <th className="pb-3 font-medium">Tipo</th>
+                      <th className="pb-3 font-medium">Folio</th>
+                      <th className="pb-3 font-medium">
+                        <div className="flex items-center gap-1">
+                          Emisor
+                          <Popover open={openFilter === 'emisor'} onOpenChange={(open) => setOpenFilter(open ? 'emisor' : null)}>
+                            <PopoverTrigger asChild>
+                              <button className={`p-1 rounded hover:bg-muted ${hasEmisorFilter ? 'text-primary' : ''}`}>
+                                <Filter className="h-3.5 w-3.5" />
+                              </button>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-64" align="start">
+                              <div className="space-y-3">
+                                <h4 className="font-medium text-sm">Filtrar por emisor</h4>
+                                <div>
+                                  <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 })}
+                                    onKeyDown={(e) => e.key === 'Enter' && applyEmisorFilter()}
+                                  />
+                                </div>
+                                <div className="flex gap-2">
+                                  <Button size="sm" className="flex-1" onClick={applyEmisorFilter}>
+                                    Aplicar
+                                  </Button>
+                                  {hasEmisorFilter && (
+                                    <Button size="sm" variant="outline" onClick={clearEmisorFilter}>
+                                      Limpiar
+                                    </Button>
+                                  )}
+                                </div>
+                              </div>
+                            </PopoverContent>
+                          </Popover>
+                        </div>
+                      </th>
+                      <th className="pb-3 font-medium">
+                        <div className="flex items-center gap-1">
+                          Receptor
+                          <Popover open={openFilter === 'receptor'} onOpenChange={(open) => setOpenFilter(open ? 'receptor' : null)}>
+                            <PopoverTrigger asChild>
+                              <button className={`p-1 rounded hover:bg-muted ${hasReceptorFilter ? 'text-primary' : ''}`}>
+                                <Filter className="h-3.5 w-3.5" />
+                              </button>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-64" align="start">
+                              <div className="space-y-3">
+                                <h4 className="font-medium text-sm">Filtrar por receptor</h4>
+                                <div>
+                                  <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 })}
+                                    onKeyDown={(e) => e.key === 'Enter' && applyReceptorFilter()}
+                                  />
+                                </div>
+                                <div className="flex gap-2">
+                                  <Button size="sm" className="flex-1" onClick={applyReceptorFilter}>
+                                    Aplicar
+                                  </Button>
+                                  {hasReceptorFilter && (
+                                    <Button size="sm" variant="outline" onClick={clearReceptorFilter}>
+                                      Limpiar
+                                    </Button>
+                                  )}
+                                </div>
+                              </div>
+                            </PopoverContent>
+                          </Popover>
+                        </div>
+                      </th>
+                      <th className="pb-3 font-medium text-right">Total</th>
+                      <th className="pb-3 font-medium">Estado</th>
+                      <th className="pb-3 font-medium"></th>
+                      {canEdit && <th className="pb-3 font-medium"></th>}
                     </tr>
-                    {showColumnFilters && (
-                      <tr className="border-b bg-muted/30">
-                        <td className="py-2 pr-2">
-                          <div className="flex flex-col gap-1">
-                            <Input
-                              type="date"
-                              placeholder="Desde"
-                              className="h-7 text-xs"
-                              value={columnFilters.fechaInicio}
-                              onChange={(e) => setColumnFilters({ ...columnFilters, fechaInicio: e.target.value })}
-                              onKeyDown={(e) => e.key === 'Enter' && applyColumnFilters()}
-                            />
-                            <Input
-                              type="date"
-                              placeholder="Hasta"
-                              className="h-7 text-xs"
-                              value={columnFilters.fechaFin}
-                              onChange={(e) => setColumnFilters({ ...columnFilters, fechaFin: e.target.value })}
-                              onKeyDown={(e) => e.key === 'Enter' && applyColumnFilters()}
-                            />
-                          </div>
-                        </td>
-                        <td className="py-2 px-1"></td>
-                        <td className="py-2 px-1"></td>
-                        <td className="py-2 px-1">
-                          <Input
-                            placeholder="Buscar emisor..."
-                            className="h-7 text-xs"
-                            value={columnFilters.emisor}
-                            onChange={(e) => setColumnFilters({ ...columnFilters, emisor: e.target.value })}
-                            onKeyDown={(e) => e.key === 'Enter' && applyColumnFilters()}
-                          />
-                        </td>
-                        <td className="py-2 px-1">
-                          <Input
-                            placeholder="Buscar receptor..."
-                            className="h-7 text-xs"
-                            value={columnFilters.receptor}
-                            onChange={(e) => setColumnFilters({ ...columnFilters, receptor: e.target.value })}
-                            onKeyDown={(e) => e.key === 'Enter' && applyColumnFilters()}
-                          />
-                        </td>
-                        <td className="py-2 px-1"></td>
-                        <td className="py-2 px-1"></td>
-                        <td className="py-2 pl-1">
-                          <Button size="sm" className="h-7 text-xs" onClick={applyColumnFilters}>
-                            <Search className="h-3 w-3" />
-                          </Button>
-                        </td>
-                        {canEdit && <td className="py-2"></td>}
-                      </tr>
-                    )}
                   </thead>
                   <tbody className="text-sm">
                     {data?.data.map((cfdi) => (

apps/web/components/ui/popover.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '@/lib/utils';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };

apps/web/package.json

@@ -14,6 +14,7 @@
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.0",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.1.0",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",

pnpm-lock.yaml

@@ -123,6 +123,9 @@ importers:
       '@radix-ui/react-label':
         specifier: ^2.1.0
         version: 2.1.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-popover':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-select':
         specifier: ^2.1.0
         version: 2.2.6(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -723,6 +726,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-popover@1.1.15':
+    resolution: {integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-popper@1.2.8':
     resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
     peerDependencies:
@@ -2926,6 +2942,29 @@ snapshots:
       '@types/react': 18.3.27
       '@types/react-dom': 18.3.7(@types/react@18.3.27)
 
+  '@radix-ui/react-popover@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.27)(react@18.3.1)
+      aria-hidden: 1.2.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.7.2(@types/react@18.3.27)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
   '@radix-ui/react-popper@1.2.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@floating-ui/react-dom': 2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)