From 5140d123321027eedbe9ccf96b886b106929b5b1 Mon Sep 17 00:00:00 2001
From: Ashwin Kumar <ashwin@ashwins-air.home>
Date: Thu, 19 Mar 2026 21:11:59 +0100
Subject: [PATCH] feat(builder-parity): enrich inspector summary and internal
 dashboard list columns

---
 .../internal-dashboard-management/index.tsx   |   6 +-
 src/routes/admin/role-ui-configs/index.tsx    | 103 ++++++++++++++++--
 2 files changed, 97 insertions(+), 12 deletions(-)

diff --git a/src/routes/admin/internal-dashboard-management/index.tsx b/src/routes/admin/internal-dashboard-management/index.tsx
index 2de710c..e783339 100644
--- a/src/routes/admin/internal-dashboard-management/index.tsx
+++ b/src/routes/admin/internal-dashboard-management/index.tsx
@@ -311,6 +311,7 @@ export default function InternalDashboardManagementPage() {
               <thead>
                 <tr>
                   <th>Role</th>
+                  <th>Role ID</th>
                   <th>Dashboard</th>
                   <th>Status</th>
                   <th>Version</th>
@@ -319,15 +320,16 @@ export default function InternalDashboardManagementPage() {
               </thead>
               <tbody>
                 <Show when={loading()}>
-                  <tr><td colspan="5" style="text-align:center;padding:32px;color:#64748b">Loading internal dashboards...</td></tr>
+                  <tr><td colspan="6" style="text-align:center;padding:32px;color:#64748b">Loading internal dashboards...</td></tr>
                 </Show>
                 <Show when={!loading() && dashboards().length === 0}>
-                  <tr><td colspan="5" style="text-align:center;padding:32px;color:#94a3b8">No internal dashboards found. Create the first one.</td></tr>
+                  <tr><td colspan="6" style="text-align:center;padding:32px;color:#94a3b8">No internal dashboards found. Create the first one.</td></tr>
                 </Show>
                 <For each={dashboards()}>
                   {(d) => (
                     <tr>
                       <td style="color:#475569">{d.roleName || 'Not linked'}</td>
+                      <td style="color:#475569">{d.roleId || 'Not linked'}</td>
                       <td style="font-weight:600;color:#0f172a">{d.title}</td>
                       <td><span class={`status-chip ${d.status === 'published' ? 'active' : ''}`}>{d.status}</span></td>
                       <td style="color:#64748b">v{d.version}</td>
diff --git a/src/routes/admin/role-ui-configs/index.tsx b/src/routes/admin/role-ui-configs/index.tsx
index 80dcba9..f24a397 100644
--- a/src/routes/admin/role-ui-configs/index.tsx
+++ b/src/routes/admin/role-ui-configs/index.tsx
@@ -10,10 +10,15 @@ type ExternalRole = {
   roleKey: string;
   displayName: string;
   vertical: string;
+  roleCategory: string;
   onboardingSchemaId: string;
+  runtimeConfigVersion: number;
   enabledModules: string[];
   permissions: Record<string, string[]>;
   featureLimits: Record<string, unknown>;
+  requiresOnboardingApproval: boolean;
+  requiresLeadApproval: boolean;
+  requiresJobApproval: boolean;
   isActive: boolean;
 };
 
@@ -24,10 +29,15 @@ function parseRole(item: any): ExternalRole {
     roleKey: String(cfg.roleKey || item.key || item.role_key || ''),
     displayName: String(cfg.displayName || item.name || ''),
     vertical: String(cfg.vertical || ''),
+    roleCategory: String(cfg.roleCategory || ''),
     onboardingSchemaId: String(cfg.onboardingSchemaId || ''),
+    runtimeConfigVersion: Number(cfg.version || cfg.runtimeConfigVersion || 1),
     enabledModules: Array.isArray(cfg.enabledModules) ? cfg.enabledModules : [],
     permissions: (cfg.permissions && typeof cfg.permissions === 'object') ? cfg.permissions : {},
     featureLimits: (cfg.featureLimits && typeof cfg.featureLimits === 'object') ? cfg.featureLimits : {},
+    requiresOnboardingApproval: cfg.requiresOnboardingApproval ?? false,
+    requiresLeadApproval: cfg.requiresLeadApproval ?? false,
+    requiresJobApproval: cfg.requiresJobApproval ?? false,
     isActive: item.is_active !== false,
   };
 }
@@ -52,6 +62,17 @@ export default function RoleUiConfigsViewPage() {
   const roleKey = createMemo(() => searchParams.roleKey || '');
   const [rows] = createResource(loadRoles);
   const [selected] = createResource(roleKey, async (key) => (key ? loadRoleByKey(key) : null));
+  const permissionActions = ['read', 'create', 'update', 'delete', 'approve'];
+
+  const approvalFlags = createMemo(() => {
+    const value = selected();
+    if (!value) return [] as string[];
+    const flags: string[] = [];
+    if (value.requiresOnboardingApproval) flags.push('Onboarding Approval');
+    if (value.requiresLeadApproval) flags.push('Lead Approval');
+    if (value.requiresJobApproval) flags.push('Job Approval');
+    return flags;
+  });
 
   return (
     <AdminShell>
@@ -125,16 +146,78 @@ export default function RoleUiConfigsViewPage() {
             <div class="card"><p class="notice">Select an external role to view its current dashboard configuration.</p></div>
           </Show>
           <Show when={selected()}>
-            <div class="card">
-              <div class="field-grid-2">
-                <div class="kv-item"><p class="kv-label">Role Key</p><p class="kv-value">{selected()!.roleKey}</p></div>
-                <div class="kv-item"><p class="kv-label">Display Name</p><p class="kv-value">{selected()!.displayName}</p></div>
-                <div class="kv-item"><p class="kv-label">Vertical</p><p class="kv-value">{selected()!.vertical || '—'}</p></div>
-                <div class="kv-item"><p class="kv-label">Schema</p><p class="kv-value">{selected()!.onboardingSchemaId || '—'}</p></div>
-                <div class="kv-item" style="grid-column:1 / -1"><p class="kv-label">Enabled Modules</p><p class="kv-value">{selected()!.enabledModules.join(', ') || '—'}</p></div>
-              </div>
-              <h2 style="margin:14px 0 8px">Published Runtime Config</h2>
-              <pre class="json">{JSON.stringify(selected(), null, 2)}</pre>
+            <div style="display:flex;flex-direction:column;gap:12px">
+              <section class="card">
+                <div class="field-grid-2">
+                  <div class="kv-item"><p class="kv-label">Role Key</p><p class="kv-value">{selected()!.roleKey}</p></div>
+                  <div class="kv-item"><p class="kv-label">Display Name</p><p class="kv-value">{selected()!.displayName}</p></div>
+                  <div class="kv-item"><p class="kv-label">Vertical</p><p class="kv-value">{selected()!.vertical || '—'}</p></div>
+                  <div class="kv-item">
+                    <p class="kv-label">Status</p>
+                    <p class="kv-value">
+                      <span class={`status-pill ${selected()!.isActive ? 'status-approved' : 'status-rejected'}`}>{selected()!.isActive ? 'Active' : 'Inactive'}</span>
+                    </p>
+                  </div>
+                  <div class="kv-item"><p class="kv-label">Role Category</p><p class="kv-value">{selected()!.roleCategory || '—'}</p></div>
+                  <div class="kv-item"><p class="kv-label">Onboarding Schema</p><p class="kv-value">{selected()!.onboardingSchemaId || '—'}</p></div>
+                  <div class="kv-item"><p class="kv-label">Runtime Config Version</p><p class="kv-value">{selected()!.runtimeConfigVersion}</p></div>
+                  <div class="kv-item">
+                    <p class="kv-label">Approval Flags</p>
+                    <p class="kv-value">
+                      <Show when={approvalFlags().length > 0} fallback={'None'}>
+                        <span style="display:inline-flex;gap:6px;flex-wrap:wrap">
+                          {approvalFlags().map((flag) => <span class="status-pill status-pending">{flag}</span>)}
+                        </span>
+                      </Show>
+                    </p>
+                  </div>
+                </div>
+              </section>
+
+              <section class="card">
+                <h2 style="margin:0 0 8px">Enabled Modules</h2>
+                <Show when={selected()!.enabledModules.length > 0} fallback={<p class="notice">No modules configured.</p>}>
+                  <div style="display:flex;flex-wrap:wrap;gap:8px">
+                    {selected()!.enabledModules.map((moduleKey) => <span class="meta-chip">{moduleKey}</span>)}
+                  </div>
+                </Show>
+              </section>
+
+              <section class="card">
+                <h2 style="margin:0 0 8px">Permission Matrix</h2>
+                <div class="table-wrap">
+                  <table class="list-table">
+                    <thead>
+                      <tr>
+                        <th>Module</th>
+                        {permissionActions.map((action) => <th class="align-right">{action}</th>)}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {selected()!.enabledModules.map((moduleKey) => (
+                        <tr>
+                          <td>{moduleKey}</td>
+                          {permissionActions.map((action) => (
+                            <td class="align-right">
+                              <input type="checkbox" checked={(selected()!.permissions[moduleKey] || []).includes(action)} disabled />
+                            </td>
+                          ))}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </section>
+
+              <section class="card">
+                <h2 style="margin:0 0 8px">Feature Limits</h2>
+                <pre class="json">{JSON.stringify(selected()!.featureLimits || {}, null, 2)}</pre>
+              </section>
+
+              <section class="card">
+                <h2 style="margin:0 0 8px">Published Runtime Config</h2>
+                <pre class="json">{JSON.stringify(selected(), null, 2)}</pre>
+              </section>
             </div>
           </Show>
         </section>