From 3b98609cb54c63c05effe7787d30d94ae9509d4d Mon Sep 17 00:00:00 2001 From: Ashwin Kumar Date: Tue, 24 Mar 2026 05:26:39 +0100 Subject: [PATCH] ui(step-5): update roles/runtime-roles pages to reference layout - roles/create: navy submit button, proper form inputs, data-table - roles/templates: table-card, navy Create button - runtime-roles/index: fix oversized heading, data-table, navy colors - runtime-roles/new: white header shell, proper form styling Co-Authored-By: Claude Sonnet 4.6 --- src/routes/admin/roles/create.tsx | 222 ++++++++++++----------- src/routes/admin/roles/templates.tsx | 102 ++++++----- src/routes/admin/runtime-roles/index.tsx | 120 ++++++------ src/routes/admin/runtime-roles/new.tsx | 39 ++-- 4 files changed, 249 insertions(+), 234 deletions(-) diff --git a/src/routes/admin/roles/create.tsx b/src/routes/admin/roles/create.tsx index f275702..2645a63 100644 --- a/src/routes/admin/roles/create.tsx +++ b/src/routes/admin/roles/create.tsx @@ -93,127 +93,131 @@ export default function CreateInternalRolePage() { return ( -
-
-

Create Internal Role

-

Create a new internal role and choose what it can access.

+
+
+

Create Internal Role

+

Create a new internal role and choose what it can access.

- Back to Roles -
- +
+ - -
{error()}
- + +
{error()}
+ - {/* Role Details */} -
-

Role Basics

-

Start by giving this role a clear name.

-
-
- - setRoleName(e.currentTarget.value)} - placeholder="e.g. Customer Support Rep" - /> + {/* Role Details */} +
+

Role Basics

+

Start by giving this role a clear name.

+
+
+ + setRoleName(e.currentTarget.value)} + placeholder="e.g. Customer Support Rep" + /> +
+
+ + setDescription(e.currentTarget.value)} + placeholder="Short description of this role" + /> +
+
-
- - setDescription(e.currentTarget.value)} - placeholder="Short description of this role" - /> -
-
-
- {/* Module Access */} -
-

Area Access

-

Select which areas this role can access. You can set permissions for selected areas below.

- -

Loading available areas...

- - 0}> -
- {allModules().map((mod) => ( - - ))} + {/* Module Access */} +
+

Area Access

+

Select which areas this role can access. You can set permissions for selected areas below.

+ +

Loading available areas...

+ + 0}> +
+ {allModules().map((mod) => ( + + ))} +
+ + +

No areas available.

+
- - -

No areas available.

- -
- {/* Permission Table */} - 0}> -
-

Permissions

-

Choose what this role can do in each selected area.

-
- - - - - - - - - - - - - {assignedModules().sort().map((mod) => { - const perms = permsByModule()[mod] || []; - const actionMap: Record = {}; - perms.forEach((p) => { actionMap[p.action] = p.id; }); - const hasRead = !!actionMap['Read'] && permissionIds().includes(actionMap['Read']); - const hasCreate = !!actionMap['Create'] && permissionIds().includes(actionMap['Create']); - const hasUpdate = !!actionMap['Update'] && permissionIds().includes(actionMap['Update']); - const hasDelete = !!actionMap['Delete'] && permissionIds().includes(actionMap['Delete']); - const noAccess = !hasRead && !hasCreate && !hasUpdate && !hasDelete; - return ( + {/* Permission Table */} + 0}> +
+

Permissions

+

Choose what this role can do in each selected area.

+
+
AreaNo AccessReadCreateUpdateDelete
+ - - - - - - + + + + + + - ); - })} - -
{mod}{actionMap['Read'] ? togglePermission(actionMap['Read'])} aria-label={`${mod} read`} /> : —}{actionMap['Create'] ? togglePermission(actionMap['Create'])} aria-label={`${mod} create`} /> : —}{actionMap['Update'] ? togglePermission(actionMap['Update'])} aria-label={`${mod} update`} /> : —}{actionMap['Delete'] ? togglePermission(actionMap['Delete'])} aria-label={`${mod} delete`} /> : —}AreaNo AccessReadCreateUpdateDelete
+ + + {assignedModules().sort().map((mod) => { + const perms = permsByModule()[mod] || []; + const actionMap: Record = {}; + perms.forEach((p) => { actionMap[p.action] = p.id; }); + const hasRead = !!actionMap['Read'] && permissionIds().includes(actionMap['Read']); + const hasCreate = !!actionMap['Create'] && permissionIds().includes(actionMap['Create']); + const hasUpdate = !!actionMap['Update'] && permissionIds().includes(actionMap['Update']); + const hasDelete = !!actionMap['Delete'] && permissionIds().includes(actionMap['Delete']); + const noAccess = !hasRead && !hasCreate && !hasUpdate && !hasDelete; + return ( + + {mod} + + {actionMap['Read'] ? togglePermission(actionMap['Read'])} aria-label={`${mod} read`} /> : —} + {actionMap['Create'] ? togglePermission(actionMap['Create'])} aria-label={`${mod} create`} /> : —} + {actionMap['Update'] ? togglePermission(actionMap['Update'])} aria-label={`${mod} update`} /> : —} + {actionMap['Delete'] ? togglePermission(actionMap['Delete'])} aria-label={`${mod} delete`} /> : —} + + ); + })} + + +
+
+ + + {/* Save */} +
+ Cancel +
- - - {/* Save */} -
-
); diff --git a/src/routes/admin/roles/templates.tsx b/src/routes/admin/roles/templates.tsx index 8e11d4a..389b4af 100644 --- a/src/routes/admin/roles/templates.tsx +++ b/src/routes/admin/roles/templates.tsx @@ -36,57 +36,63 @@ export default function RoleTemplatesPage() { return ( -
-
-

Role Templates

-

Starter role presets for faster internal role creation and cloning.

+
+
+
+
+

Role Templates

+

Starter role presets for faster internal role creation and cloning.

+
+ Create Internal Role +
- Create Internal Role -
-
-
-

Available Templates

- {count()} template{count() !== 1 ? 's' : ''} +
+
+
+

Available Templates

+ {count()} template{count() !== 1 ? 's' : ''} +
+
+ + + + + + + + + + + + + + + + + 0}> + + {(item) => ( + + + + + + + )} + + + +
NameDescriptionCodeActions
Loading templates...
No templates available yet.
{item.name}{item.description || '—'}{item.code || '—'} +
+ View + Use As Base +
+
+
+
-
- - - - - - - - - - - - - - - - - 0}> - - {(item) => ( - - - - - - - )} - - - -
NameDescriptionCodeActions
Loading templates...
No templates available yet.
{item.name}{item.description || '—'}{item.code || '—'} -
- View - Use As Base -
-
-
-
+
); } diff --git a/src/routes/admin/runtime-roles/index.tsx b/src/routes/admin/runtime-roles/index.tsx index 14d1e38..71ad006 100644 --- a/src/routes/admin/runtime-roles/index.tsx +++ b/src/routes/admin/runtime-roles/index.tsx @@ -76,67 +76,71 @@ export default function RuntimeRolesPage() { return ( -
-

Roles Management

-

Configure and maintain external system roles and access privileges.

-
- -
-
- - - - - - - - - - - - - - - - - - - - - 0}> - {roles()!.map((role) => ( - - - - - - - - ))} - - -
IDNameIssue TypeEditDelete
Loading external roles...
Failed to load external roles. Is the backend running?
No external roles configured yet.
{role.roleKey || role.id?.slice(0, 6).toUpperCase()}{role.displayName} - - View - ↗ - - - ✎ - - -
+
+
+

External Role Management

+

Configure and maintain external system roles and access privileges.

-
-

Showing 1 to 5 of {(roles()?.length || 0) || 5} entries

-
- - - - - + +
+
+
+ + + + + + + + + + + + + + + + + + + + + 0}> + {roles()!.map((role) => ( + + + + + + + + ))} + + +
IDNameIssue TypeEditDelete
Loading external roles...
Failed to load external roles. Is the backend running?
No external roles configured yet.
{role.roleKey || role.id?.slice(0, 6).toUpperCase()}{role.displayName} + + View + ↗ + + + ✎ + + +
+
+
+

Showing 1 to 5 of {(roles()?.length || 0) || 5} entries

+
+ + + + + +
+
-
+
); } diff --git a/src/routes/admin/runtime-roles/new.tsx b/src/routes/admin/runtime-roles/new.tsx index cd238e0..29d9ab5 100644 --- a/src/routes/admin/runtime-roles/new.tsx +++ b/src/routes/admin/runtime-roles/new.tsx @@ -84,29 +84,30 @@ export default function CreateExternalRolePage() { return ( -
-
-

Create External Role

-

+

+
+

Create External Role

+

Create a new external role and choose what it can access in the app.

- Back to External Roles + +
+ + + +
{error()}
+ + + +
- - - - -
{error()}
- - - ); }