Activate UIUX V2 navigation for Firm Admin pilot

This commit is contained in:
A R R R Associates
2026-07-10 20:43:35 +05:30
parent 6f6247c8e6
commit d0b2984fb3
6 changed files with 121 additions and 3 deletions
@@ -1,5 +1,6 @@
{% extends "ui/templates/base/layout.html" %} {% extends "ui/templates/base/layout.html" %}
{% block content %} {% block content %}
{% include "ui/templates/components/firm_admin_navigation_v2.html" %}
<section class="space-y-6"> <section class="space-y-6">
<div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft"> <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between"> <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
@@ -27,7 +28,7 @@
('wizards','Wizards'), ('wizards','Wizards'),
('audit-logs','Audit Logs') ('audit-logs','Audit Logs')
] %} ] %}
<div class="rounded-3xl border border-slate-200 bg-white p-2 shadow-soft"> <div class="hidden rounded-3xl border border-slate-200 bg-white p-2 shadow-soft sm:block">
<div class="flex gap-2 overflow-x-auto" id="firm-admin-tabs"> <div class="flex gap-2 overflow-x-auto" id="firm-admin-tabs">
{% for code, label in tabs %} {% for code, label in tabs %}
<button type="button" data-tab="{{ code }}" class="firm-admin-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> <button type="button" data-tab="{{ code }}" class="firm-admin-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>
@@ -35,6 +36,22 @@
</div> </div>
</div> </div>
<details id="firm-admin-mobile-menu" class="group overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-soft sm:hidden">
<summary class="flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 text-sm font-semibold text-slate-800">
<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">Firm administration sections</span>
</summary>
<div class="space-y-1 border-t border-slate-100 bg-slate-50/80 p-3">
{% for code, label in tabs %}
<button type="button" data-tab="{{ code }}" class="firm-admin-tab block w-full rounded-xl px-3 py-2.5 text-left text-sm font-semibold transition {% if active_tab == code %}bg-brand-600 text-white{% else %}bg-white text-slate-700 hover:bg-slate-100{% endif %}">{{ label }}</button>
{% endfor %}
</div>
</details>
<div id="firm-admin-panel" class="min-h-[24rem]"> <div id="firm-admin-panel" class="min-h-[24rem]">
{% include "modules/firm_admin_dashboard/templates/firm_admin_dashboard/partials/" ~ active_tab ~ ".html" ignore missing %} {% include "modules/firm_admin_dashboard/templates/firm_admin_dashboard/partials/" ~ active_tab ~ ".html" ignore missing %}
</div> </div>
@@ -68,7 +85,11 @@
panel.innerHTML = '<div class="rounded-3xl border border-red-200 bg-red-50 p-6 text-sm font-semibold text-red-800 shadow-soft">Unable to load tab. Please refresh the page.</div>'; panel.innerHTML = '<div class="rounded-3xl border border-red-200 bg-red-50 p-6 text-sm font-semibold text-red-800 shadow-soft">Unable to load tab. Please refresh the page.</div>';
} }
} }
buttons.forEach(btn => btn.addEventListener('click', () => loadTab(btn.dataset.tab))); buttons.forEach(btn => btn.addEventListener('click', () => {
loadTab(btn.dataset.tab);
const mobileMenu = document.getElementById('firm-admin-mobile-menu');
if (mobileMenu) mobileMenu.open = false;
}));
})(); })();
</script> </script>
{% endblock %} {% endblock %}
@@ -1,5 +1,6 @@
{% extends "ui/templates/base/layout.html" %} {% extends "ui/templates/base/layout.html" %}
{% block content %} {% block content %}
{% include "ui/templates/components/firm_admin_navigation_v2.html" %}
<section class="mx-auto max-w-4xl space-y-6"> <section class="mx-auto max-w-4xl space-y-6">
<div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft"> <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
<div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between"> <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
@@ -1,5 +1,6 @@
{% extends "ui/templates/base/layout.html" %} {% extends "ui/templates/base/layout.html" %}
{% block content %} {% block content %}
{% include "ui/templates/components/firm_admin_navigation_v2.html" %}
<section class="mx-auto max-w-6xl space-y-6"> <section class="mx-auto max-w-6xl space-y-6">
<div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft"> <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
<div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between"> <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
@@ -1,5 +1,6 @@
{% extends "ui/templates/base/layout.html" %} {% extends "ui/templates/base/layout.html" %}
{% block content %} {% block content %}
{% include "ui/templates/components/firm_admin_navigation_v2.html" %}
{% set data = form_data if form_data is defined and form_data else {} %} {% set data = form_data if form_data is defined and form_data else {} %}
<section class="mx-auto max-w-4xl space-y-6"> <section class="mx-auto max-w-4xl space-y-6">
<div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft"> <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
@@ -1,5 +1,6 @@
{% extends "ui/templates/base/layout.html" %} {% extends "ui/templates/base/layout.html" %}
{% block content %} {% block content %}
{% include "ui/templates/components/firm_admin_navigation_v2.html" %}
{% set result = onboarding_result %} {% set result = onboarding_result %}
<section class="mx-auto max-w-3xl space-y-6"> <section class="mx-auto max-w-3xl space-y-6">
<div class="rounded-3xl border border-emerald-200 bg-emerald-50 p-6 shadow-soft"> <div class="rounded-3xl border border-emerald-200 bg-emerald-50 p-6 shadow-soft">
@@ -0,0 +1,93 @@
{#
UI/UX V2 Phase 1E — Firm Admin workspace navigation.
Presentation only: existing URLs and route-level permissions remain authoritative.
#}
{% set _firm_admin_path = request.url.path %}
{% 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')
},
{
'label': 'Clients',
'visible': true,
'active': _firm_admin_path.startswith('/clients'),
'children': [
{'label': 'Client List', 'url': '/clients', 'active': _firm_admin_path == '/clients'},
{'label': 'Add Client', 'url': '/clients/new', 'active': _firm_admin_path.startswith('/clients/new')},
{'label': 'Import Clients', 'url': '/clients/import', 'active': _firm_admin_path.startswith('/clients/import')},
{'label': 'Export Clients', 'url': '/clients/export', 'active': _firm_admin_path.startswith('/clients/export')}
]
},
{
'label': 'Services',
'visible': true,
'active': _firm_admin_path.startswith('/services'),
'children': [
{'label': 'Firm Services', 'url': '/services', 'active': _firm_admin_path == '/services'},
{'label': 'Service Catalogue', 'url': '/services/catalogue', 'active': _firm_admin_path.startswith('/services/catalogue')},
{'label': 'Task Templates', 'url': '/services/templates', 'active': _firm_admin_path.startswith('/services/templates')},
{'label': 'Bulk Imports', 'url': '/services/bulk-imports', 'active': _firm_admin_path.startswith('/services/bulk-imports')}
]
},
{
'label': 'Engagements',
'url': '/services/engagements',
'visible': true,
'active': _firm_admin_path.startswith('/services/engagements')
},
{
'label': 'Team',
'visible': true,
'active': _firm_admin_path.startswith('/employees') or _firm_admin_path.startswith('/consultants') or _firm_admin_path.startswith('/firm-admin/users'),
'children': [
{'label': 'Employees', 'url': '/employees', 'active': _firm_admin_path == '/employees'},
{'label': 'Add Employee', 'url': '/employees/new', 'active': _firm_admin_path.startswith('/employees/new')},
{'label': 'Work Allocation', 'url': '/employees/work', 'active': _firm_admin_path.startswith('/employees/work')},
{'label': 'Attendance', 'url': '/employees/attendance', 'active': _firm_admin_path.startswith('/employees/attendance')},
{'label': 'Leave', 'url': '/employees/leave', 'active': _firm_admin_path.startswith('/employees/leave')},
{'label': 'Consultants', 'url': '/consultants', 'active': _firm_admin_path.startswith('/consultants')},
{'label': 'Add Partner / Manager / Staff', 'url': '/firm-admin/dashboard?tab=users', 'active': _firm_admin_path.startswith('/firm-admin/users')}
]
},
{
'label': 'Documents',
'url': '/documents',
'visible': true,
'active': _firm_admin_path.startswith('/documents')
},
{
'label': 'Billing',
'url': '/billing',
'visible': true,
'active': _firm_admin_path.startswith('/billing')
},
{
'label': 'Firm Setup',
'visible': true,
'active': _firm_admin_path.startswith('/system-settings') or _firm_admin_path.startswith('/firm-admin/users'),
'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': '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': 'Audit Logs', 'url': '/system-settings/audit-logs', 'active': _firm_admin_path.startswith('/system-settings/audit-logs')}
]
},
{
'label': 'Alerts',
'url': '/alerts',
'visible': true,
'active': _firm_admin_path.startswith('/alerts'),
'badge': unread_alert_count if unread_alert_count is defined and unread_alert_count > 0 else none
}
] %}
<div class="mb-6 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-soft" data-uiux-v2-pilot="firm-admin">
{% include "ui/templates/components/navigation_v2.html" %}
{% include "ui/templates/components/mobile_navigation_v2.html" %}
</div>