Unify Firm Admin navigation and align full-width header

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>

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 %}