From 0e509713f57a8f8b8cf2be66b3755b6108736434 Mon Sep 17 00:00:00 2001
From: Ashwin Kumar <ashwin@ashwins-air.home>
Date: Thu, 19 Mar 2026 13:56:41 +0100
Subject: [PATCH] feat(admin): align role/runtime/onboarding detail screens
 with Next UI

---
 .../admin/onboarding-schemas/[schemaId].tsx   | 21 ++++++++++----
 src/routes/admin/roles/[id]/edit.tsx          | 12 ++++++--
 src/routes/admin/roles/[id]/index.tsx         |  8 +++++-
 src/routes/admin/runtime-roles/[roleKey].tsx  | 28 +++++++++++++++----
 4 files changed, 54 insertions(+), 15 deletions(-)

diff --git a/src/routes/admin/onboarding-schemas/[schemaId].tsx b/src/routes/admin/onboarding-schemas/[schemaId].tsx
index 5e8a6dc..69ec337 100644
--- a/src/routes/admin/onboarding-schemas/[schemaId].tsx
+++ b/src/routes/admin/onboarding-schemas/[schemaId].tsx
@@ -1,4 +1,4 @@
-import { useNavigate, useParams } from '@solidjs/router';
+import { A, useNavigate, useParams } from '@solidjs/router';
 import { createEffect, createMemo, createResource, createSignal, For, Show } from 'solid-js';
 import AdminShell from '~/components/AdminShell';
 
@@ -140,12 +140,23 @@ export default function EditOnboardingFlowPage() {
 
   return (
     <AdminShell>
-      <div class="page-actions">
+      <nav class="admin-link-tabs" aria-label="Onboarding Management Navigation">
+        <A class="admin-link-tab active" href="/admin/onboarding-schemas">Onboarding Schemas</A>
+        <A class="admin-link-tab" href="/admin/runtime-roles">External Runtime Roles</A>
+        <A class="admin-link-tab" href="/admin/roles">Internal Roles</A>
+      </nav>
+
+      <div class="page-hero-card page-actions">
         <div>
-          <h1 class="page-title">Edit Onboarding Flow</h1>
-          <p class="page-subtitle">Update the onboarding flow details, steps, and fields.</p>
+          <h1 class="page-title">Onboarding Management</h1>
+          <p class="page-subtitle">Open one flow at a time, then update role mapping, steps, fields, and final submission message.</p>
+        </div>
+        <div class="actions" style="margin-top:0">
+          <button class="btn" type="button" disabled={saving()} onClick={() => handleSubmit(data()?.is_active ? 'draft' : 'published')}>
+            {data()?.is_active ? 'Unpublish' : 'Publish'}
+          </button>
+          <A class="btn" href="/admin/onboarding-schemas">Back to Onboarding</A>
         </div>
-        <a class="btn" href="/admin/onboarding-schemas">Back to Onboarding</a>
       </div>
 
       <Show when={data.loading}>
diff --git a/src/routes/admin/roles/[id]/edit.tsx b/src/routes/admin/roles/[id]/edit.tsx
index df1694e..4787852 100644
--- a/src/routes/admin/roles/[id]/edit.tsx
+++ b/src/routes/admin/roles/[id]/edit.tsx
@@ -1,4 +1,4 @@
-import { useNavigate, useParams } from '@solidjs/router';
+import { A, useNavigate, useParams } from '@solidjs/router';
 import { createEffect, createMemo, createResource, createSignal, Show } from 'solid-js';
 import AdminShell from '~/components/AdminShell';
 
@@ -111,14 +111,20 @@ export default function EditInternalRolePage() {
 
   return (
     <AdminShell>
-      <div class="page-actions">
+      <div class="page-hero-card page-actions">
         <div>
           <h1 class="page-title">Edit Internal Role</h1>
           <p class="page-subtitle">Update role name, module access, and permissions.</p>
         </div>
-        <a class="btn" href={`/admin/roles/${params.id}`}>Back to Role</a>
+        <A class="btn" href={`/admin/roles/${params.id}`}>Back to Role</A>
       </div>
 
+      <nav class="admin-link-tabs" aria-label="Role Management Navigation">
+        <A class="admin-link-tab active" href="/admin/roles">Internal Roles</A>
+        <A class="admin-link-tab" href="/admin/runtime-roles">External Runtime Roles</A>
+        <A class="admin-link-tab" href="/admin/onboarding-schemas">Onboarding Schemas</A>
+      </nav>
+
       <Show when={data.loading}>
         <div class="card"><p class="notice">Loading role...</p></div>
       </Show>
diff --git a/src/routes/admin/roles/[id]/index.tsx b/src/routes/admin/roles/[id]/index.tsx
index c7381d5..0d49a8a 100644
--- a/src/routes/admin/roles/[id]/index.tsx
+++ b/src/routes/admin/roles/[id]/index.tsx
@@ -43,7 +43,7 @@ export default function RoleDetailPage() {
 
   return (
     <AdminShell>
-      <div class="page-actions">
+      <div class="page-hero-card page-actions">
         <div>
           <h1 class="page-title">Role Details</h1>
           <p class="page-subtitle">View role information and assigned permissions.</p>
@@ -56,6 +56,12 @@ export default function RoleDetailPage() {
         </div>
       </div>
 
+      <nav class="admin-link-tabs" aria-label="Role Management Navigation">
+        <A class="admin-link-tab active" href="/admin/roles">Internal Roles</A>
+        <A class="admin-link-tab" href="/admin/runtime-roles">External Runtime Roles</A>
+        <A class="admin-link-tab" href="/admin/onboarding-schemas">Onboarding Schemas</A>
+      </nav>
+
       <Show when={data.loading}>
         <div class="card">
           <p class="notice">Loading role details...</p>
diff --git a/src/routes/admin/runtime-roles/[roleKey].tsx b/src/routes/admin/runtime-roles/[roleKey].tsx
index c3f3fec..bb4beb8 100644
--- a/src/routes/admin/runtime-roles/[roleKey].tsx
+++ b/src/routes/admin/runtime-roles/[roleKey].tsx
@@ -1,4 +1,4 @@
-import { useNavigate, useParams } from '@solidjs/router';
+import { A, useNavigate, useParams } from '@solidjs/router';
 import { createEffect, createResource, createSignal, Show } from 'solid-js';
 import AdminShell from '~/components/AdminShell';
 
@@ -105,14 +105,23 @@ export default function EditExternalRolePage() {
 
   return (
     <AdminShell>
-      <div class="page-actions">
+      <div class="page-hero-card page-actions">
         <div>
-          <h1 class="page-title">Edit Runtime Role</h1>
-          <p class="page-subtitle">Update this external runtime role configuration.</p>
+          <h1 class="page-title">External Role Management</h1>
+          <p class="page-subtitle">Manage one external role in detail, including modules, onboarding assignment, and approval gates.</p>
+        </div>
+        <div class="actions" style="margin-top:0">
+          <A class="btn" href={`/admin/role-ui-configs?roleKey=${encodeURIComponent(params.roleKey)}`}>Open Inspector</A>
+          <A class="btn" href="/admin/runtime-roles">Back to Runtime Roles</A>
         </div>
-        <a class="btn" href="/admin/runtime-roles">Back to Runtime Roles</a>
       </div>
 
+      <nav class="admin-link-tabs" aria-label="External Management Navigation">
+        <A class="admin-link-tab active" href="/admin/runtime-roles">External Runtime Roles</A>
+        <A class="admin-link-tab" href="/admin/onboarding-schemas">Onboarding Schemas</A>
+        <A class="admin-link-tab" href="/admin/roles">Internal Roles</A>
+      </nav>
+
       <Show when={data.loading}>
         <div class="card"><p class="notice">Loading role...</p></div>
       </Show>
@@ -130,9 +139,16 @@ export default function EditExternalRolePage() {
       </Show>
 
       <Show when={!data.loading && config()}>
+        <section class="card" style="margin-bottom:16px">
+          <h2 style="margin-bottom:6px">Publishing Model</h2>
+          <p class="notice" style="margin:0">
+            Changes on this screen update the published runtime role config through the admin API.
+          </p>
+        </section>
+
         <div class="grid">
           <section class="card external-role-form">
-            <h2>Role Builder</h2>
+            <h2>External Role Builder</h2>
 
             <div class="field">
               <label>Role Key <span style="color:#ef4444">*</span></label>