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>
</>
);
}

273
apps/web/app/(dashboard)/despachos/equipo/page.tsx Normal file
View File

@@ -0,0 +1,273 @@
'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>
)}
</>
);
}

199
apps/web/app/(dashboard)/despachos/mis-asignados/page.tsx Normal file
View File

@@ -0,0 +1,199 @@
'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>
</>
);
}

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

@@ -0,0 +1,16 @@
'use client';
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuthStore } from '@/stores/auth-store';
import { defaultDespachoPathForRole } from '@/components/despachos/despacho-subnav';
export default function DespachosIndex() {
const router = useRouter();
const role = useAuthStore(s => s.user?.role);
useEffect(() => {
if (!role) return;
router.replace(defaultDespachoPathForRole(role));
}, [role, router]);
return null;
}