From c92bfc66fed6be9cfe64ac48b5917ac3639e5b08 Mon Sep 17 00:00:00 2001
From: Carlos Escalante <cescalante2988@gmail.com>
Date: Wed, 29 Apr 2026 22:02:46 -0600
Subject: [PATCH] Update pages and components for new module paths

Repoints imports at the relocated lib/api and src/contexts modules,
and refreshes Layout + Login alongside the rest of the migration.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/components/BillingCycleSelector.tsx   |   2 +-
 frontend/src/components/Layout.tsx            | 105 ++++++++----------
 frontend/src/components/PasteImportModal.tsx  |   2 +-
 .../components/PensionManualEntryModal.tsx    |   2 +-
 frontend/src/components/TransactionList.tsx   |   2 +-
 frontend/src/components/TransactionModal.tsx  |   2 +-
 .../components/budget/RecurringItemDialog.tsx |   2 +-
 .../budget/RecurringItemsManager.tsx          |   2 +-
 .../src/components/budget/YearlyOverview.tsx  |   2 +-
 .../transactions/transaction-columns.tsx      |   2 +-
 frontend/src/hooks/useBudget.ts               |   2 +-
 frontend/src/pages/Analytics.tsx              |   4 +-
 frontend/src/pages/Login.tsx                  |  41 ++++---
 frontend/src/pages/Pensions.tsx               |   2 +-
 frontend/src/pages/Salarios.tsx               |   2 +-
 frontend/src/pages/ServiciosMunicipales.tsx   |   2 +-
 16 files changed, 80 insertions(+), 96 deletions(-)

diff --git a/frontend/src/components/BillingCycleSelector.tsx b/frontend/src/components/BillingCycleSelector.tsx
index 2022af9..59eaebd 100644
--- a/frontend/src/components/BillingCycleSelector.tsx
+++ b/frontend/src/components/BillingCycleSelector.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Calendar } from 'lucide-react';
-import api from '../api';
+import api from '@/lib/api';
 import {
   Select,
   SelectContent,
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index c06cf28..6e6ce3c 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -1,6 +1,7 @@
-import { NavLink, Outlet, useNavigate } from 'react-router-dom';
+import { useState, useEffect } from "react";
+import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
 import {
-  LayoutDashboard,
+  Sparkles,
   Calculator,
   BarChart3,
   Landmark,
@@ -15,24 +16,20 @@ import {
   Eye,
   EyeOff,
   type LucideIcon,
-} from 'lucide-react';
-import { useEffect, useState } from 'react';
-import { useAuth } from '../AuthContext';
-import { useTheme } from '../ThemeContext';
-import { usePrivacy } from '../PrivacyContext';
-import { subscribeToPush } from '../pushNotifications';
-import { Button } from '@/components/ui/button';
+} from "lucide-react";
+import { useTheme } from "@/contexts/theme-context";
+import { usePrivacy } from "@/contexts/privacy-context";
+import { useAuth } from "@/AuthContext";
+import { Button } from "@/components/ui/button";
 import {
   Sheet,
   SheetContent,
   SheetHeader,
   SheetTitle,
   SheetClose,
-} from '@/components/ui/sheet';
-import { Separator } from '@/components/ui/separator';
-import { cn } from '@/lib/utils';
-
-// ─── Navigation Structure ────────────────────────────────────────────────────
+} from "@/components/ui/sheet";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
 
 interface NavSection {
   label: string;
@@ -41,32 +38,32 @@ interface NavSection {
 
 const navSections: NavSection[] = [
   {
-    label: 'General',
+    label: "General",
+    items: [{ to: "/asistente", icon: Sparkles, label: "Asistente" }],
+  },
+  {
+    label: "Finanzas",
     items: [
-      { to: '/', icon: LayoutDashboard, label: 'Dashboard' },
+      { to: "/budget", icon: Calculator, label: "Presupuesto" },
+      { to: "/salarios", icon: Landmark, label: "Salarios" },
+      { to: "/pensions", icon: PiggyBank, label: "Pensiones" },
+      { to: "/proyecciones", icon: TrendingUp, label: "Proyecciones" },
+      { to: "/analytics", icon: BarChart3, label: "Analytics" },
     ],
   },
   {
-    label: 'Finanzas',
+    label: "Servicios",
     items: [
-      { to: '/budget', icon: Calculator, label: 'Presupuesto' },
-      { to: '/salarios', icon: Landmark, label: 'Salarios' },
-      { to: '/pensions', icon: PiggyBank, label: 'Pensiones' },
-      { to: '/proyecciones', icon: TrendingUp, label: 'Proyecciones' },
-      { to: '/analytics', icon: BarChart3, label: 'Analytics' },
-    ],
-  },
-  {
-    label: 'Servicios',
-    items: [
-      { to: '/servicios-municipales', icon: Droplets, label: 'Municipalidad' },
+      { to: "/servicios-municipales", icon: Droplets, label: "Municipalidad" },
     ],
   },
 ];
 
-// ─── Shared Nav Renderer ─────────────────────────────────────────────────────
-
 function SidebarNav({ onNavigate }: { onNavigate?: () => void }) {
+  const { pathname } = useLocation();
+  const isActive = (to: string) =>
+    pathname === to || pathname.startsWith(`${to}/`);
+
   return (
     <nav className="flex flex-col gap-0.5 px-3">
       {navSections.map((section) => (
@@ -75,23 +72,20 @@ function SidebarNav({ onNavigate }: { onNavigate?: () => void }) {
             {section.label}
           </p>
           {section.items.map(({ to, icon: Icon, label }) => (
-            <NavLink
+            <Link
               key={to}
               to={to}
-              end={to === '/'}
               onClick={onNavigate}
-              className={({ isActive }) =>
-                cn(
-                  'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
-                  isActive
-                    ? 'bg-primary/10 text-primary'
-                    : 'text-muted-foreground hover:text-foreground hover:bg-muted'
-                )
-              }
+              className={cn(
+                "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors",
+                isActive(to)
+                  ? "bg-primary/10 text-primary"
+                  : "text-muted-foreground hover:text-foreground hover:bg-muted",
+              )}
             >
               <Icon className="w-4 h-4" />
               {label}
-            </NavLink>
+            </Link>
           ))}
         </div>
       ))}
@@ -99,27 +93,20 @@ function SidebarNav({ onNavigate }: { onNavigate?: () => void }) {
   );
 }
 
-// ─── Main Layout ─────────────────────────────────────────────────────────────
-
 export default function Layout() {
-  const { logout } = useAuth();
   const { theme, toggleTheme } = useTheme();
   const { privacyMode, togglePrivacy } = usePrivacy();
+  const { logout } = useAuth();
   const navigate = useNavigate();
   const [mobileOpen, setMobileOpen] = useState(false);
 
-  useEffect(() => {
-    subscribeToPush();
-  }, []);
-
-  const handleLogout = () => {
-    logout();
-    navigate('/login');
+  const handleLogout = async () => {
+    await logout();
+    navigate("/login", { replace: true });
   };
 
   return (
     <div className="min-h-screen bg-background text-foreground">
-      {/* ── Top bar ───────────────────────────────────────────────────── */}
       <header className="border-b border-border backdrop-blur-sm sticky top-0 z-50 bg-background/90">
         <div className="px-4 sm:px-6 py-3 flex items-center justify-between">
           <div className="flex items-center gap-2.5">
@@ -136,7 +123,7 @@ export default function Layout() {
             <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
               <Wallet className="w-4 h-4 text-primary-foreground" strokeWidth={2.5} />
             </div>
-            <span className="text-lg font-bold tracking-tight hidden sm:inline font-heading">
+            <span className="text-lg font-bold tracking-tight hidden sm:inline" style={{ fontFamily: "var(--font-heading)" }}>
               Wealthy<span className="text-primary">Smart</span>
             </span>
           </div>
@@ -146,7 +133,7 @@ export default function Layout() {
               {privacyMode ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
             </Button>
             <Button variant="ghost" size="icon" onClick={toggleTheme} title="Toggle theme" aria-label="Toggle theme">
-              {theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+              {theme === "dark" ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
             </Button>
             <Button
               variant="ghost"
@@ -163,7 +150,6 @@ export default function Layout() {
       </header>
 
       <div className="flex">
-        {/* ── Desktop sidebar ───────────────────────────────────────── */}
         <aside className="hidden md:flex md:flex-col md:w-56 md:flex-shrink-0 border-r border-border sticky top-[57px] h-[calc(100vh-57px)] overflow-y-auto bg-background">
           <div className="flex-1">
             <SidebarNav />
@@ -180,7 +166,6 @@ export default function Layout() {
           </div>
         </aside>
 
-        {/* ── Mobile nav sheet ──────────────────────────────────────── */}
         <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
           <SheetContent side="left" className="p-0 w-64">
             <SheetHeader className="p-4">
@@ -188,7 +173,7 @@ export default function Layout() {
                 <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
                   <Wallet className="w-4 h-4 text-primary-foreground" strokeWidth={2.5} />
                 </div>
-                <span className="font-heading">
+                <span style={{ fontFamily: "var(--font-heading)" }}>
                   Wealthy<span className="text-primary">Smart</span>
                 </span>
               </SheetTitle>
@@ -202,7 +187,10 @@ export default function Layout() {
                 <Separator className="mb-2" />
                 <SheetClose render={<span />}>
                   <button
-                    onClick={() => { setMobileOpen(false); handleLogout(); }}
+                    onClick={() => {
+                      setMobileOpen(false);
+                      void handleLogout();
+                    }}
                     className="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted w-full cursor-pointer"
                   >
                     <LogOut className="w-4 h-4" />
@@ -214,7 +202,6 @@ export default function Layout() {
           </SheetContent>
         </Sheet>
 
-        {/* ── Main content ──────────────────────────────────────────── */}
         <main className="flex-1 min-w-0 px-4 sm:px-6 lg:px-8 py-6">
           <div className="max-w-6xl mx-auto">
             <Outlet />
diff --git a/frontend/src/components/PasteImportModal.tsx b/frontend/src/components/PasteImportModal.tsx
index 02726d2..32249c1 100644
--- a/frontend/src/components/PasteImportModal.tsx
+++ b/frontend/src/components/PasteImportModal.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { ClipboardPaste, CheckCircle, AlertTriangle } from 'lucide-react';
-import api, { type ImportResult } from '../api';
+import api, { type ImportResult } from '@/lib/api';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
diff --git a/frontend/src/components/PensionManualEntryModal.tsx b/frontend/src/components/PensionManualEntryModal.tsx
index fee56f7..e7e955b 100644
--- a/frontend/src/components/PensionManualEntryModal.tsx
+++ b/frontend/src/components/PensionManualEntryModal.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { ClipboardPaste, CheckCircle, AlertTriangle } from 'lucide-react';
-import { type PensionUploadResult, submitPensionManualEntries } from '../api';
+import { type PensionUploadResult, submitPensionManualEntries } from '@/lib/api';
 import { parsePensionPaste, type PensionParsedEntry } from '@/lib/parsePensionPaste';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
diff --git a/frontend/src/components/TransactionList.tsx b/frontend/src/components/TransactionList.tsx
index 8fd1317..3adc8ff 100644
--- a/frontend/src/components/TransactionList.tsx
+++ b/frontend/src/components/TransactionList.tsx
@@ -11,7 +11,7 @@ import {
   Banknote,
 } from 'lucide-react';
 
-import api, { type Transaction } from '../api';
+import api, { type Transaction } from '@/lib/api';
 import TransactionModal from './TransactionModal';
 import ConfirmDialog from './ConfirmDialog';
 import { Button } from '@/components/ui/button';
diff --git a/frontend/src/components/TransactionModal.tsx b/frontend/src/components/TransactionModal.tsx
index 237cd49..0c4cf01 100644
--- a/frontend/src/components/TransactionModal.tsx
+++ b/frontend/src/components/TransactionModal.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import api, { type Category, type Transaction } from '../api';
+import api, { type Category, type Transaction } from '@/lib/api';
 import { formatLocalDatetime } from '@/lib/format';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
diff --git a/frontend/src/components/budget/RecurringItemDialog.tsx b/frontend/src/components/budget/RecurringItemDialog.tsx
index 5585375..135226a 100644
--- a/frontend/src/components/budget/RecurringItemDialog.tsx
+++ b/frontend/src/components/budget/RecurringItemDialog.tsx
@@ -5,7 +5,7 @@ import {
   type RecurringItemUpdate,
   type RecurringItemType,
   type RecurringFrequency,
-} from '@/api';
+} from '@/lib/api';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
diff --git a/frontend/src/components/budget/RecurringItemsManager.tsx b/frontend/src/components/budget/RecurringItemsManager.tsx
index ab1b2c0..cedef57 100644
--- a/frontend/src/components/budget/RecurringItemsManager.tsx
+++ b/frontend/src/components/budget/RecurringItemsManager.tsx
@@ -4,7 +4,7 @@ import {
   type RecurringItem,
   type RecurringItemCreate,
   type RecurringItemUpdate,
-} from '@/api';
+} from '@/lib/api';
 import { formatAmount } from '@/lib/format';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
diff --git a/frontend/src/components/budget/YearlyOverview.tsx b/frontend/src/components/budget/YearlyOverview.tsx
index 4b025a6..265dc3a 100644
--- a/frontend/src/components/budget/YearlyOverview.tsx
+++ b/frontend/src/components/budget/YearlyOverview.tsx
@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect } from 'react';
 import { Pencil } from 'lucide-react';
 
-import { type MonthlyProjection } from '@/api';
+import { type MonthlyProjection } from '@/lib/api';
 import { formatAmount } from '@/lib/format';
 import { cn } from '@/lib/utils';
 import { Input } from '@/components/ui/input';
diff --git a/frontend/src/components/transactions/transaction-columns.tsx b/frontend/src/components/transactions/transaction-columns.tsx
index 66901f5..16afea0 100644
--- a/frontend/src/components/transactions/transaction-columns.tsx
+++ b/frontend/src/components/transactions/transaction-columns.tsx
@@ -1,7 +1,7 @@
 import { type ColumnDef } from '@tanstack/react-table';
 import { ArrowLeftRight, ArrowRightFromLine, Banknote, Pencil, Trash2, TrendingDown, TrendingUp } from 'lucide-react';
 
-import { type Transaction } from '@/api';
+import { type Transaction } from '@/lib/api';
 import { formatAmount } from '@/lib/format';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
diff --git a/frontend/src/hooks/useBudget.ts b/frontend/src/hooks/useBudget.ts
index cb83ee2..01f3317 100644
--- a/frontend/src/hooks/useBudget.ts
+++ b/frontend/src/hooks/useBudget.ts
@@ -13,7 +13,7 @@ import {
   deleteRecurringItem as apiDeleteItem,
   upsertBalanceOverride,
   deleteBalanceOverride,
-} from '@/api';
+} from '@/lib/api';
 
 export function useBudget(initialYear: number) {
   const [year, setYear] = useState(initialYear);
diff --git a/frontend/src/pages/Analytics.tsx b/frontend/src/pages/Analytics.tsx
index c6180eb..4cd5728 100644
--- a/frontend/src/pages/Analytics.tsx
+++ b/frontend/src/pages/Analytics.tsx
@@ -12,8 +12,8 @@ import {
 } from 'recharts';
 import { BarChart3 } from 'lucide-react';
 
-import api from '../api';
-import BillingCycleSelector from '../components/BillingCycleSelector';
+import api from '@/lib/api';
+import BillingCycleSelector from '@/components/BillingCycleSelector';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
   ChartContainer,
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 0db7af4..d1386ca 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -1,34 +1,31 @@
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Wallet, ArrowRight, AlertCircle } from 'lucide-react';
+import { useState, type FormEvent } from "react";
+import { useNavigate } from "react-router-dom";
+import { Wallet, ArrowRight, AlertCircle } from "lucide-react";
+import { login } from "@/lib/api";
+import { useAuth } from "@/AuthContext";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
-import { login } from '../api';
-import { useAuth } from '../AuthContext';
-import { subscribeToPush } from '../pushNotifications';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-
-export default function Login() {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
+export default function LoginPage() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
   const navigate = useNavigate();
   const { setAuthenticated } = useAuth();
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     setLoading(true);
-    setError('');
+    setError("");
     try {
       await login(username, password);
       setAuthenticated(true);
-      subscribeToPush();
-      navigate('/');
+      navigate("/asistente", { replace: true });
     } catch {
-      setError('Invalid credentials');
+      setError("Invalid credentials");
     } finally {
       setLoading(false);
     }
@@ -41,7 +38,7 @@ export default function Login() {
           <div className="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
             <Wallet className="w-6 h-6 text-primary-foreground" strokeWidth={2.5} />
           </div>
-          <span className="text-2xl font-bold tracking-tight font-heading">
+          <span className="text-2xl font-bold tracking-tight" style={{ fontFamily: "var(--font-heading)" }}>
             Wealthy<span className="text-primary">Smart</span>
           </span>
         </div>
@@ -84,7 +81,7 @@ export default function Login() {
               )}
 
               <Button type="submit" disabled={loading} className="w-full h-10">
-                {loading ? 'Signing in...' : 'Sign in'}
+                {loading ? "Signing in..." : "Sign in"}
                 {!loading && <ArrowRight className="w-4 h-4" />}
               </Button>
             </form>
diff --git a/frontend/src/pages/Pensions.tsx b/frontend/src/pages/Pensions.tsx
index 8691fb6..f536db6 100644
--- a/frontend/src/pages/Pensions.tsx
+++ b/frontend/src/pages/Pensions.tsx
@@ -34,7 +34,7 @@ import {
   getPensionSnapshots,
   type PensionSnapshot,
   type PensionUploadResult,
-} from '@/api';
+} from '@/lib/api';
 import PensionManualEntryModal from '@/components/PensionManualEntryModal';
 import { ClipboardPaste } from 'lucide-react';
 
diff --git a/frontend/src/pages/Salarios.tsx b/frontend/src/pages/Salarios.tsx
index 16a185c..a492919 100644
--- a/frontend/src/pages/Salarios.tsx
+++ b/frontend/src/pages/Salarios.tsx
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { type ColumnDef } from '@tanstack/react-table';
 import { Landmark, RefreshCw, Hash, CalendarDays, Banknote } from 'lucide-react';
 
-import { type Transaction, type SalariosSummary, getSalarios, getSalariosSummary } from '../api';
+import { type Transaction, type SalariosSummary, getSalarios, getSalariosSummary } from '@/lib/api';
 import { formatAmount, formatDate } from '@/lib/format';
 import { DataTable } from '@/components/ui/data-table';
 import { DataTableColumnHeader } from '@/components/ui/data-table-column-header';
diff --git a/frontend/src/pages/ServiciosMunicipales.tsx b/frontend/src/pages/ServiciosMunicipales.tsx
index c04dac9..23696fa 100644
--- a/frontend/src/pages/ServiciosMunicipales.tsx
+++ b/frontend/src/pages/ServiciosMunicipales.tsx
@@ -41,7 +41,7 @@ import {
   type MunicipalReceipt,
   type MunicipalReceiptUploadResult,
   type WaterMeterReading,
-} from '@/api';
+} from '@/lib/api';
 
 // ─── Constants ───────────────────────────────────────────────────────────────