584 lines
28 KiB
TypeScript
584 lines
28 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { Header } from '@/components/layouts/header';
|
|
import { Card, CardContent, CardHeader, CardTitle, Button, Input } from '@horux/shared-ui';
|
|
import { KpiCard, PeriodSelector, RegimenSelector } from '@horux/shared-ui';
|
|
import { useIvaMensual, useIsrMensual, useResumenIva, useResumenIsr, useCoeficiente } from '@/lib/hooks/use-impuestos';
|
|
import { setCoeficiente as setCoeficienteApi } from '@/lib/api/impuestos';
|
|
import { useQueryClient } from '@tanstack/react-query';
|
|
import { useRegimenesDelPeriodo } from '@/lib/hooks/use-dashboard';
|
|
import { Calculator, TrendingUp, TrendingDown, Receipt, Settings, Wallet, CheckSquare, Download } from 'lucide-react';
|
|
import { cn } from '@horux/shared-ui';
|
|
import { FiscalDisclaimer } from '@/components/fiscal-disclaimer';
|
|
import { exportToExcel } from '@/lib/export-excel';
|
|
import { ActivosFijosTab } from '@/components/impuestos/activos-fijos-tab';
|
|
|
|
const meses = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
|
|
|
|
function getMonthRange(year: number, month: number) {
|
|
const start = `${year}-${String(month).padStart(2, '0')}-01`;
|
|
const lastDay = new Date(year, month, 0).getDate();
|
|
const end = `${year}-${String(month).padStart(2, '0')}-${String(lastDay).padStart(2, '0')}`;
|
|
return { start, end };
|
|
}
|
|
|
|
export default function ImpuestosPage() {
|
|
const now = new Date();
|
|
const defaultRange = getMonthRange(now.getFullYear(), now.getMonth() + 1);
|
|
|
|
const [fechaInicio, setFechaInicio] = useState(defaultRange.start);
|
|
const [fechaFin, setFechaFin] = useState(defaultRange.end);
|
|
const [activeTab, setActiveTab] = useState<'iva' | 'isr' | 'activos-fijos'>('iva');
|
|
const [regimenSeleccionado, setRegimenSeleccionado] = useState<string | null>(null);
|
|
const [conciliacion, setConciliacion] = useState(false);
|
|
|
|
const año = new Date(fechaInicio + 'T00:00:00').getFullYear();
|
|
const mes = new Date(fechaInicio + 'T00:00:00').getMonth() + 1;
|
|
|
|
const queryClient = useQueryClient();
|
|
const [coefInput, setCoefInput] = useState('');
|
|
const [savingCoef, setSavingCoef] = useState(false);
|
|
|
|
const { data: ivaMensual, isLoading: ivaLoading } = useIvaMensual(año, conciliacion);
|
|
const { data: isrMensual, isLoading: isrLoading } = useIsrMensual(año, conciliacion, regimenSeleccionado);
|
|
const { data: resumenIva } = useResumenIva(fechaInicio, fechaFin, conciliacion);
|
|
const { data: resumenIsr } = useResumenIsr(fechaInicio, fechaFin, conciliacion);
|
|
const { data: coefData } = useCoeficiente(año);
|
|
const { data: regimenesPeriodo, isLoading: regimenesLoading } = useRegimenesDelPeriodo(fechaInicio, fechaFin, conciliacion);
|
|
|
|
const regimenesDisponibles = regimenesPeriodo || [];
|
|
if (regimenSeleccionado && regimenesDisponibles.length > 0 &&
|
|
!regimenesDisponibles.find(r => r.clave === regimenSeleccionado)) {
|
|
setRegimenSeleccionado(null);
|
|
}
|
|
|
|
const formatCurrency = (value: number) =>
|
|
new Intl.NumberFormat('es-MX', {
|
|
style: 'currency',
|
|
currency: 'MXN',
|
|
minimumFractionDigits: 0,
|
|
}).format(value);
|
|
|
|
const drillUrl = (titulo: string, filters: Record<string, string>) => {
|
|
const p = new URLSearchParams({ titulo, fechaInicio, fechaFin, status: 'vigente', ...filters });
|
|
if (regimenSeleccionado) {
|
|
if (filters.type === 'EMITIDO') p.set('regimenEmisor', regimenSeleccionado);
|
|
if (filters.type === 'RECIBIDO') p.set('regimenReceptor', regimenSeleccionado);
|
|
}
|
|
return `/drill-down?${p}`;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Header title="Control de Impuestos">
|
|
<PeriodSelector
|
|
fechaInicio={fechaInicio}
|
|
fechaFin={fechaFin}
|
|
onChange={(fi, ff) => { setFechaInicio(fi); setFechaFin(ff); }}
|
|
/>
|
|
</Header>
|
|
<main className="p-6 space-y-6">
|
|
{/* Filtros */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<RegimenSelector
|
|
regimenes={regimenesDisponibles}
|
|
selected={regimenSeleccionado}
|
|
onChange={setRegimenSeleccionado}
|
|
isLoading={regimenesLoading}
|
|
/>
|
|
<button
|
|
onClick={() => setConciliacion(!conciliacion)}
|
|
className={cn(
|
|
'flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
|
conciliacion
|
|
? 'bg-primary/10 text-primary border border-primary/30'
|
|
: 'hover:bg-accent'
|
|
)}
|
|
>
|
|
<CheckSquare className="h-4 w-4" />
|
|
Conciliación
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant={activeTab === 'iva' ? 'default' : 'outline'}
|
|
onClick={() => setActiveTab('iva')}
|
|
>
|
|
<Receipt className="h-4 w-4 mr-2" />
|
|
IVA
|
|
</Button>
|
|
<Button
|
|
variant={activeTab === 'isr' ? 'default' : 'outline'}
|
|
onClick={() => setActiveTab('isr')}
|
|
>
|
|
<Calculator className="h-4 w-4 mr-2" />
|
|
ISR
|
|
</Button>
|
|
<Button
|
|
variant={activeTab === 'activos-fijos' ? 'default' : 'outline'}
|
|
onClick={() => setActiveTab('activos-fijos')}
|
|
>
|
|
<Wallet className="h-4 w-4 mr-2" />
|
|
Activos Fijos
|
|
</Button>
|
|
</div>
|
|
|
|
{activeTab === 'iva' && (
|
|
<>
|
|
{/* IVA KPIs */}
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5">
|
|
<KpiCard
|
|
title={regimenSeleccionado ? `IVA Trasladado (${regimenSeleccionado})` : 'IVA Trasladado'}
|
|
value={
|
|
regimenSeleccionado
|
|
? resumenIva?.trasladadoPorRegimen?.find(r => r.regimenClave === regimenSeleccionado)?.monto || 0
|
|
: resumenIva?.trasladado || 0
|
|
}
|
|
icon={<TrendingUp className="h-4 w-4" />}
|
|
subtitle="Cobrado a clientes"
|
|
href={drillUrl('IVA Trasladado - CFDIs Emitidos', { bucket: 'causado' })}
|
|
/>
|
|
<KpiCard
|
|
title={regimenSeleccionado ? `IVA Acreditable (${regimenSeleccionado})` : 'IVA Acreditable'}
|
|
value={
|
|
regimenSeleccionado
|
|
? resumenIva?.acreditablePorRegimen?.find(r => r.regimenClave === regimenSeleccionado)?.monto || 0
|
|
: resumenIva?.acreditable || 0
|
|
}
|
|
icon={<TrendingDown className="h-4 w-4" />}
|
|
subtitle="Pagado a proveedores"
|
|
href={drillUrl('IVA Acreditable - CFDIs Recibidos', { bucket: 'acreditable' })}
|
|
/>
|
|
{(() => {
|
|
const val = regimenSeleccionado
|
|
? resumenIva?.retenidoPorRegimen?.find(r => r.regimenClave === regimenSeleccionado)?.monto || 0
|
|
: resumenIva?.retenido || 0;
|
|
return (
|
|
<KpiCard
|
|
title={regimenSeleccionado ? `IVA Retenido (${regimenSeleccionado})` : 'IVA Retenido'}
|
|
value={val}
|
|
icon={<Receipt className="h-4 w-4" />}
|
|
trend={val > 0 ? 'up' : val < 0 ? 'down' : 'neutral'}
|
|
trendValue={val > 0 ? 'A favor' : val < 0 ? 'En contra' : 'Neutro'}
|
|
/>
|
|
);
|
|
})()}
|
|
{(() => {
|
|
const t = regimenSeleccionado
|
|
? resumenIva?.trasladadoPorRegimen?.find(r => r.regimenClave === regimenSeleccionado)?.monto || 0
|
|
: resumenIva?.trasladado || 0;
|
|
const a = regimenSeleccionado
|
|
? resumenIva?.acreditablePorRegimen?.find(r => r.regimenClave === regimenSeleccionado)?.monto || 0
|
|
: resumenIva?.acreditable || 0;
|
|
const ret = regimenSeleccionado
|
|
? resumenIva?.retenidoPorRegimen?.find(r => r.regimenClave === regimenSeleccionado)?.monto || 0
|
|
: resumenIva?.retenido || 0;
|
|
const res = t - a - ret;
|
|
return (
|
|
<KpiCard
|
|
title={regimenSeleccionado ? `Resultado (${regimenSeleccionado})` : 'Resultado del Periodo'}
|
|
value={res}
|
|
icon={<Calculator className="h-4 w-4" />}
|
|
trend={res > 0 ? 'up' : res < 0 ? 'down' : 'neutral'}
|
|
trendValue={res > 0 ? 'Por pagar' : res < 0 ? 'A favor' : 'Neutro'}
|
|
/>
|
|
);
|
|
})()}
|
|
<KpiCard
|
|
title="Acumulado Anual"
|
|
value={resumenIva?.acumuladoAnual || 0}
|
|
icon={<Receipt className="h-4 w-4" />}
|
|
trend={(resumenIva?.acumuladoAnual || 0) < 0 ? 'up' : 'neutral'}
|
|
trendValue={(resumenIva?.acumuladoAnual || 0) < 0 ? 'Saldo a favor' : ''}
|
|
/>
|
|
</div>
|
|
|
|
{/* IVA Mensual Table */}
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<CardTitle className="text-base">Histórico IVA {año}</CardTitle>
|
|
{ivaMensual && ivaMensual.length > 0 && (
|
|
<Button variant="outline" size="sm" onClick={() => exportToExcel(
|
|
ivaMensual.map(r => ({
|
|
Mes: meses[r.mes - 1],
|
|
Trasladado: r.ivaTrasladado,
|
|
Acreditable: r.ivaAcreditable,
|
|
Retenido: r.ivaRetenido,
|
|
Resultado: r.resultado,
|
|
Acumulado: r.acumulado,
|
|
})),
|
|
[
|
|
{ header: 'Mes', key: 'Mes', width: 12 },
|
|
{ header: 'Trasladado', key: 'Trasladado', width: 18 },
|
|
{ header: 'Acreditable', key: 'Acreditable', width: 18 },
|
|
{ header: 'Retenido', key: 'Retenido', width: 18 },
|
|
{ header: 'Resultado', key: 'Resultado', width: 18 },
|
|
{ header: 'Acumulado', key: 'Acumulado', width: 18 },
|
|
],
|
|
`iva-mensual-${año}`,
|
|
)}>
|
|
<Download className="h-4 w-4 mr-1" /> Excel
|
|
</Button>
|
|
)}
|
|
</CardHeader>
|
|
<CardContent>
|
|
{ivaLoading ? (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
Cargando...
|
|
</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">Mes</th>
|
|
<th className="pb-3 font-medium text-right">Trasladado</th>
|
|
<th className="pb-3 font-medium text-right">Acreditable</th>
|
|
<th className="pb-3 font-medium text-right">Retenido</th>
|
|
<th className="pb-3 font-medium text-right">Resultado</th>
|
|
<th className="pb-3 font-medium text-right">Acumulado</th>
|
|
<th className="pb-3 font-medium">Estado</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="text-sm">
|
|
{ivaMensual?.map((row) => (
|
|
<tr key={row.mes} className="border-b hover:bg-muted/50">
|
|
<td className="py-3 font-medium">{meses[row.mes - 1]}</td>
|
|
<td className="py-3 text-right">
|
|
{formatCurrency(row.ivaTrasladado)}
|
|
</td>
|
|
<td className="py-3 text-right">
|
|
{formatCurrency(row.ivaAcreditable)}
|
|
</td>
|
|
<td className="py-3 text-right">
|
|
{formatCurrency(row.ivaRetenido)}
|
|
</td>
|
|
<td
|
|
className={`py-3 text-right font-medium ${
|
|
row.resultado > 0
|
|
? 'text-destructive'
|
|
: 'text-success'
|
|
}`}
|
|
>
|
|
{formatCurrency(row.resultado)}
|
|
</td>
|
|
<td
|
|
className={`py-3 text-right font-medium ${
|
|
row.acumulado > 0
|
|
? 'text-destructive'
|
|
: 'text-success'
|
|
}`}
|
|
>
|
|
{formatCurrency(row.acumulado)}
|
|
</td>
|
|
<td className="py-3">
|
|
<span
|
|
className={`px-2 py-1 rounded-full text-xs font-medium ${
|
|
row.estado === 'declarado'
|
|
? 'bg-success/10 text-success'
|
|
: 'bg-warning/10 text-warning'
|
|
}`}
|
|
>
|
|
{row.estado === 'declarado' ? 'Declarado' : 'Pendiente'}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
{(!ivaMensual || ivaMensual.length === 0) && (
|
|
<tr>
|
|
<td colSpan={7} className="py-8 text-center text-muted-foreground">
|
|
No hay registros de IVA para este año
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
)}
|
|
|
|
{activeTab === 'isr' && (
|
|
<>
|
|
{/* ISR KPIs */}
|
|
{(() => {
|
|
const bg = regimenSeleccionado
|
|
? resumenIsr?.baseGravablePorRegimen?.find(r => r.regimenClave === regimenSeleccionado)
|
|
: null;
|
|
|
|
const showUtilidad = true;
|
|
|
|
const ingSel = regimenSeleccionado
|
|
? resumenIsr?.ingresosPorRegimen?.find(r => r.regimenClave === regimenSeleccionado)?.monto || 0
|
|
: resumenIsr?.ingresosAcumulados || 0;
|
|
const dedSel = regimenSeleccionado
|
|
? resumenIsr?.deduccionesPorRegimen?.find(r => r.regimenClave === regimenSeleccionado)?.monto || 0
|
|
: resumenIsr?.deducciones || 0;
|
|
|
|
// ISR a pagar filtered by regime
|
|
const bgSelForKpi = regimenSeleccionado
|
|
? resumenIsr?.baseGravablePorRegimen?.find(r => r.regimenClave === regimenSeleccionado)
|
|
: null;
|
|
const isrCausadoSel = regimenSeleccionado
|
|
? (bgSelForKpi?.isrCausado || 0)
|
|
: resumenIsr?.isrCausado || 0;
|
|
const isrRetenidoSel = regimenSeleccionado ? 0 : resumenIsr?.isrRetenido || 0;
|
|
const isrAPagarSel = Math.max(0, isrCausadoSel - isrRetenidoSel);
|
|
|
|
return (
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5">
|
|
<KpiCard
|
|
title={regimenSeleccionado ? `Ingresos ISR (${regimenSeleccionado})` : 'Ingresos Acumulados'}
|
|
value={ingSel}
|
|
icon={<TrendingUp className="h-4 w-4" />}
|
|
href={drillUrl('Ingresos ISR - CFDIs Emitidos', { bucket: 'ingresos' })}
|
|
/>
|
|
<KpiCard
|
|
title={regimenSeleccionado ? `Deducciones (${regimenSeleccionado})` : 'Deducciones'}
|
|
value={dedSel}
|
|
icon={<TrendingDown className="h-4 w-4" />}
|
|
href={drillUrl('Deducciones - CFDIs Recibidos', { bucket: 'gastos' })}
|
|
/>
|
|
<KpiCard
|
|
title={regimenSeleccionado ? `Base Gravable (${regimenSeleccionado})` : 'Base Gravable'}
|
|
value={regimenSeleccionado ? (bg?.baseGravable ?? 0) : resumenIsr?.baseGravable || 0}
|
|
icon={<Calculator className="h-4 w-4" />}
|
|
subtitle={bg ? (bg.formula === 'ingresos-deducciones' ? 'Ingresos - Deducciones' : 'Solo ingresos') : undefined}
|
|
/>
|
|
<KpiCard
|
|
title={regimenSeleccionado ? `ISR a Pagar (${regimenSeleccionado})` : 'ISR a Pagar'}
|
|
value={isrAPagarSel}
|
|
icon={<Receipt className="h-4 w-4" />}
|
|
trend={isrAPagarSel > 0 ? 'up' : 'neutral'}
|
|
/>
|
|
<KpiCard
|
|
title={regimenSeleccionado ? `Utilidad del Periodo (${regimenSeleccionado})` : 'Utilidad del Periodo'}
|
|
value={ingSel - dedSel}
|
|
icon={<Wallet className="h-4 w-4" />}
|
|
trend={(ingSel - dedSel) > 0 ? 'up' : 'down'}
|
|
subtitle="Ingresos - Deducciones"
|
|
/>
|
|
</div>
|
|
);
|
|
})()}
|
|
|
|
{/* ISR Info + Coeficiente */}
|
|
{(() => {
|
|
// Regímenes PF no usan coeficiente de utilidad
|
|
const REGIMENES_PF = ['605', '606', '612', '621', '625'];
|
|
const isResicoPF = regimenSeleccionado === '626'; // RESICO PF also doesn't use coeficiente
|
|
const showCoeficiente = !regimenSeleccionado || (!REGIMENES_PF.includes(regimenSeleccionado) && !isResicoPF);
|
|
return (
|
|
<div className={`grid gap-4 ${showCoeficiente ? 'lg:grid-cols-3' : ''}`}>
|
|
<Card className={showCoeficiente ? 'lg:col-span-2' : ''}>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Calculo de ISR Acumulado</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{(() => {
|
|
const ing = regimenSeleccionado
|
|
? resumenIsr?.ingresosPorRegimen?.find(r => r.regimenClave === regimenSeleccionado)?.monto || 0
|
|
: resumenIsr?.ingresosAcumulados || 0;
|
|
const ded = regimenSeleccionado
|
|
? resumenIsr?.deduccionesPorRegimen?.find(r => r.regimenClave === regimenSeleccionado)?.monto || 0
|
|
: resumenIsr?.deducciones || 0;
|
|
const bg = regimenSeleccionado
|
|
? resumenIsr?.baseGravablePorRegimen?.find(r => r.regimenClave === regimenSeleccionado)?.baseGravable || 0
|
|
: resumenIsr?.baseGravable || 0;
|
|
const bgRegimen = regimenSeleccionado
|
|
? resumenIsr?.baseGravablePorRegimen?.find(r => r.regimenClave === regimenSeleccionado)
|
|
: null;
|
|
const causado = regimenSeleccionado
|
|
? (bgRegimen?.isrCausado || 0)
|
|
: resumenIsr?.isrCausado || 0;
|
|
const retenido = resumenIsr?.isrRetenido || 0;
|
|
const aPagar = Math.max(0, causado - (regimenSeleccionado ? 0 : retenido));
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between py-2 border-b">
|
|
<span className="text-muted-foreground">Ingresos acumulados</span>
|
|
<span className="font-medium">{formatCurrency(ing)}</span>
|
|
</div>
|
|
<div className="flex justify-between py-2 border-b">
|
|
<span className="text-muted-foreground">(-) Deducciones autorizadas</span>
|
|
<span className="font-medium">{formatCurrency(ded)}</span>
|
|
</div>
|
|
<div className="flex justify-between py-2 border-b">
|
|
<span className="text-muted-foreground">(=) Base gravable</span>
|
|
<span className="font-medium">{formatCurrency(bg)}</span>
|
|
</div>
|
|
<div className="flex justify-between py-2 border-b">
|
|
<span className="text-muted-foreground">ISR causado</span>
|
|
<span className="font-medium">{formatCurrency(causado)}</span>
|
|
</div>
|
|
<div className="flex justify-between py-2 border-b">
|
|
<span className="text-muted-foreground">(-) ISR retenido</span>
|
|
<span className="font-medium">{formatCurrency(regimenSeleccionado ? 0 : retenido)}</span>
|
|
</div>
|
|
<div className="flex justify-between py-2 bg-muted/50 px-4 rounded-lg">
|
|
<span className="font-medium">ISR a pagar</span>
|
|
<span className="font-bold text-lg">{formatCurrency(aPagar)}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
})()}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{showCoeficiente && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base flex items-center gap-2">
|
|
<Settings className="h-4 w-4" />
|
|
Coeficiente de Utilidad {año}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<p className="text-sm text-muted-foreground">
|
|
Se utiliza para calcular el ISR de regimenes como General de Ley (601) y otros.
|
|
</p>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Coeficiente actual</label>
|
|
{coefData?.coeficiente !== null && coefData?.coeficiente !== undefined ? (
|
|
<p className="text-2xl font-bold">{coefData.coeficiente}</p>
|
|
) : (
|
|
<p className="text-sm text-destructive">No configurado</p>
|
|
)}
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Actualizar coeficiente</label>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
type="number"
|
|
step="0.0001"
|
|
min="0"
|
|
max="1"
|
|
placeholder="Ej: 0.3521"
|
|
value={coefInput}
|
|
onChange={(e) => setCoefInput(e.target.value)}
|
|
className="h-9"
|
|
/>
|
|
<Button
|
|
size="sm"
|
|
disabled={!coefInput || savingCoef}
|
|
onClick={async () => {
|
|
const val = parseFloat(coefInput);
|
|
if (isNaN(val) || val < 0 || val > 1) return;
|
|
setSavingCoef(true);
|
|
try {
|
|
await setCoeficienteApi(año, val);
|
|
setCoefInput('');
|
|
queryClient.invalidateQueries({ queryKey: ['coeficiente'] });
|
|
queryClient.invalidateQueries({ queryKey: ['isr-resumen'] });
|
|
} catch {
|
|
alert('Error al guardar');
|
|
} finally {
|
|
setSavingCoef(false);
|
|
}
|
|
}}
|
|
>
|
|
{savingCoef ? 'Guardando...' : 'Guardar'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
Este valor se obtiene de la declaracion anual del ejercicio anterior. No se sobrescribe entre años.
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
})()}
|
|
|
|
{/* ISR Monthly Table */}
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<CardTitle className="text-base">Histórico ISR {año}</CardTitle>
|
|
{isrMensual && isrMensual.length > 0 && (
|
|
<Button variant="outline" size="sm" onClick={() => exportToExcel(
|
|
isrMensual.map(r => ({
|
|
Mes: meses[r.mes - 1],
|
|
Ingresos: r.ingresosAcumulados,
|
|
Deducciones: r.deducciones,
|
|
'Base Gravable': r.baseGravable,
|
|
})),
|
|
[
|
|
{ header: 'Mes', key: 'Mes', width: 12 },
|
|
{ header: 'Ingresos', key: 'Ingresos', width: 18 },
|
|
{ header: 'Deducciones', key: 'Deducciones', width: 18 },
|
|
{ header: 'Base Gravable', key: 'Base Gravable', width: 18 },
|
|
],
|
|
`isr-mensual-${año}`,
|
|
)}>
|
|
<Download className="h-4 w-4 mr-1" /> Excel
|
|
</Button>
|
|
)}
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isrLoading ? (
|
|
<div className="text-center py-8 text-muted-foreground">Cargando...</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">Mes</th>
|
|
<th className="pb-3 font-medium text-right">Ingresos</th>
|
|
<th className="pb-3 font-medium text-right">Deducciones</th>
|
|
<th className="pb-3 font-medium text-right">Base Gravable</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="text-sm">
|
|
{isrMensual?.map((row) => (
|
|
<tr key={row.mes} className="border-b hover:bg-muted/50">
|
|
<td className="py-3 font-medium">{meses[row.mes - 1]}</td>
|
|
<td className="py-3 text-right">{formatCurrency(row.ingresosAcumulados)}</td>
|
|
<td className="py-3 text-right">{formatCurrency(row.deducciones)}</td>
|
|
<td className={`py-3 text-right font-medium ${row.baseGravable > 0 ? 'text-destructive' : 'text-success'}`}>
|
|
{formatCurrency(row.baseGravable)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
{(!isrMensual || isrMensual.length === 0) && (
|
|
<tr>
|
|
<td colSpan={4} className="py-8 text-center text-muted-foreground">
|
|
No hay registros de ISR para este año
|
|
</td>
|
|
</tr>
|
|
)}
|
|
{isrMensual && isrMensual.length > 0 && (
|
|
<tr className="bg-muted/50 font-medium">
|
|
<td className="py-3">Total</td>
|
|
<td className="py-3 text-right">{formatCurrency(isrMensual.reduce((s, r) => s + r.ingresosAcumulados, 0))}</td>
|
|
<td className="py-3 text-right">{formatCurrency(isrMensual.reduce((s, r) => s + r.deducciones, 0))}</td>
|
|
<td className="py-3 text-right">{formatCurrency(isrMensual.reduce((s, r) => s + r.baseGravable, 0))}</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
)}
|
|
|
|
{activeTab === 'activos-fijos' && (
|
|
<ActivosFijosTab año={año} mes={mes} />
|
|
)}
|
|
|
|
<FiscalDisclaimer />
|
|
</main>
|
|
</>
|
|
);
|
|
}
|