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