feat : add signin ,signout, forgot password features

src/components/Navbar.jsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
 import { Menu, Sun, Moon, User, LogOut, ChevronDown } from 'lucide-react';
-import { useAuth } from '../context/AuthContext';
+import { signOut } from '../services/api';
+import { useAuthStore } from '../store/authStore';
 
 const Navbar = ({ onSidebarToggle }) => {
-  const { user, logout } = useAuth();
+  const isLoggedIn = useAuthStore((s) => s.isLoggedIn);
   const [isDarkMode, setIsDarkMode] = useState(() => {
     return localStorage.getItem('theme') === 'dark' || 
            (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
@@ -25,9 +26,14 @@ const Navbar = ({ onSidebarToggle }) => {
     setIsDarkMode(!isDarkMode);
   };
 
-  const handleLogout = () => {
-    logout();
-    setIsUserMenuOpen(false);
+  const handleLogout = async () => {
+    try {
+      await signOut();
+    } catch (e) {
+      // no-op; interceptor handles redirect and state
+    } finally {
+      setIsUserMenuOpen(false);
+    }
   };
 
   return (
@@ -71,7 +77,7 @@ const Navbar = ({ onSidebarToggle }) => {
               <User className="h-4 w-4 text-blue-600 dark:text-blue-400" />
             </div>
             <span className="hidden sm:block text-sm font-medium">
-              {user?.name || 'Admin'}
+              {isLoggedIn ? 'Admin' : 'Guest'}
             </span>
             <ChevronDown className="h-4 w-4" />
           </button>
@@ -81,10 +87,10 @@ const Navbar = ({ onSidebarToggle }) => {
             <div className="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1 z-50">
               <div className="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
                 <p className="text-sm font-medium text-gray-900 dark:text-white">
-                  {user?.name || 'Admin User'}
+                  {isLoggedIn ? 'Admin User' : 'Guest'}
                 </p>
                 <p className="text-xs text-gray-500 dark:text-gray-400">
-                  {user?.email || 'admin@example.com'}
+                  {isLoggedIn ? 'admin@example.com' : ''}
                 </p>
               </div>
               <button