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

feat(web): add CFDI page with list, filters, and pagination

Browse Source 
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Consultoria AS
2026-01-22 02:31:59 +00:00
parent 6372f8afc5
commit 554474d62f
3 changed files with 263 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
apps/web/app/(dashboard)/cfdi/page.tsx Normal file
View File

@@ -0,0 +1,206 @@
'use client';
import { useState } from 'react';
import { Header } from '@/components/layouts/header';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { useCfdis } from '@/lib/hooks/use-cfdi';
import type { CfdiFilters, TipoCfdi } from '@horux/shared';
import { FileText, Search, ChevronLeft, ChevronRight } from 'lucide-react';
export default function CfdiPage() {
const [filters, setFilters] = useState<CfdiFilters>({
page: 1,
limit: 20,
});
const [searchTerm, setSearchTerm] = useState('');
const { data, isLoading } = useCfdis(filters);
const handleSearch = () => {
setFilters({ ...filters, search: searchTerm, page: 1 });
};
const handleFilterType = (tipo?: TipoCfdi) => {
setFilters({ ...filters, tipo, page: 1 });
};
const formatCurrency = (value: number) =>
new Intl.NumberFormat('es-MX', {
style: 'currency',
currency: 'MXN',
}).format(value);
const formatDate = (dateString: string) =>
new Date(dateString).toLocaleDateString('es-MX', {
day: '2-digit',
month: 'short',
year: 'numeric',
});
return (
<>
<Header title="Gestion de CFDI" />
<main className="p-6 space-y-6">
{/* Filters */}
<Card>
<CardContent className="p-4">
<div className="flex flex-wrap gap-4">
<div className="flex gap-2 flex-1 min-w-[300px]">
<Input
placeholder="Buscar por UUID, RFC o nombre..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
/>
<Button onClick={handleSearch}>
<Search className="h-4 w-4" />
</Button>
</div>
<div className="flex gap-2">
<Button
variant={filters.tipo === undefined ? 'default' : 'outline'}
size="sm"
onClick={() => handleFilterType(undefined)}
>
Todos
</Button>
<Button
variant={filters.tipo === 'ingreso' ? 'default' : 'outline'}
size="sm"
onClick={() => handleFilterType('ingreso')}
>
Ingresos
</Button>
<Button
variant={filters.tipo === 'egreso' ? 'default' : 'outline'}
size="sm"
onClick={() => handleFilterType('egreso')}
>
Egresos
</Button>
</div>
</div>
</CardContent>
</Card>
{/* Table */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2 text-base">
<FileText className="h-4 w-4" />
CFDIs ({data?.total || 0})
</CardTitle>
</CardHeader>
<CardContent>
{isLoading ? (
<div className="text-center py-8 text-muted-foreground">
Cargando...
</div>
) : data?.data.length === 0 ? (
<div className="text-center py-8 text-muted-foreground">
No se encontraron CFDIs
</div>
) : (
<div className="overflow-x-auto">
<table className="w-full">
<thead>
<tr className="border-b text-left text-sm text-muted-foreground">
<th className="pb-3 font-medium">Fecha</th>
<th className="pb-3 font-medium">Tipo</th>
<th className="pb-3 font-medium">Serie/Folio</th>
<th className="pb-3 font-medium">Emisor/Receptor</th>
<th className="pb-3 font-medium text-right">Total</th>
<th className="pb-3 font-medium">Estado</th>
</tr>
</thead>
<tbody className="text-sm">
{data?.data.map((cfdi) => (
<tr key={cfdi.id} className="border-b hover:bg-muted/50">
<td className="py-3">{formatDate(cfdi.fechaEmision)}</td>
<td className="py-3">
<span
className={`px-2 py-1 rounded-full text-xs font-medium ${
cfdi.tipo === 'ingreso'
? 'bg-success/10 text-success'
: 'bg-destructive/10 text-destructive'
}`}
>
{cfdi.tipo === 'ingreso' ? 'Ingreso' : 'Egreso'}
</span>
</td>
<td className="py-3">
{cfdi.serie || '-'}-{cfdi.folio || '-'}
</td>
<td className="py-3">
<div>
<p className="font-medium">
{cfdi.tipo === 'ingreso'
? cfdi.nombreReceptor
: cfdi.nombreEmisor}
</p>
<p className="text-xs text-muted-foreground">
{cfdi.tipo === 'ingreso'
? cfdi.rfcReceptor
: cfdi.rfcEmisor}
</p>
</div>
</td>
<td className="py-3 text-right font-medium">
{formatCurrency(cfdi.total)}
</td>
<td className="py-3">
<span
className={`px-2 py-1 rounded-full text-xs font-medium ${
cfdi.estado === 'vigente'
? 'bg-success/10 text-success'
: 'bg-muted text-muted-foreground'
}`}
>
{cfdi.estado === 'vigente' ? 'Vigente' : 'Cancelado'}
</span>
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
{/* Pagination */}
{data && data.totalPages > 1 && (
<div className="flex items-center justify-between mt-4 pt-4 border-t">
<p className="text-sm text-muted-foreground">
Pagina {data.page} de {data.totalPages}
</p>
<div className="flex gap-2">
<Button
variant="outline"
size="sm"
disabled={data.page <= 1}
onClick={() =>
setFilters({ ...filters, page: (filters.page || 1) - 1 })
}
>
<ChevronLeft className="h-4 w-4" />
</Button>
<Button
variant="outline"
size="sm"
disabled={data.page >= data.totalPages}
onClick={() =>
setFilters({ ...filters, page: (filters.page || 1) + 1 })
}
>
<ChevronRight className="h-4 w-4" />
</Button>
</div>
</div>
)}
</CardContent>
</Card>
</main>
</>
);
}