feat(web): add teams page and RBAC navigation/route gating (MS21-UI-005, RBAC-001, RBAC-002) (#595)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/app/(authenticated)/settings/users/page.tsx

@@ -56,6 +56,7 @@ import {
   type UpdateUserDto,
 } from "@/lib/api/admin";
 import { fetchUserWorkspaces, updateWorkspaceMemberRole } from "@/lib/api/workspaces";
+import { SettingsAccessDenied } from "@/components/settings/SettingsAccessDenied";
 
 const ROLE_PRIORITY: Record<WorkspaceMemberRole, number> = {
   [WorkspaceMemberRole.OWNER]: 4,
@@ -146,10 +147,6 @@ export default function UsersSettingsPage(): ReactElement {
     }
   }, []);
 
-  useEffect(() => {
-    void loadUsers(true);
-  }, [loadUsers]);
-
   useEffect(() => {
     fetchUserWorkspaces()
       .then((workspaces) => {
@@ -167,6 +164,14 @@ export default function UsersSettingsPage(): ReactElement {
       });
   }, []);
 
+  useEffect(() => {
+    if (isAdmin !== true) {
+      return;
+    }
+
+    void loadUsers(true);
+  }, [isAdmin, loadUsers]);
+
   function resetInviteForm(): void {
     setInviteForm(INITIAL_INVITE_FORM);
     setInviteError(null);
@@ -332,17 +337,20 @@ export default function UsersSettingsPage(): ReactElement {
     }
   }
 
-  if (isAdmin === false) {
+  if (isAdmin === null) {
     return (
-      <div className="p-8 max-w-2xl">
-        <div className="rounded-lg border border-red-200 bg-red-50 p-6 text-center">
-          <p className="text-lg font-semibold text-red-700">Access Denied</p>
-          <p className="mt-2 text-sm text-red-600">You need Admin or Owner role to manage users.</p>
-        </div>
-      </div>
+      <Card className="max-w-2xl mx-auto mt-8">
+        <CardContent className="py-12 text-center text-muted-foreground">
+          Checking permissions...
+        </CardContent>
+      </Card>
     );
   }
 
+  if (!isAdmin) {
+    return <SettingsAccessDenied message="You need Admin or Owner role to manage users." />;
+  }
+
   return (
     <div className="max-w-6xl mx-auto p-6 space-y-6">
       <div className="flex items-start justify-between gap-4">