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) => (
|
||||
|
||||
Reference in New Issue
Block a user