From f789794da52d6b4c33c26a384e1ca6bdca06aed7 Mon Sep 17 00:00:00 2001
From: suryac <surya.c@getzino.com>
Date: Fri, 31 Jul 2026 12:14:40 +0530
Subject: [PATCH] roles based access error fix

---
 src/routesConfig.tsx          |  2 +-
 src/screens/ConsoleLayout.tsx |  9 +++++++++
 src/screens/LoginPage.tsx     | 12 ++++++++----
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/routesConfig.tsx b/src/routesConfig.tsx
index cee2142..0ae12c8 100644
--- a/src/routesConfig.tsx
+++ b/src/routesConfig.tsx
@@ -108,6 +108,6 @@ export const routeConfig = [
   {
     path: "/admin/users",
     element: <UsersPage />,
-    adminOnly: true,
+    roles: ["Manager", "Admin"],
   },
 ];
diff --git a/src/screens/ConsoleLayout.tsx b/src/screens/ConsoleLayout.tsx
index 6ecd924..8aa2930 100644
--- a/src/screens/ConsoleLayout.tsx
+++ b/src/screens/ConsoleLayout.tsx
@@ -122,6 +122,15 @@ export function ConsoleLayout() {
             <div className="px-4 py-3 border-b border-gray-100 mb-1">
               <p className="text-sm font-bold text-gray-900 truncate">{user?.name || 'User'}</p>
               <p className="text-xs text-gray-500 truncate mt-0.5">{user?.email || 'user@example.com'}</p>
+              {userRoles && userRoles.length > 0 && (
+                <div className="mt-2 flex flex-wrap gap-1">
+                  {userRoles.map(role => (
+                    <span key={role} className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium bg-blue-100 text-blue-800">
+                      {role}
+                    </span>
+                  ))}
+                </div>
+              )}
             </div>
             {isAdmin && (
               <div className="px-2 pb-1 border-b border-gray-100 mb-1">
diff --git a/src/screens/LoginPage.tsx b/src/screens/LoginPage.tsx
index 3f8d9f0..6c90470 100644
--- a/src/screens/LoginPage.tsx
+++ b/src/screens/LoginPage.tsx
@@ -4,10 +4,11 @@ import { useAuth } from '../auth/context';
 
 import { Button } from '../components/buttons';
 import { Card, Input } from '../components/reusable';
+import { getDefaultRoute } from '../auth/ProtectedRoute';
 
-/** Login gate. Redirects to /orders once authenticated. */
+/** Login gate. Redirects to default route once authenticated. */
 export function LoginPage() {
-  const { authed, login } = useAuth();
+  const { authed, login, roles, isAdmin } = useAuth();
   const navigate = useNavigate();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
@@ -15,7 +16,7 @@ export function LoginPage() {
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  if (authed) return <Navigate to="/orders" replace />;
+  if (authed) return <Navigate to={getDefaultRoute(roles, isAdmin)} replace />;
 
   async function submit(e: FormEvent) {
     e.preventDefault();
@@ -23,7 +24,10 @@ export function LoginPage() {
     setError(null);
     try {
       await login(email, password);
-      navigate('/orders', { replace: true });
+      
+      // Wait for a tick so useAuth state updates (if necessary) or we can just navigate to root 
+      // which will redirect. But since we need the updated roles, navigating to root is safest.
+      navigate('/', { replace: true });
     } catch (err) {
       setError((err as { message?: string })?.message ?? 'Login failed');
     } finally {