From ddfcef4f71f59a11e57f116d52e9497e09e9cde5 Mon Sep 17 00:00:00 2001
From: A R R R Associates <admin@arrrassociates.com>
Date: Sat, 11 Jul 2026 07:22:13 +0530
Subject: [PATCH] Unify Firm Admin navigation and align full-width header

---
 .../firm_admin_dashboard/dashboard.html       | 138 +++++++++---------
 .../components/firm_admin_navigation_v2.html  |  73 ++++++++-
 .../components/top_workspace_bar.html         |   8 +-
 3 files changed, 143 insertions(+), 76 deletions(-)

diff --git a/app/modules/firm_admin_dashboard/templates/firm_admin_dashboard/dashboard.html b/app/modules/firm_admin_dashboard/templates/firm_admin_dashboard/dashboard.html
index 1d2a163..8d62038 100644
--- a/app/modules/firm_admin_dashboard/templates/firm_admin_dashboard/dashboard.html
+++ b/app/modules/firm_admin_dashboard/templates/firm_admin_dashboard/dashboard.html
@@ -17,80 +17,88 @@
     </div>
   </div>
 
-  {% set tabs = [
-    ('overview','Overview'),
-    ('branches','Branches'),
-    ('users','Users & Roles'),
-    ('firm-settings','Firm Settings'),
-    ('services','Services Setup'),
-    ('financial-years','Financial Years'),
-    ('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="firm-admin-tabs">
-      {% for code, label in tabs %}
-      <button type="button" data-tab="{{ code }}" class="firm-admin-tab whitespace-nowrap rounded-2xl px-4 py-2 text-sm font-semibold transition {% if active_tab == code %}bg-brand-600 text-white{% else %}text-slate-600 hover:bg-slate-100{% endif %}">{{ label }}</button>
-      {% endfor %}
-    </div>
-  </div>
+  {# Dashboard sections are now part of the unified Firm Admin Dashboard submenu. #}
 
-  <details id="firm-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">Firm administration sections</span>
-    </summary>
-    <div class="space-y-1 border-t border-slate-100 bg-slate-50/80 p-3">
-      {% for code, label in tabs %}
-      <button type="button" data-tab="{{ code }}" class="firm-admin-tab block w-full rounded-xl px-3 py-2.5 text-left text-sm font-semibold transition {% if active_tab == code %}bg-brand-600 text-white{% else %}bg-white text-slate-700 hover:bg-slate-100{% endif %}">{{ label }}</button>
-      {% endfor %}
-    </div>
-  </details>
-
-  <div id="firm-admin-panel" class="min-h-[24rem]">
-    {% include "modules/firm_admin_dashboard/templates/firm_admin_dashboard/partials/" ~ active_tab ~ ".html" ignore missing %}
+  <div id="firm-admin-panel"
+       data-initial-tab="{{ active_tab }}"
+       class="min-h-[24rem]">
+    <div class="rounded-3xl border border-slate-200 bg-white p-8 text-center text-sm text-slate-500 shadow-soft">Loading dashboard...</div>
   </div>
 </section>
 
 <script>
-(function(){
+(function () {
+  "use strict";
+
   const panel = document.getElementById('firm-admin-panel');
-  const buttons = Array.from(document.querySelectorAll('.firm-admin-tab'));
-  if (!panel || !buttons.length) return;
-  function activate(tab){
-    buttons.forEach(btn => {
-      const on = btn.dataset.tab === tab;
-      btn.classList.toggle('bg-brand-600', on);
-      btn.classList.toggle('text-white', on);
-      btn.classList.toggle('text-slate-600', !on);
-      btn.classList.toggle('hover:bg-slate-100', !on);
-    });
-  }
-  async function loadTab(tab){
-    activate(tab);
-    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>';
+  if (!panel) return;
+
+  const dashboardLinks = Array.from(document.querySelectorAll(
+    '[data-uiux-v2-pilot="firm-admin"] a[href^="/firm-admin/dashboard?tab="]'
+  ));
+
+  function tabFromLink(link) {
     try {
-      const res = await fetch('/firm-admin/dashboard/tab/' + encodeURIComponent(tab), {headers: {'X-Requested-With':'fetch'}});
-      if (!res.ok) throw new Error('HTTP ' + res.status);
-      panel.innerHTML = await res.text();
-      const url = new URL(window.location.href);
-      url.searchParams.set('tab', tab);
-      window.history.replaceState({}, '', url.toString());
-    } catch (err) {
-      panel.innerHTML = '<div class="rounded-3xl border border-red-200 bg-red-50 p-6 text-sm font-semibold text-red-800 shadow-soft">Unable to load tab. Please refresh the page.</div>';
+      return new URL(link.href, window.location.origin).searchParams.get('tab') || 'overview';
+    } catch (error) {
+      return 'overview';
     }
   }
-  buttons.forEach(btn => btn.addEventListener('click', () => {
-    loadTab(btn.dataset.tab);
-    const mobileMenu = document.getElementById('firm-admin-mobile-menu');
-    if (mobileMenu) mobileMenu.open = false;
-  }));
+
+  function setActive(tabName) {
+    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('/firm-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());
+      }
+
+      document.querySelectorAll('[data-uiux-v2-pilot="firm-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 font-semibold text-red-800 shadow-soft">Unable to load this dashboard section. Please refresh the page.</div>';
+    }
+  }
+
+  dashboardLinks.forEach((link) => {
+    link.addEventListener('click', function (event) {
+      if (window.location.pathname !== '/firm-admin/dashboard') return;
+      event.preventDefault();
+      loadTab(tabFromLink(link), true);
+    });
+  });
+
+  window.addEventListener('popstate', function () {
+    const url = new URL(window.location.href);
+    loadTab(url.searchParams.get('tab') || 'overview', false);
+  });
+
+  loadTab(panel.dataset.initialTab || 'overview', false);
 })();
 </script>
 {% endblock %}
-
diff --git a/app/ui/templates/components/firm_admin_navigation_v2.html b/app/ui/templates/components/firm_admin_navigation_v2.html
index a7dd49b..435fd51 100644
--- a/app/ui/templates/components/firm_admin_navigation_v2.html
+++ b/app/ui/templates/components/firm_admin_navigation_v2.html
@@ -1,15 +1,26 @@
 {#
-  UI/UX V2 Phase 1E — Firm Admin workspace navigation.
-  Presentation only: existing URLs and route-level permissions remain authoritative.
+  UI/UX V2 Phase 1E.1 — Unified Firm Admin navigation.
+  Presentation only. Existing routes and route-level permissions remain authoritative.
 #}
 {% set _firm_admin_path = request.url.path %}
+{% set _firm_admin_tab = request.query_params.get('tab', 'overview') %}
 {% set navigation_aria_label_v2 = 'Firm administration navigation' %}
 {% set navigation_items_v2 = [
   {
     'label': 'Dashboard',
-    'url': '/firm-admin/dashboard',
     'visible': true,
-    'active': _firm_admin_path.startswith('/firm-admin/dashboard')
+    'active': _firm_admin_path.startswith('/firm-admin/dashboard'),
+    'children': [
+      {'label': 'Overview', 'url': '/firm-admin/dashboard?tab=overview', 'active': _firm_admin_path.startswith('/firm-admin/dashboard') and _firm_admin_tab == 'overview'},
+      {'label': 'Branches', 'url': '/firm-admin/dashboard?tab=branches', 'active': _firm_admin_path.startswith('/firm-admin/dashboard') and _firm_admin_tab == 'branches'},
+      {'label': 'Users & Roles', 'url': '/firm-admin/dashboard?tab=users', 'active': _firm_admin_path.startswith('/firm-admin/dashboard') and _firm_admin_tab == 'users'},
+      {'label': 'Firm Settings', 'url': '/firm-admin/dashboard?tab=firm-settings', 'active': _firm_admin_path.startswith('/firm-admin/dashboard') and _firm_admin_tab == 'firm-settings'},
+      {'label': 'Services Setup', 'url': '/firm-admin/dashboard?tab=services', 'active': _firm_admin_path.startswith('/firm-admin/dashboard') and _firm_admin_tab == 'services'},
+      {'label': 'Financial Years', 'url': '/firm-admin/dashboard?tab=financial-years', 'active': _firm_admin_path.startswith('/firm-admin/dashboard') and _firm_admin_tab == 'financial-years'},
+      {'label': 'Reports', 'url': '/firm-admin/dashboard?tab=reports', 'active': _firm_admin_path.startswith('/firm-admin/dashboard') and _firm_admin_tab == 'reports'},
+      {'label': 'Wizards', 'url': '/firm-admin/dashboard?tab=wizards', 'active': _firm_admin_path.startswith('/firm-admin/dashboard') and _firm_admin_tab == 'wizards'},
+      {'label': 'Audit Logs', 'url': '/firm-admin/dashboard?tab=audit-logs', 'active': _firm_admin_path.startswith('/firm-admin/dashboard') and _firm_admin_tab == 'audit-logs'}
+    ]
   },
   {
     'label': 'Clients',
@@ -25,7 +36,7 @@
   {
     'label': 'Services',
     'visible': true,
-    'active': _firm_admin_path.startswith('/services'),
+    'active': _firm_admin_path.startswith('/services') and not _firm_admin_path.startswith('/services/engagements'),
     'children': [
       {'label': 'Firm Services', 'url': '/services', 'active': _firm_admin_path == '/services'},
       {'label': 'Service Catalogue', 'url': '/services/catalogue', 'active': _firm_admin_path.startswith('/services/catalogue')},
@@ -68,13 +79,15 @@
   {
     'label': 'Firm Setup',
     'visible': true,
-    'active': _firm_admin_path.startswith('/system-settings') or _firm_admin_path.startswith('/firm-admin/users'),
+    'active': _firm_admin_path.startswith('/system-settings') or _firm_admin_path.startswith('/email/settings'),
     'children': [
       {'label': 'Settings Dashboard', 'url': '/system-settings', 'active': _firm_admin_path == '/system-settings'},
       {'label': 'Branches', 'url': '/system-settings/branches', 'active': _firm_admin_path.startswith('/system-settings/branches')},
       {'label': 'Users', 'url': '/system-settings/users', 'active': _firm_admin_path.startswith('/system-settings/users')},
+      {'label': 'Roles & Permissions', 'url': '/system-settings/rbac/roles', 'active': _firm_admin_path.startswith('/system-settings/rbac')},
       {'label': 'Financial Years', 'url': '/system-settings/financial-years', 'active': _firm_admin_path.startswith('/system-settings/financial-years')},
       {'label': 'Branding', 'url': '/system-settings/branding', 'active': _firm_admin_path.startswith('/system-settings/branding')},
+      {'label': 'Firm Email Settings', 'url': '/email/settings', 'active': _firm_admin_path.startswith('/email/settings')},
       {'label': 'Audit Logs', 'url': '/system-settings/audit-logs', 'active': _firm_admin_path.startswith('/system-settings/audit-logs')}
     ]
   },
@@ -87,7 +100,53 @@
   }
 ] %}
 
-<div class="mb-6 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-soft" data-uiux-v2-pilot="firm-admin">
+<div class="border-b border-slate-200 bg-white shadow-sm" data-uiux-v2-pilot="firm-admin">
   {% include "ui/templates/components/navigation_v2.html" %}
   {% include "ui/templates/components/mobile_navigation_v2.html" %}
 </div>
+
+<script>
+(function () {
+  "use strict";
+
+  function initialiseFirmAdminDropdowns() {
+    var root = document.querySelector('[data-uiux-v2-pilot="firm-admin"]');
+    if (!root || root.dataset.dropdownAutoCloseInitialised === 'true') return;
+    root.dataset.dropdownAutoCloseInitialised = 'true';
+
+    var dropdowns = Array.from(root.querySelectorAll('details'));
+
+    function closeAllExcept(except) {
+      dropdowns.forEach(function (details) {
+        if (details !== except) details.removeAttribute('open');
+      });
+    }
+
+    dropdowns.forEach(function (details) {
+      details.addEventListener('toggle', function () {
+        if (details.open) closeAllExcept(details);
+      });
+
+      details.querySelectorAll('a[href]').forEach(function (link) {
+        link.addEventListener('click', function () {
+          details.removeAttribute('open');
+        });
+      });
+    });
+
+    document.addEventListener('click', function (event) {
+      if (!root.contains(event.target)) closeAllExcept(null);
+    });
+
+    document.addEventListener('keydown', function (event) {
+      if (event.key === 'Escape') closeAllExcept(null);
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initialiseFirmAdminDropdowns, { once: true });
+  } else {
+    initialiseFirmAdminDropdowns();
+  }
+})();
+</script>
diff --git a/app/ui/templates/components/top_workspace_bar.html b/app/ui/templates/components/top_workspace_bar.html
index 3204eec..57528cf 100644
--- a/app/ui/templates/components/top_workspace_bar.html
+++ b/app/ui/templates/components/top_workspace_bar.html
@@ -1,7 +1,7 @@
-{% 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' }}">
+{% set _uiux_full_width_header = ('System Admin' in (ui_roles|default([], true))) or ('Firm Admin' in (ui_roles|default([], true))) %}
+<header class="sticky top-0 z-40 border-b border-slate-200/70 {{ 'bg-white/95' if _uiux_full_width_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_full_width_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_full_width_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 %}