arrr-erp/app/ui/templates/components/staff_navigation_v2.html

{% if navigation_render_location_v2|default('page') == 'global-host' or not global_role_navigation_host_v2|default(false) %}
{#
  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?tab=overview',
    'visible': can_view_employee_portal(current_user, current_user_permissions, current_user_roles),
    'active': _staff_path.startswith('/employee/dashboard') and (_staff_tab == 'overview' or not _staff_tab)
  },
  {
    'label': 'Work',
    'url': '/employee/work',
    'visible': can_view_own_employee_work(current_user, current_user_permissions, current_user_roles),
    'active': _staff_path.startswith('/employee/work') or (_staff_path.startswith('/employee/dashboard') and _staff_tab == 'work')
  },
  {
    'label': 'Attendance & Leave',
    'visible': (
      can_view_own_employee_attendance(current_user, current_user_permissions, current_user_roles)
      or can_view_own_employee_leave(current_user, current_user_permissions, current_user_roles)
    ),
    'active': (
      _staff_path.startswith('/employee/attendance')
      or _staff_path.startswith('/employee/leave')
      or (_staff_path.startswith('/employee/dashboard') and _staff_tab == 'attendance')
    ),
    'children': [
      {
        'label': 'Attendance',
        'url': '/employee/attendance',
        'visible': can_view_own_employee_attendance(current_user, current_user_permissions, current_user_roles),
        'active': _staff_path.startswith('/employee/attendance')
      },
      {
        'label': 'Leave',
        'url': '/employee/leave',
        'visible': can_view_own_employee_leave(current_user, current_user_permissions, current_user_roles),
        'active': _staff_path.startswith('/employee/leave')
      }
    ]
  },
  {
    'label': 'Profile & HR',
    'visible': (
      can_view_employee_portal(current_user, current_user_permissions, current_user_roles)
      or can_view_own_employee_documents(current_user, current_user_permissions, current_user_roles)
      or can_view_own_employee_payslips(current_user, current_user_permissions, current_user_roles)
      or can_request_own_employee_offboarding(current_user, current_user_permissions, current_user_roles)
    ),
    'active': (
      _staff_path.startswith('/employee/profile')
      or _staff_path.startswith('/employee/documents')
      or _staff_path.startswith('/employee/payslips')
      or _staff_path.startswith('/employee/offboarding')
      or (_staff_path.startswith('/employee/dashboard') and _staff_tab == 'hr')
    ),
    'children': [
      {
        'label': 'Profile',
        'url': '/employee/profile',
        'visible': can_view_employee_portal(current_user, current_user_permissions, current_user_roles),
        'active': _staff_path.startswith('/employee/profile')
      },
      {
        'label': 'Documents',
        'url': '/employee/documents',
        'visible': can_view_own_employee_documents(current_user, current_user_permissions, current_user_roles),
        'active': _staff_path.startswith('/employee/documents')
      },
      {
        'label': 'Payslips',
        'url': '/employee/payslips',
        'visible': can_view_own_employee_payslips(current_user, current_user_permissions, current_user_roles),
        'active': _staff_path.startswith('/employee/payslips')
      },
      {
        'label': 'Offboarding',
        'url': '/employee/offboarding',
        'visible': can_request_own_employee_offboarding(current_user, current_user_permissions, current_user_roles),
        'active': _staff_path.startswith('/employee/offboarding')
      }
    ]
  },
  {
    'label': 'Tools',
    'visible': true,
    'active': _staff_path.startswith('/tools/bank-statement-analyzer'),
    'children': [
      {
        'label': 'Bank Analyzer',
        'url': '/tools/bank-statement-analyzer',
        'visible': true,
        'active': _staff_path.startswith('/tools/bank-statement-analyzer')
      }
    ]
  },
  {
    'label': 'Reports',
    'url': '/employee/dashboard?tab=reports',
    'visible': can_view_employee_portal(current_user, current_user_permissions, current_user_roles),
    'active': _staff_path.startswith('/employee/dashboard') and _staff_tab == 'reports'
  },
  {
    'label': 'Alerts',
    'url': '/alerts',
    'visible': true,
    'active': _staff_path.startswith('/alerts'),
    'badge': unread_alert_count if unread_alert_count is defined and unread_alert_count > 0 else none
  }
] %}

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