From 86a238fc65105703797704d67364cf78635e730c Mon Sep 17 00:00:00 2001
From: A R R R Associates <admin@arrrassociates.com>
Date: Fri, 10 Jul 2026 20:09:46 +0530
Subject: [PATCH] Add mobile section selector to Manager dashboard

---
 .../manager_dashboard/dashboard.html          | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/app/modules/manager_dashboard/templates/manager_dashboard/dashboard.html b/app/modules/manager_dashboard/templates/manager_dashboard/dashboard.html
index 0c0afb5..43044aa 100644
--- a/app/modules/manager_dashboard/templates/manager_dashboard/dashboard.html
+++ b/app/modules/manager_dashboard/templates/manager_dashboard/dashboard.html
@@ -29,7 +29,16 @@
   ] %}
 
   <section class="rounded-3xl border border-slate-200 bg-white p-3 shadow-soft">
-    <div class="flex gap-2 overflow-x-auto" id="manager-tabs">
+    <div class="sm:hidden">
+      <label for="manager-dashboard-tab-select" class="mb-2 block text-xs font-bold uppercase tracking-[0.16em] text-slate-500">Dashboard section</label>
+      <select id="manager-dashboard-tab-select" class="w-full rounded-2xl border border-slate-300 bg-white px-4 py-3 text-sm font-semibold text-slate-800 outline-none transition focus:border-brand-500 focus:ring-4 focus:ring-brand-100">
+        {% for code, label in tabs %}
+        <option value="{{ code }}" {% if active_tab == code %}selected{% endif %}>{{ label }}</option>
+        {% endfor %}
+      </select>
+    </div>
+
+    <div class="hidden gap-2 overflow-x-auto 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 %}
@@ -44,8 +53,10 @@
 <script>
 (function(){
   const tabs = document.querySelectorAll('.manager-tab');
+  const select = document.getElementById('manager-dashboard-tab-select');
   const panel = document.getElementById('manager-dashboard-panel');
-  async function loadTab(tab) {
+
+  function setActiveState(tab) {
     tabs.forEach(btn => {
       const active = btn.dataset.tab === tab;
       btn.classList.toggle('bg-brand-600', active);
@@ -53,6 +64,13 @@
       btn.classList.toggle('text-slate-600', !active);
       btn.classList.toggle('hover:bg-slate-100', !active);
     });
+    if (select && select.value !== tab) {
+      select.value = tab;
+    }
+  }
+
+  async function loadTab(tab) {
+    setActiveState(tab);
     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'}});
@@ -65,7 +83,11 @@
       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>';
     }
   }
+
   tabs.forEach(btn => btn.addEventListener('click', () => loadTab(btn.dataset.tab)));
+  if (select) {
+    select.addEventListener('change', () => loadTab(select.value));
+  }
 })();
 </script>
 {% endblock %}