Update: nueva version Horux Despachos
This commit is contained in:
consultoria-as
643
apps/web/app/(dashboard)/impuestos/page.tsx
Normal file
643
apps/web/app/(dashboard)/impuestos/page.tsx
Normal file
@@ -0,0 +1,643 @@
|
||||
'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, useResumenIsrDesglosado, 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 [considerarActivos, setConsiderarActivos] = useState(true);
|
||||
const [considerarNCs, setConsiderarNCs] = useState(true);
|
||||
|
||||
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, considerarActivos, considerarNCs);
|
||||
const { data: isrMensual, isLoading: isrLoading } = useIsrMensual(año, conciliacion, regimenSeleccionado, considerarActivos, considerarNCs);
|
||||
const { data: resumenIva } = useResumenIva(fechaInicio, fechaFin, conciliacion, considerarActivos, considerarNCs);
|
||||
const { data: resumenIsr } = useResumenIsr(fechaInicio, fechaFin, conciliacion, considerarActivos, considerarNCs);
|
||||
const { data: resumenIsrDesglose } = useResumenIsrDesglosado(fechaFin, conciliacion, considerarActivos, considerarNCs);
|
||||
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>
|
||||
<button
|
||||
onClick={() => setConsiderarActivos(!considerarActivos)}
|
||||
className={cn(
|
||||
'flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
||||
considerarActivos
|
||||
? 'bg-primary/10 text-primary border border-primary/30'
|
||||
: 'hover:bg-accent'
|
||||
)}
|
||||
title="Si está inactivo, no se consideran facturas tipo I con uso de CFDI I01-I08 (compras de activos fijos)."
|
||||
>
|
||||
<CheckSquare className="h-4 w-4" />
|
||||
Considerar activos
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setConsiderarNCs(!considerarNCs)}
|
||||
className={cn(
|
||||
'flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
||||
considerarNCs
|
||||
? 'bg-primary/10 text-primary border border-primary/30'
|
||||
: 'hover:bg-accent'
|
||||
)}
|
||||
title="Si está inactivo, no se consideran facturas tipo E con tipo de relación 01 (notas de crédito)."
|
||||
>
|
||||
<CheckSquare className="h-4 w-4" />
|
||||
Considerar NCs
|
||||
</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">Cálculo de ISR del Periodo</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{(() => {
|
||||
const desglose = resumenIsrDesglose;
|
||||
if (!desglose) {
|
||||
return <div className="text-sm text-muted-foreground">Cargando…</div>;
|
||||
}
|
||||
const { delPeriodo, anteriores, total, mesFinal, anio } = desglose;
|
||||
const labelMesFinal = `${meses[mesFinal - 1]} ${anio}`;
|
||||
const labelAnteriores =
|
||||
mesFinal === 1
|
||||
? '(sin meses anteriores)'
|
||||
: mesFinal === 2
|
||||
? `(${meses[0]})`
|
||||
: `(${meses[0]}-${meses[mesFinal - 2]})`;
|
||||
|
||||
// Resolver per-régimen si hay régimen seleccionado, igual patrón que antes.
|
||||
const ingPer = regimenSeleccionado
|
||||
? delPeriodo.ingresosPorRegimen?.find(r => r.regimenClave === regimenSeleccionado)?.monto || 0
|
||||
: delPeriodo.ingresosAcumulados || 0;
|
||||
const ingAnt = regimenSeleccionado
|
||||
? anteriores.ingresosPorRegimen?.find(r => r.regimenClave === regimenSeleccionado)?.monto || 0
|
||||
: anteriores.ingresosAcumulados || 0;
|
||||
const dedPer = regimenSeleccionado
|
||||
? delPeriodo.deduccionesPorRegimen?.find(r => r.regimenClave === regimenSeleccionado)?.monto || 0
|
||||
: delPeriodo.deducciones || 0;
|
||||
const dedAnt = regimenSeleccionado
|
||||
? anteriores.deduccionesPorRegimen?.find(r => r.regimenClave === regimenSeleccionado)?.monto || 0
|
||||
: anteriores.deducciones || 0;
|
||||
const bgTotal = regimenSeleccionado
|
||||
? total.baseGravablePorRegimen?.find(r => r.regimenClave === regimenSeleccionado)?.baseGravable || 0
|
||||
: total.baseGravable || 0;
|
||||
const causadoTotal = regimenSeleccionado
|
||||
? total.baseGravablePorRegimen?.find(r => r.regimenClave === regimenSeleccionado)?.isrCausado || 0
|
||||
: total.isrCausado || 0;
|
||||
const retenido = total.isrRetenido || 0;
|
||||
const aPagar = Math.max(0, causadoTotal - (regimenSeleccionado ? 0 : retenido));
|
||||
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between py-2 border-b">
|
||||
<span className="text-muted-foreground">Ingresos del periodo ({labelMesFinal})</span>
|
||||
<span className="font-medium">{formatCurrency(ingPer)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2 border-b">
|
||||
<span className="text-muted-foreground">(+) Ingresos acumulados anteriores {labelAnteriores}</span>
|
||||
<span className="font-medium">{formatCurrency(ingAnt)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2 border-b">
|
||||
<span className="text-muted-foreground">(−) Deducciones del periodo ({labelMesFinal})</span>
|
||||
<span className="font-medium">{formatCurrency(dedPer)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2 border-b">
|
||||
<span className="text-muted-foreground">(−) Deducciones acumuladas anteriores {labelAnteriores}</span>
|
||||
<span className="font-medium">{formatCurrency(dedAnt)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2 border-b">
|
||||
<span className="font-medium">(=) Base gravable acumulada</span>
|
||||
<span className={cn('font-medium', bgTotal < 0 ? 'text-destructive' : '')}>
|
||||
{formatCurrency(bgTotal)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2 border-b">
|
||||
<span className="text-muted-foreground">ISR causado (acumulado)</span>
|
||||
<span className="font-medium">{formatCurrency(causadoTotal)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2 border-b">
|
||||
<span className="text-muted-foreground">(−) ISR retenido (acumulado)</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 mt-2">
|
||||
<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,
|
||||
'Ingresos Acumulados': r.ingresosAcum,
|
||||
Deducciones: r.deducciones,
|
||||
'Deducciones Acumuladas': r.deduccionesAcum,
|
||||
'Base Gravable Acumulada': r.baseGravableAcum,
|
||||
})),
|
||||
[
|
||||
{ header: 'Mes', key: 'Mes', width: 12 },
|
||||
{ header: 'Ingresos', key: 'Ingresos', width: 18 },
|
||||
{ header: 'Ingresos Acumulados', key: 'Ingresos Acumulados', width: 22 },
|
||||
{ header: 'Deducciones', key: 'Deducciones', width: 18 },
|
||||
{ header: 'Deducciones Acumuladas', key: 'Deducciones Acumuladas', width: 22 },
|
||||
{ header: 'Base Gravable Acumulada', key: 'Base Gravable Acumulada', width: 22 },
|
||||
],
|
||||
`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">Ingresos Acum.</th>
|
||||
<th className="pb-3 font-medium text-right">Deducciones</th>
|
||||
<th className="pb-3 font-medium text-right">Deducciones Acum.</th>
|
||||
<th className="pb-3 font-medium text-right">Base Gravable Acum.</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.ingresosAcum)}</td>
|
||||
<td className="py-3 text-right">{formatCurrency(row.deducciones)}</td>
|
||||
<td className="py-3 text-right">{formatCurrency(row.deduccionesAcum)}</td>
|
||||
<td className={cn(
|
||||
'py-3 text-right font-medium',
|
||||
row.baseGravableAcum < 0 ? 'text-destructive' : ''
|
||||
)}>
|
||||
{formatCurrency(row.baseGravableAcum)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{(!isrMensual || isrMensual.length === 0) && (
|
||||
<tr>
|
||||
<td colSpan={6} className="py-8 text-center text-muted-foreground">
|
||||
No hay registros de ISR para este año
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeTab === 'activos-fijos' && (
|
||||
<ActivosFijosTab año={año} mes={mes} />
|
||||
)}
|
||||
|
||||
<FiscalDisclaimer />
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user