From 69dcd42d7b33e10969a88888bcb2839b88dbc769 Mon Sep 17 00:00:00 2001
From: A R R R Associates <admin@arrrassociates.com>
Date: Sat, 11 Jul 2026 07:15:16 +0530
Subject: [PATCH] Unify System Admin navigation and full-width header

---
 .../system_admin_dashboard/dashboard.html     | 100 +++++++-----------
 .../system_admin_navigation_v2.html           |  15 ++-
 .../components/top_workspace_bar.html         |   7 +-
 3 files changed, 57 insertions(+), 65 deletions(-)

diff --git a/app/modules/system_admin_dashboard/templates/system_admin_dashboard/dashboard.html b/app/modules/system_admin_dashboard/templates/system_admin_dashboard/dashboard.html
index 595eaed..8504db5 100644
--- a/app/modules/system_admin_dashboard/templates/system_admin_dashboard/dashboard.html
+++ b/app/modules/system_admin_dashboard/templates/system_admin_dashboard/dashboard.html
@@ -16,50 +16,7 @@
     </div>
   </div>
 
-  {% set tabs = [
-    ('overview', 'Overview'),
-    ('firms', 'Firms'),
-    ('firm-setup-health', 'Setup Health'),
-    ('catalogue', 'Service Catalogue'),
-    ('smtp', 'Platform SMTP'),
-    ('storage', 'Storage'),
-    ('billing', 'Billing Readiness'),
-    ('reports', 'Reports'),
-    ('wizards', 'Wizards'),
-    ('audit-logs', 'Audit Logs')
-  ] %}
-
-  <div class="hidden rounded-3xl border border-slate-200 bg-white p-2 shadow-soft sm:block">
-    <div class="flex gap-2 overflow-x-auto" id="system-admin-dashboard-tabs">
-      {% for tab_key, tab_label in tabs %}
-      <button type="button"
-              data-dashboard-tab="{{ tab_key }}"
-              class="system-admin-tab whitespace-nowrap rounded-2xl px-4 py-2 text-sm font-semibold transition {% if active_tab == tab_key %}bg-brand-600 text-white{% else %}text-slate-600 hover:bg-slate-100{% endif %}">
-        {{ tab_label }}
-      </button>
-      {% endfor %}
-    </div>
-  </div>
-
-  <details id="system-admin-mobile-menu" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-soft sm:hidden">
-    <summary class="flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 text-sm font-semibold text-slate-800">
-      <span class="inline-flex items-center gap-2">
-        <svg class="h-5 w-5 group-open:hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" d="M4 6h16M4 12h16M4 18h16" /></svg>
-        <svg class="hidden h-5 w-5 group-open:block" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" d="M6 6l12 12M18 6 6 18" /></svg>
-        <span>Dashboard Menu</span>
-      </span>
-      <span class="text-xs font-medium text-slate-500">Platform dashboard sections</span>
-    </summary>
-    <div class="space-y-1 border-t border-slate-100 bg-slate-50/80 p-3">
-      {% for tab_key, tab_label in tabs %}
-      <button type="button"
-              data-dashboard-tab="{{ tab_key }}"
-              class="system-admin-tab block w-full rounded-xl px-3 py-2.5 text-left text-sm font-semibold transition {% if active_tab == tab_key %}bg-brand-600 text-white{% else %}bg-white text-slate-700 hover:bg-slate-100{% endif %}">
-        {{ tab_label }}
-      </button>
-      {% endfor %}
-    </div>
-  </details>
+  {# Dashboard sections are now part of the unified System Admin Dashboard submenu. #}
 
   <div id="system-admin-dashboard-panel"
        data-initial-tab="{{ active_tab }}"
@@ -70,45 +27,68 @@
 
 <script>
 (function () {
+  "use strict";
+
   const panel = document.getElementById('system-admin-dashboard-panel');
-  const tabs = Array.from(document.querySelectorAll('[data-dashboard-tab]'));
-  if (!panel || !tabs.length) return;
+  if (!panel) return;
+
+  const dashboardLinks = Array.from(document.querySelectorAll(
+    '[data-uiux-v2-pilot="system-admin"] a[href^="/system-admin/dashboard?tab="]'
+  ));
+
+  function tabFromLink(link) {
+    try {
+      return new URL(link.href, window.location.origin).searchParams.get('tab') || 'overview';
+    } catch (error) {
+      return 'overview';
+    }
+  }
 
   function setActive(tabName) {
-    tabs.forEach((tab) => {
-      const active = tab.dataset.dashboardTab === tabName;
-      tab.classList.toggle('bg-brand-600', active);
-      tab.classList.toggle('text-white', active);
-      tab.classList.toggle('text-slate-600', !active);
-      tab.classList.toggle('bg-white', !active && tab.closest('#system-admin-mobile-menu'));
-      tab.classList.toggle('hover:bg-slate-100', !active);
+    dashboardLinks.forEach((link) => {
+      const active = tabFromLink(link) === tabName;
+      link.classList.toggle('bg-brand-50', active);
+      link.classList.toggle('text-brand-700', active);
+      link.classList.toggle('text-slate-700', !active);
+      if (active) {
+        link.setAttribute('aria-current', 'page');
+      } else {
+        link.removeAttribute('aria-current');
+      }
     });
   }
 
   async function loadTab(tabName, pushState) {
     setActive(tabName);
     panel.innerHTML = '<div class="rounded-3xl border border-slate-200 bg-white p-8 text-center text-sm text-slate-500 shadow-soft">Loading...</div>';
+
     try {
       const response = await fetch('/system-admin/dashboard/tab/' + encodeURIComponent(tabName), {
         headers: { 'X-Requested-With': 'fetch' }
       });
       if (!response.ok) throw new Error('Tab load failed');
+
       panel.innerHTML = await response.text();
+
       if (pushState) {
         const url = new URL(window.location.href);
         url.searchParams.set('tab', tabName);
         history.pushState({ tab: tabName }, '', url.toString());
       }
-      const mobileMenu = document.getElementById('system-admin-mobile-menu');
-      if (mobileMenu) mobileMenu.open = false;
-    } catch (err) {
-      panel.innerHTML = '<div class="rounded-3xl border border-red-200 bg-red-50 p-6 text-sm text-red-700 shadow-soft">Unable to load this tab. Please refresh the page.</div>';
+
+      document.querySelectorAll('[data-uiux-v2-pilot="system-admin"] details[open]').forEach((details) => {
+        details.open = false;
+      });
+    } catch (error) {
+      panel.innerHTML = '<div class="rounded-3xl border border-red-200 bg-red-50 p-6 text-sm text-red-700 shadow-soft">Unable to load this dashboard section. Please refresh the page.</div>';
     }
   }
 
-  tabs.forEach((tab) => {
-    tab.addEventListener('click', function () {
-      loadTab(tab.dataset.dashboardTab, true);
+  dashboardLinks.forEach((link) => {
+    link.addEventListener('click', function (event) {
+      if (window.location.pathname !== '/system-admin/dashboard') return;
+      event.preventDefault();
+      loadTab(tabFromLink(link), true);
     });
   });
 
diff --git a/app/ui/templates/components/system_admin_navigation_v2.html b/app/ui/templates/components/system_admin_navigation_v2.html
index d19d826..f77034d 100644
--- a/app/ui/templates/components/system_admin_navigation_v2.html
+++ b/app/ui/templates/components/system_admin_navigation_v2.html
@@ -7,9 +7,20 @@
 {% set navigation_items_v2 = [
   {
     'label': 'Dashboard',
-    'url': '/system-admin/dashboard',
     'visible': true,
-    'active': _system_admin_path.startswith('/system-admin/dashboard')
+    'active': _system_admin_path.startswith('/system-admin/dashboard'),
+    'children': [
+      {'label': 'Overview', 'url': '/system-admin/dashboard?tab=overview', 'active': _system_admin_path.startswith('/system-admin/dashboard') and (request.query_params.get('tab', 'overview') == 'overview')},
+      {'label': 'Firms', 'url': '/system-admin/dashboard?tab=firms', 'active': _system_admin_path.startswith('/system-admin/dashboard') and request.query_params.get('tab') == 'firms'},
+      {'label': 'Setup Health', 'url': '/system-admin/dashboard?tab=firm-setup-health', 'active': _system_admin_path.startswith('/system-admin/dashboard') and request.query_params.get('tab') == 'firm-setup-health'},
+      {'label': 'Service Catalogue', 'url': '/system-admin/dashboard?tab=catalogue', 'active': _system_admin_path.startswith('/system-admin/dashboard') and request.query_params.get('tab') == 'catalogue'},
+      {'label': 'Platform SMTP', 'url': '/system-admin/dashboard?tab=smtp', 'active': _system_admin_path.startswith('/system-admin/dashboard') and request.query_params.get('tab') == 'smtp'},
+      {'label': 'Storage', 'url': '/system-admin/dashboard?tab=storage', 'active': _system_admin_path.startswith('/system-admin/dashboard') and request.query_params.get('tab') == 'storage'},
+      {'label': 'Billing Readiness', 'url': '/system-admin/dashboard?tab=billing', 'active': _system_admin_path.startswith('/system-admin/dashboard') and request.query_params.get('tab') == 'billing'},
+      {'label': 'Reports', 'url': '/system-admin/dashboard?tab=reports', 'active': _system_admin_path.startswith('/system-admin/dashboard') and request.query_params.get('tab') == 'reports'},
+      {'label': 'Wizards', 'url': '/system-admin/dashboard?tab=wizards', 'active': _system_admin_path.startswith('/system-admin/dashboard') and request.query_params.get('tab') == 'wizards'},
+      {'label': 'Audit Logs', 'url': '/system-admin/dashboard?tab=audit-logs', 'active': _system_admin_path.startswith('/system-admin/dashboard') and request.query_params.get('tab') == 'audit-logs'}
+    ]
   },
   {
     'label': 'Firms',
diff --git a/app/ui/templates/components/top_workspace_bar.html b/app/ui/templates/components/top_workspace_bar.html
index 493014b..3204eec 100644
--- a/app/ui/templates/components/top_workspace_bar.html
+++ b/app/ui/templates/components/top_workspace_bar.html
@@ -1,6 +1,7 @@
-<header class="sticky top-0 z-40 border-b border-slate-200/70 bg-slate-100/85 backdrop-blur-xl">
-  <div class="mx-auto max-w-[1500px] px-3 py-3 sm:px-6 lg:px-8">
-    <div class="rounded-3xl border border-slate-200 bg-white/95 px-3 py-3 shadow-soft sm:px-4">
+{% set _uiux_system_admin_header = 'System Admin' in (ui_roles|default([], true)) %}
+<header class="sticky top-0 z-40 border-b border-slate-200/70 {{ 'bg-white/95' if _uiux_system_admin_header else 'bg-slate-100/85' }} backdrop-blur-xl">
+  <div class="{{ 'w-full px-4 py-3 sm:px-6 lg:px-8' if _uiux_system_admin_header else 'mx-auto max-w-[1500px] px-3 py-3 sm:px-6 lg:px-8' }}">
+    <div class="{{ 'border-0 bg-transparent px-0 py-0 shadow-none' if _uiux_system_admin_header else 'rounded-3xl border border-slate-200 bg-white/95 px-3 py-3 shadow-soft sm:px-4' }}">
       <div class="flex items-center gap-2 sm:gap-3">
         <a href="/workspaces" class="flex min-w-0 flex-1 items-center gap-2 rounded-2xl px-1 py-1 transition hover:bg-slate-50 sm:gap-3 lg:min-w-[220px] lg:flex-none lg:px-2">
           {% if firm_branding.logo_url %}