Improve the frontend 4

frontend/src/router/ProtectedRoute.tsx

@@ -1,5 +1,11 @@
 /**
  * Protected Route component for handling authentication and authorization
+ *
+ * This component integrates with the unified permission system to provide
+ * comprehensive access control for routes. It checks both global user roles
+ * and tenant-specific permissions.
+ *
+ * For permission checking logic, see utils/permissions.ts
  */
 
 import React from 'react';
@@ -8,6 +14,7 @@ import { useAuthUser, useIsAuthenticated, useAuthLoading } from '../stores';
 import { useCurrentTenantAccess, useTenantPermissions } from '../stores/tenant.store';
 import { useHasAccess, useIsDemoMode } from '../hooks/useAccessControl';
 import { RouteConfig, canAccessRoute, ROUTES } from './routes.config';
+import { checkCombinedPermission, type User, type TenantAccess } from '../utils/permissions';
 
 interface ProtectedRouteProps {
   children: React.ReactNode;
@@ -311,40 +318,46 @@ export const ConditionalRender: React.FC<ConditionalRenderProps> = ({
 };
 
 // Route guard for admin-only routes (global admin or tenant owner/admin)
+// Uses unified permission system
 export const AdminRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return (
-    <ConditionalRender
-      requiredRoles={['admin', 'super_admin', 'owner']}
-      requireAll={false}
-      fallback={<UnauthorizedPage />}
-    >
-      {children}
-    </ConditionalRender>
-  );
+  const user = useAuthUser();
+  const tenantAccess = useCurrentTenantAccess();
+
+  // Check using unified permission system
+  const hasAccess = checkCombinedPermission(user as User | undefined, tenantAccess as TenantAccess | undefined, {
+    globalRoles: ['admin', 'super_admin'],
+    tenantRoles: ['owner', 'admin']
+  });
+
+  return hasAccess ? <>{children}</> : <UnauthorizedPage />;
 };
 
 // Route guard for manager-level routes (global admin/manager or tenant admin/owner)
+// Uses unified permission system
 export const ManagerRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return (
-    <ConditionalRender
-      requiredRoles={['admin', 'super_admin', 'manager', 'owner']}
-      requireAll={false}
-      fallback={<UnauthorizedPage />}
-    >
-      {children}
-    </ConditionalRender>
-  );
+  const user = useAuthUser();
+  const tenantAccess = useCurrentTenantAccess();
+
+  // Check using unified permission system
+  const hasAccess = checkCombinedPermission(user as User | undefined, tenantAccess as TenantAccess | undefined, {
+    globalRoles: ['admin', 'super_admin', 'manager'],
+    tenantRoles: ['owner', 'admin', 'member']
+  });
+
+  return hasAccess ? <>{children}</> : <UnauthorizedPage />;
 };
 
 // Route guard for tenant owner-only routes
+// Uses unified permission system
 export const OwnerRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return (
-    <ConditionalRender
-      requiredRoles={['super_admin', 'owner']}
-      requireAll={false}
-      fallback={<UnauthorizedPage />}
-    >
-      {children}
-    </ConditionalRender>
-  );
+  const user = useAuthUser();
+  const tenantAccess = useCurrentTenantAccess();
+
+  // Check using unified permission system
+  const hasAccess = checkCombinedPermission(user as User | undefined, tenantAccess as TenantAccess | undefined, {
+    globalRoles: ['super_admin'],
+    tenantRoles: ['owner']
+  });
+
+  return hasAccess ? <>{children}</> : <UnauthorizedPage />;
 };