From 5d5a0d9bd6e4f07f186ea1428cc8ec06e16f16d7 Mon Sep 17 00:00:00 2001
From: A R R R Associates <admin@arrrassociates.com>
Date: Sat, 11 Jul 2026 07:58:55 +0530
Subject: [PATCH] Unify Manager navigation and align full-width header

---
 .../manager_dashboard/dashboard.html          | 165 +++++++-----------
 .../components/manager_navigation_v2.html     |  73 +++++++-
 .../components/top_workspace_bar.html         |   2 +-
 3 files changed, 129 insertions(+), 111 deletions(-)

diff --git a/app/modules/manager_dashboard/templates/manager_dashboard/dashboard.html b/app/modules/manager_dashboard/templates/manager_dashboard/dashboard.html
index 2ae4905..2cfb702 100644
--- a/app/modules/manager_dashboard/templates/manager_dashboard/dashboard.html
+++ b/app/modules/manager_dashboard/templates/manager_dashboard/dashboard.html
@@ -16,127 +16,88 @@
     </div>
   </section>
 
-  {% set tabs = [
-    ('overview','Overview'),
-    ('team-work','Team Work'),
-    ('due-calendar','Due Calendar'),
-    ('review-queue','Review Queue'),
-    ('client-pending','Client Pending'),
-    ('documents','Documents'),
-    ('escalations','Escalations'),
-    ('reports','Reports'),
-    ('wizards','Wizards')
-  ] %}
+  {# Dashboard sections are now part of the unified Manager Dashboard submenu. #}
 
-  <section class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-soft">
-    <div class="sm:hidden">
-      <details id="manager-dashboard-mobile-menu" class="group">
-        <summary class="flex min-h-12 cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 text-sm font-semibold text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-500">
-          <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>Menu</span>
-          </span>
-          <span class="text-xs font-medium text-slate-500">Manager dashboard navigation</span>
-        </summary>
-
-        <nav aria-label="Manager dashboard navigation" class="border-t border-slate-100 bg-slate-50/80 px-4 py-3">
-          <ul class="space-y-1" role="list">
-            {% for code, label in tabs %}
-            <li>
-              <button
-                type="button"
-                data-tab="{{ code }}"
-                class="manager-tab flex w-full items-center justify-between gap-3 rounded-xl px-3 py-2.5 text-left text-sm font-semibold transition {% if active_tab == code %}bg-brand-50 text-brand-700{% else %}bg-white text-slate-800 hover:bg-slate-100{% endif %}"
-                {% if active_tab == code %}aria-current="page"{% endif %}
-              >
-                <span>{{ label }}</span>
-                {% if active_tab == code %}
-                <span class="h-2 w-2 rounded-full bg-brand-600" aria-hidden="true"></span>
-                {% endif %}
-              </button>
-            </li>
-            {% endfor %}
-          </ul>
-        </nav>
-      </details>
-    </div>
-
-    <div class="hidden gap-2 overflow-x-auto p-3 sm:flex" id="manager-tabs">
-      {% for code, label in tabs %}
-      <button type="button" data-tab="{{ code }}" class="manager-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>
-  </section>
-
-  <section id="manager-dashboard-panel">
-    {% include 'modules/manager_dashboard/templates/manager_dashboard/partials/' ~ (active_tab|replace('-', '_')) ~ '.html' ignore missing %}
+  <section id="manager-dashboard-panel"
+           data-initial-tab="{{ active_tab }}"
+           class="min-h-[360px]">
+    <div class="rounded-3xl border border-slate-200 bg-white p-8 text-center text-sm text-slate-500 shadow-soft">Loading dashboard...</div>
   </section>
 </div>
 
 <script>
-(function(){
-  const tabs = document.querySelectorAll('.manager-tab');
+(function () {
+  "use strict";
+
   const panel = document.getElementById('manager-dashboard-panel');
-  const mobileMenu = document.getElementById('manager-dashboard-mobile-menu');
+  if (!panel) return;
 
-  function setActiveState(tab) {
-    tabs.forEach(btn => {
-      const active = btn.dataset.tab === tab;
-      const isMobileButton = btn.closest('#manager-dashboard-mobile-menu') !== null;
+  const dashboardLinks = Array.from(document.querySelectorAll(
+    '[data-uiux-v2-pilot="manager"] a[href^="/manager/dashboard?tab="]'
+  ));
 
-      if (isMobileButton) {
-        btn.classList.toggle('bg-brand-50', active);
-        btn.classList.toggle('text-brand-700', active);
-        btn.classList.toggle('bg-white', !active);
-        btn.classList.toggle('text-slate-800', !active);
-        btn.classList.toggle('hover:bg-slate-100', !active);
-        if (active) {
-          btn.setAttribute('aria-current', 'page');
-        } else {
-          btn.removeAttribute('aria-current');
-        }
+  function tabFromLink(link) {
+    try {
+      return new URL(link.href, window.location.origin).searchParams.get('tab') || 'overview';
+    } catch (error) {
+      return 'overview';
+    }
+  }
 
-        let marker = btn.querySelector('[data-active-marker]');
-        if (active && !marker) {
-          marker = document.createElement('span');
-          marker.dataset.activeMarker = 'true';
-          marker.className = 'h-2 w-2 rounded-full bg-brand-600';
-          marker.setAttribute('aria-hidden', 'true');
-          btn.appendChild(marker);
-        } else if (!active && marker) {
-          marker.remove();
-        }
+  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 {
-        btn.classList.toggle('bg-brand-600', active);
-        btn.classList.toggle('text-white', active);
-        btn.classList.toggle('text-slate-600', !active);
-        btn.classList.toggle('hover:bg-slate-100', !active);
+        link.removeAttribute('aria-current');
       }
     });
   }
 
-  async function loadTab(tab) {
-    setActiveState(tab);
-    if (mobileMenu) mobileMenu.open = false;
+  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 res = await fetch('/manager/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);
-    } catch (err) {
-      panel.innerHTML = '<div class="rounded-3xl border border-red-200 bg-red-50 p-8 text-center text-sm font-semibold text-red-700 shadow-soft">Unable to load tab. Please refresh the page.</div>';
+      const response = await fetch('/manager/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="manager"] 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(btn => btn.addEventListener('click', () => loadTab(btn.dataset.tab)));
+  dashboardLinks.forEach((link) => {
+    link.addEventListener('click', function (event) {
+      if (window.location.pathname !== '/manager/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/manager_navigation_v2.html b/app/ui/templates/components/manager_navigation_v2.html
index bff70fa..96a619d 100644
--- a/app/ui/templates/components/manager_navigation_v2.html
+++ b/app/ui/templates/components/manager_navigation_v2.html
@@ -1,19 +1,27 @@
 {% if navigation_render_location_v2|default('page') == 'global-host' or not global_role_navigation_host_v2|default(false) %}
 {#
-  UI/UX V2 Phase 1D — Manager pilot navigation
-
-  Presentation-only replacement for the existing manager tab strip.
-  Existing URLs, route protection, dashboard content, forms and page actions
-  are unchanged.
+  UI/UX V2 Phase 1D.6 — Unified Manager navigation.
+  Presentation only. Existing routes and route-level permissions remain authoritative.
 #}
 {% set _manager_path = request.url.path %}
+{% set _manager_tab = request.query_params.get('tab', 'overview') %}
 {% set navigation_aria_label_v2 = 'Manager workspace navigation' %}
 {% set navigation_items_v2 = [
   {
     'label': 'Dashboard',
-    'url': '/manager/dashboard',
     'visible': true,
-    'active': _manager_path == '/manager/dashboard'
+    'active': _manager_path.startswith('/manager/dashboard'),
+    'children': [
+      {'label': 'Overview', 'url': '/manager/dashboard?tab=overview', 'active': _manager_path.startswith('/manager/dashboard') and _manager_tab == 'overview'},
+      {'label': 'Team Work', 'url': '/manager/dashboard?tab=team-work', 'active': _manager_path.startswith('/manager/dashboard') and _manager_tab == 'team-work'},
+      {'label': 'Due Calendar', 'url': '/manager/dashboard?tab=due-calendar', 'active': _manager_path.startswith('/manager/dashboard') and _manager_tab == 'due-calendar'},
+      {'label': 'Review Queue', 'url': '/manager/dashboard?tab=review-queue', 'active': _manager_path.startswith('/manager/dashboard') and _manager_tab == 'review-queue'},
+      {'label': 'Client Pending', 'url': '/manager/dashboard?tab=client-pending', 'active': _manager_path.startswith('/manager/dashboard') and _manager_tab == 'client-pending'},
+      {'label': 'Documents', 'url': '/manager/dashboard?tab=documents', 'active': _manager_path.startswith('/manager/dashboard') and _manager_tab == 'documents'},
+      {'label': 'Escalations', 'url': '/manager/dashboard?tab=escalations', 'active': _manager_path.startswith('/manager/dashboard') and _manager_tab == 'escalations'},
+      {'label': 'Reports', 'url': '/manager/dashboard?tab=reports', 'active': _manager_path.startswith('/manager/dashboard') and _manager_tab == 'reports'},
+      {'label': 'Wizards', 'url': '/manager/dashboard?tab=wizards', 'active': _manager_path.startswith('/manager/dashboard') and _manager_tab == 'wizards'}
+    ]
   },
   {
     'label': 'Team Work Board',
@@ -54,8 +62,57 @@
   }
 ] %}
 
-<div class="mb-6 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-soft" data-uiux-v2-pilot="manager">
+<div class="border-b border-slate-200 bg-white shadow-sm" data-uiux-v2-pilot="manager">
   {% include "ui/templates/components/navigation_v2.html" %}
   {% include "ui/templates/components/mobile_navigation_v2.html" %}
 </div>
+
+<script>
+(function () {
+  "use strict";
+
+  function initialiseManagerDropdowns() {
+    var root = document.querySelector('[data-uiux-v2-pilot="manager"]');
+    if (!root || root.dataset.dropdownAutoCloseInitialised === 'true') return;
+
+    var desktopNav = root.querySelector('nav[data-uiux-v2="desktop-navigation"]');
+    if (!desktopNav) return;
+
+    root.dataset.dropdownAutoCloseInitialised = 'true';
+    var dropdowns = Array.from(desktopNav.querySelectorAll('details'));
+
+    function closeAllExcept(exception) {
+      dropdowns.forEach(function (details) {
+        if (details !== exception) 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', initialiseManagerDropdowns, { once: true });
+  } else {
+    initialiseManagerDropdowns();
+  }
+})();
+</script>
 {% endif %}
diff --git a/app/ui/templates/components/top_workspace_bar.html b/app/ui/templates/components/top_workspace_bar.html
index f13ff01..fa467ff 100644
--- a/app/ui/templates/components/top_workspace_bar.html
+++ b/app/ui/templates/components/top_workspace_bar.html
@@ -1,4 +1,4 @@
-{% set _uiux_full_width_header = ('System Admin' in (ui_roles|default([], true))) or ('Firm Admin' in (ui_roles|default([], true))) or ('Partner' in (ui_roles|default([], true))) %}
+{% set _uiux_full_width_header = ('System Admin' in (ui_roles|default([], true))) or ('Firm Admin' in (ui_roles|default([], true))) or ('Partner' in (ui_roles|default([], true))) or ('Manager' in (ui_roles|default([], true))) or ('Branch Manager' 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' }}">