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>
This commit is contained in:
Consultoria AS
@@ -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
30
apps/web/components/ui/popover.tsx
Normal 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 };
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user