Merge pull request #80 from ayushpandey101/FIX1

MIHIR2006 · web-flow · commit 2c213515ace1 · 2025-10-14T17:20:30.000+05:30
Fix: Authentication State + Logout Functionality + Enhanced Avatar
diff --git a/frontend/app/HomeClient.tsx b/frontend/app/HomeClient.tsx
@@ -1,5 +1,6 @@
 "use client";
 import { useEffect, useState } from "react";
+import { SessionProvider } from "next-auth/react";
 import Landing from "@/components/Landing";
 import Preloader from "@/components/Preloder";
 
@@ -18,5 +19,9 @@ export default function HomeClient() {
     }
   }, []);
 
-  return isLoading ? <Preloader /> : <Landing />;
+  return isLoading ? <Preloader /> : (
+    <SessionProvider>
+      <Landing />
+    </SessionProvider>
+  );
 }
diff --git a/frontend/app/api/auth/[...nextauth]/authOptions.ts b/frontend/app/api/auth/[...nextauth]/authOptions.ts
@@ -73,6 +73,7 @@ const authOptions = {
   pages: {
     signIn: "/login",
     signUp: "/signup",
+    signOut: "/",
   },
 };
 
diff --git a/frontend/app/components/DashboardPage.tsx b/frontend/app/components/DashboardPage.tsx
@@ -2,22 +2,61 @@
 import { Dashboard } from "@/components/dashboard";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
 import { FloatingChatbot } from "@/components/floating-chatbot";
 import { StockVisionErrorBoundary } from "../../lib/error-handling";
 import {
   BarChart2, ChevronLeft, ChevronRight, Home, LineChart,
-  Settings, Wallet,BriefcaseBusiness , ChartNoAxesCombined
+  Settings, Wallet, BriefcaseBusiness, ChartNoAxesCombined, LogOut, User
 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
+import { useSession, signOut } from "next-auth/react";
 
 export default function DashboardPage() {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const isMobile = useIsMobile();
   const router = useRouter();
   const [activeSection, setActiveSection] = useState("overview");
+  const { data: session } = useSession();
+
+  const handleSignOut = async () => {
+    await signOut({ redirect: false });
+    router.push('/');
+  };
+
+  const getUsernameFromEmail = (email?: string | null) => {
+    if (!email) return 'User';
+    const username = email.split('@')[0];
+    // Capitalize first letter
+    return username.charAt(0).toUpperCase() + username.slice(1);
+  };
+
+  const getInitials = (name?: string | null, email?: string | null) => {
+    if (name) {
+      return name
+        .split(' ')
+        .map(n => n[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2);
+    }
+    if (email) {
+      const username = email.split('@')[0];
+      return username.slice(0, 2).toUpperCase();
+    }
+    return 'U';
+  };
   
   useEffect(() => {
     if (isMobile) {
@@ -209,7 +248,81 @@ export default function DashboardPage() {
             </Button>
           </div>
           <h1 className="text-xl font-extrabold">Dashboard</h1>
-          <ThemeToggle />
+          <div className="flex items-center gap-3">
+            <ThemeToggle />
+            {session && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    className="relative h-10 w-10 rounded-full p-0 ring-2 ring-primary/30 hover:ring-primary/60 transition-all duration-300 hover:scale-105"
+                  >
+                    <Avatar className="h-10 w-10">
+                      <AvatarImage 
+                        src={session.user?.image || undefined} 
+                        alt={session.user?.name || getUsernameFromEmail(session.user?.email)}
+                        className="object-cover"
+                      />
+                      <AvatarFallback className="bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 text-white font-bold shadow-lg">
+                        {getInitials(session.user?.name, session.user?.email)}
+                      </AvatarFallback>
+                    </Avatar>
+                    {/* Active indicator dot */}
+                    <span className="absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full bg-green-500 border-2 border-background shadow-sm" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-64" align="end" forceMount>
+                  <DropdownMenuLabel className="font-normal">
+                    <div className="flex flex-col space-y-2 p-2">
+                      <div className="flex items-center gap-3">
+                        <Avatar className="h-12 w-12">
+                          <AvatarImage 
+                            src={session.user?.image || undefined} 
+                            alt={session.user?.name || getUsernameFromEmail(session.user?.email)}
+                            className="object-cover"
+                          />
+                          <AvatarFallback className="bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 text-white font-bold shadow-lg">
+                            {getInitials(session.user?.name, session.user?.email)}
+                          </AvatarFallback>
+                        </Avatar>
+                        <div className="flex flex-col space-y-1 flex-1 min-w-0">
+                          <p className="text-sm font-semibold leading-none truncate">
+                            {session.user?.name || getUsernameFromEmail(session.user?.email)}
+                          </p>
+                          <p className="text-xs leading-none text-muted-foreground truncate">
+                            {session.user?.email}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    onClick={() => handleSectionChange("settings")}
+                    className="cursor-pointer"
+                  >
+                    <Settings className="mr-2 h-4 w-4" />
+                    <span>Settings</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={handleHomeClick}
+                    className="cursor-pointer"
+                  >
+                    <Home className="mr-2 h-4 w-4" />
+                    <span>Home</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    className="cursor-pointer text-red-600 focus:text-red-600 focus:bg-red-50 dark:focus:bg-red-950"
+                    onClick={handleSignOut}
+                  >
+                    <LogOut className="mr-2 h-4 w-4" />
+                    <span>Log out</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </div>
         </header>
         <main className="flex-1 overflow-y-auto">
           <Dashboard activeSection={activeSection} onSectionChange={handleSectionChange} />
diff --git a/frontend/app/components/Landing.tsx b/frontend/app/components/Landing.tsx
@@ -2,22 +2,22 @@
 import { MarketDataCenter } from "@/components/market-data-center";
 import { Sidebar } from "@/components/sidebar";
 import { StockTicker } from "@/components/stock-ticker";
-import { ThemeToggle } from "@/components/theme-toggle";
 import { TreasuryBillSection } from "@/components/treasury-bill-section";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { portfolioStocks } from "@/data/mock-data";
 import clsx from "clsx";
 import { type Variants } from "framer-motion";
-import { BarChart2, ChartLine, CheckCircle, CircleDollarSign, LineChart, LogIn, PieChart, TrendingUp, XCircle } from "lucide-react";
+import { BarChart2, ChartLine, CheckCircle, CircleDollarSign, LineChart, PieChart, TrendingUp, XCircle } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import dash from '../../../Dashboard.png';
 import { CardSpotlight } from "../../components/ui/card-spotlight";
 import { ContainerScroll } from '../../components/ui/container-scroll-animation';
 import Testimonials from './Testimonials';
+import Navbar from './navbar';
 // Declare the global window interface extension
 declare global {
   interface Window {
@@ -171,64 +171,17 @@ export default function Landing() {
   return (
     <div className="min-h-screen flex flex-col">
 
-      {/* Header */}
-      <header className="border-b backdrop-blur-lg bg-background/80 sticky top-0 z-50">
-
+      {/* Header with Progress Bar */}
+      <div className="sticky top-0 z-50">
         {/* Progress Bar */}
         <div
           ref={progressBarRef}
           className="h-1 w-full origin-left will-change-transform transform-gpu rounded-full bg-gradient-to-r from-cyan-400 via-blue-400 to-purple-500 shadow-[0_0_10px_rgba(59,130,246,0.8),0_0_20px_rgba(139,92,246,0.6)]"
           style={{ transform: 'scaleX(0)' }}
           aria-hidden="true"
         />
-
-        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
-          <div
-            className="flex items-center gap-2 cursor-pointer"
-            onClick={() => setSidebarOpen(true)}
-          >
-            <BarChart2 className="h-6 w-6 text-primary" />
-            <span className="font-extrabold text-xl">StockVision</span>
-          </div>
-
-          {/* Right Section */}
-          <div className="flex items-center gap-4">
-            <ThemeToggle />
-            <Link href="/dashboard">
-              <Button
-                className="relative overflow-hidden font-bold flex items-center gap-2 px-6 py-3 
-                      rounded-lg bg-gradient-to-r from-blue-600 to-indigo-600 
-                      text-white hover:scale-105 transition-transform"
-              >
-                <span className="relative z-10 flex items-center gap-2">
-                  <LogIn className="h-4 w-4" />
-                  <span className="hidden sm:inline">Sign In</span>
-                </span>
-
-                {/* shimmer overlay */}
-                <span className="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent 
-                            translate-x-[-100%] animate-[shimmer_2s_infinite]" />
-              </Button>
-            </Link>
-
-            {/* <div className="container mx-auto px-4 py-4 flex justify-between items-center">
-              <div className="flex items-center gap-2" onClick={() => setSidebarOpen(true)}>
-                <BarChart2 className="h-6 w-6 text-primary" />
-                <span className="font-extrabold text-xl">StockVision</span>
-              </div>
-              <div className="flex items-center gap-4">
-                <ThemeToggle />
-                <Link href="/dashboard">
-                  <Button className="font-bold hover:scale-105 transition-transform flex items-center gap-2">
-                    <LogIn className="h-4 w-4" />
-                    <span className="hidden sm:inline">Sign In</span>
-                  </Button>
-                </Link>
-              </div>
-            </div> */}
-          </div>
-        </div>
-      </header>
+        <Navbar onMenuClick={() => setSidebarOpen(true)} />
+      </div>
 
 
       {/* Sidebar */}
diff --git a/frontend/app/components/navbar.tsx b/frontend/app/components/navbar.tsx
diff --git a/package-lock.json b/package-lock.json
