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>
2026-07-17 15:28:47 +02:00 · 2026-04-29 22:02:46 -06:00
parent cf8b7be778
commit c92bfc66fe
16 changed files with 80 additions and 96 deletions
--- 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,
--- 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 />
--- 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';
--- 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';
--- 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';
--- 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';
--- 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,
--- 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';
--- 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';
--- 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';