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>