From 9c09e188335a667fb6fb85f8abfa24920e0a6689 Mon Sep 17 00:00:00 2001
From: John Mizerek <mizerek@gmail.com>
Date: Tue, 3 Mar 2026 20:57:18 -0800
Subject: [PATCH] Add sidebar navigation to station-assignment page

Station assignment was a standalone page with no sidebar. Added the
same portal sidebar so users can navigate between pages. Also added
Stations link to menu-builder sidebar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 portal/menu-builder.html       |   7 ++
 portal/station-assignment.html | 135 ++++++++++++++++++++++++++++-----
 2 files changed, 121 insertions(+), 21 deletions(-)
diff --git a/portal/menu-builder.html b/portal/menu-builder.html
index e1a197f..a0e8648 100644
--- a/portal/menu-builder.html
+++ b/portal/menu-builder.html
@@ -870,6 +870,13 @@
           </svg>
           <span>Menu</span>
         </a>
+        <a href="station-assignment.html" class="nav-item">
+          <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="2" y="3" width="20" height="18" rx="2"/>
+            <path d="M2 9h20M9 21V9"/>
+          </svg>
+          <span>Stations</span>
+        </a>
         <a href="index.html#reports" class="nav-item">
           <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M18 20V10M12 20V4M6 20v-6"/>
diff --git a/portal/station-assignment.html b/portal/station-assignment.html
index 3bc6c01..e86de30 100644
--- a/portal/station-assignment.html
+++ b/portal/station-assignment.html
@@ -8,10 +8,11 @@
   <style>
     .assignment-container {
       display: flex;
-      height: calc(100vh - 80px);
+      flex: 1;
       gap: 24px;
       padding: 24px;
       background: var(--bg-primary);
+      overflow: hidden;
     }
 
     .panel {
@@ -346,26 +347,111 @@
   </style>
 </head>
 <body>
-  <div class="app" style="flex-direction: column;">
-    <!-- Toolbar -->
-    <div class="toolbar">
-      <div class="toolbar-title">
-        <a id="backLink" href="#" style="color: var(--text-muted); text-decoration: none;">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M19 12H5M12 19l-7-7 7-7"/>
+  <div class="app">
+    <!-- Sidebar -->
+    <aside class="sidebar" id="sidebar">
+      <div class="business-info" style="padding: 12px 16px; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; gap: 12px;">
+        <div class="business-avatar" id="businessAvatar">B</div>
+        <div class="business-details" style="flex: 1;">
+          <div class="business-name" id="businessName">Loading...</div>
+          <div class="business-status online">Online</div>
+        </div>
+        <button class="sidebar-toggle" id="sidebarToggle" style="background: none; border: none; cursor: pointer; padding: 4px;">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M3 12h18M3 6h18M3 18h18"/>
           </svg>
-        </a>
-        <h1>Station Assignment</h1>
-        <span class="business-name" id="businessName"></span>
+        </button>
+      </div>
+
+      <nav class="sidebar-nav">
+        <a href="index.html#dashboard" class="nav-item">
+          <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
+            <rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
+          </svg>
+          <span>Dashboard</span>
+        </a>
+        <a href="index.html#orders" class="nav-item">
+          <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"/>
+            <rect x="9" y="3" width="6" height="4" rx="1"/>
+            <path d="M9 12h6M9 16h6"/>
+          </svg>
+          <span>Orders</span>
+        </a>
+        <a href="menu-builder.html" class="nav-item">
+          <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M3 6h18M3 12h18M3 18h18"/>
+          </svg>
+          <span>Menu</span>
+        </a>
+        <a href="#" class="nav-item active">
+          <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="2" y="3" width="20" height="18" rx="2"/>
+            <path d="M2 9h20M9 21V9"/>
+          </svg>
+          <span>Stations</span>
+        </a>
+        <a href="index.html#reports" class="nav-item">
+          <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M18 20V10M12 20V4M6 20v-6"/>
+          </svg>
+          <span>Reports</span>
+        </a>
+        <a href="index.html#team" class="nav-item">
+          <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/>
+            <circle cx="9" cy="7" r="4"/>
+            <path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>
+          </svg>
+          <span>Team</span>
+        </a>
+        <a href="index.html#services" class="nav-item">
+          <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/>
+            <path d="M13.73 21a2 2 0 01-3.46 0"/>
+          </svg>
+          <span>Services</span>
+        </a>
+        <a href="index.html#service-points" class="nav-item">
+          <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="3"/>
+            <path d="M12 2v4M12 18v4M2 12h4M18 12h4"/>
+            <path d="M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
+          </svg>
+          <span>Service Points</span>
+        </a>
+        <a href="index.html#admin-tasks" class="nav-item">
+          <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+          <span>Task Admin</span>
+        </a>
+        <a href="index.html#settings" class="nav-item">
+          <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="3"/>
+            <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
+          </svg>
+          <span>Settings</span>
+        </a>
+      </nav>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="main-content" style="flex-direction: column;">
+      <!-- Toolbar -->
+      <div class="toolbar">
+        <div class="toolbar-title">
+          <h1>Station Assignment</h1>
+        </div>
+        <button class="btn btn-primary" onclick="StationAssignment.save()">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/>
+            <path d="M17 21v-8H7v8M7 3v5h8"/>
+          </svg>
+          Save Changes
+        </button>
       </div>
-      <button class="btn btn-primary" onclick="StationAssignment.save()">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/>
-          <path d="M17 21v-8H7v8M7 3v5h8"/>
-        </svg>
-        Save Changes
-      </button>
-    </div>
 
     <div class="assignment-container">
       <!-- Left Panel: Menu Items -->
@@ -400,6 +486,7 @@
         </div>
       </div>
     </div>
+    </main>
   </div>
 
   <!-- Toast Container -->
@@ -460,7 +547,9 @@
           });
           const data = await response.json();
           if (data.OK && data.BUSINESS) {
-            document.getElementById('businessName').textContent = `- ${data.BUSINESS.BusinessName}`;
+            document.getElementById('businessName').textContent = data.BUSINESS.BusinessName;
+            const avatar = document.getElementById('businessAvatar');
+            if (avatar) avatar.textContent = (data.BUSINESS.BusinessName || 'B').charAt(0).toUpperCase();
           }
         } catch (err) {
           console.error('[StationAssignment] Error:', err);
@@ -935,7 +1024,11 @@
       }
     };
 
-    document.addEventListener('DOMContentLoaded', () => StationAssignment.init());
+    document.addEventListener('DOMContentLoaded', () => {
+      StationAssignment.init();
+      const toggle = document.getElementById('sidebarToggle');
+      if (toggle) toggle.addEventListener('click', () => document.getElementById('sidebar').classList.toggle('collapsed'));
+    });
   </script>
 </body>
 </html>
