From 74b09beedf2bf83fcffade6434504db29318680a Mon Sep 17 00:00:00 2001
From: John Mizerek <mizerek@gmail.com>
Date: Fri, 23 Jan 2026 11:54:05 -0800
Subject: [PATCH] Theme menu builder to match portal admin UI and fix header
 image display

- Added portal sidebar navigation to menu builder
- Updated color scheme to use portal CSS variables (gray-* instead of custom vars)
- Fixed header image preview to use HeaderImageURL from API response
- Fixed upload handler to use correct extension from response
- Added sidebar toggle and logout functionality

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 portal/menu-builder.html | 327 ++++++++++++++------
 portal/portal.js         | 637 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 868 insertions(+), 96 deletions(-)

diff --git a/portal/menu-builder.html b/portal/menu-builder.html
index 38ab752..fca5142 100644
--- a/portal/menu-builder.html
+++ b/portal/menu-builder.html
@@ -8,18 +8,26 @@
   <link rel="stylesheet" href="portal.css">
   <style>
     /* Menu Builder Specific Styles */
+    .builder-wrapper {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
     .builder-container {
       display: flex;
-      height: calc(100vh - 60px);
+      flex: 1;
       gap: 16px;
       padding: 16px;
+      overflow: hidden;
     }
 
     /* Sidebar Panel */
     .builder-sidebar {
       width: 280px;
-      background: var(--bg-card);
-      border-radius: 12px;
+      background: #fff;
+      border-radius: var(--radius);
+      box-shadow: var(--shadow);
       padding: 16px;
       display: flex;
       flex-direction: column;
@@ -32,7 +40,7 @@
       font-size: 14px;
       text-transform: uppercase;
       letter-spacing: 0.5px;
-      color: var(--text-muted);
+      color: var(--gray-500);
     }
 
     /* Palette Items */
@@ -43,8 +51,8 @@
     }
 
     .palette-item {
-      background: var(--bg-secondary);
-      border: 2px dashed var(--border-color);
+      background: var(--gray-50);
+      border: 2px dashed var(--gray-200);
       border-radius: 8px;
       padding: 12px;
       cursor: grab;
@@ -56,7 +64,7 @@
 
     .palette-item:hover {
       border-color: var(--primary);
-      background: rgba(0, 255, 136, 0.05);
+      background: rgba(99, 102, 241, 0.05);
     }
 
     .palette-item:active {
@@ -66,7 +74,7 @@
     .palette-item .icon {
       width: 32px;
       height: 32px;
-      background: var(--bg-card);
+      background: #fff;
       border-radius: 6px;
       display: flex;
       align-items: center;
@@ -76,18 +84,20 @@
 
     .palette-item .label {
       font-weight: 500;
+      color: var(--gray-800);
     }
 
     .palette-item .hint {
       font-size: 12px;
-      color: var(--text-muted);
+      color: var(--gray-500);
     }
 
     /* Main Canvas */
     .builder-canvas {
       flex: 1;
-      background: var(--bg-card);
-      border-radius: 12px;
+      background: #fff;
+      border-radius: var(--radius);
+      box-shadow: var(--shadow);
       padding: 16px;
       overflow-y: auto;
     }
@@ -98,7 +108,7 @@
       align-items: center;
       margin-bottom: 16px;
       padding-bottom: 16px;
-      border-bottom: 1px solid var(--border-color);
+      border-bottom: 1px solid var(--gray-200);
     }
 
     .canvas-header h2 {
@@ -106,6 +116,7 @@
       display: flex;
       align-items: center;
       gap: 8px;
+      color: var(--gray-900);
     }
 
     .canvas-actions {
@@ -122,29 +133,29 @@
     }
 
     .drop-zone {
-      border: 2px dashed var(--border-color);
+      border: 2px dashed var(--gray-200);
       border-radius: 8px;
       padding: 24px;
       text-align: center;
-      color: var(--text-muted);
+      color: var(--gray-500);
       transition: all 0.2s;
     }
 
     .drop-zone.drag-over {
       border-color: var(--primary);
-      background: rgba(0, 255, 136, 0.05);
+      background: rgba(99, 102, 241, 0.05);
     }
 
     .drop-zone.drag-over-error {
       border-color: var(--danger);
-      background: rgba(255, 68, 68, 0.05);
+      background: rgba(239, 68, 68, 0.05);
     }
 
     /* Category Card */
     .category-card {
-      background: var(--bg-secondary);
+      background: var(--gray-50);
       border-radius: 12px;
-      border: 2px solid var(--border-color);
+      border: 2px solid var(--gray-200);
       overflow: hidden;
       transition: all 0.2s;
     }
@@ -162,7 +173,7 @@
       display: flex;
       align-items: center;
       padding: 12px 16px;
-      background: var(--bg-card);
+      background: #fff;
       cursor: grab;
       gap: 12px;
     }
@@ -172,7 +183,7 @@
     }
 
     .drag-handle {
-      color: var(--text-muted);
+      color: var(--gray-400);
       display: flex;
       align-items: center;
     }
@@ -184,11 +195,12 @@
     .category-name {
       font-weight: 600;
       font-size: 16px;
+      color: var(--gray-900);
     }
 
     .category-count {
       font-size: 12px;
-      color: var(--text-muted);
+      color: var(--gray-500);
     }
 
     .category-actions {
@@ -199,7 +211,7 @@
     .category-actions button {
       background: transparent;
       border: none;
-      color: var(--text-muted);
+      color: var(--gray-400);
       padding: 6px;
       border-radius: 4px;
       cursor: pointer;
@@ -207,8 +219,8 @@
     }
 
     .category-actions button:hover {
-      background: var(--bg-secondary);
-      color: var(--text-primary);
+      background: var(--gray-100);
+      color: var(--gray-800);
     }
 
     .category-actions button.danger:hover {
@@ -242,11 +254,11 @@
       justify-content: center;
       cursor: pointer;
       transition: transform 0.3s ease;
-      color: var(--text-muted);
+      color: var(--gray-400);
     }
 
     .category-toggle:hover {
-      color: var(--text-primary);
+      color: var(--gray-800);
     }
 
     .category-toggle.expanded {
@@ -262,12 +274,12 @@
       justify-content: center;
       cursor: pointer;
       transition: transform 0.3s ease;
-      color: var(--text-muted);
+      color: var(--gray-400);
       flex-shrink: 0;
     }
 
     .item-toggle:hover {
-      color: var(--text-primary);
+      color: var(--gray-800);
     }
 
     .item-toggle.expanded {
@@ -275,16 +287,16 @@
     }
 
     .items-list.drag-over {
-      background: rgba(0, 255, 136, 0.02);
+      background: rgba(99, 102, 241, 0.02);
     }
 
     .item-drop-zone {
-      border: 2px dashed var(--border-color);
+      border: 2px dashed var(--gray-200);
       border-radius: 6px;
       padding: 16px;
       text-align: center;
       font-size: 13px;
-      color: var(--text-muted);
+      color: var(--gray-500);
     }
 
     /* Item Card */
@@ -293,9 +305,9 @@
       align-items: center;
       gap: 12px;
       padding: 10px 12px;
-      background: var(--bg-card);
+      background: #fff;
       border-radius: 8px;
-      border: 1px solid var(--border-color);
+      border: 1px solid var(--gray-200);
       cursor: grab;
       transition: all 0.2s;
     }
@@ -350,7 +362,7 @@
 
     .item-card.modifier {
       margin-left: 24px;
-      background: var(--bg-secondary);
+      background: var(--gray-50);
       border-style: dashed;
     }
 
@@ -362,7 +374,7 @@
     .item-image {
       width: 48px;
       height: 48px;
-      background: var(--bg-secondary);
+      background: var(--gray-100);
       border-radius: 6px;
       display: flex;
       align-items: center;
@@ -405,13 +417,14 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      color: var(--gray-800);
     }
 
     .item-meta {
       display: flex;
       gap: 8px;
       font-size: 12px;
-      color: var(--text-muted);
+      color: var(--gray-500);
     }
 
     .item-price {
@@ -423,8 +436,9 @@
       font-size: 10px;
       padding: 2px 6px;
       border-radius: 4px;
-      background: var(--bg-secondary);
+      background: var(--gray-100);
       text-transform: uppercase;
+      color: var(--gray-600);
     }
 
     .item-actions {
@@ -435,7 +449,7 @@
     .item-actions button {
       background: transparent;
       border: none;
-      color: var(--text-muted);
+      color: var(--gray-400);
       padding: 4px;
       border-radius: 4px;
       cursor: pointer;
@@ -443,8 +457,8 @@
     }
 
     .item-actions button:hover {
-      background: var(--bg-secondary);
-      color: var(--text-primary);
+      background: var(--gray-100);
+      color: var(--gray-800);
     }
 
     .item-actions button.danger:hover {
@@ -454,8 +468,9 @@
     /* Properties Panel */
     .builder-properties {
       width: 320px;
-      background: var(--bg-card);
-      border-radius: 12px;
+      background: #fff;
+      border-radius: var(--radius);
+      box-shadow: var(--shadow);
       padding: 16px;
       display: flex;
       flex-direction: column;
@@ -474,7 +489,7 @@
       font-size: 14px;
       text-transform: uppercase;
       letter-spacing: 0.5px;
-      color: var(--text-muted);
+      color: var(--gray-500);
     }
 
     .property-group {
@@ -486,7 +501,7 @@
     .property-group label {
       font-size: 12px;
       font-weight: 500;
-      color: var(--text-muted);
+      color: var(--gray-500);
       text-transform: uppercase;
       letter-spacing: 0.5px;
     }
@@ -494,11 +509,11 @@
     .property-group input,
     .property-group textarea,
     .property-group select {
-      background: var(--bg-secondary);
-      border: 1px solid var(--border-color);
+      background: var(--gray-50);
+      border: 1px solid var(--gray-300);
       border-radius: 6px;
       padding: 10px 12px;
-      color: var(--text-primary);
+      color: var(--gray-800);
       font-size: 14px;
     }
 
@@ -507,6 +522,7 @@
     .property-group select:focus {
       outline: none;
       border-color: var(--primary);
+      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
     }
 
     .property-row {
@@ -520,7 +536,7 @@
 
     /* Photo Task Section */
     .photo-task-section {
-      background: var(--bg-secondary);
+      background: var(--gray-50);
       border-radius: 8px;
       padding: 12px;
     }
@@ -536,19 +552,21 @@
       margin: 0;
       font-size: 13px;
       font-weight: 600;
+      color: var(--gray-800);
     }
 
     .photo-preview {
       width: 100%;
       aspect-ratio: 4/3;
-      background: var(--bg-card);
+      background: #fff;
       border-radius: 6px;
       display: flex;
       align-items: center;
       justify-content: center;
-      color: var(--text-muted);
+      color: var(--gray-400);
       margin-bottom: 12px;
       overflow: hidden;
+      border: 1px solid var(--gray-200);
     }
 
     .photo-preview img {
@@ -589,7 +607,7 @@
       align-items: center;
       justify-content: center;
       padding: 60px 20px;
-      color: var(--text-muted);
+      color: var(--gray-500);
       text-align: center;
     }
 
@@ -598,32 +616,34 @@
       height: 64px;
       margin-bottom: 16px;
       opacity: 0.5;
+      color: var(--gray-400);
     }
 
     .empty-canvas h3 {
       margin: 0 0 8px 0;
-      color: var(--text-primary);
+      color: var(--gray-800);
     }
 
     .empty-canvas p {
       margin: 0;
       max-width: 300px;
+      color: var(--gray-500);
     }
 
     /* Toolbar */
     .builder-toolbar {
       display: flex;
       gap: 8px;
-      padding: 12px 16px;
-      background: var(--bg-card);
-      border-bottom: 1px solid var(--border-color);
+      padding: 12px 24px;
+      background: #fff;
+      border-bottom: 1px solid var(--gray-200);
     }
 
     .toolbar-group {
       display: flex;
       gap: 4px;
       padding-right: 12px;
-      border-right: 1px solid var(--border-color);
+      border-right: 1px solid var(--gray-200);
     }
 
     .toolbar-group:last-child {
@@ -635,18 +655,19 @@
       align-items: center;
       gap: 6px;
       padding: 8px 12px;
-      background: var(--bg-secondary);
-      border: 1px solid var(--border-color);
-      border-radius: 6px;
-      color: var(--text-primary);
+      background: var(--gray-50);
+      border: 1px solid var(--gray-200);
+      border-radius: var(--radius);
+      color: var(--gray-700);
       font-size: 13px;
       cursor: pointer;
       transition: all 0.2s;
     }
 
     .toolbar-btn:hover {
-      background: var(--bg-card);
+      background: #fff;
       border-color: var(--primary);
+      color: var(--gray-900);
     }
 
     .toolbar-btn.primary {
@@ -656,7 +677,7 @@
     }
 
     .toolbar-btn.primary:hover {
-      background: var(--primary-hover);
+      background: var(--primary-dark);
     }
 
     .toolbar-btn.primary:active {
@@ -682,18 +703,18 @@
     .category-card.selected,
     .item-card.selected {
       border-color: var(--primary);
-      box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.2);
+      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
     }
 
     /* Context Menu */
     .context-menu {
       position: fixed;
-      background: var(--bg-card);
-      border: 1px solid var(--border-color);
-      border-radius: 8px;
+      background: #fff;
+      border: 1px solid var(--gray-200);
+      border-radius: var(--radius);
       padding: 8px 0;
       min-width: 180px;
-      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+      box-shadow: var(--shadow-lg);
       z-index: 1000;
       display: none;
     }
@@ -709,10 +730,11 @@
       padding: 8px 16px;
       cursor: pointer;
       transition: background 0.15s;
+      color: var(--gray-700);
     }
 
     .context-menu-item:hover {
-      background: var(--bg-secondary);
+      background: var(--gray-50);
     }
 
     .context-menu-item.danger {
@@ -726,31 +748,118 @@
 
     .context-menu-divider {
       height: 1px;
-      background: var(--border-color);
+      background: var(--gray-200);
       margin: 8px 0;
     }
 
     /* Keyboard shortcuts hint */
     .shortcut-hint {
       font-size: 11px;
-      color: var(--text-muted);
+      color: var(--gray-400);
       margin-left: auto;
       font-family: monospace;
     }
   </style>
 </head>
 <body>
-  <div class="app" style="flex-direction: column;">
-    <!-- Toolbar -->
-    <div class="builder-toolbar">
-      <div class="toolbar-group">
-        <a id="backLink" href="#" class="toolbar-btn" title="Back to Portal" style="text-decoration: none;">
-          <svg 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 (same as portal) -->
+    <aside class="sidebar" id="sidebar">
+      <div class="sidebar-header">
+        <div class="logo">
+          <span class="logo-icon">P</span>
+          <span class="logo-text">Payfrit</span>
+        </div>
+        <button class="sidebar-toggle" id="sidebarToggle">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M3 12h18M3 6h18M3 18h18"/>
           </svg>
-          Back
+        </button>
+      </div>
+
+      <nav class="sidebar-nav">
+        <a href="index.html#dashboard" class="nav-item">
+          <svg class="nav-icon" 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" 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="#" class="nav-item active">
+          <svg class="nav-icon" 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="index.html#reports" class="nav-item">
+          <svg class="nav-icon" 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" 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#beacons" class="nav-item">
+          <svg class="nav-icon" 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>Beacons</span>
+        </a>
+        <a href="index.html#services" class="nav-item">
+          <svg class="nav-icon" 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#settings" class="nav-item">
+          <svg class="nav-icon" 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>
+
+      <div class="sidebar-footer">
+        <div class="business-info">
+          <div class="business-avatar" id="businessAvatar">B</div>
+          <div class="business-details">
+            <div class="business-name" id="businessName">Loading...</div>
+            <div class="business-status online">Online</div>
+          </div>
+        </div>
+        <a href="#logout" class="nav-item logout" onclick="MenuBuilder.logout()">
+          <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/>
+          </svg>
+          <span>Logout</span>
         </a>
       </div>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="main-content">
+      <div class="builder-wrapper">
+        <!-- Toolbar -->
+        <div class="builder-toolbar">
+          <div class="toolbar-group">
       <div class="toolbar-group">
         <button class="toolbar-btn" onclick="MenuBuilder.undo()" title="Undo (Ctrl+Z)">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -851,7 +960,7 @@
 
         <h3>Modifier Templates</h3>
         <div class="palette-section" id="templateLibrary">
-          <div style="color: var(--text-muted); font-size: 13px; padding: 8px;">Loading templates...</div>
+          <div style="color: var(--gray-500); font-size: 13px; padding: 8px;">Loading templates...</div>
         </div>
 
         <h3>Quick Stats</h3>
@@ -888,7 +997,7 @@
             <span id="brandColorSwatch" style="width: 16px; height: 16px; border-radius: 3px; background: #1B4D3E; border: 1px solid rgba(0,0,0,0.2);"></span>
             Brand Color
           </button>
-          <p style="font-size: 11px; color: var(--text-muted); margin: 0;">
+          <p style="font-size: 11px; color: var(--gray-500); margin: 0;">
             Header: 1200x400px recommended<br>
             Color: Used for category bars in the app
           </p>
@@ -900,7 +1009,7 @@
         <div class="canvas-header">
           <h2>
             <span id="menuName">Menu Builder</span>
-            <span style="font-size: 13px; color: var(--text-muted); font-weight: normal;" id="businessLabel"></span>
+            <span style="font-size: 13px; color: var(--gray-500); font-weight: normal;" id="businessLabel"></span>
           </h2>
         </div>
 
@@ -922,12 +1031,14 @@
         </div>
 
         <div id="propertiesContent">
-          <p style="color: var(--text-muted); text-align: center; padding: 20px;">
+          <p style="color: var(--gray-500); text-align: center; padding: 20px;">
             Select an item to edit its properties
           </p>
         </div>
       </div>
     </div>
+      </div> <!-- end builder-wrapper -->
+    </main>
   </div>
 
   <!-- Context Menu -->
@@ -1036,9 +1147,6 @@
       async init() {
         console.log('[MenuBuilder] Initializing...');
 
-        // Set back link with BASE_PATH
-        document.getElementById('backLink').href = BASE_PATH + '/portal/index.html#menu';
-
         // Check authentication
         const token = localStorage.getItem('payfrit_portal_token');
         const savedBusiness = localStorage.getItem('payfrit_portal_business');
@@ -1052,6 +1160,9 @@
         this.config.businessId = parseInt(savedBusiness) || null;
         this.config.token = token;
 
+        // Setup sidebar toggle
+        this.setupSidebar();
+
         // Load business info
         await this.loadBusinessInfo();
 
@@ -1070,6 +1181,24 @@
         console.log('[MenuBuilder] Ready');
       },
 
+      // Setup sidebar toggle
+      setupSidebar() {
+        const sidebar = document.getElementById('sidebar');
+        const toggle = document.getElementById('sidebarToggle');
+        if (toggle && sidebar) {
+          toggle.addEventListener('click', () => {
+            sidebar.classList.toggle('collapsed');
+          });
+        }
+      },
+
+      // Logout
+      logout() {
+        localStorage.removeItem('payfrit_portal_token');
+        localStorage.removeItem('payfrit_portal_business');
+        window.location.href = BASE_PATH + '/portal/login.html';
+      },
+
       // Load business info
       async loadBusinessInfo() {
         try {
@@ -1080,7 +1209,13 @@
           });
           const data = await response.json();
           if (data.OK && data.BUSINESS) {
-            document.getElementById('businessLabel').textContent = `- ${data.BUSINESS.BusinessName}`;
+            const biz = data.BUSINESS;
+            document.getElementById('businessLabel').textContent = `- ${biz.BusinessName}`;
+            // Update sidebar business info
+            const businessName = document.getElementById('businessName');
+            const businessAvatar = document.getElementById('businessAvatar');
+            if (businessName) businessName.textContent = biz.BusinessName;
+            if (businessAvatar) businessAvatar.textContent = biz.BusinessName ? biz.BusinessName.charAt(0).toUpperCase() : 'B';
           }
         } catch (err) {
           console.error('[MenuBuilder] Error loading business:', err);
@@ -1542,7 +1677,7 @@
         this.selectedElement = null;
         this.selectedData = null;
         document.getElementById('propertiesContent').innerHTML = `
-          <p style="color: var(--text-muted); text-align: center; padding: 20px;">
+          <p style="color: var(--gray-500); text-align: center; padding: 20px;">
             Select an item to edit its properties
           </p>
         `;
@@ -1694,7 +1829,7 @@
             <input type="text" id="propModGroup" value="${this.escapeHtml(modifier.group || '')}"
               placeholder="e.g., Size, Protein, Temperature"
               onchange="MenuBuilder.updateModifier('${item.id}', '${modifier.id}', 'group', this.value)">
-            <small style="color: var(--text-muted); font-size: 11px;">
+            <small style="color: var(--gray-500); font-size: 11px;">
               Modifiers with the same group name are shown together
             </small>
           </div>
@@ -1704,7 +1839,7 @@
               onchange="MenuBuilder.updateModifier('${item.id}', '${modifier.id}', 'sortOrder', parseInt(this.value))">
           </div>
           <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-color);">
-            <p style="color: var(--text-muted); font-size: 12px; margin: 0 0 8px;">
+            <p style="color: var(--gray-500); font-size: 12px; margin: 0 0 8px;">
               Parent Item: <strong>${this.escapeHtml(item.name)}</strong>
             </p>
           </div>
@@ -1835,7 +1970,7 @@
               <span style="font-size: 16px;">🔗</span>
               <strong style="color: var(--warning);">Shared Template</strong>
             </div>
-            <p style="color: var(--text-muted); font-size: 12px; margin: 0 0 8px;">
+            <p style="color: var(--gray-500); font-size: 12px; margin: 0 0 8px;">
               Changes will apply to all ${sharedItems.length} items using this modifier:
             </p>
             <p style="color: var(--text-secondary); font-size: 11px; margin: 0; max-height: 60px; overflow-y: auto;">
@@ -1886,7 +2021,7 @@
                   title="0 = unlimited">
               </div>
             </div>
-            <p style="color: var(--text-muted); font-size: 11px; margin: 4px 0 0;">
+            <p style="color: var(--gray-500); font-size: 11px; margin: 4px 0 0;">
               Required = customer must select at least one option. Max 0 = unlimited.
             </p>
           </div>
@@ -1898,10 +2033,10 @@
           </div>
 
           <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-color);">
-            <p style="color: var(--text-muted); font-size: 12px; margin: 0 0 8px;">
+            <p style="color: var(--gray-500); font-size: 12px; margin: 0 0 8px;">
               Parent: <strong>${this.escapeHtml(parent.name)}</strong>
             </p>
-            <p style="color: var(--text-muted); font-size: 12px; margin: 0;">
+            <p style="color: var(--gray-500); font-size: 12px; margin: 0;">
               Sub-options: <strong>${hasOptions ? option.options.length : 0}</strong>
             </p>
           </div>
@@ -2594,7 +2729,7 @@
             <div class="form-group" id="pytRewardGroup" style="display: none;">
               <label>PYT Reward</label>
               <input type="number" id="pytReward" class="form-input" value="10" min="1" max="100">
-              <small style="color: var(--text-muted);">Tokens rewarded for approved photo</small>
+              <small style="color: var(--gray-500);">Tokens rewarded for approved photo</small>
             </div>
             <div class="form-group">
               <label>Instructions (optional)</label>
@@ -2862,7 +2997,7 @@
         const categories = this.menu.categories || [];
 
         if (categories.length === 0) {
-          outline = '<div style="color: var(--text-muted); text-align: center; padding: 40px;">No menu items yet</div>';
+          outline = '<div style="color: var(--gray-500); text-align: center; padding: 40px;">No menu items yet</div>';
         } else {
           outline = '<div class="menu-outline">';
 
@@ -3138,7 +3273,7 @@
         if (!container || !this.templates) return;
 
         if (this.templates.length === 0) {
-          container.innerHTML = '<div style="color: var(--text-muted); font-size: 13px; padding: 8px;">No templates yet</div>';
+          container.innerHTML = '<div style="color: var(--gray-500); font-size: 13px; padding: 8px;">No templates yet</div>';
           return;
         }
 
diff --git a/portal/portal.js b/portal/portal.js
index d7d1484..2be67e5 100644
--- a/portal/portal.js
+++ b/portal/portal.js
@@ -198,6 +198,8 @@ const Portal = {
       menu: 'Menu Management',
       reports: 'Reports',
       team: 'Team',
+      beacons: 'Beacons',
+      services: 'Service Requests',
       settings: 'Settings'
     };
     document.getElementById('pageTitle').textContent = titles[page] || page;
@@ -232,6 +234,9 @@ const Portal = {
       case 'beacons':
         await this.loadBeaconsPage();
         break;
+      case 'services':
+        await this.loadServicesPage();
+        break;
       case 'settings':
         await this.loadSettings();
         break;
@@ -710,6 +715,19 @@ const Portal = {
         document.getElementById('settingState').value = biz.AddressState || '';
         document.getElementById('settingZip').value = biz.AddressZip || '';
 
+        // Load brand color if set
+        if (biz.BrandColor) {
+          this.brandColor = biz.BrandColor;
+          const swatch = document.getElementById('brandColorSwatch');
+          if (swatch) swatch.style.background = biz.BrandColor;
+        }
+
+        // Load header preview
+        const headerPreview = document.getElementById('headerPreview');
+        if (headerPreview && biz.HeaderImageURL) {
+          headerPreview.style.backgroundImage = `url(${biz.HeaderImageURL}?t=${Date.now()})`;
+        }
+
         // Render hours editor
         this.renderHoursEditor(biz.BusinessHoursDetail || []);
       }
@@ -1081,6 +1099,127 @@ const Portal = {
     }
   },
 
+  // Upload header image
+  uploadHeader() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/png,image/jpeg,image/jpg';
+    input.onchange = async (e) => {
+      const file = e.target.files[0];
+      if (!file) return;
+
+      if (file.size > 5 * 1024 * 1024) {
+        this.toast('Header image must be under 5MB', 'error');
+        return;
+      }
+
+      this.toast('Uploading header...', 'info');
+
+      const formData = new FormData();
+      formData.append('BusinessID', this.config.businessId);
+      formData.append('header', file);
+
+      try {
+        const response = await fetch(`${this.config.apiBaseUrl}/menu/uploadHeader.cfm`, {
+          method: 'POST',
+          body: formData
+        });
+        const data = await response.json();
+
+        if (data.OK) {
+          this.toast('Header uploaded successfully!', 'success');
+          // Update preview using the URL from the response
+          const preview = document.getElementById('headerPreview');
+          if (preview && data.HEADERURL) {
+            preview.style.backgroundImage = `url(${BASE_PATH}${data.HEADERURL}?t=${Date.now()})`;
+          }
+        } else {
+          this.toast(data.MESSAGE || 'Failed to upload header', 'error');
+        }
+      } catch (err) {
+        console.error('[Portal] Header upload error:', err);
+        this.toast('Failed to upload header', 'error');
+      }
+    };
+    input.click();
+  },
+
+  // Show brand color picker
+  showBrandColorPicker() {
+    const currentColor = this.brandColor || '#1B4D3E';
+    document.getElementById('modalTitle').textContent = 'Brand Color';
+    document.getElementById('modalBody').innerHTML = `
+      <div style="padding: 8px;">
+        <p style="color: #999; margin-bottom: 16px;">This color is used for accents and fallback backgrounds in your menu.</p>
+        <div style="display: flex; gap: 16px; align-items: flex-start;">
+          <input type="color" id="brandColorInput" value="${currentColor}"
+            style="width: 80px; height: 80px; border: none; cursor: pointer; border-radius: 8px;">
+          <div style="flex: 1;">
+            <label style="display: block; margin-bottom: 4px; font-size: 13px; color: #999;">Hex Color</label>
+            <input type="text" id="brandColorHex" value="${currentColor}"
+              style="width: 100%; padding: 8px; border: 1px solid #444; border-radius: 4px; background: #222; color: #fff; font-family: monospace;">
+          </div>
+        </div>
+        <div id="brandColorPreview" style="margin-top: 16px; height: 60px; border-radius: 8px; background: linear-gradient(to bottom, ${currentColor}44, ${currentColor}00, ${currentColor}66);"></div>
+        <div style="margin-top: 20px; display: flex; gap: 12px; justify-content: flex-end;">
+          <button type="button" class="btn btn-secondary" onclick="Portal.closeModal()">Cancel</button>
+          <button type="button" class="btn btn-primary" onclick="Portal.saveBrandColor()">Save Color</button>
+        </div>
+      </div>
+    `;
+    this.openModal();
+
+    // Sync inputs
+    const colorInput = document.getElementById('brandColorInput');
+    const hexInput = document.getElementById('brandColorHex');
+    const preview = document.getElementById('brandColorPreview');
+
+    colorInput.addEventListener('input', () => {
+      const color = colorInput.value.toUpperCase();
+      hexInput.value = color;
+      preview.style.background = `linear-gradient(to bottom, ${color}44, ${color}00, ${color}66)`;
+    });
+
+    hexInput.addEventListener('input', () => {
+      let color = hexInput.value;
+      if (/^#[0-9A-Fa-f]{6}$/.test(color)) {
+        colorInput.value = color;
+        preview.style.background = `linear-gradient(to bottom, ${color}44, ${color}00, ${color}66)`;
+      }
+    });
+  },
+
+  // Save brand color
+  async saveBrandColor() {
+    const color = document.getElementById('brandColorHex').value.toUpperCase();
+    if (!/^#[0-9A-Fa-f]{6}$/.test(color)) {
+      this.toast('Please enter a valid hex color (e.g., #1B4D3E)', 'error');
+      return;
+    }
+
+    try {
+      const response = await fetch(`${this.config.apiBaseUrl}/businesses/saveBrandColor.cfm`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ BusinessID: this.config.businessId, BrandColor: color })
+      });
+      const data = await response.json();
+
+      if (data.OK) {
+        this.brandColor = color;
+        const swatch = document.getElementById('brandColorSwatch');
+        if (swatch) swatch.style.background = color;
+        this.closeModal();
+        this.toast('Brand color saved!', 'success');
+      } else {
+        this.toast(data.MESSAGE || 'Failed to save color', 'error');
+      }
+    } catch (err) {
+      console.error('[Portal] Save brand color error:', err);
+      this.toast('Failed to save brand color', 'error');
+    }
+  },
+
   // View order
   async viewOrder(orderId) {
     this.toast('Loading order...', 'info');
@@ -1833,6 +1972,504 @@ const Portal = {
     return str.replace(/[&<>"']/g, m => ({
       '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
     }[m]));
+  },
+
+  // =====================
+  // Services (Task Types)
+  // =====================
+
+  async loadServicesPage() {
+    console.log('[Portal] Loading services page...');
+    await this.loadServiceTypes();
+  },
+
+  // Available icons for services (matches Flutter TaskType._iconMap)
+  serviceIcons: {
+    // Service & Staff
+    'room_service': { label: 'Room Service', svg: '<path d="M2 17h20v2H2zm11.84-9.21A2.006 2.006 0 0 0 12 5a2.006 2.006 0 0 0-1.84 2.79C6.25 8.6 3.27 11.93 3 16h18c-.27-4.07-3.25-7.4-7.16-8.21z"/>' },
+    'support_agent': { label: 'Support Agent', svg: '<path d="M21 12.22C21 6.73 16.74 3 12 3c-4.69 0-9 3.65-9 9.28-.6.34-1 .98-1 1.72v2c0 1.1.9 2 2 2h1v-6.1c0-3.87 3.13-7 7-7s7 3.13 7 7V19h-8v2h8c1.1 0 2-.9 2-2v-1.22c.59-.31 1-.92 1-1.64v-2.3c0-.7-.41-1.31-1-1.62z"/><circle cx="9" cy="13" r="1"/><circle cx="15" cy="13" r="1"/><path d="M18 11.03A6.04 6.04 0 0 0 12.05 6c-3.03 0-6.29 2.51-6.03 6.45a8.075 8.075 0 0 0 4.86-5.89c1.31 2.63 4 4.44 7.12 4.47z"/>' },
+    'person': { label: 'Person', svg: '<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>' },
+    'groups': { label: 'Groups', svg: '<path d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 0 0 0 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0 0 20 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"/>' },
+
+    // Payment & Money
+    'attach_money': { label: 'Money/Cash', svg: '<path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/>' },
+    'payments': { label: 'Payments', svg: '<path d="M19 14V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zm-9-1c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13-6v11c0 1.1-.9 2-2 2H4v-2h17V7h2z"/>' },
+    'receipt': { label: 'Receipt', svg: '<path d="M18 17H6v-2h12v2zm0-4H6v-2h12v2zm0-4H6V7h12v2zM3 22l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20z"/>' },
+    'credit_card': { label: 'Credit Card', svg: '<path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/>' },
+
+    // Communication
+    'chat': { label: 'Chat', svg: '<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>' },
+    'message': { label: 'Message', svg: '<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/>' },
+    'call': { label: 'Call', svg: '<path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 0 0-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/>' },
+    'notifications': { label: 'Notification', svg: '<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>' },
+
+    // Food & Drink
+    'restaurant': { label: 'Restaurant', svg: '<path d="M11 9H9V2H7v7H5V2H3v7c0 2.12 1.66 3.84 3.75 3.97V22h2.5v-9.03C11.34 12.84 13 11.12 13 9V2h-2v7zm5-3v8h2.5v8H21V2c-2.76 0-5 2.24-5 4z"/>' },
+    'local_bar': { label: 'Bar/Cocktail', svg: '<path d="M21 5V3H3v2l8 9v5H6v2h12v-2h-5v-5l8-9zM7.43 7L5.66 5h12.69l-1.78 2H7.43z"/>' },
+    'coffee': { label: 'Coffee', svg: '<path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM2 21h18v-2H2v2z"/>' },
+    'icecream': { label: 'Ice Cream', svg: '<path d="M8.79 12.4l3.26 6.22 3.17-6.21c-.11-.01-.21-.01-.32-.01-2.69 0-5.15 1.54-6.11 4z"/><path d="M12 2C9.85 2 7.89 2.86 6.46 4.24l1.33 2.54C8.82 5.66 10.32 5 12 5c1.67 0 3.18.66 4.21 1.78l1.33-2.54C16.11 2.86 14.15 2 12 2z"/><path d="M15.74 13.26C14.96 11.87 13.54 11 12 11c-1.52 0-2.94.86-3.71 2.24L12 20.87l3.74-7.61z"/><path d="M18.16 6.44l-1.33 2.54c.61.91.97 2 .97 3.17 0 .38-.05.76-.12 1.13l1.69-.45c.13-.44.21-.9.21-1.38 0-1.92-.66-3.69-1.75-5.01h.33z"/><path d="M5.2 14.83l1.69.45c-.07-.37-.12-.75-.12-1.13 0-1.17.36-2.26.97-3.17L6.41 8.44C5.32 9.76 4.66 11.53 4.66 13.45c0 .48.08.94.21 1.38h.33z"/>' },
+    'cake': { label: 'Cake', svg: '<path d="M12 6c1.11 0 2-.9 2-2 0-.38-.1-.73-.29-1.03L12 0l-1.71 2.97c-.19.3-.29.65-.29 1.03 0 1.1.9 2 2 2zm4.6 9.99l-1.07-1.07-1.08 1.07c-1.3 1.3-3.58 1.31-4.89 0l-1.07-1.07-1.09 1.07C6.75 16.64 5.88 17 4.96 17c-.73 0-1.4-.23-1.96-.61V21c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-4.61c-.56.38-1.23.61-1.96.61-.92 0-1.79-.36-2.44-1.01zM18 9h-5V7h-2v2H6c-1.66 0-3 1.34-3 3v1.54c0 1.08.88 1.96 1.96 1.96.52 0 1.02-.2 1.38-.57l2.14-2.13 2.13 2.13c.74.74 2.03.74 2.77 0l2.14-2.13 2.13 2.13c.37.37.86.57 1.38.57 1.08 0 1.96-.88 1.96-1.96V12C21 10.34 19.66 9 18 9z"/>' },
+    'local_pizza': { label: 'Pizza', svg: '<path d="M12 2C8.43 2 5.23 3.54 3.01 6L12 22l8.99-16C18.78 3.55 15.57 2 12 2zM7 7c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm5 8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>' },
+    'lunch_dining': { label: 'Lunch/Burger', svg: '<path d="M2 19h20v2H2v-2zm2.56-8.42c-.78-.09-1.56.24-1.56 1.42h18c0-1.13-.78-1.51-1.56-1.42-.25-1.3-1.07-2.41-2.18-3.04.19-.59.29-1.22.29-1.87C17.55 3.05 14.72.22 11.09.22S4.64 3.05 4.64 6.67c0 .65.1 1.27.29 1.87a3.998 3.998 0 0 0-2.17 3.04zm0 1.4h15.1c-.1 1.41-1.29 2.52-2.71 2.52H7.27c-1.42 0-2.61-1.11-2.71-2.52zM2 16v1h20v-1c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1z"/>' },
+    'fastfood': { label: 'Fast Food', svg: '<path d="M21 15c0-4.625-3.507-8.441-8-8.941V4h-2v2.059c-4.493.5-8 4.316-8 8.941v2h18v-2zM5 15c.033-3.576 2.856-6.469 6.378-6.934l.622-.066.622.066C16.144 8.531 18.967 11.424 19 15H5zm-3 4h20v2H2z"/>' },
+    'ramen_dining': { label: 'Ramen/Noodles', svg: '<path d="M22 3.51V3h-2.01c.16 1.05-.04 2.18-.56 3.22-.53 1.05-1.37 1.96-2.42 2.6l-1 .6V3h-2v6.07l-.78.47c-.41.24-.83.44-1.24.61-.12.06-.25.1-.38.15-.35.13-.71.23-1.07.32l-.53.12V3h-2v7.35c-.58.03-1.15.01-1.71-.06l-.29-.04V3H4v7.67c-.66-.23-1.28-.52-1.84-.87L2 9.69V3H0v17h2v-8.07c.15.07.3.16.45.23.24.12.49.24.74.34.17.07.34.14.51.2.22.08.44.15.66.21.18.05.36.1.54.15.23.06.46.11.69.15.18.03.35.06.53.09.26.04.52.07.79.09.15.01.3.02.45.04.43.03.87.04 1.32.02.12-.01.24 0 .37-.01.35-.02.7-.05 1.06-.1.05-.01.1-.01.16-.02.43-.07.86-.16 1.29-.27.02 0 .04-.01.06-.02.13-.03.26-.08.39-.12.27-.08.53-.16.79-.25.19-.07.37-.14.55-.21.21-.09.43-.17.63-.27.2-.09.39-.19.59-.29.17-.09.34-.18.51-.28.19-.11.38-.22.56-.34.17-.11.34-.22.51-.34.16-.11.32-.22.48-.34.3-.22.59-.46.87-.71.1-.09.2-.18.3-.28.21-.2.42-.4.62-.62.11-.12.23-.24.33-.37.21-.25.41-.51.61-.78l.31-.44c.13-.2.26-.4.38-.62l.3-.55c.09-.18.18-.37.26-.56.08-.18.16-.35.23-.54.08-.21.15-.43.22-.65.05-.16.11-.32.15-.48.07-.26.13-.53.17-.8L22 3.51zM2 21v-2h10v2H2zm18 0h-6v-2h6v2z"/>' },
+    'bakery_dining': { label: 'Bakery', svg: '<path d="M19.28 16.34c.95-.19 1.68-.94 1.68-1.94 0-.71-.37-1.3-.92-1.62.21-.36.33-.77.33-1.19 0-1.21-.87-2.19-2.04-2.44l-.72-1.44c-.42-.83-1.24-1.35-2.13-1.38a6.32 6.32 0 0 0-1.3-1.97C13.39 3.54 12.48 3 11.5 3c-.98 0-1.89.54-2.68 1.36-.49.51-.89 1.12-1.2 1.75a2.5 2.5 0 0 0-2.5.78l-.76 1.53C3.21 8.67 2.35 9.65 2.35 10.89c0 .42.12.83.33 1.19-.55.32-.92.91-.92 1.62 0 1 .73 1.75 1.68 1.94A2.49 2.49 0 0 0 5.67 19h12.66a2.49 2.49 0 0 0 2.23-3.66h-1.28zM4.75 11.17c.54.06.98.47 1.08 1.01.19-.15.4-.26.63-.33-.11-.48-.09-.98.07-1.46-.51-.17-.88-.63-.88-1.17 0-.23.07-.44.18-.63-.29-.26-.47-.62-.47-1.01 0-.58.35-1.07.84-1.29l.51-1.02c.35-.7 1.08-1.14 1.85-1.14l.59.06.43-.69c.54-.87 1.32-1.37 2.07-1.37.73 0 1.5.48 2.04 1.34l.44.71.6-.06c.78 0 1.5.44 1.86 1.14l.51 1.02c.49.22.84.71.84 1.29 0 .39-.18.75-.47 1.01.11.19.18.4.18.63 0 .54-.37 1-.88 1.17.16.48.18.98.07 1.46.23.07.44.18.63.33.1-.54.54-.95 1.08-1.01l.2-.86c-.4-.36-.63-.87-.63-1.43 0-.36.1-.69.27-.98a2.22 2.22 0 0 1-.27-1.07c0-.58.22-1.1.58-1.5l-.28-.56a3.07 3.07 0 0 0-2.75-1.74h-.24c-.67-1.08-1.68-1.7-2.77-1.7-1.11 0-2.14.65-2.81 1.77-.11-.01-.22-.01-.33-.01a3.07 3.07 0 0 0-2.75 1.74l-.28.56c.36.4.58.92.58 1.5 0 .38-.1.74-.27 1.07.17.29.27.62.27.98 0 .56-.23 1.07-.63 1.43l.2.86z"/>' },
+
+    // Drinks & Refills
+    'water_drop': { label: 'Water/Refill', svg: '<path d="M12 2c-5.33 4.55-8 8.48-8 11.8 0 4.98 3.8 8.2 8 8.2s8-3.22 8-8.2c0-3.32-2.67-7.25-8-11.8zm0 18c-3.35 0-6-2.57-6-6.2 0-2.34 1.95-5.44 6-9.14 4.05 3.7 6 6.79 6 9.14 0 3.63-2.65 6.2-6 6.2z"/>' },
+    'local_drink': { label: 'Drink/Soda', svg: '<path d="M3 2l2.01 18.23C5.13 21.23 5.97 22 7 22h10c1.03 0 1.87-.77 1.99-1.77L21 2H3zm9 17c-1.66 0-3-1.34-3-3 0-2 3-5.4 3-5.4s3 3.4 3 5.4c0 1.66-1.34 3-3 3zm6.33-11H5.67l-.44-4h13.53l-.43 4z"/>' },
+    'wine_bar': { label: 'Wine', svg: '<path d="M6 3l1.5 14.029a3.568 3.568 0 0 0 3.562 3.471h1.877a3.569 3.569 0 0 0 3.562-3.471L18 3H6zm5 12.5c-2 0-4-1.5-4-3.5 0-3 4-5.505 4-5.505S15 9 15 12c0 2-2 3.5-4 3.5zM5 21h14v2H5z"/>' },
+    'sports_bar': { label: 'Beer', svg: '<path d="M19 9h-1V4H8v5H7c-1.66 0-3 1.34-3 3v1c0 1.66 1.34 3 3 3h1v1c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2V9zm-8 4.5c-.55 0-1-.45-1-1V8h2v4.5c0 .55-.45 1-1 1zm3 0c-.55 0-1-.45-1-1V8h2v4.5c0 .55-.45 1-1 1zM7 14c-.55 0-1-.45-1-1v-1c0-.55.45-1 1-1h1v3H7z"/>' },
+    'liquor': { label: 'Liquor', svg: '<path d="M3 14c0 1.3.84 2.4 2 2.82V20H3v2h6v-2H7v-3.18C8.16 16.4 9 15.3 9 14V6H3v8zm2-6h2v3H5V8zm15.64 1.35l-.96-.32c-.36-.12-.64-.45-.64-.84V5c0-.55-.45-1-1-1h-3c-.55 0-1 .45-1 1v3.19c0 .39-.28.72-.64.84l-.96.32C11.58 9.65 11 10.46 11 11.37v.13h9v-.13c0-.91-.58-1.72-1.36-2.02zM18 21h-5v-2h5v2zm1-4h-7v-4h7v4z"/>' },
+
+    // Hookah & Fire
+    'local_fire_department': { label: 'Fire/Charcoal', svg: '<path d="M12 12.9l-2.13 2.09c-.56.56-.87 1.29-.87 2.07C9 18.68 10.35 20 12 20s3-1.32 3-2.94c0-.78-.31-1.52-.87-2.07L12 12.9z"/><path d="M16 6l-.44.55C14.38 8.02 12 7.19 12 5.3V2S4 6 4 13c0 2.92 1.56 5.47 3.89 6.86-.56-.79-.89-1.76-.89-2.8 0-1.32.52-2.56 1.47-3.5L12 10.1l3.53 3.47c.95.93 1.47 2.17 1.47 3.5 0 1.02-.31 1.96-.85 2.75 1.89-1.15 3.29-3.06 3.71-5.3.66-3.55-1.07-6.9-3.86-8.52z"/>' },
+    'whatshot': { label: 'Hot/Trending', svg: '<path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/>' },
+    'smoke_free': { label: 'No Smoking', svg: '<path d="M2 6l6.99 7H2v3h9.99l7 7 1.26-1.25-17-17zm18.5 7H22v3h-1.5zM18 13h1.5v3H18zm.85-8.12c.62-.61 1-1.45 1-2.38h-1.5c0 1.02-.83 1.85-1.85 1.85v1.5c2.24 0 4 1.83 4 4.07V12H22V9.92c0-2.23-1.28-4.15-3.15-5.04zM14.5 8.7h1.53c1.05 0 1.97.74 1.97 2.05V12h1.5v-1.59c0-1.8-1.6-3.16-3.47-3.16H14.5c-1.02 0-1.85-.98-1.85-2s.83-1.75 1.85-1.75V2a3.35 3.35 0 0 0-3.35 3.35c0 1.85 1.52 3.35 3.35 3.35z"/><path d="M9.5 16H13v-3z"/>' },
+
+    // Cleaning & Maintenance
+    'cleaning_services': { label: 'Cleaning', svg: '<path d="M16 11h-1V3c0-1.1-.9-2-2-2h-2c-1.1 0-2 .9-2 2v8H8c-2.76 0-5 2.24-5 5v7h18v-7c0-2.76-2.24-5-5-5zm3 10h-2v-3c0-.55-.45-1-1-1s-1 .45-1 1v3h-2v-3c0-.55-.45-1-1-1s-1 .45-1 1v3H9v-3c0-.55-.45-1-1-1s-1 .45-1 1v3H5v-5c0-1.65 1.35-3 3-3h8c1.65 0 3 1.35 3 3v5z"/>' },
+    'delete_sweep': { label: 'Clear Table', svg: '<path d="M15 16h4v2h-4zm0-8h7v2h-7zm0 4h6v2h-6zM3 18c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2V8H3v10zM14 5h-3l-1-1H6L5 5H2v2h12z"/>' },
+    'auto_fix_high': { label: 'Fix/Repair', svg: '<path d="M7.5 5.6L10 7 8.6 4.5 10 2 7.5 3.4 5 2l1.4 2.5L5 7zm12 9.8L17 14l1.4 2.5L17 19l2.5-1.4L22 19l-1.4-2.5L22 14zM22 2l-2.5 1.4L17 2l1.4 2.5L17 7l2.5-1.4L22 7l-1.4-2.5zm-7.63 5.29a.996.996 0 0 0-1.41 0L1.29 18.96a.996.996 0 0 0 0 1.41l2.34 2.34c.39.39 1.02.39 1.41 0L16.7 11.05a.996.996 0 0 0 0-1.41l-2.33-2.35zm-1.03 5.49l-2.12-2.12 2.44-2.44 2.12 2.12-2.44 2.44z"/>' },
+
+    // Supplies & Items
+    'inventory': { label: 'Inventory', svg: '<path d="M20 2H4c-1 0-2 .9-2 2v3.01c0 .72.43 1.34 1 1.69V20c0 1.1 1.1 2 2 2h14c.9 0 2-.9 2-2V8.7c.57-.35 1-.97 1-1.69V4c0-1.1-1-2-2-2zm-5 12H9v-2h6v2zm5-7H4V4h16v3z"/>' },
+    'shopping_basket': { label: 'Shopping', svg: '<path d="M17.21 9l-4.38-6.56a.993.993 0 0 0-.83-.42c-.32 0-.64.14-.83.43L6.79 9H2c-.55 0-1 .45-1 1 0 .09.01.18.04.27l2.54 9.27c.23.84 1 1.46 1.92 1.46h13c.92 0 1.69-.62 1.93-1.46l2.54-9.27L23 10c0-.55-.45-1-1-1h-4.79zM9 9l3-4.4L15 9H9zm3 8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>' },
+    'add_box': { label: 'Add Item', svg: '<path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>' },
+    'note_add': { label: 'Add Note', svg: '<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z"/>' },
+
+    // Entertainment
+    'music_note': { label: 'Music', svg: '<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>' },
+    'tv': { label: 'TV', svg: '<path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z"/>' },
+    'sports_esports': { label: 'Gaming', svg: '<path d="M21.58 16.09l-1.09-7.66A3.996 3.996 0 0 0 16.53 5H7.47C5.48 5 3.79 6.46 3.51 8.43l-1.09 7.66C2.2 17.63 3.39 19 4.94 19c.68 0 1.32-.27 1.8-.75L9 16h6l2.25 2.25c.48.48 1.13.75 1.8.75 1.56 0 2.75-1.37 2.53-2.91zM11 11H9v2H8v-2H6v-1h2V8h1v2h2v1zm4-1c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm2 3c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/>' },
+    'celebration': { label: 'Party', svg: '<path d="M2 22l14-5-9-9zm12.53-9.47l5.59-5.59a1.25 1.25 0 0 1 1.77 0l.59.59 1.06-1.06-.59-.59a2.758 2.758 0 0 0-3.89 0l-5.59 5.59 1.06 1.06zm-4.47-5.65l-.59.59 1.06 1.06.59-.59a2.758 2.758 0 0 0 0-3.89l-.59-.59-1.06 1.07.59.59c.48.48.48 1.28 0 1.76zm7 5l-.59.59 1.06 1.06.59-.59c.48-.48.48-1.28 0-1.76l-.59-.59-1.06 1.06.59.59v-.36zm-6-4l-.59.59 1.06 1.06.59-.59c.48-.48.48-1.28 0-1.76l-.59-.59-1.06 1.06.59.59v-.36z"/>' },
+
+    // Comfort & Amenities
+    'ac_unit': { label: 'A/C', svg: '<path d="M22 11h-4.17l3.24-3.24-1.41-1.42L15 11h-2V9l4.66-4.66-1.42-1.41L13 6.17V2h-2v4.17L7.76 2.93 6.34 4.34 11 9v2H9L4.34 6.34 2.93 7.76 6.17 11H2v2h4.17l-3.24 3.24 1.41 1.42L9 13h2v2l-4.66 4.66 1.42 1.41L11 17.83V22h2v-4.17l3.24 3.24 1.42-1.41L13 15v-2h2l4.66 4.66 1.41-1.42L17.83 13H22z"/>' },
+    'wb_sunny': { label: 'Sunny/Bright', svg: '<path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"/>' },
+    'light_mode': { label: 'Light', svg: '<path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41l-1.06-1.06zm1.06-10.96a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>' },
+    'volume_up': { label: 'Volume Up', svg: '<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>' },
+    'volume_down': { label: 'Volume Down', svg: '<path d="M18.5 12A4.5 4.5 0 0 0 16 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/>' },
+
+    // Health & Safety
+    'medical_services': { label: 'Medical', svg: '<path d="M20 6h-4V4c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-10-2h4v2h-4V4zm6 11h-3v3h-2v-3H8v-2h3v-3h2v3h3v2z"/>' },
+    'health_and_safety': { label: 'Health & Safety', svg: '<path d="M10.5 13H8v-3h2.5V7.5h3V10H16v3h-2.5v2.5h-3V13zM12 2L4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5l-8-3z"/>' },
+    'child_care': { label: 'Child Care', svg: '<circle cx="14.5" cy="10.5" r="1.25"/><circle cx="9.5" cy="10.5" r="1.25"/><path d="M22.94 12.66c.04-.21.06-.43.06-.66s-.02-.45-.06-.66a4.008 4.008 0 0 0-2.81-3.17 9.114 9.114 0 0 0-2.19-2.91C16.36 3.85 14.28 3 12 3s-4.36.85-5.94 2.26c-.92.81-1.67 1.8-2.19 2.91a3.994 3.994 0 0 0-2.81 3.17c-.04.21-.06.43-.06.66s.02.45.06.66a4.008 4.008 0 0 0 2.81 3.17 8.977 8.977 0 0 0 2.17 2.89C7.62 20.14 9.71 21 12 21s4.38-.86 5.97-2.28c.9-.8 1.65-1.79 2.17-2.89a3.998 3.998 0 0 0 2.8-3.17zM19 14c-.1 0-.19-.02-.29-.03-.2.67-.49 1.29-.86 1.86C16.6 17.74 14.45 19 12 19s-4.6-1.26-5.85-3.17c-.37-.57-.66-1.19-.86-1.86-.1.01-.19.03-.29.03-1.1 0-2-.9-2-2s.9-2 2-2c.1 0 .19.02.29.03.2-.67.49-1.29.86-1.86C7.4 6.26 9.55 5 12 5s4.6 1.26 5.85 3.17c.37.57.66 1.19.86 1.86.1-.01.19-.03.29-.03 1.1 0 2 .9 2 2s-.9 2-2 2zM12 17c2.01 0 3.74-1.23 4.5-3h-9c.76 1.77 2.49 3 4.5 3z"/>' },
+    'accessible': { label: 'Accessible', svg: '<circle cx="12" cy="4" r="2"/><path d="M19 13v-2c-1.54.02-3.09-.75-4.07-1.83l-1.29-1.43c-.17-.19-.38-.34-.61-.45-.01 0-.01-.01-.02-.01H13a.863.863 0 0 0-.31-.06c-.02 0-.03-.01-.05-.01h-.02c-.67 0-1.29.33-1.66.85-.03.04-.05.08-.08.13l-1.5 2.5a1.98 1.98 0 0 0 .68 2.72l3.94 2.35v5h2v-6.5l-2.13-1.28 1.29-2.15C13.28 12.02 14.96 13 17 13h2z"/>' },
+
+    // Location & Navigation
+    'directions': { label: 'Directions', svg: '<path d="M21.71 11.29l-9-9a.996.996 0 0 0-1.41 0l-9 9a.996.996 0 0 0 0 1.41l9 9c.39.39 1.02.39 1.41 0l9-9a.996.996 0 0 0 0-1.41zM14 14.5V12h-4v3H8v-4c0-.55.45-1 1-1h5V7.5l3.5 3.5-3.5 3.5z"/>' },
+    'meeting_room': { label: 'Meeting Room', svg: '<path d="M14 6v15H3v-2h2V3h9v1h5v15h2v2h-4V6h-3zm-4 5v2h2v-2h-2z"/>' },
+    'wc': { label: 'Restroom', svg: '<path d="M5.5 22v-7.5H4V9c0-1.1.9-2 2-2h3c1.1 0 2 .9 2 2v5.5H9.5V22h-4zM18 22v-6h3l-2.54-7.63A2.01 2.01 0 0 0 16.56 7h-.12a2 2 0 0 0-1.9 1.37L12 16h3v6h3zM7.5 6c1.11 0 2-.89 2-2s-.89-2-2-2-2 .89-2 2 .89 2 2 2zm9 0c1.11 0 2-.89 2-2s-.89-2-2-2-2 .89-2 2 .89 2 2 2z"/>' },
+    'local_parking': { label: 'Parking', svg: '<path d="M13 3H6v18h4v-6h3c3.31 0 6-2.69 6-6s-2.69-6-6-6zm.2 8H10V7h3.2c1.1 0 2 .9 2 2s-.9 2-2 2z"/>' },
+
+    // General
+    'help': { label: 'Help', svg: '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>' },
+    'info': { label: 'Info', svg: '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>' },
+    'star': { label: 'Star/VIP', svg: '<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>' },
+    'favorite': { label: 'Favorite', svg: '<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>' },
+    'thumb_up': { label: 'Thumbs Up', svg: '<path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/>' },
+    'check_circle': { label: 'Check/Done', svg: '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>' },
+    'warning': { label: 'Warning', svg: '<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>' },
+    'error': { label: 'Error/Alert', svg: '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>' },
+    'schedule': { label: 'Schedule', svg: '<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>' },
+    'event': { label: 'Event', svg: '<path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"/>' }
+  },
+
+  async loadServiceTypes() {
+    try {
+      const response = await fetch(`${this.config.apiBaseUrl}/tasks/listAllTypes.cfm`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ BusinessID: this.config.businessId })
+      });
+      const data = await response.json();
+
+      if (data.OK) {
+        this.renderServices(data.TASK_TYPES || []);
+      } else {
+        document.getElementById('servicesList').innerHTML = '<div class="empty-state">Failed to load services</div>';
+      }
+    } catch (err) {
+      console.error('[Portal] Error loading services:', err);
+      document.getElementById('servicesList').innerHTML = '<div class="empty-state">Error loading services</div>';
+    }
+  },
+
+  getServiceIconSvg(iconName) {
+    const icon = this.serviceIcons[iconName] || this.serviceIcons['notifications'];
+    return `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">${icon.svg}</svg>`;
+  },
+
+  renderServices(services) {
+    const container = document.getElementById('servicesList');
+    if (!services.length) {
+      container.innerHTML = '<div class="empty-state">No services configured yet. Click "+ Add Service" to create one.</div>';
+      return;
+    }
+
+    container.innerHTML = services.map((s, index) => `
+      <div class="service-item" draggable="true" data-id="${s.TaskTypeID}" data-index="${index}" style="display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid #eee;background:#fff;cursor:grab;transition:background 0.2s, transform 0.2s;">
+        <div style="display:flex;align-items:center;gap:12px;">
+          <div style="color:#999;cursor:grab;" class="drag-handle">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
+          </div>
+          <div style="width:8px;height:36px;background:${s.TaskTypeColor || '#9C27B0'};border-radius:4px;"></div>
+          <div style="color:${s.TaskTypeColor || '#6366f1'};">${this.getServiceIconSvg(s.TaskTypeIcon || 'notifications')}</div>
+          <div>
+            <strong>${this.escapeHtml(s.TaskTypeName)}</strong>
+            <div style="color:#666;font-size:12px;">${s.TaskTypeDescription ? this.escapeHtml(s.TaskTypeDescription) : 'No description'}</div>
+          </div>
+        </div>
+        <div style="display:flex;gap:8px;">
+          <button class="btn btn-sm btn-secondary" onclick="Portal.editService(${s.TaskTypeID})">Edit</button>
+          <button class="btn btn-sm btn-danger" onclick="Portal.deleteService(${s.TaskTypeID}, '${this.escapeHtml(s.TaskTypeName).replace(/'/g, "\\'")}')">Delete</button>
+        </div>
+      </div>
+    `).join('');
+
+    // Store services for editing
+    this._services = services;
+
+    // Initialize drag and drop
+    this.initDragAndDrop();
+  },
+
+  initDragAndDrop() {
+    const container = document.getElementById('servicesList');
+    const items = container.querySelectorAll('.service-item');
+    let draggedItem = null;
+    let draggedOverItem = null;
+
+    items.forEach(item => {
+      item.addEventListener('dragstart', (e) => {
+        draggedItem = item;
+        item.style.opacity = '0.5';
+        e.dataTransfer.effectAllowed = 'move';
+      });
+
+      item.addEventListener('dragend', () => {
+        draggedItem.style.opacity = '1';
+        items.forEach(i => {
+          i.style.background = '#fff';
+          i.style.transform = '';
+        });
+        draggedItem = null;
+        draggedOverItem = null;
+      });
+
+      item.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        if (item !== draggedItem) {
+          item.style.background = '#f0f0ff';
+        }
+      });
+
+      item.addEventListener('dragleave', () => {
+        item.style.background = '#fff';
+      });
+
+      item.addEventListener('drop', async (e) => {
+        e.preventDefault();
+        if (item !== draggedItem) {
+          // Get all items and their IDs
+          const allItems = [...container.querySelectorAll('.service-item')];
+          const draggedIndex = allItems.indexOf(draggedItem);
+          const dropIndex = allItems.indexOf(item);
+
+          // Move the dragged item
+          if (draggedIndex < dropIndex) {
+            item.parentNode.insertBefore(draggedItem, item.nextSibling);
+          } else {
+            item.parentNode.insertBefore(draggedItem, item);
+          }
+
+          // Save new order
+          await this.saveServiceOrder();
+        }
+        item.style.background = '#fff';
+      });
+    });
+  },
+
+  async saveServiceOrder() {
+    const container = document.getElementById('servicesList');
+    const items = container.querySelectorAll('.service-item');
+    const order = [...items].map(item => parseInt(item.dataset.id));
+
+    try {
+      const response = await fetch(`${this.config.apiBaseUrl}/tasks/reorderTypes.cfm`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          BusinessID: this.config.businessId,
+          Order: order
+        })
+      });
+      const data = await response.json();
+
+      if (data.OK) {
+        this.toast('Order saved', 'success');
+      } else {
+        this.toast(data.MESSAGE || 'Failed to save order', 'error');
+        await this.loadServiceTypes(); // Reload to reset order
+      }
+    } catch (err) {
+      console.error('[Portal] Error saving order:', err);
+      this.toast('Error saving order', 'error');
+      await this.loadServiceTypes(); // Reload to reset order
+    }
+  },
+
+  // Preset color palette (GIF-safe colors)
+  colorPalette: [
+    '#FF0000', '#FF4500', '#FF6600', '#FF9900', '#FFCC00', // Reds to Yellows
+    '#FFFF00', '#CCFF00', '#99FF00', '#66FF00', '#33FF00', // Yellows to Greens
+    '#00FF00', '#00FF66', '#00FF99', '#00FFCC', '#00FFFF', // Greens to Cyans
+    '#00CCFF', '#0099FF', '#0066FF', '#0033FF', '#0000FF', // Cyans to Blues
+    '#6600FF', '#9900FF', '#CC00FF', '#FF00FF', '#FF0099', // Blues to Magentas
+  ],
+
+  buildColorPicker(selectedColor = '#9C27B0') {
+    const normalizedSelected = selectedColor.toUpperCase();
+    return this.colorPalette.map(color => {
+      const isSelected = color.toUpperCase() === normalizedSelected;
+      return `
+        <label style="display:inline-block;cursor:pointer;margin:3px;">
+          <input type="radio" name="serviceColor" value="${color}" ${isSelected ? 'checked' : ''} style="display:none;">
+          <div style="width:28px;height:28px;background:${color};border-radius:4px;border:3px solid ${isSelected ? '#333' : 'transparent'};box-sizing:border-box;"></div>
+        </label>
+      `;
+    }).join('');
+  },
+
+  buildIconPicker(selectedIcon = 'notifications') {
+    return Object.entries(this.serviceIcons).map(([key, val]) => `
+      <label style="display:inline-flex;flex-direction:column;align-items:center;padding:8px;cursor:pointer;border:2px solid ${key === selectedIcon ? '#6366f1' : '#e5e7eb'};border-radius:8px;margin:4px;">
+        <input type="radio" name="serviceIcon" value="${key}" ${key === selectedIcon ? 'checked' : ''} style="display:none;">
+        <div style="color:${key === selectedIcon ? '#6366f1' : '#666'};">${this.getServiceIconSvg(key)}</div>
+        <span style="font-size:10px;color:#666;margin-top:4px;">${val.label}</span>
+      </label>
+    `).join('');
+  },
+
+  showAddServiceModal() {
+    const html = `
+      <form id="addServiceForm" onsubmit="Portal.saveNewService(event)">
+        <div class="form-group">
+          <label>Service Name</label>
+          <input type="text" id="newServiceName" class="form-input" placeholder="e.g., Add Charcoal, Request Napkins" required maxlength="45">
+          <small style="color:#666;">This will appear in the customer's bell menu</small>
+        </div>
+        <div class="form-group">
+          <label>Description (optional)</label>
+          <input type="text" id="newServiceDescription" class="form-input" placeholder="e.g., Staff will bring fresh charcoal" maxlength="100">
+          <small style="color:#666;">Subtitle shown under the service name</small>
+        </div>
+        <div class="form-group">
+          <label>Color</label>
+          <div style="display:flex;flex-wrap:wrap;gap:2px;" id="colorPicker">
+            ${this.buildColorPicker('#9C27B0')}
+          </div>
+          <small style="color:#666;">This color will be shown on the HUD when tasks are created</small>
+        </div>
+        <div class="form-group">
+          <label>Icon</label>
+          <div style="display:flex;flex-wrap:wrap;gap:4px;" id="iconPicker">
+            ${this.buildIconPicker('notifications')}
+          </div>
+        </div>
+        <div style="display:flex;gap:12px;justify-content:flex-end;margin-top:20px;">
+          <button type="button" class="btn btn-secondary" onclick="Portal.closeModal()">Cancel</button>
+          <button type="submit" class="btn btn-primary">Add Service</button>
+        </div>
+      </form>
+    `;
+    document.getElementById('modalTitle').textContent = 'Add Service';
+    document.getElementById('modalBody').innerHTML = html;
+    this.showModal();
+    document.getElementById('newServiceName').focus();
+
+    // Color selection highlighting
+    document.querySelectorAll('#colorPicker label').forEach(label => {
+      label.addEventListener('click', () => {
+        document.querySelectorAll('#colorPicker label div').forEach(d => d.style.border = '3px solid transparent');
+        label.querySelector('div').style.border = '3px solid #333';
+      });
+    });
+
+    // Icon selection highlighting
+    document.querySelectorAll('#iconPicker label').forEach(label => {
+      label.addEventListener('click', () => {
+        document.querySelectorAll('#iconPicker label').forEach(l => {
+          l.style.borderColor = '#e5e7eb';
+          l.querySelector('div').style.color = '#666';
+        });
+        label.style.borderColor = '#6366f1';
+        label.querySelector('div').style.color = '#6366f1';
+      });
+    });
+  },
+
+  async saveNewService(event) {
+    event.preventDefault();
+    const name = document.getElementById('newServiceName').value.trim();
+    const description = document.getElementById('newServiceDescription').value.trim();
+    const color = document.querySelector('input[name="serviceColor"]:checked')?.value || '#9C27B0';
+    const icon = document.querySelector('input[name="serviceIcon"]:checked')?.value || 'notifications';
+    if (!name) return;
+
+    try {
+      const response = await fetch(`${this.config.apiBaseUrl}/tasks/saveType.cfm`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          BusinessID: this.config.businessId,
+          TaskTypeName: name,
+          TaskTypeDescription: description,
+          TaskTypeColor: color,
+          TaskTypeIcon: icon
+        })
+      });
+      const data = await response.json();
+
+      if (data.OK) {
+        this.toast('Service added', 'success');
+        this.closeModal();
+        await this.loadServiceTypes();
+      } else {
+        this.toast(data.MESSAGE || 'Failed to add service', 'error');
+      }
+    } catch (err) {
+      console.error('[Portal] Error adding service:', err);
+      this.toast('Error adding service', 'error');
+    }
+  },
+
+  editService(taskTypeId) {
+    const service = this._services?.find(s => s.TaskTypeID === taskTypeId);
+    if (!service) {
+      this.toast('Service not found', 'error');
+      return;
+    }
+
+    const html = `
+      <form id="editServiceForm" onsubmit="Portal.updateService(event, ${taskTypeId})">
+        <div class="form-group">
+          <label>Service Name</label>
+          <input type="text" id="editServiceName" class="form-input" value="${this.escapeHtml(service.TaskTypeName)}" required maxlength="45">
+        </div>
+        <div class="form-group">
+          <label>Description (optional)</label>
+          <input type="text" id="editServiceDescription" class="form-input" value="${this.escapeHtml(service.TaskTypeDescription || '')}" maxlength="100">
+          <small style="color:#666;">Subtitle shown under the service name</small>
+        </div>
+        <div class="form-group">
+          <label>Color</label>
+          <div style="display:flex;flex-wrap:wrap;gap:2px;" id="colorPicker">
+            ${this.buildColorPicker(service.TaskTypeColor || '#9C27B0')}
+          </div>
+          <small style="color:#666;">This color will be shown on the HUD when tasks are created</small>
+        </div>
+        <div class="form-group">
+          <label>Icon</label>
+          <div style="display:flex;flex-wrap:wrap;gap:4px;" id="iconPicker">
+            ${this.buildIconPicker(service.TaskTypeIcon || 'notifications')}
+          </div>
+        </div>
+        <div style="display:flex;gap:12px;justify-content:flex-end;margin-top:20px;">
+          <button type="button" class="btn btn-secondary" onclick="Portal.closeModal()">Cancel</button>
+          <button type="submit" class="btn btn-primary">Save</button>
+        </div>
+      </form>
+    `;
+    document.getElementById('modalTitle').textContent = 'Edit Service';
+    document.getElementById('modalBody').innerHTML = html;
+    this.showModal();
+    document.getElementById('editServiceName').focus();
+
+    // Color selection highlighting
+    document.querySelectorAll('#colorPicker label').forEach(label => {
+      label.addEventListener('click', () => {
+        document.querySelectorAll('#colorPicker label div').forEach(d => d.style.border = '3px solid transparent');
+        label.querySelector('div').style.border = '3px solid #333';
+      });
+    });
+
+    // Icon selection highlighting
+    document.querySelectorAll('#iconPicker label').forEach(label => {
+      label.addEventListener('click', () => {
+        document.querySelectorAll('#iconPicker label').forEach(l => {
+          l.style.borderColor = '#e5e7eb';
+          l.querySelector('div').style.color = '#666';
+        });
+        label.style.borderColor = '#6366f1';
+        label.querySelector('div').style.color = '#6366f1';
+      });
+    });
+  },
+
+  async updateService(event, taskTypeId) {
+    event.preventDefault();
+    const name = document.getElementById('editServiceName').value.trim();
+    const description = document.getElementById('editServiceDescription').value.trim();
+    const color = document.querySelector('input[name="serviceColor"]:checked')?.value || '#9C27B0';
+    const icon = document.querySelector('input[name="serviceIcon"]:checked')?.value || 'notifications';
+    if (!name) return;
+
+    try {
+      const response = await fetch(`${this.config.apiBaseUrl}/tasks/saveType.cfm`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          TaskTypeID: taskTypeId,
+          BusinessID: this.config.businessId,
+          TaskTypeName: name,
+          TaskTypeDescription: description,
+          TaskTypeColor: color,
+          TaskTypeIcon: icon
+        })
+      });
+      const data = await response.json();
+
+      if (data.OK) {
+        this.toast('Service updated', 'success');
+        this.closeModal();
+        await this.loadServiceTypes();
+      } else {
+        this.toast(data.MESSAGE || 'Failed to update service', 'error');
+      }
+    } catch (err) {
+      console.error('[Portal] Error updating service:', err);
+      this.toast('Error updating service', 'error');
+    }
+  },
+
+  async deleteService(taskTypeId, serviceName) {
+    if (!confirm(`Delete "${serviceName}"? This cannot be undone.`)) return;
+
+    try {
+      const response = await fetch(`${this.config.apiBaseUrl}/tasks/deleteType.cfm`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          TaskTypeID: taskTypeId,
+          BusinessID: this.config.businessId
+        })
+      });
+      const data = await response.json();
+
+      if (data.OK) {
+        this.toast('Service deleted', 'success');
+        await this.loadServiceTypes();
+      } else {
+        this.toast(data.ERROR || 'Failed to delete service', 'error');
+      }
+    } catch (err) {
+      console.error('[Portal] Error deleting service:', err);
+      this.toast('Error deleting service', 'error');
+    }
   }
 };