200 lines
8.9 KiB
TypeScript
200 lines
8.9 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { Card, CardContent } 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 { useContribuyenteStore } from '@/stores/contribuyente-store';
|
|
import { usePeriodoStore, añoMesFromFechaInicio } from '@/stores/periodo-store';
|
|
import { Building2, Clock, AlertTriangle, CheckCircle2, Loader2 } from 'lucide-react';
|
|
|
|
interface Asignado {
|
|
contribuyenteId: string;
|
|
rfc: string;
|
|
nombre: string;
|
|
carteraNombre: string | null;
|
|
obligacionesPendientes: number;
|
|
obligacionesAtrasadas: number;
|
|
obligacionesCompletadas: number;
|
|
tareasPendientes: number;
|
|
tareasAtrasadas: number;
|
|
tareasCompletadas: number;
|
|
}
|
|
|
|
const ROLES_ASIGNADOS = new Set(['owner', 'cfo', 'supervisor', 'auxiliar']);
|
|
|
|
export default function MisAsignadosPage() {
|
|
const role = useAuthStore(s => s.user?.role);
|
|
const enabled = role ? ROLES_ASIGNADOS.has(role) : false;
|
|
const { setSelectedContribuyente } = useContribuyenteStore();
|
|
const { fechaInicio } = usePeriodoStore();
|
|
const { año, mes } = añoMesFromFechaInicio(fechaInicio);
|
|
|
|
const { data, isLoading } = useQuery<Asignado[]>({
|
|
queryKey: ['despacho-mis-asignados', año, mes],
|
|
queryFn: async () => {
|
|
const { data } = await apiClient.get<Asignado[]>(`/despachos/mis-asignados?año=${año}&mes=${mes}`);
|
|
return data;
|
|
},
|
|
enabled,
|
|
});
|
|
|
|
if (!enabled) {
|
|
return (
|
|
<>
|
|
<Header title="Despacho — Mis asignados"><PeriodoSelector /></Header>
|
|
<main className="p-6 max-w-6xl mx-auto">
|
|
<DespachoSubnav />
|
|
<Card>
|
|
<CardContent className="py-8 text-center text-muted-foreground">
|
|
No tienes contribuyentes asignados.
|
|
</CardContent>
|
|
</Card>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const items = data ?? [];
|
|
|
|
return (
|
|
<>
|
|
<Header title="Despacho — Mis asignados"><PeriodoSelector /></Header>
|
|
<main className="p-6 max-w-6xl 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>
|
|
) : items.length === 0 ? (
|
|
<Card>
|
|
<CardContent className="py-8 text-center text-muted-foreground">
|
|
No tienes contribuyentes asignados todavía. Pídele al owner que te los asigne en su cartera.
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<Card>
|
|
<CardContent className="p-0">
|
|
<table className="w-full text-sm">
|
|
<thead className="border-b bg-muted/50">
|
|
<tr>
|
|
<th className="text-left px-4 py-3 font-medium">Contribuyente</th>
|
|
<th className="text-left px-4 py-3 font-medium">Cartera</th>
|
|
<th className="text-left px-4 py-3 font-medium w-[180px]">Avance</th>
|
|
<th className="text-center px-3 py-3 font-medium" title="Atrasos de periodos anteriores (obligaciones + tareas)">
|
|
Atrasos
|
|
</th>
|
|
<th className="text-center px-3 py-3 font-medium" title="Obligaciones del periodo">
|
|
Obl. periodo
|
|
</th>
|
|
<th className="text-center px-3 py-3 font-medium" title="Tareas del periodo">
|
|
Tareas periodo
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{items.map(it => {
|
|
const total =
|
|
it.obligacionesPendientes + it.obligacionesAtrasadas + it.obligacionesCompletadas +
|
|
it.tareasPendientes + it.tareasAtrasadas + it.tareasCompletadas;
|
|
const completadas = it.obligacionesCompletadas + it.tareasCompletadas;
|
|
const pct = total > 0 ? Math.round((completadas / total) * 100) : null;
|
|
const barColor =
|
|
pct === null ? 'bg-muted' :
|
|
pct >= 80 ? 'bg-success' :
|
|
pct >= 50 ? 'bg-amber-500' :
|
|
'bg-destructive';
|
|
const totalAtrasos = it.obligacionesAtrasadas + it.tareasAtrasadas;
|
|
const tieneAtrasos = totalAtrasos > 0;
|
|
return (
|
|
<tr
|
|
key={it.contribuyenteId}
|
|
className={`border-b hover:bg-muted/30 ${tieneAtrasos ? 'bg-red-50/50 dark:bg-red-950/10' : ''}`}
|
|
>
|
|
<td className="px-4 py-3">
|
|
<Link
|
|
href="/configuracion/obligaciones"
|
|
onClick={() => setSelectedContribuyente(it.contribuyenteId, it.rfc, it.nombre)}
|
|
className="hover:underline"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Building2 className="h-4 w-4 text-muted-foreground" />
|
|
<div>
|
|
<div className="font-medium">{it.nombre}</div>
|
|
<div className="text-xs font-mono text-muted-foreground">{it.rfc}</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</td>
|
|
<td className="px-4 py-3 text-muted-foreground">
|
|
{it.carteraNombre ?? '—'}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
{pct === null ? (
|
|
<span className="text-xs text-muted-foreground">Sin datos</span>
|
|
) : (
|
|
<div className="flex items-center gap-2" title={`${completadas} de ${total} completadas`}>
|
|
<div className="flex-1 h-2 rounded-full bg-muted overflow-hidden">
|
|
<div
|
|
className={`h-full transition-all ${barColor}`}
|
|
style={{ width: `${pct}%` }}
|
|
/>
|
|
</div>
|
|
<span className={`text-xs font-medium tabular-nums ${
|
|
pct >= 80 ? 'text-success' :
|
|
pct >= 50 ? 'text-amber-600' :
|
|
'text-destructive'
|
|
}`}>
|
|
{pct}%
|
|
</span>
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td className="px-3 py-3 text-center">
|
|
{tieneAtrasos ? (
|
|
<span
|
|
className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-destructive/10 text-destructive"
|
|
title={`Obligaciones: ${it.obligacionesAtrasadas} · Tareas: ${it.tareasAtrasadas}`}
|
|
>
|
|
<AlertTriangle className="h-3 w-3" />
|
|
{totalAtrasos}
|
|
</span>
|
|
) : (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs text-muted-foreground bg-muted">
|
|
<CheckCircle2 className="h-3 w-3" /> Al día
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td className="px-3 py-3 text-center" title="Completadas / Pendientes">
|
|
<span className="text-success">{it.obligacionesCompletadas}</span>
|
|
<span className="text-muted-foreground"> / </span>
|
|
<span className={it.obligacionesPendientes > 0 ? 'text-amber-600 font-medium' : 'text-muted-foreground'}>
|
|
{it.obligacionesPendientes}
|
|
</span>
|
|
</td>
|
|
<td className="px-3 py-3 text-center" title="Completadas / Pendientes">
|
|
<span className="text-success">{it.tareasCompletadas}</span>
|
|
<span className="text-muted-foreground"> / </span>
|
|
<span className={it.tareasPendientes > 0 ? 'text-amber-600 font-medium' : 'text-muted-foreground'}>
|
|
{it.tareasPendientes}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</main>
|
|
</>
|
|
);
|
|
}
|