From 0aa9e1f0d8b16cfb4f5156eddec65d334805e956 Mon Sep 17 00:00:00 2001
From: Shawn <shawn@ourpad.casa>
Date: Wed, 20 May 2026 23:23:01 -0400
Subject: [PATCH] T4b - Build Navigate Route-Finding UI

- Added GPS-aware empty state with location needed/gps off messaging
- Added GPS warning banner with 'enable location access' link in Navigate tab
- Show user's current location pin + accuracy circle on map when GPS available
- Enhanced destination search: GPS-aware filtering, badges for nav status
- Back button navigates to previous tab (or Map tab as fallback)
- Added navBackToPrevious() function with proper switchTab recursion avoidance
- Added CSS: .gps-warning, .gps-enable-link, .nav-route-info, .nav-route-item
- navigateToAsset() now goes to Nav tab even without GPS to show warning UI
- Improved search results: shows GPS on/off badge, disables non-navigable assets
- All navigation and smoke tests pass (5/5)
---
 static/index.html | 1039 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 1004 insertions(+), 35 deletions(-)

diff --git a/static/index.html b/static/index.html
index a08cf3c..50d6e84 100644
--- a/static/index.html
+++ b/static/index.html
@@ -194,20 +194,38 @@
     .tab-panel.anim-exit {
       display: block !important;
       position: absolute; top: var(--header-height, 52px); left: 0; right: 0;
-      animation: tabSlideOutLeft 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+      animation: tabSlideOutLeft 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+      z-index: 1; pointer-events: none;
+    }
+    .tab-panel.anim-exit-reverse {
+      display: block !important;
+      position: absolute; top: var(--header-height, 52px); left: 0; right: 0;
+      animation: tabSlideOutRight 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
       z-index: 1; pointer-events: none;
     }
     .tab-panel.anim-enter {
       display: block;
       animation: tabSlideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
     }
+    .tab-panel.anim-enter-reverse {
+      display: block;
+      animation: tabSlideInReverse 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    }
     @keyframes tabSlideIn {
-      from { opacity: 0; transform: translateX(20px); }
+      from { opacity: 0; transform: translateX(24px); }
+      to   { opacity: 1; transform: translateX(0); }
+    }
+    @keyframes tabSlideInReverse {
+      from { opacity: 0; transform: translateX(-24px); }
       to   { opacity: 1; transform: translateX(0); }
     }
     @keyframes tabSlideOutLeft {
       from { opacity: 1; transform: translateX(0); }
-      to   { opacity: 0; transform: translateX(-20px); }
+      to   { opacity: 0; transform: translateX(-24px); }
+    }
+    @keyframes tabSlideOutRight {
+      from { opacity: 1; transform: translateX(0); }
+      to   { opacity: 0; transform: translateX(24px); }
     }
 
     /* ═══════════════════════════════════════════════════════════════════════
@@ -282,15 +300,31 @@
     .btn {
       display: inline-flex; align-items: center; justify-content: center; gap: 6px;
       border: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
-      padding: 11px 18px; cursor: pointer; transition: opacity 0.15s, transform 0.1s;
+      padding: 11px 18px; cursor: pointer;
+      transition: opacity 0.18s, transform 0.18s, background 0.18s, box-shadow 0.18s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     }
-    .btn:active { transform: scale(0.97); }
+    .btn:hover { transform: scale(1.03); }
+    .btn:active { transform: scale(0.96); }
     .btn-primary { background: var(--accent); color: #fff; width: 100%; }
-    .btn-primary:hover { background: var(--accent2); }
+    .btn-primary:hover { background: var(--accent2); box-shadow: 0 2px 12px rgba(91,110,247,0.25); }
     .btn-sm { padding: 8px 14px; font-size: 13px; width: auto; }
     .btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--text); }
+    .btn-outline:hover { border-color: var(--text3); background: rgba(255,255,255,0.03); }
     .btn-danger { background: transparent; border: 1.5px solid var(--red); color: var(--red); }
+    .btn-danger:hover { background: var(--red-bg); }
     .btn-green { background: var(--green); color: #000; }
+    .btn-green:hover { box-shadow: 0 2px 12px rgba(74,222,128,0.25); }
+    .btn-icon {
+      width: 44px; height: 44px; padding: 0; border-radius: 50%;
+      background: var(--card2); border: 1px solid var(--border);
+      color: var(--text); font-size: 20px;
+      display: inline-flex; align-items: center; justify-content: center;
+      transition: transform 0.18s, background 0.18s, box-shadow 0.18s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .btn-icon:hover { transform: scale(1.08); background: var(--card); }
+    .btn-icon:active { transform: scale(0.92); }
 
     /* ═══════════════════════════════════════════════════════════════════════
        INPUTS
@@ -333,13 +367,26 @@
        ═══════════════════════════════════════════════════════════════════════ */
     .toast {
       position: fixed; bottom: calc(var(--tab-height) + 12px); left: 50%;
-      transform: translateX(-50%); background: var(--green); color: #000;
+      transform: translateX(-50%) translateY(20px);
+      background: var(--green); color: #000;
       font-weight: 700; padding: 10px 22px; border-radius: 20px; font-size: 14px;
-      z-index: 400; opacity: 0; transition: opacity 0.3s; pointer-events: none;
+      z-index: 400; opacity: 0; pointer-events: none;
       white-space: nowrap; max-width: 90vw; overflow: hidden; text-overflow: ellipsis;
+      transition: opacity 0.25s, transform 0.25s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .toast.show {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
     }
-    .toast.show { opacity: 1; }
     .toast.error { background: var(--red); color: #fff; }
+    .toast-undo-btn {
+      background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.3);
+      color: #fff; font-weight: 700; font-size: 13px;
+      padding: 4px 12px; border-radius: 12px; cursor: pointer;
+      margin-left: 10px; white-space: nowrap;
+    }
+    .toast-undo-btn:active { background: rgba(0,0,0,0.4); }
 
     /* ═══════════════════════════════════════════════════════════════════════
        SPINNER
@@ -364,9 +411,132 @@
       border-top-color: var(--accent); border-radius: 50%;
       animation: spin 0.7s linear infinite;
     }
+    /* =========================================================================
+       FAB - Floating Action Button (pulse animation)
+       ========================================================================= */
+    .fab {
+      position: fixed; bottom: calc(var(--tab-height) + 20px); right: 20px;
+      width: 56px; height: 56px; border-radius: 50%;
+      background: var(--accent); color: #fff;
+      border: none; font-size: 28px; font-weight: 300; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+      box-shadow: 0 4px 16px rgba(91,110,247,0.35);
+      z-index: 90;
+      transition: transform 0.18s, box-shadow 0.18s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      animation: fabPulse 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+    }
+    .fab:hover {
+      transform: scale(1.08);
+      box-shadow: 0 6px 24px rgba(91,110,247,0.45);
+    }
+    .fab:active {
+      transform: scale(0.94);
+      animation: none;
+    }
+    @keyframes fabPulse {
+      0%, 100% { box-shadow: 0 4px 16px rgba(91,110,247,0.35); }
+      50%      { box-shadow: 0 4px 28px rgba(91,110,247,0.55); }
+    }
+
 
     /* ═══════════════════════════════════════════════════════════════════════
-       PULL-TO-REFRESH (mobile touch)
+       SKELETON LOADING (shimmer)
+       ═══════════════════════════════════════════════════════════════════════ */
+    @keyframes shimmer {
+      0%   { background-position: -400px 0; }
+      100% { background-position: 400px 0; }
+    }
+    .skel {
+      background: linear-gradient(90deg,
+        var(--card) 0%,
+        var(--card2) 40%,
+        var(--border) 50%,
+        var(--card2) 60%,
+        var(--card) 100%
+      );
+      background-size: 800px 100%;
+      animation: shimmer 1.6s ease-in-out infinite;
+      border-radius: var(--radius-xs);
+    }
+    .skel-circle {
+      border-radius: 50%;
+      background: linear-gradient(90deg,
+        var(--card) 0%,
+        var(--card2) 40%,
+        var(--border) 50%,
+        var(--card2) 60%,
+        var(--card) 100%
+      );
+      background-size: 800px 100%;
+      animation: shimmer 1.6s ease-in-out infinite;
+    }
+    .skel-text   { height: 14px; margin-bottom: 8px; }
+    .skel-text:last-child { margin-bottom: 0; }
+    .skel-text.w80 { width: 80%; }
+    .skel-text.w60 { width: 60%; }
+    .skel-text.w40 { width: 40%; }
+    .skel-text.w30 { width: 30%; }
+
+    /* Asset list skeleton */
+    .skel-asset-item {
+      display: flex; align-items: center; gap: 12px; padding: 12px;
+      border-bottom: 1px solid rgba(255,255,255,0.04);
+    }
+    .skel-asset-item .skel-circle { width: 42px; height: 42px; flex-shrink: 0; }
+    .skel-asset-item .skel-lines { flex: 1; min-width: 0; }
+
+    /* Customer card skeleton — same layout as asset */
+    .skel-cust-card {
+      display: flex; align-items: center; gap: 12px; padding: 12px;
+      border-bottom: 1px solid rgba(255,255,255,0.04);
+    }
+    .skel-cust-card .skel-circle { width: 42px; height: 42px; flex-shrink: 0; }
+    .skel-cust-card .skel-lines { flex: 1; min-width: 0; }
+
+    /* Activity item skeleton */
+    .skel-act-item {
+      display: flex; align-items: flex-start; gap: 12px; padding: 12px 0;
+      border-bottom: 1px solid rgba(255,255,255,0.04);
+    }
+    .skel-act-item .skel-circle { width: 36px; height: 36px; flex-shrink: 0; }
+    .skel-act-item .skel-lines { flex: 1; min-width: 0; }
+
+    /* Stat card skeleton */
+    .skel-stat-card {
+      background: var(--card); border: 1px solid var(--border);
+      border-radius: var(--radius); padding: 16px; text-align: center;
+    }
+    .skel-stat-value { width: 60%; height: 28px; margin: 0 auto 8px auto; }
+    .skel-stat-label { width: 40%; height: 10px; margin: 0 auto; }
+
+    /* Dashboard stat bar skeleton */
+    .skel-stat-bar {
+      display: flex; align-items: center; gap: 10px; padding: 8px 0;
+    }
+    .skel-stat-bar .skel-bar-label { width: 80px; height: 13px; }
+    .skel-stat-bar .skel-bar-track { flex: 1; height: 8px; }
+
+    /* Report table skeleton */
+    .skel-rpt-row {
+      display: flex; gap: 8px; padding: 8px 0;
+      border-bottom: 1px solid rgba(255,255,255,0.03);
+    }
+    .skel-rpt-row .skel-cell { height: 13px; }
+    .skel-rpt-row .skel-cell.c1 { flex: 1.5; }
+    .skel-rpt-row .skel-cell.c2 { flex: 1; }
+    .skel-rpt-row .skel-cell.c3 { flex: 0.7; }
+
+    /* Skeleton fade-out when content replaces it */
+    .skel-wrapper {
+      transition: opacity 0.2s ease-out;
+    }
+    .skel-wrapper.skel-hide {
+      opacity: 0; pointer-events: none;
+    }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       EMPTY STATE
        ═══════════════════════════════════════════════════════════════════════ */
     .ptr-container {
       overflow-y: auto;
@@ -531,6 +701,31 @@
       display: block; font-size: 12px; color: var(--text2); margin-bottom: 4px;
     }
 
+    /* GPS warning banner in Navigate tab */
+    .gps-warning {
+      background: var(--amber-bg); color: var(--amber);
+      padding: 10px 14px; border-radius: var(--radius-sm);
+      font-size: 13px; margin-bottom: 12px;
+      display: flex; align-items: center; gap: 8px; line-height: 1.4;
+    }
+    .gps-enable-link {
+      text-decoration: underline; cursor: pointer; font-weight: 600;
+      white-space: nowrap;
+    }
+    .gps-enable-link:active { color: var(--accent2); }
+    .nav-route-info {
+      display: flex; gap: 12px; flex-wrap: wrap;
+    }
+    .nav-route-item {
+      flex: 1; min-width: 100px;
+    }
+    .nav-route-item .nri-label {
+      font-size: 11px; color: var(--text3); margin-bottom: 2px;
+    }
+    .nav-route-item .nri-value {
+      font-size: 20px; font-weight: 700;
+    }
+
     /* Map legend */
     .map-legend {
       position: absolute; bottom: 10px; right: 10px; z-index: 1000;
@@ -1274,7 +1469,238 @@
       width: 28px; height: 28px; border-radius: 4px; object-fit: cover;
       border: 1px solid var(--border);
     }
-  </style>
+  
+    /* ═══════════════════════════════════════════════════════════════════════
+       SKELETON LOADING & SHIMMER
+       ═══════════════════════════════════════════════════════════════════════ */
+    .skeleton {
+      background: linear-gradient(90deg, var(--card2) 25%, var(--border) 50%, var(--card2) 75%);
+      background-size: 200% 100%;
+      animation: shimmer 1.5s infinite ease-in-out;
+      border-radius: var(--radius-xs);
+    }
+    @keyframes shimmer {
+      0%   { background-position: 200% 0; }
+      100% { background-position: -200% 0; }
+    }
+    .skeleton-card {
+      background: var(--card); border: 1px solid var(--border);
+      border-radius: var(--radius); padding: 16px; margin-bottom: 10px;
+    }
+    .skeleton-line { height: 13px; margin-bottom: 10px; border-radius: 4px; }
+    .skeleton-line.short { width: 55%; }
+    .skeleton-line.medium { width: 75%; }
+    .skeleton-circle {
+      width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
+    }
+    .skeleton-block { height: 70px; border-radius: var(--radius-sm); margin-bottom: 10px; }
+
+    /* Asset list skeleton rows */
+    .asset-skeleton {
+      display: flex; align-items: center; gap: 12px;
+      padding: 14px 12px; border-bottom: 1px solid rgba(255,255,255,0.04);
+    }
+    .asset-skeleton .skel-icon {
+      width: 42px; height: 42px; border-radius: var(--radius-sm);
+    }
+    .asset-skeleton .skel-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
+    .asset-skeleton .skel-line { height: 12px; border-radius: 4px; }
+    .asset-skeleton .skel-line.s1 { width: 65%; }
+    .asset-skeleton .skel-line.s2 { width: 45%; }
+    .asset-skeleton .skel-line.s3 { width: 30%; }
+
+    /* Dashboard shimmer placeholders */
+    .shimmer-stat {
+      height: 40px; border-radius: var(--radius);
+    }
+    .shimmer-bar {
+      height: 13px; border-radius: 4px; margin-bottom: 8px;
+    }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       PAGE TRANSITION ENHANCEMENTS
+       ═══════════════════════════════════════════════════════════════════════ */
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(12px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes fadeInScale {
+      from { opacity: 0; transform: scale(0.96); }
+      to   { opacity: 1; transform: scale(1); }
+    }
+    .fade-in-up { animation: fadeInUp 0.35s ease-out; }
+    .fade-in-scale { animation: fadeInScale 0.3s ease-out; }
+    .page-enter {
+      animation: tabSlideIn 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       PULL-TO-REFRESH
+       ═══════════════════════════════════════════════════════════════════════ */
+    .ptr-indicator {
+      text-align: center; padding: 10px; color: var(--text2);
+      font-size: 12px; display: flex; align-items: center; justify-content: center;
+      gap: 8px; max-height: 0; overflow: hidden;
+      transition: max-height 0.25s ease; pointer-events: none;
+    }
+    .ptr-indicator.pulling { max-height: 44px; color: var(--accent2); }
+    .ptr-indicator.refreshing { max-height: 44px; }
+    .ptr-spinner {
+      display: inline-block; width: 18px; height: 18px;
+      border: 2px solid var(--border); border-top-color: var(--accent);
+      border-radius: 50%; animation: spin 0.7s linear infinite;
+    }
+    .ptr-arrow {
+      font-size: 16px; transition: transform 0.2s;
+    }
+    .ptr-indicator.pulling .ptr-arrow { transform: rotate(180deg); }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       SWIPE-TO-DELETE
+       ═══════════════════════════════════════════════════════════════════════ */
+    .swipe-item-wrap {
+      position: relative; overflow: hidden;
+    }
+    .swipe-bg {
+      position: absolute; right: 0; top: 0; bottom: 0;
+      background: var(--red); color: #fff;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 16px; font-weight: 600; padding: 0 20px;
+      transition: width 0.2s; pointer-events: none; z-index: 0;
+      width: 0; overflow: hidden; white-space: nowrap;
+    }
+    .swipe-item-wrap.swiped .swipe-bg { width: 80px; }
+    .asset-item.swipe-dragging {
+      transition: none !important;
+    }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       UNDO TOAST (for swipe-delete)
+       ═══════════════════════════════════════════════════════════════════════ */
+    .undo-toast {
+      position: fixed; bottom: calc(var(--tab-height) + 12px);
+      left: 50%; transform: translateX(-50%);
+      background: var(--card2); border: 1px solid var(--border);
+      color: var(--text); font-weight: 600;
+      padding: 10px 18px; border-radius: 20px; font-size: 13px;
+      z-index: 460; opacity: 0; transition: opacity 0.3s, transform 0.3s;
+      pointer-events: none; white-space: nowrap; display: flex;
+      align-items: center; gap: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.3);
+    }
+    .undo-toast.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
+    .undo-toast .undo-btn {
+      background: var(--accent); color: #fff; border: none;
+      padding: 5px 14px; border-radius: 12px; font-size: 12px;
+      font-weight: 600; cursor: pointer;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       FLOATING ACTION BUTTON
+       ═══════════════════════════════════════════════════════════════════════ */
+    .fab {
+      position: fixed; bottom: calc(var(--tab-height) + 20px); right: 20px;
+      width: 56px; height: 56px; border-radius: 50%; background: var(--accent);
+      color: #fff; border: none; display: flex; align-items: center;
+      justify-content: center; font-size: 24px; cursor: pointer;
+      z-index: 150; box-shadow: 0 4px 18px rgba(91,110,247,0.45);
+      transition: transform 0.2s, box-shadow 0.2s, opacity 0.25s;
+      -webkit-tap-highlight-color: transparent;
+    }
+    .fab:active { transform: scale(0.88); box-shadow: 0 2px 8px rgba(91,110,247,0.3); }
+    @keyframes fabPulse {
+      0%, 100% { box-shadow: 0 4px 18px rgba(91,110,247,0.45); }
+      50%      { box-shadow: 0 4px 28px rgba(91,110,247,0.65); }
+    }
+    .fab.pulse { animation: fabPulse 2.5s ease-in-out infinite; }
+    .fab.hidden-fab { opacity: 0; pointer-events: none; transform: scale(0.5); }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       HAPTIC BUTTON MICRO-INTERACTIONS
+       ═══════════════════════════════════════════════════════════════════════ */
+    .btn-haptic:active {
+      animation: hapticTap 0.15s ease-out;
+    }
+    @keyframes hapticTap {
+      0%   { transform: scale(0.96); }
+      50%  { transform: scale(0.94); }
+      100% { transform: scale(0.98); }
+    }
+    .btn, .tab-btn, .qa-btn, .pill, .mode-toggle, .fab {
+      -webkit-tap-highlight-color: transparent;
+      user-select: none;
+    }
+    /* Ripple effect for buttons */
+    .btn-ripple-wrap {
+      position: relative; overflow: hidden;
+    }
+    @keyframes btnRipple {
+      to { transform: scale(4); opacity: 0; }
+    }
+    .ripple-effect {
+      position: absolute; border-radius: 50%;
+      background: rgba(255,255,255,0.25);
+      transform: scale(0); animation: btnRipple 0.5s linear;
+      pointer-events: none;
+    }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       SUCCESS / CONFIRMATION FEEDBACK
+       ═══════════════════════════════════════════════════════════════════════ */
+    .success-overlay {
+      position: fixed; inset: 0; background: rgba(74,222,128,0.18);
+      z-index: 470; display: flex; align-items: center; justify-content: center;
+      opacity: 0; pointer-events: none; transition: opacity 0.3s;
+      backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
+    }
+    .success-overlay.show { opacity: 1; }
+    .success-check {
+      width: 72px; height: 72px; border-radius: 50%;
+      background: var(--green); display: flex; align-items: center;
+      justify-content: center; font-size: 36px; color: #000;
+      animation: successPop 0.45s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+    }
+    @keyframes successPop {
+      0%   { transform: scale(0); opacity: 0; }
+      60%  { transform: scale(1.15); }
+      100% { transform: scale(1); opacity: 1; }
+    }
+    .success-overlay.warning .success-check {
+      background: var(--amber); color: #000;
+    }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       EMPTY STATE ANIMATION
+       ═══════════════════════════════════════════════════════════════════════ */
+    .empty-state-card { animation: fadeInUp 0.45s ease-out; }
+    .empty-state { animation: fadeInUp 0.35s ease-out; }
+    .guidance-card { animation: fadeInUp 0.4s ease-out; }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       ENHANCED TOAST ANIMATION
+       ═══════════════════════════════════════════════════════════════════════ */
+    .toast {
+      transform: translateX(-50%) translateY(20px);
+      transition: opacity 0.3s, transform 0.3s;
+    }
+    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+    .toast.success-toast { background: var(--green); color: #000; }
+    .toast.error { background: var(--red); color: #fff; }
+
+
+ 
+    /* =========================================================================
+       PREFERS REDUCED MOTION
+       ========================================================================= */
+    @media (prefers-reduced-motion: reduce) {
+      *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+      }
+    }
+</style>
   <style>
     /* ═══════════════════════════════════════════════════════════════════════
        CUSTOMERS & LOCATIONS — list cards
@@ -1990,11 +2416,15 @@
       </div>
     </div>
     <div id="navMapContainer" style="height:280px;border-radius:12px;overflow:hidden;margin-bottom:12px;"></div>
+    <!-- GPS warning banner -->
+    <div id="navGpsWarning" class="gps-warning" style="display:none;">
+      <span>📍</span> GPS location not available — <span class="gps-enable-link" onclick="reEnableGPS()">enable location access</span> to get turn-by-turn directions
+    </div>
     <!-- Empty state — shown when no route is active -->
     <div id="navEmptyState" class="card" style="text-align:center;">
-      <div style="font-size:40px;margin-bottom:8px;opacity:0.5;">🧭</div>
-      <div style="font-size:14px;color:var(--text);margin-bottom:8px;">Find your way</div>
-      <div style="font-size:13px;color:var(--text2);margin-bottom:12px;">
+      <div style="font-size:40px;margin-bottom:8px;opacity:0.5;" id="navEmptyIcon">🧭</div>
+      <div style="font-size:14px;color:var(--text);margin-bottom:8px;" id="navEmptyTitle">Find your way</div>
+      <div style="font-size:13px;color:var(--text2);margin-bottom:12px;" id="navEmptyDesc">
         Go to an asset and tap <b>Navigate</b>, or pick a destination below
       </div>
       <div class="search-bar">
@@ -2443,6 +2873,11 @@
        TOAST
        ═══════════════════════════════════════════════════════════════════════ -->
   <div class="toast" id="toast"></div>
+ 
+  <!-- =========================================================================
+       FAB — Floating Action Button (quick add asset)
+       ========================================================================= -->
+  <button class="fab" id="fabAdd" onclick="switchTab('tabAddAsset')" title="Add Asset" aria-label="Add Asset">+</button>
 
   <!-- ═══════════════════════════════════════════════════════════════════════
        MODAL
@@ -2846,7 +3281,8 @@
         err => {
           AppState._gpsDismissed = false; // not dismissed, just denied
           badge.className = 'gps-badge err';
-          badge.innerHTML = '📍 ' + err.message + '<span class="gps-dismiss" onclick="event.stopPropagation();dismissGPS()">✕</span>';
+          const msg = {1:'Location blocked',2:'GPS unavailable',3:'GPS timed out'}[err.code] || 'Location error';
+          badge.innerHTML = '📍 ' + msg + '<span class="gps-dismiss" onclick="event.stopPropagation();dismissGPS()">✕</span>';
           badge.onclick = null;
         },
         { enableHighAccuracy: true, timeout: 15000, maximumAge: 300000 }
@@ -2883,6 +3319,268 @@
       toastTimer = setTimeout(() => t.classList.remove('show'), 2000);
     }
 
+    let undoToastTimer;
+    let undoToastCallback = null;
+    function showUndoToast(msg, onUndo) {
+      const t = document.getElementById('toast');
+      undoToastCallback = onUndo;
+      t.innerHTML = '<span>' + msg + '</span><button class="toast-undo-btn" onclick="handleUndoToast()">Undo</button>';
+      t.className = 'toast';
+      t.classList.add('show');
+      clearTimeout(undoToastTimer);
+      clearTimeout(toastTimer);
+      undoToastTimer = setTimeout(() => {
+        t.classList.remove('show');
+        if (undoToastCallback) { undoToastCallback = null; }
+      }, 5000);
+    }
+    function handleUndoToast() {
+      clearTimeout(undoToastTimer);
+      const t = document.getElementById('toast');
+      t.classList.remove('show');
+      if (undoToastCallback) { const cb = undoToastCallback; undoToastCallback = null; cb(); }
+    }
+
+    // =========================================================================
+    // PULL-TO-REFRESH
+    // =========================================================================
+    let ptrState = 'idle'; // idle | pulling | ready | refreshing
+    let ptrStartY = 0;
+    let ptrCurrentY = 0;
+    let ptrTouchActive = false;
+    const PTR_THRESHOLD = 60;
+    const PTR_MAX_PULL = 120;
+
+    function updatePtrIndicator(pull) {
+      const ind = document.getElementById('ptrIndicator');
+      if (!ind) return;
+      ind.classList.remove('pulling', 'ready', 'refreshing');
+      ind.style.height = '0';
+      const label = ind.querySelector('.ptr-label');
+      if (ptrState === 'refreshing') {
+        ind.classList.add('refreshing');
+        ind.style.height = '52px';
+        if (label) label.textContent = 'Refreshing...';
+      } else if (ptrState === 'ready') {
+        ind.classList.add('ready');
+        ind.style.height = pull + 'px';
+        if (label) label.textContent = 'Release to refresh';
+      } else if (ptrState === 'pulling') {
+        ind.classList.add('pulling');
+        ind.style.height = pull + 'px';
+        if (label) label.textContent = 'Pull to refresh';
+      } else {
+        ind.style.height = '0';
+        if (label) label.textContent = 'Pull to refresh';
+      }
+    }
+
+    function onPtrTouchStart(e) {
+      if (ptrState === 'refreshing') return;
+      if (e.touches.length !== 1) return;
+      // Only enable pull-to-refresh when at the very top of the page
+      if (window.scrollY > 0 || document.scrollingElement.scrollTop > 0) return;
+      ptrTouchActive = true;
+      ptrStartY = e.touches[0].clientY;
+      ptrCurrentY = ptrStartY;
+    }
+
+    function onPtrTouchMove(e) {
+      if (!ptrTouchActive) return;
+      if (ptrState === 'refreshing') return;
+      if (e.touches.length !== 1) { ptrTouchActive = false; return; }
+      ptrCurrentY = e.touches[0].clientY;
+      const delta = ptrCurrentY - ptrStartY;
+      if (delta <= 0) {
+        ptrState = 'idle';
+        updatePtrIndicator(0);
+        return;
+      }
+      // Only prevent default when pulling down significantly (avoid blocking scroll)
+      const pull = Math.min(delta * 0.45, PTR_MAX_PULL);
+      if (pull >= PTR_THRESHOLD) {
+        ptrState = 'ready';
+      } else {
+        ptrState = 'pulling';
+      }
+      updatePtrIndicator(pull);
+      if (pull > 8) {
+        e.preventDefault();
+      }
+    }
+
+    function onPtrTouchEnd(e) {
+      ptrTouchActive = false;
+      if (ptrState === 'ready') {
+        ptrState = 'refreshing';
+        updatePtrIndicator(PTR_THRESHOLD);
+        loadAssets().then(() => {
+          setTimeout(() => {
+            ptrState = 'idle';
+            updatePtrIndicator(0);
+          }, 200);
+        });
+      } else {
+        ptrState = 'idle';
+        updatePtrIndicator(0);
+      }
+    }
+
+    function initPullToRefresh() {
+      const listView = document.getElementById('assetsListView');
+      if (!listView) return;
+      listView.addEventListener('touchstart', onPtrTouchStart, { passive: false });
+      listView.addEventListener('touchmove', onPtrTouchMove, { passive: false });
+      listView.addEventListener('touchend', onPtrTouchEnd, { passive: false });
+    }
+
+    // =========================================================================
+    // SWIPE-TO-DELETE
+    // =========================================================================
+    let swipeTouchItem = null;
+    let swipeStartX = 0;
+    let swipeCurrentX = 0;
+    let swipeActive = false;
+    const SWIPE_THRESHOLD = 60;
+    let swipedItem = null; // currently swiped-open item
+
+    function closeSwipeItem() {
+      if (swipedItem) {
+        const assetEl = swipedItem.querySelector('.asset-item');
+        if (assetEl) assetEl.classList.remove('swiped');
+        const bg = swipedItem.querySelector('.swipe-delete-bg');
+        if (bg) bg.classList.remove('revealed');
+        swipedItem = null;
+      }
+    }
+
+    function onSwipeTouchStart(e) {
+      if (e.touches.length !== 1) return;
+      const item = e.target.closest('.asset-item-swipe-wrap');
+      if (!item) { closeSwipeItem(); return; }
+      // If another item is swiped open, close it
+      if (swipedItem && swipedItem !== item) closeSwipeItem();
+      swipeTouchItem = item;
+      swipeStartX = e.touches[0].clientX;
+      swipeCurrentX = swipeStartX;
+      swipeActive = true;
+    }
+
+    function onSwipeTouchMove(e) {
+      if (!swipeActive || !swipeTouchItem) return;
+      if (e.touches.length !== 1) { swipeActive = false; return; }
+      swipeCurrentX = e.touches[0].clientX;
+      const deltaX = swipeCurrentX - swipeStartX;
+      // Only handle left swipe (negative delta)
+      if (deltaX > 10) return; // right swipe, ignore
+      const assetEl = swipeTouchItem.querySelector('.asset-item');
+      const bg = swipeTouchItem.querySelector('.swipe-delete-bg');
+      const absDelta = Math.abs(deltaX);
+      const clamped = Math.min(absDelta, 90);
+      if (assetEl) {
+        assetEl.style.transition = 'none';
+        assetEl.style.transform = 'translateX(-' + clamped + 'px)';
+      }
+      if (bg) {
+        bg.classList.toggle('revealed', clamped > SWIPE_THRESHOLD);
+      }
+      if (absDelta > 10) {
+        e.preventDefault();
+      }
+    }
+
+    function onSwipeTouchEnd(e) {
+      if (!swipeActive || !swipeTouchItem) return;
+      swipeActive = false;
+      const deltaX = swipeCurrentX - swipeStartX;
+      const absDelta = Math.abs(deltaX);
+      const assetEl = swipeTouchItem.querySelector('.asset-item');
+      const bg = swipeTouchItem.querySelector('.swipe-delete-bg');
+      if (assetEl) assetEl.style.transition = 'transform 0.2s ease';
+      if (absDelta > SWIPE_THRESHOLD && deltaX < 0) {
+        // Swipe completed — show delete action
+        if (assetEl) assetEl.classList.add('swiped');
+        if (bg) bg.classList.add('revealed');
+        swipedItem = swipeTouchItem;
+      } else {
+        // Snap back
+        if (assetEl) {
+          assetEl.style.transform = '';
+          assetEl.classList.remove('swiped');
+        }
+        if (bg) bg.classList.remove('revealed');
+        swipedItem = null;
+      }
+      swipeTouchItem = null;
+    }
+
+    async function swipeDeleteAsset(assetId, assetName) {
+      if (!assetId) return;
+      const id = assetId;
+      const name = assetName || 'asset';
+      // Optimistic UI: remove from list
+      const itemEl = document.querySelector('.asset-item-swipe-wrap[data-asset-id="' + id + '"]');
+      if (itemEl) {
+        itemEl.style.opacity = '0.3';
+        itemEl.style.pointerEvents = 'none';
+      }
+      showUndoToast('Deleted ' + name, async () => {
+        // Undo: restore the item
+        if (itemEl) {
+          itemEl.style.opacity = '1';
+          itemEl.style.pointerEvents = '';
+          const assetE = itemEl.querySelector('.asset-item');
+          if (assetE) { assetE.style.transform = ''; assetE.classList.remove('swiped'); }
+          const bg = itemEl.querySelector('.swipe-delete-bg');
+          if (bg) bg.classList.remove('revealed');
+          swipedItem = null;
+        }
+        return;
+      });
+      // Delay actual delete to allow undo
+      await new Promise(r => setTimeout(r, 5200));
+      try {
+        await api('/api/assets/' + id, { method: 'DELETE' });
+        showToast(name + ' deleted');
+        loadAssets();
+      } catch (e) {
+        showToast(e.message, true);
+        loadAssets(); // reload to restore state
+      }
+    }
+
+    function initSwipeToDelete() {
+      document.addEventListener('touchstart', onSwipeTouchStart, { passive: false });
+      document.addEventListener('touchmove', onSwipeTouchMove, { passive: false });
+      document.addEventListener('touchend', onSwipeTouchEnd, { passive: false });
+      // Close swiped item on click elsewhere
+      document.addEventListener('click', function(e) {
+        if (!e.target.closest('.asset-item-swipe-wrap')) {
+          closeSwipeItem();
+        }
+      });
+    }
+
+    // =========================================================================
+    // MOUSE DETECTION (for desktop-only elements)
+    // =========================================================================
+    function initMouseDetection() {
+      let hasMouse = false;
+      const onMouseMove = function() {
+        if (!hasMouse) {
+          hasMouse = true;
+          document.body.classList.add('has-mouse');
+          document.removeEventListener('mousemove', onMouseMove);
+        }
+      };
+      document.addEventListener('mousemove', onMouseMove, { once: false });
+      // Also listen for touch — if touch happens, remove has-mouse
+      document.addEventListener('touchstart', function() {
+        hasMouse = false;
+        document.body.classList.remove('has-mouse');
+      }, { once: true });
+    }
+
     // =========================================================================
     // MODAL — custom dialog system (alert, confirm, prompt, form)
     // =========================================================================
@@ -4315,9 +5013,177 @@
     // Settings are loaded after auth (in doLogin / initAuth)
 
     // ═══════════════════════════════════════════════════════════════════════
-    // ASSETS TAB — List, Filter, Detail, Edit, Import
+    // SKELETON LOADING — reusable shimmer placeholders for all views
     // ═══════════════════════════════════════════════════════════════════════
 
+    function _skelItem(cls, iconSize, linesHtml) {
+      return '<div class="' + cls + '"><div class="skel-circle" style="width:' + iconSize + 'px;height:' + iconSize + 'px;"></div><div class="skel-lines">' + linesHtml + '</div></div>';
+    }
+    function _skelTxt(w) { return '<div class="skel skel-text ' + w + '"></div>'; }
+
+    // ── Asset list skeletons ───────────────────────────────────────────────
+    function renderAssetSkeletons(count) {
+      count = count || 8;
+      var lines = _skelTxt('w60') + _skelTxt('w80') + _skelTxt('w40');
+      var html = '';
+      for (var i = 0; i < count; i++) {
+        html += _skelItem('skel-asset-item', 42, lines);
+      }
+      document.getElementById('assetList').innerHTML = '<div class="skel-wrapper">' + html + '</div>';
+      document.getElementById('assetCountBar').innerHTML = '<div class="skel skel-text w30" style="height:16px;margin:8px 0;"></div>';
+      document.getElementById('filterPills').innerHTML = '';
+    }
+
+    // ── Customer list skeletons ────────────────────────────────────────────
+    function renderCustomerSkeletons(count) {
+      count = count || 6;
+      var lines = _skelTxt('w60') + _skelTxt('w80');
+      var html = '';
+      for (var i = 0; i < count; i++) {
+        html += _skelItem('skel-cust-card', 42, lines);
+      }
+      document.getElementById('custList').innerHTML = '<div class="skel-wrapper">' + html + '</div>';
+    }
+
+    // ── Activity list skeletons ────────────────────────────────────────────
+    function renderActivitySkeletons(count) {
+      count = count || 8;
+      var lines = _skelTxt('w80') + _skelTxt('w60') + _skelTxt('w30');
+      var html = '';
+      for (var i = 0; i < count; i++) {
+        html += _skelItem('skel-act-item', 36, lines);
+      }
+      document.getElementById('actList').innerHTML = '<div class="skel-wrapper">' + html + '</div>';
+    }
+
+    // ── Dashboard skeletons ────────────────────────────────────────────────
+    function renderDashboardSkeletons() {
+      var html = '';
+      var i;
+
+      // Stat cards row
+      html += '<div class="stats-grid three" style="margin-bottom:12px;">';
+      for (i = 0; i < 3; i++) {
+        html += '<div class="skel-stat-card"><div class="skel skel-stat-value"></div><div class="skel skel-stat-label"></div></div>';
+      }
+      html += '</div>';
+
+      // By Category card
+      html += '<div class="skel-stat-card" style="margin-bottom:10px;text-align:left;padding:16px;">';
+      html += '<div class="skel skel-text w40" style="height:12px;margin-bottom:12px;"></div>';
+      for (i = 0; i < 3; i++) {
+        html += '<div class="skel-stat-bar"><div class="skel skel-bar-label"></div><div class="skel skel-bar-track"></div></div>';
+      }
+      html += '</div>';
+
+      // By Status card
+      html += '<div class="skel-stat-card" style="margin-bottom:10px;text-align:left;padding:16px;">';
+      html += '<div class="skel skel-text w40" style="height:12px;margin-bottom:12px;"></div>';
+      for (i = 0; i < 3; i++) {
+        html += '<div class="skel-stat-bar"><div class="skel skel-bar-label"></div><div class="skel skel-bar-track"></div></div>';
+      }
+      html += '</div>';
+
+      // Activity feed skeleton
+      html += '<div class="skel-stat-card" style="text-align:left;padding:16px;">';
+      html += '<div class="skel skel-text w40" style="height:12px;margin-bottom:12px;"></div>';
+      for (i = 0; i < 3; i++) {
+        html += _skelItem('skel-act-item', 28, _skelTxt('w80') + _skelTxt('w40'));
+      }
+      html += '</div>';
+
+      var dashEl = document.getElementById('tabDashboard');
+      var cards = dashEl.querySelectorAll('.card, #statsGrid, .quick-actions, .stats-grid');
+      for (var c = 0; c < cards.length; c++) cards[c].style.display = 'none';
+      var es = document.getElementById('dashEmptyState');
+      if (es) es.style.display = 'none';
+      var skelWrap = document.getElementById('dashSkelWrap');
+      if (!skelWrap) {
+        skelWrap = document.createElement('div');
+        skelWrap.id = 'dashSkelWrap';
+        skelWrap.className = 'skel-wrapper';
+        dashEl.insertBefore(skelWrap, dashEl.firstChild);
+      } else {
+        skelWrap.style.display = '';
+      }
+      skelWrap.innerHTML = html;
+    }
+
+    function restoreDashboardContent() {
+      var dashEl = document.getElementById('tabDashboard');
+      var cards = dashEl.querySelectorAll('.card, #statsGrid, .quick-actions, .stats-grid');
+      for (var c = 0; c < cards.length; c++) cards[c].style.display = '';
+      var skelWrap = document.getElementById('dashSkelWrap');
+      if (skelWrap) skelWrap.style.display = 'none';
+      var es = document.getElementById('dashEmptyState');
+      // don't touch dashEmptyState here — renderDashboard manages it
+    }
+
+    // ── Report skeletons ───────────────────────────────────────────────────
+    function renderReportSkeletons() {
+      var html = '';
+      var i;
+
+      html += '<div class="stats-grid" style="margin-bottom:10px;">';
+      for (i = 0; i < 4; i++) {
+        html += '<div class="skel-stat-card"><div class="skel skel-stat-value"></div><div class="skel skel-stat-label"></div></div>';
+      }
+      html += '</div>';
+
+      html += '<div class="skel-stat-card" style="margin-bottom:10px;text-align:left;padding:16px;">';
+      html += '<div class="skel skel-text w60" style="height:12px;margin-bottom:10px;"></div>';
+      for (i = 0; i < 5; i++) {
+        html += '<div class="skel-rpt-row"><div class="skel skel-cell c1"></div><div class="skel skel-cell c2"></div><div class="skel skel-cell c3"></div></div>';
+      }
+      html += '</div>';
+
+      html += '<div class="skel-stat-card" style="text-align:left;padding:16px;">';
+      html += '<div class="skel skel-text w60" style="height:12px;margin-bottom:10px;"></div>';
+      for (i = 0; i < 4; i++) {
+        html += '<div class="skel-rpt-row"><div class="skel skel-cell c1"></div><div class="skel skel-cell c2"></div><div class="skel skel-cell c3"></div></div>';
+      }
+      html += '</div>';
+
+      var rptTab = document.getElementById('tabReports');
+      var rptCards = rptTab.querySelectorAll('.card');
+      for (var r = 0; r < rptCards.length; r++) rptCards[r].style.display = 'none';
+      var rptWrap = document.getElementById('reportSkelWrap');
+      if (!rptWrap) {
+        rptWrap = document.createElement('div');
+        rptWrap.id = 'reportSkelWrap';
+        rptWrap.className = 'skel-wrapper';
+        rptWrap.style.marginBottom = '10px';
+        rptTab.insertBefore(rptWrap, rptTab.firstChild);
+      } else {
+        rptWrap.style.display = '';
+      }
+      rptWrap.innerHTML = html;
+    }
+
+    function restoreReportContent() {
+      var rptCards = document.querySelectorAll('#tabReports .card');
+      for (var r = 0; r < rptCards.length; r++) rptCards[r].style.display = '';
+      var rptWrap = document.getElementById('reportSkelWrap');
+      if (rptWrap) rptWrap.style.display = 'none';
+    }
+
+    // ── Fade-out helper ────────────────────────────────────────────────────
+    function hideSkeletons(selector) {
+      var wrappers = document.querySelectorAll(selector);
+      for (var i = 0; i < wrappers.length; i++) {
+        wrappers[i].classList.add('skel-hide');
+      }
+      setTimeout(function() {
+        for (i = 0; i < wrappers.length; i++) {
+          if (wrappers[i].parentNode) wrappers[i].parentNode.removeChild(wrappers[i]);
+        }
+      }, 250);
+    }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       ASSETS TAB — List, Filter, Detail, Edit, Import
+       ═══════════════════════════════════════════════════════════════════════ */
+
     // ── Category config ───────────────────────────────────────────────────
     const CATEGORY_MAP = {
       'Coffee':        { icon: '☕',  color: '#2e1a0a' },
@@ -4441,19 +5307,25 @@
         const machineIdHtml = q ? highlightText(a.machine_id, q) : esc(a.machine_id);
         const locParts = buildLocationParts(a);
         const locHtml = locParts ? '<div class="ai-location">📍 ' + esc(locParts) + '</div>' : '';
+        const escName = esc(a.name).replace(/'/g, "\'");
         return `
-        <div class="asset-item" onclick="viewAsset(${a.id})">
-          <div class="ai-icon ${catClass}">${icon}</div>
-          <div class="ai-info">
-            <div class="ai-name">${nameHtml}</div>
-            <div class="ai-meta">
-              ${machineIdHtml}${a.serial_number ? ' · S/N: ' + esc(a.serial_number) : ''}
-              ${a.make ? ' · ' + esc(a.make) : ''}
-              · <span class="status-tag ${a.status || 'active'}">${a.status || 'active'}</span>
-            </div>
-            ${locHtml}
+        <div class="asset-item-swipe-wrap" data-asset-id="${a.id}">
+          <div class="swipe-delete-bg">
+            <button class="btn btn-danger btn-sm" onclick="event.stopPropagation(); swipeDeleteAsset(${a.id}, '${escName}')" style="pointer-events:auto;font-size:12px;padding:6px 12px;">🗑️ Delete</button>
+          </div>
+          <div class="asset-item" onclick="viewAsset(${a.id})">
+            <div class="ai-icon ${catClass}">${icon}</div>
+            <div class="ai-info">
+              <div class="ai-name">${nameHtml}</div>
+              <div class="ai-meta">
+                ${machineIdHtml}${a.serial_number ? ' · S/N: ' + esc(a.serial_number) : ''}
+                ${a.make ? ' · ' + esc(a.make) : ''}
+                · <span class="status-tag ${a.status || 'active'}">${a.status || 'active'}</span>
+              </div>
+              ${locHtml}
+            </div>
+            <div class="ai-arrow">›</div>
           </div>
-          <div class="ai-arrow">›</div>
         </div>`;
       }).join('');
     }
@@ -4763,20 +5635,63 @@
       const infoCard = document.getElementById('navInfoCard');
       const dirsCard = document.getElementById('navDirectionsCard');
       const gmapsLink = document.getElementById('navGoogleMapsLink');
+      const gpsWarn = document.getElementById('navGpsWarning');
+
+      const hasGPS = !!(AppState.gpsLat && AppState.gpsLng);
 
       if (!nav) {
+        // No route active — show empty state with GPS awareness
+        if (gpsWarn) gpsWarn.style.display = hasGPS ? 'none' : 'flex';
+
+        // Update empty state messaging based on GPS
+        const iconEl = document.getElementById('navEmptyIcon');
+        const titleEl = document.getElementById('navEmptyTitle');
+        const descEl = document.getElementById('navEmptyDesc');
+        if (hasGPS) {
+          if (iconEl) iconEl.textContent = '🧭';
+          if (titleEl) titleEl.textContent = 'Find your way';
+          if (descEl) descEl.innerHTML = 'Go to an asset and tap <b>Navigate</b>, or pick a destination below';
+        } else {
+          if (iconEl) iconEl.textContent = '📍';
+          if (titleEl) titleEl.textContent = 'Location needed';
+          if (descEl) descEl.innerHTML = 'Enable GPS to get turn-by-turn directions. Still searchable below.';
+        }
+
         if (emptyEl) emptyEl.style.display = '';
-        if (mapCont) mapCont.style.display = 'none';
         if (infoCard) infoCard.style.display = 'none';
         if (dirsCard) dirsCard.style.display = 'none';
         if (gmapsLink) gmapsLink.style.display = 'none';
         document.getElementById('navDestName').textContent = 'Navigate';
         document.getElementById('navDestAddr').textContent = '';
+
+        // Show user location on map if GPS is available
+        if (hasGPS) {
+          if (mapCont) mapCont.style.display = '';
+          initNavMap(AppState.gpsLat, AppState.gpsLng);
+          setTimeout(() => {
+            if (!navMap) return;
+            const userIcon = L.divIcon({
+              html: '<div style="width:16px;height:16px;border-radius:50%;background:#5b6ef7;border:3px solid #fff;box-shadow:0 0 10px rgba(91,110,247,0.6);"></div>',
+              className: '', iconSize: [16, 16], iconAnchor: [8, 8],
+            });
+            L.marker([AppState.gpsLat, AppState.gpsLng], { icon: userIcon })
+              .addTo(navMap).bindPopup('<b>You are here</b>');
+            if (AppState.gpsAcc) {
+              L.circle([AppState.gpsLat, AppState.gpsLng], {
+                radius: AppState.gpsAcc, color: '#5b6ef7', fillColor: '#5b6ef7',
+                fillOpacity: 0.1, weight: 1, opacity: 0.5,
+              }).addTo(navMap);
+            }
+          }, 200);
+        } else {
+          if (mapCont) mapCont.style.display = 'none';
+        }
         return;
       }
 
-      // Hide empty state, show map
+      // Hide empty state and GPS warning, show map
       if (emptyEl) emptyEl.style.display = 'none';
+      if (gpsWarn) gpsWarn.style.display = 'none';
       if (mapCont) mapCont.style.display = '';
 
       // Set header info
@@ -4884,9 +5799,20 @@
       if (directionsCard) directionsCard.style.display = 'none';
       const gmapsLink = document.getElementById('navGoogleMapsLink');
       if (gmapsLink) gmapsLink.style.display = 'none';
+      const gpsWarn = document.getElementById('navGpsWarning');
+      if (gpsWarn) gpsWarn.style.display = 'none';
       document.getElementById('navDestName').textContent = 'Navigate';
       document.getElementById('navDestAddr').textContent = '';
-      // Do NOT call switchTab here — the caller handles the tab transition
+    }
+
+    function navBackToPrevious() {
+      // Called from back button — resets nav state and goes to previous tab
+      closeNavigate();
+      const prevTab = AppState._prevTab || 'tabMap';
+      AppState._prevTab = null;
+      // Avoid closeNavigate recursion in switchTab
+      AppState.currentTab = null;
+      switchTab(prevTab);
     }
 
     // ── Navigate page asset search ────────────────────────────────────────
@@ -6748,16 +7674,26 @@
         const assets = await api('/api/assets?limit=1000');
         clearAssetMarkers();
 
-        // Assets that already have lat/lng
+        // 1) Assets that already have their own lat/lng
         const withCoords = assets.filter(a => a.latitude != null && a.longitude != null);
-        withCoords.forEach(asset => {
+        withCoords.forEach(asset => addAssetMarker(asset));
+
+        // 2) Assets without own coords but with location coords (fallback)
+        const withLocCoords = assets.filter(a =>
+          (a.latitude == null || a.longitude == null) &&
+          a.location_latitude != null && a.location_longitude != null
+        );
+        withLocCoords.forEach(asset => {
+          asset.latitude = asset.location_latitude;
+          asset.longitude = asset.location_longitude;
           addAssetMarker(asset);
         });
 
-        // Assets with addresses but no coordinates — geocode them
+        // 3) Assets with addresses but no coordinates — geocode them
         const needsGeocode = assets.filter(a =>
           (a.latitude == null || a.longitude == null) &&
-          (a.address || a.building_name)
+          (a.address || a.building_name ||
+           a.location_address || a.location_building_name)
         );
         if (needsGeocode.length > 0) {
           await geocodeAndPin(needsGeocode);
@@ -6778,9 +7714,17 @@
       let geocoded = 0;
       for (const asset of assets) {
         try {
-          const addr = [asset.address, asset.building_name,
+          // Try asset's own address fields first, then fall back to location address
+          let addr = [asset.address, asset.building_name,
             asset.building_number, asset.city, asset.state, asset.zip
           ].filter(Boolean).join(', ');
+
+          if (!addr && (asset.location_address || asset.location_building_name)) {
+            addr = [asset.location_address, asset.location_building_name,
+              asset.location_building_number
+            ].filter(Boolean).join(', ');
+          }
+
           if (!addr) continue;
 
           const result = await api(`/api/geocode-address?address=${encodeURIComponent(addr)}`);
@@ -7911,6 +8855,9 @@
     startScanning();
     loadAssets();
     initOnboarding();
+    initMouseDetection();
+    initPullToRefresh();
+    initSwipeToDelete();
   </script>
 
   <!-- ═══════════════════════════════════════════════════════════════════════
@@ -7927,5 +8874,27 @@
     </div>
   </div>
 
+
+  <!-- ═══════════════════════════════════════════════════════════════════════
+       FLOATING ACTION BUTTON
+       ═══════════════════════════════════════════════════════════════════════ -->
+  <button class="fab pulse" id="fabAdd" onclick="fabAction()" title="Quick Add" aria-label="Add asset">
+    ➕
+  </button>
+
+
+  <!-- Undo toast -->
+  <div class="undo-toast" id="undoToast">
+    <span>🗑️ Deleted</span>
+    <button class="undo-btn" onclick="undoDelete()">Undo</button>
+    <span style="cursor:pointer;opacity:0.5;font-size:14px;" onclick="dismissUndo()">✕</span>
+  </div>
+
+
+  <!-- Success feedback overlay -->
+  <div class="success-overlay" id="successOverlay" onclick="this.classList.remove('show')">
+    <div class="success-check">✓</div>
+  </div>
+
 </body>
 </html>