update

Frontend/src/features/auth/components/AdminRoute.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect } from 'react';
+import { Navigate } from 'react-router-dom';
+import useAuthStore from '../../../store/useAuthStore';
+import { useAuthModal } from '../contexts/AuthModalContext';
+
+interface AdminRouteProps {
+  children: React.ReactNode;
+}
+
+const AdminRoute: React.FC<AdminRouteProps> = ({ 
+  children
+}) => {
+  const { isAuthenticated, userInfo, isLoading } = useAuthStore();
+  const { openModal } = useAuthModal();
+  
+  
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      openModal('login');
+    }
+  }, [isLoading, isAuthenticated, openModal]);
+  
+  if (isLoading) {
+    return (
+      <div 
+        className="min-h-screen flex items-center 
+          justify-center bg-gray-50"
+      >
+        <div className="text-center">
+          <div 
+            className="animate-spin rounded-full h-12 w-12 
+              border-b-2 border-indigo-600 mx-auto"
+          />
+          <p className="mt-4 text-gray-600">
+            Authenticating...
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  
+  if (!isAuthenticated) {
+    return null; // Modal will be shown by AuthModalManager
+  }
+
+  
+  const isAdmin = userInfo?.role === 'admin';
+  if (!isAdmin) {
+    // Redirect to appropriate dashboard based on role
+    if (userInfo?.role === 'staff') {
+      return <Navigate to="/staff/dashboard" replace />;
+    } else if (userInfo?.role === 'accountant') {
+      return <Navigate to="/accountant/dashboard" replace />;
+    }
+    return <Navigate to="/" replace />;
+  }
+
+  return <>{children}</>;
+};
+
+export default AdminRoute;