From 8733795c8449f3514369d7b4220934760e386f1b Mon Sep 17 00:00:00 2001
From: Biswa Kalyan Bhuyan <biswa@surgot.in>
Date: Fri, 25 Apr 2025 01:09:30 +0530
Subject: finance/frontend: fix: did some minor changes to the frontend

---
 frontend/src/app/(main)/layout.tsx | 437 +++++++++++++++++--------------------
 1 file changed, 203 insertions(+), 234 deletions(-)

(limited to 'frontend/src/app/(main)')

diff --git a/frontend/src/app/(main)/layout.tsx b/frontend/src/app/(main)/layout.tsx
index ee1026c..11e557b 100644
--- a/frontend/src/app/(main)/layout.tsx
+++ b/frontend/src/app/(main)/layout.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { Button } from '@/components/ui/button';
-import { authApi, userApi } from '@/lib/api';
 import { ThemeToggle } from '@/components/shared/ThemeToggle';
 import { PageTransition } from '@/components/shared/PageTransition';
+import ProtectedRoute from '@/components/shared/ProtectedRoute';
+import { useAuth } from '@/components/shared/AuthContext';
 import { 
   ChevronLeftIcon, 
   ChevronRightIcon, 
@@ -25,38 +25,18 @@ export default function MainLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const router = useRouter();
   const pathname = usePathname();
-  const [userName, setUserName] = useState<string>('');
-  const [isLoading, setIsLoading] = useState(true);
+  const { user, logout } = useAuth();
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   useEffect(() => {
-    // Check if user is authenticated
-    const token = localStorage.getItem('token');
-    if (!token) {
-      router.push('/login');
-      return;
-    }
-
-    // Fetch user profile
-    userApi.getProfile()
-      .then(data => {
-        setUserName(data.user.Name);
-        setIsLoading(false);
-      })
-      .catch(() => {
-        // If error fetching profile, redirect to login
-        router.push('/login');
-      });
-      
     // Load sidebar state from localStorage
     const savedSidebarState = localStorage.getItem('sidebarCollapsed');
     if (savedSidebarState !== null) {
       setIsSidebarCollapsed(savedSidebarState === 'true');
     }
-  }, [router]);
+  }, []);
 
   // Close mobile menu when changing routes
   useEffect(() => {
@@ -64,7 +44,7 @@ export default function MainLayout({
   }, [pathname]);
 
   const handleLogout = () => {
-    authApi.logout();
+    logout();
   };
 
   const toggleSidebar = () => {
@@ -77,227 +57,216 @@ export default function MainLayout({
     setIsMobileMenuOpen(!isMobileMenuOpen);
   };
 
-  if (isLoading) {
-    return (
-      <div className="flex h-screen items-center justify-center bg-background">
-        <div className="flex flex-col items-center space-y-4">
-          <div className="relative h-12 w-12">
-            <div className="absolute top-0 h-full w-full rounded-full border-4 border-t-primary border-r-transparent border-b-transparent border-l-transparent animate-spin"></div>
-          </div>
-          <p className="text-sm font-medium text-muted-foreground animate-pulse">Loading...</p>
-        </div>
-      </div>
-    );
-  }
-
   return (
-    <div className="min-h-screen bg-background flex flex-col">
-      {/* Top Navigation */}
-      <header className="border-b shadow-sm backdrop-blur-sm bg-background/90 sticky top-0 z-50 w-full">
-        <div className="w-full flex h-16 items-center px-4 md:px-6">
-          <div className="flex items-center gap-4">
-            {/* Mobile menu button - only visible on small screens */}
-            <button 
-              className="md:hidden rounded-full p-2 hover:bg-muted transition-colors"
-              onClick={toggleMobileMenu}
-              aria-label="Toggle mobile menu"
-            >
-              <MenuIcon size={20} />
-            </button>
-            <div className="font-semibold text-xl">
-              <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/70">
-                Finance Management
-              </span>
+    <ProtectedRoute>
+      <div className="min-h-screen bg-background flex flex-col">
+        {/* Top Navigation */}
+        <header className="border-b shadow-sm backdrop-blur-sm bg-background/90 sticky top-0 z-50 w-full">
+          <div className="w-full flex h-16 items-center px-4 md:px-6">
+            <div className="flex items-center gap-4">
+              {/* Mobile menu button - only visible on small screens */}
+              <button 
+                className="md:hidden rounded-full p-2 hover:bg-muted transition-colors"
+                onClick={toggleMobileMenu}
+                aria-label="Toggle mobile menu"
+              >
+                <MenuIcon size={20} />
+              </button>
+              <div className="font-semibold text-xl">
+                <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/70">
+                  Finance Management
+                </span>
+              </div>
             </div>
-          </div>
-          
-          <div className="flex items-center ms-auto gap-4">
-            <div className="hidden md:flex items-center gap-1 bg-muted/50 px-3 py-1.5 rounded-full">
-              <span className="relative flex h-2 w-2">
-                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary/50 opacity-75"></span>
-                <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
-              </span>
-              <span className='text-sm font-medium ml-1.5 transition-all duration-300'>
-                {userName}
-              </span>
+            
+            <div className="flex items-center ms-auto gap-4">
+              <div className="hidden md:flex items-center gap-1 bg-muted/50 px-3 py-1.5 rounded-full">
+                <span className="relative flex h-2 w-2">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary/50 opacity-75"></span>
+                  <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+                </span>
+                <span className='text-sm font-medium ml-1.5 transition-all duration-300'>
+                  {user?.Name}
+                </span>
+              </div>
+              <ThemeToggle />
+              <Button 
+                variant="ghost" 
+                size="icon" 
+                onClick={handleLogout}
+                className="hover:bg-destructive/10 transition-colors duration-300"
+                aria-label="Logout"
+              >
+                <LogOutIcon size={18} className="text-destructive/90 transition-transform hover:scale-110 duration-300" />
+              </Button>
             </div>
-            <ThemeToggle />
-            <Button 
-              variant="ghost" 
-              size="icon" 
-              onClick={handleLogout}
-              className="hover:bg-destructive/10 transition-colors duration-300"
-              aria-label="Logout"
-            >
-              <LogOutIcon size={18} className="text-destructive/90 transition-transform hover:scale-110 duration-300" />
-            </Button>
-          </div>
-        </div>
-      </header>
-
-      {/* Mobile Menu - outside the normal flow and only visible when toggled */}
-      <div 
-        className={`
-          md:hidden fixed inset-0 z-40 bg-background/95 backdrop-blur-sm transition-all duration-300 
-          ${isMobileMenuOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}
-        `}
-      >
-        <div className="pt-20 px-4">
-          <nav className="space-y-4">
-            <Link 
-              href="/dashboard" 
-              className={`
-                flex items-center p-3 rounded-lg transition-colors
-                ${pathname === '/dashboard' ? 'bg-primary/10 text-primary' : 'hover:bg-muted'}
-              `}
-            >
-              <LayoutDashboardIcon size={20} className="mr-3" />
-              Dashboard
-            </Link>
-            <Link 
-              href="/loans" 
-              className={`
-                flex items-center p-3 rounded-lg transition-colors
-                ${pathname === '/loans' ? 'bg-primary/10 text-primary' : 'hover:bg-muted'}
-              `}
-            >
-              <CoinsIcon size={20} className="mr-3" />
-              Loans
-            </Link>
-            <Link 
-              href="/goals" 
-              className={`
-                flex items-center p-3 rounded-lg transition-colors
-                ${pathname === '/goals' ? 'bg-primary/10 text-primary' : 'hover:bg-muted'}
-              `}
-            >
-              <TargetIcon size={20} className="mr-3" />
-              Goals
-            </Link>
-            <Link 
-              href="/settings" 
-              className={`
-                flex items-center p-3 rounded-lg transition-colors
-                ${pathname === '/settings' ? 'bg-primary/10 text-primary' : 'hover:bg-muted'}
-              `}
-            >
-              <SettingsIcon size={20} className="mr-3" />
-              Settings
-            </Link>
-          </nav>
-          <div className="mt-8 border-t pt-4">
-            <Button 
-              variant="outline" 
-              className="w-full justify-start text-destructive hover:text-destructive hover:bg-destructive/10"
-              onClick={handleLogout}
-            >
-              <LogOutIcon size={18} className="mr-2" />
-              Logout
-            </Button>
           </div>
-        </div>
-      </div>
+        </header>
 
-      {/* Main Content */}
-      <div className="flex flex-1 overflow-hidden">
-        {/* Sidebar - hidden on mobile */}
-        <aside 
+        {/* Mobile Menu - outside the normal flow and only visible when toggled */}
+        <div 
           className={`
-            hidden md:flex flex-col h-[calc(100vh-4rem)] border-r bg-background flex-shrink-0 relative
-            transition-all duration-300 ease-in-out
-            ${isSidebarCollapsed ? 'w-16' : 'w-64'}
+            md:hidden fixed inset-0 z-40 bg-background/95 backdrop-blur-sm transition-all duration-300 
+            ${isMobileMenuOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}
           `}
         >
-          {/* Sidebar Toggle Button */}
-          <button 
-            onClick={toggleSidebar}
-            className="absolute -right-3 top-10 bg-primary text-primary-foreground rounded-full p-1 shadow-md hover:bg-primary/90 transition-colors duration-300 hover:scale-110 group z-10"
-            aria-label={isSidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
-          >
-            <div className="transition-transform duration-300 group-hover:rotate-[360deg]">
-              {isSidebarCollapsed ? <ChevronRightIcon size={16} /> : <ChevronLeftIcon size={16} />}
-            </div>
-          </button>
-
-          <nav className="space-y-2 px-2 mt-4 flex-1">
-            <Link 
-              href="/dashboard" 
-              className={`
-                flex items-center p-2 rounded-md transition-all duration-200 overflow-hidden
-                ${pathname === '/dashboard' 
-                  ? 'bg-primary/10 text-primary font-medium' 
-                  : 'hover:bg-muted text-foreground/80 hover:text-foreground'
-                }
-                ${isSidebarCollapsed ? 'justify-center' : 'justify-start'}
-              `}
-              title="Dashboard"
-            >
-              <LayoutDashboardIcon size={18} className={`transition-transform duration-300 ${pathname === '/dashboard' ? 'scale-110' : ''}`} />
-              <span className={`ml-2 transition-all duration-300 overflow-hidden whitespace-nowrap ${isSidebarCollapsed ? 'w-0 opacity-0' : 'w-auto opacity-100'}`}>
+          <div className="pt-20 px-4">
+            <nav className="space-y-4">
+              <Link 
+                href="/dashboard" 
+                className={`
+                  flex items-center p-3 rounded-lg transition-colors
+                  ${pathname === '/dashboard' ? 'bg-primary/10 text-primary' : 'hover:bg-muted'}
+                `}
+              >
+                <LayoutDashboardIcon size={20} className="mr-3" />
                 Dashboard
-              </span>
-            </Link>
-            <Link 
-              href="/loans" 
-              className={`
-                flex items-center p-2 rounded-md transition-all duration-200 overflow-hidden
-                ${pathname === '/loans' 
-                  ? 'bg-primary/10 text-primary font-medium' 
-                  : 'hover:bg-muted text-foreground/80 hover:text-foreground'
-                }
-                ${isSidebarCollapsed ? 'justify-center' : 'justify-start'}
-              `}
-              title="Loans"
-            >
-              <CoinsIcon size={18} className={`transition-transform duration-300 ${pathname === '/loans' ? 'scale-110' : ''}`} />
-              <span className={`ml-2 transition-all duration-300 overflow-hidden whitespace-nowrap ${isSidebarCollapsed ? 'w-0 opacity-0' : 'w-auto opacity-100'}`}>
+              </Link>
+              <Link 
+                href="/loans" 
+                className={`
+                  flex items-center p-3 rounded-lg transition-colors
+                  ${pathname === '/loans' ? 'bg-primary/10 text-primary' : 'hover:bg-muted'}
+                `}
+              >
+                <CoinsIcon size={20} className="mr-3" />
                 Loans
-              </span>
-            </Link>
-            <Link 
-              href="/goals" 
-              className={`
-                flex items-center p-2 rounded-md transition-all duration-200 overflow-hidden
-                ${pathname === '/goals' 
-                  ? 'bg-primary/10 text-primary font-medium' 
-                  : 'hover:bg-muted text-foreground/80 hover:text-foreground'
-                }
-                ${isSidebarCollapsed ? 'justify-center' : 'justify-start'}
-              `}
-              title="Goals"
-            >
-              <TargetIcon size={18} className={`transition-transform duration-300 ${pathname === '/goals' ? 'scale-110' : ''}`} />
-              <span className={`ml-2 transition-all duration-300 overflow-hidden whitespace-nowrap ${isSidebarCollapsed ? 'w-0 opacity-0' : 'w-auto opacity-100'}`}>
+              </Link>
+              <Link 
+                href="/goals" 
+                className={`
+                  flex items-center p-3 rounded-lg transition-colors
+                  ${pathname === '/goals' ? 'bg-primary/10 text-primary' : 'hover:bg-muted'}
+                `}
+              >
+                <TargetIcon size={20} className="mr-3" />
                 Goals
-              </span>
-            </Link>
-            <Link 
-              href="/settings" 
-              className={`
-                flex items-center p-2 rounded-md transition-all duration-200 overflow-hidden
-                ${pathname === '/settings' 
-                  ? 'bg-primary/10 text-primary font-medium' 
-                  : 'hover:bg-muted text-foreground/80 hover:text-foreground'
-                }
-                ${isSidebarCollapsed ? 'justify-center' : 'justify-start'}
-              `}
-              title="Settings"
-            >
-              <SettingsIcon size={18} className={`transition-transform duration-300 ${pathname === '/settings' ? 'scale-110' : ''}`} />
-              <span className={`ml-2 transition-all duration-300 overflow-hidden whitespace-nowrap ${isSidebarCollapsed ? 'w-0 opacity-0' : 'w-auto opacity-100'}`}>
+              </Link>
+              <Link 
+                href="/settings" 
+                className={`
+                  flex items-center p-3 rounded-lg transition-colors
+                  ${pathname === '/settings' ? 'bg-primary/10 text-primary' : 'hover:bg-muted'}
+                `}
+              >
+                <SettingsIcon size={20} className="mr-3" />
                 Settings
-              </span>
-            </Link>
-          </nav>
-        </aside>
+              </Link>
+            </nav>
+            <div className="mt-8 border-t pt-4">
+              <Button 
+                variant="outline" 
+                className="w-full justify-start text-destructive hover:text-destructive hover:bg-destructive/10"
+                onClick={handleLogout}
+              >
+                <LogOutIcon size={18} className="mr-2" />
+                Logout
+              </Button>
+            </div>
+          </div>
+        </div>
 
-        {/* Page Content */}
-        <main className="flex-1 p-4 md:p-8 overflow-auto h-[calc(100vh-4rem)] transition-all duration-300">
-          <PageTransition>
-            {children}
-          </PageTransition>
-        </main>
+        {/* Main Content */}
+        <div className="flex flex-1 overflow-hidden">
+          {/* Sidebar - hidden on mobile */}
+          <aside 
+            className={`
+              hidden md:flex flex-col h-[calc(100vh-4rem)] border-r bg-background flex-shrink-0 relative
+              transition-all duration-300 ease-in-out
+              ${isSidebarCollapsed ? 'w-16' : 'w-64'}
+            `}
+          >
+            {/* Sidebar Toggle Button */}
+            <button 
+              onClick={toggleSidebar}
+              className="absolute -right-3 top-10 bg-primary text-primary-foreground rounded-full p-1 shadow-md hover:bg-primary/90 transition-colors duration-300 hover:scale-110 group z-10"
+              aria-label={isSidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+            >
+              <div className="transition-transform duration-300 group-hover:rotate-[360deg]">
+                {isSidebarCollapsed ? <ChevronRightIcon size={16} /> : <ChevronLeftIcon size={16} />}
+              </div>
+            </button>
+
+            <nav className="space-y-2 px-2 mt-4 flex-1">
+              <Link 
+                href="/dashboard" 
+                className={`
+                  flex items-center p-2 rounded-md transition-all duration-200 overflow-hidden
+                  ${pathname === '/dashboard' 
+                    ? 'bg-primary/10 text-primary font-medium' 
+                    : 'hover:bg-muted text-foreground/80 hover:text-foreground'
+                  }
+                  ${isSidebarCollapsed ? 'justify-center' : 'justify-start'}
+                `}
+                title="Dashboard"
+              >
+                <LayoutDashboardIcon size={18} className={`transition-transform duration-300 ${pathname === '/dashboard' ? 'scale-110' : ''}`} />
+                <span className={`ml-2 transition-all duration-300 overflow-hidden whitespace-nowrap ${isSidebarCollapsed ? 'w-0 opacity-0' : 'w-auto opacity-100'}`}>
+                  Dashboard
+                </span>
+              </Link>
+              <Link 
+                href="/loans" 
+                className={`
+                  flex items-center p-2 rounded-md transition-all duration-200 overflow-hidden
+                  ${pathname === '/loans' 
+                    ? 'bg-primary/10 text-primary font-medium' 
+                    : 'hover:bg-muted text-foreground/80 hover:text-foreground'
+                  }
+                  ${isSidebarCollapsed ? 'justify-center' : 'justify-start'}
+                `}
+                title="Loans"
+              >
+                <CoinsIcon size={18} className={`transition-transform duration-300 ${pathname === '/loans' ? 'scale-110' : ''}`} />
+                <span className={`ml-2 transition-all duration-300 overflow-hidden whitespace-nowrap ${isSidebarCollapsed ? 'w-0 opacity-0' : 'w-auto opacity-100'}`}>
+                  Loans
+                </span>
+              </Link>
+              <Link 
+                href="/goals" 
+                className={`
+                  flex items-center p-2 rounded-md transition-all duration-200 overflow-hidden
+                  ${pathname === '/goals' 
+                    ? 'bg-primary/10 text-primary font-medium' 
+                    : 'hover:bg-muted text-foreground/80 hover:text-foreground'
+                  }
+                  ${isSidebarCollapsed ? 'justify-center' : 'justify-start'}
+                `}
+                title="Goals"
+              >
+                <TargetIcon size={18} className={`transition-transform duration-300 ${pathname === '/goals' ? 'scale-110' : ''}`} />
+                <span className={`ml-2 transition-all duration-300 overflow-hidden whitespace-nowrap ${isSidebarCollapsed ? 'w-0 opacity-0' : 'w-auto opacity-100'}`}>
+                  Goals
+                </span>
+              </Link>
+              <Link 
+                href="/settings" 
+                className={`
+                  flex items-center p-2 rounded-md transition-all duration-200 overflow-hidden
+                  ${pathname === '/settings' 
+                    ? 'bg-primary/10 text-primary font-medium' 
+                    : 'hover:bg-muted text-foreground/80 hover:text-foreground'
+                  }
+                  ${isSidebarCollapsed ? 'justify-center' : 'justify-start'}
+                `}
+                title="Settings"
+              >
+                <SettingsIcon size={18} className={`transition-transform duration-300 ${pathname === '/settings' ? 'scale-110' : ''}`} />
+                <span className={`ml-2 transition-all duration-300 overflow-hidden whitespace-nowrap ${isSidebarCollapsed ? 'w-0 opacity-0' : 'w-auto opacity-100'}`}>
+                  Settings
+                </span>
+              </Link>
+            </nav>
+          </aside>
+
+          {/* Page Content */}
+          <main className="flex-1 p-4 md:p-8 overflow-auto h-[calc(100vh-4rem)] transition-all duration-300">
+            <PageTransition>
+              {children}
+            </PageTransition>
+          </main>
+        </div>
       </div>
-    </div>
+    </ProtectedRoute>
   );
 } 
\ No newline at end of file
-- 
cgit v1.2.3-59-g8ed1b