feat: implement auth flow and app initialization

src/components/app-sidebar.tsx

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { LayoutDashboard, Plus, Layers, Package, MapPin, Milestone } from 'lucide-react';
+import { LayoutDashboard, Plus, Layers, Package, Milestone } from 'lucide-react';
 import { NavUser } from '@/components/nav-user';
 import { ROUTES } from '@/utils/routes';
 import {
@@ -17,14 +17,10 @@ import {
 } from '@/components/ui/sidebar';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import { useAppStore } from '@/store/app.store';
 
 // This is the navigation data
 const data = {
-  user: {
-    name: 'Vision Admin',
-    email: 'admin@visionroad.ai',
-    avatar: '/avatars/profile.jpg',
-  },
   navMain: [
     {
       title: 'Dashboard',
@@ -56,6 +52,12 @@ const data = {
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   const pathname = usePathname();
+  const authUser = useAppStore((state) => state.user);
+  const user = {
+    name: [authUser?.first_name, authUser?.last_name].filter(Boolean).join(' ') || 'Admin',
+    email: authUser?.email || '',
+    avatar: authUser?.profile_photo_url || '/avatars/profile.jpg',
+  };
 
   return (
     <Sidebar collapsible="icon" {...props}>
@@ -87,7 +89,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
         </SidebarGroup>
       </SidebarContent>
       <SidebarFooter>
-        <NavUser user={data.user} />
+        <NavUser user={user} />
       </SidebarFooter>
       <SidebarRail />
     </Sidebar>

src/components/nav-user.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { BadgeCheck, Bell, ChevronsUpDown, CreditCard, LogOut, Sparkles } from 'lucide-react';
+import { useRouter } from 'next/navigation';
 
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import {
@@ -18,6 +19,11 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from '@/components/ui/sidebar';
+import { authService } from '@/services/api/auth.service';
+import { useAppStore } from '@/store/app.store';
+import { useAuthStore } from '@/store/auth.store';
+import { ROUTES } from '@/utils/routes';
+import { useState } from 'react';
 
 export function NavUser({
   user,
@@ -29,6 +35,27 @@ export function NavUser({
   };
 }) {
   const { isMobile } = useSidebar();
+  const router = useRouter();
+  const clearAuth = useAuthStore((state) => state.logout);
+  const clearApp = useAppStore((state) => state.clear);
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+
+  const handleLogout = async () => {
+    if (isLoggingOut) return;
+
+    setIsLoggingOut(true);
+
+    try {
+      await authService.logout();
+    } catch {
+      // Local logout should still complete if the server session is already invalid.
+    } finally {
+      clearAuth();
+      clearApp();
+      router.replace(ROUTES.LOGIN);
+      setIsLoggingOut(false);
+    }
+  };
 
   return (
     <SidebarMenu>
@@ -91,9 +118,15 @@ export function NavUser({
               </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
-            <DropdownMenuItem>
-              <LogOut />
-              Log out
+              <DropdownMenuItem
+                onSelect={(event) => {
+                  event.preventDefault();
+                  handleLogout();
+                }}
+                disabled={isLoggingOut}
+              >
+                <LogOut />
+                {isLoggingOut ? 'Logging out' : 'Log out'}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>