Add Entra app-role route authorization for initial ui-staff sections

.snyk

@@ -76,3 +76,18 @@ ignore:
         reason: 'Transitive dependency in Docusaurus; not exploitable in current usage.'
         expires: '2026-06-28T00:00:00.000Z'
         created: '2026-05-11T10:00:00.000Z'
+  'SNYK-JS-AI-16734889':
+    - '* > ai@5.0.105':
+        reason: 'Transitive dependency in @docusaurus/preset-classic; not exploitable in current usage.'
+        expires: '2026-06-18T00:00:00.000Z'
+        created: '2026-05-18T11:04:00.000Z'
+  'SNYK-JS-AISDKPROVIDERUTILS-16734888':
+    - '* > @ai-sdk/provider-utils@3.0.18':
+        reason: 'Transitive dependency in @docusaurus/preset-classic; not exploitable in current usage.'
+        expires: '2026-06-18T00:00:00.000Z'
+        created: '2026-05-18T11:04:00.000Z'
+  'SNYK-JS-AISDKPROVIDERUTILS-16735288':
+    - '* > @ai-sdk/provider-utils@3.0.18':
+        reason: 'Transitive dependency in @docusaurus/preset-classic; not exploitable in current usage.'
+        expires: '2026-06-18T00:00:00.000Z'
+        created: '2026-05-18T11:04:00.000Z'

apps/ui-community/src/contexts/theme-context.tsx

@@ -1,3 +1,4 @@
+import { loadStoredTheme, saveStoredTheme } from '@cellix/ui-core';
 import { Button, theme } from 'antd';
 import type { SeedToken } from 'antd/lib/theme/interface/index.js';
 import { createContext, type ReactNode, useCallback, useEffect, useState } from 'react';
@@ -15,7 +16,7 @@ interface ThemeContextType {
 					textColor: string | undefined;
 					backgroundColor: string | undefined;
 				};
-				type: string;
+				type: 'light' | 'dark' | 'custom';
 		  }
 		| undefined;
 	setTheme: (tokens: Partial<SeedToken>, types: string) => void;
@@ -91,13 +92,15 @@ export const ThemeProvider = ({ children }: { children: ReactNode }) => {
 					type: 'custom',
 				};
 			}
-			localStorage.setItem('themeProp', JSON.stringify(valueToSet));
+			if (valueToSet) {
+				saveStoredTheme(valueToSet);
+			}
 			return valueToSet;
 		});
 	}, []);
 
 	useEffect(() => {
-		const extractFromLocal = JSON.parse(localStorage.getItem('themeProp') || '{}');
+		const extractFromLocal = loadStoredTheme();
 		if (extractFromLocal && extractFromLocal.type === 'dark') {
 			setTheme(
 				{
@@ -119,22 +122,22 @@ export const ThemeProvider = ({ children }: { children: ReactNode }) => {
 		} else if (extractFromLocal && extractFromLocal.type === 'custom') {
 			setTheme(
 				{
-					colorTextBase: extractFromLocal.hardCodedTokens.textColor,
-					colorBgBase: extractFromLocal.hardCodedTokens.backgroundColor,
+					colorTextBase: extractFromLocal.hardCodedTokens?.textColor,
+					colorBgBase: extractFromLocal.hardCodedTokens?.backgroundColor,
 				},
 				'custom',
 			);
 			return;
 		} else {
 			const valueToSet = {
-				type: 'light',
+				type: 'light' as const,
 				token: theme.defaultSeed,
 				hardCodedTokens: {
 					textColor: '#000000',
 					backgroundColor: '#ffffff',
 				},
 			};
-			localStorage.setItem('themeProp', JSON.stringify(valueToSet));
+			saveStoredTheme(valueToSet);
 			setTheme(theme.defaultSeed, 'light');
 			return;
 		}

apps/ui-staff/src/App.tsx

@@ -5,23 +5,89 @@ import { Root as Finance } from '@ocom/ui-staff-route-finance';
 import { Root } from '@ocom/ui-staff-route-root';
 import { Root as TechAdmin } from '@ocom/ui-staff-route-tech-admin';
 import { Root as UserManagement } from '@ocom/ui-staff-route-user-management';
-import { StaffAuthProvider } from '@ocom/ui-staff-shared';
+import { StaffAuthContext, StaffAuthProvider } from '@ocom/ui-staff-shared';
+import { Spin } from 'antd';
+import { useContext } from 'react';
 import { useAuth } from 'react-oidc-context';
-import { Outlet, Route, Routes } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 import './App.css';
 import { AuthLanding } from './components/ui/molecules/auth-landing/index.tsx';
 import { client } from './components/ui/organisms/apollo-connection/apollo-client-links.tsx';
 import { ApolloConnection } from './components/ui/organisms/apollo-connection/index.tsx';
+import { useStaffPermissions } from './hooks/use-staff-permissions.ts';
 import { Unauthorized } from './unauthorized.tsx';
 
+function StaffRoutes() {
+	const auth = useContext(StaffAuthContext);
+	const perms = auth?.permissions;
+	const canManageCommunities = perms?.canManageCommunities === true;
+	const canManageUsers = perms?.canManageUsers === true;
+	const canManageFinance = perms?.canManageFinance === true;
+	const canManageTechAdmin = perms?.canManageTechAdmin === true;
+
+	let defaultStaffRoute = '/unauthorized';
+	if (canManageTechAdmin) {
+		defaultStaffRoute = '/staff/tech';
+	} else if (canManageFinance) {
+		defaultStaffRoute = '/staff/finance';
+	} else if (canManageCommunities) {
+		defaultStaffRoute = '/staff/community-management';
+	} else if (canManageUsers) {
+		defaultStaffRoute = '/staff/user-management';
+	}
+
+	return (
+		<Routes>
+			<Route
+				index
+				element={
+					<Navigate
+						to={defaultStaffRoute}
+						replace
+					/>
+				}
+			/>
+			{canManageCommunities && (
+				<Route
+					path="community-management/*"
+					element={<CommunityManagement />}
+				/>
+			)}
+			{canManageUsers && (
+				<Route
+					path="user-management/*"
+					element={<UserManagement />}
+				/>
+			)}
+			{canManageFinance && (
+				<Route
+					path="finance/*"
+					element={<Finance />}
+				/>
+			)}
+			{canManageTechAdmin && (
+				<Route
+					path="tech/*"
+					element={<TechAdmin />}
+				/>
+			)}
+			<Route
+				path="*"
+				element={
+					<Navigate
+						to="/unauthorized"
+						replace
+					/>
+				}
+			/>
+		</Routes>
+	);
+}
+
 export default function App() {
 	const rootSection = <Root />;
 	const auth = useAuth();
 
-	// Build a best-effort identity object to supply to shared placeholders
-
-	// Provide a best-effort raw profile to the shared staff shell. StaffRouteShell will
-	// attempt to extract display name and roles from this raw profile.
 	const identity = {
 		raw: (auth?.user?.profile as Record<string, unknown>) ?? undefined,
 		onLogout: () => HandleLogout(auth, client, globalThis.location.origin),
@@ -33,13 +99,9 @@ export default function App() {
 		</RequireAuth>
 	);
 
-	// Staff section acts as the parent route element and must render an Outlet so
-	// nested child routes declared in the top-level Routes are rendered in place.
 	const staffSectionElement = (
 		<RequireAuth forceLogin={false}>
-			<StaffAuthProvider value={identity}>
-				<Outlet />
-			</StaffAuthProvider>
+			<StaffSection identity={identity} />
 		</RequireAuth>
 	);
 
@@ -59,34 +121,32 @@ export default function App() {
 					element={<Unauthorized />}
 				/>
 
-				{/* Parent staff route: child routes must be declared as nested Route elements
-					so relative paths like "users/*" resolve against /staff. */}
+				{/* StaffSection renders StaffAuthProvider + StaffRoutes which handles all
+				authenticated sub-routes with permission guards. No nested Route children
+				are needed here because StaffRoutes defines its own Routes block. */}
 				<Route
 					path="/staff/*"
 					element={staffSectionElement}
-				>
-					<Route
-						index
-						element={<Root />}
-					/>
-					<Route
-						path="community-management/*"
-						element={<CommunityManagement />}
-					/>
-					<Route
-						path="user-management/*"
-						element={<UserManagement />}
-					/>
-					<Route
-						path="finance/*"
-						element={<Finance />}
-					/>
-					<Route
-						path="tech/*"
-						element={<TechAdmin />}
-					/>
-				</Route>
+				/>
 			</Routes>
 		</ApolloConnection>
 	);
 }
+
+function StaffSection({ identity }: { identity: Parameters<typeof StaffAuthProvider>[0]['value'] }) {
+	const { permissions, user, loading } = useStaffPermissions();
+
+	if (loading) {
+		return (
+			<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+				<Spin size="large" />
+			</div>
+		);
+	}
+
+	return (
+		<StaffAuthProvider value={{ ...identity, permissions, name: user?.displayName, email: user?.email }}>
+			<StaffRoutes />
+		</StaffAuthProvider>
+	);
+}

apps/ui-staff/src/components/ui/molecules/auth-landing/index.tsx

@@ -1,5 +1,42 @@
+import { Spin } from 'antd';
 import { Navigate } from 'react-router-dom';
+import { useStaffPermissions } from '../../../../hooks/use-staff-permissions.ts';
 
 export const AuthLanding: React.FC = () => {
-	return <Navigate to="/staff/community-management" />;
+	const { permissions, loading, error } = useStaffPermissions();
+
+	if (loading) {
+		return (
+			<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+				<Spin size="large" />
+			</div>
+		);
+	}
+
+	if (error) {
+		return (
+			<Navigate
+				to="/unauthorized"
+				replace
+			/>
+		);
+	}
+
+	let targetRoute = '/unauthorized';
+	if (permissions?.canManageTechAdmin) {
+		targetRoute = '/staff/tech';
+	} else if (permissions?.canManageFinance) {
+		targetRoute = '/staff/finance';
+	} else if (permissions?.canManageCommunities) {
+		targetRoute = '/staff/community-management';
+	} else if (permissions?.canManageUsers) {
+		targetRoute = '/staff/user-management';
+	}
+
+	return (
+		<Navigate
+			to={targetRoute}
+			replace
+		/>
+	);
 };

apps/ui-staff/src/contexts/theme-context.tsx

@@ -1,3 +1,4 @@
+import { type StoredTheme } from '@cellix/ui-core';
 import { Button, theme } from 'antd';
 import type { SeedToken } from 'antd/lib/theme/interface/index.js';
 import { createContext, type ReactNode, useCallback, useEffect, useState } from 'react';
@@ -10,7 +11,7 @@ interface ThemeContextType {
 					textColor: string | undefined;
 					backgroundColor: string | undefined;
 				};
-				type: string;
+				type: StoredTheme['type'];
 		  }
 		| undefined;
 	setTheme: (tokens: Partial<SeedToken>, type: string) => void;