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

Initial commit - Horux Despachos NL

Browse Source
This commit is contained in:
consultoria-as
2026-05-03 16:47:53 -06:00
commit b00b677c54
647 changed files with 133843 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
apps/web/app/(dashboard)/despachos/contribuyentes/page.tsx Normal file
View File

@@ -0,0 +1,211 @@
'use client';
import { useQuery } from '@tanstack/react-query';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@horux/shared-ui';
import { Header } from '@/components/layouts/header';
import { DespachoSubnav } from '@/components/despachos/despacho-subnav';
import { PeriodoSelector } from '@/components/periodo-selector';
import { apiClient } from '@/lib/api/client';
import { useAuthStore } from '@/stores/auth-store';
import { usePeriodoStore, añoMesFromFechaInicio } from '@/stores/periodo-store';
import { Building2, RefreshCw, Loader2, TrendingUp, FileCheck, DollarSign, AlertTriangle } from 'lucide-react';
interface Stats {
totalContribuyentes: number;
ultimaExtraccion: string | null;
progresoDelMes: number;
declaracionesPresentadas: number;
declaracionesPagadas: number;
declaracionesAtrasadas: number;
tareasAtrasadas: number;
}
export default function DespachoContribuyentesPage() {
const role = useAuthStore(s => s.user?.role);
const enabled = role === 'owner' || role === 'cfo';
const { fechaInicio } = usePeriodoStore();
const { año, mes } = añoMesFromFechaInicio(fechaInicio);
const { data, isLoading } = useQuery<Stats>({
queryKey: ['despacho-contribuyentes-stats', año, mes],
queryFn: async () => {
const { data } = await apiClient.get<Stats>(`/despachos/contribuyentes-stats?año=${año}&mes=${mes}`);
return data;
},
enabled,
});
if (!enabled) {
return (
<>
<Header title="Despacho — Contribuyentes"><PeriodoSelector /></Header>
<main className="p-6 max-w-7xl mx-auto">
<DespachoSubnav />
<Card>
<CardContent className="py-8 text-center text-muted-foreground">
Esta sección solo está disponible para owner.
</CardContent>
</Card>
</main>
</>
);
}
return (
<>
<Header title="Despacho — Contribuyentes"><PeriodoSelector /></Header>
<main className="p-6 max-w-7xl mx-auto">
<DespachoSubnav />
{isLoading ? (
<div className="flex items-center gap-2 text-muted-foreground py-8 justify-center">
<Loader2 className="h-4 w-4 animate-spin" />
Cargando...
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
<Building2 className="h-4 w-4" />
Contribuyentes dados de alta
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-3xl font-bold">{data?.totalContribuyentes ?? 0}</div>
<CardDescription className="mt-1">
Activos en el despacho
</CardDescription>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
<RefreshCw className="h-4 w-4" />
Última extracción SAT
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-3xl font-bold">
{data?.ultimaExtraccion
? new Date(data.ultimaExtraccion).toLocaleDateString('es-MX', {
day: 'numeric',
month: 'short',
year: 'numeric',
})
: '—'}
</div>
<CardDescription className="mt-1">
{data?.ultimaExtraccion
? new Date(data.ultimaExtraccion).toLocaleTimeString('es-MX', {
hour: '2-digit',
minute: '2-digit',
})
: 'Sin extracciones registradas'}
</CardDescription>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
<TrendingUp className="h-4 w-4" />
Progreso del mes
</CardTitle>
</CardHeader>
<CardContent>
<div className={`text-3xl font-bold ${
(data?.progresoDelMes ?? 0) >= 80 ? 'text-success' :
(data?.progresoDelMes ?? 0) >= 50 ? 'text-amber-600' :
'text-destructive'
}`}>
{data?.progresoDelMes ?? 0}%
</div>
<div className="h-2 mt-2 rounded-full bg-muted overflow-hidden">
<div
className={`h-full transition-all ${
(data?.progresoDelMes ?? 0) >= 80 ? 'bg-success' :
(data?.progresoDelMes ?? 0) >= 50 ? 'bg-amber-500' :
'bg-destructive'
}`}
style={{ width: `${data?.progresoDelMes ?? 0}%` }}
/>
</div>
<CardDescription className="mt-1">
Obligaciones y tareas completadas
</CardDescription>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
<FileCheck className="h-4 w-4" />
Declaraciones presentadas
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-3xl font-bold">{data?.declaracionesPresentadas ?? 0}</div>
<CardDescription className="mt-1">
Subidas al sistema este mes
</CardDescription>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
<DollarSign className="h-4 w-4" />
Declaraciones pagadas
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-3xl font-bold">{data?.declaracionesPagadas ?? 0}</div>
<CardDescription className="mt-1">
{data?.declaracionesPresentadas
? `${Math.round((data.declaracionesPagadas / data.declaracionesPresentadas) * 100)}% del mes`
: 'Con comprobante de pago'}
</CardDescription>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
<AlertTriangle className="h-4 w-4" />
Declaraciones atrasadas
</CardTitle>
</CardHeader>
<CardContent>
<div className={`text-3xl font-bold ${(data?.declaracionesAtrasadas ?? 0) > 0 ? 'text-destructive' : ''}`}>
{data?.declaracionesAtrasadas ?? 0}
</div>
<CardDescription className="mt-1">
De periodos anteriores sin presentar
</CardDescription>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
<AlertTriangle className="h-4 w-4" />
Tareas atrasadas
</CardTitle>
</CardHeader>
<CardContent>
<div className={`text-3xl font-bold ${(data?.tareasAtrasadas ?? 0) > 0 ? 'text-destructive' : ''}`}>
{data?.tareasAtrasadas ?? 0}
</div>
<CardDescription className="mt-1">
De periodos anteriores sin completar
</CardDescription>
</CardContent>
</Card>
</div>
)}
</main>
</>
);
}