274 lines
10 KiB
TypeScript
274 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
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 { usePeriodoStore, añoMesFromFechaInicio } from '@/stores/periodo-store';
|
|
import { User, AlertTriangle, Loader2, ChevronDown, ChevronRight, CheckCircle2 } from 'lucide-react';
|
|
|
|
interface Miembro {
|
|
userId: string;
|
|
nombre: string;
|
|
email: string;
|
|
rol: 'supervisor' | 'auxiliar';
|
|
contribuyentes: number;
|
|
obligacionesAtrasadas: number;
|
|
tareasAtrasadas: number;
|
|
totalPendientes: number;
|
|
totalPeriodo: number;
|
|
completadasPeriodo: number;
|
|
avancePct: number | null;
|
|
}
|
|
|
|
interface SupervisorConAuxiliares extends Miembro {
|
|
auxiliares: Miembro[];
|
|
}
|
|
|
|
interface EquipoStatsResponse {
|
|
supervisores: SupervisorConAuxiliares[];
|
|
huerfanos: Miembro[];
|
|
}
|
|
|
|
const ROLES_SUPERVISORY = new Set(['owner', 'cfo', 'supervisor']);
|
|
|
|
function AvanceBar({ pct }: { pct: number | null }) {
|
|
if (pct === null) return <span className="text-xs text-muted-foreground">Sin datos</span>;
|
|
const color =
|
|
pct >= 80 ? 'bg-success' :
|
|
pct >= 50 ? 'bg-amber-500' :
|
|
'bg-destructive';
|
|
const text =
|
|
pct >= 80 ? 'text-success' :
|
|
pct >= 50 ? 'text-amber-600' :
|
|
'text-destructive';
|
|
return (
|
|
<div className="flex items-center gap-2 min-w-[140px]">
|
|
<div className="flex-1 h-2 rounded-full bg-muted overflow-hidden">
|
|
<div className={`h-full transition-all ${color}`} style={{ width: `${pct}%` }} />
|
|
</div>
|
|
<span className={`text-xs font-medium tabular-nums ${text}`}>{pct}%</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function AtrasoBadge({ total }: { total: number }) {
|
|
if (total === 0) {
|
|
return (
|
|
<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>
|
|
);
|
|
}
|
|
return (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-destructive/10 text-destructive">
|
|
<AlertTriangle className="h-3 w-3" />
|
|
{total}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export default function EquipoPage() {
|
|
const role = useAuthStore(s => s.user?.role);
|
|
const enabled = role ? ROLES_SUPERVISORY.has(role) : false;
|
|
const { fechaInicio } = usePeriodoStore();
|
|
const { año, mes } = añoMesFromFechaInicio(fechaInicio);
|
|
const [expandedId, setExpandedId] = useState<string | null>(null);
|
|
|
|
const { data, isLoading } = useQuery<EquipoStatsResponse>({
|
|
queryKey: ['despacho-equipo-stats', año, mes],
|
|
queryFn: async () => {
|
|
const { data } = await apiClient.get<EquipoStatsResponse>(
|
|
`/despachos/equipo-stats?año=${año}&mes=${mes}`,
|
|
);
|
|
return data;
|
|
},
|
|
enabled,
|
|
});
|
|
|
|
if (!enabled) {
|
|
return (
|
|
<>
|
|
<Header title="Despacho — Equipo"><PeriodoSelector /></Header>
|
|
<main className="p-6 max-w-6xl mx-auto">
|
|
<DespachoSubnav />
|
|
<Card>
|
|
<CardContent className="py-8 text-center text-muted-foreground">
|
|
Esta sección solo está disponible para owner y supervisor.
|
|
</CardContent>
|
|
</Card>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const supervisores = data?.supervisores ?? [];
|
|
const huerfanos = data?.huerfanos ?? [];
|
|
const sinDatos = !isLoading && supervisores.length === 0 && huerfanos.length === 0;
|
|
|
|
return (
|
|
<>
|
|
<Header title="Despacho — Equipo"><PeriodoSelector /></Header>
|
|
<main className="p-6 max-w-6xl mx-auto space-y-6">
|
|
<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>
|
|
) : sinDatos ? (
|
|
<Card>
|
|
<CardContent className="py-8 text-center text-muted-foreground">
|
|
No hay supervisores ni auxiliares en el despacho.
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<>
|
|
{supervisores.length > 0 && (
|
|
<Card>
|
|
<CardContent className="p-0">
|
|
<table className="w-full text-sm">
|
|
<thead className="border-b bg-muted/50">
|
|
<tr>
|
|
<th className="w-10"></th>
|
|
<th className="text-left px-4 py-3 font-medium">Miembro</th>
|
|
<th className="text-center px-3 py-3 font-medium">Contribuyentes</th>
|
|
<th className="text-left px-3 py-3 font-medium">Avance del periodo</th>
|
|
<th className="text-center px-3 py-3 font-medium">Atrasos</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{supervisores.map(sup => {
|
|
const expanded = expandedId === sup.userId;
|
|
const tieneAux = sup.auxiliares.length > 0;
|
|
return (
|
|
<FilaSupervisor
|
|
key={sup.userId}
|
|
sup={sup}
|
|
expanded={expanded}
|
|
tieneAux={tieneAux}
|
|
onToggle={() => setExpandedId(expanded ? null : sup.userId)}
|
|
/>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{huerfanos.length > 0 && (
|
|
<div>
|
|
<h2 className="text-sm font-semibold mb-2 text-amber-700 dark:text-amber-400 uppercase tracking-wide flex items-center gap-2">
|
|
<AlertTriangle className="h-4 w-4" />
|
|
Auxiliares sin supervisor asignado
|
|
</h2>
|
|
<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">Auxiliar</th>
|
|
<th className="text-center px-3 py-3 font-medium">Contribuyentes</th>
|
|
<th className="text-left px-3 py-3 font-medium">Avance del periodo</th>
|
|
<th className="text-center px-3 py-3 font-medium">Atrasos</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{huerfanos.map(aux => (
|
|
<tr key={aux.userId} className="border-b hover:bg-muted/30">
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center gap-2">
|
|
<User className="h-4 w-4 text-muted-foreground" />
|
|
<div>
|
|
<div className="font-medium">{aux.nombre}</div>
|
|
<div className="text-xs text-muted-foreground">{aux.email}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-3 py-3 text-center text-muted-foreground">{aux.contribuyentes}</td>
|
|
<td className="px-3 py-3"><AvanceBar pct={aux.avancePct} /></td>
|
|
<td className="px-3 py-3 text-center"><AtrasoBadge total={aux.totalPendientes} /></td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</main>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function FilaSupervisor({
|
|
sup, expanded, tieneAux, onToggle,
|
|
}: {
|
|
sup: SupervisorConAuxiliares;
|
|
expanded: boolean;
|
|
tieneAux: boolean;
|
|
onToggle: () => void;
|
|
}) {
|
|
return (
|
|
<>
|
|
<tr
|
|
className={`border-b ${tieneAux ? 'cursor-pointer hover:bg-muted/30' : ''} ${expanded ? 'bg-muted/30' : ''}`}
|
|
onClick={tieneAux ? onToggle : undefined}
|
|
>
|
|
<td className="px-2 py-3 text-center">
|
|
{tieneAux ? (
|
|
expanded ? <ChevronDown className="h-4 w-4 text-muted-foreground inline" /> : <ChevronRight className="h-4 w-4 text-muted-foreground inline" />
|
|
) : null}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center gap-2">
|
|
<User className="h-4 w-4 text-primary" />
|
|
<div>
|
|
<div className="font-medium">{sup.nombre}</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{sup.email} · {sup.auxiliares.length} auxiliar{sup.auxiliares.length === 1 ? '' : 'es'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-3 py-3 text-center text-muted-foreground">{sup.contribuyentes}</td>
|
|
<td className="px-3 py-3"><AvanceBar pct={sup.avancePct} /></td>
|
|
<td className="px-3 py-3 text-center"><AtrasoBadge total={sup.totalPendientes} /></td>
|
|
</tr>
|
|
{expanded && sup.auxiliares.map(aux => (
|
|
<tr key={aux.userId} className="border-b bg-muted/10">
|
|
<td></td>
|
|
<td className="px-4 py-2 pl-10">
|
|
<div className="flex items-center gap-2">
|
|
<User className="h-4 w-4 text-muted-foreground" />
|
|
<div>
|
|
<div className="text-sm">{aux.nombre}</div>
|
|
<div className="text-xs text-muted-foreground">{aux.email}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-3 py-2 text-center text-muted-foreground">{aux.contribuyentes}</td>
|
|
<td className="px-3 py-2"><AvanceBar pct={aux.avancePct} /></td>
|
|
<td className="px-3 py-2 text-center"><AtrasoBadge total={aux.totalPendientes} /></td>
|
|
</tr>
|
|
))}
|
|
{expanded && sup.auxiliares.length === 0 && (
|
|
<tr className="border-b bg-muted/10">
|
|
<td></td>
|
|
<td colSpan={4} className="px-4 py-3 pl-10 text-xs text-muted-foreground italic">
|
|
Sin auxiliares asignados.
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</>
|
|
);
|
|
}
|