feat(web): add dashboard page with KPIs, charts, and alerts

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/web/app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import { Header } from '@/components/layouts/header';
+import { KpiCard } from '@/components/charts/kpi-card';
+import { BarChart } from '@/components/charts/bar-chart';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { useKpis, useIngresosEgresos, useAlertas, useResumenFiscal } from '@/lib/hooks/use-dashboard';
+import {
+  TrendingUp,
+  TrendingDown,
+  Wallet,
+  Receipt,
+  FileText,
+  AlertTriangle,
+} from 'lucide-react';
+
+export default function DashboardPage() {
+  const currentYear = new Date().getFullYear();
+  const currentMonth = new Date().getMonth() + 1;
+
+  const { data: kpis, isLoading: kpisLoading } = useKpis(currentYear, currentMonth);
+  const { data: chartData, isLoading: chartLoading } = useIngresosEgresos(currentYear);
+  const { data: alertas, isLoading: alertasLoading } = useAlertas(5);
+  const { data: resumenFiscal } = useResumenFiscal(currentYear, currentMonth);
+
+  const formatCurrency = (value: number) =>
+    new Intl.NumberFormat('es-MX', {
+      style: 'currency',
+      currency: 'MXN',
+      minimumFractionDigits: 0,
+    }).format(value);
+
+  return (
+    <>
+      <Header title="Dashboard" />
+      <main className="p-6 space-y-6">
+        {/* KPIs */}
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          <KpiCard
+            title="Ingresos del Mes"
+            value={kpis?.ingresos || 0}
+            icon={<TrendingUp className="h-4 w-4" />}
+            trend="up"
+            trendValue="+12.5%"
+            subtitle="vs mes anterior"
+          />
+          <KpiCard
+            title="Egresos del Mes"
+            value={kpis?.egresos || 0}
+            icon={<TrendingDown className="h-4 w-4" />}
+            trend="down"
+            trendValue="-3.2%"
+            subtitle="vs mes anterior"
+          />
+          <KpiCard
+            title="Utilidad"
+            value={kpis?.utilidad || 0}
+            icon={<Wallet className="h-4 w-4" />}
+            trend={kpis?.utilidad && kpis.utilidad > 0 ? 'up' : 'down'}
+            trendValue={`${kpis?.margen || 0}% margen`}
+          />
+          <KpiCard
+            title="Balance IVA"
+            value={kpis?.ivaBalance || 0}
+            icon={<Receipt className="h-4 w-4" />}
+            trend={kpis?.ivaBalance && kpis.ivaBalance > 0 ? 'up' : 'down'}
+            trendValue={kpis?.ivaBalance && kpis.ivaBalance > 0 ? 'Por pagar' : 'A favor'}
+          />
+        </div>
+
+        {/* Charts and Alerts */}
+        <div className="grid gap-6 lg:grid-cols-3">
+          <div className="lg:col-span-2">
+            <BarChart
+              title="Ingresos vs Egresos"
+              data={chartData || []}
+            />
+          </div>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-base font-medium">
+                <AlertTriangle className="h-4 w-4" />
+                Alertas
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {alertasLoading ? (
+                <p className="text-sm text-muted-foreground">Cargando...</p>
+              ) : alertas?.length === 0 ? (
+                <p className="text-sm text-muted-foreground">No hay alertas pendientes</p>
+              ) : (
+                alertas?.map((alerta) => (
+                  <div
+                    key={alerta.id}
+                    className={`p-3 rounded-lg border ${
+                      alerta.prioridad === 'alta'
+                        ? 'border-destructive/50 bg-destructive/10'
+                        : 'border-border bg-muted/50'
+                    }`}
+                  >
+                    <p className="text-sm font-medium">{alerta.titulo}</p>
+                    <p className="text-xs text-muted-foreground mt-1">
+                      {alerta.mensaje}
+                    </p>
+                  </div>
+                ))
+              )}
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Resumen Fiscal */}
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          <Card>
+            <CardContent className="p-4">
+              <p className="text-sm text-muted-foreground">CFDIs Emitidos</p>
+              <p className="text-2xl font-bold">{kpis?.cfdisEmitidos || 0}</p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="p-4">
+              <p className="text-sm text-muted-foreground">CFDIs Recibidos</p>
+              <p className="text-2xl font-bold">{kpis?.cfdisRecibidos || 0}</p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="p-4">
+              <p className="text-sm text-muted-foreground">IVA a Favor Acumulado</p>
+              <p className="text-2xl font-bold text-success">
+                {formatCurrency(resumenFiscal?.ivaAFavor || 0)}
+              </p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="p-4">
+              <p className="text-sm text-muted-foreground">Declaraciones Pendientes</p>
+              <p className="text-2xl font-bold">
+                {resumenFiscal?.declaracionesPendientes || 0}
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      </main>
+    </>
+  );
+}

apps/web/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
 import { ThemeProvider } from '@/components/providers/theme-provider';
+import { QueryProvider } from '@/components/providers/query-provider';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -18,7 +19,9 @@ export default function RootLayout({
   return (
     <html lang="es" suppressHydrationWarning>
       <body className={inter.className}>
-        <ThemeProvider>{children}</ThemeProvider>
+        <QueryProvider>
+          <ThemeProvider>{children}</ThemeProvider>
+        </QueryProvider>
       </body>
     </html>
   );

apps/web/components/providers/query-provider.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useState } from 'react';
+
+export function QueryProvider({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 60 * 1000,
+            refetchOnWindowFocus: false,
+          },
+        },
+      })
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}