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>

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,

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';
+} from "lucide-react";
-import { useEffect, useState } from 'react';
+import { useTheme } from "@/contexts/theme-context";
-import { useAuth } from '../AuthContext';
+import { usePrivacy } from "@/contexts/privacy-context";
-import { useTheme } from '../ThemeContext';
+import { useAuth } from "@/AuthContext";
-import { usePrivacy } from '../PrivacyContext';
+import { Button } from "@/components/ui/button";
-import { subscribeToPush } from '../pushNotifications';
-import { Button } from '@/components/ui/button';
 import {
   Sheet,
   SheetContent,
   SheetHeader,
   SheetTitle,
   SheetClose,
-} from '@/components/ui/sheet';
+} from "@/components/ui/sheet";
-import { Separator } from '@/components/ui/separator';
+import { Separator } from "@/components/ui/separator";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
-
-// ─── Navigation Structure ────────────────────────────────────────────────────
 
 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: "/servicios-municipales", icon: Droplets, label: "Municipalidad" },
-      { 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' },
     ],
   },
 ];
 
-// ─── 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 }) =>
+              className={cn(
-                cn(
+                "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors",
-                  'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
+                isActive(to)
-                  isActive
+                  ? "bg-primary/10 text-primary"
-                    ? 'bg-primary/10 text-primary'
+                  : "text-muted-foreground hover:text-foreground hover:bg-muted",
-                    : '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(() => {
+  const handleLogout = async () => {
-    subscribeToPush();
+    await logout();
-  }, []);
+    navigate("/login", { replace: true });
-
-  const handleLogout = () => {
-    logout();
-    navigate('/login');
   };
 
   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 />

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';

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';

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';

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';

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,

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';

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';

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';

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);

frontend/src/pages/Analytics.tsx

@@ -12,8 +12,8 @@ import {
 } from 'recharts';
 import { BarChart3 } from 'lucide-react';
 
-import api from '../api';
+import api from '@/lib/api';
-import BillingCycleSelector from '../components/BillingCycleSelector';
+import BillingCycleSelector from '@/components/BillingCycleSelector';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
   ChartContainer,

frontend/src/pages/Login.tsx

@@ -1,34 +1,31 @@
-import { useState } from 'react';
+import { useState, type FormEvent } from "react";
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
-import { Wallet, ArrowRight, AlertCircle } from 'lucide-react';
+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';
+export default function LoginPage() {
-import { useAuth } from '../AuthContext';
+  const [username, setUsername] = useState("");
-import { subscribeToPush } from '../pushNotifications';
+  const [password, setPassword] = useState("");
-import { Button } from '@/components/ui/button';
+  const [error, setError] = useState("");
-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('');
   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("/asistente", { replace: true });
-      navigate('/');
     } 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>

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';
 

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';

frontend/src/pages/ServiciosMunicipales.tsx

@@ -41,7 +41,7 @@ import {
   type MunicipalReceipt,
   type MunicipalReceiptUploadResult,
   type WaterMeterReading,
-} from '@/api';
+} from '@/lib/api';
 
 // ─── Constants ───────────────────────────────────────────────────────────────