consultoria-as/Horux360
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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>
This commit is contained in:
Consultoria AS
2026-02-17 06:25:17 +00:00
parent 29ac067a82
commit e132c2ba14
4 changed files with 267 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

293
apps/web/app/(dashboard)/cfdi/page.tsx
View File

@@ -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 = () => {
setColumnFilters({
fechaInicio: '',
fechaFin: '',
emisor: '',
receptor: '',
});
setFilters({
...filters,
fechaInicio: undefined,
fechaFin: undefined,
emisor: undefined,
receptor: undefined,
page: 1,
});
const clearDateFilter = () => {
setColumnFilters({ ...columnFilters, fechaInicio: '', fechaFin: '' });
setFilters({ ...filters, fechaInicio: undefined, fechaFin: undefined, page: 1 });
setOpenFilter(null);
};
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 && (
<Button variant="ghost" size="sm" onClick={clearColumnFilters} className="text-muted-foreground">
<XCircle className="h-4 w-4 mr-1" />
Limpiar filtros
</Button>
)}
<Button
variant={showColumnFilters ? 'default' : 'outline'}
size="sm"
onClick={() => setShowColumnFilters(!showColumnFilters)}
>
<Filter className="h-4 w-4 mr-1" />
Filtros
</Button>
</div>
{hasActiveColumnFilters && (
<div className="flex items-center gap-2 text-xs text-muted-foreground">
<span>Filtros activos:</span>
{hasDateFilter && (
<span className="px-2 py-0.5 bg-primary/10 text-primary rounded-full flex items-center gap-1">
Fecha
<button onClick={clearDateFilter} className="hover:text-destructive">
<X className="h-3 w-3" />
</button>
</span>
)}
{hasEmisorFilter && (
<span className="px-2 py-0.5 bg-primary/10 text-primary rounded-full flex items-center gap-1">
Emisor: {filters.emisor}
<button onClick={clearEmisorFilter} className="hover:text-destructive">
<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-2 font-medium">Tipo</th>
<th className="pb-2 font-medium">Folio</th>
<th className="pb-2 font-medium">Emisor</th>
<th className="pb-2 font-medium">Receptor</th>
<th className="pb-2 font-medium text-right">Total</th>
<th className="pb-2 font-medium">Estado</th>
<th className="pb-2 font-medium"></th>
{canEdit && <th className="pb-2 font-medium"></th>}
<th className="pb-3 font-medium">
<div className="flex items-center gap-1">
Fecha
<Popover open={openFilter === 'fecha'} onOpenChange={(open) => setOpenFilter(open ? 'fecha' : null)}>
<PopoverTrigger asChild>
<button className={`p-1 rounded hover:bg-muted ${hasDateFilter ? '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 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) => (

30
apps/web/components/ui/popover.tsx Normal file
View File

@@ -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 };

1
apps/web/package.json
View File

@@ -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",

39
pnpm-lock.yaml generated
View File

@@ -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)