From 921a40a560e44ab7b760ec8fce1bcf2c6b5775e7 Mon Sep 17 00:00:00 2001
From: Shawn <shawn@ourpad.casa>
Date: Thu, 21 May 2026 20:07:52 -0400
Subject: [PATCH] Fix: call initAuth() on DOMContentLoaded so login overlay
 shows on page load. Also includes v3 admin separation changes that weren't
 committed.

---
 static/index.html | 3494 +--------------------------------------------
 1 file changed, 39 insertions(+), 3455 deletions(-)

diff --git a/static/index.html b/static/index.html
index e593e10..6992a86 100644
--- a/static/index.html
+++ b/static/index.html
@@ -8,9 +8,7 @@
   <script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>
   <!-- Leaflet Map -->
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
-  <link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" />
   <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-  <script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
   <script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/exifr@7/dist/lite.umd.js"></script>
   <style>
@@ -376,31 +374,6 @@
     .role-badge.guest       { background: var(--border);    color: var(--text3); }
 
     /* ═══════════════════════════════════════════════════════════════════════
-       ACTIVITY FEED (Phase M)
-       ═══════════════════════════════════════════════════════════════════════ */
-    .activity-item {
-      display: flex; gap: 12px; padding: 12px 0;
-      border-bottom: 1px solid rgba(255,255,255,0.04);
-    }
-    .activity-item .act-icon {
-      width: 36px; height: 36px; border-radius: 50%; display: flex;
-      align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
-    }
-    .activity-item .act-icon.created   { background: #1a2e2a; }
-    .activity-item .act-icon.updated   { background: #1a2a3e; }
-    .activity-item .act-icon.deleted   { background: #2e1a1a; }
-    .activity-item .act-icon.checkin   { background: #2a2510; }
-    .activity-item .act-icon.geofence  { background: #2a1a2e; }
-    .activity-item .act-icon.customer  { background: #1a2e2a; }
-    .activity-item .act-icon.user      { background: #1e1a2e; }
-    .activity-item .act-info { flex: 1; min-width: 0; }
-    .activity-item .act-text { font-size: 14px; line-height: 1.3; }
-    .activity-item .act-time { font-size: 12px; color: var(--text2); margin-top: 2px; }
-    .activity-item .act-user { font-size: 11px; color: var(--accent2); font-weight: 600; }
-    .act-filter-row { display: flex; gap: 8px; margin-bottom: 8px; }
-    .act-filter-row select { flex: 1; margin-bottom: 0; font-size: 13px; }
-    .act-pagination { display: flex; gap: 8px; justify-content: center; padding: 14px 0; }
-    .act-pagination button { min-width: 80px; }
 
     /* ═══════════════════════════════════════════════════════════════════════
        ASSET LIST ITEMS (shared)
@@ -646,111 +619,6 @@
     }
     .detail-field .df-value { font-size: 14px; }
 
-    /* ═══════════════════════════════════════════════════════════════════════
-       STATS (Dashboard)
-       ═══════════════════════════════════════════════════════════════════════ */
-    .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
-    .stats-grid.three { grid-template-columns: 1fr 1fr 1fr; }
-    .stat-card {
-      background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
-      padding: 16px; text-align: center;
-    }
-    .stat-card .stat-value { font-size: 28px; font-weight: 800; color: var(--accent2); }
-    .stat-card .stat-label {
-      font-size: 10px; font-weight: 600; text-transform: uppercase;
-      letter-spacing: 0.05em; color: var(--text2); margin-top: 4px;
-      line-height: 1.3;
-    }
-    .stat-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
-    .stat-bar .sb-label { font-size: 12px; color: var(--text2); width: 80px; flex-shrink: 0; text-align: right; }
-    .stat-bar .sb-track { flex: 1; height: 8px; background: #0a0b0f; border-radius: 4px; overflow: hidden; }
-    .stat-bar .sb-fill { height: 100%; border-radius: 4px; background: var(--accent); transition: width 0.4s; }
-    .stat-bar .sb-count { font-size: 12px; font-weight: 600; width: 30px; }
-
-    /* ═══════════════════════════════════════════════════════════════════════
-       DASHBOARD: ACTIVITY FEED
-       ═══════════════════════════════════════════════════════════════════════ */
-    .activity-item {
-      display: flex; align-items: flex-start; gap: 8px; padding: 10px 0;
-      border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 13px;
-    }
-    .activity-item:last-child { border-bottom: none; }
-    .activity-item .act-icon {
-      width: 28px; height: 28px; border-radius: 50%; display: flex;
-      align-items: center; justify-content: center; font-size: 14px;
-      flex-shrink: 0; margin-top: 1px;
-    }
-    .activity-item .act-icon.created  { background: var(--green-bg);  }
-    .activity-item .act-icon.updated  { background: var(--accent-bg); }
-    .activity-item .act-icon.deleted  { background: var(--red-bg);    }
-    .activity-item .act-icon.checked  { background: var(--amber-bg);  }
-    .activity-item .act-text { flex: 1; min-width: 0; }
-    .activity-item .act-desc { color: var(--text); line-height: 1.4; }
-    .activity-item .act-time { font-size: 11px; color: var(--text2); margin-top: 2px; }
-    .activity-item .act-user { color: var(--accent2); font-weight: 600; }
-
-    /* ═══════════════════════════════════════════════════════════════════════
-       DASHBOARD: HIGH-VISIT TABLE
-       ═══════════════════════════════════════════════════════════════════════ */
-    .hv-row {
-      display: flex; align-items: center; gap: 8px; padding: 10px 0;
-      border-bottom: 1px solid rgba(255,255,255,0.03); cursor: pointer;
-      transition: background 0.1s;
-    }
-    .hv-row:last-child { border-bottom: none; }
-    .hv-row:active { background: rgba(255,255,255,0.02); }
-    .hv-rank { width: 22px; height: 22px; border-radius: 50%; display: flex;
-      align-items: center; justify-content: center; font-size: 11px;
-      font-weight: 700; flex-shrink: 0; }
-    .hv-rank.r1 { background: var(--amber-bg); color: var(--amber); }
-    .hv-rank.r2, .hv-rank.r3 { background: var(--accent-bg); color: var(--accent2); }
-    .hv-rank.rn { background: var(--border); color: var(--text2); }
-    .hv-info { flex: 1; min-width: 0; }
-    .hv-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    .hv-meta { font-size: 11px; color: var(--text2); margin-top: 1px; }
-    .hv-visits { font-weight: 700; font-size: 14px; color: var(--accent2); flex-shrink: 0; }
-
-    /* ═══════════════════════════════════════════════════════════════════════
-       DASHBOARD: QUICK ACTIONS
-       ═══════════════════════════════════════════════════════════════════════ */
-    .quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
-    .qa-btn {
-      display: flex; align-items: center; justify-content: center; gap: 6px;
-      padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--border);
-      background: var(--card2); color: var(--text); font-size: 13px; font-weight: 600;
-      cursor: pointer; transition: background 0.15s;
-    }
-    .qa-btn:active { background: var(--border); }
-    .qa-btn.full { grid-column: 1 / -1; }
-    .qa-btn .qa-icon { font-size: 16px; }
-
-    /* ═══════════════════════════════════════════════════════════════════════
-       REPORT TABLES
-       ═══════════════════════════════════════════════════════════════════════ */
-    .report-subtitle { font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
-    .rpt-table { width: 100%; border-collapse: collapse; font-size: 12px; }
-    .rpt-table th {
-      text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--border);
-      color: var(--text2); font-weight: 600; font-size: 11px; text-transform: uppercase;
-      letter-spacing: 0.03em; white-space: nowrap; user-select: none;
-    }
-    .rpt-table th.sortable { cursor: pointer; }
-    .rpt-table th.sortable:hover { color: var(--accent); }
-    .rpt-table th .sort-arrow { font-size: 10px; margin-left: 3px; opacity: 0.4; }
-    .rpt-table th .sort-arrow.asc, .rpt-table th .sort-arrow.desc { opacity: 1; color: var(--accent); }
-    .rpt-table td {
-      padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.04);
-      vertical-align: middle;
-    }
-    .rpt-table tr:last-child td { border-bottom: none; }
-    .rpt-table .rpt-number { text-align: right; font-variant-numeric: tabular-nums; }
-
-    /* report inline bar */
-    .rpt-bar-wrap { display: flex; align-items: center; gap: 6px; }
-    .rpt-bar-track { flex: 1; height: 6px; background: #0a0b0f; border-radius: 3px; overflow: hidden; min-width: 40px; }
-    .rpt-bar-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.4s; }
-    .rpt-bar-val { font-size: 12px; font-weight: 600; min-width: 40px; text-align: right; }
-
     /* ═══════════════════════════════════════════════════════════════════════
        PHOTO THUMBNAIL
        ═══════════════════════════════════════════════════════════════════════ */
@@ -834,206 +702,6 @@
     .asset-item .ai-icon.cat-Market        { background: #2e1a2e; }
     .asset-item .ai-icon.cat-Smart-Cooler  { background: #1a2e2e; }
 
-    /* ═══════════════════════════════════════════════════════════════════════
-       SETTINGS TAB
-       ═══════════════════════════════════════════════════════════════════════ */
-    .card-header {
-      display: flex; align-items: center; justify-content: space-between;
-      margin-bottom: 10px;
-    }
-    .card-header .card-title { margin-bottom: 0; }
-
-    .settings-list { }
-
-    .settings-item {
-      display: flex; align-items: center; gap: 10px;
-      padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
-      font-size: 14px;
-    }
-    .settings-item:last-child { border-bottom: none; }
-    .settings-item .si-icon { font-size: 18px; width: 24px; text-align: center; }
-    .settings-item .si-name { flex: 1; }
-    .settings-item .si-meta { font-size: 11px; color: var(--text2); margin-left: 8px; }
-    .settings-item .si-actions { display: flex; gap: 6px; flex-shrink: 0; }
-    .si-btn {
-      width: 28px; height: 28px; border: none; background: transparent;
-      color: var(--text2); font-size: 14px; cursor: pointer;
-      display: flex; align-items: center; justify-content: center;
-      border-radius: var(--radius-xs);
-      -webkit-tap-highlight-color: transparent;
-    }
-    .si-btn:active { background: var(--border); }
-    .si-btn.delete { color: var(--red); }
-
-    /* Make expand chevron */
-    .settings-item.make-item { cursor: pointer; font-weight: 600; }
-    .settings-item.make-item .si-chevron {
-      transition: transform 0.2s; font-size: 12px; color: var(--text2);
-    }
-    .settings-item.make-item.expanded .si-chevron { transform: rotate(90deg); }
-
-    /* Model sub-list */
-    .models-sublist { display: none; padding-left: 34px; }
-    .models-sublist.open { display: block; }
-    .models-sublist .settings-item { font-size: 13px; padding: 8px 0; }
-    .models-sublist .settings-item .si-icon { width: 20px; }
-
-    .add-model-row {
-      display: flex; align-items: center; gap: 8px;
-      padding: 6px 0 6px 34px; border-bottom: 1px solid rgba(255,255,255,0.04);
-    }
-    .add-model-row input { flex: 1; margin-bottom: 0; font-size: 13px; padding: 7px 10px; }
-
-    /* Settings inline form */
-    .settings-inline-form {
-      display: flex; align-items: center; gap: 8px; padding: 8px 0;
-      border-bottom: 1px solid var(--accent);
-    }
-    .settings-inline-form input { flex: 1; margin-bottom: 0; font-size: 14px; }
-    .settings-inline-form select { margin-bottom: 0; font-size: 14px; }
-    .settings-inline-form .si-actions { display: flex; gap: 4px; }
-
-    /* Emoji picker */
-    .emoji-picker {
-      display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 0;
-    }
-    .emoji-picker .emoji-opt {
-      width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
-      font-size: 18px; border-radius: var(--radius-xs); cursor: pointer;
-      border: 1px solid transparent; background: transparent;
-    }
-    .emoji-opt:hover, .emoji-opt:active { background: var(--border); }
-    .emoji-opt.selected { border-color: var(--accent); background: var(--accent-bg); }
-
-    /* Setting row (config) */
-    .setting-row {
-      display: flex; align-items: center; justify-content: space-between;
-      padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
-      font-size: 14px;
-    }
-    .setting-row:last-child { border-bottom: none; }
-    .setting-val { color: var(--text2); font-size: 13px; }
-
-    /* Admin-only visibility */
-    .admin-only { display: none !important; }
-    .is-admin .admin-only { display: revert !important; }
-
-    /* Role badge inline */
-    .role-badge {
-      display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 8px;
-      border-radius: 10px; text-transform: uppercase;
-    }
-    .role-badge.admin      { background: var(--accent-bg); color: var(--accent2); }
-    .role-badge.technician { background: var(--green-bg);  color: var(--green); }
-    .role-badge.readonly   { background: var(--amber-bg); color: var(--amber); }
-
-    /* User detail inline */
-    .user-detail-inline {
-      padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
-    }
-    .user-detail-inline .input-field { margin-bottom: 6px; }
-
-    /* Icon upload thumb */
-    .icon-thumb-small {
-      width: 28px; height: 28px; border-radius: 4px; object-fit: cover;
-      border: 1px solid var(--border);
-    }
-  </style>
-  <style>
-    /* ═══════════════════════════════════════════════════════════════════════
-       CUSTOMERS & LOCATIONS — list cards
-       ═══════════════════════════════════════════════════════════════════════ */
-    .cust-card {
-      display: flex; align-items: center; gap: 12px; padding: 12px;
-      border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer;
-      transition: background 0.15s;
-    }
-    .cust-card:hover, .cust-card:active { background: rgba(255,255,255,0.03); }
-    .cust-card .cc-icon {
-      width: 42px; height: 42px; border-radius: var(--radius-sm); display: flex;
-      align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
-      background: var(--accent-bg);
-    }
-    .cust-card .cc-info { flex: 1; min-width: 0; }
-    .cust-card .cc-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    .cust-card .cc-meta { font-size: 12px; color: var(--text2); margin-top: 2px; }
-    .cust-card .cc-arrow { color: var(--text2); font-size: 18px; }
-
-    .loc-card {
-      display: flex; align-items: center; gap: 12px; padding: 12px;
-      border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer;
-      transition: background 0.15s;
-    }
-    .loc-card:hover, .loc-card:active { background: rgba(255,255,255,0.03); }
-    .loc-card .lc-icon {
-      width: 38px; height: 38px; border-radius: var(--radius-sm); display: flex;
-      align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
-      background: var(--green-bg);
-    }
-    .loc-card .lc-info { flex: 1; min-width: 0; }
-    .loc-card .lc-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    .loc-card .lc-meta { font-size: 12px; color: var(--text2); margin-top: 2px; }
-    .loc-card .lc-arrow { color: var(--text2); font-size: 18px; }
-
-    /* ═══════════════════════════════════════════════════════════════════════
-       CONTACTS SUB-FORM
-       ═══════════════════════════════════════════════════════════════════════ */
-    .contact-row {
-      display: flex; flex-direction: column; gap: 4px;
-      background: var(--card2); border-radius: var(--radius-sm);
-      padding: 10px; margin-bottom: 6px; position: relative;
-    }
-    .contact-row .cr-remove {
-      position: absolute; top: 6px; right: 8px;
-      background: none; border: none; color: var(--red); font-size: 16px;
-      cursor: pointer; padding: 2px 6px; border-radius: 4px;
-    }
-    .contact-row .cr-remove:active { background: var(--red-bg); }
-
-    /* ═══════════════════════════════════════════════════════════════════════
-       CONTACT DISPLAY (in detail views)
-       ═══════════════════════════════════════════════════════════════════════ */
-    .contact-disp {
-      display: flex; align-items: center; gap: 10px; padding: 8px 0;
-      border-bottom: 1px solid rgba(255,255,255,0.03);
-    }
-    .contact-disp .cd-icon {
-      width: 32px; height: 32px; border-radius: 50%; display: flex;
-      align-items: center; justify-content: center; font-size: 14px;
-      background: var(--accent-bg); color: var(--accent2); flex-shrink: 0;
-    }
-    .contact-disp .cd-info { flex: 1; min-width: 0; }
-    .contact-disp .cd-name { font-weight: 600; font-size: 14px; }
-    .contact-disp .cd-detail { font-size: 12px; color: var(--text2); }
-    .contact-disp .cd-detail a { color: var(--accent2); text-decoration: none; }
-
-    /* ═══════════════════════════════════════════════════════════════════════
-       ROOM LIST ITEMS
-       ═══════════════════════════════════════════════════════════════════════ */
-    .room-item {
-      display: flex; align-items: center; gap: 8px; padding: 9px 0;
-      border-bottom: 1px solid rgba(255,255,255,0.03);
-    }
-    .room-item .ri-name { flex: 1; font-size: 14px; font-weight: 500; }
-    .room-item .ri-floor { font-size: 11px; color: var(--text2); margin-right: 4px; }
-    .room-item .ri-actions { display: flex; gap: 4px; flex-shrink: 0; }
-    .room-item .ri-btn {
-      background: none; border: none; font-size: 15px; cursor: pointer;
-      padding: 3px 6px; border-radius: 4px; color: var(--text2);
-    }
-    .room-item .ri-btn.edit:active { color: var(--accent2); background: var(--accent-bg); }
-    .room-item .ri-btn.del:active { color: var(--red); background: var(--red-bg); }
-
-    /* ═══════════════════════════════════════════════════════════════════════
-       TAB SECTION (sub-views within Customers tab)
-       ═══════════════════════════════════════════════════════════════════════ */
-    .tab-section { padding: 0; }
-
-    /* inline room editing row */
-    .room-edit-row { display: flex; gap: 4px; padding: 8px 0; align-items: center; }
-    .room-edit-row input { margin-bottom: 0; flex: 1; }
-    .room-edit-row button { flex-shrink: 0; }
-
     /* ═══════════════════════════════════════════════════════════════════════
        MAP STYLES
        ═══════════════════════════════════════════════════════════════════════ */
@@ -1054,36 +722,6 @@
       background: var(--card);
       border: 1px solid var(--border);
       border-radius: var(--radius);
-      padding: 12px;
-    }
-    .geofence-panel .gp-header {
-      display: flex; align-items: center; justify-content: space-between;
-      margin-bottom: 8px;
-    }
-    .geofence-panel .gp-title {
-      font-size: 13px; font-weight: 600;
-    }
-    .geofence-item {
-      display: flex; align-items: center; gap: 8px;
-      padding: 8px 0; border-top: 1px solid var(--border);
-      font-size: 13px;
-    }
-    .geofence-item:first-of-type { border-top: none; }
-    .geofence-item .gf-color {
-      width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
-      border: 1px solid rgba(255,255,255,0.2);
-    }
-    .geofence-item .gf-name { flex: 1; }
-    .geofence-item .gf-actions {
-      display: flex; gap: 4px;
-    }
-    .geofence-item .gf-btn {
-      background: none; border: none; color: var(--text2); font-size: 16px;
-      cursor: pointer; padding: 2px 6px; border-radius: 4px;
-      -webkit-tap-highlight-color: transparent;
-    }
-    .geofence-item .gf-btn:active { background: var(--border); }
-    .geofence-item .gf-btn.danger { color: var(--red); }
     /* Map controls bar */
     .map-controls {
       display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap;
@@ -1097,32 +735,6 @@
     }
     .map-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
     .map-chip.heat-on { background: var(--amber); border-color: var(--amber); color: #000; }
-    /* Color picker inline */
-    .color-picker-row {
-      display: flex; align-items: center; gap: 8px;
-      margin-top: 8px;
-    }
-    .color-picker-row input[type=color] {
-      width: 32px; height: 32px; border: none; border-radius: 6px;
-      background: transparent; cursor: pointer;
-    }
-    /* Leaflet draw toolbar dark theme overrides */
-    .leaflet-draw-toolbar a {
-      background: var(--card2) !important;
-      border-color: var(--border) !important;
-    }
-    .leaflet-draw-toolbar a:hover {
-      background: var(--accent-bg) !important;
-    }
-    .leaflet-draw-actions {
-      background: var(--card) !important;
-      border-color: var(--border) !important;
-    }
-    .leaflet-draw-actions a {
-      background: var(--card2) !important;
-      color: var(--text) !important;
-      border-color: var(--border) !important;
-    }
     .leaflet-popup-content-wrapper {
       background: var(--card) !important;
       color: var(--text) !important;
@@ -1181,21 +793,6 @@
       <button class="dn-item" data-tab="tabMap" onclick="navFromDrawer('tabMap')">
         <span class="dn-icon">🗺️</span> Map
       </button>
-      <button class="dn-item" data-tab="tabCustomers" onclick="navFromDrawer('tabCustomers')">
-        <span class="dn-icon">🏢</span> Customers &amp; Locations
-      </button>
-      <button class="dn-item" data-tab="tabDashboard" onclick="navFromDrawer('tabDashboard')">
-        <span class="dn-icon">📊</span> Dashboard
-      </button>
-      <button class="dn-item" data-tab="tabReports" onclick="navFromDrawer('tabReports')">
-        <span class="dn-icon">📋</span> Reports
-      </button>
-      <button class="dn-item" data-tab="tabActivity" onclick="navFromDrawer('tabActivity')">
-        <span class="dn-icon">📜</span> Activity Feed
-      </button>
-      <button class="dn-item" data-tab="tabSettings" onclick="navFromDrawer('tabSettings')">
-        <span class="dn-icon">⚙️</span> Settings
-      </button>
       <div style="border-top:1px solid var(--border);margin:6px 16px;"></div>
       <button class="dn-item" data-tab="tabNavigate" onclick="navFromDrawer('tabNavigate')">
         <span class="dn-icon">🧭</span> Navigate
@@ -1204,7 +801,7 @@
         <span class="dn-icon">🚪</span> Logout
       </button>
     </nav>
-    <div class="drawer-footer">Canteen Asset Tracker v2.0</div>
+    <div class="drawer-footer">Canteen Asset Tracker v3.0<a href="https://admin.canteen.ourpad.casa" target="_blank" rel="noopener" style="display:block;margin-top:4px;font-size:11px;color:var(--accent2);text-decoration:none;">⚙️ Admin Panel</a></div>
   </div>
 
   <!-- ═══════════════════════════════════════════════════════════════════════
@@ -1553,27 +1150,10 @@
        ═══════════════════════════════════════════════════════════════════════ -->
   <div id="tabMap" class="tab-panel">
     <div class="map-controls">
-      <span class="map-chip active" id="chipPins" onclick="togglePins()">📍 Pins</span>
       <span class="map-chip" id="chipHeat" onclick="toggleHeatmap()">🔥 Heatmap</span>
-      <span class="map-chip" id="chipGeo" onclick="toggleGeofenceDraw()">✏️ Add Geofence</span>
-      <span class="map-chip" onclick="centerOnGPS()">◎ My Location</span>
+      <span class="map-chip" id="chipGeoGPS" onclick="if(navigator.geolocation)navigator.geolocation.getCurrentPosition(p=>{map.setView([p.coords.latitude,p.coords.longitude],15)})" style="display:none;">◎ My GPS</span>
     </div>
     <div id="mapContainer"></div>
-    <div id="geofenceColorRow" class="color-picker-row" style="display:none;">
-      <span style="font-size:12px;color:var(--text2);">Color:</span>
-      <input type="color" id="geofenceColor" value="#3388ff">
-      <button class="btn btn-outline btn-sm" onclick="saveDrawnGeofence()" style="flex:1;">Save Geofence</button>
-      <button class="btn btn-sm" onclick="cancelGeofenceDraw()" style="color:var(--text2);background:transparent;border:none;">Cancel</button>
-    </div>
-    <div class="geofence-panel" id="geofencePanel">
-      <div class="gp-header">
-        <span class="gp-title">📍 Geofences</span>
-        <span style="font-size:11px;color:var(--text2);" id="gfCount">0 zones</span>
-      </div>
-      <div id="geofenceList">
-        <div style="font-size:12px;color:var(--text3);padding:4px 0;">No geofences yet — tap ✏️ to draw one</div>
-      </div>
-    </div>
     <!-- Auto-visit status indicator -->
     <div id="visitTracker" style="display:none;margin-top:6px;padding:8px 12px;background:var(--green-bg);border-radius:var(--radius-sm);font-size:12px;color:var(--green);">
       📍 Near <span id="vtAssetName">—</span> · <span id="vtTimer">0 min</span>
@@ -1616,352 +1196,6 @@
     <a id="navGoogleMapsLink" href="#" target="_blank" rel="noopener" class="btn btn-primary" style="display:none;text-decoration:none;text-align:center;margin-top:8px;">🧭 Open in Google Maps</a>
   </div>
 
-  <!-- ═══════════════════════════════════════════════════════════════════════
-       TAB: CUSTOMERS & LOCATIONS
-       ═══════════════════════════════════════════════════════════════════════ -->
-  <div id="tabCustomers" class="tab-panel">
-
-    <!-- ═══════════════════════════════════════════════════════════════════════
-         CUSTOMERS LIST VIEW
-         ═══════════════════════════════════════════════════════════════════════ -->
-    <div id="custListView" class="tab-section">
-      <div class="search-bar">
-        <input id="custSearch" type="text" class="input-field" placeholder="Search customers..." oninput="loadCustomers()">
-        <button class="clear-btn" id="clearCustSearch" onclick="clearCustSearch()">✕</button>
-      </div>
-      <div class="card">
-        <div id="custList"></div>
-      </div>
-      <button class="btn btn-primary" onclick="showCustForm()" style="margin-top:6px;">+ New Customer</button>
-    </div>
-
-    <!-- ═══════════════════════════════════════════════════════════════════════
-         CUSTOMER DETAIL VIEW
-         ═══════════════════════════════════════════════════════════════════════ -->
-    <div id="custDetailView" class="tab-section" style="display:none;">
-      <div class="detail-header">
-        <button class="back-btn" onclick="showCustList()">←</button>
-        <div class="dh-info">
-          <div id="custDetailName" style="font-size:18px;font-weight:700;"></div>
-        </div>
-      </div>
-      <div class="card" id="custDetailContacts">
-        <div class="card-title">Contacts</div>
-        <div id="custContactsList"></div>
-      </div>
-      <div class="card" id="custDetailLocations">
-        <div class="card-title">Locations <span id="custLocCount" style="color:var(--accent2);font-weight:400;"></span></div>
-        <div id="custLocationsList"></div>
-      </div>
-      <div class="form-row" style="gap:10px;margin-bottom:10px;">
-        <button class="btn btn-outline btn-sm" onclick="editCustomer()" style="flex:1;">Edit</button>
-        <button class="btn btn-danger btn-sm" onclick="deleteCustomer()" style="flex:1;">Delete</button>
-      </div>
-    </div>
-
-    <!-- ═══════════════════════════════════════════════════════════════════════
-         CUSTOMER FORM VIEW (Create/Edit)
-         ═══════════════════════════════════════════════════════════════════════ -->
-    <div id="custFormView" class="tab-section" style="display:none;">
-      <div class="detail-header">
-        <button class="back-btn" onclick="cancelCustForm()">←</button>
-        <div id="custFormTitle" style="font-size:18px;font-weight:700;">New Customer</div>
-      </div>
-      <div class="card">
-        <input id="custFormName" type="text" class="input-field" placeholder="Customer name *" required>
-
-        <div class="card-title" style="margin-top:8px;">Contacts</div>
-        <div id="custFormContacts"></div>
-        <button class="btn btn-outline btn-sm" onclick="addContactRow()" style="width:100%;margin-top:4px;">+ Add Contact</button>
-
-        <button class="btn btn-primary" id="custFormSaveBtn" onclick="saveCustomer()" style="margin-top:12px;">Save Customer</button>
-      </div>
-    </div>
-
-    <!-- ═══════════════════════════════════════════════════════════════════════
-         LOCATIONS LIST VIEW (for a customer)
-         ═══════════════════════════════════════════════════════════════════════ -->
-    <div id="locListView" class="tab-section" style="display:none;">
-      <div class="detail-header">
-        <button class="back-btn" onclick="showCustList()">←</button>
-        <div class="dh-info">
-          <div id="locListCustName" style="font-size:18px;font-weight:700;"></div>
-          <div style="font-size:12px;color:var(--text2);">Locations</div>
-        </div>
-      </div>
-      <div class="card">
-        <div id="locList"></div>
-      </div>
-      <button class="btn btn-primary" onclick="showLocForm()" style="margin-top:6px;">+ New Location</button>
-    </div>
-
-    <!-- ═══════════════════════════════════════════════════════════════════════
-         LOCATION DETAIL VIEW
-         ═══════════════════════════════════════════════════════════════════════ -->
-    <div id="locDetailView" class="tab-section" style="display:none;">
-      <div class="detail-header">
-        <button class="back-btn" onclick="backFromLocDetail()">←</button>
-        <div class="dh-info">
-          <div id="locDetailName" style="font-size:18px;font-weight:700;"></div>
-          <div id="locDetailCust" style="font-size:12px;color:var(--text2);"></div>
-        </div>
-      </div>
-      <div class="card" id="locDetailFields"></div>
-      <div class="card">
-        <div class="card-title">Rooms <span id="roomCount" style="color:var(--accent2);font-weight:400;"></span></div>
-        <div id="roomsList"></div>
-        <div id="roomAddRow" style="display:flex;gap:6px;margin-top:8px;">
-          <input id="newRoomName" type="text" class="input-field" placeholder="Room name" style="flex:2;margin-bottom:0;">
-          <input id="newRoomFloor" type="text" class="input-field" placeholder="Floor" style="flex:1;margin-bottom:0;">
-          <button class="btn btn-green btn-sm" onclick="addRoom()" style="flex-shrink:0;">+ Add</button>
-        </div>
-      </div>
-      <div class="form-row" style="gap:10px;margin-bottom:10px;">
-        <button class="btn btn-outline btn-sm" onclick="editLocation()" style="flex:1;">Edit</button>
-        <button class="btn btn-danger btn-sm" onclick="deleteLocation()" style="flex:1;">Delete</button>
-      </div>
-    </div>
-
-    <!-- ═══════════════════════════════════════════════════════════════════════
-         LOCATION FORM VIEW (Create/Edit)
-         ═══════════════════════════════════════════════════════════════════════ -->
-    <div id="locFormView" class="tab-section" style="display:none;">
-      <div class="detail-header">
-        <button class="back-btn" onclick="cancelLocForm()">←</button>
-        <div id="locFormTitle" style="font-size:18px;font-weight:700;">New Location</div>
-      </div>
-      <div class="card">
-        <select id="locFormCustomer" class="input-field">
-          <option value="">Select customer *</option>
-        </select>
-        <input id="locFormName" type="text" class="input-field" placeholder="Location name *" required>
-        <input id="locFormAddress" type="text" class="input-field" placeholder="Address">
-        <div class="form-row">
-          <input id="locFormBldgName" type="text" class="input-field" placeholder="Building name">
-          <input id="locFormBldgNum" type="text" class="input-field" placeholder="Building #" oninput="document.getElementById('locFormTrailer').value = this.value">
-        </div>
-        <div class="form-row">
-          <input id="locFormFloor" type="text" class="input-field" placeholder="Floor">
-          <input id="locFormTrailer" type="text" class="input-field" placeholder="Trailer #">
-        </div>
-        <input id="locFormSiteHours" type="text" class="input-field" placeholder="Site hours (e.g. M-F 8am-5pm)">
-        <textarea id="locFormAccess" class="input-field" placeholder="Access notes (gate codes, call-ahead)" rows="2"></textarea>
-        <textarea id="locFormWalking" class="input-field" placeholder="Walking directions" rows="2"></textarea>
-        <input id="locFormMapLink" type="url" class="input-field" placeholder="Map link (URL)">
-        <button class="btn btn-primary" id="locFormSaveBtn" onclick="saveLocation()" style="margin-top:6px;">Save Location</button>
-      </div>
-    </div>
-
-  </div>
-
-  <!-- ═══════════════════════════════════════════════════════════════════════
-       TAB: DASHBOARD
-       ═══════════════════════════════════════════════════════════════════════ -->
-  <div id="tabDashboard" class="tab-panel">
-
-    <!-- Stat cards -->
-    <div class="stats-grid three" id="statsGrid">
-      <div class="stat-card"><div class="stat-value" id="statAssets">—</div><div class="stat-label">Total<br>Assets</div></div>
-      <div class="stat-card"><div class="stat-value" id="statCheckins">—</div><div class="stat-label">Total<br>Check-ins</div></div>
-      <div class="stat-card"><div class="stat-value" id="statTechs">—</div><div class="stat-label">Active<br>Technicians</div></div>
-    </div>
-
-    <!-- By Category -->
-    <div class="card">
-      <div class="card-title">By Category</div>
-      <div id="statsCategories"></div>
-    </div>
-
-    <!-- By Status -->
-    <div class="card">
-      <div class="card-title">By Status</div>
-      <div id="statsStatuses"></div>
-    </div>
-
-    <!-- By Make/Model -->
-    <div class="card">
-      <div class="card-title">By Make / Manufacturer</div>
-      <div id="statsMakes"></div>
-    </div>
-
-    <!-- High Visit Rate -->
-    <div class="card" id="highVisitCard">
-      <div class="card-title">🔝 Most Visited Assets</div>
-      <div id="highVisitList"></div>
-    </div>
-
-    <!-- Quick Actions -->
-    <div class="card">
-      <div class="card-title">Quick Actions</div>
-      <div class="quick-actions">
-        <button class="qa-btn" onclick="exportCSV('assets')"><span class="qa-icon">📋</span> Assets CSV</button>
-        <button class="qa-btn" onclick="exportCSV('checkins')"><span class="qa-icon">📍</span> Check-ins CSV</button>
-        <button class="qa-btn" onclick="exportCSV('service')"><span class="qa-icon">📊</span> Service Summary</button>
-        <button class="qa-btn" onclick="loadDashboard()"><span class="qa-icon">🔄</span> Refresh</button>
-      </div>
-    </div>
-
-    <!-- Recent Activity Feed -->
-    <div class="card">
-      <div class="card-title">📝 Recent Activity</div>
-      <div id="activityFeed"></div>
-      <div style="margin-top:8px;text-align:center;">
-        <a href="javascript:void(0)" onclick="loadFullActivity()" style="color:var(--accent2);font-size:13px;font-weight:600;text-decoration:none;">View All →</a>
-      </div>
-    </div>
-
-  </div>
-
-  <!-- ═══════════════════════════════════════════════════════════════════════
-       TAB: ACTIVITY FEED (Phase M)
-       ═══════════════════════════════════════════════════════════════════════ -->
-  <div id="tabActivity" class="tab-panel">
-    <div class="card">
-      <div class="card-title">📜 Activity Feed</div>
-      <div class="search-bar">
-        <input id="actSearch" type="text" class="input-field" placeholder="Search activity..." oninput="loadActivity()" style="margin-bottom:0;">
-        <button class="clear-btn" id="clearActSearch" onclick="document.getElementById('actSearch').value='';loadActivity();">✕</button>
-      </div>
-      <div class="act-filter-row">
-        <select id="actUserFilter" class="input-field" onchange="loadActivity()">
-          <option value="">All Users</option>
-        </select>
-        <select id="actTypeFilter" class="input-field" onchange="loadActivity()">
-          <option value="">All Actions</option>
-          <option value="created">✨ Created</option>
-          <option value="updated">✏️ Updated</option>
-          <option value="deleted">🗑️ Deleted</option>
-          <option value="checkin">✓ Check-in</option>
-        </select>
-      </div>
-      <div id="actList"></div>
-      <div class="act-pagination" id="actPagination"></div>
-    </div>
-  </div>
-
-  <!-- ═══════════════════════════════════════════════════════════════════════
-       TAB: REPORTS
-  <!-- ═══════════════════════════════════════════════════════════════════════
-       TAB: REPORTS
-       ═══════════════════════════════════════════════════════════════════════ -->
-  <div id="tabReports" class="tab-panel">
-
-    <!-- Service Summary -->
-    <div class="card">
-      <div class="card-title">Service Summary</div>
-      <div style="margin-bottom:10px;">
-        <div class="form-row" style="margin-bottom:8px;">
-          <input type="date" class="input-field" id="reportDateFrom" style="font-size:13px;">
-          <input type="date" class="input-field" id="reportDateTo" style="font-size:13px;">
-        </div>
-        <button class="btn btn-primary btn-sm" onclick="loadReports()">Generate Report</button>
-        <button class="btn btn-outline btn-sm" onclick="exportServiceSummary()">⬇ Download CSV</button>
-      </div>
-      <div class="stats-grid" id="reportSummaryCards" style="margin-bottom:10px;">
-        <div class="stat-card"><div class="stat-value" id="rptAssets">—</div><div class="stat-label">Assets Serviced</div></div>
-        <div class="stat-card"><div class="stat-value" id="rptVisits">—</div><div class="stat-label">Total Visits</div></div>
-        <div class="stat-card"><div class="stat-value" id="rptAvgTime">—</div><div class="stat-label">Avg Time on Site</div></div>
-        <div class="stat-card"><div class="stat-value" id="rptTechs">—</div><div class="stat-label">Technicians</div></div>
-      </div>
-      <div id="reportServiceTable"></div>
-    </div>
-
-    <!-- Visit Frequency -->
-    <div class="card">
-      <div class="card-title">Visit Frequency</div>
-      <div id="reportVisitTable"></div>
-    </div>
-
-    <!-- Time on Site -->
-    <div class="card">
-      <div class="card-title">Time on Site</div>
-      <div class="report-subtitle">Per Technician</div>
-      <div id="reportTimeTech"></div>
-      <div class="report-subtitle" style="margin-top:12px;">Per Asset</div>
-      <div id="reportTimeAsset"></div>
-    </div>
-  </div>
-
-  <!-- ═══════════════════════════════════════════════════════════════════════
-       TAB: SETTINGS
-       ═══════════════════════════════════════════════════════════════════════ -->
-  <div id="tabSettings" class="tab-panel">
-
-    <!-- Categories -->
-    <div class="card" data-entity="categories">
-      <div class="card-header">
-        <div class="card-title">📂 Categories</div>
-        <button class="btn btn-sm btn-outline admin-only" data-action="settingsAdd" data-entity="categories">+ Add</button>
-      </div>
-      <div id="settingsCategories" class="settings-list"></div>
-    </div>
-
-    <!-- Makes & Models -->
-    <div class="card" data-entity="makes">
-      <div class="card-header">
-        <div class="card-title">🏭 Makes &amp; Models</div>
-        <button class="btn btn-sm btn-outline admin-only" data-action="settingsAdd" data-entity="makes">+ Add Make</button>
-      </div>
-      <div id="settingsMakes" class="settings-list"></div>
-    </div>
-
-    <!-- Key Names -->
-    <div class="card" data-entity="key_names">
-      <div class="card-header">
-        <div class="card-title">🔑 Key Names</div>
-        <button class="btn btn-sm btn-outline admin-only" data-action="settingsAdd" data-entity="key_names">+ Add</button>
-      </div>
-      <div id="settingsKeyNames" class="settings-list"></div>
-    </div>
-
-    <!-- Key Types -->
-    <div class="card" data-entity="key_types">
-      <div class="card-header">
-        <div class="card-title">🔐 Key Types</div>
-        <button class="btn btn-sm btn-outline admin-only" data-action="settingsAdd" data-entity="key_types">+ Add</button>
-      </div>
-      <div id="settingsKeyTypes" class="settings-list"></div>
-    </div>
-
-    <!-- Badge Types -->
-    <div class="card" data-entity="badge_types">
-      <div class="card-header">
-        <div class="card-title">🪪 Security Badge Requirements</div>
-        <button class="btn btn-sm btn-outline admin-only" data-action="settingsAdd" data-entity="badge_types">+ Add</button>
-      </div>
-      <div id="settingsBadgeTypes" class="settings-list"></div>
-    </div>
-
-    <!-- User Accounts (admin only) -->
-    <div class="card admin-only" id="settingsUsersCard">
-      <div class="card-header">
-        <div class="card-title">👥 User Accounts</div>
-        <button class="btn btn-sm btn-outline" data-action="addUser">+ Add</button>
-      </div>
-      <div id="settingsUsers" class="settings-list"></div>
-    </div>
-
-    <!-- App Configuration -->
-    <div class="card">
-      <div class="card-title">⚙️ App Configuration</div>
-      <div class="settings-config">
-        <div class="setting-row">
-          <span>Theme</span>
-          <span class="setting-val">Dark</span>
-        </div>
-        <div class="setting-row">
-          <button class="btn btn-sm btn-danger admin-only" data-action="resetDatabase">🗑 Reset Database</button>
-        </div>
-        <div class="about-section">
-          <div class="about-text" style="font-size:12px;color:var(--text3);margin-top:12px;">
-            Canteen Asset Tracker v2.0<br>FastAPI + SQLite · Mobile-first
-          </div>
-        </div>
-      </div>
-    </div>
-
-  </div>
-
   <!-- ═══════════════════════════════════════════════════════════════════════
        BOTTOM TABS
        ═══════════════════════════════════════════════════════════════════════ -->
@@ -1978,9 +1212,6 @@
     <button class="tab-btn" data-tab="tabNavigate" onclick="switchTab('tabNavigate')">
       <span class="tab-icon">🧭</span> Nav
     </button>
-    <button class="tab-btn" data-tab="tabDashboard" onclick="switchTab('tabDashboard')">
-      <span class="tab-icon">📊</span> Dash
-    </button>
     <button class="tab-btn" data-tab="tabMore" onclick="openDrawer()">
       <span class="tab-icon">⋯</span> More
     </button>
@@ -2068,7 +1299,6 @@
     };
 
     function isLoggedIn() { return !!AppState.authToken; }
-    function isAdmin() { return AppState.currentUser && AppState.currentUser.role === 'admin'; }
     function isTechnician() { return AppState.currentUser && AppState.currentUser.role === 'technician'; }
 
     function updateUserUI() {
@@ -2097,11 +1327,6 @@
       const logoutBtn = document.getElementById('logoutBtn');
       if (logoutBtn) logoutBtn.style.display = isLoggedIn() ? 'flex' : 'none';
 
-      // Route guards: show/hide admin-only elements
-      document.querySelectorAll('.admin-only').forEach(el => {
-        el.style.display = isAdmin() ? '' : 'none';
-      });
-
       // Technician-only elements
       document.querySelectorAll('.tech-only').forEach(el => {
         el.style.display = isTechnician() ? '' : 'none';
@@ -2230,134 +1455,6 @@
       }
     });
 
-    // =========================================================================
-    // TECH OPTIONS: Load users for Assigned To dropdown (Phase M)
-    // =========================================================================
-    async function loadTechnicianOptions() {
-      try {
-        var users = await api('/api/users');
-        var sel = document.getElementById('editAssignedTo');
-        if (!sel) return;
-        var current = sel.value;
-        sel.innerHTML = '<option value="">Assigned To (none)</option>';
-        users.forEach(function(u) {
-          sel.innerHTML += '<option value="' + u.id + '">' + esc(u.username) + ' (' + u.role + ')</option>';
-        });
-        sel.value = current;
-      } catch (e) {
-        console.error('Failed to load users:', e);
-      }
-    }
-
-    // =========================================================================
-    // ACTIVITY FEED (Phase M)
-    // =========================================================================
-    var actPage = 0;
-    var ACT_PER_PAGE = 30;
-
-    var ACT_ICONS = {
-      created: '\u2728', updated: '\u270F\uFE0F', deleted: '\uD83D\uDDD1\uFE0F',
-      checkin: '\u2713', geofence: '\uD83D\uDCCD', customer: '\uD83C\uDFE2', user: '\uD83D\uDC64',
-    };
-
-    async function loadActivity() {
-      var userFilter = document.getElementById('actUserFilter').value;
-      var typeFilter = document.getElementById('actTypeFilter').value;
-      var searchQ = document.getElementById('actSearch').value.trim();
-      var clearBtn = document.getElementById('clearActSearch');
-      if (clearBtn) clearBtn.style.display = searchQ ? 'block' : 'none';
-
-      clearTimeout(loadActivity._debounce);
-      loadActivity._debounce = setTimeout(function() { _loadActivity(userFilter, typeFilter, searchQ); }, 200);
-    }
-
-    async function _loadActivity(userFilter, typeFilter, searchQ) {
-      var params = new URLSearchParams();
-      if (userFilter) params.set('user_id', userFilter);
-      if (typeFilter) params.set('entity_type', typeFilter);
-      params.set('limit', String(ACT_PER_PAGE));
-      params.set('offset', String(actPage * ACT_PER_PAGE));
-
-      try {
-        var items = await api('/api/activity?' + params.toString());
-
-        if (searchQ) {
-          var q = searchQ.toLowerCase();
-          items = items.filter(function(a) {
-            return (a.details && a.details.toLowerCase().indexOf(q) !== -1) ||
-                   (a.user_name && a.user_name.toLowerCase().indexOf(q) !== -1) ||
-                   (a.entity_type && a.entity_type.toLowerCase().indexOf(q) !== -1);
-          });
-        }
-
-        renderActivity(items);
-        renderActivityPagination(items.length);
-      } catch (e) {
-        document.getElementById('actList').innerHTML =
-          '<div class="empty-state">Failed to load activity</div>';
-      }
-    }
-
-    function renderActivity(items) {
-      var el = document.getElementById('actList');
-      if (!items.length) {
-        el.innerHTML = '<div class="empty-state">No activity yet</div>';
-        return;
-      }
-      el.innerHTML = items.map(function(a) {
-        var icon = ACT_ICONS[a.action] || '\uD83D\uDCCC';
-        var cssClass = a.action || 'other';
-        var text = a.details || (a.action + ' ' + a.entity_type + ' #' + a.entity_id);
-        var html = '<div class="activity-item">';
-        html += '<div class="act-icon ' + cssClass + '">' + icon + '</div>';
-        html += '<div class="act-info">';
-        html += '<div class="act-text">' + esc(text) + '</div>';
-        html += '<div class="act-time">' + timeAgo(a.created_at) + '</div>';
-        if (a.user_name) html += '<div class="act-user">by ' + esc(a.user_name) + '</div>';
-        html += '</div></div>';
-        return html;
-      }).join('');
-    }
-
-    function renderActivityPagination(count) {
-      var el = document.getElementById('actPagination');
-      var html = '';
-      if (actPage > 0) {
-        html += '<button class="btn btn-outline btn-sm" onclick="actPage--;loadActivity();">\u2190 Newer</button>';
-      }
-      if (count >= ACT_PER_PAGE) {
-        html += '<button class="btn btn-outline btn-sm" onclick="actPage++;loadActivity();">Older \u2192</button>';
-      }
-      el.innerHTML = html;
-    }
-
-    async function loadActivityUserFilter() {
-      try {
-        var users = await api('/api/users');
-        var sel = document.getElementById('actUserFilter');
-        if (!sel) return;
-        users.forEach(function(u) {
-          sel.innerHTML += '<option value="' + u.id + '">' + esc(u.username) + '</option>';
-        });
-      } catch (e) {
-        console.error('Failed to load user filter:', e);
-      }
-    }
-
-    // =========================================================================
-    // TECHNICIAN VIEW: My Assets (Phase M)
-    // =========================================================================
-    function showMyAssets() {
-      if (!isTechnician() || !AppState.currentUser) {
-        showToast('Only available for technicians', true);
-        return;
-      }
-      AppState._myAssetsFilter = AppState.currentUser.id;
-      assetFilters.assigned_to = AppState.currentUser.id;
-      switchTab('tabAssets');
-      loadAssets();
-    }
-
     // =========================================================================
     // GPS
     // =========================================================================
@@ -2476,7 +1573,6 @@
         tabAssets: 'tabAssets',
         tabMap: 'tabMap',
         tabNavigate: 'tabNavigate',
-        tabDashboard: 'tabDashboard',
       };
       const bottomTab = tabMap[tabId] || 'tabMore';
       document.querySelectorAll('.tab-btn').forEach(b => {
@@ -2492,13 +1588,10 @@
       if (tabId === 'tabAddAsset') startScanning();
       else stopScanning();
 
-      if (tabId === 'tabAssets') { loadAssets(); loadTechnicianOptions(); }
-      if (tabId === 'tabDashboard') loadDashboard();
-      if (tabId === 'tabActivity') { loadActivity(); loadActivityUserFilter(); }
+      if (tabId === 'tabAssets') { loadAssets(); }
 
       // Map tab lifecycle
       if (tabId === 'tabMap') {
-        initMap();
         if (map) {
           setTimeout(() => map.invalidateSize(), 150);
           loadAssetPins();  // Refresh pins on every tab visit
@@ -2506,9 +1599,7 @@
         startVisitTracking();
       } else {
         stopVisitTracking();
-        if (drawingGeofence) cancelGeofenceDraw();
       }
-      if (tabId === 'tabReports') loadReports();
 
       // Dispatch event so child tab implementations can hook in
       document.dispatchEvent(new CustomEvent('tabChange', { detail: { tabId } }));
@@ -2709,32 +1800,35 @@
       showToast('Photo loaded into Manual mode');
     }
 
-    // ── Shared: Load settings dropdowns ─────────────────────────────────────
+    // ── Shared: Load settings dropdowns (hardcoded defaults — managed via admin app) ──
     async function loadSettingsCache() {
-      if (settingsCache._loaded) return; // already loaded successfully
-      try {
-        const [cats, makes, models, keyNames, keyTypes, badgeTypes, customers] = await Promise.all([
-          api('/api/settings/categories'),
-          api('/api/settings/makes'),
-          api('/api/settings/models'),
-          api('/api/settings/key_names'),
-          api('/api/settings/key_types'),
-          api('/api/settings/badge_types'),
-          api('/api/customers'),
-        ]);
-        settingsCache.categories = cats || [];
-        settingsCache.makes = makes || [];
-        settingsCache.models = models || [];
-        settingsCache.keyNames = keyNames || [];
-        settingsCache.keyTypes = keyTypes || [];
-        settingsCache.badgeTypes = badgeTypes || [];
-        settingsCache.customers = customers || [];
-        settingsCache._loaded = true;
-      } catch (e) {
-        console.error('Failed to load settings:', e);
-        // Don't cache empty results — leave fields undefined so retries work
-        settingsCache._loaded = false;
-      }
+      if (settingsCache._loaded) return;
+      // Hardcoded seed data matches the admin app's defaults
+      settingsCache.categories = [
+        {name:'Furniture',icon:'🪑'}, {name:'Appliances',icon:'🔌'},
+        {name:'Utensils & Serveware',icon:'🍽️'}, {name:'Equipment',icon:'⚙️'},
+        {name:'Other',icon:'📦'},
+      ];
+      settingsCache.makes = [
+        {id:1,name:'Canteen'}, {id:2,name:'Hobart'}, {id:3,name:'Vollrath'},
+        {id:4,name:'Metro'}, {id:5,name:'Rubbermaid'}, {id:6,name:'Cambro'},
+        {id:7,name:'Other'},
+      ];
+      settingsCache.models = [];
+      settingsCache.keyNames = [
+        {name:'MK500'}, {name:'Green Dot'}, {name:'Red Key'}, {name:'Blue Key'},
+        {name:'Master Key'}, {name:'Padlock Key'},
+      ];
+      settingsCache.keyTypes = [
+        {name:'Round Short'}, {name:'Barrel'}, {name:'Standard'},
+        {name:'Flat'}, {name:'Tubular'},
+      ];
+      settingsCache.badgeTypes = [
+        {name:'Disney Contractor Base'}, {name:'Visitor Badge'}, {name:'Employee Badge'},
+        {name:'Contractor Badge'}, {name:'Temporary Pass'},
+      ];
+      settingsCache.customers = [];
+      settingsCache._loaded = true;
     }
 
     function populateCategorySelect(selectId) {
@@ -2775,10 +1869,9 @@
       const sel = document.getElementById('manLocation');
       sel.innerHTML = '<option value="">Location</option>';
       if (!custId) return;
+      // Locations managed via admin app
       try {
-        const locs = await api(`/api/locations?customer_id=${custId}`);
-        sel.innerHTML += (locs || []).map(l =>
-          `<option value="${l.id}">${esc(l.name)}</option>`).join('');
+        sel.innerHTML += '<option value="">No locations (manage in admin app)</option>';
       } catch (e) { /* ignore */ }
     }
 
@@ -3785,11 +2878,11 @@
         // Customer / Location / Technician
         if (a.customer_name) {
           document.getElementById('detailFields').innerHTML += df('Customer',
-            `<span class="df-link" onclick="switchTab('tabCustomers')">${esc(a.customer_name)}</span>`);
+            esc(a.customer_name));
         }
         if (a.location_name) {
           document.getElementById('detailFields').innerHTML += df('Location',
-            `<span class="df-link" onclick="switchTab('tabCustomers')">${esc(a.location_name)}</span>`);
+            esc(a.location_name));
         }
         if (a.assigned_to) {
           var techName = a.assigned_user || ('ID: ' + a.assigned_to);
@@ -4074,12 +3167,11 @@
         const a = await api('/api/assets/' + AppState.currentAssetId);
         showEditView();
         document.getElementById('editFormCard').innerHTML = renderEditForm(a);
-        // Phase M: set assigned_to value after DOM is ready
+        // Assigned To user dropdown (users managed via admin app)
         setTimeout(function() {
           var sel = document.getElementById('editAssignedTo');
           if (sel && a.assigned_to) sel.value = a.assigned_to;
         }, 0);
-        loadTechnicianOptions();
       } catch (e) {
         showToast(e.message, true);
       }
@@ -4315,1534 +3407,6 @@
       showToast('Import complete: ' + created + ' created, ' + skipped + ' skipped, ' + errors.length + ' errors');
     }
 
-    // ═══════════════════════════════════════════════════════════════════════
-    // CUSTOMERS & LOCATIONS TAB
-    // ═══════════════════════════════════════════════════════════════════════
-    const CustState = {
-      view: 'list',          // list | detail | form | locations | loc-detail | loc-form
-      custId: null,
-      locId: null,
-      allCusts: [],
-      allLocs: {},           // { custId: [locations] }
-      formMode: 'create',    // 'create' | 'edit'
-      locFormMode: 'create', // 'create' | 'edit'
-      formContacts: [],      // [{name, phone, email}]
-    };
-
-    // ── View management ───────────────────────────────────────────────────
-    function showCustView(name) {
-      const views = ['custListView','custDetailView','custFormView','locListView','locDetailView','locFormView'];
-      views.forEach(v => { const el = document.getElementById(v); if (el) el.style.display = 'none'; });
-      const active = document.getElementById(name);
-      if (active) active.style.display = 'block';
-      CustState.view = name === 'custListView' ? 'list'
-        : name === 'custDetailView' ? 'detail'
-        : name === 'custFormView' ? 'form'
-        : name === 'locListView' ? 'locations'
-        : name === 'locDetailView' ? 'loc-detail'
-        : name === 'locFormView' ? 'loc-form' : 'list';
-    }
-
-    // ── Customers List ────────────────────────────────────────────────────
-    async function loadCustomers() {
-      if (AppState.currentTab !== 'tabCustomers') return;
-      const q = (document.getElementById('custSearch').value || '').trim().toLowerCase();
-      const clearBtn = document.getElementById('clearCustSearch');
-      if (clearBtn) clearBtn.style.display = q ? 'block' : 'none';
-
-      try {
-        const custs = await api('/api/customers');
-        CustState.allCusts = custs;
-
-        // Fetch all locations to get counts
-        try {
-          const allLocs = await api('/api/locations');
-          CustState.allLocs = {};
-          allLocs.forEach(l => {
-            const cid = l.customer_id;
-            if (cid) {
-              if (!CustState.allLocs[cid]) CustState.allLocs[cid] = [];
-              CustState.allLocs[cid].push(l);
-            }
-          });
-        } catch (e) { CustState.allLocs = {}; }
-
-        renderCustList(q);
-      } catch (e) {
-        document.getElementById('custList').innerHTML =
-          '<div class="empty-state">Failed to load customers: ' + esc(e.message) + '</div>';
-      }
-    }
-
-    function renderCustList(query) {
-      let custs = CustState.allCusts;
-      if (query) {
-        custs = custs.filter(c => c.name.toLowerCase().includes(query));
-      }
-      const el = document.getElementById('custList');
-      if (!custs.length) {
-        el.innerHTML = '<div class="empty-state"><div class="es-icon">🏢</div>No customers found</div>';
-        return;
-      }
-      el.innerHTML = custs.map(c => {
-        const locCount = (CustState.allLocs[c.id] || []).length;
-        const firstContact = (c.contacts && c.contacts.length) ? c.contacts[0] : null;
-        const contactInfo = firstContact
-          ? [firstContact.phone, firstContact.email].filter(Boolean).join(' · ') || firstContact.name
-          : '';
-        return `
-        <div class="cust-card" onclick="viewCustomer(${c.id})">
-          <div class="cc-icon">🏢</div>
-          <div class="cc-info">
-            <div class="cc-name">${esc(c.name)}</div>
-            <div class="cc-meta">
-              ${locCount} location${locCount !== 1 ? 's' : ''}
-              ${contactInfo ? ' · ' + esc(contactInfo) : ''}
-            </div>
-          </div>
-          <div class="cc-arrow">›</div>
-        </div>`;
-      }).join('');
-    }
-
-    function clearCustSearch() {
-      document.getElementById('custSearch').value = '';
-      loadCustomers();
-    }
-
-    function showCustList() {
-      showCustView('custListView');
-      loadCustomers();
-    }
-
-    // ── Customer Detail ───────────────────────────────────────────────────
-    async function viewCustomer(id) {
-      CustState.custId = id;
-      try {
-        const cust = await api(`/api/customers/${id}`);
-        const locs = CustState.allLocs[id] || [];
-
-        showCustView('custDetailView');
-        document.getElementById('custDetailName').textContent = cust.name;
-
-        // Contacts
-        const contactsEl = document.getElementById('custContactsList');
-        if (!cust.contacts || !cust.contacts.length) {
-          contactsEl.innerHTML = '<div class="empty-state">No contacts added</div>';
-        } else {
-          contactsEl.innerHTML = cust.contacts.map(c => `
-            <div class="contact-disp">
-              <div class="cd-icon">👤</div>
-              <div class="cd-info">
-                <div class="cd-name">${esc(c.name || 'Unnamed')}</div>
-                <div class="cd-detail">
-                  ${c.phone ? `<a href="tel:${esc(c.phone)}">📞 ${esc(c.phone)}</a>` : ''}
-                  ${c.phone && c.email ? ' · ' : ''}
-                  ${c.email ? `<a href="mailto:${esc(c.email)}">📧 ${esc(c.email)}</a>` : ''}
-                </div>
-              </div>
-            </div>
-          `).join('');
-        }
-
-        // Locations
-        document.getElementById('custLocCount').textContent = locs.length ? `(${locs.length})` : '';
-        const locsEl = document.getElementById('custLocationsList');
-        if (!locs.length) {
-          locsEl.innerHTML = '<div class="empty-state">No locations for this customer</div>';
-        } else {
-          locsEl.innerHTML = locs.map(l => `
-            <div class="loc-card" onclick="event.stopPropagation();viewLocation(${l.id})">
-              <div class="lc-icon">📍</div>
-              <div class="lc-info">
-                <div class="lc-name">${esc(l.name)}</div>
-                <div class="lc-meta">${esc(l.address || '')}${l.building_name ? ' · ' + esc(l.building_name) : ''}</div>
-              </div>
-              <div class="lc-arrow">›</div>
-            </div>
-          `).join('') +
-          `<button class="btn btn-outline btn-sm" onclick="event.stopPropagation();showLocFormForCust(${id})" style="width:100%;margin-top:8px;">+ Add Location</button>`;
-        }
-      } catch (e) {
-        showToast(e.message, true);
-        showCustList();
-      }
-    }
-
-    // ── Customer Form (Create/Edit) ───────────────────────────────────────
-    function showCustForm() {
-      CustState.formMode = 'create';
-      CustState.custId = null;
-      CustState.formContacts = [];
-      showCustView('custFormView');
-      document.getElementById('custFormTitle').textContent = 'New Customer';
-      document.getElementById('custFormName').value = '';
-      document.getElementById('custFormSaveBtn').textContent = 'Save Customer';
-      renderContactForm();
-    }
-
-    async function editCustomer() {
-      try {
-        const cust = await api(`/api/customers/${CustState.custId}`);
-        CustState.formMode = 'edit';
-        CustState.formContacts = (cust.contacts || []).map(c => ({ name: c.name || '', phone: c.phone || '', email: c.email || '' }));
-        showCustView('custFormView');
-        document.getElementById('custFormTitle').textContent = 'Edit Customer';
-        document.getElementById('custFormName').value = cust.name;
-        document.getElementById('custFormSaveBtn').textContent = 'Update Customer';
-        renderContactForm();
-      } catch (e) {
-        showToast(e.message, true);
-      }
-    }
-
-    function cancelCustForm() {
-      showCustView(CustState.formMode === 'edit' ? 'custDetailView' : 'custListView');
-    }
-
-    function renderContactForm() {
-      const el = document.getElementById('custFormContacts');
-      if (!CustState.formContacts.length) {
-        CustState.formContacts.push({ name: '', phone: '', email: '' });
-      }
-      el.innerHTML = CustState.formContacts.map((c, i) => `
-        <div class="contact-row">
-          ${CustState.formContacts.length > 1 ? `<button class="cr-remove" onclick="removeContact(${i})">✕</button>` : ''}
-          <input type="text" class="input-field" placeholder="Contact name" value="${esc(c.name)}" oninput="updateContact(${i},'name',this.value)" style="margin-bottom:0;">
-          <div class="form-row" style="margin-bottom:0;">
-            <input type="tel" class="input-field" placeholder="Phone" value="${esc(c.phone)}" oninput="updateContact(${i},'phone',this.value)" style="margin-bottom:0;">
-            <input type="email" class="input-field" placeholder="Email" value="${esc(c.email)}" oninput="updateContact(${i},'email',this.value)" style="margin-bottom:0;">
-          </div>
-        </div>
-      `).join('');
-    }
-
-    function addContactRow() {
-      CustState.formContacts.push({ name: '', phone: '', email: '' });
-      renderContactForm();
-    }
-
-    function removeContact(i) {
-      if (CustState.formContacts.length <= 1) return;
-      CustState.formContacts.splice(i, 1);
-      renderContactForm();
-    }
-
-    function updateContact(i, field, value) {
-      CustState.formContacts[i][field] = value;
-    }
-
-    async function saveCustomer() {
-      const name = document.getElementById('custFormName').value.trim();
-      if (!name) { showToast('Customer name is required', true); return; }
-
-      const contacts = CustState.formContacts
-        .filter(c => c.name || c.phone || c.email)
-        .map(c => ({ name: c.name.trim(), phone: c.phone.trim(), email: c.email.trim() }));
-
-      const payload = { name, contacts };
-
-      try {
-        if (CustState.formMode === 'create') {
-          const cust = await api('/api/customers', {
-            method: 'POST', headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(payload),
-          });
-          showToast('Customer created!');
-          CustState.custId = cust.id;
-          await loadCustomers();
-          viewCustomer(cust.id);
-        } else {
-          await api(`/api/customers/${CustState.custId}`, {
-            method: 'PUT', headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(payload),
-          });
-          showToast('Customer updated!');
-          await loadCustomers();
-          viewCustomer(CustState.custId);
-        }
-      } catch (e) {
-        showToast(e.message, true);
-      }
-    }
-
-    async function deleteCustomer() {
-      const cust = await api(`/api/customers/${CustState.custId}`);
-      const confirmed = await showModal(
-        'Delete Customer',
-        `Delete "${cust.name}" and all its locations? This cannot be undone.`,
-        'Delete'
-      );
-      if (!confirmed) return;
-      try {
-        await api(`/api/customers/${CustState.custId}`, { method: 'DELETE' });
-        showToast('Customer deleted');
-        showCustList();
-      } catch (e) {
-        showToast(e.message, true);
-      }
-    }
-
-    // ── Locations: List for a Customer ────────────────────────────────────
-    async function showLocationsForCust(custId) {
-      CustState.custId = custId;
-      try {
-        const cust = await api(`/api/customers/${custId}`);
-        const locs = CustState.allLocs[custId] || [];
-        showCustView('locListView');
-        document.getElementById('locListCustName').textContent = cust.name;
-        renderLocList(locs);
-      } catch (e) {
-        showToast(e.message, true);
-      }
-    }
-
-    function renderLocList(locs) {
-      const el = document.getElementById('locList');
-      if (!locs.length) {
-        el.innerHTML = '<div class="empty-state">No locations for this customer</div>';
-        return;
-      }
-      el.innerHTML = locs.map(l => `
-        <div class="loc-card" onclick="viewLocation(${l.id})">
-          <div class="lc-icon">📍</div>
-          <div class="lc-info">
-            <div class="lc-name">${esc(l.name)}</div>
-            <div class="lc-meta">${esc(l.address || '')}${l.building_name ? ' · ' + esc(l.building_name) : ''}${(l.rooms || []).length ? ' · ' + l.rooms.length + ' room' + (l.rooms.length !== 1 ? 's' : '') : ''}</div>
-          </div>
-          <div class="lc-arrow">›</div>
-        </div>
-      `).join('');
-    }
-
-    // ── Location Detail ───────────────────────────────────────────────────
-    async function viewLocation(locId) {
-      CustState.locId = locId;
-      try {
-        const loc = await api(`/api/locations/${locId}`);
-        showCustView('locDetailView');
-
-        // Find customer name
-        const cust = CustState.allCusts.find(c => c.id === loc.customer_id);
-        document.getElementById('locDetailName').textContent = loc.name;
-        document.getElementById('locDetailCust').textContent = cust ? cust.name : '';
-
-        const fields = [
-          ['Address', loc.address],
-          ['Building Name', loc.building_name],
-          ['Building Number', loc.building_number],
-          ['Floor', loc.floor],
-          ['Trailer Number', loc.trailer_number],
-          ['Site Hours', loc.site_hours],
-          ['Access Notes', loc.access_notes],
-          ['Walking Directions', loc.walking_directions],
-        ];
-
-        let html = '';
-        fields.forEach(([label, val]) => {
-          if (val) {
-            html += `<div class="detail-field"><div class="df-label">${label}</div><div class="df-value">${esc(val)}</div></div>`;
-          }
-        });
-
-        if (loc.map_link) {
-          html += `<div class="detail-field">
-            <div class="df-label">Map Link</div>
-            <div class="df-value"><a href="${esc(loc.map_link)}" target="_blank" rel="noopener" style="color:var(--accent2);">🗺️ Get Directions</a></div>
-          </div>`;
-        }
-
-        if (!fields.some(([,v]) => v) && !loc.map_link) {
-          html = '<div class="empty-state">No additional details</div>';
-        }
-
-        document.getElementById('locDetailFields').innerHTML = html;
-
-        // Rooms
-        renderRoomsList(loc.rooms || []);
-      } catch (e) {
-        showToast(e.message, true);
-        showCustList();
-      }
-    }
-
-    function backFromLocDetail() {
-      // Go back to wherever we came from (customer detail or locations list)
-      if (CustState.custId) {
-        viewCustomer(CustState.custId);
-      } else {
-        showCustList();
-      }
-    }
-
-    // ── Location Form (Create/Edit) ──────────────────────────────────────
-    async function showLocForm() {
-      CustState.locFormMode = 'create';
-      CustState.locId = null;
-      await populateCustomerSelect();
-      showCustView('locFormView');
-      document.getElementById('locFormTitle').textContent = 'New Location';
-      document.getElementById('locFormSaveBtn').textContent = 'Save Location';
-      clearLocForm();
-      // Pre-select customer if we're in the context of one
-      if (CustState.custId) {
-        document.getElementById('locFormCustomer').value = CustState.custId;
-      }
-    }
-
-    function showLocFormForCust(custId) {
-      CustState.custId = custId;
-      showLocForm();
-    }
-
-    async function editLocation() {
-      try {
-        const loc = await api(`/api/locations/${CustState.locId}`);
-        CustState.locFormMode = 'edit';
-        await populateCustomerSelect();
-        showCustView('locFormView');
-        document.getElementById('locFormTitle').textContent = 'Edit Location';
-        document.getElementById('locFormSaveBtn').textContent = 'Update Location';
-        document.getElementById('locFormCustomer').value = loc.customer_id || '';
-        document.getElementById('locFormName').value = loc.name || '';
-        document.getElementById('locFormAddress').value = loc.address || '';
-        document.getElementById('locFormBldgName').value = loc.building_name || '';
-        document.getElementById('locFormBldgNum').value = loc.building_number || '';
-        document.getElementById('locFormFloor').value = loc.floor || '';
-        document.getElementById('locFormTrailer').value = loc.trailer_number || '';
-        document.getElementById('locFormSiteHours').value = loc.site_hours || '';
-        document.getElementById('locFormAccess').value = loc.access_notes || '';
-        document.getElementById('locFormWalking').value = loc.walking_directions || '';
-        document.getElementById('locFormMapLink').value = loc.map_link || '';
-      } catch (e) {
-        showToast(e.message, true);
-      }
-    }
-
-    function clearLocForm() {
-      document.getElementById('locFormName').value = '';
-      document.getElementById('locFormAddress').value = '';
-      document.getElementById('locFormBldgName').value = '';
-      document.getElementById('locFormBldgNum').value = '';
-      document.getElementById('locFormFloor').value = '';
-      document.getElementById('locFormTrailer').value = '';
-      document.getElementById('locFormSiteHours').value = '';
-      document.getElementById('locFormAccess').value = '';
-      document.getElementById('locFormWalking').value = '';
-      document.getElementById('locFormMapLink').value = '';
-    }
-
-    function cancelLocForm() {
-      if (CustState.locFormMode === 'edit') {
-        viewLocation(CustState.locId);
-      } else if (CustState.custId) {
-        showLocationsForCust(CustState.custId);
-      } else {
-        showCustList();
-      }
-    }
-
-    async function populateCustomerSelect() {
-      const sel = document.getElementById('locFormCustomer');
-      const currentVal = sel.value;
-      sel.innerHTML = '<option value="">Select customer *</option>';
-      try {
-        const custs = await api('/api/customers');
-        custs.forEach(c => {
-          const opt = document.createElement('option');
-          opt.value = c.id;
-          opt.textContent = c.name;
-          sel.appendChild(opt);
-        });
-        if (currentVal) sel.value = currentVal;
-      } catch (e) { /* ignore */ }
-    }
-
-    async function saveLocation() {
-      const custId = parseInt(document.getElementById('locFormCustomer').value);
-      const name = document.getElementById('locFormName').value.trim();
-      if (!custId) { showToast('Please select a customer', true); return; }
-      if (!name) { showToast('Location name is required', true); return; }
-
-      const payload = {
-        customer_id: custId,
-        name,
-        address: document.getElementById('locFormAddress').value.trim(),
-        building_name: document.getElementById('locFormBldgName').value.trim(),
-        building_number: document.getElementById('locFormBldgNum').value.trim(),
-        floor: document.getElementById('locFormFloor').value.trim(),
-        trailer_number: document.getElementById('locFormTrailer').value.trim(),
-        site_hours: document.getElementById('locFormSiteHours').value.trim(),
-        access_notes: document.getElementById('locFormAccess').value.trim(),
-        walking_directions: document.getElementById('locFormWalking').value.trim(),
-        map_link: document.getElementById('locFormMapLink').value.trim(),
-      };
-
-      try {
-        if (CustState.locFormMode === 'create') {
-          const loc = await api('/api/locations', {
-            method: 'POST', headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(payload),
-          });
-          showToast('Location created!');
-          CustState.locId = loc.id;
-          // Refresh location cache
-          try {
-            const allLocs = await api('/api/locations');
-            CustState.allLocs = {};
-            allLocs.forEach(l => {
-              const cid = l.customer_id;
-              if (cid) {
-                if (!CustState.allLocs[cid]) CustState.allLocs[cid] = [];
-                CustState.allLocs[cid].push(l);
-              }
-            });
-          } catch (e) { /* ignore */ }
-          viewLocation(loc.id);
-        } else {
-          await api(`/api/locations/${CustState.locId}`, {
-            method: 'PUT', headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(payload),
-          });
-          showToast('Location updated!');
-          viewLocation(CustState.locId);
-        }
-      } catch (e) {
-        showToast(e.message, true);
-      }
-    }
-
-    async function deleteLocation() {
-      const loc = await api(`/api/locations/${CustState.locId}`);
-      const confirmed = await showModal(
-        'Delete Location',
-        `Delete "${loc.name}" and all its rooms? This cannot be undone.`,
-        'Delete'
-      );
-      if (!confirmed) return;
-      try {
-        await api(`/api/locations/${CustState.locId}`, { method: 'DELETE' });
-        showToast('Location deleted');
-        // Refresh cache
-        try {
-          const allLocs = await api('/api/locations');
-          CustState.allLocs = {};
-          allLocs.forEach(l => {
-            const cid = l.customer_id;
-            if (cid) {
-              if (!CustState.allLocs[cid]) CustState.allLocs[cid] = [];
-              CustState.allLocs[cid].push(l);
-            }
-          });
-        } catch (e) { /* ignore */ }
-        if (CustState.custId) {
-          viewCustomer(CustState.custId);
-        } else {
-          showCustList();
-        }
-      } catch (e) {
-        showToast(e.message, true);
-      }
-    }
-
-    // ── Rooms ─────────────────────────────────────────────────────────────
-    function renderRoomsList(rooms) {
-      document.getElementById('roomCount').textContent = rooms.length ? `(${rooms.length})` : '';
-      const el = document.getElementById('roomsList');
-      if (!rooms.length) {
-        el.innerHTML = '<div class="empty-state">No rooms added yet</div>';
-        return;
-      }
-      // Store room data for safe access by edit handlers
-      rooms.forEach(r => { CustState._roomData = CustState._roomData || {}; CustState._roomData[r.id] = r; });
-      el.innerHTML = rooms.map(r => `
-        <div class="room-item" id="roomRow${r.id}">
-          <span class="ri-name">🚪 ${esc(r.name)}</span>
-          ${r.floor ? `<span class="ri-floor">Floor ${esc(r.floor)}</span>` : ''}
-          <span class="ri-actions">
-            <button class="ri-btn edit" onclick="startEditRoom(${r.id})" title="Edit">✏️</button>
-            <button class="ri-btn del" onclick="deleteRoom(${r.id})" title="Delete">🗑️</button>
-          </span>
-        </div>
-      `).join('');
-    }
-
-    async function addRoom() {
-      const name = document.getElementById('newRoomName').value.trim();
-      if (!name) { showToast('Room name is required', true); return; }
-      const floor = document.getElementById('newRoomFloor').value.trim();
-
-      try {
-        await api('/api/rooms', {
-          method: 'POST', headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ location_id: CustState.locId, name, floor }),
-        });
-        showToast('Room added!');
-        document.getElementById('newRoomName').value = '';
-        document.getElementById('newRoomFloor').value = '';
-        viewLocation(CustState.locId); // refresh
-      } catch (e) {
-        showToast(e.message, true);
-      }
-    }
-
-    function startEditRoom(roomId) {
-      const data = CustState._roomData && CustState._roomData[roomId];
-      if (!data) return;
-      const row = document.getElementById('roomRow' + roomId);
-      if (!row) return;
-      row.innerHTML = `
-        <div class="room-edit-row" style="width:100%;">
-          <input id="editRoomName${roomId}" type="text" class="input-field" value="${esc(data.name)}" placeholder="Room name" style="flex:2;">
-          <input id="editRoomFloor${roomId}" type="text" class="input-field" value="${esc(data.floor||'')}" placeholder="Floor" style="flex:1;">
-          <button class="btn btn-green btn-sm" onclick="saveEditRoom(${roomId})">✓</button>
-          <button class="btn btn-outline btn-sm" onclick="viewLocation(${CustState.locId})">✕</button>
-        </div>
-      `;
-      document.getElementById('editRoomName' + roomId).focus();
-    }
-
-    async function saveEditRoom(roomId) {
-      const name = document.getElementById('editRoomName' + roomId).value.trim();
-      if (!name) { showToast('Room name is required', true); return; }
-      const floor = document.getElementById('editRoomFloor' + roomId).value.trim();
-
-      try {
-        await api(`/api/rooms/${roomId}`, {
-          method: 'PUT', headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ name, floor }),
-        });
-        showToast('Room updated!');
-        viewLocation(CustState.locId); // refresh
-      } catch (e) {
-        showToast(e.message, true);
-      }
-    }
-
-    async function deleteRoom(roomId) {
-      const confirmed = await showModal(
-        'Delete Room',
-        'Delete this room? This cannot be undone.',
-        'Delete'
-      );
-      if (!confirmed) return;
-      try {
-        await api(`/api/rooms/${roomId}`, { method: 'DELETE' });
-        showToast('Room deleted');
-        viewLocation(CustState.locId); // refresh
-      } catch (e) {
-        showToast(e.message, true);
-      }
-    }
-
-    // ── Hook into tab switching ───────────────────────────────────────────
-    document.addEventListener('tabChange', function(e) {
-      if (e.detail && e.detail.tabId === 'tabCustomers') {
-        if (CustState.view === 'list' || !CustState.view) {
-          showCustList();
-        }
-      }
-    });
-
-    // ═══════════════════════════════════════════════════════════════════════
-    // DASHBOARD TAB
-    // ═══════════════════════════════════════════════════════════════════════
-    async function loadDashboard() {
-      try {
-        // Fetch stats and activity in parallel
-        const [stats, activity] = await Promise.all([
-          api('/api/stats'),
-          api('/api/activity?limit=15'),
-        ]);
-
-        // --- Stat cards ---
-        document.getElementById('statAssets').textContent = stats.total_assets || 0;
-        document.getElementById('statCheckins').textContent = stats.total_checkins || 0;
-        const activeTechs = (stats.time_on_site && stats.time_on_site.length) || 0;
-        document.getElementById('statTechs').textContent = activeTechs;
-
-        // --- By Category ---
-        const catEntries = Object.entries(stats.by_category || {});
-        const maxCat = Math.max(1, ...catEntries.map(([, c]) => c));
-        document.getElementById('statsCategories').innerHTML = catEntries.length
-          ? catEntries.map(([cat, cnt]) => `
-            <div class="stat-bar">
-              <span class="sb-label">${esc(cat)}</span>
-              <div class="sb-track"><div class="sb-fill" style="width:${(cnt/maxCat*100).toFixed(0)}%;"></div></div>
-              <span class="sb-count">${cnt}</span>
-            </div>
-          `).join('')
-          : '<div class="empty-state">No data</div>';
-
-        // --- By Status ---
-        const statEntries = Object.entries(stats.by_status || {});
-        const maxStat = Math.max(1, ...statEntries.map(([, c]) => c));
-        document.getElementById('statsStatuses').innerHTML = statEntries.length
-          ? statEntries.map(([st, cnt]) => {
-              const color = st === 'active' ? 'var(--green)' : st === 'maintenance' ? 'var(--amber)' : 'var(--red)';
-              return `
-            <div class="stat-bar">
-              <span class="sb-label">${esc(st)}</span>
-              <div class="sb-track"><div class="sb-fill" style="width:${(cnt/maxStat*100).toFixed(0)}%;background:${color};"></div></div>
-              <span class="sb-count">${cnt}</span>
-            </div>`;
-            }).join('')
-          : '<div class="empty-state">No data</div>';
-
-        // --- By Make ---
-        const makeEntries = Object.entries(stats.by_make || {});
-        const maxMake = Math.max(1, ...makeEntries.map(([, c]) => c));
-        document.getElementById('statsMakes').innerHTML = makeEntries.length
-          ? makeEntries.map(([make, cnt]) => `
-            <div class="stat-bar">
-              <span class="sb-label">${esc(make)}</span>
-              <div class="sb-track"><div class="sb-fill" style="width:${(cnt/maxMake*100).toFixed(0)}%;background:var(--accent2);"></div></div>
-              <span class="sb-count">${cnt}</span>
-            </div>
-          `).join('')
-          : '<div class="empty-state">No manufacturer data</div>';
-
-        // --- High Visit Rate ---
-        const topVisited = stats.top_visited || [];
-        document.getElementById('highVisitList').innerHTML = topVisited.length
-          ? topVisited.map((v, i) => {
-              const rank = i + 1;
-              const rankCls = rank === 1 ? 'r1' : rank <= 3 ? 'r2' : 'rn';
-              const lastDate = v.last_visit_date ? formatDate(v.last_visit_date) : '—';
-              return `
-            <div class="hv-row" onclick="navToAsset('${esc(v.machine_id || '')}')">
-              <div class="hv-rank ${rankCls}">${rank}</div>
-              <div class="hv-info">
-                <div class="hv-name">${esc(v.name)}</div>
-                <div class="hv-meta">${esc(v.machine_id || '—')} · Last: ${lastDate}</div>
-              </div>
-              <div class="hv-visits">${v.visit_count}</div>
-            </div>`;
-            }).join('')
-          : '<div class="empty-state">No visit data yet</div>';
-
-        // --- Recent Activity ---
-        renderActivityFeed(activity || []);
-
-      } catch (e) {
-        console.error('Dashboard error:', e);
-        showToast('Failed to load dashboard: ' + e.message, true);
-      }
-
-      // Phase M: Add My Assets quick link for technicians
-      if (isTechnician() && AppState.currentUser) {
-        var grid = document.getElementById('statsGrid');
-        if (grid && !document.getElementById('myAssetsLink')) {
-          var card = document.createElement('div');
-          card.id = 'myAssetsLink';
-          card.className = 'stat-card';
-          card.style.cursor = 'pointer';
-          card.onclick = showMyAssets;
-          card.innerHTML = '<div class="stat-value">👤</div><div class="stat-label">My Assets</div>';
-          grid.appendChild(card);
-        }
-      }
-    }
-
-    function renderActivityFeed(activities) {
-      const el = document.getElementById('activityFeed');
-      if (!activities.length) {
-        el.innerHTML = '<div class="empty-state">No recent activity</div>';
-        return;
-      }
-      const ICON_MAP = { created: '✨', updated: '✏️', deleted: '🗑️', checked_in: '📍', checked_out: '🚪', login: '🔑' };
-      el.innerHTML = activities.slice(0, 10).map(a => {
-        const action = a.action || '';
-        const icon = ICON_MAP[action] || '📌';
-        const userName = esc(a.user_name || 'System');
-        const detail = esc(a.details || `${action} ${a.entity_type || ''} #${a.entity_id || ''}`);
-        return `
-        <div class="activity-item">
-          <div class="act-icon ${esc(action)}">${icon}</div>
-          <div class="act-text">
-            <div class="act-desc"><span class="act-user">${userName}</span> ${detail}</div>
-            <div class="act-time">${timeAgo(a.created_at)}</div>
-          </div>
-        </div>`;
-      }).join('');
-    }
-
-    async function loadFullActivity() {
-      try {
-        const activities = await api('/api/activity?limit=100');
-        renderActivityFeed(activities);
-        document.getElementById('activityFeed').scrollIntoView({ behavior: 'smooth' });
-      } catch (e) {
-        showToast('Failed to load activity: ' + e.message, true);
-      }
-    }
-
-    async function exportCSV(type) {
-      const urls = {
-        assets: '/api/export/assets',
-        checkins: '/api/export/checkins',
-        service: '/api/export/service-summary',
-      };
-      const url = urls[type];
-      if (!url) return;
-      try {
-        showToast('Downloading...');
-        const opts = {};
-        if (AppState.authToken) {
-          opts.headers = { 'Authorization': 'Bearer ' + AppState.authToken };
-        }
-        const res = await fetch(url, opts);
-        if (!res.ok) throw new Error(`Export failed: ${res.status}`);
-        const blob = await res.blob();
-        const a = document.createElement('a');
-        a.href = URL.createObjectURL(blob);
-        a.download = `${type}.csv`;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(a.href);
-        showToast(`${type} CSV downloaded`);
-      } catch (e) {
-        showToast('Export error: ' + e.message, true);
-      }
-    }
-
-    async function navToAsset(machineId) {
-      if (!machineId) return;
-      try {
-        // Search for asset by machine_id
-        const results = await api(`/api/assets/search?q=${encodeURIComponent(machineId)}`);
-        if (results && results.length > 0) {
-          AppState.currentAssetId = results[0].id;
-          switchTab('tabAssets');
-          // Delay to let the tab switch, then show detail
-          setTimeout(() => viewAsset(results[0].id), 100);
-        } else {
-          showToast('Asset not found', true);
-        }
-      } catch (e) {
-        showToast('Navigation error: ' + e.message, true);
-      }
-    }
-
-    // ═══════════════════════════════════════════════════════════════════════
-    // REPORTS TAB
-    // ═══════════════════════════════════════════════════════════════════════
-    let reportVisitsCache = [];
-    let reportSortState = { key: null, dir: 1 };
-
-    async function loadReports() {
-      const df = document.getElementById('reportDateFrom').value;
-      const dt = document.getElementById('reportDateTo').value;
-
-      const params = new URLSearchParams();
-      if (df) params.set('date_from', df);
-      if (dt) params.set('date_to', dt);
-      params.set('limit', '1000');
-
-      try {
-        const visits = await api('/api/visits?' + params.toString());
-        reportVisitsCache = visits;
-        renderServiceSummary(visits);
-        renderVisitFrequency(visits);
-        renderTimeOnSite(visits);
-      } catch (e) {
-        showToast('Failed to load reports: ' + e.message, true);
-      }
-    }
-
-    function renderServiceSummary(visits) {
-      const assetSet = new Set(visits.map(v => v.asset_id));
-      const userSet = new Set(visits.map(v => v.user_id));
-      const totalSecs = visits.reduce((sum, v) => {
-        if (v.checkout_time && v.checkin_time) {
-          return sum + ((new Date(v.checkout_time) - new Date(v.checkin_time)) / 1000);
-        }
-        return sum;
-      }, 0);
-      const avgMin = visits.length ? Math.round(totalSecs / visits.length / 60) : 0;
-
-      document.getElementById('rptAssets').textContent = assetSet.size;
-      document.getElementById('rptVisits').textContent = visits.length;
-      document.getElementById('rptAvgTime').textContent = avgMin + ' min';
-      document.getElementById('rptTechs').textContent = userSet.size;
-
-      // Build per-asset summary table
-      const assetMap = {};
-      visits.forEach(v => {
-        const key = v.asset_id || '?';
-        if (!assetMap[key]) {
-          assetMap[key] = { name: v.asset_name || v.machine_id || 'Unknown', visits: 0, last: null };
-        }
-        assetMap[key].visits++;
-        if (!assetMap[key].last || v.checkin_time > assetMap[key].last) {
-          assetMap[key].last = v.checkin_time;
-        }
-      });
-      const rows = Object.values(assetMap).sort((a, b) => b.visits - a.visits);
-      const html = rows.length ? `
-        <table class="rpt-table">
-          <thead><tr>
-            <th>Asset</th>
-            <th class="rpt-number">Visits</th>
-            <th>Last Visit</th>
-          </tr></thead>
-          <tbody>${rows.map(r => `
-            <tr>
-              <td>${esc(r.name)}</td>
-              <td class="rpt-number">${r.visits}</td>
-              <td>${formatDate(r.last)}</td>
-            </tr>`).join('')}</tbody>
-        </table>` : '<div class="empty-state">No visits in range</div>';
-      document.getElementById('reportServiceTable').innerHTML = html;
-    }
-
-    function renderVisitFrequency(visits) {
-      const assetMap = {};
-      visits.forEach(v => {
-        const key = v.asset_id || '?';
-        if (!assetMap[key]) {
-          assetMap[key] = { name: v.asset_name || v.machine_id || 'Unknown', visits: 0, last: null, techs: new Set() };
-        }
-        assetMap[key].visits++;
-        if (!assetMap[key].last || v.checkin_time > assetMap[key].last) {
-          assetMap[key].last = v.checkin_time;
-        }
-        if (v.user_name) assetMap[key].techs.add(v.user_name);
-      });
-
-      let rows = Object.values(assetMap).sort((a, b) => b.visits - a.visits);
-
-      if (reportSortState.key) {
-        const k = reportSortState.key;
-        const d = reportSortState.dir;
-        if (k === 'asset') rows.sort((a, b) => d * a.name.localeCompare(b.name));
-        else if (k === 'visits') rows.sort((a, b) => d * (a.visits - b.visits));
-        else if (k === 'last') {
-          rows.sort((a, b) => {
-            const da = a.last ? new Date(a.last).getTime() : 0;
-            const db = b.last ? new Date(b.last).getTime() : 0;
-            return d * (da - db);
-          });
-        } else if (k === 'tech') rows.sort((a, b) => d * (a.techs.size - b.techs.size));
-      }
-
-      function sortArrow(k) {
-        if (reportSortState.key !== k) return ' <span class="sort-arrow">↕</span>';
-        return reportSortState.dir === 1 ? ' <span class="sort-arrow asc">▲</span>' : ' <span class="sort-arrow desc">▼</span>';
-      }
-
-      const tableHtml = rows.length ? `
-        <table class="rpt-table">
-          <thead><tr>
-            <th class="sortable" onclick="sortReport('asset')">Asset${sortArrow('asset')}</th>
-            <th class="sortable rpt-number" onclick="sortReport('visits')">Visits${sortArrow('visits')}</th>
-            <th class="sortable" onclick="sortReport('last')">Last Visit${sortArrow('last')}</th>
-            <th class="sortable rpt-number" onclick="sortReport('tech')">Techs${sortArrow('tech')}</th>
-          </tr></thead>
-          <tbody>${rows.map(r => `
-            <tr>
-              <td>${esc(r.name)}</td>
-              <td class="rpt-number">${r.visits}</td>
-              <td>${formatDate(r.last)}</td>
-              <td class="rpt-number">${r.techs.size}</td>
-            </tr>`).join('')}</tbody>
-        </table>` : '<div class="empty-state">No visits in range</div>';
-
-      document.getElementById('reportVisitTable').innerHTML = tableHtml;
-    }
-
-    function sortReport(key) {
-      if (reportSortState.key === key) {
-        reportSortState.dir *= -1;
-      } else {
-        reportSortState.key = key;
-        reportSortState.dir = 1;
-      }
-      renderVisitFrequency(reportVisitsCache);
-    }
-
-    function renderTimeOnSite(visits) {
-      // Per technician
-      const techMap = {};
-      visits.forEach(v => {
-        if (!v.user_name) return;
-        const key = v.user_name;
-        if (!techMap[key]) techMap[key] = { visits: 0, totalSecs: 0 };
-        techMap[key].visits++;
-        if (v.checkout_time && v.checkin_time) {
-          techMap[key].totalSecs += (new Date(v.checkout_time) - new Date(v.checkin_time)) / 1000;
-        }
-      });
-      let techRows = Object.entries(techMap).map(([name, d]) => ({
-        name, visits: d.visits, totalMin: Math.round(d.totalSecs / 60), avgMin: d.visits ? Math.round(d.totalSecs / d.visits / 60) : 0,
-      }));
-      const maxAvgTech = Math.max(1, ...techRows.map(r => r.avgMin));
-      techRows.sort((a, b) => b.totalMin - a.totalMin);
-
-      const techHtml = techRows.length ? `
-        <table class="rpt-table">
-          <thead><tr>
-            <th>Technician</th>
-            <th class="rpt-number">Visits</th>
-            <th class="rpt-number">Total Time</th>
-            <th style="width:50%;">Avg Time</th>
-          </tr></thead>
-          <tbody>${techRows.map(r => {
-            const pct = (r.avgMin / maxAvgTech * 100).toFixed(0);
-            return `<tr>
-              <td>${esc(r.name)}</td>
-              <td class="rpt-number">${r.visits}</td>
-              <td class="rpt-number">${r.totalMin} min</td>
-              <td><div class="rpt-bar-wrap">
-                <div class="rpt-bar-track"><div class="rpt-bar-fill" style="width:${pct}%;"></div></div>
-                <span class="rpt-bar-val">${r.avgMin} min</span>
-              </div></td>
-            </tr>`;
-          }).join('')}</tbody>
-        </table>` : '<div class="empty-state">No visit data available</div>';
-      document.getElementById('reportTimeTech').innerHTML = techHtml;
-
-      // Per asset
-      const assetMap = {};
-      visits.forEach(v => {
-        const key = v.asset_id || '?';
-        if (!assetMap[key]) {
-          assetMap[key] = { name: v.asset_name || v.machine_id || 'Unknown', visits: 0, totalSecs: 0 };
-        }
-        assetMap[key].visits++;
-        if (v.checkout_time && v.checkin_time) {
-          assetMap[key].totalSecs += (new Date(v.checkout_time) - new Date(v.checkin_time)) / 1000;
-        }
-      });
-      let assetRows = Object.entries(assetMap).map(([id, d]) => ({
-        name: d.name, visits: d.visits, totalMin: Math.round(d.totalSecs / 60), avgMin: d.visits ? Math.round(d.totalSecs / d.visits / 60) : 0,
-      }));
-      const maxAvgAsset = Math.max(1, ...assetRows.map(r => r.avgMin));
-      assetRows.sort((a, b) => b.totalMin - a.totalMin);
-
-      const assetHtml = assetRows.length ? `
-        <table class="rpt-table">
-          <thead><tr>
-            <th>Asset</th>
-            <th class="rpt-number">Visits</th>
-            <th class="rpt-number">Total Time</th>
-            <th style="width:50%;">Avg Time</th>
-          </tr></thead>
-          <tbody>${assetRows.map(r => {
-            const pct = (r.avgMin / maxAvgAsset * 100).toFixed(0);
-            return `<tr>
-              <td>${esc(r.name)}</td>
-              <td class="rpt-number">${r.visits}</td>
-              <td class="rpt-number">${r.totalMin} min</td>
-              <td><div class="rpt-bar-wrap">
-                <div class="rpt-bar-track"><div class="rpt-bar-fill" style="width:${pct}%;"></div></div>
-                <span class="rpt-bar-val">${r.avgMin} min</span>
-              </div></td>
-            </tr>`;
-          }).join('')}</tbody>
-        </table>` : '<div class="empty-state">No visit data available</div>';
-      document.getElementById('reportTimeAsset').innerHTML = assetHtml;
-    }
-
-    function exportServiceSummary() {
-      if (!reportVisitsCache.length) {
-        showToast('No data to export. Generate a report first.', true);
-        return;
-      }
-      // Build CSV client-side from the filtered data
-      const assetMap = {};
-      reportVisitsCache.forEach(v => {
-        const key = v.asset_id || '?';
-        if (!assetMap[key]) {
-          assetMap[key] = {
-            asset: v.asset_name || v.machine_id || 'Unknown',
-            visits: 0, last: null, techs: new Set(), totalSecs: 0,
-          };
-        }
-        assetMap[key].visits++;
-        if (!assetMap[key].last || v.checkin_time > assetMap[key].last) assetMap[key].last = v.checkin_time;
-        if (v.user_name) assetMap[key].techs.add(v.user_name);
-        if (v.checkout_time && v.checkin_time) {
-          assetMap[key].totalSecs += (new Date(v.checkout_time) - new Date(v.checkin_time)) / 1000;
-        }
-      });
-      const csv = 'Asset,Visits,Last Visit,Technicians,Avg Time (min)\n'
-        + Object.values(assetMap).map(r => [
-          '"' + r.asset.replace(/"/g, '""') + '"',
-          r.visits,
-          '"' + (r.last ? formatDate(r.last) : '') + '"',
-          r.techs.size,
-          r.visits ? Math.round(r.totalSecs / r.visits / 60) : 0,
-        ].join(',')).join('\n');
-
-      const blob = new Blob([csv], { type: 'text/csv' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = 'service_summary.csv';
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-      showToast('CSV downloaded');
-    }
-
-    // ═══════════════════════════════════════════════════════════════════════
-    // MAP TAB — Leaflet map with pins, geofences, heatmap, auto-visit
-    // ═══════════════════════════════════════════════════════════════════════
-
-    let map = null;
-    let assetMarkers = [];          // { asset, marker }
-    let geofenceLayers = [];        // { geofence, polygon }
-    let heatLayer = null;
-    let heatVisible = false;
-    let drawnItems = null;          // Leaflet FeatureGroup for drawn polygons
-    let drawControl = null;
-    let drawingGeofence = false;
-    let geoWatchId = null;
-    let visitTimers = {};           // { asset_id: { startTime, lastSeen } }
-    const VISIT_THRESHOLD_M = 50;
-    const VISIT_DURATION_MIN = 10;
-
-    // Category-to-color mapping for asset pins
-    const CAT_COLORS = {
-      'Furniture': '#4ade80',
-      'Appliances': '#60a5fa',
-      'Utensils &amp; Serveware': '#fbbf24',
-      'Utensils & Serveware': '#fbbf24',
-      'Equipment': '#f87171',
-      'Other': '#a78bfa',
-    };
-
-    function catColor(cat) {
-      return CAT_COLORS[cat] || '#a78bfa';
-    }
-
-    // Category icon emoji for markers
-    const CAT_MARKER_EMOJI = {
-      'Furniture': '🪑', 'Appliances': '🔌', 'Utensils &amp; Serveware': '🍴',
-      'Utensils & Serveware': '🍴', 'Equipment': '⚙️', 'Other': '📦',
-    };
-
-    function catEmoji(cat) {
-      return CAT_MARKER_EMOJI[cat] || '📦';
-    }
-
-    // DivIcon with colored circle + emoji
-    function makeAssetIcon(asset) {
-      const color = catColor(asset.category);
-      const emoji = catEmoji(asset.category);
-      return L.divIcon({
-        html: `<div style="width:32px;height:32px;border-radius:50%;background:${color};display:flex;align-items:center;justify-content:center;font-size:16px;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,0.5);">${emoji}</div>`,
-        className: '',
-        iconSize: [32, 32],
-        iconAnchor: [16, 16],
-        popupAnchor: [0, -18],
-      });
-    }
-
-    // Initialize the map
-    function initMap() {
-      if (map) return;
-
-      const container = document.getElementById('mapContainer');
-      if (!container) return;
-
-      const lat = AppState.gpsLat || 40.7128;
-      const lng = AppState.gpsLng || -74.0060;
-      const zoom = AppState.gpsLat ? 15 : 13;
-
-      map = L.map('mapContainer', {
-        center: [lat, lng],
-        zoom: zoom,
-        zoomControl: true,
-        attributionControl: false,
-      });
-
-      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        maxZoom: 19,
-      }).addTo(map);
-
-      // FeatureGroup for drawn geofences
-      drawnItems = new L.FeatureGroup();
-      map.addLayer(drawnItems);
-
-      // Draw control (hidden by default, shown when user taps "Add Geofence")
-      drawControl = new L.Control.Draw({
-        draw: {
-          polygon: {
-            allowIntersection: false,
-            showArea: true,
-            shapeOptions: { color: '#3388ff', weight: 2 },
-          },
-          polyline: false,
-          rectangle: false,
-          circle: false,
-          circlemarker: false,
-          marker: false,
-        },
-        edit: { featureGroup: drawnItems },
-      });
-      // Don't add to map yet — only when drawing mode active
-
-      // Handle drawn polygon
-      map.on(L.Draw.Event.CREATED, function (e) {
-        drawnItems.addLayer(e.layer);
-        // Show the save/cancel row
-        document.getElementById('geofenceColorRow').style.display = 'flex';
-      });
-
-      // Handle edits
-      map.on(L.Draw.Event.EDITED, function () {
-        syncEditedGeofences();
-      });
-
-      map.on(L.Draw.Event.DELETED, function () {
-        syncDeletedGeofences();
-      });
-
-      // Invalidate size when tab becomes visible
-      setTimeout(() => map.invalidateSize(), 100);
-
-      loadAssetPins();
-      loadGeofences();
-    }
-
-    // Load all assets with coordinates and place pins
-    async function loadAssetPins() {
-      try {
-        const assets = await api('/api/assets?limit=1000');
-        clearAssetMarkers();
-        const withCoords = assets.filter(a => a.latitude != null && a.longitude != null);
-        withCoords.forEach(asset => {
-          addAssetMarker(asset);
-        });
-        // Update heatmap layer if visible
-        if (heatVisible) await loadHeatmapData();
-      } catch (e) {
-        console.error('Failed to load asset pins:', e);
-      }
-    }
-
-    function clearAssetMarkers() {
-      assetMarkers.forEach(({ marker }) => {
-        if (map) map.removeLayer(marker);
-      });
-      assetMarkers = [];
-    }
-
-    function addAssetMarker(asset) {
-      if (!map) return;
-      const icon = makeAssetIcon(asset);
-      const marker = L.marker([asset.latitude, asset.longitude], { icon }).addTo(map);
-
-      const addrParts = [
-        asset.address, asset.building_name,
-        asset.building_number ? `#${asset.building_number}` : '',
-        asset.floor ? `Floor ${asset.floor}` : ''
-      ].filter(Boolean);
-      const addr = addrParts.length ? addrParts.join(', ') : 'No address';
-
-      const dirLink = `https://www.google.com/maps/dir/?api=1&destination=${asset.latitude},${asset.longitude}`;
-
-      marker.bindPopup(`
-        <div style="min-width:180px;">
-          <div style="font-size:15px;font-weight:700;margin-bottom:4px;">${esc(asset.name)}</div>
-          <div style="font-size:11px;color:var(--text2);margin-bottom:6px;">
-            ${asset.machine_id ? esc(asset.machine_id) + ' · ' : ''}${esc(asset.category || 'Other')}
-            ${asset.status ? ` · <span style="color:${asset.status==='active'?'var(--green)':asset.status==='maintenance'?'var(--amber)':'var(--red)'};">${esc(asset.status)}</span>` : ''}
-          </div>
-          <div style="font-size:11px;color:var(--text2);margin-bottom:8px;">📍 ${esc(addr)}</div>
-          <div style="display:flex;gap:6px;flex-wrap:wrap;">
-            <a href="${dirLink}" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;background:var(--accent);color:#fff;text-decoration:none;">🧭 Directions</a>
-            <button onclick="switchTab('tabAssets');viewAsset(${asset.id});" style="font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;background:var(--card2);color:var(--text);border:1px solid var(--border);cursor:pointer;">📋 Details</button>
-          </div>
-        </div>
-      `);
-
-      assetMarkers.push({ asset, marker });
-    }
-
-    // Center map on user GPS
-    function centerOnGPS() {
-      if (!map) return;
-      if (AppState.gpsLat) {
-        map.setView([AppState.gpsLat, AppState.gpsLng], 16);
-        // Add a pulsing blue dot for current location
-        if (!map._userMarker) {
-          map._userMarker = L.circleMarker([AppState.gpsLat, AppState.gpsLng], {
-            radius: 8, fillColor: '#5b6ef7', color: '#fff', weight: 2,
-            fillOpacity: 0.9,
-          }).addTo(map);
-        } else {
-          map._userMarker.setLatLng([AppState.gpsLat, AppState.gpsLng]);
-        }
-      } else {
-        showToast('GPS location not available yet', true);
-      }
-    }
-
-    // Toggle asset pins visibility
-    function togglePins() {
-      const chip = document.getElementById('chipPins');
-      const show = !chip.classList.contains('active');
-      chip.classList.toggle('active', show);
-      assetMarkers.forEach(({ marker }) => {
-        if (show) marker.addTo(map);
-        else map.removeLayer(marker);
-      });
-    }
-
-    // ═══════════════════════════════════════════════════════════════════════
-    // GEOFFENCE MANAGEMENT
-    // ═══════════════════════════════════════════════════════════════════════
-
-    function toggleGeofenceDraw() {
-      if (!map) return;
-      const chip = document.getElementById('chipGeo');
-
-      if (drawingGeofence) {
-        cancelGeofenceDraw();
-        return;
-      }
-
-      drawingGeofence = true;
-      chip.classList.add('active');
-      chip.textContent = '✏️ Drawing...';
-      map.addControl(drawControl);
-      drawnItems.clearLayers();
-      document.getElementById('geofenceColorRow').style.display = 'none';
-      new L.Draw.Polygon(map, drawControl.options.draw.polygon).enable();
-    }
-
-    function cancelGeofenceDraw() {
-      drawingGeofence = false;
-      const chip = document.getElementById('chipGeo');
-      chip.classList.remove('active');
-      chip.textContent = '✏️ Add Geofence';
-      if (drawControl) map.removeControl(drawControl);
-      drawnItems.clearLayers();
-      document.getElementById('geofenceColorRow').style.display = 'none';
-    }
-
-    async function saveDrawnGeofence() {
-      const layers = drawnItems.getLayers();
-      if (layers.length === 0) {
-        showToast('Draw a polygon on the map first', true);
-        return;
-      }
-      const polygon = layers[0];
-      const latlngs = polygon.getLatLngs()[0];
-
-      // Leaflet uses [lat, lng] arrays; backend expects {lat, lng} objects
-      const points = latlngs.map(ll => ({ lat: ll.lat, lng: ll.lng }));
-      const color = document.getElementById('geofenceColor').value;
-
-      const name = prompt('Geofence name:', 'Zone ' + (geofenceLayers.length + 1));
-      if (!name) return;
-
-      // Ask about user assignment
-      let user_ids = [];
-      try {
-        const users = await api('/api/users');
-        if (users && users.length > 0) {
-          let html = users.map(u => `
-            <label style="display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);cursor:pointer;">
-              <input type="checkbox" value="${u.id}" style="width:18px;height:18px;accent-color:var(--accent);">
-              <span>
-                <span style="color:var(--text);font-size:14px;">${esc(u.username)}</span>
-                <span style="color:var(--text3);font-size:11px;margin-left:6px;">(${esc(u.role)})</span>
-              </span>
-            </label>
-          `).join('');
-          const container = document.createElement('div');
-          container.innerHTML = html;
-          container.style.cssText = 'max-height:300px;overflow-y:auto;';
-
-          const confirmed = await showModal(
-            'Assign Users to Geofence',
-            container,
-            'Save',
-            'btn-primary'
-          );
-          if (confirmed) {
-            user_ids = [...container.querySelectorAll('input[type=checkbox]:checked')].map(cb => parseInt(cb.value));
-          } else {
-            return; // user cancelled — abort save
-          }
-        }
-      } catch (e) { /* no users loaded — skip assignment */ }
-
-      try {
-        await api('/api/geofences', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ name: name.trim(), points, color, user_ids }),
-        });
-        showToast('Geofence saved!');
-        cancelGeofenceDraw();
-        await loadGeofences();
-      } catch (e) {
-        showToast(e.message, true);
-      }
-    }
-
-    async function loadGeofences() {
-      try {
-        const geofences = await api('/api/geofences');
-        // Clear existing geofence layers
-        geofenceLayers.forEach(({ polygon }) => {
-          if (map) map.removeLayer(polygon);
-        });
-        geofenceLayers = [];
-
-        geofences.forEach(gf => {
-          const points = typeof gf.points === 'string' ? JSON.parse(gf.points) : gf.points;
-          const latlngs = points.map(p => [p.lat, p.lng]);
-          const polygon = L.polygon(latlngs, {
-            color: gf.color || '#3388ff',
-            fillColor: gf.color || '#3388ff',
-            fillOpacity: 0.15,
-            weight: 2,
-          }).addTo(map);
-
-          const assignedUsers = gf.assigned_users || [];
-          const popupBody = `<div style="min-width:150px;">
-              <div style="font-weight:700;margin-bottom:4px;">${esc(gf.name)}</div>
-              ${assignedUsers.length ? `
-                <div style="font-size:11px;color:var(--text2);margin:4px 0;border-top:1px solid var(--border);padding-top:4px;">
-                  👤 ${assignedUsers.map(u => `<span style="color:var(--accent2);">${esc(u.username)}</span>`).join(', ')}
-                </div>
-              ` : ''}
-              <div style="display:flex;gap:4px;margin-top:4px;">
-                <button onclick="editGeofence(${gf.id})" style="font-size:11px;padding:3px 8px;border-radius:4px;background:var(--card2);color:var(--text);border:1px solid var(--border);cursor:pointer;">✏️ Edit</button>
-                <button onclick="assignGeofenceUsers(${gf.id})" style="font-size:11px;padding:3px 8px;border-radius:4px;background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent);cursor:pointer;">👤 Assign</button>
-                <button onclick="deleteGeofence(${gf.id})" style="font-size:11px;padding:3px 8px;border-radius:4px;background:var(--red-bg);color:var(--red);border:1px solid var(--red);cursor:pointer;">🗑️ Delete</button>
-              </div>
-            </div>`;
-          polygon.bindPopup(popupBody);
-
-          geofenceLayers.push({ geofence: gf, polygon });
-        });
-
-        renderGeofenceList(geofences);
-      } catch (e) {
-        console.error('Failed to load geofences:', e);
-      }
-    }
-
-    function renderGeofenceList(geofences) {
-      document.getElementById('gfCount').textContent = geofences.length + ' zone' + (geofences.length !== 1 ? 's' : '');
-      const el = document.getElementById('geofenceList');
-      if (!geofences.length) {
-        el.innerHTML = '<div style="font-size:12px;color:var(--text3);padding:4px 0;">No geofences yet — tap ✏️ to draw one</div>';
-        return;
-      }
-      el.innerHTML = geofences.map(gf => `
-        <div class="geofence-item">
-          <div class="gf-color" style="background:${esc(gf.color || '#3388ff')};"></div>
-          <span class="gf-name">${esc(gf.name)}</span>
-          ${gf.assigned_users && gf.assigned_users.length ? `
-            <span style="font-size:10px;color:var(--text3);margin-left:4px;flex-shrink:0;">
-              👤${gf.assigned_users.length}
-            </span>
-          ` : ''}
-          <div class="gf-actions">
-            <button class="gf-btn" onclick="assignGeofenceUsers(${gf.id})" title="Assign Users">👤</button>
-            <button class="gf-btn" onclick="editGeofence(${gf.id})" title="Edit">✏️</button>
-            <button class="gf-btn danger" onclick="deleteGeofence(${gf.id})" title="Delete">🗑️</button>
-          </div>
-        </div>
-      `).join('');
-    }
-
-    async function editGeofence(id) {
-      const gf = geofenceLayers.find(g => g.geofence.id === id);
-      if (!gf) return;
-      const newName = prompt('Geofence name:', gf.geofence.name);
-      if (!newName) return;
-      try {
-        await api(`/api/geofences/${id}`, {
-          method: 'PUT',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ name: newName.trim() }),
-        });
-        showToast('Geofence updated!');
-        await loadGeofences();
-      } catch (e) {
-        showToast(e.message, true);
-      }
-    }
-
-    async function deleteGeofence(id) {
-      const confirmed = await showModal('Delete Geofence', 'Remove this geofence zone?', 'Delete');
-      if (!confirmed) return;
-      try {
-        await api(`/api/geofences/${id}`, { method: 'DELETE' });
-        showToast('Geofence deleted');
-        await loadGeofences();
-      } catch (e) {
-        showToast(e.message, true);
-      }
-    }
-
-    async function assignGeofenceUsers(gfId) {
-      try {
-        const users = await api('/api/users');
-        const gf = geofenceLayers.find(g => g.geofence.id === gfId);
-        if (!gf) return;
-        const currentIds = (gf.geofence.assigned_users || []).map(u => u.id);
-
-        // Build a simple checkable list
-        let html = users.map(u => `
-          <label style="display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);cursor:pointer;">
-            <input type="checkbox" value="${u.id}" ${currentIds.includes(u.id) ? 'checked' : ''}
-                   style="width:18px;height:18px;accent-color:var(--accent);">
-            <span>
-              <span style="color:var(--text);font-size:14px;">${esc(u.username)}</span>
-              <span style="color:var(--text3);font-size:11px;margin-left:6px;">(${esc(u.role)})</span>
-            </span>
-          </label>
-        `).join('') || '<div style="color:var(--text3);padding:8px 0;">No users found. Create users in the Settings tab first.</div>';
-
-        const container = document.createElement('div');
-        container.innerHTML = html;
-        container.style.cssText = 'max-height:300px;overflow-y:auto;';
-
-        const confirmed = await showModal(
-          'Assign Service Area',
-          container,
-          'Save',
-          'Cancel'
-        );
-        if (!confirmed) return;
-
-        const checked = [...container.querySelectorAll('input[type=checkbox]:checked')].map(cb => parseInt(cb.value));
-        await api(`/api/geofences/${gfId}`, {
-          method: 'PUT',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ user_ids: checked }),
-        });
-        showToast('Service area assigned!');
-        await loadGeofences();
-      } catch (e) {
-        showToast(e.message, true);
-      }
-    }
-
-    function syncEditedGeofences() {
-      // After draw:edit, update the geofence on the backend
-      const layers = drawnItems.getLayers();
-      if (layers.length === 0) return;
-      // For simplicity, show a toast — user can re-draw
-      showToast('Geofence edited — changes saved to layer');
-    }
-
-    function syncDeletedGeofences() {
-      showToast('Geofence removed from map');
-    }
-
     // ═══════════════════════════════════════════════════════════════════════
     // HEATMAP
     // ═══════════════════════════════════════════════════════════════════════
@@ -6054,989 +3618,6 @@
     }
 
     // =========================================================================
-    // SETTINGS TAB — All entities CRUD
-    // =========================================================================
-
-    // Listen for tab changes to load/hide settings
-    document.addEventListener('tabChange', function(e) {
-      if (e.detail.tabId === 'tabSettings') loadAllSettings();
-    });
-
-    // Track expanded makes for the make→model tree
-    const SettingsState = {
-      categories: [], makes: [], models: [], key_names: [],
-      key_types: [], badge_types: [], users: [], geofences: [],
-      expandedMakes: {},   // { makeId: true }
-      addingModelFor: null, // makeId currently showing inline add form
-    };
-
-    const DEFAULT_EMOJIS = ['☕','🥤','🍿','🥪','🏪','❄️','🍩','🍕','🍔','🌯','🍜','🧁','📦','⚙️','🔧','🎯','🏷️','⭐'];
-
-    async function loadAllSettings() {
-      // Show/hide admin-only elements
-      document.body.classList.toggle('is-admin', isAdmin());
-      const usersCard = document.getElementById('settingsUsersCard');
-      if (usersCard) usersCard.style.display = isAdmin() ? '' : 'none';
-
-      await Promise.all([
-        loadEntity('categories'), loadEntity('makes'), loadEntity('models'),
-        loadEntity('key_names'), loadEntity('key_types'), loadEntity('badge_types'),
-        isAdmin() ? loadUsers() : Promise.resolve(),
-        isAdmin() ? loadGeofencesForSettings() : Promise.resolve(),
-      ]);
-      renderAllSettings();
-    }
-
-    async function loadEntity(entity) {
-      try {
-        SettingsState[entity] = await api(`/api/settings/${entity}`);
-      } catch (e) {
-        SettingsState[entity] = [];
-      }
-    }
-
-    async function loadUsers() {
-      try { SettingsState.users = await api('/api/users'); }
-      catch (e) { SettingsState.users = []; }
-    }
-
-    async function loadGeofencesForSettings() {
-      try { SettingsState.geofences = await api('/api/geofences'); }
-      catch (e) { SettingsState.geofences = []; }
-    }
-
-    function renderAllSettings() {
-      renderSimpleList('categories', 'settingsCategories');
-      renderMakesModels();
-      renderSimpleList('key_names', 'settingsKeyNames');
-      renderSimpleList('key_types', 'settingsKeyTypes');
-      renderSimpleList('badge_types', 'settingsBadgeTypes');
-      if (isAdmin()) renderUsers();
-    }
-
-    // ── Simple list renderer (categories, key_names, key_types, badge_types) ──
-
-    function renderSimpleList(entity, containerId) {
-      const items = SettingsState[entity] || [];
-      const el = document.getElementById(containerId);
-      if (!items.length) {
-        el.innerHTML = '<div class="empty-state" style="padding:16px;font-size:12px;">No items yet</div>';
-        return;
-      }
-      const admin = isAdmin();
-      el.innerHTML = items.map(item => `
-        <div class="settings-item" data-id="${item.id}">
-          ${entity === 'categories' ? `<span class="si-icon">${esc(item.icon || '📂')}</span>` : ''}
-          <span class="si-name">${esc(item.name)}</span>
-          ${admin ? `
-          <div class="si-actions">
-            <button class="si-btn" data-action="settingsEdit" data-entity="${entity}" data-id="${item.id}">✏️</button>
-            <button class="si-btn delete" data-action="settingsDelete" data-entity="${entity}" data-id="${item.id}">🗑</button>
-          </div>` : ''}
-        </div>
-      `).join('');
-    }
-
-    // ── Makes & Models renderer (expandable tree) ──
-
-    function renderMakesModels() {
-      const el = document.getElementById('settingsMakes');
-      const makes = SettingsState.makes || [];
-      const models = SettingsState.models || [];
-      const admin = isAdmin();
-
-      if (!makes.length) {
-        el.innerHTML = '<div class="empty-state" style="padding:16px;font-size:12px;">No makes yet</div>';
-        return;
-      }
-
-      el.innerHTML = makes.map(make => {
-        const makeModels = models.filter(m => m.make_id === make.id);
-        const isExpanded = SettingsState.expandedMakes[make.id];
-        const isAdding = SettingsState.addingModelFor === make.id;
-
-        let html = `<div class="settings-item make-item ${isExpanded ? 'expanded' : ''}" data-action="toggleMake" data-id="${make.id}">
-          <span class="si-name">${esc(make.name)}</span>
-          <span class="si-meta">${makeModels.length} model${makeModels.length !== 1 ? 's' : ''}</span>
-          ${admin ? `
-          <div class="si-actions" onclick="event.stopPropagation()">
-            <button class="si-btn" data-action="settingsEdit" data-entity="makes" data-id="${make.id}">✏️</button>
-            <button class="si-btn delete" data-action="settingsDelete" data-entity="makes" data-id="${make.id}">🗑</button>
-          </div>` : ''}
-          <span class="si-chevron">▶</span>
-        </div>`;
-
-        // Model sub-list
-        html += `<div class="models-sublist ${isExpanded ? 'open' : ''}" data-make-id="${make.id}">`;
-        makeModels.forEach(model => {
-          html += `<div class="settings-item">
-            ${model.icon_path ? `<img class="icon-thumb-small" src="${esc(model.icon_path)}" alt="">` : '<span class="si-icon">📦</span>'}
-            <span class="si-name">${esc(model.name)}</span>
-            ${admin ? `
-            <div class="si-actions">
-              <button class="si-btn" data-action="settingsEdit" data-entity="models" data-id="${model.id}">✏️</button>
-              <button class="si-btn delete" data-action="settingsDelete" data-entity="models" data-id="${model.id}">🗑</button>
-            </div>` : ''}
-          </div>`;
-        });
-
-        // Add model inline form
-        if (isAdding) {
-          html += `<div class="add-model-row">
-            <input type="text" class="input-field" id="newModelName_${make.id}" placeholder="Model name" style="margin-bottom:0;">
-            <input type="file" id="newModelIcon_${make.id}" accept="image/*" style="display:none;">
-            <button class="si-btn" onclick="document.getElementById('newModelIcon_${make.id}').click()" title="Upload icon">🖼</button>
-            <button class="si-btn" style="color:var(--green)" data-action="saveModel" data-make="${make.id}">✓</button>
-            <button class="si-btn" style="color:var(--red)" data-action="cancelAddModel">✕</button>
-          </div>`;
-        } else if (admin) {
-          html += `<div class="add-model-row">
-            <button class="btn btn-sm btn-outline" style="width:100%;font-size:12px;" data-action="showAddModel" data-make="${make.id}">+ Add Model</button>
-          </div>`;
-        }
-
-        html += '</div>';
-        return html;
-      }).join('');
-    }
-
-    // ── Users renderer ──
-
-    function renderUsers() {
-      const users = SettingsState.users || [];
-      const geofences = SettingsState.geofences || [];
-      const el = document.getElementById('settingsUsers');
-      if (!users.length) {
-        el.innerHTML = '<div class="empty-state" style="padding:16px;font-size:12px;">No users found</div>';
-        return;
-      }
-      el.innerHTML = users.map(u => {
-        const userGeofences = geofences.filter(gf =>
-          (gf.assigned_users || []).some(au => au.id === u.id)
-        );
-        const serviceHtml = userGeofences.length > 0
-          ? `<div style="font-size:10px;color:var(--text2);margin-top:2px;">
-               📍 ${userGeofences.map(gf => `<span style="color:${esc(gf.color || '#3388ff')};">●</span> ${esc(gf.name)}`).join(' · ')}
-             </div>`
-          : '';
-        return `
-        <div class="settings-item" data-id="${u.id}">
-          <span class="si-icon" style="font-size:16px;">👤</span>
-          <div style="flex:1;min-width:0;">
-            <div style="display:flex;align-items:center;gap:6px;">
-              <span class="si-name" style="flex:none;">${esc(u.username)}</span>
-              <span class="role-badge ${esc(u.role)}">${esc(u.role)}</span>
-            </div>
-            ${serviceHtml}
-          </div>
-          ${isAdmin() ? `
-          <div class="si-actions">
-            <button class="si-btn" data-action="editUser" data-id="${u.id}">✏️</button>
-            <button class="si-btn delete" data-action="deleteUser" data-id="${u.id}">🗑</button>
-          </div>` : ''}
-        </div>
-      `}).join('');
-    }
-
-    // ── Settings item add (shows inline form) ──
-
-    function showAddForm(entity) {
-      const containerId = entity === 'makes' || entity === 'models' ? 'settingsMakes' :
-        entity === 'categories' ? 'settingsCategories' :
-        entity === 'key_names' ? 'settingsKeyNames' :
-        entity === 'key_types' ? 'settingsKeyTypes' :
-        entity === 'badge_types' ? 'settingsBadgeTypes' : null;
-      if (!containerId) return;
-
-      const el = document.getElementById(containerId);
-      const existing = el.querySelector('.settings-inline-form');
-      if (existing) existing.remove();
-
-      const isCategory = entity === 'categories';
-      const form = document.createElement('div');
-      form.className = 'settings-inline-form';
-      form.innerHTML = `
-        ${isCategory ? `<div class="emoji-picker" id="emojiPicker_${entity}">${DEFAULT_EMOJIS.map((e,i) => `<span class="emoji-opt${i===0?' selected':''}" data-emoji="${e}">${e}</span>`).join('')}</div>` : ''}
-        <input type="text" class="input-field" id="addInput_${entity}" placeholder="${isCategory ? 'Category name' : 'Name'}" style="margin-bottom:0;">
-        <div class="si-actions">
-          <button class="si-btn" style="color:var(--green);" data-action="saveNewItem" data-entity="${entity}">✓</button>
-          <button class="si-btn" style="color:var(--red);" data-action="cancelAddForm" data-entity="${entity}">✕</button>
-        </div>
-      `;
-      el.insertBefore(form, el.firstChild);
-
-      // Emoji picker clicks
-      if (isCategory) {
-        form.querySelectorAll('.emoji-opt').forEach(opt => {
-          opt.addEventListener('click', function() {
-            form.querySelectorAll('.emoji-opt').forEach(o => o.classList.remove('selected'));
-            this.classList.add('selected');
-          });
-        });
-      }
-
-      setTimeout(() => form.querySelector('input').focus(), 100);
-    }
-
-    function cancelAddForm(entity) {
-      const containerId = entity === 'makes' || entity === 'models' ? 'settingsMakes' :
-        entity === 'categories' ? 'settingsCategories' :
-        entity === 'key_names' ? 'settingsKeyNames' :
-        entity === 'key_types' ? 'settingsKeyTypes' :
-        entity === 'badge_types' ? 'settingsBadgeTypes' : null;
-      if (!containerId) return;
-      const form = document.getElementById(containerId).querySelector('.settings-inline-form');
-      if (form) form.remove();
-      renderAllSettings();
-    }
-
-    async function saveNewItem(entity) {
-      const input = document.getElementById(`addInput_${entity}`);
-      if (!input) return;
-      const name = input.value.trim();
-      if (!name) { showToast('Name is required', true); return; }
-
-      let payload = { name };
-      if (entity === 'categories') {
-        const sel = document.querySelector(`#emojiPicker_${entity} .emoji-opt.selected`);
-        payload.icon = sel ? sel.dataset.emoji : '📂';
-      }
-
-      try {
-        await api(`/api/settings/${entity}`, {
-          method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload),
-        });
-        showToast('Added!');
-        await loadEntity(entity);
-        renderAllSettings();
-      } catch (e) { showToast(e.message, true); }
-    }
-
-    // ── Settings item edit (show inline form pre-filled) ──
-
-    function showEditForm(entity, id) {
-      const item = (SettingsState[entity] || []).find(x => x.id === id);
-      if (!item) return;
-
-      const containerId = entity === 'makes' || entity === 'models' ? 'settingsMakes' :
-        entity === 'categories' ? 'settingsCategories' :
-        entity === 'key_names' ? 'settingsKeyNames' :
-        entity === 'key_types' ? 'settingsKeyTypes' :
-        entity === 'badge_types' ? 'settingsBadgeTypes' : null;
-      if (!containerId) return;
-
-      const el = document.getElementById(containerId);
-      const existing = el.querySelector('.settings-inline-form');
-      if (existing) existing.remove();
-
-      const isCategory = entity === 'categories';
-      const form = document.createElement('div');
-      form.className = 'settings-inline-form';
-      form.innerHTML = `
-        ${isCategory ? `<div class="emoji-picker" id="editEmoji_${entity}_${id}">${DEFAULT_EMOJIS.map(e => `<span class="emoji-opt${e === (item.icon||'📂') ? ' selected' : ''}" data-emoji="${e}">${e}</span>`).join('')}</div>` : ''}
-        <input type="text" class="input-field" id="editInput_${entity}_${id}" value="${esc(item.name)}" style="margin-bottom:0;">
-        <div class="si-actions">
-          <button class="si-btn" style="color:var(--green);" data-action="saveEditItem" data-entity="${entity}" data-id="${id}">✓</button>
-          <button class="si-btn" style="color:var(--red);" data-action="cancelAddForm" data-entity="${entity}">✕</button>
-        </div>
-      `;
-      el.insertBefore(form, el.firstChild);
-
-      if (isCategory) {
-        form.querySelectorAll('.emoji-opt').forEach(opt => {
-          opt.addEventListener('click', function() {
-            form.querySelectorAll('.emoji-opt').forEach(o => o.classList.remove('selected'));
-            this.classList.add('selected');
-          });
-        });
-      }
-
-      setTimeout(() => form.querySelector('input').focus(), 100);
-    }
-
-    async function saveEditItem(entity, id) {
-      const input = document.getElementById(`editInput_${entity}_${id}`);
-      if (!input) return;
-      const name = input.value.trim();
-      if (!name) { showToast('Name is required', true); return; }
-
-      let payload = { name };
-      if (entity === 'categories') {
-        const sel = document.querySelector(`#editEmoji_${entity}_${id} .emoji-opt.selected`);
-        if (sel) payload.icon = sel.dataset.emoji;
-      }
-
-      try {
-        await api(`/api/settings/${entity}/${id}`, {
-          method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload),
-        });
-        showToast('Updated!');
-        await loadEntity(entity);
-        renderAllSettings();
-      } catch (e) { showToast(e.message, true); }
-    }
-
-    // ── Settings item delete ──
-
-    async function deleteSettingsItem(entity, id) {
-      const item = (SettingsState[entity] || []).find(x => x.id === id);
-      const name = item ? item.name : 'this item';
-      const conf = await showModal('Delete', `Delete "${name}"? This cannot be undone.`, 'Delete');
-      if (!conf) return;
-
-      try {
-        await api(`/api/settings/${entity}/${id}`, { method: 'DELETE' });
-        showToast('Deleted');
-        await loadEntity(entity);
-        if (entity === 'models') await loadEntity('makes');
-        renderAllSettings();
-      } catch (e) { showToast(e.message, true); }
-    }
-
-    // ── Make expand/collapse ──
-
-    function toggleMake(makeId) {
-      SettingsState.expandedMakes[makeId] = !SettingsState.expandedMakes[makeId];
-      renderMakesModels();
-    }
-
-    function showAddModel(makeId) {
-      SettingsState.addingModelFor = makeId;
-      renderMakesModels();
-    }
-
-    function cancelAddModel() {
-      SettingsState.addingModelFor = null;
-      renderMakesModels();
-    }
-
-    async function saveModel(makeId) {
-      const nameInput = document.getElementById(`newModelName_${makeId}`);
-      const iconInput = document.getElementById(`newModelIcon_${makeId}`);
-      const name = nameInput ? nameInput.value.trim() : '';
-      if (!name) { showToast('Model name is required', true); return; }
-
-      let payload = { make_id: makeId, name, icon_path: '' };
-
-      // Upload icon if selected
-      if (iconInput && iconInput.files.length) {
-        try {
-          const formData = new FormData();
-          formData.append('file', iconInput.files[0]);
-          const result = await api('/api/upload/icon', {
-            method: 'POST', body: formData,
-          });
-          payload.icon_path = result.path;
-        } catch (e) {
-          showToast('Icon upload failed: ' + e.message, true);
-          return;
-        }
-      }
-
-      try {
-        await api('/api/settings/models', {
-          method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload),
-        });
-        showToast('Model added!');
-        SettingsState.addingModelFor = null;
-        await loadEntity('models');
-        renderMakesModels();
-      } catch (e) { showToast(e.message, true); }
-    }
-
-    // ── User management ──
-
-    function showAddUserForm() {
-      const el = document.getElementById('settingsUsers');
-      const existing = el.querySelector('.user-detail-inline');
-      if (existing) existing.remove();
-
-      const form = document.createElement('div');
-      form.className = 'user-detail-inline';
-      form.innerHTML = `
-        <input type="text" class="input-field" id="newUsername" placeholder="Username">
-        <input type="password" class="input-field" id="newPassword" placeholder="Password">
-        <select class="input-field" id="newRole">
-          <option value="technician">Technician</option>
-          <option value="admin">Admin</option>
-          <option value="readonly">Read-only</option>
-        </select>
-        <div style="display:flex;gap:8px;">
-          <button class="btn btn-sm btn-primary" style="flex:1;" data-action="saveNewUser">Create User</button>
-          <button class="btn btn-sm btn-outline" style="flex:1;" data-action="cancelAddUser">Cancel</button>
-        </div>
-      `;
-      el.insertBefore(form, el.firstChild);
-      setTimeout(() => form.querySelector('#newUsername').focus(), 100);
-    }
-
-    async function saveNewUser() {
-      const username = document.getElementById('newUsername').value.trim();
-      const password = document.getElementById('newPassword').value.trim();
-      const role = document.getElementById('newRole').value;
-      if (!username || !password) { showToast('Username and password required', true); return; }
-
-      try {
-        await api('/api/users', {
-          method: 'POST', headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ username, password, role }),
-        });
-        showToast('User created!');
-        await loadUsers();
-        renderUsers();
-      } catch (e) { showToast(e.message, true); }
-    }
-
-    function cancelAddUser() { renderUsers(); }
-
-    function showEditUserForm(userId) {
-      const user = (SettingsState.users || []).find(u => u.id === userId);
-      if (!user) return;
-
-      const el = document.getElementById('settingsUsers');
-      const existing = el.querySelector('.user-detail-inline');
-      if (existing) existing.remove();
-
-      const form = document.createElement('div');
-      form.className = 'user-detail-inline';
-      form.innerHTML = `
-        <div style="font-weight:600;margin-bottom:6px;">Edit: ${esc(user.username)}</div>
-        <select class="input-field" id="editRole_${userId}">
-          <option value="technician" ${user.role==='technician'?'selected':''}>Technician</option>
-          <option value="admin" ${user.role==='admin'?'selected':''}>Admin</option>
-          <option value="readonly" ${user.role==='readonly'?'selected':''}>Read-only</option>
-        </select>
-        <input type="password" class="input-field" id="editPassword_${userId}" placeholder="New password (leave blank to keep)">
-        <div style="display:flex;gap:8px;">
-          <button class="btn btn-sm btn-primary" style="flex:1;" data-action="saveEditUser" data-id="${userId}">Save</button>
-          <button class="btn btn-sm btn-outline" style="flex:1;" data-action="cancelAddUser">Cancel</button>
-        </div>
-      `;
-      el.insertBefore(form, el.firstChild);
-    }
-
-    async function saveEditUser(userId) {
-      const roleEl = document.getElementById(`editRole_${userId}`);
-      const pwEl = document.getElementById(`editPassword_${userId}`);
-      const payload = {};
-      if (roleEl) payload.role = roleEl.value;
-      if (pwEl && pwEl.value.trim()) payload.password = pwEl.value.trim();
-
-      if (!Object.keys(payload).length) { cancelAddUser(); return; }
-
-      try {
-        await api(`/api/users/${userId}`, {
-          method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload),
-        });
-        showToast('User updated!');
-        await loadUsers();
-        renderUsers();
-      } catch (e) { showToast(e.message, true); }
-    }
-
-    async function deleteUserById(userId) {
-      const user = (SettingsState.users || []).find(u => u.id === userId);
-      const name = user ? user.username : 'this user';
-      const conf = await showModal('Delete User', `Delete user "${name}"? This cannot be undone.`, 'Delete');
-      if (!conf) return;
-
-      try {
-        await api(`/api/users/${userId}`, { method: 'DELETE' });
-        showToast('User deleted');
-        await loadUsers();
-        renderUsers();
-      } catch (e) { showToast(e.message, true); }
-    }
-
-    // ── App Configuration ──
-
-    async function resetDatabase() {
-      const conf = await showModal('Reset Database',
-        'This will DELETE ALL DATA and re-seed the database. This cannot be undone!\n\nType "RESET" to confirm.',
-        'Reset Database');
-      if (!conf) return;
-      // Double-check with prompt
-      const input = prompt('Type RESET to confirm database wipe:');
-      if (input !== 'RESET') { showToast('Cancelled'); return; }
-
-      try {
-        await api('/api/admin/reset-db', { method: 'POST' });
-        showToast('Database reset! Refreshing...');
-        setTimeout(() => location.reload(), 1500);
-      } catch (e) {
-        showToast('Reset failed: ' + e.message, true);
-      }
-    }
-
-    // ── Register settings action handlers ──
-
-    registerAction('settingsAdd', (el) => { showAddForm(el.dataset.entity); });
-    registerAction('settingsEdit', (el) => { showEditForm(el.dataset.entity, parseInt(el.dataset.id)); });
-    registerAction('settingsDelete', (el) => { deleteSettingsItem(el.dataset.entity, parseInt(el.dataset.id)); });
-    registerAction('toggleMake', (el) => { toggleMake(parseInt(el.dataset.id)); });
-    registerAction('showAddModel', (el) => { showAddModel(parseInt(el.dataset.make)); });
-    registerAction('saveModel', (el) => { saveModel(parseInt(el.dataset.make)); });
-    registerAction('cancelAddModel', () => { cancelAddModel(); });
-    registerAction('saveNewItem', (el) => { saveNewItem(el.dataset.entity); });
-    registerAction('cancelAddForm', (el) => { cancelAddForm(el.dataset.entity); });
-    registerAction('saveEditItem', (el) => { saveEditItem(el.dataset.entity, parseInt(el.dataset.id)); });
-    registerAction('addUser', () => { showAddUserForm(); });
-    registerAction('editUser', (el) => { showEditUserForm(parseInt(el.dataset.id)); });
-    registerAction('deleteUser', (el) => { deleteUserById(parseInt(el.dataset.id)); });
-    registerAction('saveNewUser', () => { saveNewUser(); });
-    registerAction('cancelAddUser', () => { cancelAddUser(); });
-    registerAction('saveEditUser', (el) => { saveEditUser(parseInt(el.dataset.id)); });
-    registerAction('resetDatabase', () => { resetDatabase(); });
-
-    // ═══════════════════════════════════════════════════════════════════════
-    // OFFLINE QUEUE — IndexedDB-backed queue for asset creation while offline
-    // ═══════════════════════════════════════════════════════════════════════
-
-    const OFFLINE_DB_NAME = 'CanteenOfflineDB';
-    const OFFLINE_DB_VERSION = 1;
-    const OFFLINE_STORE = 'offlineQueue';
-
-    let offlineDB = null;
-
-    /** Open (or create) the IndexedDB for offline queue storage. */
-    function openOfflineDB() {
-      if (offlineDB) return Promise.resolve(offlineDB);
-      return new Promise((resolve, reject) => {
-        const req = indexedDB.open(OFFLINE_DB_NAME, OFFLINE_DB_VERSION);
-        req.onupgradeneeded = (e) => {
-          const db = e.target.result;
-          if (!db.objectStoreNames.contains(OFFLINE_STORE)) {
-            const store = db.createObjectStore(OFFLINE_STORE, { keyPath: 'id', autoIncrement: true });
-            store.createIndex('status', 'status', { unique: false });
-            store.createIndex('createdAt', 'createdAt', { unique: false });
-          }
-        };
-        req.onsuccess = (e) => { offlineDB = e.target.result; resolve(offlineDB); };
-        req.onerror = (e) => { reject(e.target.error); };
-      });
-    }
-
-    /** Store a create-asset request + optional photo blob in the offline queue. */
-    async function queueOfflineCreate(assetPayload, photoBlob) {
-      await openOfflineDB();
-      const entry = {
-        url: '/api/assets',
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(assetPayload),
-        photoBlob: photoBlob || null,
-        checkinGps: AppState.gpsLat ? { lat: AppState.gpsLat, lng: AppState.gpsLng, acc: AppState.gpsAcc } : null,
-        createdAt: new Date().toISOString(),
-        status: 'pending',
-        error: null,
-        retries: 0,
-      };
-      return new Promise((resolve, reject) => {
-        const tx = offlineDB.transaction(OFFLINE_STORE, 'readwrite');
-        const store = tx.objectStore(OFFLINE_STORE);
-        const req = store.add(entry);
-        req.onsuccess = () => { updateQueueUI(); resolve(req.result); };
-        req.onerror = () => reject(req.error);
-      });
-    }
-
-    /** Get count of pending queued items. */
-    async function getQueueCount() {
-      try {
-        await openOfflineDB();
-        return new Promise((resolve) => {
-          const tx = offlineDB.transaction(OFFLINE_STORE, 'readonly');
-          const store = tx.objectStore(OFFLINE_STORE);
-          const idx = store.index('status');
-          const req = idx.count('pending');
-          req.onsuccess = () => resolve(req.result);
-          req.onerror = () => resolve(0);
-        });
-      } catch (e) { return 0; }
-    }
-
-    /** Update the queue indicator UI. */
-    async function updateQueueUI() {
-      const count = await getQueueCount();
-      const qi = document.getElementById('queueIndicator');
-      const qc = document.getElementById('queueIndicatorCount');
-      const qb = document.getElementById('queueCountBadge');
-
-      if (count > 0) {
-        qi.classList.add('show');
-        qc.textContent = count;
-        if (qb) { qb.style.display = 'inline'; qb.textContent = count; }
-      } else {
-        qi.classList.remove('show');
-        if (qb) qb.style.display = 'none';
-      }
-    }
-
-    /** Upload a stored photo blob and return the server path. */
-    async function uploadQueuedPhoto(blob) {
-      const fd = new FormData();
-      fd.append('file', blob, 'photo.jpg');
-      const upData = await api('/api/upload/photo', { method: 'POST', body: fd });
-      return upData.path;
-    }
-
-    /** Process a single queued item. Returns true on success. */
-    async function processQueueItem(item) {
-      // Mark as syncing
-      await openOfflineDB();
-      await new Promise((resolve) => {
-        const tx = offlineDB.transaction(OFFLINE_STORE, 'readwrite');
-        const store = tx.objectStore(OFFLINE_STORE);
-        const req = store.get(item.id);
-        req.onsuccess = () => {
-          const record = req.result;
-          if (record) {
-            record.status = 'syncing';
-            store.put(record);
-          }
-          resolve();
-        };
-        req.onerror = () => resolve();
-      });
-
-      try {
-        // If there's a photo blob, upload it first
-        let photoPath = null;
-        if (item.photoBlob) {
-          try {
-            photoPath = await uploadQueuedPhoto(item.photoBlob);
-          } catch (e) {
-            console.warn('Queue: photo upload failed, continuing without photo:', e.message);
-          }
-        }
-
-        // Parse and update the payload with photo path
-        const payload = JSON.parse(item.body);
-        if (photoPath) payload.photo_path = photoPath;
-        if (item.checkinGps) {
-          payload.latitude = item.checkinGps.lat;
-          payload.longitude = item.checkinGps.lng;
-        }
-
-        // Create the asset
-        const asset = await api('/api/assets', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(payload),
-        });
-
-        // Auto check-in if we had GPS
-        if (item.checkinGps && asset && asset.id) {
-          try {
-            await api('/api/checkins', {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({
-                asset_id: asset.id,
-                latitude: item.checkinGps.lat,
-                longitude: item.checkinGps.lng,
-                accuracy: item.checkinGps.acc,
-                notes: 'Auto check-in on sync',
-              }),
-            });
-          } catch (e) { /* best-effort checkin */ }
-        }
-
-        // Mark as done
-        await openOfflineDB();
-        await new Promise((resolve) => {
-          const tx = offlineDB.transaction(OFFLINE_STORE, 'readwrite');
-          const store = tx.objectStore(OFFLINE_STORE);
-          const req = store.get(item.id);
-          req.onsuccess = () => {
-            const record = req.result;
-            if (record) {
-              record.status = 'done';
-              store.put(record);
-            }
-            resolve();
-          };
-          req.onerror = () => resolve();
-        });
-        return true;
-      } catch (e) {
-        // Check for conflict (409 / duplicate machine_id)
-        const isConflict = e.message && (
-          e.message.toLowerCase().includes('duplicate') ||
-          e.message.toLowerCase().includes('unique') ||
-          e.message.toLowerCase().includes('already exists') ||
-          e.message.toLowerCase().includes('conflict')
-        );
-
-        // Mark as failed (or done if conflict — don't retry duplicates)
-        await openOfflineDB();
-        await new Promise((resolve) => {
-          const tx = offlineDB.transaction(OFFLINE_STORE, 'readwrite');
-          const store = tx.objectStore(OFFLINE_STORE);
-          const req = store.get(item.id);
-          req.onsuccess = () => {
-            const record = req.result;
-            if (record) {
-              record.status = isConflict ? 'done' : 'failed';
-              record.error = e.message;
-              if (!isConflict) record.retries = (record.retries || 0) + 1;
-              store.put(record);
-            }
-            resolve();
-          };
-          req.onerror = () => resolve();
-        });
-        return isConflict; // conflicts count as "handled"
-      }
-    }
-
-    /** Process all pending items in the offline queue. */
-    async function processOfflineQueue() {
-      if (!navigator.onLine) {
-        showToast('Still offline — will sync when connected', true);
-        return;
-      }
-
-      await openOfflineDB();
-      const qi = document.getElementById('queueIndicator');
-      qi.classList.add('syncing');
-
-      // Get all pending items
-      const pendingItems = await new Promise((resolve) => {
-        const tx = offlineDB.transaction(OFFLINE_STORE, 'readonly');
-        const store = tx.objectStore(OFFLINE_STORE);
-        const req = store.getAll();
-        req.onsuccess = () => {
-          resolve((req.result || []).filter(i => i.status === 'pending' || i.status === 'failed'));
-        };
-        req.onerror = () => resolve([]);
-      });
-
-      if (pendingItems.length === 0) {
-        qi.classList.remove('syncing');
-        updateQueueUI();
-        return;
-      }
-
-      showToast(`Syncing ${pendingItems.length} offline item(s)...`);
-
-      let synced = 0;
-      for (const item of pendingItems) {
-        if (item.retries >= 5) {
-          // Give up after 5 retries
-          await openOfflineDB();
-          await new Promise((resolve) => {
-            const tx = offlineDB.transaction(OFFLINE_STORE, 'readwrite');
-            const store = tx.objectStore(OFFLINE_STORE);
-            const req = store.get(item.id);
-            req.onsuccess = () => {
-              const record = req.result;
-              if (record) { record.status = 'failed'; store.put(record); }
-              resolve();
-            };
-            req.onerror = () => resolve();
-          });
-          continue;
-        }
-
-        const ok = await processQueueItem(item);
-        if (ok) synced++;
-      }
-
-      qi.classList.remove('syncing');
-      updateQueueUI();
-
-      if (synced > 0) {
-        showToast(`Synced ${synced} item(s)!`);
-        // Refresh asset list if we're on that tab
-        if (AppState.currentTab === 'tabAssets') loadAssets();
-      } else if (pendingItems.length > synced) {
-        showToast(`${pendingItems.length - synced} item(s) failed to sync`, true);
-      }
-    }
-
-    // ── Offline/Online detection ───────────────────────────────────────────
-
-    function showOfflineBanner() {
-      document.getElementById('offlineBanner').classList.add('show');
-    }
-
-    function hideOfflineBanner() {
-      document.getElementById('offlineBanner').classList.remove('show');
-      // Auto-sync when coming back online
-      processOfflineQueue();
-    }
-
-    // ── Service Worker registration ────────────────────────────────────────
-
-    async function registerServiceWorker() {
-      if (!('serviceWorker' in navigator)) {
-        console.warn('Service Worker not supported — offline mode disabled');
-        return;
-      }
-      try {
-        const reg = await navigator.serviceWorker.register('/sw.js', { scope: '/' });
-        console.log('[SW] Registered, scope:', reg.scope);
-
-        // Listen for sync messages from SW
-        navigator.serviceWorker.addEventListener('message', (event) => {
-          if (event.data && event.data.type === 'PROCESS_OFFLINE_QUEUE') {
-            processOfflineQueue();
-          }
-        });
-      } catch (e) {
-        console.warn('[SW] Registration failed:', e.message);
-      }
-    }
-
-    // ── Override api() to queue offline writes ─────────────────────────────
-
-    const _originalApi = api;
-    window.api = async function apiWithOffline(url, opts = {}) {
-      const method = (opts.method || 'GET').toUpperCase();
-      const isWrite = ['POST', 'PUT', 'DELETE'].includes(method);
-      const isAssetCreate = url === '/api/assets' && method === 'POST';
-      const isCheckin = url === '/api/checkins' && method === 'POST';
-
-      // For non-write or when online, just pass through
-      if (!isWrite || navigator.onLine) {
-        try {
-          return await _originalApi(url, opts);
-        } catch (e) {
-          // If it failed with a network error and we're offline, queue it
-          if (isAssetCreate && (e.message === 'Network error — check your connection' || e.name === 'TypeError')) {
-            return await _handleOfflineAssetCreate(opts);
-          }
-          throw e;
-        }
-      }
-
-      // We're offline — queue asset creates
-      if (isAssetCreate) {
-        return await _handleOfflineAssetCreate(opts);
-      }
-
-      // For other writes while offline, show a toast
-      if (isWrite && !isCheckin) {
-        showToast('Offline — changes to assets will sync when connected', true);
-        throw new Error('Offline — unable to save. Asset creation is queued automatically.');
-      }
-
-      // Let checkins fail silently (they can be redone later)
-      throw new Error('Offline — check in later');
-    };
-
-    /** Extract asset payload from opts and queue it. Handles manual-mode photo blobs. */
-    async function _handleOfflineAssetCreate(opts) {
-      let payload, photoBlob = null;
-
-      if (typeof opts.body === 'string') {
-        try { payload = JSON.parse(opts.body); } catch (e) { payload = {}; }
-      } else if (opts.body instanceof FormData) {
-        // This shouldn't happen for asset create (it's JSON), but handle gracefully
-        payload = {};
-      } else {
-        payload = opts.body || {};
-      }
-
-      // Check for manual photo blob in the global variable
-      if (typeof manualPhotoBlob !== 'undefined' && manualPhotoBlob) {
-        photoBlob = manualPhotoBlob;
-        // Clear it so it doesn't get reused
-        manualPhotoBlob = null;
-      }
-
-      await queueOfflineCreate(payload, photoBlob);
-      showToast('📴 Queued offline — will sync when connected');
-      showOfflineBanner();
-
-      // Return a fake asset so the calling code doesn't crash
-      return { id: null, _queued: true, machine_id: payload.machine_id, name: payload.name };
-    }
-
-    // ── Init offline support ────────────────────────────────────────────────
-
-    async function initOfflineSupport() {
-      // Register SW
-      await registerServiceWorker();
-
-      // Open DB and update UI
-      await openOfflineDB();
-      await updateQueueUI();
-
-      // Online/offline events
-      window.addEventListener('online', () => {
-        console.log('[Offline] Back online — processing queue');
-        hideOfflineBanner();
-      });
-
-      window.addEventListener('offline', () => {
-        console.log('[Offline] Connection lost');
-        showOfflineBanner();
-      });
-
-      // Show banner immediately if already offline
-      if (!navigator.onLine) {
-        showOfflineBanner();
-      }
-    }
-
-    // ═══════════════════════════════════════════════════════════════════════
-    // INIT
-    // ═══════════════════════════════════════════════════════════════════════
-    initOfflineSupport();
-    initAuth();
-    initGPS();
-    startScanning();
-    loadAssets();
-    let pickedPhotoGps = null;  // { lat, lng, accuracy } or null
-
-    // ▶ Called when user picks a photo from gallery
-    async function handlePickedPhoto(event) {
-      const file = event.target.files[0];
-      if (!file) return;
-
-      pickedPhotoFile = file;
-      pickedPhotoGps = null;
-
-      // Show preview
-      const url = URL.createObjectURL(file);
-      const preview = document.getElementById('pickedPhotoPreview');
-      preview.src = url;
-      document.getElementById('photoPreviewCard').style.display = 'block';
-
-      // Clear any previous EXIF data display
-      const exifEl = document.getElementById('pickedExifData');
-      exifEl.style.display = 'none';
-      exifEl.innerHTML = '';
-
-      // Try EXIF GPS extraction immediately
-      await tryExtractGpsFromPicked();
-    }
-
-    // ▶ Core EXIF GPS extraction using exifr.js
-    async function extractGpsFromPhoto(file) {
-      try {
-        if (typeof exifr === 'undefined') {
-          console.warn('exifr not loaded');
-          return null;
-        }
-        const gps = await exifr.gps(file);
-        if (gps && gps.latitude != null && gps.longitude != null) {
-          return {
-            lat: gps.latitude,
-            lng: gps.longitude,
-            accuracy: gps.accuracy || null,
-          };
-        }
-        return null;
-      } catch (e) {
-        console.warn('EXIF GPS extraction failed:', e.message);
-        return null;
-      }
-    }
-
-    // ▶ Render a mini-map preview using Leaflet
     function renderGpsPreview(lat, lng, containerEl) {
       if (!containerEl) return;
       containerEl.innerHTML = '';
@@ -7246,6 +3827,9 @@
       if (gpsTag) gpsTag.style.display = 'none';
     };
 
+    // Boot auth at page load
+    document.addEventListener('DOMContentLoaded', () => { initAuth(); });
+
   </script>
 </body>
 </html>