feat(web): add impuestos page with IVA/ISR control
This commit is contained in:
Consultoria AS
246
apps/web/app/(dashboard)/impuestos/page.tsx
Normal file
246
apps/web/app/(dashboard)/impuestos/page.tsx
Normal file
@@ -0,0 +1,246 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { Header } from '@/components/layouts/header';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { KpiCard } from '@/components/charts/kpi-card';
|
||||||
|
import { useIvaMensual, useResumenIva, useResumenIsr } from '@/lib/hooks/use-impuestos';
|
||||||
|
import { Calculator, TrendingUp, TrendingDown, Receipt } from 'lucide-react';
|
||||||
|
|
||||||
|
const meses = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
|
||||||
|
|
||||||
|
export default function ImpuestosPage() {
|
||||||
|
const currentYear = new Date().getFullYear();
|
||||||
|
const currentMonth = new Date().getMonth() + 1;
|
||||||
|
const [año] = useState(currentYear);
|
||||||
|
const [activeTab, setActiveTab] = useState<'iva' | 'isr'>('iva');
|
||||||
|
|
||||||
|
const { data: ivaMensual, isLoading: ivaLoading } = useIvaMensual(año);
|
||||||
|
const { data: resumenIva } = useResumenIva(año, currentMonth);
|
||||||
|
const { data: resumenIsr } = useResumenIsr(año, currentMonth);
|
||||||
|
|
||||||
|
const formatCurrency = (value: number) =>
|
||||||
|
new Intl.NumberFormat('es-MX', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'MXN',
|
||||||
|
minimumFractionDigits: 0,
|
||||||
|
}).format(value);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Header title="Control de Impuestos" />
|
||||||
|
<main className="p-6 space-y-6">
|
||||||
|
{/* Tabs */}
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{activeTab === 'iva' && (
|
||||||
|
<>
|
||||||
|
{/* IVA KPIs */}
|
||||||
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||||
|
<KpiCard
|
||||||
|
title="IVA Trasladado"
|
||||||
|
value={resumenIva?.trasladado || 0}
|
||||||
|
icon={<TrendingUp className="h-4 w-4" />}
|
||||||
|
subtitle="Cobrado a clientes"
|
||||||
|
/>
|
||||||
|
<KpiCard
|
||||||
|
title="IVA Acreditable"
|
||||||
|
value={resumenIva?.acreditable || 0}
|
||||||
|
icon={<TrendingDown className="h-4 w-4" />}
|
||||||
|
subtitle="Pagado a proveedores"
|
||||||
|
/>
|
||||||
|
<KpiCard
|
||||||
|
title="Resultado del Mes"
|
||||||
|
value={resumenIva?.resultado || 0}
|
||||||
|
icon={<Calculator className="h-4 w-4" />}
|
||||||
|
trend={(resumenIva?.resultado || 0) > 0 ? 'up' : 'down'}
|
||||||
|
trendValue={(resumenIva?.resultado || 0) > 0 ? 'Por pagar' : 'A favor'}
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
<CardTitle className="text-base">Histórico IVA {año}</CardTitle>
|
||||||
|
</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 */}
|
||||||
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||||
|
<KpiCard
|
||||||
|
title="Ingresos Acumulados"
|
||||||
|
value={resumenIsr?.ingresosAcumulados || 0}
|
||||||
|
icon={<TrendingUp className="h-4 w-4" />}
|
||||||
|
/>
|
||||||
|
<KpiCard
|
||||||
|
title="Deducciones"
|
||||||
|
value={resumenIsr?.deducciones || 0}
|
||||||
|
icon={<TrendingDown className="h-4 w-4" />}
|
||||||
|
/>
|
||||||
|
<KpiCard
|
||||||
|
title="Base Gravable"
|
||||||
|
value={resumenIsr?.baseGravable || 0}
|
||||||
|
icon={<Calculator className="h-4 w-4" />}
|
||||||
|
/>
|
||||||
|
<KpiCard
|
||||||
|
title="ISR a Pagar"
|
||||||
|
value={resumenIsr?.isrAPagar || 0}
|
||||||
|
icon={<Receipt className="h-4 w-4" />}
|
||||||
|
trend={(resumenIsr?.isrAPagar || 0) > 0 ? 'up' : 'neutral'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ISR Info Card */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Cálculo de ISR Acumulado</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<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(resumenIsr?.ingresosAcumulados || 0)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between py-2 border-b">
|
||||||
|
<span className="text-muted-foreground">(-) Deducciones autorizadas</span>
|
||||||
|
<span className="font-medium">
|
||||||
|
{formatCurrency(resumenIsr?.deducciones || 0)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between py-2 border-b">
|
||||||
|
<span className="text-muted-foreground">(=) Base gravable</span>
|
||||||
|
<span className="font-medium">
|
||||||
|
{formatCurrency(resumenIsr?.baseGravable || 0)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between py-2 border-b">
|
||||||
|
<span className="text-muted-foreground">ISR causado (estimado)</span>
|
||||||
|
<span className="font-medium">
|
||||||
|
{formatCurrency(resumenIsr?.isrCausado || 0)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between py-2 border-b">
|
||||||
|
<span className="text-muted-foreground">(-) ISR retenido</span>
|
||||||
|
<span className="font-medium">
|
||||||
|
{formatCurrency(resumenIsr?.isrRetenido || 0)}
|
||||||
|
</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(resumenIsr?.isrAPagar || 0)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
32
apps/web/lib/api/impuestos.ts
Normal file
32
apps/web/lib/api/impuestos.ts
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
import { apiClient } from './client';
|
||||||
|
import type { IvaMensual, IsrMensual, ResumenIva, ResumenIsr } from '@horux/shared';
|
||||||
|
|
||||||
|
export async function getIvaMensual(año?: number): Promise<IvaMensual[]> {
|
||||||
|
const params = año ? `?año=${año}` : '';
|
||||||
|
const response = await apiClient.get<IvaMensual[]>(`/impuestos/iva/mensual${params}`);
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getResumenIva(año?: number, mes?: number): Promise<ResumenIva> {
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
if (año) params.set('año', año.toString());
|
||||||
|
if (mes) params.set('mes', mes.toString());
|
||||||
|
|
||||||
|
const response = await apiClient.get<ResumenIva>(`/impuestos/iva/resumen?${params}`);
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getIsrMensual(año?: number): Promise<IsrMensual[]> {
|
||||||
|
const params = año ? `?año=${año}` : '';
|
||||||
|
const response = await apiClient.get<IsrMensual[]>(`/impuestos/isr/mensual${params}`);
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getResumenIsr(año?: number, mes?: number): Promise<ResumenIsr> {
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
if (año) params.set('año', año.toString());
|
||||||
|
if (mes) params.set('mes', mes.toString());
|
||||||
|
|
||||||
|
const response = await apiClient.get<ResumenIsr>(`/impuestos/isr/resumen?${params}`);
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
30
apps/web/lib/hooks/use-impuestos.ts
Normal file
30
apps/web/lib/hooks/use-impuestos.ts
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import * as impuestosApi from '@/lib/api/impuestos';
|
||||||
|
|
||||||
|
export function useIvaMensual(año?: number) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['iva-mensual', año],
|
||||||
|
queryFn: () => impuestosApi.getIvaMensual(año),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useResumenIva(año?: number, mes?: number) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['iva-resumen', año, mes],
|
||||||
|
queryFn: () => impuestosApi.getResumenIva(año, mes),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useIsrMensual(año?: number) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['isr-mensual', año],
|
||||||
|
queryFn: () => impuestosApi.getIsrMensual(año),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useResumenIsr(año?: number, mes?: number) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['isr-resumen', año, mes],
|
||||||
|
queryFn: () => impuestosApi.getResumenIsr(año, mes),
|
||||||
|
});
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user