From 2fbd1b5069f80e5c7e95d46a52d570eaadf3ff45 Mon Sep 17 00:00:00 2001
From: A R R R Associates <admin@arrrassociates.com>
Date: Sat, 11 Jul 2026 08:05:15 +0530
Subject: [PATCH] Unify Employee navigation and align full-width header

---
 .../templates/employees/portal_dashboard.html | 152 +++++-------------
 .../components/staff_navigation_v2.html       |  70 +++++++-
 .../components/top_workspace_bar.html         |   2 +-
 3 files changed, 107 insertions(+), 117 deletions(-)

diff --git a/app/modules/employees/templates/employees/portal_dashboard.html b/app/modules/employees/templates/employees/portal_dashboard.html
index 71ea14e..086954e 100644
--- a/app/modules/employees/templates/employees/portal_dashboard.html
+++ b/app/modules/employees/templates/employees/portal_dashboard.html
@@ -1,7 +1,6 @@
 {% extends "ui/templates/base/layout.html" %}
 {% block content %}
 <div class="space-y-6" id="employee-portal-root">
-  {% include "ui/templates/components/staff_navigation_v2.html" %}
   <section class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-soft">
     <div class="bg-gradient-to-r from-brand-700 via-brand-600 to-slate-900 px-6 py-6 text-white">
       <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
@@ -22,80 +21,25 @@
     </div>
   </section>
 
-  {% set main_tabs = [
-    ('overview','Overview'),
-    ('work','Work'),
-    ('attendance','Attendance'),
-    ('hr','HR & Profile'),
-    ('reports','Reports')
-  ] %}
+  {# Dashboard sections are now part of the unified Staff Dashboard submenu. #}
 
-  <section class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-soft">
-    <div class="sm:hidden">
-      <details id="employee-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>Dashboard Menu</span>
-          </span>
-          <span class="text-xs font-medium text-slate-500">Employee workspace sections</span>
-        </summary>
-
-        <nav aria-label="Employee workspace sections" 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 main_tabs %}
-            <li>
-              <button
-                type="button"
-                data-tab="{{ code }}"
-                class="employee-portal-tab employee-portal-main-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 class="inline-flex items-center gap-2">
-                  <span>{{ label }}</span>
-                  {% if code == 'hr' and unread_alert_count is defined and unread_alert_count > 0 %}
-                  <span class="rounded-full bg-brand-100 px-2 py-0.5 text-[10px] font-bold text-brand-700">{{ unread_alert_count }}</span>
-                  {% endif %}
-                </span>
-                {% if active_tab == code %}<span class="h-2 w-2 rounded-full bg-brand-600" data-active-marker aria-hidden="true"></span>{% endif %}
-              </button>
-            </li>
-            {% endfor %}
-          </ul>
-        </nav>
-      </details>
-    </div>
-
-    <div class="hidden p-3 sm:block">
-      <div class="mb-2 px-1 text-xs font-semibold uppercase tracking-wide text-slate-500">Employee Workspace</div>
-      <div class="overflow-x-auto pb-1">
-        <div class="flex min-w-max flex-nowrap gap-2" id="employee-portal-tabs">
-          {% for code, label in main_tabs %}
-          <button type="button" data-tab="{{ code }}" class="employee-portal-tab employee-portal-main-tab inline-flex shrink-0 items-center rounded-xl px-4 py-2 text-sm font-semibold whitespace-nowrap transition {% if active_tab == code %}bg-brand-600 text-white shadow-soft{% else %}border border-slate-300 bg-white text-slate-700 hover:bg-slate-50{% endif %}">
-            {{ label }}{% if code == 'hr' and unread_alert_count is defined and unread_alert_count > 0 %}<span class="ml-2 rounded-full bg-white/20 px-2 py-0.5 text-[10px]">{{ unread_alert_count }}</span>{% endif %}
-          </button>
-          {% endfor %}
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <section id="employee-portal-panel" class="space-y-6">
-    {% include "modules/employees/templates/employees/portal_partials/overview.html" %}
+  <section id="employee-portal-panel"
+           data-initial-tab="{{ active_tab }}"
+           class="space-y-6">
+    <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 () {
+  "use strict";
+
   const panel = document.getElementById('employee-portal-panel');
-  const mainTabs = Array.from(document.querySelectorAll('.employee-portal-main-tab'));
-  const mobileMenu = document.getElementById('employee-dashboard-mobile-menu');
-  if (!panel || !mainTabs.length) return;
+  if (!panel) return;
+
+  const dashboardLinks = Array.from(document.querySelectorAll(
+    '[data-uiux-v2-pilot="staff"] a[href^="/employee/dashboard?tab="]'
+  ));
 
   const groupMap = {
     'overview': 'overview',
@@ -119,43 +63,25 @@
     'reports': 'reports'
   };
 
+  function tabFromLink(link) {
+    try {
+      return new URL(link.href, window.location.origin).searchParams.get('tab') || 'overview';
+    } catch (error) {
+      return 'overview';
+    }
+  }
+
   function setActive(tabName) {
     const activeGroup = groupMap[tabName] || tabName || 'overview';
-    mainTabs.forEach(function (button) {
-      const active = button.dataset.tab === activeGroup;
-      const isMobileButton = button.closest('#employee-dashboard-mobile-menu') !== null;
-
-      if (isMobileButton) {
-        button.classList.toggle('bg-brand-50', active);
-        button.classList.toggle('text-brand-700', active);
-        button.classList.toggle('bg-white', !active);
-        button.classList.toggle('text-slate-800', !active);
-        button.classList.toggle('hover:bg-slate-100', !active);
-        if (active) {
-          button.setAttribute('aria-current', 'page');
-        } else {
-          button.removeAttribute('aria-current');
-        }
-
-        let marker = button.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');
-          button.appendChild(marker);
-        } else if (!active && marker) {
-          marker.remove();
-        }
+    dashboardLinks.forEach(function (link) {
+      const active = tabFromLink(link) === activeGroup;
+      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 {
-        button.classList.toggle('bg-brand-600', active);
-        button.classList.toggle('text-white', active);
-        button.classList.toggle('shadow-soft', active);
-        button.classList.toggle('border', !active);
-        button.classList.toggle('border-slate-300', !active);
-        button.classList.toggle('bg-white', !active);
-        button.classList.toggle('text-slate-700', !active);
-        button.classList.toggle('hover:bg-slate-50', !active);
+        link.removeAttribute('aria-current');
       }
     });
   }
@@ -163,19 +89,26 @@
   async function loadTab(tabName, pushState) {
     const safeTab = tabName || 'overview';
     setActive(safeTab);
-    if (mobileMenu) mobileMenu.open = false;
     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('/employee/dashboard/tab/' + encodeURIComponent(safeTab), {
         headers: {'X-Requested-With': 'fetch'}
       });
       if (!response.ok) throw new Error('HTTP ' + response.status);
+
       panel.innerHTML = await response.text();
+
       if (pushState) {
         const url = new URL(window.location.href);
         url.searchParams.set('tab', safeTab);
         window.history.pushState({tab: safeTab}, '', url.toString());
       }
+
+      document.querySelectorAll('[data-uiux-v2-pilot="staff"] details[open]').forEach(function (details) {
+        details.open = false;
+      });
+
       if (window.EmployeePortalGeo && typeof window.EmployeePortalGeo.bind === 'function') {
         window.EmployeePortalGeo.bind();
       }
@@ -184,17 +117,20 @@
     }
   }
 
-  document.addEventListener('click', function (event) {
-    const button = event.target.closest('.employee-portal-tab');
-    if (!button || !button.dataset.tab) return;
-    event.preventDefault();
-    loadTab(button.dataset.tab || 'overview', true);
+  dashboardLinks.forEach(function (link) {
+    link.addEventListener('click', function (event) {
+      if (window.location.pathname !== '/employee/dashboard') return;
+      event.preventDefault();
+      loadTab(tabFromLink(link), true);
+    });
   });
 
   window.addEventListener('popstate', function (event) {
     const params = new URLSearchParams(window.location.search);
     loadTab((event.state && event.state.tab) || params.get('tab') || 'overview', false);
   });
+
+  loadTab(panel.dataset.initialTab || 'overview', false);
 })();
 </script>
 {% endblock %}
diff --git a/app/ui/templates/components/staff_navigation_v2.html b/app/ui/templates/components/staff_navigation_v2.html
index 75b3696..9df7c28 100644
--- a/app/ui/templates/components/staff_navigation_v2.html
+++ b/app/ui/templates/components/staff_navigation_v2.html
@@ -1,19 +1,24 @@
 {% if navigation_render_location_v2|default('page') == 'global-host' or not global_role_navigation_host_v2|default(false) %}
 {#
-  UI/UX V2 Phase 1B — Staff pilot navigation
-
-  This component deliberately reuses the existing employee self-service
-  permission helpers and URLs. It does not grant access, change routes, or
-  replace dashboard content tabs.
+  UI/UX V2 Phase 1B.2 — Unified Employee / Staff navigation.
+  Presentation only. Existing employee self-service permission helpers,
+  routes and route-level authorization remain authoritative.
 #}
 {% set _staff_path = request.url.path %}
+{% set _staff_tab = request.query_params.get('tab', 'overview') %}
 {% set navigation_aria_label_v2 = 'Staff workspace navigation' %}
 {% set navigation_items_v2 = [
   {
     'label': 'Dashboard',
-    'url': '/employee/dashboard',
     'visible': can_view_employee_portal(current_user, current_user_permissions, current_user_roles),
-    'active': _staff_path == '/employee/dashboard'
+    'active': _staff_path.startswith('/employee/dashboard'),
+    'children': [
+      {'label': 'Overview', 'url': '/employee/dashboard?tab=overview', 'active': _staff_path.startswith('/employee/dashboard') and _staff_tab == 'overview'},
+      {'label': 'Work', 'url': '/employee/dashboard?tab=work', 'active': _staff_path.startswith('/employee/dashboard') and _staff_tab == 'work'},
+      {'label': 'Attendance', 'url': '/employee/dashboard?tab=attendance', 'active': _staff_path.startswith('/employee/dashboard') and _staff_tab == 'attendance'},
+      {'label': 'HR & Profile', 'url': '/employee/dashboard?tab=hr', 'active': _staff_path.startswith('/employee/dashboard') and _staff_tab == 'hr'},
+      {'label': 'Reports', 'url': '/employee/dashboard?tab=reports', 'active': _staff_path.startswith('/employee/dashboard') and _staff_tab == 'reports'}
+    ]
   },
   {
     'label': 'Work',
@@ -66,8 +71,57 @@
   }
 ] %}
 
-<div class="mb-6 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-soft" data-uiux-v2-pilot="staff">
+<div class="border-b border-slate-200 bg-white shadow-sm" data-uiux-v2-pilot="staff">
   {% include "ui/templates/components/navigation_v2.html" %}
   {% include "ui/templates/components/mobile_navigation_v2.html" %}
 </div>
+
+<script>
+(function () {
+  "use strict";
+
+  function initialiseStaffDropdowns() {
+    var root = document.querySelector('[data-uiux-v2-pilot="staff"]');
+    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', initialiseStaffDropdowns, { once: true });
+  } else {
+    initialiseStaffDropdowns();
+  }
+})();
+</script>
 {% endif %}
diff --git a/app/ui/templates/components/top_workspace_bar.html b/app/ui/templates/components/top_workspace_bar.html
index fa467ff..ca72bce 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))) or ('Manager' in (ui_roles|default([], true))) or ('Branch Manager' 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))) or ('Staff' in (ui_roles|default([], true))) or ('Employee' 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' }}">