Rakseeibra/arrr-erp
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify Employee navigation and align full-width header

Browse Source
This commit is contained in:
A R R R Associates
2026-07-11 08:05:15 +05:30
parent 5d5a0d9bd6
commit 2fbd1b5069
3 changed files with 107 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/ui/templates/components/staff_navigation_v2.html
+62 -8
View File
@@ -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 %}
app/ui/templates/components/top_workspace_bar.html
+1 -1
View File
@@ -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' }}">