feat(roles): roles setup

apps/Administration-FE/scripts/check-contract-drift.mjs

@@ -9,6 +9,7 @@ const required = [
   'admin-auth.v2.ts',
   'admin-rbac.v1.ts',
   'admin-management.v2.ts',
+  'admin-roles.v1.ts',
   'publish.v2.ts',
 ];
 

apps/Administration-FE/scripts/check-i18n.mjs

@@ -8,6 +8,8 @@ const files = [
   'components/SignInForm.tsx',
   'components/AdminShell.tsx',
   'components/PageEditor.tsx',
+  'components/RolesList.tsx',
+  'components/RoleForm.tsx',
 ];
 const allowedLiteral = new Set(['Title', 'Description', 'Primary heading', 'Summary', 'Body']);
 

apps/Administration-FE/scripts/generate-client.mjs

@@ -14,6 +14,7 @@ const contracts = [
   'admin-auth.v2.yaml',
   'admin-rbac.v1.yaml',
   'admin-management.v2.yaml',
+  'admin-roles.v1.yaml',
   'publish.v2.yaml',
 ];
 

apps/Administration-FE/src/components/AdminShell.tsx

@@ -13,13 +13,22 @@ import {
 import { hasTokens } from '../lib/token-store';
 import { t } from '../lib/i18n';
 import PageEditor from './PageEditor';
+import RoleForm from './RoleForm';
+import RolesList from './RolesList';
 import SignInForm from './SignInForm';
 import SiteSettingsEditor from './SiteSettingsEditor';
 
-type View = 'site_settings' | 'home';
+type View = 'site_settings' | 'home' | 'roles' | 'role_form';
+
+function canManageRolesFrom(session: SessionContext | null): boolean {
+  return (
+    hasPermission(session, 'roles.manage') || Boolean(session?.roles?.includes('administrator'))
+  );
+}
 
 export default function AdminShell() {
   const [view, setView] = useState<View>('site_settings');
+  const [editingRoleId, setEditingRoleId] = useState<string | null>(null);
   const [session, setSession] = useState<SessionContext | null>(null);
   const [siteSettings, setSiteSettings] = useState<Record<string, unknown> | null>(null);
   const [homePage, setHomePage] = useState<Record<string, unknown> | null>(null);
@@ -41,6 +50,9 @@ export default function AdminShell() {
       setSiteSettings(null);
       setHomePage(null);
       setWorkspaceError(t('admin.workspace.load_failed'));
+      if (canManageRolesFrom(nextSession)) {
+        setView('roles');
+      }
     } finally {
       setReady(true);
     }
@@ -57,6 +69,26 @@ export default function AdminShell() {
     });
   }, [loadWorkspace]);
 
+  useEffect(() => {
+    if (!session) {
+      document.title = t('admin.sign_in.title');
+      return;
+    }
+    if (view === 'home') {
+      document.title = t('admin.workspace.home_page');
+      return;
+    }
+    if (view === 'roles') {
+      document.title = t('admin.workspace.settings');
+      return;
+    }
+    if (view === 'role_form') {
+      document.title = editingRoleId ? t('admin.roles.edit') : t('admin.roles.add');
+      return;
+    }
+    document.title = t('admin.workspace.site_settings');
+  }, [session, view, editingRoleId]);
+
   async function refreshData() {
     const settings = await getSiteSettingsRecord();
     setSiteSettings(settings as Record<string, unknown>);
@@ -82,6 +114,14 @@ export default function AdminShell() {
     setMessage(null);
     setError(null);
     setWorkspaceError(null);
+    setView('site_settings');
+    setEditingRoleId(null);
+  }
+
+  function openRoles() {
+    setView('roles');
+    setEditingRoleId(null);
+    setError(null);
   }
 
   if (!ready) {
@@ -100,24 +140,28 @@ export default function AdminShell() {
     );
   }
 
-  if (!siteSettings || !homePage) {
-    return (
-      <main id="main" className="container">
-        <p role="alert">{workspaceError || t('admin.workspace.load_failed')}</p>
-        <button type="button" onClick={handleSignOut}>
-          {t('admin.sign_out')}
-        </button>
-      </main>
-    );
-  }
-
   const canDraft = hasPermission(session, 'drafts.save');
   const canPublish = hasPermission(session, 'records.publish');
+  const canManageRoles = canManageRolesFrom(session);
+  const settingsCurrent = view === 'roles' || view === 'role_form';
+
+  if (!siteSettings || !homePage) {
+    if (!canManageRoles) {
+      return (
+        <main id="main" className="container">
+          <p role="alert">{workspaceError || t('admin.workspace.load_failed')}</p>
+          <button type="button" onClick={handleSignOut}>
+            {t('admin.sign_out')}
+          </button>
+        </main>
+      );
+    }
+  }
 
   return (
     <div>
       <header className="admin-header">
-        <div className="container">
+        <div className="container admin-header-inner">
           <h1>{t('admin.workspace.title')}</h1>
           <p>{session.email}</p>
           <button type="button" onClick={handleSignOut}>
@@ -148,16 +192,28 @@ export default function AdminShell() {
                 {t('admin.workspace.home_page')}
               </button>
             </li>
+            {canManageRoles && (
+              <li>
+                <button
+                  type="button"
+                  className={settingsCurrent ? 'active' : ''}
+                  aria-current={settingsCurrent ? 'page' : undefined}
+                  onClick={openRoles}
+                >
+                  {t('admin.workspace.settings')}
+                </button>
+              </li>
+            )}
           </ul>
         </nav>
         <main id="main" className="admin-main">
-          {message && <p role="status">{message}</p>}
+          {message && view !== 'roles' && view !== 'role_form' && <p role="status">{message}</p>}
           {error && (
             <p className="error" role="alert">
               {error}
             </p>
           )}
-          {view === 'site_settings' && (
+          {view === 'site_settings' && siteSettings && (
             <SiteSettingsEditor
               record={siteSettings}
               canDraft={canDraft}
@@ -178,7 +234,7 @@ export default function AdminShell() {
               }}
             />
           )}
-          {view === 'home' && (
+          {view === 'home' && homePage && (
             <PageEditor
               record={homePage}
               canDraft={canDraft}
@@ -199,6 +255,31 @@ export default function AdminShell() {
               }}
             />
           )}
+          {view === 'roles' && (
+            <RolesList
+              notice={message}
+              onAdd={() => {
+                setEditingRoleId(null);
+                setMessage(null);
+                setView('role_form');
+              }}
+              onEdit={(id) => {
+                setEditingRoleId(id);
+                setMessage(null);
+                setView('role_form');
+              }}
+            />
+          )}
+          {view === 'role_form' && (
+            <RoleForm
+              roleId={editingRoleId}
+              onCancel={openRoles}
+              onSaved={() => {
+                setMessage(t('admin.roles.saved'));
+                openRoles();
+              }}
+            />
+          )}
         </main>
       </div>
     </div>