chore: modular monolith folder split (no behavior change)

app/ui/routes.py

@@ -0,0 +1,92 @@
+"""
+UI Layer Routes - HTML page routes only (no business logic)
+"""
+from fastapi import APIRouter, Request
+from fastapi.responses import HTMLResponse, FileResponse
+from fastapi.templating import Jinja2Templates
+import os
+
+router = APIRouter()
+
+# Setup Jinja2 templates
+templates = Jinja2Templates(directory="app/ui/templates")
+
+# Read environment (development or production)
+ENVIRONMENT = os.getenv("ENVIRONMENT", "production")
+VERSION = "1.0.0"  # Terra-View version
+
+# Override TemplateResponse to include environment and version in context
+original_template_response = templates.TemplateResponse
+def custom_template_response(name, context=None, *args, **kwargs):
+    if context is None:
+        context = {}
+    context["environment"] = ENVIRONMENT
+    context["version"] = VERSION
+    return original_template_response(name, context, *args, **kwargs)
+templates.TemplateResponse = custom_template_response
+
+
+# ===== HTML PAGE ROUTES =====
+
+@router.get("/", response_class=HTMLResponse)
+async def dashboard(request: Request):
+    """Dashboard home page"""
+    return templates.TemplateResponse("dashboard.html", {"request": request})
+
+
+@router.get("/roster", response_class=HTMLResponse)
+async def roster_page(request: Request):
+    """Fleet roster page"""
+    return templates.TemplateResponse("roster.html", {"request": request})
+
+
+@router.get("/unit/{unit_id}", response_class=HTMLResponse)
+async def unit_detail_page(request: Request, unit_id: str):
+    """Unit detail page"""
+    return templates.TemplateResponse("unit_detail.html", {
+        "request": request,
+        "unit_id": unit_id
+    })
+
+
+@router.get("/settings", response_class=HTMLResponse)
+async def settings_page(request: Request):
+    """Settings page for roster management"""
+    return templates.TemplateResponse("settings.html", {"request": request})
+
+
+@router.get("/sound-level-meters", response_class=HTMLResponse)
+async def sound_level_meters_page(request: Request):
+    """Sound Level Meters management dashboard"""
+    return templates.TemplateResponse("sound_level_meters.html", {"request": request})
+
+
+@router.get("/seismographs", response_class=HTMLResponse)
+async def seismographs_page(request: Request):
+    """Seismographs management dashboard"""
+    return templates.TemplateResponse("seismographs.html", {"request": request})
+
+
+# ===== PWA ROUTES =====
+
+@router.get("/sw.js")
+async def service_worker():
+    """Serve service worker with proper headers for PWA"""
+    return FileResponse(
+        "app/ui/static/sw.js",
+        media_type="application/javascript",
+        headers={
+            "Service-Worker-Allowed": "/",
+            "Cache-Control": "no-cache"
+        }
+    )
+
+
+@router.get("/offline-db.js")
+async def offline_db_script():
+    """Serve offline database script"""
+    return FileResponse(
+        "app/ui/static/offline-db.js",
+        media_type="application/javascript",
+        headers={"Cache-Control": "no-cache"}
+    )

app/ui/static/icons/ICON_GENERATION_INSTRUCTIONS.md

@@ -0,0 +1,78 @@
+# PWA Icon Generation Instructions
+
+The PWA manifest requires 8 icon sizes for full compatibility across devices.
+
+## Required Icon Sizes
+
+- 72x72px
+- 96x96px
+- 128x128px
+- 144x144px
+- 152x152px
+- 192x192px
+- 384x384px
+- 512x512px (maskable)
+
+## Design Guidelines
+
+**Background:** Navy blue (#142a66)
+**Icon/Logo:** Orange (#f48b1c)
+**Style:** Simple, recognizable design that works at small sizes
+
+## Quick Generation Methods
+
+### Option 1: Online PWA Icon Generator
+
+1. Visit: https://www.pwabuilder.com/imageGenerator
+2. Upload a 512x512px source image
+3. Download the generated icon pack
+4. Copy PNG files to this directory
+
+### Option 2: ImageMagick (Command Line)
+
+If you have a 512x512px source image called `source-icon.png`:
+
+```bash
+# From the icons directory
+for size in 72 96 128 144 152 192 384 512; do
+  convert source-icon.png -resize ${size}x${size} icon-${size}.png
+done
+```
+
+### Option 3: Photoshop/GIMP
+
+1. Create a 512x512px canvas
+2. Add your design (navy background + orange icon)
+3. Save/Export for each required size
+4. Name files as: icon-72.png, icon-96.png, etc.
+
+## Temporary Placeholder
+
+For testing, you can use a simple colored square:
+
+```bash
+# Generate simple colored placeholder icons
+for size in 72 96 128 144 152 192 384 512; do
+  convert -size ${size}x${size} xc:#142a66 \
+    -gravity center \
+    -fill '#f48b1c' \
+    -pointsize $((size / 2)) \
+    -annotate +0+0 'SFM' \
+    icon-${size}.png
+done
+```
+
+## Verification
+
+After generating icons, verify:
+- All 8 sizes exist in this directory
+- Files are named exactly: icon-72.png, icon-96.png, etc.
+- Images have transparent or navy background
+- Logo/text is clearly visible at smallest size (72px)
+
+## Testing PWA Installation
+
+1. Open SFM in Chrome on Android or Safari on iOS
+2. Look for "Install App" or "Add to Home Screen" prompt
+3. Check that the correct icon appears in the install dialog
+4. After installation, verify icon on home screen

app/ui/static/icons/icon-128.png.svg

@@ -0,0 +1,4 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg">
+  <rect width="128" height="128" fill="#142a66"/>
+  <text x="50%" y="50%" font-family="Arial, sans-serif" font-size="128" font-weight="bold" fill="#f48b1c" text-anchor="middle" dominant-baseline="middle">SFM</text>
+</svg>

app/ui/static/icons/icon-144.png.svg

@@ -0,0 +1,4 @@
+<svg width="144" height="144" xmlns="http://www.w3.org/2000/svg">
+  <rect width="144" height="144" fill="#142a66"/>
+  <text x="50%" y="50%" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#f48b1c" text-anchor="middle" dominant-baseline="middle">SFM</text>
+</svg>

app/ui/static/icons/icon-152.png.svg

@@ -0,0 +1,4 @@
+<svg width="152" height="152" xmlns="http://www.w3.org/2000/svg">
+  <rect width="152" height="152" fill="#142a66"/>
+  <text x="50%" y="50%" font-family="Arial, sans-serif" font-size="152" font-weight="bold" fill="#f48b1c" text-anchor="middle" dominant-baseline="middle">SFM</text>
+</svg>

app/ui/static/icons/icon-192.png.svg

@@ -0,0 +1,4 @@
+<svg width="192" height="192" xmlns="http://www.w3.org/2000/svg">
+  <rect width="192" height="192" fill="#142a66"/>
+  <text x="50%" y="50%" font-family="Arial, sans-serif" font-size="192" font-weight="bold" fill="#f48b1c" text-anchor="middle" dominant-baseline="middle">SFM</text>
+</svg>

app/ui/static/icons/icon-384.png.svg

@@ -0,0 +1,4 @@
+<svg width="384" height="384" xmlns="http://www.w3.org/2000/svg">
+  <rect width="384" height="384" fill="#142a66"/>
+  <text x="50%" y="50%" font-family="Arial, sans-serif" font-size="38" font-weight="bold" fill="#f48b1c" text-anchor="middle" dominant-baseline="middle">SFM</text>
+</svg>

app/ui/static/icons/icon-512.png.svg

@@ -0,0 +1,4 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
+  <rect width="512" height="512" fill="#142a66"/>
+  <text x="50%" y="50%" font-family="Arial, sans-serif" font-size="512" font-weight="bold" fill="#f48b1c" text-anchor="middle" dominant-baseline="middle">SFM</text>
+</svg>

app/ui/static/icons/icon-72.png.svg

@@ -0,0 +1,4 @@
+<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg">
+  <rect width="72" height="72" fill="#142a66"/>
+  <text x="50%" y="50%" font-family="Arial, sans-serif" font-size="72" font-weight="bold" fill="#f48b1c" text-anchor="middle" dominant-baseline="middle">SFM</text>
+</svg>

app/ui/static/icons/icon-96.png.svg

@@ -0,0 +1,4 @@
+<svg width="96" height="96" xmlns="http://www.w3.org/2000/svg">
+  <rect width="96" height="96" fill="#142a66"/>
+  <text x="50%" y="50%" font-family="Arial, sans-serif" font-size="96" font-weight="bold" fill="#f48b1c" text-anchor="middle" dominant-baseline="middle">SFM</text>
+</svg>

app/ui/static/manifest.json

@@ -0,0 +1,78 @@
+{
+  "name": "Seismo Fleet Manager",
+  "short_name": "SFM",
+  "description": "Real-time seismograph and modem fleet monitoring and management",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#142a66",
+  "theme_color": "#f48b1c",
+  "icons": [
+    {
+      "src": "/static/icons/icon-72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/icons/icon-96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/icons/icon-128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/icons/icon-144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/icons/icon-152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/icons/icon-384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "screenshots": [
+    {
+      "src": "/static/screenshots/dashboard.png",
+      "type": "image/png",
+      "sizes": "540x720",
+      "form_factor": "narrow"
+    }
+  ],
+  "categories": ["utilities", "productivity"],
+  "shortcuts": [
+    {
+      "name": "Dashboard",
+      "short_name": "Dashboard",
+      "description": "View fleet status dashboard",
+      "url": "/",
+      "icons": [{ "src": "/static/icons/icon-192.png", "sizes": "192x192" }]
+    },
+    {
+      "name": "Fleet Roster",
+      "short_name": "Roster",
+      "description": "View and manage fleet roster",
+      "url": "/roster",
+      "icons": [{ "src": "/static/icons/icon-192.png", "sizes": "192x192" }]
+    }
+  ]
+}

app/ui/static/mobile.css

@@ -0,0 +1,612 @@
+/* Mobile-specific styles for Seismo Fleet Manager */
+/* Touch-optimized, portrait-first design */
+
+/* ===== MOBILE TOUCH TARGETS ===== */
+@media (max-width: 767px) {
+  /* Buttons - 44x44px minimum (iOS standard) */
+  .btn, button:not(.tab-button), .button, a.button {
+    min-width: 44px;
+    min-height: 44px;
+    padding: 12px 16px;
+  }
+
+  /* Icon-only buttons */
+  .icon-button, .btn-icon {
+    width: 44px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+  }
+
+  /* Form inputs - 48px height, 16px font prevents iOS zoom */
+  input:not([type="checkbox"]):not([type="radio"]),
+  select,
+  textarea {
+    min-height: 48px;
+    font-size: 16px !important;
+    padding: 12px 16px;
+  }
+
+  /* Checkboxes and radio buttons - larger touch targets */
+  input[type="checkbox"],
+  input[type="radio"] {
+    width: 24px;
+    height: 24px;
+    min-height: 24px;
+  }
+
+  /* Bottom nav buttons - 56px industry standard */
+  .bottom-nav button {
+    min-height: 56px;
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+  }
+
+  /* Increase spacing between clickable elements */
+  .btn + .btn,
+  button + button {
+    margin-left: 8px;
+  }
+}
+
+/* ===== HAMBURGER MENU ===== */
+.hamburger-btn {
+  position: fixed;
+  top: 1rem;
+  left: 1rem;
+  z-index: 50;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  transition: all 0.2s;
+}
+
+.hamburger-btn:active {
+  transform: scale(0.95);
+}
+
+.dark .hamburger-btn {
+  background-color: #1e293b;
+  border-color: #374151;
+}
+
+/* Hamburger icon */
+.hamburger-icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.hamburger-line {
+  width: 100%;
+  height: 2px;
+  background-color: #374151;
+  transition: all 0.3s;
+}
+
+.dark .hamburger-line {
+  background-color: #e5e7eb;
+}
+
+/* Hamburger animation when menu open */
+.menu-open .hamburger-line:nth-child(1) {
+  transform: translateY(8px) rotate(45deg);
+}
+
+.menu-open .hamburger-line:nth-child(2) {
+  opacity: 0;
+}
+
+.menu-open .hamburger-line:nth-child(3) {
+  transform: translateY(-8px) rotate(-45deg);
+}
+
+/* ===== SIDEBAR (RESPONSIVE) ===== */
+.sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 16rem; /* 256px */
+  height: 100vh;
+  z-index: 40;
+  transition: transform 0.3s ease-in-out;
+}
+
+@media (max-width: 767px) {
+  .sidebar {
+    transform: translateX(-100%);
+  }
+
+  .sidebar.open {
+    transform: translateX(0);
+  }
+}
+
+@media (min-width: 768px) {
+  .sidebar {
+    transform: translateX(0) !important;
+  }
+}
+
+/* ===== BACKDROP ===== */
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 30;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  pointer-events: none;
+}
+
+.backdrop.show {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+@media (min-width: 768px) {
+  .backdrop {
+    display: none;
+  }
+}
+
+/* ===== BOTTOM NAVIGATION ===== */
+.bottom-nav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 4rem;
+  background-color: white;
+  border-top: 1px solid #e5e7eb;
+  z-index: 20;
+  box-shadow: 0 -1px 3px 0 rgb(0 0 0 / 0.1);
+}
+
+.dark .bottom-nav {
+  background-color: #1e293b;
+  border-top-color: #374151;
+}
+
+.bottom-nav-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  color: #6b7280;
+  transition: all 0.2s;
+  border: none;
+  background: none;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+}
+
+.bottom-nav-btn:active {
+  transform: scale(0.95);
+  background-color: #f3f4f6;
+}
+
+.dark .bottom-nav-btn:active {
+  background-color: #374151;
+}
+
+.bottom-nav-btn.active {
+  color: #f48b1c; /* seismo-orange */
+}
+
+.bottom-nav-btn svg {
+  width: 24px;
+  height: 24px;
+}
+
+.bottom-nav-btn span {
+  font-size: 11px;
+  font-weight: 500;
+}
+
+@media (min-width: 768px) {
+  .bottom-nav {
+    display: none;
+  }
+}
+
+/* ===== MAIN CONTENT ADJUSTMENTS ===== */
+.main-content {
+  margin-left: 0;
+  padding-bottom: 5rem; /* 80px for bottom nav */
+  min-height: 100vh;
+}
+
+@media (min-width: 768px) {
+  .main-content {
+    margin-left: 16rem; /* 256px sidebar width */
+    padding-bottom: 0;
+  }
+}
+
+/* ===== MOBILE ROSTER CARDS ===== */
+.unit-card {
+  background-color: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  padding: 1rem;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.unit-card:active {
+  transform: scale(0.98);
+}
+
+.dark .unit-card {
+  background-color: #1e293b;
+}
+
+.unit-card:hover {
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+}
+
+/* ===== UNIT DETAIL MODAL (BOTTOM SHEET) ===== */
+.unit-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.unit-modal.show {
+  pointer-events: auto;
+  opacity: 1;
+}
+
+.unit-modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.unit-modal-content {
+  position: relative;
+  width: 100%;
+  max-height: 85vh;
+  background-color: white;
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+  box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1);
+  overflow-y: auto;
+  transform: translateY(100%);
+  transition: transform 0.3s ease-out;
+}
+
+.unit-modal.show .unit-modal-content {
+  transform: translateY(0);
+}
+
+.dark .unit-modal-content {
+  background-color: #1e293b;
+}
+
+@media (min-width: 768px) {
+  .unit-modal {
+    align-items: center;
+  }
+
+  .unit-modal-content {
+    max-width: 42rem; /* 672px */
+    border-radius: 0.75rem;
+    transform: translateY(20px);
+    opacity: 0;
+  }
+
+  .unit-modal.show .unit-modal-content {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Modal handle bar (mobile only) */
+.modal-handle {
+  height: 4px;
+  width: 3rem;
+  background-color: #d1d5db;
+  border-radius: 9999px;
+  margin: 0.75rem auto 1rem;
+}
+
+@media (min-width: 768px) {
+  .modal-handle {
+    display: none;
+  }
+}
+
+/* ===== OFFLINE INDICATOR ===== */
+.offline-indicator {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: #eab308; /* yellow-500 */
+  color: white;
+  text-align: center;
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  z-index: 50;
+  transform: translateY(-100%);
+  transition: transform 0.3s ease-in-out;
+}
+
+.offline-indicator.show {
+  transform: translateY(0);
+}
+
+/* ===== SYNC TOAST ===== */
+.sync-toast {
+  position: fixed;
+  bottom: 6rem; /* Above bottom nav */
+  left: 1rem;
+  right: 1rem;
+  background-color: #22c55e; /* green-500 */
+  color: white;
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  z-index: 50;
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.3s, transform 0.3s;
+  pointer-events: none;
+}
+
+.sync-toast.show {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+@media (min-width: 768px) {
+  .sync-toast {
+    bottom: 1rem;
+    left: auto;
+    right: 1rem;
+    max-width: 20rem;
+  }
+}
+
+/* ===== MOBILE SEARCH BAR (STICKY) ===== */
+@media (max-width: 767px) {
+  .mobile-search-sticky {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background-color: #f3f4f6;
+    margin: -1rem -1rem 1rem -1rem;
+    padding: 0.5rem 1rem;
+  }
+
+  .dark .mobile-search-sticky {
+    background-color: #111827;
+  }
+}
+
+@media (min-width: 768px) {
+  .mobile-search-sticky {
+    position: static;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+/* ===== STATUS BADGES ===== */
+.status-dot {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9999px;
+  flex-shrink: 0;
+}
+
+.status-badge {
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+/* ===== DEVICE TYPE BADGES ===== */
+.device-badge {
+  padding: 0.25rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  display: inline-block;
+}
+
+/* ===== MOBILE MAP HEIGHT ===== */
+@media (max-width: 767px) {
+  #fleet-map {
+    height: 16rem !important; /* 256px on mobile */
+  }
+
+  #unit-map {
+    height: 16rem !important; /* 256px on mobile */
+  }
+}
+
+/* ===== MAP OVERLAP FIX ===== */
+/* Prevent map and controls from overlapping UI elements on mobile */
+@media (max-width: 767px) {
+  /* Constrain leaflet container to prevent overflow */
+  .leaflet-container {
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  /* Override Leaflet's default high z-index values */
+  /* Bottom nav is z-20, sidebar is z-40, so map must be below */
+  .leaflet-pane,
+  .leaflet-tile-pane,
+  .leaflet-overlay-pane,
+  .leaflet-shadow-pane,
+  .leaflet-marker-pane,
+  .leaflet-tooltip-pane,
+  .leaflet-popup-pane {
+    z-index: 1 !important;
+  }
+
+  /* Map controls should also be below navigation elements */
+  .leaflet-control-container,
+  .leaflet-top,
+  .leaflet-bottom,
+  .leaflet-left,
+  .leaflet-right {
+    z-index: 1 !important;
+  }
+
+  .leaflet-control {
+    z-index: 1 !important;
+  }
+
+  /* When sidebar is open, hide all Leaflet controls (zoom, attribution, etc) */
+  body.menu-open .leaflet-control-container {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  /* Ensure map tiles are non-interactive when sidebar is open */
+  body.menu-open #fleet-map,
+  body.menu-open #unit-map {
+    pointer-events: none;
+  }
+}
+
+/* ===== PENDING SYNC BADGE ===== */
+.pending-sync-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.5rem;
+  background-color: #fef3c7; /* amber-100 */
+  color: #92400e; /* amber-800 */
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.dark .pending-sync-badge {
+  background-color: #78350f;
+  color: #fef3c7;
+}
+
+.pending-sync-badge::before {
+  content: "⏳";
+  font-size: 0.875rem;
+}
+
+/* ===== MOBILE-SPECIFIC UTILITY CLASSES ===== */
+@media (max-width: 767px) {
+  .mobile-text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
+  .mobile-text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  .mobile-p-4 {
+    padding: 1rem;
+  }
+
+  .mobile-mb-4 {
+    margin-bottom: 1rem;
+  }
+}
+
+/* ===== ACCESSIBILITY ===== */
+/* Improve focus visibility on mobile */
+@media (max-width: 767px) {
+  button:focus-visible,
+  a:focus-visible,
+  input:focus-visible,
+  select:focus-visible,
+  textarea:focus-visible {
+    outline: 2px solid #f48b1c;
+    outline-offset: 2px;
+  }
+}
+
+/* Prevent text selection on buttons (better mobile UX) */
+button,
+.btn,
+.button {
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* ===== SMOOTH SCROLLING ===== */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Prevent overscroll bounce on iOS */
+body {
+  overscroll-behavior-y: none;
+}
+
+/* ===== LOADING STATES ===== */
+.loading-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* ===== SAFE AREA SUPPORT (iOS notch) ===== */
+@supports (padding: env(safe-area-inset-bottom)) {
+  .bottom-nav {
+    padding-bottom: env(safe-area-inset-bottom);
+    height: calc(4rem + env(safe-area-inset-bottom));
+  }
+
+  .main-content {
+    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
+  }
+
+  @media (min-width: 768px) {
+    .main-content {
+      padding-bottom: 0;
+    }
+  }
+}

app/ui/static/mobile.js

@@ -0,0 +1,597 @@
+/* Mobile JavaScript for Seismo Fleet Manager */
+/* Handles hamburger menu, modals, offline sync, and mobile interactions */
+
+// ===== GLOBAL STATE =====
+let currentUnitData = null;
+let isOnline = navigator.onLine;
+
+// ===== HAMBURGER MENU TOGGLE =====
+function toggleMenu() {
+  const sidebar = document.getElementById('sidebar');
+  const backdrop = document.getElementById('backdrop');
+  const hamburgerBtn = document.getElementById('hamburgerBtn');
+
+  if (sidebar && backdrop) {
+    const isOpen = sidebar.classList.contains('open');
+
+    if (isOpen) {
+      // Close menu
+      sidebar.classList.remove('open');
+      backdrop.classList.remove('show');
+      hamburgerBtn?.classList.remove('menu-open');
+      document.body.style.overflow = '';
+      document.body.classList.remove('menu-open');
+    } else {
+      // Open menu
+      sidebar.classList.add('open');
+      backdrop.classList.add('show');
+      hamburgerBtn?.classList.add('menu-open');
+      document.body.style.overflow = 'hidden';
+      document.body.classList.add('menu-open');
+    }
+  }
+}
+
+// Close menu when clicking backdrop
+function closeMenuFromBackdrop() {
+  const sidebar = document.getElementById('sidebar');
+  const backdrop = document.getElementById('backdrop');
+  const hamburgerBtn = document.getElementById('hamburgerBtn');
+
+  if (sidebar && backdrop) {
+    sidebar.classList.remove('open');
+    backdrop.classList.remove('show');
+    hamburgerBtn?.classList.remove('menu-open');
+    document.body.style.overflow = '';
+    document.body.classList.remove('menu-open');
+  }
+}
+
+// Close menu when window is resized to desktop
+function handleResize() {
+  if (window.innerWidth >= 768) {
+    const sidebar = document.getElementById('sidebar');
+    const backdrop = document.getElementById('backdrop');
+    const hamburgerBtn = document.getElementById('hamburgerBtn');
+
+    if (sidebar && backdrop) {
+      sidebar.classList.remove('open');
+      backdrop.classList.remove('show');
+      hamburgerBtn?.classList.remove('menu-open');
+      document.body.style.overflow = '';
+      document.body.classList.remove('menu-open');
+    }
+  }
+}
+
+// ===== UNIT DETAIL MODAL =====
+function openUnitModal(unitId, status = null, age = null) {
+  const modal = document.getElementById('unitModal');
+  if (!modal) return;
+
+  // Store the status info passed from the card
+  // Accept status if it's a non-empty string, use age if provided or default to '--'
+  const cardStatusInfo = (status && status !== '') ? {
+    status: status,
+    age: age || '--'
+  } : null;
+
+  console.log('openUnitModal:', { unitId, status, age, cardStatusInfo });
+
+  // Fetch unit data and populate modal
+  fetchUnitDetails(unitId).then(unit => {
+    if (unit) {
+      currentUnitData = unit;
+      // Pass the card status info to the populate function
+      populateUnitModal(unit, cardStatusInfo);
+      modal.classList.add('show');
+      document.body.style.overflow = 'hidden';
+    }
+  });
+}
+
+function closeUnitModal(event) {
+  // Only close if clicking backdrop or close button
+  if (event && event.target.closest('.unit-modal-content') && !event.target.closest('[data-close-modal]')) {
+    return;
+  }
+
+  const modal = document.getElementById('unitModal');
+  if (modal) {
+    modal.classList.remove('show');
+    document.body.style.overflow = '';
+    currentUnitData = null;
+  }
+}
+
+async function fetchUnitDetails(unitId) {
+  try {
+    // Try to fetch from network first
+    const response = await fetch(`/api/roster/${unitId}`);
+    if (response.ok) {
+      const unit = await response.json();
+
+      // Save to IndexedDB if offline support is available
+      if (window.offlineDB) {
+        await window.offlineDB.saveUnit(unit);
+      }
+
+      return unit;
+    }
+  } catch (error) {
+    console.log('Network fetch failed, trying offline storage:', error);
+
+    // Fall back to offline storage
+    if (window.offlineDB) {
+      return await window.offlineDB.getUnit(unitId);
+    }
+  }
+
+  return null;
+}
+
+function populateUnitModal(unit, cardStatusInfo = null) {
+  // Set unit ID in header
+  const modalUnitId = document.getElementById('modalUnitId');
+  if (modalUnitId) {
+    modalUnitId.textContent = unit.id;
+  }
+
+  // Populate modal content
+  const modalContent = document.getElementById('modalContent');
+  if (!modalContent) return;
+
+  // Use status from card if provided, otherwise get from snapshot or derive from unit
+  let statusInfo = cardStatusInfo || getUnitStatus(unit.id, unit);
+  console.log('populateUnitModal:', { unit, cardStatusInfo, statusInfo });
+
+  const statusColor = statusInfo.status === 'OK' ? 'green' :
+                      statusInfo.status === 'Pending' ? 'yellow' :
+                      statusInfo.status === 'Missing' ? 'red' : 'gray';
+
+  const statusTextColor = statusInfo.status === 'OK' ? 'text-green-600 dark:text-green-400' :
+                          statusInfo.status === 'Pending' ? 'text-yellow-600 dark:text-yellow-400' :
+                          statusInfo.status === 'Missing' ? 'text-red-600 dark:text-red-400' :
+                          'text-gray-600 dark:text-gray-400';
+
+  // Determine status label (show "Benched" instead of "Unknown" for non-deployed units)
+  let statusLabel = statusInfo.status;
+  if ((statusInfo.status === 'Unknown' || statusInfo.status === 'N/A') && !unit.deployed) {
+    statusLabel = 'Benched';
+  }
+
+  // Create navigation URL for location
+  const createNavUrl = (address, coordinates) => {
+    if (address) {
+      // Use address for navigation
+      const encodedAddress = encodeURIComponent(address);
+      // Universal link that works on iOS and Android
+      return `https://www.google.com/maps/search/?api=1&query=${encodedAddress}`;
+    } else if (coordinates) {
+      // Use coordinates for navigation (format: lat,lon)
+      const encodedCoords = encodeURIComponent(coordinates);
+      return `https://www.google.com/maps/search/?api=1&query=${encodedCoords}`;
+    }
+    return null;
+  };
+
+  const navUrl = createNavUrl(unit.address, unit.coordinates);
+
+  modalContent.innerHTML = `
+    <!-- Status Section -->
+    <div class="flex items-center justify-between pb-4 border-b border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-2">
+        <span class="w-4 h-4 rounded-full bg-${statusColor}-500"></span>
+        <span class="font-semibold ${statusTextColor}">${statusLabel}</span>
+      </div>
+      <span class="text-sm text-gray-500">${statusInfo.age || '--'}</span>
+    </div>
+
+    <!-- Device Info -->
+    <div class="space-y-3">
+      <div>
+        <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Device Type</label>
+        <p class="mt-1 text-gray-900 dark:text-white">${unit.device_type || '--'}</p>
+      </div>
+
+      ${unit.unit_type ? `
+      <div>
+        <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Unit Type</label>
+        <p class="mt-1 text-gray-900 dark:text-white">${unit.unit_type}</p>
+      </div>
+      ` : ''}
+
+      ${unit.project_id ? `
+      <div>
+        <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Project ID</label>
+        <p class="mt-1 text-gray-900 dark:text-white">${unit.project_id}</p>
+      </div>
+      ` : ''}
+
+      ${unit.address ? `
+      <div>
+        <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Address</label>
+        ${navUrl ? `
+        <a href="${navUrl}" target="_blank" class="mt-1 flex items-center gap-2 text-seismo-orange hover:text-orange-600 dark:text-seismo-orange dark:hover:text-orange-400">
+          <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
+          </svg>
+          <span class="underline">${unit.address}</span>
+        </a>
+        ` : `
+        <p class="mt-1 text-gray-900 dark:text-white">${unit.address}</p>
+        `}
+      </div>
+      ` : ''}
+
+      ${unit.coordinates && !unit.address ? `
+      <div>
+        <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Coordinates</label>
+        ${navUrl ? `
+        <a href="${navUrl}" target="_blank" class="mt-1 flex items-center gap-2 text-seismo-orange hover:text-orange-600 dark:text-seismo-orange dark:hover:text-orange-400">
+          <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
+          </svg>
+          <span class="font-mono text-sm underline">${unit.coordinates}</span>
+        </a>
+        ` : `
+        <p class="mt-1 text-gray-900 dark:text-white font-mono text-sm">${unit.coordinates}</p>
+        `}
+      </div>
+      ` : ''}
+
+      <!-- Seismograph-specific fields -->
+      ${unit.device_type === 'seismograph' ? `
+        ${unit.last_calibrated ? `
+        <div>
+          <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Last Calibrated</label>
+          <p class="mt-1 text-gray-900 dark:text-white">${unit.last_calibrated}</p>
+        </div>
+        ` : ''}
+
+        ${unit.next_calibration_due ? `
+        <div>
+          <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Next Calibration Due</label>
+          <p class="mt-1 text-gray-900 dark:text-white">${unit.next_calibration_due}</p>
+        </div>
+        ` : ''}
+
+        ${unit.deployed_with_modem_id ? `
+        <div>
+          <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Deployed With Modem</label>
+          <p class="mt-1 text-gray-900 dark:text-white">${unit.deployed_with_modem_id}</p>
+        </div>
+        ` : ''}
+      ` : ''}
+
+      <!-- Modem-specific fields -->
+      ${unit.device_type === 'modem' ? `
+        ${unit.ip_address ? `
+        <div>
+          <label class="text-xs font-medium text-gray-500 dark:text-gray-400">IP Address</label>
+          <p class="mt-1 text-gray-900 dark:text-white">${unit.ip_address}</p>
+        </div>
+        ` : ''}
+
+        ${unit.phone_number ? `
+        <div>
+          <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Phone Number</label>
+          <p class="mt-1 text-gray-900 dark:text-white">${unit.phone_number}</p>
+        </div>
+        ` : ''}
+
+        ${unit.hardware_model ? `
+        <div>
+          <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Hardware Model</label>
+          <p class="mt-1 text-gray-900 dark:text-white">${unit.hardware_model}</p>
+        </div>
+        ` : ''}
+      ` : ''}
+
+      ${unit.note ? `
+      <div>
+        <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Notes</label>
+        <p class="mt-1 text-gray-900 dark:text-white whitespace-pre-wrap">${unit.note}</p>
+      </div>
+      ` : ''}
+
+      <div class="grid grid-cols-2 gap-3 pt-2">
+        <div>
+          <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Deployed</label>
+          <p class="mt-1 text-gray-900 dark:text-white">${unit.deployed ? 'Yes' : 'No'}</p>
+        </div>
+        <div>
+          <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Retired</label>
+          <p class="mt-1 text-gray-900 dark:text-white">${unit.retired ? 'Yes' : 'No'}</p>
+        </div>
+      </div>
+    </div>
+  `;
+
+  // Update action buttons
+  const editBtn = document.getElementById('modalEditBtn');
+  const deployBtn = document.getElementById('modalDeployBtn');
+  const deleteBtn = document.getElementById('modalDeleteBtn');
+
+  if (editBtn) {
+    editBtn.onclick = () => {
+      window.location.href = `/unit/${unit.id}`;
+    };
+  }
+
+  if (deployBtn) {
+    deployBtn.textContent = unit.deployed ? 'Bench Unit' : 'Deploy Unit';
+    deployBtn.onclick = () => toggleDeployStatus(unit.id, !unit.deployed);
+  }
+
+  if (deleteBtn) {
+    deleteBtn.onclick = () => deleteUnit(unit.id);
+  }
+}
+
+function getUnitStatus(unitId, unit = null) {
+  // Prefer roster table data if it was rendered with the current view
+  if (window.rosterStatusMap && window.rosterStatusMap[unitId]) {
+    return window.rosterStatusMap[unitId];
+  }
+
+  // Try to get status from dashboard snapshot if it exists
+  if (window.lastStatusSnapshot && window.lastStatusSnapshot.units && window.lastStatusSnapshot.units[unitId]) {
+    const unitStatus = window.lastStatusSnapshot.units[unitId];
+    return {
+      status: unitStatus.status,
+      age: unitStatus.age,
+      last: unitStatus.last
+    };
+  }
+
+  // Fallback: if unit data is provided, derive status from deployment state
+  if (unit) {
+    if (unit.deployed) {
+      // For deployed units without status data, default to "Unknown"
+      return { status: 'Unknown', age: '--', last: '--' };
+    } else {
+      // For benched units, use "N/A" which will be displayed as "Benched"
+      return { status: 'N/A', age: '--', last: '--' };
+    }
+  }
+
+  return { status: 'Unknown', age: '--', last: '--' };
+}
+
+async function toggleDeployStatus(unitId, deployed) {
+  try {
+    const formData = new FormData();
+    formData.append('deployed', deployed ? 'true' : 'false');
+
+    const response = await fetch(`/api/roster/edit/${unitId}`, {
+      method: 'POST',
+      body: formData
+    });
+
+    if (response.ok) {
+      showToast('✓ Unit updated successfully');
+      closeUnitModal();
+
+      // Trigger HTMX refresh if on roster page
+      const rosterTable = document.querySelector('[hx-get*="roster"]');
+      if (rosterTable) {
+        htmx.trigger(rosterTable, 'refresh');
+      }
+    } else {
+      showToast('❌ Failed to update unit', 'error');
+    }
+  } catch (error) {
+    console.error('Error toggling deploy status:', error);
+    showToast('❌ Failed to update unit', 'error');
+  }
+}
+
+async function deleteUnit(unitId) {
+  if (!confirm(`Are you sure you want to delete unit ${unitId}?\n\nThis action cannot be undone!`)) {
+    return;
+  }
+
+  try {
+    const response = await fetch(`/api/roster/${unitId}`, {
+      method: 'DELETE'
+    });
+
+    if (response.ok) {
+      showToast('✓ Unit deleted successfully');
+      closeUnitModal();
+
+      // Refresh roster page if present
+      const rosterTable = document.querySelector('[hx-get*="roster"]');
+      if (rosterTable) {
+        htmx.trigger(rosterTable, 'refresh');
+      }
+    } else {
+      showToast('❌ Failed to delete unit', 'error');
+    }
+  } catch (error) {
+    console.error('Error deleting unit:', error);
+    showToast('❌ Failed to delete unit', 'error');
+  }
+}
+
+// ===== ONLINE/OFFLINE STATUS =====
+function updateOnlineStatus() {
+  isOnline = navigator.onLine;
+  const offlineIndicator = document.getElementById('offlineIndicator');
+
+  if (offlineIndicator) {
+    if (isOnline) {
+      offlineIndicator.classList.remove('show');
+      // Trigger sync when coming back online
+      if (window.offlineDB) {
+        syncPendingEdits();
+      }
+    } else {
+      offlineIndicator.classList.add('show');
+    }
+  }
+}
+
+window.addEventListener('online', updateOnlineStatus);
+window.addEventListener('offline', updateOnlineStatus);
+
+// ===== SYNC FUNCTIONALITY =====
+async function syncPendingEdits() {
+  if (!window.offlineDB) return;
+
+  try {
+    const pendingEdits = await window.offlineDB.getPendingEdits();
+
+    if (pendingEdits.length === 0) return;
+
+    console.log(`Syncing ${pendingEdits.length} pending edits...`);
+
+    for (const edit of pendingEdits) {
+      try {
+        const formData = new FormData();
+        for (const [key, value] of Object.entries(edit.changes)) {
+          formData.append(key, value);
+        }
+
+        const response = await fetch(`/api/roster/edit/${edit.unitId}`, {
+          method: 'POST',
+          body: formData
+        });
+
+        if (response.ok) {
+          await window.offlineDB.clearEdit(edit.id);
+          console.log(`Synced edit ${edit.id} for unit ${edit.unitId}`);
+        } else {
+          console.error(`Failed to sync edit ${edit.id}`);
+        }
+      } catch (error) {
+        console.error(`Error syncing edit ${edit.id}:`, error);
+        // Keep in queue for next sync attempt
+      }
+    }
+
+    // Show success toast
+    showToast('✓ Synced successfully');
+
+  } catch (error) {
+    console.error('Error in syncPendingEdits:', error);
+  }
+}
+
+// Manual sync button
+function manualSync() {
+  if (!isOnline) {
+    showToast('⚠️ Cannot sync while offline', 'warning');
+    return;
+  }
+
+  syncPendingEdits();
+}
+
+// ===== TOAST NOTIFICATIONS =====
+function showToast(message, type = 'success') {
+  const toast = document.getElementById('syncToast');
+  if (!toast) return;
+
+  // Update toast appearance based on type
+  toast.classList.remove('bg-green-500', 'bg-red-500', 'bg-yellow-500');
+
+  if (type === 'success') {
+    toast.classList.add('bg-green-500');
+  } else if (type === 'error') {
+    toast.classList.add('bg-red-500');
+  } else if (type === 'warning') {
+    toast.classList.add('bg-yellow-500');
+  }
+
+  toast.textContent = message;
+  toast.classList.add('show');
+
+  // Auto-hide after 3 seconds
+  setTimeout(() => {
+    toast.classList.remove('show');
+  }, 3000);
+}
+
+// ===== BOTTOM NAV ACTIVE STATE =====
+function updateBottomNavActiveState() {
+  const currentPath = window.location.pathname;
+  const navButtons = document.querySelectorAll('.bottom-nav-btn');
+
+  navButtons.forEach(btn => {
+    const href = btn.getAttribute('data-href');
+    if (href && (currentPath === href || (href !== '/' && currentPath.startsWith(href)))) {
+      btn.classList.add('active');
+    } else {
+      btn.classList.remove('active');
+    }
+  });
+}
+
+// ===== INITIALIZATION =====
+document.addEventListener('DOMContentLoaded', () => {
+  // Initialize online/offline status
+  updateOnlineStatus();
+
+  // Update bottom nav active state
+  updateBottomNavActiveState();
+
+  // Add resize listener
+  window.addEventListener('resize', handleResize);
+
+  // Close menu on navigation (for mobile)
+  document.addEventListener('click', (e) => {
+    const link = e.target.closest('a');
+    if (link && link.closest('#sidebar')) {
+      // Delay to allow navigation to start
+      setTimeout(() => {
+        if (window.innerWidth < 768) {
+          closeMenuFromBackdrop();
+        }
+      }, 100);
+    }
+  });
+
+  // Prevent scroll when modals are open (iOS fix)
+  document.addEventListener('touchmove', (e) => {
+    const modal = document.querySelector('.unit-modal.show, #sidebar.open');
+    if (modal && !e.target.closest('.unit-modal-content, #sidebar')) {
+      e.preventDefault();
+    }
+  }, { passive: false });
+
+  console.log('Mobile.js initialized');
+});
+
+// ===== SERVICE WORKER REGISTRATION =====
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js')
+    .then(registration => {
+      console.log('Service Worker registered:', registration);
+
+      // Check for updates periodically
+      setInterval(() => {
+        registration.update();
+      }, 60 * 60 * 1000); // Check every hour
+    })
+    .catch(error => {
+      console.error('Service Worker registration failed:', error);
+    });
+
+  // Listen for service worker updates
+  navigator.serviceWorker.addEventListener('controllerchange', () => {
+    console.log('Service Worker updated, reloading page...');
+    window.location.reload();
+  });
+}
+
+// Export functions for global use
+window.toggleMenu = toggleMenu;
+window.closeMenuFromBackdrop = closeMenuFromBackdrop;
+window.openUnitModal = openUnitModal;
+window.closeUnitModal = closeUnitModal;
+window.manualSync = manualSync;
+window.showToast = showToast;

app/ui/static/offline-db.js

@@ -0,0 +1,349 @@
+/* IndexedDB wrapper for offline data storage in SFM */
+/* Handles unit data, status snapshots, and pending edit queue */
+
+class OfflineDB {
+  constructor() {
+    this.dbName = 'sfm-offline-db';
+    this.version = 1;
+    this.db = null;
+  }
+
+  // Initialize database
+  async init() {
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(this.dbName, this.version);
+
+      request.onerror = () => {
+        console.error('IndexedDB error:', request.error);
+        reject(request.error);
+      };
+
+      request.onsuccess = () => {
+        this.db = request.result;
+        console.log('IndexedDB initialized successfully');
+        resolve(this.db);
+      };
+
+      request.onupgradeneeded = (event) => {
+        const db = event.target.result;
+
+        // Units store - full unit details
+        if (!db.objectStoreNames.contains('units')) {
+          const unitsStore = db.createObjectStore('units', { keyPath: 'id' });
+          unitsStore.createIndex('device_type', 'device_type', { unique: false });
+          unitsStore.createIndex('deployed', 'deployed', { unique: false });
+          console.log('Created units object store');
+        }
+
+        // Status snapshot store - latest status data
+        if (!db.objectStoreNames.contains('status-snapshot')) {
+          db.createObjectStore('status-snapshot', { keyPath: 'timestamp' });
+          console.log('Created status-snapshot object store');
+        }
+
+        // Pending edits store - offline edit queue
+        if (!db.objectStoreNames.contains('pending-edits')) {
+          const editsStore = db.createObjectStore('pending-edits', {
+            keyPath: 'id',
+            autoIncrement: true
+          });
+          editsStore.createIndex('unitId', 'unitId', { unique: false });
+          editsStore.createIndex('timestamp', 'timestamp', { unique: false });
+          console.log('Created pending-edits object store');
+        }
+      };
+    });
+  }
+
+  // ===== UNITS OPERATIONS =====
+
+  // Save or update a unit
+  async saveUnit(unit) {
+    if (!this.db) await this.init();
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction(['units'], 'readwrite');
+      const store = transaction.objectStore('units');
+      const request = store.put(unit);
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // Get a single unit by ID
+  async getUnit(unitId) {
+    if (!this.db) await this.init();
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction(['units'], 'readonly');
+      const store = transaction.objectStore('units');
+      const request = store.get(unitId);
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // Get all units
+  async getAllUnits() {
+    if (!this.db) await this.init();
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction(['units'], 'readonly');
+      const store = transaction.objectStore('units');
+      const request = store.getAll();
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // Delete a unit
+  async deleteUnit(unitId) {
+    if (!this.db) await this.init();
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction(['units'], 'readwrite');
+      const store = transaction.objectStore('units');
+      const request = store.delete(unitId);
+
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // ===== STATUS SNAPSHOT OPERATIONS =====
+
+  // Save status snapshot
+  async saveSnapshot(snapshot) {
+    if (!this.db) await this.init();
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction(['status-snapshot'], 'readwrite');
+      const store = transaction.objectStore('status-snapshot');
+
+      // Add timestamp
+      const snapshotWithTimestamp = {
+        ...snapshot,
+        timestamp: Date.now()
+      };
+
+      const request = store.put(snapshotWithTimestamp);
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // Get latest status snapshot
+  async getLatestSnapshot() {
+    if (!this.db) await this.init();
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction(['status-snapshot'], 'readonly');
+      const store = transaction.objectStore('status-snapshot');
+      const request = store.getAll();
+
+      request.onsuccess = () => {
+        const snapshots = request.result;
+        if (snapshots.length > 0) {
+          // Return the most recent snapshot
+          const latest = snapshots.reduce((prev, current) =>
+            (prev.timestamp > current.timestamp) ? prev : current
+          );
+          resolve(latest);
+        } else {
+          resolve(null);
+        }
+      };
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // Clear old snapshots (keep only latest)
+  async clearOldSnapshots() {
+    if (!this.db) await this.init();
+
+    return new Promise(async (resolve, reject) => {
+      const transaction = this.db.transaction(['status-snapshot'], 'readwrite');
+      const store = transaction.objectStore('status-snapshot');
+      const getAllRequest = store.getAll();
+
+      getAllRequest.onsuccess = () => {
+        const snapshots = getAllRequest.result;
+
+        if (snapshots.length > 1) {
+          // Sort by timestamp, keep only the latest
+          snapshots.sort((a, b) => b.timestamp - a.timestamp);
+
+          // Delete all except the first (latest)
+          for (let i = 1; i < snapshots.length; i++) {
+            store.delete(snapshots[i].timestamp);
+          }
+        }
+
+        resolve();
+      };
+
+      getAllRequest.onerror = () => reject(getAllRequest.error);
+    });
+  }
+
+  // ===== PENDING EDITS OPERATIONS =====
+
+  // Queue an edit for offline sync
+  async queueEdit(unitId, changes) {
+    if (!this.db) await this.init();
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction(['pending-edits'], 'readwrite');
+      const store = transaction.objectStore('pending-edits');
+
+      const edit = {
+        unitId,
+        changes,
+        timestamp: Date.now()
+      };
+
+      const request = store.add(edit);
+
+      request.onsuccess = () => {
+        console.log(`Queued edit for unit ${unitId}`);
+        resolve(request.result);
+      };
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // Get all pending edits
+  async getPendingEdits() {
+    if (!this.db) await this.init();
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction(['pending-edits'], 'readonly');
+      const store = transaction.objectStore('pending-edits');
+      const request = store.getAll();
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // Get pending edits count
+  async getPendingEditsCount() {
+    if (!this.db) await this.init();
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction(['pending-edits'], 'readonly');
+      const store = transaction.objectStore('pending-edits');
+      const request = store.count();
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // Clear a synced edit
+  async clearEdit(editId) {
+    if (!this.db) await this.init();
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction(['pending-edits'], 'readwrite');
+      const store = transaction.objectStore('pending-edits');
+      const request = store.delete(editId);
+
+      request.onsuccess = () => {
+        console.log(`Cleared edit ${editId} from queue`);
+        resolve();
+      };
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // Clear all pending edits
+  async clearAllEdits() {
+    if (!this.db) await this.init();
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction(['pending-edits'], 'readwrite');
+      const store = transaction.objectStore('pending-edits');
+      const request = store.clear();
+
+      request.onsuccess = () => {
+        console.log('Cleared all pending edits');
+        resolve();
+      };
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // ===== UTILITY OPERATIONS =====
+
+  // Clear all data (for debugging/reset)
+  async clearAllData() {
+    if (!this.db) await this.init();
+
+    return new Promise((resolve, reject) => {
+      const storeNames = ['units', 'status-snapshot', 'pending-edits'];
+      const transaction = this.db.transaction(storeNames, 'readwrite');
+
+      storeNames.forEach(storeName => {
+        transaction.objectStore(storeName).clear();
+      });
+
+      transaction.oncomplete = () => {
+        console.log('Cleared all offline data');
+        resolve();
+      };
+      transaction.onerror = () => reject(transaction.error);
+    });
+  }
+
+  // Get database statistics
+  async getStats() {
+    if (!this.db) await this.init();
+
+    const unitsCount = await new Promise((resolve, reject) => {
+      const transaction = this.db.transaction(['units'], 'readonly');
+      const request = transaction.objectStore('units').count();
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+
+    const pendingEditsCount = await this.getPendingEditsCount();
+
+    const hasSnapshot = await new Promise((resolve, reject) => {
+      const transaction = this.db.transaction(['status-snapshot'], 'readonly');
+      const request = transaction.objectStore('status-snapshot').count();
+      request.onsuccess = () => resolve(request.result > 0);
+      request.onerror = () => reject(request.error);
+    });
+
+    return {
+      unitsCount,
+      pendingEditsCount,
+      hasSnapshot
+    };
+  }
+}
+
+// Create global instance
+window.offlineDB = new OfflineDB();
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', async () => {
+  try {
+    await window.offlineDB.init();
+    console.log('Offline database ready');
+
+    // Display pending edits count if any
+    const pendingCount = await window.offlineDB.getPendingEditsCount();
+    if (pendingCount > 0) {
+      console.log(`${pendingCount} pending edits in queue`);
+      // Could show a badge in the UI here
+    }
+  } catch (error) {
+    console.error('Failed to initialize offline database:', error);
+  }
+});

app/ui/static/style.css

@@ -0,0 +1,12 @@
+/* Custom styles for Seismo Fleet Manager */
+
+/* Additional custom styles can go here */
+
+.card-hover {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.card-hover:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+}

app/ui/static/sw.js

@@ -0,0 +1,347 @@
+/* Service Worker for Seismo Fleet Manager PWA */
+/* Network-first strategy with cache fallback for real-time data */
+
+const CACHE_VERSION = 'v1';
+const STATIC_CACHE = `sfm-static-${CACHE_VERSION}`;
+const DYNAMIC_CACHE = `sfm-dynamic-${CACHE_VERSION}`;
+const DATA_CACHE = `sfm-data-${CACHE_VERSION}`;
+
+// Files to precache (critical app shell)
+const STATIC_FILES = [
+  '/',
+  '/static/style.css',
+  '/static/mobile.css',
+  '/static/mobile.js',
+  '/static/offline-db.js',
+  '/static/manifest.json',
+  'https://cdn.tailwindcss.com',
+  'https://unpkg.com/htmx.org@1.9.10',
+  'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css',
+  'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'
+];
+
+// Install event - cache static files
+self.addEventListener('install', (event) => {
+  console.log('[SW] Installing service worker...');
+
+  event.waitUntil(
+    caches.open(STATIC_CACHE)
+      .then((cache) => {
+        console.log('[SW] Precaching static files');
+        return cache.addAll(STATIC_FILES);
+      })
+      .then(() => {
+        console.log('[SW] Static files cached successfully');
+        return self.skipWaiting(); // Activate immediately
+      })
+      .catch((error) => {
+        console.error('[SW] Precaching failed:', error);
+      })
+  );
+});
+
+// Activate event - clean up old caches
+self.addEventListener('activate', (event) => {
+  console.log('[SW] Activating service worker...');
+
+  event.waitUntil(
+    caches.keys()
+      .then((cacheNames) => {
+        return Promise.all(
+          cacheNames.map((cacheName) => {
+            // Delete old caches that don't match current version
+            if (cacheName !== STATIC_CACHE &&
+                cacheName !== DYNAMIC_CACHE &&
+                cacheName !== DATA_CACHE) {
+              console.log('[SW] Deleting old cache:', cacheName);
+              return caches.delete(cacheName);
+            }
+          })
+        );
+      })
+      .then(() => {
+        console.log('[SW] Service worker activated');
+        return self.clients.claim(); // Take control of all pages
+      })
+  );
+});
+
+// Fetch event - network-first strategy
+self.addEventListener('fetch', (event) => {
+  const { request } = event;
+  const url = new URL(request.url);
+
+  // Skip non-GET requests
+  if (request.method !== 'GET') {
+    return;
+  }
+
+  // Skip chrome-extension and other non-http(s) requests
+  if (!url.protocol.startsWith('http')) {
+    return;
+  }
+
+  // API requests - network first, cache fallback
+  if (url.pathname.startsWith('/api/')) {
+    event.respondWith(networkFirstStrategy(request, DATA_CACHE));
+    return;
+  }
+
+  // Static assets - cache first
+  if (isStaticAsset(url.pathname)) {
+    event.respondWith(cacheFirstStrategy(request, STATIC_CACHE));
+    return;
+  }
+
+  // HTML pages - network first with cache fallback
+  if (request.headers.get('accept')?.includes('text/html')) {
+    event.respondWith(networkFirstStrategy(request, DYNAMIC_CACHE));
+    return;
+  }
+
+  // Everything else - network first
+  event.respondWith(networkFirstStrategy(request, DYNAMIC_CACHE));
+});
+
+// Network-first strategy
+async function networkFirstStrategy(request, cacheName) {
+  try {
+    // Try network first
+    const networkResponse = await fetch(request);
+
+    // Cache successful responses
+    if (networkResponse && networkResponse.status === 200) {
+      const cache = await caches.open(cacheName);
+      cache.put(request, networkResponse.clone());
+    }
+
+    return networkResponse;
+  } catch (error) {
+    // Network failed, try cache
+    console.log('[SW] Network failed, trying cache:', request.url);
+    const cachedResponse = await caches.match(request);
+
+    if (cachedResponse) {
+      console.log('[SW] Serving from cache:', request.url);
+      return cachedResponse;
+    }
+
+    // No cache available, return offline page or error
+    console.error('[SW] No cache available for:', request.url);
+
+    // For HTML requests, return a basic offline page
+    if (request.headers.get('accept')?.includes('text/html')) {
+      return new Response(
+        `<!DOCTYPE html>
+        <html lang="en">
+        <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>Offline - SFM</title>
+          <style>
+            body {
+              font-family: system-ui, -apple-system, sans-serif;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              min-height: 100vh;
+              margin: 0;
+              background: #f3f4f6;
+              color: #1f2937;
+            }
+            .container {
+              text-align: center;
+              padding: 2rem;
+            }
+            h1 { color: #f48b1c; margin-bottom: 1rem; }
+            p { margin-bottom: 1.5rem; color: #6b7280; }
+            button {
+              background: #f48b1c;
+              color: white;
+              border: none;
+              padding: 0.75rem 1.5rem;
+              border-radius: 0.5rem;
+              font-size: 1rem;
+              cursor: pointer;
+            }
+            button:hover { background: #d97706; }
+          </style>
+        </head>
+        <body>
+          <div class="container">
+            <h1>📡 You're Offline</h1>
+            <p>SFM requires an internet connection for this page.</p>
+            <p>Please check your connection and try again.</p>
+            <button onclick="location.reload()">Retry</button>
+          </div>
+        </body>
+        </html>`,
+        {
+          headers: { 'Content-Type': 'text/html' }
+        }
+      );
+    }
+
+    // For other requests, return error
+    return new Response('Network error', {
+      status: 503,
+      statusText: 'Service Unavailable'
+    });
+  }
+}
+
+// Cache-first strategy
+async function cacheFirstStrategy(request, cacheName) {
+  const cachedResponse = await caches.match(request);
+
+  if (cachedResponse) {
+    return cachedResponse;
+  }
+
+  // Not in cache, fetch from network
+  try {
+    const networkResponse = await fetch(request);
+
+    // Cache successful responses
+    if (networkResponse && networkResponse.status === 200) {
+      const cache = await caches.open(cacheName);
+      cache.put(request, networkResponse.clone());
+    }
+
+    return networkResponse;
+  } catch (error) {
+    console.error('[SW] Fetch failed:', request.url, error);
+    return new Response('Network error', {
+      status: 503,
+      statusText: 'Service Unavailable'
+    });
+  }
+}
+
+// Check if URL is a static asset
+function isStaticAsset(pathname) {
+  const staticExtensions = ['.css', '.js', '.png', '.jpg', '.jpeg', '.svg', '.ico', '.woff', '.woff2'];
+  return staticExtensions.some(ext => pathname.endsWith(ext));
+}
+
+// Background Sync - for offline edits
+self.addEventListener('sync', (event) => {
+  console.log('[SW] Background sync event:', event.tag);
+
+  if (event.tag === 'sync-edits') {
+    event.waitUntil(syncPendingEdits());
+  }
+});
+
+// Sync pending edits to server
+async function syncPendingEdits() {
+  console.log('[SW] Syncing pending edits...');
+
+  try {
+    // Get pending edits from IndexedDB
+    const db = await openDatabase();
+    const edits = await getPendingEdits(db);
+
+    if (edits.length === 0) {
+      console.log('[SW] No pending edits to sync');
+      return;
+    }
+
+    console.log(`[SW] Syncing ${edits.length} pending edits`);
+
+    // Send edits to server
+    const response = await fetch('/api/sync-edits', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ edits })
+    });
+
+    if (response.ok) {
+      const result = await response.json();
+      console.log('[SW] Sync successful:', result);
+
+      // Clear synced edits from IndexedDB
+      await clearSyncedEdits(db, result.synced_ids || []);
+
+      // Notify all clients about successful sync
+      const clients = await self.clients.matchAll();
+      clients.forEach(client => {
+        client.postMessage({
+          type: 'SYNC_COMPLETE',
+          synced: result.synced
+        });
+      });
+    } else {
+      console.error('[SW] Sync failed:', response.status);
+    }
+  } catch (error) {
+    console.error('[SW] Sync error:', error);
+    throw error; // Will retry sync later
+  }
+}
+
+// IndexedDB helpers (simplified versions - full implementations in offline-db.js)
+function openDatabase() {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open('sfm-offline-db', 1);
+
+    request.onerror = () => reject(request.error);
+    request.onsuccess = () => resolve(request.result);
+
+    request.onupgradeneeded = (event) => {
+      const db = event.target.result;
+
+      if (!db.objectStoreNames.contains('pending-edits')) {
+        db.createObjectStore('pending-edits', { keyPath: 'id', autoIncrement: true });
+      }
+    };
+  });
+}
+
+function getPendingEdits(db) {
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(['pending-edits'], 'readonly');
+    const store = transaction.objectStore('pending-edits');
+    const request = store.getAll();
+
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+  });
+}
+
+function clearSyncedEdits(db, editIds) {
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(['pending-edits'], 'readwrite');
+    const store = transaction.objectStore('pending-edits');
+
+    editIds.forEach(id => {
+      store.delete(id);
+    });
+
+    transaction.oncomplete = () => resolve();
+    transaction.onerror = () => reject(transaction.error);
+  });
+}
+
+// Message event - handle messages from clients
+self.addEventListener('message', (event) => {
+  console.log('[SW] Message received:', event.data);
+
+  if (event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+
+  if (event.data.type === 'CLEAR_CACHE') {
+    event.waitUntil(
+      caches.keys().then((cacheNames) => {
+        return Promise.all(
+          cacheNames.map((cacheName) => caches.delete(cacheName))
+        );
+      })
+    );
+  }
+});
+
+console.log('[SW] Service Worker loaded');

app/ui/templates/base.html

@@ -0,0 +1,384 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% if environment == 'development' %}[DEV] {% endif %}{% block title %}Seismo Fleet Manager{% endblock %}</title>
+
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <!-- HTMX -->
+    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
+
+    <!-- Leaflet for maps -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+
+    <!-- Mobile CSS -->
+    <link rel="stylesheet" href="/static/mobile.css">
+
+    <!-- PWA Manifest -->
+    <link rel="manifest" href="/static/manifest.json">
+    <meta name="theme-color" content="#f48b1c">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="SFM">
+
+    <!-- Custom Tailwind Config -->
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        seismo: {
+                            orange: '#f48b1c',
+                            navy: '#142a66',
+                            burgundy: '#7d234d',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+
+    <style>
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+
+        /* Smooth transitions */
+        * {
+            transition: background-color 0.2s ease, color 0.2s ease;
+        }
+    </style>
+
+    {% block extra_head %}{% endblock %}
+</head>
+<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+
+    <!-- Offline Indicator -->
+    <div id="offlineIndicator" class="offline-indicator">
+        📡 Offline - Changes will sync when connected
+    </div>
+
+    <!-- Sync Toast -->
+    <div id="syncToast" class="sync-toast">
+        ✓ Synced successfully
+    </div>
+
+    <div class="flex h-screen overflow-hidden">
+        <!-- Sidebar (Responsive) -->
+        <aside id="sidebar" class="sidebar w-64 bg-white dark:bg-slate-800 shadow-lg flex flex-col">
+            <!-- Logo -->
+            <div class="p-6 border-b border-gray-200 dark:border-gray-700">
+                <h1 class="text-2xl font-bold text-seismo-navy dark:text-seismo-orange">
+                    Seismo<br>
+                    <span class="text-seismo-orange dark:text-seismo-burgundy">Fleet Manager</span>
+                </h1>
+                <div class="flex items-center justify-between mt-2">
+                    <p class="text-xs text-gray-500 dark:text-gray-400">v {{ version }}</p>
+                    {% if environment == 'development' %}
+                    <span class="px-2 py-1 text-xs font-bold text-white bg-yellow-500 rounded">DEV</span>
+                    {% endif %}
+                </div>
+            </div>
+
+            <!-- Navigation -->
+            <nav class="flex-1 p-4 space-y-2">
+                <a href="/" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 {% if request.url.path == '/' %}bg-gray-100 dark:bg-gray-700{% endif %}">
+                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                    </svg>
+                    Dashboard
+                </a>
+
+                <a href="/roster" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 {% if request.url.path == '/roster' %}bg-gray-100 dark:bg-gray-700{% endif %}">
+                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
+                    </svg>
+                    Devices
+                </a>
+
+                <a href="/seismographs" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 {% if request.url.path == '/seismographs' %}bg-gray-100 dark:bg-gray-700{% endif %}">
+                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                    </svg>
+                    Seismographs
+                </a>
+
+                <a href="/sound-level-meters" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 {% if request.url.path == '/sound-level-meters' %}bg-gray-100 dark:bg-gray-700{% endif %}">
+                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"></path>
+                    </svg>
+                    Sound Level Meters
+                </a>
+
+                <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 opacity-50 cursor-not-allowed">
+                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
+                    </svg>
+                    Projects
+                </a>
+
+                <a href="/settings" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 {% if request.url.path == '/settings' %}bg-gray-100 dark:bg-gray-700{% endif %}">
+                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                    </svg>
+                    Settings
+                </a>
+            </nav>
+
+            <!-- Dark mode toggle and utilities -->
+            <div class="p-4 border-t border-gray-200 dark:border-gray-700 space-y-2">
+                <button onclick="toggleDarkMode()" class="w-full flex items-center justify-center px-4 py-3 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600">
+                    <svg id="theme-toggle-dark-icon" class="w-5 h-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
+                        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+                    </svg>
+                    <svg id="theme-toggle-light-icon" class="w-5 h-5 block dark:hidden" fill="currentColor" viewBox="0 0 20 20">
+                        <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
+                    </svg>
+                    <span class="ml-3">Toggle theme</span>
+                </button>
+
+                <button onclick="hardReload()" class="w-full flex items-center justify-center px-4 py-3 rounded-lg bg-red-100 dark:bg-red-900/30 hover:bg-red-200 dark:hover:bg-red-900/50 text-red-700 dark:text-red-400">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                    </svg>
+                    <span class="ml-3">Clear Cache & Reload</span>
+                </button>
+            </div>
+        </aside>
+
+        <!-- Backdrop (Mobile Only) -->
+        <div id="backdrop" class="backdrop" onclick="closeMenuFromBackdrop()"></div>
+
+        <!-- Main content -->
+        <main class="main-content flex-1 overflow-y-auto">
+            <div class="p-8">
+                {% block content %}{% endblock %}
+            </div>
+        </main>
+    </div>
+
+    <!-- Bottom Navigation (Mobile Only) -->
+    <nav class="bottom-nav">
+        <div class="grid grid-cols-4 h-16">
+            <button id="hamburgerBtn" class="bottom-nav-btn" onclick="toggleMenu()" aria-label="Menu">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                </svg>
+                <span>Menu</span>
+            </button>
+            <button class="bottom-nav-btn" data-href="/" onclick="window.location.href='/'">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                </svg>
+                <span>Dashboard</span>
+            </button>
+            <button class="bottom-nav-btn" data-href="/roster" onclick="window.location.href='/roster'">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
+                </svg>
+                <span>Devices</span>
+            </button>
+            <button class="bottom-nav-btn" data-href="/settings" onclick="window.location.href='/settings'">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                </svg>
+                <span>Settings</span>
+            </button>
+        </div>
+    </nav>
+
+    <script>
+        // Dark mode toggle
+        function toggleDarkMode() {
+            const html = document.documentElement;
+            if (html.classList.contains('dark')) {
+                html.classList.remove('dark');
+                localStorage.setItem('theme', 'light');
+            } else {
+                html.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+            }
+        }
+
+        // Hard reload function - clears all caches and reloads
+        async function hardReload() {
+            try {
+                // Clear service worker caches
+                if ('caches' in window) {
+                    const cacheNames = await caches.keys();
+                    await Promise.all(cacheNames.map(name => caches.delete(name)));
+                    console.log('Cleared all service worker caches');
+                }
+
+                // Unregister service workers
+                if ('serviceWorker' in navigator) {
+                    const registrations = await navigator.serviceWorker.getRegistrations();
+                    await Promise.all(registrations.map(reg => reg.unregister()));
+                    console.log('Unregistered all service workers');
+                }
+
+                // Clear IndexedDB
+                if ('indexedDB' in window) {
+                    try {
+                        indexedDB.deleteDatabase('sfm-offline-db');
+                        console.log('Cleared IndexedDB');
+                    } catch (e) {
+                        console.log('Could not clear IndexedDB:', e);
+                    }
+                }
+
+                // Force reload with cache bypass
+                window.location.reload(true);
+            } catch (error) {
+                console.error('Error during hard reload:', error);
+                // Fallback to regular reload
+                window.location.reload(true);
+            }
+        }
+
+        // Load saved theme preference
+        if (localStorage.getItem('theme') === 'light') {
+            document.documentElement.classList.remove('dark');
+        } else if (localStorage.getItem('theme') === 'dark') {
+            document.documentElement.classList.add('dark');
+        }
+
+        // Helper function: Convert timestamp to relative time
+        function timeAgo(dateString) {
+            if (!dateString) return 'Never';
+
+            const date = new Date(dateString);
+            const now = new Date();
+            const seconds = Math.floor((now - date) / 1000);
+
+            if (seconds < 60) return `${seconds}s ago`;
+
+            const minutes = Math.floor(seconds / 60);
+            if (minutes < 60) return `${minutes}m ago`;
+
+            const hours = Math.floor(minutes / 60);
+            if (hours < 24) {
+                const remainingMins = minutes % 60;
+                return remainingMins > 0 ? `${hours}h ${remainingMins}m ago` : `${hours}h ago`;
+            }
+
+            const days = Math.floor(hours / 24);
+            if (days < 7) {
+                const remainingHours = hours % 24;
+                return remainingHours > 0 ? `${days}d ${remainingHours}h ago` : `${days}d ago`;
+            }
+
+            const weeks = Math.floor(days / 7);
+            if (weeks < 4) {
+                const remainingDays = days % 7;
+                return remainingDays > 0 ? `${weeks}w ${remainingDays}d ago` : `${weeks}w ago`;
+            }
+
+            const months = Math.floor(days / 30);
+            return `${months}mo ago`;
+        }
+
+        // Helper function: Get user's selected timezone
+        function getTimezone() {
+            return localStorage.getItem('timezone') || 'America/New_York';
+        }
+
+        // Helper function: Format timestamp with tooltip (timezone-aware)
+        function formatTimestamp(dateString) {
+            if (!dateString) return '<span class="text-gray-400">Never</span>';
+
+            const date = new Date(dateString);
+            const timezone = getTimezone();
+
+            const fullDate = date.toLocaleString('en-US', {
+                weekday: 'short',
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+                timeZone: timezone,
+                timeZoneName: 'short'
+            });
+
+            return `<span title="${fullDate}" class="cursor-help">${timeAgo(dateString)}</span>`;
+        }
+
+        // Helper function: Format timestamp as full date/time (no relative time)
+        // Format: "9/10/2020 8:00 AM EST"
+        function formatFullTimestamp(dateString) {
+            if (!dateString) return 'Never';
+
+            const date = new Date(dateString);
+            const timezone = getTimezone();
+
+            return date.toLocaleString('en-US', {
+                month: 'numeric',
+                day: 'numeric',
+                year: 'numeric',
+                hour: 'numeric',
+                minute: '2-digit',
+                timeZone: timezone,
+                timeZoneName: 'short'
+            });
+        }
+
+        // Update all timestamps on page load and periodically
+        function updateAllTimestamps() {
+            document.querySelectorAll('[data-timestamp]').forEach(el => {
+                const timestamp = el.getAttribute('data-timestamp');
+                el.innerHTML = formatTimestamp(timestamp);
+            });
+        }
+
+        // Run on load and every minute
+        updateAllTimestamps();
+        setInterval(updateAllTimestamps, 60000);
+
+        // Copy to clipboard helper
+        function copyToClipboard(text, button) {
+            navigator.clipboard.writeText(text).then(() => {
+                // Visual feedback
+                const originalHTML = button.innerHTML;
+                button.innerHTML = '<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>';
+                button.classList.add('text-green-500');
+
+                setTimeout(() => {
+                    button.innerHTML = originalHTML;
+                    button.classList.remove('text-green-500');
+                }, 1500);
+            }).catch(err => {
+                console.error('Failed to copy:', err);
+            });
+        }
+    </script>
+
+    <!-- Offline Database -->
+    <script src="/static/offline-db.js?v=0.4.0"></script>
+
+    <!-- Mobile JavaScript -->
+    <script src="/static/mobile.js?v=0.4.0"></script>
+
+    {% block extra_scripts %}{% endblock %}
+</body>
+</html>

app/ui/templates/dashboard.html

@@ -0,0 +1,656 @@
+{% extends "base.html" %}
+
+{% block title %}Dashboard - Seismo Fleet Manager{% endblock %}
+
+{% block content %}
+{% if environment == 'development' %}
+<div class="mb-4 p-4 bg-yellow-100 dark:bg-yellow-900 border-l-4 border-yellow-500 text-yellow-700 dark:text-yellow-200 rounded">
+    <p class="font-bold">Development Environment</p>
+    <p class="text-sm">You are currently viewing the development version of Seismo Fleet Manager.</p>
+</div>
+{% endif %}
+
+<div class="mb-8 flex justify-between items-center">
+    <div>
+        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Dashboard</h1>
+        <p class="text-gray-600 dark:text-gray-400 mt-1">Fleet overview and recent activity</p>
+    </div>
+    <div class="text-right">
+        <p class="text-xs text-gray-500 dark:text-gray-400">Last updated</p>
+        <p id="last-refresh" class="text-sm text-gray-700 dark:text-gray-300 font-mono">--</p>
+    </div>
+</div>
+
+<!-- Dashboard cards with auto-refresh -->
+<div hx-get="/api/status-snapshot"
+     hx-trigger="load, every 10s"
+     hx-swap="none"
+     hx-on::after-request="updateDashboard(event)">
+
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+
+        <!-- Fleet Summary Card -->
+        <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6" id="fleet-summary-card">
+            <div class="flex items-center justify-between mb-4 cursor-pointer md:cursor-default" onclick="toggleCard('fleet-summary')">
+                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Fleet Summary</h2>
+                <div class="flex items-center gap-2">
+                    <svg class="w-6 h-6 text-seismo-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
+                        </path>
+                    </svg>
+                    <svg class="w-5 h-5 text-gray-500 transition-transform md:hidden chevron" id="fleet-summary-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                    </svg>
+                </div>
+            </div>
+            <div class="space-y-3 card-content" id="fleet-summary-content">
+                <div class="flex justify-between items-center">
+                    <span class="text-gray-600 dark:text-gray-400">Total Units</span>
+                    <span id="total-units" class="text-3xl md:text-2xl font-bold text-gray-900 dark:text-white">--</span>
+                </div>
+                <div class="flex justify-between items-center">
+                    <span class="text-gray-600 dark:text-gray-400">Deployed</span>
+                    <span id="deployed-units" class="text-3xl md:text-2xl font-bold text-blue-600 dark:text-blue-400">--</span>
+                </div>
+                <div class="flex justify-between items-center">
+                    <span class="text-gray-600 dark:text-gray-400">Benched</span>
+                    <span id="benched-units" class="text-3xl md:text-2xl font-bold text-gray-600 dark:text-gray-400">--</span>
+                </div>
+                <div class="border-t border-gray-200 dark:border-gray-700 pt-3 mt-3">
+                    <p class="text-xs text-gray-500 dark:text-gray-500 mb-2 italic">By Device Type:</p>
+                    <div class="flex justify-between items-center mb-1">
+                        <div class="flex items-center">
+                            <svg class="w-4 h-4 mr-1.5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                            </svg>
+                            <a href="/seismographs" class="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">Seismographs</a>
+                        </div>
+                        <span id="seismo-count" class="font-semibold text-blue-600 dark:text-blue-400">--</span>
+                    </div>
+                    <div class="flex justify-between items-center mb-2">
+                        <div class="flex items-center">
+                            <svg class="w-4 h-4 mr-1.5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"></path>
+                            </svg>
+                            <a href="/sound-level-meters" class="text-sm text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400">Sound Level Meters</a>
+                        </div>
+                        <span id="slm-count" class="font-semibold text-purple-600 dark:text-purple-400">--</span>
+                    </div>
+                </div>
+                <div class="border-t border-gray-200 dark:border-gray-700 pt-3 mt-3">
+                    <p class="text-xs text-gray-500 dark:text-gray-500 mb-2 italic">Deployed Status:</p>
+                    <div class="flex justify-between items-center mb-2" title="Units reporting normally (last seen < 12 hours)">
+                        <div class="flex items-center">
+                            <span class="w-3 h-3 rounded-full bg-green-500 mr-2 flex items-center justify-center">
+                                <svg class="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+                                </svg>
+                            </span>
+                            <span class="text-sm text-gray-600 dark:text-gray-400">OK</span>
+                        </div>
+                        <span id="status-ok" class="font-semibold text-green-600 dark:text-green-400">--</span>
+                    </div>
+                    <div class="flex justify-between items-center mb-2" title="Units with delayed reports (12-24 hours)">
+                        <div class="flex items-center">
+                            <span class="w-3 h-3 rounded-full bg-yellow-500 mr-2 flex items-center justify-center">
+                                <svg class="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
+                                </svg>
+                            </span>
+                            <span class="text-sm text-gray-600 dark:text-gray-400">Pending</span>
+                        </div>
+                        <span id="status-pending" class="font-semibold text-yellow-600 dark:text-yellow-400">--</span>
+                    </div>
+                    <div class="flex justify-between items-center" title="Units not reporting (> 24 hours)">
+                        <div class="flex items-center">
+                            <span class="w-3 h-3 rounded-full bg-red-500 mr-2 flex items-center justify-center">
+                                <svg class="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
+                                </svg>
+                            </span>
+                            <span class="text-sm text-gray-600 dark:text-gray-400">Missing</span>
+                        </div>
+                        <span id="status-missing" class="font-semibold text-red-600 dark:text-red-400">--</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Recent Alerts Card -->
+        <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6" id="recent-alerts-card">
+            <div class="flex items-center justify-between mb-4 cursor-pointer md:cursor-default" onclick="toggleCard('recent-alerts')">
+                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Alerts</h2>
+                <div class="flex items-center gap-2">
+                    <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
+                        </path>
+                    </svg>
+                    <svg class="w-5 h-5 text-gray-500 transition-transform md:hidden chevron" id="recent-alerts-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                    </svg>
+                </div>
+            </div>
+            <div id="alerts-list" class="space-y-3 card-content" id-content="recent-alerts-content">
+                <p class="text-sm text-gray-500 dark:text-gray-400">Loading alerts...</p>
+            </div>
+        </div>
+
+        <!-- Recently Called In Units Card -->
+        <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6" id="recent-callins-card">
+            <div class="flex items-center justify-between mb-4 cursor-pointer md:cursor-default" onclick="toggleCard('recent-callins')">
+                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Call-Ins</h2>
+                <div class="flex items-center gap-2">
+                    <svg class="w-6 h-6 text-seismo-burgundy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z">
+                        </path>
+                    </svg>
+                    <svg class="w-5 h-5 text-gray-500 transition-transform md:hidden chevron" id="recent-callins-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                    </svg>
+                </div>
+            </div>
+            <div class="card-content" id="recent-callins-content">
+                <div id="recent-callins-list" class="space-y-2">
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Loading recent call-ins...</p>
+                </div>
+                <button id="show-all-callins" class="hidden mt-3 w-full text-center text-sm text-seismo-orange hover:text-seismo-burgundy font-medium">
+                    Show all recent call-ins
+                </button>
+            </div>
+        </div>
+
+    </div>
+
+    <!-- Fleet Map -->
+    <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6 mb-8" id="fleet-map-card">
+        <div class="flex items-center justify-between mb-4 cursor-pointer md:cursor-default" onclick="toggleCard('fleet-map')">
+            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Fleet Map</h2>
+            <div class="flex items-center gap-2">
+                <span class="text-sm text-gray-500 dark:text-gray-400">Deployed units</span>
+                <svg class="w-5 h-5 text-gray-500 transition-transform md:hidden chevron" id="fleet-map-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                </svg>
+            </div>
+        </div>
+        <div class="card-content" id="fleet-map-content">
+            <div id="fleet-map" class="w-full h-64 md:h-96 rounded-lg"></div>
+        </div>
+    </div>
+
+    <!-- Recent Photos Section -->
+    <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6 mb-8" id="recent-photos-card">
+        <div class="flex items-center justify-between mb-4 cursor-pointer md:cursor-default" onclick="toggleCard('recent-photos')">
+            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Recent Photos</h2>
+            <div class="flex items-center gap-2">
+                <svg class="w-6 h-6 text-seismo-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                </svg>
+                <svg class="w-5 h-5 text-gray-500 transition-transform md:hidden chevron" id="recent-photos-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                </svg>
+            </div>
+        </div>
+        <div class="card-content" id="recent-photos-content">
+            <div id="recentPhotosGallery" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+                <p class="text-sm text-gray-500 dark:text-gray-400 col-span-full">Loading recent photos...</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Fleet Status Section with Tabs -->
+    <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6" id="fleet-status-card">
+
+        <div class="flex items-center justify-between mb-4 cursor-pointer md:cursor-default" onclick="toggleCard('fleet-status')">
+            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Fleet Status</h2>
+
+            <div class="flex items-center gap-2">
+                <a href="/roster" class="text-seismo-orange hover:text-seismo-burgundy font-medium flex items-center" onclick="event.stopPropagation()">
+                    Full Roster
+                    <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                    </svg>
+                </a>
+                <svg class="w-5 h-5 text-gray-500 transition-transform md:hidden chevron" id="fleet-status-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                </svg>
+            </div>
+        </div>
+
+        <div class="card-content" id="fleet-status-content">
+            <!-- Tab Bar -->
+            <div class="flex border-b border-gray-200 dark:border-gray-700 mb-4">
+                <button
+                    class="px-4 py-2 text-sm font-medium tab-button active-tab"
+                    hx-get="/dashboard/active"
+                    hx-target="#fleet-table"
+                    hx-swap="innerHTML">
+                    Active
+                </button>
+
+                <button
+                    class="px-4 py-2 text-sm font-medium tab-button"
+                    hx-get="/dashboard/benched"
+                    hx-target="#fleet-table"
+                    hx-swap="innerHTML">
+                    Benched
+                </button>
+            </div>
+
+            <!-- Tab Content Target -->
+            <div id="fleet-table" class="space-y-2"
+                 hx-get="/dashboard/active"
+                 hx-trigger="load"
+                 hx-swap="innerHTML">
+                <p class="text-gray-500 dark:text-gray-400">Loading fleet data...</p>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+
+<!-- TAB STYLE -->
+<style>
+.tab-button {
+    color: #6b7280; /* gray-500 */
+    border-bottom: 2px solid transparent;
+}
+.tab-button:hover {
+    color: #374151; /* gray-700 */
+}
+.active-tab {
+    color: #b84a12 !important; /* seismo orange */
+    border-bottom: 2px solid #b84a12 !important;
+}
+
+/* Collapsible cards (mobile only) */
+@media (max-width: 767px) {
+    .card-content.collapsed {
+        display: none;
+    }
+    .chevron.collapsed {
+        transform: rotate(-90deg);
+    }
+}
+</style>
+
+
+<script>
+// Toggle card collapse/expand (mobile only)
+function toggleCard(cardName) {
+    // Only work on mobile
+    if (window.innerWidth >= 768) return;
+
+    const content = document.getElementById(`${cardName}-content`);
+    const chevron = document.getElementById(`${cardName}-chevron`);
+
+    if (!content || !chevron) return;
+
+    // Toggle collapsed state
+    const isCollapsed = content.classList.contains('collapsed');
+
+    if (isCollapsed) {
+        content.classList.remove('collapsed');
+        chevron.classList.remove('collapsed');
+
+        // If expanding the fleet map, invalidate size after animation
+        if (cardName === 'fleet-map' && window.fleetMap) {
+            setTimeout(() => {
+                window.fleetMap.invalidateSize();
+            }, 300);
+        }
+    } else {
+        content.classList.add('collapsed');
+        chevron.classList.add('collapsed');
+    }
+
+    // Save state to localStorage
+    const cardStates = JSON.parse(localStorage.getItem('dashboardCardStates') || '{}');
+    cardStates[cardName] = !isCollapsed;
+    localStorage.setItem('dashboardCardStates', JSON.stringify(cardStates));
+}
+
+// Restore card states from localStorage on page load
+function restoreCardStates() {
+    const cardStates = JSON.parse(localStorage.getItem('dashboardCardStates') || '{}');
+    const cardNames = ['fleet-summary', 'recent-alerts', 'recent-callins', 'fleet-map', 'fleet-status'];
+
+    cardNames.forEach(cardName => {
+        const content = document.getElementById(`${cardName}-content`);
+        const chevron = document.getElementById(`${cardName}-chevron`);
+
+        if (!content || !chevron) return;
+
+        // Default to expanded (true) if no saved state
+        const isCollapsed = cardStates[cardName] === false;
+
+        if (isCollapsed) {
+            content.classList.add('collapsed');
+            chevron.classList.add('collapsed');
+        }
+    });
+}
+
+// Restore states when DOM is ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', restoreCardStates);
+} else {
+    restoreCardStates();
+}
+
+function updateDashboard(event) {
+    try {
+        const data = JSON.parse(event.detail.xhr.response);
+
+        // Update "Last updated" timestamp with timezone
+        const now = new Date();
+        const timezone = localStorage.getItem('timezone') || 'America/New_York';
+        document.getElementById('last-refresh').textContent = now.toLocaleTimeString('en-US', {
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            timeZone: timezone,
+            timeZoneName: 'short'
+        });
+
+        // ===== Fleet summary numbers =====
+        document.getElementById('total-units').textContent = data.summary?.total ?? 0;
+        document.getElementById('deployed-units').textContent = data.summary?.active ?? 0;
+        document.getElementById('benched-units').textContent = data.summary?.benched ?? 0;
+        document.getElementById('status-ok').textContent = data.summary?.ok ?? 0;
+        document.getElementById('status-pending').textContent = data.summary?.pending ?? 0;
+        document.getElementById('status-missing').textContent = data.summary?.missing ?? 0;
+
+        // ===== Device type counts =====
+        let seismoCount = 0;
+        let slmCount = 0;
+        Object.values(data.units || {}).forEach(unit => {
+            if (unit.retired) return; // Don't count retired units
+            const deviceType = unit.device_type || 'seismograph';
+            if (deviceType === 'seismograph') {
+                seismoCount++;
+            } else if (deviceType === 'sound_level_meter') {
+                slmCount++;
+            }
+        });
+        document.getElementById('seismo-count').textContent = seismoCount;
+        document.getElementById('slm-count').textContent = slmCount;
+
+        // ===== Alerts =====
+        const alertsList = document.getElementById('alerts-list');
+        // Only show alerts for deployed units that are MISSING (not pending)
+        const missingUnits = Object.entries(data.active).filter(([_, u]) => u.status === 'Missing');
+
+        if (!missingUnits.length) {
+            alertsList.innerHTML =
+                '<p class="text-sm text-green-600 dark:text-green-400">✓ All units reporting normally</p>';
+        } else {
+            let alertsHtml = '';
+
+            missingUnits.forEach(([id, unit]) => {
+                alertsHtml += `
+                <div class="flex items-start space-x-2 text-sm">
+                    <span class="w-2 h-2 rounded-full bg-red-500 mt-1.5"></span>
+                    <div>
+                        <a href="/unit/${id}" class="font-medium text-red-600 dark:text-red-400 hover:underline">${id}</a>
+                        <p class="text-gray-600 dark:text-gray-400">Missing for ${unit.age}</p>
+                    </div>
+                </div>`;
+            });
+
+            alertsList.innerHTML = alertsHtml;
+        }
+
+        // ===== Update Fleet Map =====
+        updateFleetMap(data);
+
+    } catch (err) {
+        console.error("Dashboard update error:", err);
+    }
+}
+
+// Handle tab switching
+document.addEventListener('DOMContentLoaded', function() {
+    const tabButtons = document.querySelectorAll('.tab-button');
+
+    tabButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            // Remove active-tab class from all buttons
+            tabButtons.forEach(btn => btn.classList.remove('active-tab'));
+            // Add active-tab class to clicked button
+            this.classList.add('active-tab');
+        });
+    });
+
+    // Initialize fleet map
+    initFleetMap();
+});
+
+let fleetMap = null;
+let fleetMarkers = [];
+let fleetMapInitialized = false;
+
+// Make fleetMap accessible globally for toggleCard function
+window.fleetMap = null;
+
+function initFleetMap() {
+    // Initialize the map centered on the US (can adjust based on your deployment area)
+    fleetMap = L.map('fleet-map').setView([39.8283, -98.5795], 4);
+    window.fleetMap = fleetMap;
+
+    // Add OpenStreetMap tiles
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '© OpenStreetMap contributors',
+        maxZoom: 18
+    }).addTo(fleetMap);
+
+    // Force map to recalculate size after a brief delay to ensure container is fully rendered
+    setTimeout(() => {
+        fleetMap.invalidateSize();
+    }, 100);
+}
+
+function updateFleetMap(data) {
+    if (!fleetMap) return;
+
+    // Clear existing markers
+    fleetMarkers.forEach(marker => fleetMap.removeLayer(marker));
+    fleetMarkers = [];
+
+    // Get deployed units with coordinates data
+    const deployedUnits = Object.entries(data.units).filter(([_, u]) => u.deployed && u.coordinates);
+
+    if (deployedUnits.length === 0) {
+        return;
+    }
+
+    const bounds = [];
+
+    deployedUnits.forEach(([id, unit]) => {
+        const coords = parseLocation(unit.coordinates);
+        if (coords) {
+            const [lat, lon] = coords;
+
+            // Create marker with custom color based on status
+            const markerColor = unit.status === 'OK' ? 'green' : unit.status === 'Pending' ? 'orange' : 'red';
+
+            const marker = L.circleMarker([lat, lon], {
+                radius: 8,
+                fillColor: markerColor,
+                color: '#fff',
+                weight: 2,
+                opacity: 1,
+                fillOpacity: 0.8
+            }).addTo(fleetMap);
+
+            // Add popup with unit info
+            marker.bindPopup(`
+                <div class="p-2">
+                    <h3 class="font-bold text-lg">${id}</h3>
+                    <p class="text-sm">Status: <span style="color: ${markerColor}">${unit.status}</span></p>
+                    <p class="text-sm">Type: ${unit.device_type}</p>
+                    ${unit.note ? `<p class="text-sm text-gray-600">${unit.note}</p>` : ''}
+                    <a href="/unit/${id}" class="text-blue-600 hover:underline text-sm">View Details →</a>
+                </div>
+            `);
+
+            fleetMarkers.push(marker);
+            bounds.push([lat, lon]);
+        }
+    });
+
+    // Fit map to show all markers
+    if (bounds.length > 0) {
+        // Use different padding for mobile vs desktop
+        const padding = window.innerWidth < 768 ? [20, 20] : [50, 50];
+        fleetMap.fitBounds(bounds, { padding: padding });
+        fleetMapInitialized = true;
+    }
+}
+
+function parseLocation(location) {
+    if (!location) return null;
+
+    // Try to parse as "lat,lon" format
+    const parts = location.split(',').map(s => s.trim());
+    if (parts.length === 2) {
+        const lat = parseFloat(parts[0]);
+        const lon = parseFloat(parts[1]);
+        if (!isNaN(lat) && !isNaN(lon)) {
+            return [lat, lon];
+        }
+    }
+
+    // TODO: Add geocoding support for address strings
+    return null;
+}
+
+// Load and display recent photos
+async function loadRecentPhotos() {
+    try {
+        const response = await fetch('/api/recent-photos?limit=12');
+        if (!response.ok) {
+            throw new Error('Failed to load recent photos');
+        }
+
+        const data = await response.json();
+        const gallery = document.getElementById('recentPhotosGallery');
+
+        if (data.photos && data.photos.length > 0) {
+            gallery.innerHTML = '';
+            data.photos.forEach(photo => {
+                const photoDiv = document.createElement('div');
+                photoDiv.className = 'relative group';
+                photoDiv.innerHTML = `
+                    <a href="/unit/${photo.unit_id}" class="block">
+                        <img src="${photo.path}" alt="${photo.unit_id}"
+                             class="w-full h-32 object-cover rounded-lg shadow hover:shadow-lg transition-shadow">
+                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-2 rounded-b-lg">
+                            <p class="text-white text-xs font-semibold">${photo.unit_id}</p>
+                        </div>
+                    </a>
+                `;
+                gallery.appendChild(photoDiv);
+            });
+        } else {
+            gallery.innerHTML = '<p class="text-sm text-gray-500 dark:text-gray-400 col-span-full">No photos uploaded yet. Upload photos from unit detail pages.</p>';
+        }
+    } catch (error) {
+        console.error('Error loading recent photos:', error);
+        document.getElementById('recentPhotosGallery').innerHTML = '<p class="text-sm text-red-500 col-span-full">Failed to load recent photos</p>';
+    }
+}
+
+// Load recent photos on page load and refresh every 30 seconds
+loadRecentPhotos();
+setInterval(loadRecentPhotos, 30000);
+
+// Load and display recent call-ins
+let showingAllCallins = false;
+const DEFAULT_CALLINS_DISPLAY = 5;
+
+async function loadRecentCallins() {
+    try {
+        const response = await fetch('/api/recent-callins?hours=6');
+        if (!response.ok) {
+            throw new Error('Failed to load recent call-ins');
+        }
+
+        const data = await response.json();
+        const callinsList = document.getElementById('recent-callins-list');
+        const showAllButton = document.getElementById('show-all-callins');
+
+        if (data.call_ins && data.call_ins.length > 0) {
+            // Determine how many to show
+            const displayCount = showingAllCallins ? data.call_ins.length : Math.min(DEFAULT_CALLINS_DISPLAY, data.call_ins.length);
+            const callinsToDisplay = data.call_ins.slice(0, displayCount);
+
+            // Build HTML for call-ins list
+            let html = '';
+            callinsToDisplay.forEach(callin => {
+                // Status color
+                const statusColor = callin.status === 'OK' ? 'green' : callin.status === 'Pending' ? 'yellow' : 'red';
+                const statusClass = callin.status === 'OK' ? 'bg-green-500' : callin.status === 'Pending' ? 'bg-yellow-500' : 'bg-red-500';
+
+                // Build location/note line
+                let subtitle = '';
+                if (callin.location) {
+                    subtitle = callin.location;
+                } else if (callin.note) {
+                    subtitle = callin.note;
+                }
+
+                html += `
+                <div class="flex items-center justify-between py-2 border-b border-gray-200 dark:border-gray-700 last:border-0">
+                    <div class="flex items-center space-x-3">
+                        <span class="w-2 h-2 rounded-full ${statusClass}"></span>
+                        <div>
+                            <a href="/unit/${callin.unit_id}" class="font-medium text-gray-900 dark:text-white hover:text-seismo-orange">
+                                ${callin.unit_id}
+                            </a>
+                            ${subtitle ? `<p class="text-xs text-gray-500 dark:text-gray-400">${subtitle}</p>` : ''}
+                        </div>
+                    </div>
+                    <span class="text-sm text-gray-600 dark:text-gray-400">${callin.time_ago}</span>
+                </div>`;
+            });
+
+            callinsList.innerHTML = html;
+
+            // Show/hide the "Show all" button
+            if (data.call_ins.length > DEFAULT_CALLINS_DISPLAY) {
+                showAllButton.classList.remove('hidden');
+                showAllButton.textContent = showingAllCallins
+                    ? `Show fewer (${DEFAULT_CALLINS_DISPLAY})`
+                    : `Show all (${data.call_ins.length})`;
+            } else {
+                showAllButton.classList.add('hidden');
+            }
+        } else {
+            callinsList.innerHTML = '<p class="text-sm text-gray-500 dark:text-gray-400">No units have called in within the past 6 hours</p>';
+            showAllButton.classList.add('hidden');
+        }
+    } catch (error) {
+        console.error('Error loading recent call-ins:', error);
+        document.getElementById('recent-callins-list').innerHTML = '<p class="text-sm text-red-500">Failed to load recent call-ins</p>';
+    }
+}
+
+// Toggle show all/show fewer
+document.addEventListener('DOMContentLoaded', function() {
+    const showAllButton = document.getElementById('show-all-callins');
+    showAllButton.addEventListener('click', function() {
+        showingAllCallins = !showingAllCallins;
+        loadRecentCallins();
+    });
+});
+
+// Load recent call-ins on page load and refresh every 30 seconds
+loadRecentCallins();
+setInterval(loadRecentCallins, 30000);
+</script>
+
+{% endblock %}

app/ui/templates/partials/active_table.html

@@ -0,0 +1,56 @@
+{% if units %}
+<div class="space-y-2">
+    {% for unit_id, unit in units.items() %}
+    <div class="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-700/50 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+        <div class="flex items-center space-x-3 flex-1">
+            <!-- Status Indicator -->
+            <div class="flex-shrink-0">
+                {% if unit.status == 'OK' %}
+                <span class="w-4 h-4 rounded-full bg-green-500" title="OK"></span>
+                {% elif unit.status == 'Pending' %}
+                <span class="w-4 h-4 rounded-full bg-yellow-500" title="Pending"></span>
+                {% else %}
+                <span class="w-4 h-4 rounded-full bg-red-500" title="Missing"></span>
+                {% endif %}
+            </div>
+
+            <!-- Unit Info -->
+            <div class="flex-1 min-w-0">
+                <div class="flex items-center gap-2">
+                    <a href="/unit/{{ unit_id }}" class="font-medium text-seismo-orange hover:text-seismo-burgundy hover:underline">
+                        {{ unit_id }}
+                    </a>
+                    {% if unit.device_type == 'modem' %}
+                    <span class="px-2 py-0.5 rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 text-xs">
+                        Modem
+                    </span>
+                    {% else %}
+                    <span class="px-2 py-0.5 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 text-xs">
+                        Seismograph
+                    </span>
+                    {% endif %}
+                </div>
+                {% if unit.note %}
+                <p class="text-xs text-gray-500 dark:text-gray-400 truncate">{{ unit.note }}</p>
+                {% endif %}
+            </div>
+
+            <!-- Age -->
+            <div class="text-right flex-shrink-0">
+                <span class="text-sm {% if unit.status == 'Missing' %}text-red-600 dark:text-red-400 font-semibold{% elif unit.status == 'Pending' %}text-yellow-600 dark:text-yellow-400{% else %}text-gray-500 dark:text-gray-400{% endif %}">
+                    {{ unit.age }}
+                </span>
+            </div>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+{% else %}
+<div class="text-center py-12">
+    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
+    </svg>
+    <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-gray-100">No active units</h3>
+    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Get started by adding a new unit to the fleet.</p>
+</div>
+{% endif %}

app/ui/templates/partials/benched_table.html

@@ -0,0 +1,56 @@
+{% if units %}
+<div class="space-y-2">
+    {% for unit_id, unit in units.items() %}
+    <div class="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-700/50 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+        <div class="flex items-center space-x-3 flex-1">
+            <!-- Status Indicator (grayed out for benched) -->
+            <div class="flex-shrink-0">
+                <span class="w-4 h-4 rounded-full bg-gray-400" title="Benched"></span>
+            </div>
+
+            <!-- Unit Info -->
+            <div class="flex-1 min-w-0">
+                <div class="flex items-center gap-2">
+                    <a href="/unit/{{ unit_id }}" class="font-medium text-seismo-orange hover:text-seismo-burgundy hover:underline">
+                        {{ unit_id }}
+                    </a>
+                    {% if unit.device_type == 'modem' %}
+                    <span class="px-2 py-0.5 rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 text-xs">
+                        Modem
+                    </span>
+                    {% else %}
+                    <span class="px-2 py-0.5 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 text-xs">
+                        Seismograph
+                    </span>
+                    {% endif %}
+                </div>
+                {% if unit.note %}
+                <p class="text-xs text-gray-500 dark:text-gray-400 truncate">{{ unit.note }}</p>
+                {% endif %}
+            </div>
+
+            <!-- Last Activity (if any) -->
+            <div class="text-right flex-shrink-0">
+                {% if unit.age != 'N/A' %}
+                <span class="text-sm text-gray-400 dark:text-gray-500">
+                    Last seen: {{ unit.age }} ago
+                </span>
+                {% else %}
+                <span class="text-sm text-gray-400 dark:text-gray-500">
+                    No data
+                </span>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+{% else %}
+<div class="text-center py-12">
+    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
+    </svg>
+    <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-gray-100">No benched units</h3>
+    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Units awaiting deployment will appear here.</p>
+</div>
+{% endif %}

app/ui/templates/partials/dashboard_active.html

@@ -0,0 +1,23 @@
+{% for id, unit in units.items() %}
+<a href="/unit/{{ id }}" 
+   class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700">
+    
+    <div class="flex items-center space-x-3">
+        <span class="w-3 h-3 rounded-full 
+            {% if unit.status == 'OK' %} bg-green-500
+            {% elif unit.status == 'Pending' %} bg-yellow-500
+            {% else %} bg-red-500 {% endif %}">
+        </span>
+
+        <span class="w-2 h-2 rounded-full bg-blue-500"></span>
+
+        <span class="font-medium">{{ id }}</span>
+    </div>
+
+    <span class="text-sm text-gray-500 dark:text-gray-400">{{ unit.age }}</span>
+</a>
+{% endfor %}
+
+{% if units|length == 0 %}
+<p class="text-gray-500 dark:text-gray-400 text-sm">No active units</p>
+{% endif %}

app/ui/templates/partials/dashboard_benched.html

@@ -0,0 +1,23 @@
+{% for id, unit in units.items() %}
+<a href="/unit/{{ id }}" 
+   class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700">
+
+    <div class="flex items-center space-x-3">
+        <span class="w-3 h-3 rounded-full 
+            {% if unit.status == 'OK' %} bg-green-500
+            {% elif unit.status == 'Pending' %} bg-yellow-500
+            {% else %} bg-red-500 {% endif %}">
+        </span>
+
+        <!-- No deployed dot for benched units -->
+
+        <span class="font-medium">{{ id }}</span>
+    </div>
+
+    <span class="text-sm text-gray-500 dark:text-gray-400">{{ unit.age }}</span>
+</a>
+{% endfor %}
+
+{% if units|length == 0 %}
+<p class="text-gray-500 dark:text-gray-400 text-sm">No benched units</p>
+{% endif %}

app/ui/templates/partials/devices_table.html

@@ -0,0 +1,449 @@
+<!-- Desktop Table View -->
+<div class="hidden md:block rounded-xl shadow-lg bg-white dark:bg-slate-800 overflow-hidden">
+    <table id="roster-table" class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+        <thead class="bg-gray-50 dark:bg-gray-700">
+            <tr>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('status')">
+                    <div class="flex items-center gap-1">
+                        Status
+                        <span class="sort-indicator" data-column="status"></span>
+                    </div>
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('id')">
+                    <div class="flex items-center gap-1">
+                        Unit ID
+                        <span class="sort-indicator" data-column="id"></span>
+                    </div>
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('type')">
+                    <div class="flex items-center gap-1">
+                        Type
+                        <span class="sort-indicator" data-column="type"></span>
+                    </div>
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                    Details
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('last_seen')">
+                    <div class="flex items-center gap-1">
+                        Last Seen
+                        <span class="sort-indicator" data-column="last_seen"></span>
+                    </div>
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('age')">
+                    <div class="flex items-center gap-1">
+                        Age
+                        <span class="sort-indicator" data-column="age"></span>
+                    </div>
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('note')">
+                    <div class="flex items-center gap-1">
+                        Note
+                        <span class="sort-indicator" data-column="note"></span>
+                    </div>
+                </th>
+                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                    Actions
+                </th>
+            </tr>
+        </thead>
+        <tbody id="roster-tbody" class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-gray-700">
+            {% for unit in units %}
+            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+                data-device-type="{{ unit.device_type }}"
+                data-status="{% if unit.deployed %}deployed{% elif unit.retired %}retired{% elif unit.ignored %}ignored{% else %}benched{% endif %}"
+                data-health="{{ unit.status }}"
+                data-id="{{ unit.id }}"
+                data-type="{{ unit.device_type }}"
+                data-last-seen="{{ unit.last_seen }}"
+                data-age="{{ unit.age }}"
+                data-note="{{ unit.note if unit.note else '' }}">
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center space-x-2">
+                        {% if unit.status == 'OK' %}
+                        <span class="w-3 h-3 rounded-full bg-green-500" title="OK"></span>
+                        {% elif unit.status == 'Pending' %}
+                        <span class="w-3 h-3 rounded-full bg-yellow-500" title="Pending"></span>
+                        {% else %}
+                        <span class="w-3 h-3 rounded-full bg-red-500" title="Missing"></span>
+                        {% endif %}
+
+                        {% if unit.deployed %}
+                        <span class="w-2 h-2 rounded-full bg-blue-500" title="Deployed"></span>
+                        {% else %}
+                        <span class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-600" title="Benched"></span>
+                        {% endif %}
+                    </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <a href="/unit/{{ unit.id }}" class="text-sm font-medium text-seismo-orange hover:text-seismo-burgundy hover:underline">
+                        {{ unit.id }}
+                    </a>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    {% if unit.device_type == 'modem' %}
+                        <span class="px-2 py-1 rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 text-xs font-medium">
+                            Modem
+                        </span>
+                    {% else %}
+                        <span class="px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 text-xs font-medium">
+                            Seismograph
+                        </span>
+                    {% endif %}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-xs text-gray-600 dark:text-gray-400 space-y-1">
+                        {% if unit.device_type == 'modem' %}
+                            {% if unit.ip_address %}
+                                <div><span class="font-mono">{{ unit.ip_address }}</span></div>
+                            {% endif %}
+                            {% if unit.phone_number %}
+                                <div>{{ unit.phone_number }}</div>
+                            {% endif %}
+                            {% if unit.hardware_model %}
+                                <div class="text-gray-500 dark:text-gray-500">{{ unit.hardware_model }}</div>
+                            {% endif %}
+                        {% else %}
+                            {% if unit.next_calibration_due %}
+                                <div>
+                                    <span class="text-gray-500 dark:text-gray-500">Cal Due:</span>
+                                    <span class="font-medium">{{ unit.next_calibration_due }}</span>
+                                </div>
+                            {% endif %}
+                            {% if unit.deployed_with_modem_id %}
+                                <div>
+                                    <span class="text-gray-500 dark:text-gray-500">Modem:</span>
+                                    <a href="/unit/{{ unit.deployed_with_modem_id }}" class="text-seismo-orange hover:underline font-medium">
+                                        {{ unit.deployed_with_modem_id }}
+                                    </a>
+                                </div>
+                            {% endif %}
+                        {% endif %}
+                    </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-sm text-gray-500 dark:text-gray-400">{{ unit.last_seen }}</div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-sm
+                        {% if unit.status == 'Missing' %}text-red-600 dark:text-red-400 font-semibold
+                        {% elif unit.status == 'Pending' %}text-yellow-600 dark:text-yellow-400
+                        {% else %}text-gray-500 dark:text-gray-400
+                        {% endif %}">
+                        {{ unit.age }}
+                    </div>
+                </td>
+                <td class="px-6 py-4">
+                    <div class="text-sm text-gray-500 dark:text-gray-400 truncate max-w-xs" title="{{ unit.note }}">
+                        {{ unit.note if unit.note else '-' }}
+                    </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    <div class="flex justify-end gap-2">
+                        <button onclick="editUnit('{{ unit.id }}')"
+                            class="text-seismo-orange hover:text-seismo-burgundy p-1" title="Edit">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+                            </svg>
+                        </button>
+                        {% if unit.deployed %}
+                        <button onclick="toggleDeployed('{{ unit.id }}', false)"
+                            class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 p-1" title="Mark as Benched">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                            </svg>
+                        </button>
+                        {% else %}
+                        <button onclick="toggleDeployed('{{ unit.id }}', true)"
+                            class="text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300 p-1" title="Mark as Deployed">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                            </svg>
+                        </button>
+                        {% endif %}
+                        <button onclick="moveToIgnore('{{ unit.id }}')"
+                            class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 p-1" title="Move to Ignore List">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"></path>
+                            </svg>
+                        </button>
+                        <button onclick="deleteUnit('{{ unit.id }}')"
+                            class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 p-1" title="Delete Unit">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+                            </svg>
+                        </button>
+                    </div>
+                </td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+
+    <!-- Last updated indicator -->
+    <div class="px-6 py-3 bg-gray-50 dark:bg-gray-700 text-xs text-gray-500 dark:text-gray-400 text-right">
+        Last updated: <span id="last-updated">{{ timestamp }}</span>
+    </div>
+</div>
+
+<!-- Mobile Card View -->
+<div class="md:hidden space-y-3">
+    {% for unit in units %}
+    <div class="unit-card device-card"
+         onclick="openUnitModal('{{ unit.id }}', '{{ unit.status }}', '{{ unit.age }}')"
+         data-device-type="{{ unit.device_type }}"
+         data-status="{% if unit.deployed %}deployed{% elif unit.retired %}retired{% elif unit.ignored %}ignored{% else %}benched{% endif %}"
+         data-health="{{ unit.status }}"
+         data-unit-id="{{ unit.id }}"
+         data-age="{{ unit.age }}">
+        <!-- Header: Status Dot + Unit ID + Status Badge -->
+        <div class="flex items-center justify-between mb-2">
+            <div class="flex items-center gap-2">
+                {% if unit.status == 'OK' %}
+                <span class="w-4 h-4 rounded-full bg-green-500" title="OK"></span>
+                {% elif unit.status == 'Pending' %}
+                <span class="w-4 h-4 rounded-full bg-yellow-500" title="Pending"></span>
+                {% elif unit.status == 'Missing' %}
+                <span class="w-4 h-4 rounded-full bg-red-500" title="Missing"></span>
+                {% else %}
+                <span class="w-4 h-4 rounded-full bg-gray-400" title="No Data"></span>
+                {% endif %}
+                <span class="font-bold text-lg text-seismo-orange dark:text-seismo-orange">{{ unit.id }}</span>
+            </div>
+            <span class="px-3 py-1 rounded-full text-xs font-medium
+                {% if unit.status == 'OK' %}bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300
+                {% elif unit.status == 'Pending' %}bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300
+                {% elif unit.status == 'Missing' %}bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300
+                {% else %}bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400
+                {% endif %}">
+                {% if unit.status in ['N/A', 'Unknown'] %}Benched{% else %}{{ unit.status }}{% endif %}
+            </span>
+        </div>
+
+        <!-- Type Badge -->
+        <div class="mb-2">
+            {% if unit.device_type == 'modem' %}
+            <span class="px-2 py-1 rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 text-xs font-medium">
+                Modem
+            </span>
+            {% else %}
+            <span class="px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 text-xs font-medium">
+                Seismograph
+            </span>
+            {% endif %}
+        </div>
+
+        <!-- Location -->
+        {% if unit.address %}
+        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">
+            📍 {{ unit.address }}
+        </div>
+        {% elif unit.coordinates %}
+        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">
+            📍 {{ unit.coordinates }}
+        </div>
+        {% endif %}
+
+        <!-- Project ID -->
+        {% if unit.project_id %}
+        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">
+            🏗️ {{ unit.project_id }}
+        </div>
+        {% endif %}
+
+        <!-- Last Seen -->
+        <div class="text-sm text-gray-500 dark:text-gray-500 mt-2">
+            🕐 {{ unit.age }}
+        </div>
+
+        <!-- Deployed/Benched Indicator -->
+        <div class="mt-2">
+            {% if unit.deployed %}
+            <span class="text-xs text-blue-600 dark:text-blue-400">
+                ⚡ Deployed
+            </span>
+            {% else %}
+            <span class="text-xs text-gray-500 dark:text-gray-500">
+                📦 Benched
+            </span>
+            {% endif %}
+        </div>
+
+        <!-- Tap Hint -->
+        <div class="text-xs text-gray-400 mt-2 text-center border-t border-gray-200 dark:border-gray-700 pt-2">
+            Tap for details
+        </div>
+    </div>
+    {% endfor %}
+
+    <!-- Mobile Last Updated -->
+    <div class="text-xs text-gray-500 dark:text-gray-400 text-center py-2">
+        Last updated: <span id="last-updated-mobile">{{ timestamp }}</span>
+    </div>
+</div>
+
+<!-- Unit Detail Modal -->
+<div id="unitModal" class="unit-modal">
+    <!-- Backdrop -->
+    <div class="unit-modal-backdrop" onclick="closeUnitModal(event)"></div>
+
+    <!-- Modal Content -->
+    <div class="unit-modal-content">
+        <!-- Handle Bar (Mobile Only) -->
+        <div class="modal-handle"></div>
+
+        <!-- Header -->
+        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+            <h3 id="modalUnitId" class="text-xl font-bold text-gray-900 dark:text-white"></h3>
+            <button onclick="closeUnitModal(event)" data-close-modal class="w-10 h-10 flex items-center justify-center text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                </svg>
+            </button>
+        </div>
+
+        <!-- Content -->
+        <div id="modalContent" class="p-6">
+            <!-- Content will be populated by JavaScript -->
+        </div>
+
+        <!-- Actions -->
+        <div class="p-6 border-t border-gray-200 dark:border-gray-700 space-y-3">
+            <button id="modalEditBtn" class="w-full h-12 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg font-medium transition-colors">
+                Edit Unit
+            </button>
+            <div class="grid grid-cols-2 gap-3">
+                <button id="modalDeployBtn" class="h-12 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                    Deploy/Bench
+                </button>
+                <button id="modalDeleteBtn" class="h-12 border border-red-300 dark:border-red-600 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">
+                    Delete
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    .sort-indicator::after {
+        content: '⇅';
+        opacity: 0.3;
+        font-size: 12px;
+    }
+    .sort-indicator.asc::after {
+        content: '↑';
+        opacity: 1;
+    }
+    .sort-indicator.desc::after {
+        content: '↓';
+        opacity: 1;
+    }
+</style>
+
+<script>
+    // Update timestamp
+    const timestampElement = document.getElementById('last-updated');
+    if (timestampElement) {
+        timestampElement.textContent = new Date().toLocaleTimeString();
+    }
+    const timestampMobileElement = document.getElementById('last-updated-mobile');
+    if (timestampMobileElement) {
+        timestampMobileElement.textContent = new Date().toLocaleTimeString();
+    }
+
+    // Keep a lightweight status map around for the mobile modal
+    const rosterUnits = {{ units | tojson }};
+    window.rosterStatusMap = rosterUnits.reduce((acc, unit) => {
+        acc[unit.id] = {
+            status: unit.status || 'Unknown',
+            age: unit.age || 'N/A',
+            last: unit.last_seen || 'Never'
+        };
+        return acc;
+    }, {});
+
+    // Sorting state
+    let currentSort = { column: null, direction: 'asc' };
+
+    function sortTable(column) {
+        const tbody = document.getElementById('roster-tbody');
+        const rows = Array.from(tbody.getElementsByTagName('tr'));
+
+        // Determine sort direction
+        if (currentSort.column === column) {
+            currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
+        } else {
+            currentSort.column = column;
+            currentSort.direction = 'asc';
+        }
+
+        // Sort rows
+        rows.sort((a, b) => {
+            let aVal = a.getAttribute(`data-${column}`) || '';
+            let bVal = b.getAttribute(`data-${column}`) || '';
+
+            // Special handling for different column types
+            if (column === 'age') {
+                // Parse age strings like "2h 15m" or "45m" or "3d 5h"
+                aVal = parseAge(aVal);
+                bVal = parseAge(bVal);
+            } else if (column === 'status') {
+                // Sort by status priority: Missing > Pending > OK
+                const statusOrder = { 'Missing': 0, 'Pending': 1, 'OK': 2, '': 3 };
+                aVal = statusOrder[aVal] !== undefined ? statusOrder[aVal] : 999;
+                bVal = statusOrder[bVal] !== undefined ? statusOrder[bVal] : 999;
+            } else if (column === 'last_seen') {
+                // Sort by date
+                aVal = new Date(aVal).getTime() || 0;
+                bVal = new Date(bVal).getTime() || 0;
+            } else {
+                // String comparison (case-insensitive)
+                aVal = aVal.toLowerCase();
+                bVal = bVal.toLowerCase();
+            }
+
+            if (aVal < bVal) return currentSort.direction === 'asc' ? -1 : 1;
+            if (aVal > bVal) return currentSort.direction === 'asc' ? 1 : -1;
+            return 0;
+        });
+
+        // Re-append rows in sorted order
+        rows.forEach(row => tbody.appendChild(row));
+
+        // Update sort indicators
+        updateSortIndicators();
+    }
+
+    function parseAge(ageStr) {
+        // Parse age strings like "2h 15m", "45m", "3d 5h", "2w 3d"
+        if (!ageStr) return 0;
+
+        let totalMinutes = 0;
+        const weeks = ageStr.match(/(\d+)w/);
+        const days = ageStr.match(/(\d+)d/);
+        const hours = ageStr.match(/(\d+)h/);
+        const minutes = ageStr.match(/(\d+)m/);
+
+        if (weeks) totalMinutes += parseInt(weeks[1]) * 7 * 24 * 60;
+        if (days) totalMinutes += parseInt(days[1]) * 24 * 60;
+        if (hours) totalMinutes += parseInt(hours[1]) * 60;
+        if (minutes) totalMinutes += parseInt(minutes[1]);
+
+        return totalMinutes;
+    }
+
+    function updateSortIndicators() {
+        // Clear all indicators
+        document.querySelectorAll('.sort-indicator').forEach(indicator => {
+            indicator.className = 'sort-indicator';
+        });
+
+        // Set current indicator
+        if (currentSort.column) {
+            const indicator = document.querySelector(`.sort-indicator[data-column="${currentSort.column}"]`);
+            if (indicator) {
+                indicator.className = `sort-indicator ${currentSort.direction}`;
+            }
+        }
+    }
+</script>

app/ui/templates/partials/ignored_table.html

@@ -0,0 +1,69 @@
+<div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 overflow-hidden">
+    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+        <thead class="bg-gray-50 dark:bg-gray-700">
+            <tr>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                    Unit ID
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                    Reason
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                    Ignored At
+                </th>
+                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                    Actions
+                </th>
+            </tr>
+        </thead>
+        <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-gray-700">
+            {% if ignored_units %}
+            {% for unit in ignored_units %}
+            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center gap-2">
+                        <span class="w-2 h-2 rounded-full bg-gray-400" title="Ignored"></span>
+                        <span class="text-sm font-medium text-gray-900 dark:text-white">
+                            {{ unit.id }}
+                        </span>
+                    </div>
+                </td>
+                <td class="px-6 py-4">
+                    <span class="text-sm text-gray-600 dark:text-gray-400">{{ unit.reason }}</span>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <span class="text-sm text-gray-500 dark:text-gray-400">{{ unit.ignored_at }}</span>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    <div class="flex justify-end gap-2">
+                        <button onclick="unignoreUnit('{{ unit.id }}')"
+                            class="text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300 p-1" title="Un-ignore Unit">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                            </svg>
+                        </button>
+                        <button onclick="deleteIgnoredUnit('{{ unit.id }}')"
+                            class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 p-1" title="Delete Unit">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+                            </svg>
+                        </button>
+                    </div>
+                </td>
+            </tr>
+            {% endfor %}
+            {% else %}
+            <tr>
+                <td colspan="4" class="px-6 py-8 text-center text-sm text-gray-500 dark:text-gray-400">
+                    No ignored units
+                </td>
+            </tr>
+            {% endif %}
+        </tbody>
+    </table>
+
+    <!-- Last updated indicator -->
+    <div class="px-6 py-3 bg-gray-50 dark:bg-gray-700 text-xs text-gray-500 dark:text-gray-400 text-right">
+        Last updated: {{ timestamp }}
+    </div>
+</div>

app/ui/templates/partials/retired_table.html

@@ -0,0 +1,77 @@
+<div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 overflow-hidden">
+    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+        <thead class="bg-gray-50 dark:bg-gray-700">
+            <tr>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                    Unit ID
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                    Type
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                    Note
+                </th>
+                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                    Actions
+                </th>
+            </tr>
+        </thead>
+        <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-gray-700">
+            {% if units %}
+            {% for unit in units %}
+            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center gap-2">
+                        <span class="w-2 h-2 rounded-full bg-gray-500" title="Retired"></span>
+                        <a href="/unit/{{ unit.id }}" class="text-sm font-medium text-seismo-orange hover:text-seismo-burgundy hover:underline">
+                            {{ unit.id }}
+                        </a>
+                    </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    {% if unit.device_type == 'modem' %}
+                        <span class="px-2 py-1 rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 text-xs font-medium">
+                            Modem
+                        </span>
+                    {% else %}
+                        <span class="px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 text-xs font-medium">
+                            Seismograph
+                        </span>
+                    {% endif %}
+                </td>
+                <td class="px-6 py-4">
+                    <span class="text-sm text-gray-600 dark:text-gray-400">{{ unit.note }}</span>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    <div class="flex justify-end gap-2">
+                        <button onclick="editUnit('{{ unit.id }}')"
+                            class="text-seismo-orange hover:text-seismo-burgundy p-1" title="Edit">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+                            </svg>
+                        </button>
+                        <button onclick="deleteUnit('{{ unit.id }}')"
+                            class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 p-1" title="Delete Unit">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+                            </svg>
+                        </button>
+                    </div>
+                </td>
+            </tr>
+            {% endfor %}
+            {% else %}
+            <tr>
+                <td colspan="4" class="px-6 py-8 text-center text-sm text-gray-500 dark:text-gray-400">
+                    No retired units
+                </td>
+            </tr>
+            {% endif %}
+        </tbody>
+    </table>
+
+    <!-- Last updated indicator -->
+    <div class="px-6 py-3 bg-gray-50 dark:bg-gray-700 text-xs text-gray-500 dark:text-gray-400 text-right">
+        Last updated: {{ timestamp }}
+    </div>
+</div>

app/ui/templates/partials/roster_table.html

@@ -0,0 +1,445 @@
+<!-- Desktop Table View -->
+<div class="hidden md:block rounded-xl shadow-lg bg-white dark:bg-slate-800 overflow-hidden">
+    <table id="roster-table" class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+        <thead class="bg-gray-50 dark:bg-gray-700">
+            <tr>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('status')">
+                    <div class="flex items-center gap-1">
+                        Status
+                        <span class="sort-indicator" data-column="status"></span>
+                    </div>
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('id')">
+                    <div class="flex items-center gap-1">
+                        Unit ID
+                        <span class="sort-indicator" data-column="id"></span>
+                    </div>
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('type')">
+                    <div class="flex items-center gap-1">
+                        Type
+                        <span class="sort-indicator" data-column="type"></span>
+                    </div>
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                    Details
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('last_seen')">
+                    <div class="flex items-center gap-1">
+                        Last Seen
+                        <span class="sort-indicator" data-column="last_seen"></span>
+                    </div>
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('age')">
+                    <div class="flex items-center gap-1">
+                        Age
+                        <span class="sort-indicator" data-column="age"></span>
+                    </div>
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('note')">
+                    <div class="flex items-center gap-1">
+                        Note
+                        <span class="sort-indicator" data-column="note"></span>
+                    </div>
+                </th>
+                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                    Actions
+                </th>
+            </tr>
+        </thead>
+        <tbody id="roster-tbody" class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-gray-700">
+            {% for unit in units %}
+            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+                data-status="{{ unit.status }}"
+                data-id="{{ unit.id }}"
+                data-type="{{ unit.device_type }}"
+                data-last-seen="{{ unit.last_seen }}"
+                data-age="{{ unit.age }}"
+                data-note="{{ unit.note if unit.note else '' }}">
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center space-x-2">
+                        {% if unit.status == 'OK' %}
+                        <span class="w-3 h-3 rounded-full bg-green-500" title="OK"></span>
+                        {% elif unit.status == 'Pending' %}
+                        <span class="w-3 h-3 rounded-full bg-yellow-500" title="Pending"></span>
+                        {% else %}
+                        <span class="w-3 h-3 rounded-full bg-red-500" title="Missing"></span>
+                        {% endif %}
+
+                        {% if unit.deployed %}
+                        <span class="w-2 h-2 rounded-full bg-blue-500" title="Deployed"></span>
+                        {% else %}
+                        <span class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-600" title="Benched"></span>
+                        {% endif %}
+                    </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <a href="/unit/{{ unit.id }}" class="text-sm font-medium text-seismo-orange hover:text-seismo-burgundy hover:underline">
+                        {{ unit.id }}
+                    </a>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    {% if unit.device_type == 'modem' %}
+                        <span class="px-2 py-1 rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 text-xs font-medium">
+                            Modem
+                        </span>
+                    {% else %}
+                        <span class="px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 text-xs font-medium">
+                            Seismograph
+                        </span>
+                    {% endif %}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-xs text-gray-600 dark:text-gray-400 space-y-1">
+                        {% if unit.device_type == 'modem' %}
+                            {% if unit.ip_address %}
+                                <div><span class="font-mono">{{ unit.ip_address }}</span></div>
+                            {% endif %}
+                            {% if unit.phone_number %}
+                                <div>{{ unit.phone_number }}</div>
+                            {% endif %}
+                            {% if unit.hardware_model %}
+                                <div class="text-gray-500 dark:text-gray-500">{{ unit.hardware_model }}</div>
+                            {% endif %}
+                        {% else %}
+                            {% if unit.next_calibration_due %}
+                                <div>
+                                    <span class="text-gray-500 dark:text-gray-500">Cal Due:</span>
+                                    <span class="font-medium">{{ unit.next_calibration_due }}</span>
+                                </div>
+                            {% endif %}
+                            {% if unit.deployed_with_modem_id %}
+                                <div>
+                                    <span class="text-gray-500 dark:text-gray-500">Modem:</span>
+                                    <a href="/unit/{{ unit.deployed_with_modem_id }}" class="text-seismo-orange hover:underline font-medium">
+                                        {{ unit.deployed_with_modem_id }}
+                                    </a>
+                                </div>
+                            {% endif %}
+                        {% endif %}
+                    </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-sm text-gray-500 dark:text-gray-400">{{ unit.last_seen }}</div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-sm
+                        {% if unit.status == 'Missing' %}text-red-600 dark:text-red-400 font-semibold
+                        {% elif unit.status == 'Pending' %}text-yellow-600 dark:text-yellow-400
+                        {% else %}text-gray-500 dark:text-gray-400
+                        {% endif %}">
+                        {{ unit.age }}
+                    </div>
+                </td>
+                <td class="px-6 py-4">
+                    <div class="text-sm text-gray-500 dark:text-gray-400 truncate max-w-xs" title="{{ unit.note }}">
+                        {{ unit.note if unit.note else '-' }}
+                    </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    <div class="flex justify-end gap-2">
+                        <button onclick="editUnit('{{ unit.id }}')"
+                            class="text-seismo-orange hover:text-seismo-burgundy p-1" title="Edit">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+                            </svg>
+                        </button>
+                        {% if unit.deployed %}
+                        <button onclick="toggleDeployed('{{ unit.id }}', false)"
+                            class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 p-1" title="Mark as Benched">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                            </svg>
+                        </button>
+                        {% else %}
+                        <button onclick="toggleDeployed('{{ unit.id }}', true)"
+                            class="text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300 p-1" title="Mark as Deployed">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                            </svg>
+                        </button>
+                        {% endif %}
+                        <button onclick="moveToIgnore('{{ unit.id }}')"
+                            class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 p-1" title="Move to Ignore List">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"></path>
+                            </svg>
+                        </button>
+                        <button onclick="deleteUnit('{{ unit.id }}')"
+                            class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 p-1" title="Delete Unit">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+                            </svg>
+                        </button>
+                    </div>
+                </td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+
+    <!-- Last updated indicator -->
+    <div class="px-6 py-3 bg-gray-50 dark:bg-gray-700 text-xs text-gray-500 dark:text-gray-400 text-right">
+        Last updated: <span id="last-updated">{{ timestamp }}</span>
+    </div>
+</div>
+
+<!-- Mobile Card View -->
+<div class="md:hidden space-y-3">
+    {% for unit in units %}
+    <div class="unit-card"
+         onclick="openUnitModal('{{ unit.id }}', '{{ unit.status }}', '{{ unit.age }}')"
+         data-unit-id="{{ unit.id }}"
+         data-status="{{ unit.status }}"
+         data-age="{{ unit.age }}">
+        <!-- Header: Status Dot + Unit ID + Status Badge -->
+        <div class="flex items-center justify-between mb-2">
+            <div class="flex items-center gap-2">
+                {% if unit.status == 'OK' %}
+                <span class="w-4 h-4 rounded-full bg-green-500" title="OK"></span>
+                {% elif unit.status == 'Pending' %}
+                <span class="w-4 h-4 rounded-full bg-yellow-500" title="Pending"></span>
+                {% elif unit.status == 'Missing' %}
+                <span class="w-4 h-4 rounded-full bg-red-500" title="Missing"></span>
+                {% else %}
+                <span class="w-4 h-4 rounded-full bg-gray-400" title="No Data"></span>
+                {% endif %}
+                <span class="font-bold text-lg text-seismo-orange dark:text-seismo-orange">{{ unit.id }}</span>
+            </div>
+            <span class="px-3 py-1 rounded-full text-xs font-medium
+                {% if unit.status == 'OK' %}bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300
+                {% elif unit.status == 'Pending' %}bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300
+                {% elif unit.status == 'Missing' %}bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300
+                {% else %}bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400
+                {% endif %}">
+                {% if unit.status in ['N/A', 'Unknown'] %}Benched{% else %}{{ unit.status }}{% endif %}
+            </span>
+        </div>
+
+        <!-- Type Badge -->
+        <div class="mb-2">
+            {% if unit.device_type == 'modem' %}
+            <span class="px-2 py-1 rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 text-xs font-medium">
+                Modem
+            </span>
+            {% else %}
+            <span class="px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 text-xs font-medium">
+                Seismograph
+            </span>
+            {% endif %}
+        </div>
+
+        <!-- Location -->
+        {% if unit.address %}
+        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">
+            📍 {{ unit.address }}
+        </div>
+        {% elif unit.coordinates %}
+        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">
+            📍 {{ unit.coordinates }}
+        </div>
+        {% endif %}
+
+        <!-- Project ID -->
+        {% if unit.project_id %}
+        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">
+            🏗️ {{ unit.project_id }}
+        </div>
+        {% endif %}
+
+        <!-- Last Seen -->
+        <div class="text-sm text-gray-500 dark:text-gray-500 mt-2">
+            🕐 {{ unit.age }}
+        </div>
+
+        <!-- Deployed/Benched Indicator -->
+        <div class="mt-2">
+            {% if unit.deployed %}
+            <span class="text-xs text-blue-600 dark:text-blue-400">
+                ⚡ Deployed
+            </span>
+            {% else %}
+            <span class="text-xs text-gray-500 dark:text-gray-500">
+                📦 Benched
+            </span>
+            {% endif %}
+        </div>
+
+        <!-- Tap Hint -->
+        <div class="text-xs text-gray-400 mt-2 text-center border-t border-gray-200 dark:border-gray-700 pt-2">
+            Tap for details
+        </div>
+    </div>
+    {% endfor %}
+
+    <!-- Mobile Last Updated -->
+    <div class="text-xs text-gray-500 dark:text-gray-400 text-center py-2">
+        Last updated: <span id="last-updated-mobile">{{ timestamp }}</span>
+    </div>
+</div>
+
+<!-- Unit Detail Modal -->
+<div id="unitModal" class="unit-modal">
+    <!-- Backdrop -->
+    <div class="unit-modal-backdrop" onclick="closeUnitModal(event)"></div>
+
+    <!-- Modal Content -->
+    <div class="unit-modal-content">
+        <!-- Handle Bar (Mobile Only) -->
+        <div class="modal-handle"></div>
+
+        <!-- Header -->
+        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+            <h3 id="modalUnitId" class="text-xl font-bold text-gray-900 dark:text-white"></h3>
+            <button onclick="closeUnitModal(event)" data-close-modal class="w-10 h-10 flex items-center justify-center text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                </svg>
+            </button>
+        </div>
+
+        <!-- Content -->
+        <div id="modalContent" class="p-6">
+            <!-- Content will be populated by JavaScript -->
+        </div>
+
+        <!-- Actions -->
+        <div class="p-6 border-t border-gray-200 dark:border-gray-700 space-y-3">
+            <button id="modalEditBtn" class="w-full h-12 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg font-medium transition-colors">
+                Edit Unit
+            </button>
+            <div class="grid grid-cols-2 gap-3">
+                <button id="modalDeployBtn" class="h-12 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                    Deploy/Bench
+                </button>
+                <button id="modalDeleteBtn" class="h-12 border border-red-300 dark:border-red-600 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">
+                    Delete
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    .sort-indicator::after {
+        content: '⇅';
+        opacity: 0.3;
+        font-size: 12px;
+    }
+    .sort-indicator.asc::after {
+        content: '↑';
+        opacity: 1;
+    }
+    .sort-indicator.desc::after {
+        content: '↓';
+        opacity: 1;
+    }
+</style>
+
+<script>
+    // Update timestamp
+    const timestampElement = document.getElementById('last-updated');
+    if (timestampElement) {
+        timestampElement.textContent = new Date().toLocaleTimeString();
+    }
+    const timestampMobileElement = document.getElementById('last-updated-mobile');
+    if (timestampMobileElement) {
+        timestampMobileElement.textContent = new Date().toLocaleTimeString();
+    }
+
+    // Keep a lightweight status map around for the mobile modal
+    const rosterUnits = {{ units | tojson }};
+    window.rosterStatusMap = rosterUnits.reduce((acc, unit) => {
+        acc[unit.id] = {
+            status: unit.status || 'Unknown',
+            age: unit.age || 'N/A',
+            last: unit.last_seen || 'Never'
+        };
+        return acc;
+    }, {});
+
+    // Sorting state
+    let currentSort = { column: null, direction: 'asc' };
+
+    function sortTable(column) {
+        const tbody = document.getElementById('roster-tbody');
+        const rows = Array.from(tbody.getElementsByTagName('tr'));
+
+        // Determine sort direction
+        if (currentSort.column === column) {
+            currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
+        } else {
+            currentSort.column = column;
+            currentSort.direction = 'asc';
+        }
+
+        // Sort rows
+        rows.sort((a, b) => {
+            let aVal = a.getAttribute(`data-${column}`) || '';
+            let bVal = b.getAttribute(`data-${column}`) || '';
+
+            // Special handling for different column types
+            if (column === 'age') {
+                // Parse age strings like "2h 15m" or "45m" or "3d 5h"
+                aVal = parseAge(aVal);
+                bVal = parseAge(bVal);
+            } else if (column === 'status') {
+                // Sort by status priority: Missing > Pending > OK
+                const statusOrder = { 'Missing': 0, 'Pending': 1, 'OK': 2, '': 3 };
+                aVal = statusOrder[aVal] !== undefined ? statusOrder[aVal] : 999;
+                bVal = statusOrder[bVal] !== undefined ? statusOrder[bVal] : 999;
+            } else if (column === 'last_seen') {
+                // Sort by date
+                aVal = new Date(aVal).getTime() || 0;
+                bVal = new Date(bVal).getTime() || 0;
+            } else {
+                // String comparison (case-insensitive)
+                aVal = aVal.toLowerCase();
+                bVal = bVal.toLowerCase();
+            }
+
+            if (aVal < bVal) return currentSort.direction === 'asc' ? -1 : 1;
+            if (aVal > bVal) return currentSort.direction === 'asc' ? 1 : -1;
+            return 0;
+        });
+
+        // Re-append rows in sorted order
+        rows.forEach(row => tbody.appendChild(row));
+
+        // Update sort indicators
+        updateSortIndicators();
+    }
+
+    function parseAge(ageStr) {
+        // Parse age strings like "2h 15m", "45m", "3d 5h", "2w 3d"
+        if (!ageStr) return 0;
+
+        let totalMinutes = 0;
+        const weeks = ageStr.match(/(\d+)w/);
+        const days = ageStr.match(/(\d+)d/);
+        const hours = ageStr.match(/(\d+)h/);
+        const minutes = ageStr.match(/(\d+)m/);
+
+        if (weeks) totalMinutes += parseInt(weeks[1]) * 7 * 24 * 60;
+        if (days) totalMinutes += parseInt(days[1]) * 24 * 60;
+        if (hours) totalMinutes += parseInt(hours[1]) * 60;
+        if (minutes) totalMinutes += parseInt(minutes[1]);
+
+        return totalMinutes;
+    }
+
+    function updateSortIndicators() {
+        // Clear all indicators
+        document.querySelectorAll('.sort-indicator').forEach(indicator => {
+            indicator.className = 'sort-indicator';
+        });
+
+        // Set current indicator
+        if (currentSort.column) {
+            const indicator = document.querySelector(`.sort-indicator[data-column="${currentSort.column}"]`);
+            if (indicator) {
+                indicator.className = `sort-indicator ${currentSort.direction}`;
+            }
+        }
+    }
+</script>

app/ui/templates/partials/seismo_stats.html

@@ -0,0 +1,56 @@
+<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+    <!-- Total Seismographs -->
+    <div class="rounded-lg shadow bg-white dark:bg-slate-800 p-6">
+        <div class="flex items-center justify-between">
+            <div>
+                <p class="text-gray-600 dark:text-gray-400 text-sm">Total Seismographs</p>
+                <p class="text-3xl font-bold text-gray-900 dark:text-white mt-2">{{ total }}</p>
+            </div>
+            <svg class="w-12 h-12 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+            </svg>
+        </div>
+    </div>
+
+    <!-- Deployed -->
+    <div class="rounded-lg shadow bg-white dark:bg-slate-800 p-6">
+        <div class="flex items-center justify-between">
+            <div>
+                <p class="text-gray-600 dark:text-gray-400 text-sm">Deployed</p>
+                <p class="text-3xl font-bold text-green-600 dark:text-green-400 mt-2">{{ deployed }}</p>
+            </div>
+            <svg class="w-12 h-12 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+        </div>
+    </div>
+
+    <!-- Benched -->
+    <div class="rounded-lg shadow bg-white dark:bg-slate-800 p-6">
+        <div class="flex items-center justify-between">
+            <div>
+                <p class="text-gray-600 dark:text-gray-400 text-sm">Benched</p>
+                <p class="text-3xl font-bold text-gray-600 dark:text-gray-400 mt-2">{{ benched }}</p>
+            </div>
+            <svg class="w-12 h-12 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
+            </svg>
+        </div>
+    </div>
+
+    <!-- With Modem -->
+    <div class="rounded-lg shadow bg-white dark:bg-slate-800 p-6">
+        <div class="flex items-center justify-between">
+            <div>
+                <p class="text-gray-600 dark:text-gray-400 text-sm">With Modem</p>
+                <p class="text-3xl font-bold text-blue-600 dark:text-blue-400 mt-2">{{ with_modem }}<span class="text-base text-gray-500">/ {{ deployed }}</span></p>
+                {% if without_modem > 0 %}
+                <p class="text-xs text-orange-600 dark:text-orange-400 mt-1">{{ without_modem }} without modem</p>
+                {% endif %}
+            </div>
+            <svg class="w-12 h-12 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"></path>
+            </svg>
+        </div>
+    </div>
+</div>

app/ui/templates/partials/seismo_unit_list.html

@@ -0,0 +1,97 @@
+{% if units %}
+<div class="overflow-x-auto">
+    <table class="w-full">
+        <thead class="bg-gray-50 dark:bg-slate-700 border-b border-gray-200 dark:border-gray-600">
+            <tr>
+                <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Unit ID</th>
+                <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Status</th>
+                <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Modem</th>
+                <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Location</th>
+                <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Notes</th>
+                <th class="px-4 py-3 text-right text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Actions</th>
+            </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+            {% for unit in units %}
+            <tr class="hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors">
+                <td class="px-4 py-3 whitespace-nowrap">
+                    <a href="/unit/{{ unit.id }}" class="font-medium text-blue-600 dark:text-blue-400 hover:underline">
+                        {{ unit.id }}
+                    </a>
+                </td>
+                <td class="px-4 py-3 whitespace-nowrap">
+                    {% if unit.deployed %}
+                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
+                        </svg>
+                        Deployed
+                    </span>
+                    {% else %}
+                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
+                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clip-rule="evenodd"></path>
+                        </svg>
+                        Benched
+                    </span>
+                    {% endif %}
+                </td>
+                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">
+                    {% if unit.deployed_with_modem_id %}
+                    <a href="/unit/{{ unit.deployed_with_modem_id }}" class="text-blue-600 dark:text-blue-400 hover:underline">
+                        {{ unit.deployed_with_modem_id }}
+                    </a>
+                    {% else %}
+                    <span class="text-gray-400 dark:text-gray-600">None</span>
+                    {% endif %}
+                </td>
+                <td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-300">
+                    {% if unit.address %}
+                    <span class="truncate max-w-xs inline-block" title="{{ unit.address }}">{{ unit.address }}</span>
+                    {% elif unit.coordinates %}
+                    <span class="text-gray-500 dark:text-gray-400">{{ unit.coordinates }}</span>
+                    {% else %}
+                    <span class="text-gray-400 dark:text-gray-600">—</span>
+                    {% endif %}
+                </td>
+                <td class="px-4 py-3 text-sm text-gray-700 dark:text-gray-400">
+                    {% if unit.note %}
+                    <span class="truncate max-w-xs inline-block" title="{{ unit.note }}">{{ unit.note }}</span>
+                    {% else %}
+                    <span class="text-gray-400 dark:text-gray-600">—</span>
+                    {% endif %}
+                </td>
+                <td class="px-4 py-3 whitespace-nowrap text-right text-sm">
+                    <a href="/unit/{{ unit.id }}" class="text-blue-600 dark:text-blue-400 hover:underline">
+                        View Details →
+                    </a>
+                </td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
+
+{% if search %}
+<div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
+    Found {{ units|length }} seismograph(s) matching "{{ search }}"
+</div>
+{% endif %}
+
+{% else %}
+<div class="text-center py-12">
+    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+    </svg>
+    <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No seismographs found</h3>
+    {% if search %}
+    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">No seismographs match "{{ search }}"</p>
+    <button onclick="document.getElementById('seismo-search').value = ''; htmx.trigger('#seismo-search', 'keyup');"
+            class="mt-3 text-blue-600 dark:text-blue-400 hover:underline">
+        Clear search
+    </button>
+    {% else %}
+    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Get started by adding a seismograph unit from the roster page.</p>
+    {% endif %}
+</div>
+{% endif %}

app/ui/templates/partials/slm_config_form.html

@@ -0,0 +1,288 @@
+<form id="slm-config-form"
+      hx-post="/api/slm-dashboard/config/{{ unit.id }}"
+      hx-swap="none"
+      hx-on::after-request="handleConfigSave(event)">
+
+    <div class="mb-6">
+        <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Unit: {{ unit.id }}</h4>
+        <p class="text-sm text-gray-600 dark:text-gray-400">Configure measurement parameters for this sound level meter</p>
+    </div>
+
+    <!-- Model & Serial -->
+    <div class="grid grid-cols-2 gap-4 mb-4">
+        <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Model</label>
+            <select name="slm_model" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                <option value="">Select model...</option>
+                <option value="NL-43" {% if unit.slm_model == 'NL-43' %}selected{% endif %}>NL-43</option>
+                <option value="NL-53" {% if unit.slm_model == 'NL-53' %}selected{% endif %}>NL-53</option>
+            </select>
+        </div>
+        <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Serial Number</label>
+            <input type="text" name="slm_serial_number" value="{{ unit.slm_serial_number or '' }}"
+                   class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                   placeholder="e.g., SN123456">
+        </div>
+    </div>
+
+    <!-- Frequency & Time Weighting -->
+    <div class="grid grid-cols-2 gap-4 mb-4">
+        <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Frequency Weighting</label>
+            <select name="slm_frequency_weighting" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                <option value="">Select...</option>
+                <option value="A" {% if unit.slm_frequency_weighting == 'A' %}selected{% endif %}>A-weighting</option>
+                <option value="C" {% if unit.slm_frequency_weighting == 'C' %}selected{% endif %}>C-weighting</option>
+                <option value="Z" {% if unit.slm_frequency_weighting == 'Z' %}selected{% endif %}>Z-weighting (Linear)</option>
+            </select>
+        </div>
+        <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Time Weighting</label>
+            <select name="slm_time_weighting" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                <option value="">Select...</option>
+                <option value="Fast" {% if unit.slm_time_weighting == 'Fast' %}selected{% endif %}>Fast (125ms)</option>
+                <option value="Slow" {% if unit.slm_time_weighting == 'Slow' %}selected{% endif %}>Slow (1s)</option>
+                <option value="Impulse" {% if unit.slm_time_weighting == 'Impulse' %}selected{% endif %}>Impulse</option>
+            </select>
+        </div>
+    </div>
+
+    <!-- Measurement Range -->
+    <div class="mb-4">
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Measurement Range</label>
+        <select name="slm_measurement_range" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+            <option value="">Select range...</option>
+            <option value="30-130" {% if unit.slm_measurement_range == '30-130' %}selected{% endif %}>30-130 dB</option>
+            <option value="40-140" {% if unit.slm_measurement_range == '40-140' %}selected{% endif %}>40-140 dB</option>
+            <option value="50-140" {% if unit.slm_measurement_range == '50-140' %}selected{% endif %}>50-140 dB</option>
+        </select>
+    </div>
+
+    <!-- Network Configuration -->
+    <div class="border-t border-gray-200 dark:border-gray-700 pt-4 mt-6 mb-4">
+        <h5 class="text-md font-semibold text-gray-900 dark:text-white mb-3">Network Configuration</h5>
+
+        <div class="mb-4">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Assigned Modem</label>
+            <div class="flex gap-2">
+                <select name="deployed_with_modem_id" id="config-modem-select" class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                    <option value="">No modem (direct connection)</option>
+                    <!-- Options loaded via JavaScript -->
+                </select>
+                <button type="button" id="test-modem-btn" onclick="testModemConnection()"
+                        class="px-4 py-2 text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-900 hover:bg-blue-200 dark:hover:bg-blue-800 rounded-lg transition-colors {% if not unit.deployed_with_modem_id %}opacity-50 cursor-not-allowed{% endif %}"
+                        {% if not unit.deployed_with_modem_id %}disabled{% endif %}
+                        title="Ping modem to test connectivity">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"></path>
+                    </svg>
+                </button>
+            </div>
+            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Select a modem for network access, or leave blank for direct IP connection</p>
+        </div>
+
+        <!-- Port Configuration (always visible) -->
+        <div class="grid grid-cols-3 gap-4 mb-4">
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">TCP Port</label>
+                <input type="number" name="slm_tcp_port" value="{{ unit.slm_tcp_port or '2255' }}"
+                       class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white font-mono text-sm"
+                       placeholder="2255">
+                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Control port</p>
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">FTP Port</label>
+                <input type="number" name="slm_ftp_port" value="{{ unit.slm_ftp_port or '21' }}"
+                       class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white font-mono text-sm"
+                       placeholder="21">
+                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Data transfer</p>
+            </div>
+            <div id="direct-ip-field" class="{% if unit.deployed_with_modem_id %}hidden{% endif %}">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Direct IP</label>
+                <input type="text" name="slm_host" value="{{ unit.slm_host or '' }}"
+                       class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white font-mono text-sm"
+                       placeholder="192.168.1.100">
+                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">If no modem</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Action Buttons -->
+    <div class="flex justify-end gap-3 mt-6">
+        <button type="button" onclick="closeConfigModal()"
+                class="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors">
+            Cancel
+        </button>
+        <button type="button" onclick="testSLMConnection('{{ unit.id }}')"
+                class="px-4 py-2 text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-900 hover:bg-blue-200 dark:hover:bg-blue-800 rounded-lg transition-colors">
+            Test SLM Connection
+        </button>
+        <button type="submit"
+                class="px-4 py-2 text-white bg-seismo-orange hover:bg-seismo-burgundy rounded-lg transition-colors">
+            Save Configuration
+        </button>
+    </div>
+</form>
+
+<script>
+// Load modems list for dropdown
+async function loadModemsForConfig() {
+    try {
+        const response = await fetch('/api/roster/modems');
+        const modems = await response.json();
+
+        const select = document.getElementById('config-modem-select');
+        const currentValue = '{{ unit.deployed_with_modem_id or "" }}';
+
+        // Keep the "No modem" option
+        modems.forEach(modem => {
+            const option = document.createElement('option');
+            option.value = modem.id;
+            const ipText = modem.ip_address ? ' (' + modem.ip_address + ')' : '';
+            option.textContent = modem.id + ipText;
+            if (modem.id === currentValue) {
+                option.selected = true;
+            }
+            select.appendChild(option);
+        });
+    } catch (error) {
+        console.error('Failed to load modems:', error);
+    }
+}
+
+// Toggle direct IP field and test modem button based on modem selection
+document.getElementById('config-modem-select')?.addEventListener('change', function() {
+    const directIpField = document.getElementById('direct-ip-field');
+    const testModemBtn = document.getElementById('test-modem-btn');
+
+    if (this.value === '') {
+        directIpField.classList.remove('hidden');
+        testModemBtn.disabled = true;
+        testModemBtn.classList.add('opacity-50', 'cursor-not-allowed');
+    } else {
+        directIpField.classList.add('hidden');
+        testModemBtn.disabled = false;
+        testModemBtn.classList.remove('opacity-50', 'cursor-not-allowed');
+    }
+});
+
+// Handle save response
+function handleConfigSave(event) {
+    if (event.detail.successful) {
+        // Show success message
+        const toast = document.createElement('div');
+        toast.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
+        toast.textContent = 'Configuration saved successfully!';
+        document.body.appendChild(toast);
+
+        setTimeout(() => {
+            toast.remove();
+            closeConfigModal();
+            // Refresh the unit list
+            htmx.trigger('#slm-list', 'load');
+        }, 2000);
+    } else {
+        // Show error message
+        const toast = document.createElement('div');
+        toast.className = 'fixed bottom-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
+        toast.textContent = 'Failed to save configuration';
+        document.body.appendChild(toast);
+
+        setTimeout(() => {
+            toast.remove();
+        }, 3000);
+    }
+}
+
+// Test connection to modem (health ping)
+async function testModemConnection() {
+    const modemSelect = document.getElementById('config-modem-select');
+    const modemId = modemSelect.value;
+
+    if (!modemId) {
+        alert('Please select a modem first');
+        return;
+    }
+
+    const toast = document.createElement('div');
+    toast.className = 'fixed bottom-4 right-4 bg-blue-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
+    toast.textContent = 'Pinging modem...';
+    document.body.appendChild(toast);
+
+    try {
+        const response = await fetch('/api/slm-dashboard/test-modem/' + modemId);
+        const data = await response.json();
+
+        toast.remove();
+
+        const resultToast = document.createElement('div');
+        if (response.ok && data.status === 'success') {
+            resultToast.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
+            const ipAddr = data.ip_address || modemId;
+            const respTime = data.response_time || 'N/A';
+            resultToast.innerHTML = '✓ Modem responding!<br><span class="text-xs">' + ipAddr + ' - ' + respTime + 'ms</span>';
+        } else {
+            resultToast.className = 'fixed bottom-4 right-4 bg-yellow-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
+            resultToast.textContent = '⚠ Modem not responding: ' + (data.detail || 'Unknown error');
+        }
+        document.body.appendChild(resultToast);
+
+        setTimeout(() => {
+            resultToast.remove();
+        }, 4000);
+    } catch (error) {
+        toast.remove();
+        const errorToast = document.createElement('div');
+        errorToast.className = 'fixed bottom-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
+        errorToast.textContent = '✗ Failed to ping modem: ' + error.message;
+        document.body.appendChild(errorToast);
+
+        setTimeout(() => {
+            errorToast.remove();
+        }, 3000);
+    }
+}
+
+// Test connection to SLM
+async function testSLMConnection(unitId) {
+    const toast = document.createElement('div');
+    toast.className = 'fixed bottom-4 right-4 bg-blue-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
+    toast.textContent = 'Testing SLM connection...';
+    document.body.appendChild(toast);
+
+    try {
+        const response = await fetch('/api/slmm/' + unitId + '/status');
+        const data = await response.json();
+
+        toast.remove();
+
+        const resultToast = document.createElement('div');
+        if (response.ok && data.status === 'online') {
+            resultToast.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
+            resultToast.textContent = '✓ SLM connection successful! ' + (data.model || 'SLM') + ' responding';
+        } else {
+            resultToast.className = 'fixed bottom-4 right-4 bg-yellow-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
+            resultToast.textContent = '⚠ SLM connection failed or device offline';
+        }
+        document.body.appendChild(resultToast);
+
+        setTimeout(() => {
+            resultToast.remove();
+        }, 3000);
+    } catch (error) {
+        toast.remove();
+        const errorToast = document.createElement('div');
+        errorToast.className = 'fixed bottom-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
+        errorToast.textContent = '✗ SLM connection test failed: ' + error.message;
+        document.body.appendChild(errorToast);
+
+        setTimeout(() => {
+            errorToast.remove();
+        }, 3000);
+    }
+}
+
+// Load modems on page load
+loadModemsForConfig();
+</script>

app/ui/templates/partials/slm_config_form_old.html

@@ -0,0 +1,215 @@
+<form id="slm-config-form"
+      hx-post="/api/slm-dashboard/config/{{ unit.id }}"
+      hx-swap="none"
+      hx-on::after-request="handleConfigSave(event)">
+
+    <div class="mb-6">
+        <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Unit: {{ unit.id }}</h4>
+        <p class="text-sm text-gray-600 dark:text-gray-400">Configure measurement parameters for this sound level meter</p>
+    </div>
+
+    <!-- Model & Serial -->
+    <div class="grid grid-cols-2 gap-4 mb-4">
+        <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Model</label>
+            <select name="slm_model" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                <option value="">Select model...</option>
+                <option value="NL-43" {% if unit.slm_model == 'NL-43' %}selected{% endif %}>NL-43</option>
+                <option value="NL-53" {% if unit.slm_model == 'NL-53' %}selected{% endif %}>NL-53</option>
+            </select>
+        </div>
+        <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Serial Number</label>
+            <input type="text" name="slm_serial_number" value="{{ unit.slm_serial_number or '' }}"
+                   class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                   placeholder="e.g., SN123456">
+        </div>
+    </div>
+
+    <!-- Frequency & Time Weighting -->
+    <div class="grid grid-cols-2 gap-4 mb-4">
+        <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Frequency Weighting</label>
+            <select name="slm_frequency_weighting" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                <option value="">Select...</option>
+                <option value="A" {% if unit.slm_frequency_weighting == 'A' %}selected{% endif %}>A-weighting</option>
+                <option value="C" {% if unit.slm_frequency_weighting == 'C' %}selected{% endif %}>C-weighting</option>
+                <option value="Z" {% if unit.slm_frequency_weighting == 'Z' %}selected{% endif %}>Z-weighting (Linear)</option>
+            </select>
+        </div>
+        <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Time Weighting</label>
+            <select name="slm_time_weighting" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                <option value="">Select...</option>
+                <option value="Fast" {% if unit.slm_time_weighting == 'Fast' %}selected{% endif %}>Fast (125ms)</option>
+                <option value="Slow" {% if unit.slm_time_weighting == 'Slow' %}selected{% endif %}>Slow (1s)</option>
+                <option value="Impulse" {% if unit.slm_time_weighting == 'Impulse' %}selected{% endif %}>Impulse</option>
+            </select>
+        </div>
+    </div>
+
+    <!-- Measurement Range -->
+    <div class="mb-4">
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Measurement Range</label>
+        <select name="slm_measurement_range" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+            <option value="">Select range...</option>
+            <option value="30-130" {% if unit.slm_measurement_range == '30-130' %}selected{% endif %}>30-130 dB</option>
+            <option value="40-140" {% if unit.slm_measurement_range == '40-140' %}selected{% endif %}>40-140 dB</option>
+            <option value="50-140" {% if unit.slm_measurement_range == '50-140' %}selected{% endif %}>50-140 dB</option>
+        </select>
+    </div>
+
+    <!-- Network Configuration -->
+    <div class="border-t border-gray-200 dark:border-gray-700 pt-4 mt-6 mb-4">
+        <h5 class="text-md font-semibold text-gray-900 dark:text-white mb-3">Network Configuration</h5>
+
+        <div class="mb-4">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Assigned Modem</label>
+            <select name="deployed_with_modem_id" id="config-modem-select" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                <option value="">No modem (direct connection)</option>
+                <!-- Options loaded via JavaScript -->
+            </select>
+            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Select a modem for network access, or leave blank for direct IP connection</p>
+        </div>
+
+        <!-- Legacy direct connection (shown only if no modem selected) -->
+        <div id="direct-connection-fields" class="{% if unit.deployed_with_modem_id %}hidden{% endif %}">
+            <div class="grid grid-cols-2 gap-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Direct IP Address</label>
+                    <input type="text" name="slm_host" value="{{ unit.slm_host or '' }}"
+                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white font-mono text-sm"
+                           placeholder="192.168.1.100">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">TCP Port</label>
+                    <input type="number" name="slm_tcp_port" value="{{ unit.slm_tcp_port or '' }}"
+                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white font-mono text-sm"
+                           placeholder="502">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Action Buttons -->
+    <div class="flex justify-end gap-3 mt-6">
+        <button type="button" onclick="closeConfigModal()"
+                class="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors">
+            Cancel
+        </button>
+        <button type="button" onclick="testConnection('{{ unit.id }}')"
+                class="px-4 py-2 text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-900 hover:bg-blue-200 dark:hover:bg-blue-800 rounded-lg transition-colors">
+            Test Connection
+        </button>
+        <button type="submit"
+                class="px-4 py-2 text-white bg-seismo-orange hover:bg-seismo-burgundy rounded-lg transition-colors">
+            Save Configuration
+        </button>
+    </div>
+</form>
+
+<script>
+// Load modems list for dropdown
+async function loadModemsForConfig() {
+    try {
+        const response = await fetch('/api/roster/modems');
+        const modems = await response.json();
+
+        const select = document.getElementById('config-modem-select');
+        const currentValue = '{{ unit.deployed_with_modem_id or "" }}';
+
+        // Keep the "No modem" option
+        modems.forEach(modem => {
+            const option = document.createElement('option');
+            option.value = modem.id;
+            option.textContent = `${modem.id}${modem.ip_address ? ' (' + modem.ip_address + ')' : ''}`;
+            if (modem.id === currentValue) {
+                option.selected = true;
+            }
+            select.appendChild(option);
+        });
+    } catch (error) {
+        console.error('Failed to load modems:', error);
+    }
+}
+
+// Toggle direct connection fields based on modem selection
+document.getElementById('config-modem-select')?.addEventListener('change', function() {
+    const directFields = document.getElementById('direct-connection-fields');
+    if (this.value === '') {
+        directFields.classList.remove('hidden');
+    } else {
+        directFields.classList.add('hidden');
+    }
+});
+
+// Handle save response
+function handleConfigSave(event) {
+    if (event.detail.successful) {
+        // Show success message
+        const toast = document.createElement('div');
+        toast.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
+        toast.textContent = 'Configuration saved successfully!';
+        document.body.appendChild(toast);
+
+        setTimeout(() => {
+            toast.remove();
+            closeConfigModal();
+            // Refresh the unit list
+            htmx.trigger('#slm-list', 'load');
+        }, 2000);
+    } else {
+        // Show error message
+        const toast = document.createElement('div');
+        toast.className = 'fixed bottom-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
+        toast.textContent = 'Failed to save configuration';
+        document.body.appendChild(toast);
+
+        setTimeout(() => {
+            toast.remove();
+        }, 3000);
+    }
+}
+
+// Test connection to SLM
+async function testConnection(unitId) {
+    const toast = document.createElement('div');
+    toast.className = 'fixed bottom-4 right-4 bg-blue-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
+    toast.textContent = 'Testing connection...';
+    document.body.appendChild(toast);
+
+    try {
+        const response = await fetch(`/api/slmm/${unitId}/status`);
+        const data = await response.json();
+
+        toast.remove();
+
+        const resultToast = document.createElement('div');
+        if (response.ok && data.status === 'online') {
+            resultToast.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
+            resultToast.textContent = `✓ Connection successful! ${data.model || 'SLM'} responding`;
+        } else {
+            resultToast.className = 'fixed bottom-4 right-4 bg-yellow-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
+            resultToast.textContent = `Connection failed or device offline`;
+        }
+        document.body.appendChild(resultToast);
+
+        setTimeout(() => {
+            resultToast.remove();
+        }, 3000);
+    } catch (error) {
+        toast.remove();
+        const errorToast = document.createElement('div');
+        errorToast.className = 'fixed bottom-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
+        errorToast.textContent = '✗ Connection test failed';
+        document.body.appendChild(errorToast);
+
+        setTimeout(() => {
+            errorToast.remove();
+        }, 3000);
+    }
+}
+
+// Load modems on page load
+loadModemsForConfig();
+</script>

app/ui/templates/partials/slm_controls.html

@@ -0,0 +1,105 @@
+<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+    <!-- Status Bar -->
+    <div class="mb-6 p-4 rounded-lg {% if is_measuring %}bg-green-50 dark:bg-green-900/20{% else %}bg-gray-50 dark:bg-gray-900{% endif %}">
+        <div class="flex justify-between items-center">
+            <div>
+                <div class="text-sm text-gray-600 dark:text-gray-400">Measurement Status</div>
+                <div class="text-2xl font-bold {% if is_measuring %}text-green-600 dark:text-green-400{% else %}text-gray-600 dark:text-gray-400{% endif %}">
+                    {% if measurement_state %}
+                        {{ measurement_state }}
+                        {% if is_measuring %}
+                        <span class="inline-block w-3 h-3 bg-green-500 rounded-full ml-2 animate-pulse"></span>
+                        {% endif %}
+                    {% else %}
+                        Unknown
+                    {% endif %}
+                </div>
+            </div>
+            <div>
+                <div class="text-sm text-gray-600 dark:text-gray-400">Battery</div>
+                <div class="text-2xl font-bold text-gray-900 dark:text-white">
+                    {{ battery_level or '--' }}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Control Buttons -->
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+        <button hx-post="/api/slmm/{{ unit_id }}/start"
+                hx-swap="none"
+                hx-on::after-request="htmx.trigger('#slm-controls', 'refresh')"
+                class="px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center justify-center gap-2
+                       {% if is_measuring %}opacity-50 cursor-not-allowed{% endif %}"
+                {% if is_measuring %}disabled{% endif %}>
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            Start
+        </button>
+
+        <button hx-post="/api/slmm/{{ unit_id }}/stop"
+                hx-swap="none"
+                hx-on::after-request="htmx.trigger('#slm-controls', 'refresh')"
+                class="px-4 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors flex items-center justify-center gap-2
+                       {% if not is_measuring %}opacity-50 cursor-not-allowed{% endif %}"
+                {% if not is_measuring %}disabled{% endif %}>
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"></path>
+            </svg>
+            Stop
+        </button>
+
+        <button hx-post="/api/slmm/{{ unit_id }}/pause"
+                hx-swap="none"
+                hx-on::after-request="htmx.trigger('#slm-controls', 'refresh')"
+                class="px-4 py-3 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors flex items-center justify-center gap-2">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            Pause
+        </button>
+
+        <button hx-post="/api/slmm/{{ unit_id }}/reset"
+                hx-swap="none"
+                hx-confirm="Are you sure you want to reset the measurement data?"
+                hx-on::after-request="htmx.trigger('#slm-controls', 'refresh')"
+                class="px-4 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors flex items-center justify-center gap-2">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+            </svg>
+            Reset
+        </button>
+    </div>
+
+    <!-- Quick Actions -->
+    <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <div class="grid grid-cols-2 gap-3">
+            <button hx-get="/api/slmm/{{ unit_id }}/live"
+                    hx-swap="none"
+                    hx-indicator="#live-spinner"
+                    class="px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center gap-2">
+                <svg id="live-spinner" class="htmx-indicator w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                </svg>
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                </svg>
+                Get Live Data
+            </button>
+
+            <button hx-post="/api/slmm/{{ unit_id }}/store"
+                    hx-swap="none"
+                    class="px-4 py-2 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 transition-colors flex items-center justify-center gap-2">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"></path>
+                </svg>
+                Store Data
+            </button>
+        </div>
+    </div>
+</div>
+
+<div id="slm-controls" hx-get="/slm/partials/{{ unit_id }}/controls" hx-trigger="refresh" hx-swap="outerHTML"></div>

app/ui/templates/partials/slm_live_view.html.backup

@@ -0,0 +1,438 @@
+<!-- Live View Panel for {{ unit.id }} -->
+<div class="h-full flex flex-col">
+    <!-- Header -->
+    <div class="flex items-center justify-between mb-6">
+        <div>
+            <h2 class="text-2xl font-bold text-gray-900 dark:text-white">{{ unit.id }}</h2>
+            <p class="text-sm text-gray-600 dark:text-gray-400">
+                {% if unit.slm_model %}{{ unit.slm_model }}{% endif %}
+                {% if unit.slm_serial_number %} • S/N: {{ unit.slm_serial_number }}{% endif %}
+            </p>
+            {% if modem %}
+            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                via Modem: {{ modem.id }}{% if modem_ip %} ({{ modem_ip }}){% endif %}
+            </p>
+            {% elif modem_ip %}
+            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                Direct: {{ modem_ip }}
+            </p>
+            {% else %}
+            <p class="text-xs text-red-500 dark:text-red-400 mt-1">
+                ⚠️ No modem assigned or IP configured
+            </p>
+            {% endif %}
+        </div>
+
+        <!-- Measurement Status Badge -->
+        <div>
+            {% if is_measuring %}
+                <span class="px-4 py-2 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400 rounded-lg font-medium flex items-center">
+                    <span class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></span>
+                    Measuring
+                </span>
+            {% else %}
+                <span class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium">
+                    Stopped
+                </span>
+            {% endif %}
+        </div>
+    </div>
+
+    <!-- Control Buttons -->
+    <div class="flex gap-2 mb-6">
+        <button onclick="controlUnit('{{ unit.id }}', 'start')"
+                class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg flex items-center">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            Start
+        </button>
+
+        <button onclick="controlUnit('{{ unit.id }}', 'pause')"
+                class="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 text-white rounded-lg flex items-center">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            Pause
+        </button>
+
+        <button onclick="controlUnit('{{ unit.id }}', 'stop')"
+                class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg flex items-center">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"></path>
+            </svg>
+            Stop
+        </button>
+
+        <button onclick="controlUnit('{{ unit.id }}', 'reset')"
+                class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg flex items-center">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+            </svg>
+            Reset
+        </button>
+
+        <button id="start-stream-btn" onclick="initLiveDataStream('{{ unit.id }}')"
+                class="px-4 py-2 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg flex items-center ml-auto">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+            </svg>
+            Start Live Stream
+        </button>
+
+        <button id="stop-stream-btn" onclick="stopLiveDataStream()" style="display: none;"
+                class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg flex items-center ml-auto">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"></path>
+            </svg>
+            Stop Live Stream
+        </button>
+    </div>
+
+    <!-- Current Metrics -->
+    <div class="grid grid-cols-5 gap-4 mb-6">
+        <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
+            <p class="text-xs text-gray-600 dark:text-gray-400 mb-1">Lp (Instant)</p>
+            <p id="live-lp" class="text-2xl font-bold text-blue-600 dark:text-blue-400">
+                {% if current_status and current_status.lp %}{{ current_status.lp }}{% else %}--{% endif %}
+            </p>
+            <p class="text-xs text-gray-500 dark:text-gray-400">dB</p>
+        </div>
+
+        <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-4">
+            <p class="text-xs text-gray-600 dark:text-gray-400 mb-1">Leq (Average)</p>
+            <p id="live-leq" class="text-2xl font-bold text-green-600 dark:text-green-400">
+                {% if current_status and current_status.leq %}{{ current_status.leq }}{% else %}--{% endif %}
+            </p>
+            <p class="text-xs text-gray-500 dark:text-gray-400">dB</p>
+        </div>
+
+        <div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-4">
+            <p class="text-xs text-gray-600 dark:text-gray-400 mb-1">Lmax (Max)</p>
+            <p id="live-lmax" class="text-2xl font-bold text-red-600 dark:text-red-400">
+                {% if current_status and current_status.lmax %}{{ current_status.lmax }}{% else %}--{% endif %}
+            </p>
+            <p class="text-xs text-gray-500 dark:text-gray-400">dB</p>
+        </div>
+
+        <div class="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-4">
+            <p class="text-xs text-gray-600 dark:text-gray-400 mb-1">Lmin (Min)</p>
+            <p id="live-lmin" class="text-2xl font-bold text-purple-600 dark:text-purple-400">
+                {% if current_status and current_status.lmin %}{{ current_status.lmin }}{% else %}--{% endif %}
+            </p>
+            <p class="text-xs text-gray-500 dark:text-gray-400">dB</p>
+        </div>
+
+        <div class="bg-orange-50 dark:bg-orange-900/20 rounded-lg p-4">
+            <p class="text-xs text-gray-600 dark:text-gray-400 mb-1">Lpeak (Peak)</p>
+            <p id="live-lpeak" class="text-2xl font-bold text-orange-600 dark:text-orange-400">
+                {% if current_status and current_status.lpeak %}{{ current_status.lpeak }}{% else %}--{% endif %}
+            </p>
+            <p class="text-xs text-gray-500 dark:text-gray-400">dB</p>
+        </div>
+    </div>
+
+    <!-- Live Chart -->
+    <div class="flex-1 bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4" style="min-height: 400px;">
+        <canvas id="liveChart"></canvas>
+    </div>
+
+    <!-- Device Info -->
+    <div class="mt-4 grid grid-cols-2 gap-4 text-sm">
+        <div>
+            <span class="text-gray-600 dark:text-gray-400">Battery:</span>
+            <span class="font-medium text-gray-900 dark:text-white ml-2">
+                {% if current_status and current_status.battery_level %}{{ current_status.battery_level }}%{% else %}--{% endif %}
+            </span>
+        </div>
+        <div>
+            <span class="text-gray-600 dark:text-gray-400">Power:</span>
+            <span class="font-medium text-gray-900 dark:text-white ml-2">
+                {% if current_status and current_status.power_source %}{{ current_status.power_source }}{% else %}--{% endif %}
+            </span>
+        </div>
+        <div>
+            <span class="text-gray-600 dark:text-gray-400">Weighting:</span>
+            <span class="font-medium text-gray-900 dark:text-white ml-2">
+                {% if unit.slm_frequency_weighting %}{{ unit.slm_frequency_weighting }}{% else %}--{% endif %} /
+                {% if unit.slm_time_weighting %}{{ unit.slm_time_weighting }}{% else %}--{% endif %}
+            </span>
+        </div>
+        <div>
+            <span class="text-gray-600 dark:text-gray-400">SD Remaining:</span>
+            <span class="font-medium text-gray-900 dark:text-white ml-2">
+                {% if current_status and current_status.sd_remaining_mb %}{{ current_status.sd_remaining_mb }} MB{% else %}--{% endif %}
+            </span>
+        </div>
+    </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script>
+// Initialize Chart.js for live data visualization
+function initializeChart() {
+    // Wait for Chart.js to load
+    if (typeof Chart === 'undefined') {
+        console.log('Waiting for Chart.js to load...');
+        setTimeout(initializeChart, 100);
+        return;
+    }
+
+    console.log('Chart.js loaded, version:', Chart.version);
+
+    const canvas = document.getElementById('liveChart');
+    if (!canvas) {
+        console.error('Chart canvas not found');
+        return;
+    }
+
+    console.log('Canvas found:', canvas);
+
+    // Destroy existing chart if it exists
+    if (window.liveChart && typeof window.liveChart.destroy === 'function') {
+        console.log('Destroying existing chart');
+        window.liveChart.destroy();
+    }
+
+    const ctx = canvas.getContext('2d');
+    console.log('Creating new chart...');
+
+    // Dark mode detection
+    const isDarkMode = document.documentElement.classList.contains('dark');
+    const gridColor = isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+    const textColor = isDarkMode ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.7)';
+
+    window.liveChart = new Chart(ctx, {
+    type: 'line',
+    data: {
+        labels: [],
+        datasets: [
+            {
+                label: 'Lp (Instantaneous)',
+                data: [],
+                borderColor: 'rgb(59, 130, 246)',
+                backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                tension: 0.3,
+                borderWidth: 2,
+                pointRadius: 0
+            },
+            {
+                label: 'Leq (Equivalent)',
+                data: [],
+                borderColor: 'rgb(34, 197, 94)',
+                backgroundColor: 'rgba(34, 197, 94, 0.1)',
+                tension: 0.3,
+                borderWidth: 2,
+                pointRadius: 0
+            }
+        ]
+    },
+    options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        animation: false,
+        interaction: {
+            intersect: false,
+            mode: 'index'
+        },
+        scales: {
+            x: {
+                display: true,
+                grid: {
+                    color: gridColor
+                },
+                ticks: {
+                    color: textColor,
+                    maxTicksLimit: 10
+                }
+            },
+            y: {
+                display: true,
+                title: {
+                    display: true,
+                    text: 'Sound Level (dB)',
+                    color: textColor
+                },
+                grid: {
+                    color: gridColor
+                },
+                ticks: {
+                    color: textColor
+                },
+                min: 30,
+                max: 130
+            }
+        },
+        plugins: {
+            legend: {
+                labels: {
+                    color: textColor
+                }
+            }
+        }
+    }
+    });
+
+    console.log('Chart created successfully:', window.liveChart);
+}
+
+// Initialize chart when DOM is ready
+console.log('Executing initializeChart...');
+initializeChart();
+
+// WebSocket management (use global scope to avoid redeclaration)
+if (typeof window.currentWebSocket === 'undefined') {
+    window.currentWebSocket = null;
+}
+
+function initLiveDataStream(unitId) {
+    // Close existing connection if any
+    if (window.currentWebSocket) {
+        window.currentWebSocket.close();
+    }
+
+    // Reset chart data
+    if (window.chartData) {
+        window.chartData.timestamps = [];
+        window.chartData.lp = [];
+        window.chartData.leq = [];
+    }
+    if (window.liveChart && window.liveChart.data && window.liveChart.data.datasets) {
+        window.liveChart.data.labels = [];
+        window.liveChart.data.datasets[0].data = [];
+        window.liveChart.data.datasets[1].data = [];
+        window.liveChart.update();
+    }
+
+    // WebSocket URL for SLMM backend via proxy
+    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${wsProtocol}//${window.location.host}/api/slmm/${unitId}/live`;
+
+    window.currentWebSocket = new WebSocket(wsUrl);
+
+    window.currentWebSocket.onopen = function() {
+        console.log('WebSocket connected');
+        // Toggle button visibility
+        const startBtn = document.getElementById('start-stream-btn');
+        const stopBtn = document.getElementById('stop-stream-btn');
+        if (startBtn) startBtn.style.display = 'none';
+        if (stopBtn) stopBtn.style.display = 'flex';
+    };
+
+    window.currentWebSocket.onmessage = function(event) {
+        try {
+            const data = JSON.parse(event.data);
+            console.log('WebSocket data received:', data);
+            updateLiveMetrics(data);
+            updateLiveChart(data);
+        } catch (error) {
+            console.error('Error parsing WebSocket message:', error);
+        }
+    };
+
+    window.currentWebSocket.onerror = function(error) {
+        console.error('WebSocket error:', error);
+    };
+
+    window.currentWebSocket.onclose = function() {
+        console.log('WebSocket closed');
+        // Toggle button visibility
+        const startBtn = document.getElementById('start-stream-btn');
+        const stopBtn = document.getElementById('stop-stream-btn');
+        if (startBtn) startBtn.style.display = 'flex';
+        if (stopBtn) stopBtn.style.display = 'none';
+    };
+}
+
+function stopLiveDataStream() {
+    if (window.currentWebSocket) {
+        window.currentWebSocket.close();
+        window.currentWebSocket = null;
+    }
+}
+
+// Update metrics display
+function updateLiveMetrics(data) {
+    if (document.getElementById('live-lp')) {
+        document.getElementById('live-lp').textContent = data.lp || '--';
+    }
+    if (document.getElementById('live-leq')) {
+        document.getElementById('live-leq').textContent = data.leq || '--';
+    }
+    if (document.getElementById('live-lmax')) {
+        document.getElementById('live-lmax').textContent = data.lmax || '--';
+    }
+    if (document.getElementById('live-lmin')) {
+        document.getElementById('live-lmin').textContent = data.lmin || '--';
+    }
+    if (document.getElementById('live-lpeak')) {
+        document.getElementById('live-lpeak').textContent = data.lpeak || '--';
+    }
+}
+
+// Chart data storage (use global scope to avoid redeclaration)
+if (typeof window.chartData === 'undefined') {
+    window.chartData = {
+        timestamps: [],
+        lp: [],
+        leq: []
+    };
+}
+
+// Update live chart
+function updateLiveChart(data) {
+    const now = new Date();
+    window.chartData.timestamps.push(now.toLocaleTimeString());
+    window.chartData.lp.push(parseFloat(data.lp || 0));
+    window.chartData.leq.push(parseFloat(data.leq || 0));
+
+    // Keep only last 60 data points
+    if (window.chartData.timestamps.length > 60) {
+        window.chartData.timestamps.shift();
+        window.chartData.lp.shift();
+        window.chartData.leq.shift();
+    }
+
+    // Update chart if available
+    if (window.liveChart) {
+        window.liveChart.data.labels = window.chartData.timestamps;
+        window.liveChart.data.datasets[0].data = window.chartData.lp;
+        window.liveChart.data.datasets[1].data = window.chartData.leq;
+        window.liveChart.update('none');
+    }
+}
+
+// Control function
+async function controlUnit(unitId, action) {
+    try {
+        const response = await fetch(`/api/slm-dashboard/control/${unitId}/${action}`, {
+            method: 'POST'
+        });
+        const result = await response.json();
+
+        if (result.status === 'ok') {
+            // Reload the live view to update status
+            setTimeout(() => {
+                htmx.ajax('GET', `/api/slm-dashboard/live-view/${unitId}`, {
+                    target: '#live-view-panel',
+                    swap: 'innerHTML'
+                });
+            }, 500);
+        } else {
+            alert(`Error: ${result.detail || 'Unknown error'}`);
+        }
+    } catch (error) {
+        alert(`Failed to control unit: ${error.message}`);
+    }
+}
+
+// Cleanup on page unload
+window.addEventListener('beforeunload', function() {
+    if (window.currentWebSocket) {
+        window.currentWebSocket.close();
+    }
+});
+</script>

app/ui/templates/partials/slm_live_view_error.html

@@ -0,0 +1,8 @@
+<!-- Error State for Live View -->
+<div class="flex flex-col items-center justify-center h-[600px] text-red-500 dark:text-red-400">
+    <svg class="w-24 h-24 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+    </svg>
+    <p class="text-lg font-medium">Error Loading Unit</p>
+    <p class="text-sm mt-2 text-gray-600 dark:text-gray-400">{{ error }}</p>
+</div>

app/ui/templates/partials/slm_stats.html

@@ -0,0 +1,61 @@
+<!-- Summary stat cards -->
+<!-- Total Units Card -->
+<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+    <div class="flex items-center justify-between">
+        <div>
+            <p class="text-sm text-gray-600 dark:text-gray-400 font-medium">Total Units</p>
+            <p class="text-3xl font-bold text-gray-900 dark:text-white mt-1">{{ total_count }}</p>
+        </div>
+        <div class="bg-blue-100 dark:bg-blue-900/30 p-3 rounded-lg">
+            <svg class="w-8 h-8 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+            </svg>
+        </div>
+    </div>
+</div>
+
+<!-- Deployed Units Card -->
+<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+    <div class="flex items-center justify-between">
+        <div>
+            <p class="text-sm text-gray-600 dark:text-gray-400 font-medium">Deployed</p>
+            <p class="text-3xl font-bold text-green-600 dark:text-green-400 mt-1">{{ deployed_count }}</p>
+        </div>
+        <div class="bg-green-100 dark:bg-green-900/30 p-3 rounded-lg">
+            <svg class="w-8 h-8 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+        </div>
+    </div>
+</div>
+
+<!-- Active Now Card -->
+<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+    <div class="flex items-center justify-between">
+        <div>
+            <p class="text-sm text-gray-600 dark:text-gray-400 font-medium">Active Now</p>
+            <p class="text-3xl font-bold text-seismo-orange mt-1">{{ active_count }}</p>
+        </div>
+        <div class="bg-orange-100 dark:bg-orange-900/30 p-3 rounded-lg">
+            <svg class="w-8 h-8 text-seismo-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+            </svg>
+        </div>
+    </div>
+    <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">Checked in last hour</p>
+</div>
+
+<!-- Benched Units Card -->
+<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+    <div class="flex items-center justify-between">
+        <div>
+            <p class="text-sm text-gray-600 dark:text-gray-400 font-medium">Benched</p>
+            <p class="text-3xl font-bold text-gray-500 dark:text-gray-400 mt-1">{{ benched_count }}</p>
+        </div>
+        <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-lg">
+            <svg class="w-8 h-8 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
+            </svg>
+        </div>
+    </div>
+</div>

app/ui/templates/partials/slm_unit_list.html

@@ -0,0 +1,73 @@
+<!-- SLM Unit List -->
+{% if units %}
+    {% for unit in units %}
+    <div class="slm-unit-item bg-gray-100 dark:bg-gray-700 rounded-lg p-4 transition-colors relative group">
+        <!-- Configure button (appears on hover) -->
+        <button onclick="event.stopPropagation(); openConfigModal('{{ unit.id }}');"
+                class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-full p-1.5 hover:bg-gray-200 dark:hover:bg-gray-600 z-10"
+                title="Configure {{ unit.id }}">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+            </svg>
+        </button>
+
+        <div class="cursor-pointer" onclick="selectUnit('{{ unit.id }}')">
+            <div class="flex items-center justify-between mb-2">
+                <span class="font-semibold">{{ unit.id }}</span>
+                <!-- Status indicator: green=active, yellow=recent, red=old, gray=never -->
+                {% if unit.slm_last_check %}
+                    <span class="w-2 h-2 bg-green-500 rounded-full" title="Active"></span>
+                {% else %}
+                    <span class="w-2 h-2 bg-gray-400 rounded-full" title="No check-in"></span>
+                {% endif %}
+            </div>
+
+            <div class="text-sm space-y-1">
+                {% if unit.slm_model %}
+                <div class="flex items-center">
+                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
+                    </svg>
+                    {{ unit.slm_model }}
+                </div>
+                {% endif %}
+
+                {% if unit.address %}
+                <div class="flex items-center">
+                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                    </svg>
+                    <span class="truncate">{{ unit.address }}</span>
+                </div>
+                {% endif %}
+
+                {% if unit.deployed_with_modem_id %}
+                <div class="flex items-center font-mono text-xs">
+                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"></path>
+                    </svg>
+                    {{ unit.deployed_with_modem_id }}
+                </div>
+                {% elif unit.slm_host %}
+                <div class="flex items-center font-mono text-xs">
+                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
+                    </svg>
+                    {{ unit.slm_host }}{% if unit.slm_tcp_port %}:{{ unit.slm_tcp_port }}{% endif %}
+                </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+    {% endfor %}
+{% else %}
+    <div class="text-center py-8 text-gray-500 dark:text-gray-400">
+        <svg class="w-12 h-12 mx-auto mb-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
+        </svg>
+        <p>No sound level meters found</p>
+        <p class="text-sm mt-1">Add units from the Fleet Roster</p>
+    </div>
+{% endif %}

app/ui/templates/partials/unknown_emitters.html

@@ -0,0 +1,61 @@
+{% if unknown_units %}
+<div class="mb-6 rounded-xl shadow-lg bg-yellow-50 dark:bg-yellow-900/20 border-2 border-yellow-400 dark:border-yellow-600 p-6">
+    <div class="flex items-start gap-3 mb-4">
+        <svg class="w-6 h-6 text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+        </svg>
+        <div class="flex-1">
+            <h2 class="text-xl font-bold text-yellow-900 dark:text-yellow-200">Unknown Emitters Detected</h2>
+            <p class="text-sm text-yellow-800 dark:text-yellow-300 mt-1">
+                {{ unknown_units|length }} unit(s) are reporting but not in the roster. Add them to track them properly.
+            </p>
+        </div>
+    </div>
+
+    <div class="space-y-3">
+        {% for unit in unknown_units %}
+        <div class="bg-white dark:bg-slate-800 rounded-lg p-4 flex items-center justify-between border border-yellow-300 dark:border-yellow-700">
+            <div class="flex items-center gap-4 flex-1">
+                <div class="font-mono font-bold text-lg text-gray-900 dark:text-white">
+                    {{ unit.id }}
+                </div>
+                <div class="flex items-center gap-3 text-sm">
+                    <span class="px-2 py-1 rounded-full
+                        {% if unit.status == 'OK' %}bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300
+                        {% elif unit.status == 'Pending' %}bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300
+                        {% else %}bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300{% endif %}">
+                        {{ unit.status }}
+                    </span>
+                    <span class="text-gray-600 dark:text-gray-400">
+                        Last seen: {{ unit.age }}
+                    </span>
+                    {% if unit.fname %}
+                    <span class="text-gray-500 dark:text-gray-500 text-xs truncate max-w-xs">
+                        {{ unit.fname }}
+                    </span>
+                    {% endif %}
+                </div>
+            </div>
+            <div class="ml-4 flex gap-2">
+                <button
+                    onclick="addUnknownUnit('{{ unit.id }}')"
+                    class="px-4 py-2 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg flex items-center gap-2 transition-colors whitespace-nowrap">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                    </svg>
+                    Add to Roster
+                </button>
+                <button
+                    onclick="ignoreUnknownUnit('{{ unit.id }}')"
+                    class="px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white rounded-lg flex items-center gap-2 transition-colors whitespace-nowrap">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"></path>
+                    </svg>
+                    Ignore
+                </button>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+{% endif %}

app/ui/templates/seismographs.html

@@ -0,0 +1,76 @@
+{% extends "base.html" %}
+
+{% block title %}Seismographs - Seismo Fleet Manager{% endblock %}
+
+{% block content %}
+<div class="mb-8">
+    <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Seismographs</h1>
+    <p class="text-gray-600 dark:text-gray-400 mt-1">Manage and monitor seismograph units</p>
+</div>
+
+<!-- Auto-refresh stats every 30 seconds -->
+<div hx-get="/api/seismo-dashboard/stats"
+     hx-trigger="load, every 30s"
+     hx-swap="innerHTML"
+     class="mb-8">
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <div class="rounded-lg shadow bg-white dark:bg-slate-800 p-6">
+            <div class="flex items-center justify-between">
+                <div>
+                    <p class="text-gray-600 dark:text-gray-400 text-sm">Loading...</p>
+                    <p class="text-3xl font-bold text-gray-900 dark:text-white mt-2">--</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Seismograph List -->
+<div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
+    <div class="mb-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">All Seismographs</h2>
+
+        <!-- Search Box -->
+        <div class="relative">
+            <input
+                type="text"
+                id="seismo-search"
+                placeholder="Search seismographs..."
+                class="w-full sm:w-64 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                hx-get="/api/seismo-dashboard/units"
+                hx-trigger="keyup changed delay:300ms"
+                hx-target="#seismo-units-list"
+                hx-include="[name='search']"
+                name="search"
+            />
+            <svg class="absolute right-3 top-2.5 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+            </svg>
+        </div>
+    </div>
+
+    <!-- Units List (loaded via HTMX) -->
+    <div id="seismo-units-list"
+         hx-get="/api/seismo-dashboard/units"
+         hx-trigger="load"
+         hx-swap="innerHTML">
+        <p class="text-gray-500 dark:text-gray-400">Loading seismographs...</p>
+    </div>
+</div>
+
+<script>
+// Clear search input on escape key
+document.addEventListener('DOMContentLoaded', function() {
+    const searchInput = document.getElementById('seismo-search');
+    if (searchInput) {
+        searchInput.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') {
+                this.value = '';
+                htmx.trigger(this, 'keyup');
+            }
+        });
+    }
+});
+</script>
+
+{% endblock %}

app/ui/templates/slm_detail.html

@@ -0,0 +1,195 @@
+{% extends "base.html" %}
+
+{% block title %}{{ unit_id }} - Sound Level Meter{% endblock %}
+
+{% block content %}
+<div class="mb-6">
+    <a href="/roster" class="text-seismo-orange hover:text-seismo-orange-dark flex items-center">
+        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+        </svg>
+        Back to Roster
+    </a>
+</div>
+
+<div class="mb-8">
+    <div class="flex justify-between items-start">
+        <div>
+            <h1 class="text-3xl font-bold text-gray-900 dark:text-white flex items-center">
+                <svg class="w-8 h-8 mr-3 text-seismo-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3">
+                    </path>
+                </svg>
+                {{ unit_id }}
+            </h1>
+            <p class="text-gray-600 dark:text-gray-400 mt-1">
+                {{ unit.slm_model or 'NL-43' }} Sound Level Meter
+            </p>
+        </div>
+        <div class="flex gap-2">
+            <span class="px-3 py-1 rounded-full text-sm font-medium
+                         {% if unit.deployed %}bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200
+                         {% else %}bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200{% endif %}">
+                {% if unit.deployed %}Deployed{% else %}Benched{% endif %}
+            </span>
+        </div>
+    </div>
+</div>
+
+<!-- Control Panel -->
+<div class="mb-8">
+    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Control Panel</h2>
+    <div hx-get="/slm/partials/{{ unit_id }}/controls"
+         hx-trigger="load, every 5s"
+         hx-swap="innerHTML">
+        <div class="text-center py-8 text-gray-500">Loading controls...</div>
+    </div>
+</div>
+
+<!-- Real-time Data Stream -->
+<div class="mb-8">
+    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Real-time Measurements</h2>
+    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+        <div id="slm-stream-container">
+            <div class="text-center py-8">
+                <button onclick="startStream()"
+                        id="stream-start-btn"
+                        class="px-6 py-3 bg-seismo-orange text-white rounded-lg hover:bg-seismo-orange-dark transition-colors">
+                    Start Real-time Stream
+                </button>
+                <p class="text-sm text-gray-500 mt-2">Click to begin streaming live measurement data</p>
+            </div>
+            <div id="stream-data" class="hidden">
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
+                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
+                        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Lp (Instant)</div>
+                        <div id="stream-lp" class="text-3xl font-bold text-gray-900 dark:text-white">--</div>
+                        <div class="text-xs text-gray-500">dB</div>
+                    </div>
+                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
+                        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Leq (Average)</div>
+                        <div id="stream-leq" class="text-3xl font-bold text-blue-600 dark:text-blue-400">--</div>
+                        <div class="text-xs text-gray-500">dB</div>
+                    </div>
+                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
+                        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Lmax</div>
+                        <div id="stream-lmax" class="text-3xl font-bold text-red-600 dark:text-red-400">--</div>
+                        <div class="text-xs text-gray-500">dB</div>
+                    </div>
+                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
+                        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Lmin</div>
+                        <div id="stream-lmin" class="text-3xl font-bold text-green-600 dark:text-green-400">--</div>
+                        <div class="text-xs text-gray-500">dB</div>
+                    </div>
+                </div>
+                <div class="flex justify-between items-center">
+                    <div class="text-xs text-gray-500">
+                        <span class="inline-block w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></span>
+                        Streaming
+                    </div>
+                    <button onclick="stopStream()"
+                            class="px-4 py-2 bg-red-600 text-white text-sm rounded-lg hover:bg-red-700 transition-colors">
+                        Stop Stream
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Device Information -->
+<div class="mb-8">
+    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Device Information</h2>
+    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+                <div class="text-sm text-gray-600 dark:text-gray-400">Model</div>
+                <div class="text-lg font-medium text-gray-900 dark:text-white">{{ unit.slm_model or 'NL-43' }}</div>
+            </div>
+            <div>
+                <div class="text-sm text-gray-600 dark:text-gray-400">Serial Number</div>
+                <div class="text-lg font-medium text-gray-900 dark:text-white">{{ unit.slm_serial_number or 'N/A' }}</div>
+            </div>
+            <div>
+                <div class="text-sm text-gray-600 dark:text-gray-400">Host</div>
+                <div class="text-lg font-medium text-gray-900 dark:text-white">{{ unit.slm_host or 'Not configured' }}</div>
+            </div>
+            <div>
+                <div class="text-sm text-gray-600 dark:text-gray-400">TCP Port</div>
+                <div class="text-lg font-medium text-gray-900 dark:text-white">{{ unit.slm_tcp_port or 'N/A' }}</div>
+            </div>
+            <div>
+                <div class="text-sm text-gray-600 dark:text-gray-400">Frequency Weighting</div>
+                <div class="text-lg font-medium text-gray-900 dark:text-white">{{ unit.slm_frequency_weighting or 'A' }}</div>
+            </div>
+            <div>
+                <div class="text-sm text-gray-600 dark:text-gray-400">Time Weighting</div>
+                <div class="text-lg font-medium text-gray-900 dark:text-white">{{ unit.slm_time_weighting or 'F (Fast)' }}</div>
+            </div>
+            <div class="md:col-span-2">
+                <div class="text-sm text-gray-600 dark:text-gray-400">Location</div>
+                <div class="text-lg font-medium text-gray-900 dark:text-white">{{ unit.address or unit.location or 'Not specified' }}</div>
+            </div>
+            {% if unit.note %}
+            <div class="md:col-span-2">
+                <div class="text-sm text-gray-600 dark:text-gray-400">Notes</div>
+                <div class="text-gray-900 dark:text-white">{{ unit.note }}</div>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+<script>
+let ws = null;
+
+function startStream() {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${window.location.host}/api/slmm/{{ unit_id }}/stream`;
+
+    ws = new WebSocket(wsUrl);
+
+    ws.onopen = () => {
+        document.getElementById('stream-start-btn').classList.add('hidden');
+        document.getElementById('stream-data').classList.remove('hidden');
+        console.log('WebSocket connected');
+    };
+
+    ws.onmessage = (event) => {
+        const data = JSON.parse(event.data);
+
+        if (data.error) {
+            console.error('Stream error:', data.error);
+            stopStream();
+            alert('Error: ' + data.error);
+            return;
+        }
+
+        // Update values
+        document.getElementById('stream-lp').textContent = data.lp || '--';
+        document.getElementById('stream-leq').textContent = data.leq || '--';
+        document.getElementById('stream-lmax').textContent = data.lmax || '--';
+        document.getElementById('stream-lmin').textContent = data.lmin || '--';
+    };
+
+    ws.onerror = (error) => {
+        console.error('WebSocket error:', error);
+        stopStream();
+    };
+
+    ws.onclose = () => {
+        console.log('WebSocket closed');
+    };
+}
+
+function stopStream() {
+    if (ws) {
+        ws.close();
+        ws = null;
+    }
+    document.getElementById('stream-start-btn').classList.remove('hidden');
+    document.getElementById('stream-data').classList.add('hidden');
+}
+</script>
+{% endblock %}

app/ui/templates/sound_level_meters.html

@@ -0,0 +1,249 @@
+{% extends "base.html" %}
+
+{% block title %}Sound Level Meters - Seismo Fleet Manager{% endblock %}
+
+{% block content %}
+<div class="mb-8">
+    <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Sound Level Meters</h1>
+    <p class="text-gray-600 dark:text-gray-400 mt-1">Monitor and manage sound level measurement devices</p>
+</div>
+
+<!-- Summary Stats -->
+<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"
+     hx-get="/api/slm-dashboard/stats"
+     hx-trigger="load, every 10s"
+     hx-swap="innerHTML">
+    <!-- Stats will be loaded here -->
+    <div class="animate-pulse bg-gray-200 dark:bg-gray-700 h-24 rounded-xl"></div>
+    <div class="animate-pulse bg-gray-200 dark:bg-gray-700 h-24 rounded-xl"></div>
+    <div class="animate-pulse bg-gray-200 dark:bg-gray-700 h-24 rounded-xl"></div>
+    <div class="animate-pulse bg-gray-200 dark:bg-gray-700 h-24 rounded-xl"></div>
+</div>
+
+<!-- Main Content Grid -->
+<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+    <!-- SLM List -->
+    <div class="lg:col-span-1">
+        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Active Units</h2>
+
+            <!-- Search/Filter -->
+            <div class="mb-4">
+                <input type="text"
+                       placeholder="Search units..."
+                       class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                       hx-get="/api/slm-dashboard/units"
+                       hx-trigger="keyup changed delay:300ms"
+                       hx-target="#slm-list"
+                       hx-include="this"
+                       name="search">
+            </div>
+
+            <!-- SLM List -->
+            <div id="slm-list"
+                 class="space-y-2 max-h-[600px] overflow-y-auto"
+                 hx-get="/api/slm-dashboard/units"
+                 hx-trigger="load, every 10s"
+                 hx-swap="innerHTML">
+                <!-- Loading skeleton -->
+                <div class="animate-pulse space-y-2">
+                    <div class="bg-gray-200 dark:bg-gray-700 h-20 rounded-lg"></div>
+                    <div class="bg-gray-200 dark:bg-gray-700 h-20 rounded-lg"></div>
+                    <div class="bg-gray-200 dark:bg-gray-700 h-20 rounded-lg"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Live View Panel -->
+    <div class="lg:col-span-2">
+        <div id="live-view-panel" class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+            <!-- Initial state - no unit selected -->
+            <div class="flex flex-col items-center justify-center h-[600px] text-gray-400 dark:text-gray-500">
+                <svg class="w-24 h-24 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"></path>
+                </svg>
+                <p class="text-lg font-medium">No unit selected</p>
+                <p class="text-sm mt-2">Select a sound level meter from the list to view live data</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Configuration Modal -->
+<div id="config-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+    <div class="bg-white dark:bg-slate-800 rounded-xl p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
+        <div class="flex items-center justify-between mb-6">
+            <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Configure SLM</h3>
+            <button onclick="closeConfigModal()" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                </svg>
+            </button>
+        </div>
+
+        <div id="config-modal-content">
+            <!-- Content loaded via HTMX -->
+            <div class="animate-pulse space-y-4">
+                <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4"></div>
+                <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded"></div>
+                <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-5/6"></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+// Function to select a unit and load live view
+function selectUnit(unitId) {
+    // Remove active state from all items
+    document.querySelectorAll('.slm-unit-item').forEach(item => {
+        item.classList.remove('bg-seismo-orange', 'text-white');
+        item.classList.add('bg-gray-100', 'dark:bg-gray-700');
+    });
+
+    // Add active state to clicked item
+    event.currentTarget.classList.remove('bg-gray-100', 'dark:bg-gray-700');
+    event.currentTarget.classList.add('bg-seismo-orange', 'text-white');
+
+    // Load live view for this unit
+    htmx.ajax('GET', `/api/slm-dashboard/live-view/${unitId}`, {
+        target: '#live-view-panel',
+        swap: 'innerHTML'
+    });
+}
+
+// Configuration modal functions
+function openConfigModal(unitId) {
+    const modal = document.getElementById('config-modal');
+    modal.classList.remove('hidden');
+    
+    // Load configuration form via HTMX
+    htmx.ajax('GET', `/api/slm-dashboard/config/${unitId}`, {
+        target: '#config-modal-content',
+        swap: 'innerHTML'
+    });
+}
+
+function closeConfigModal() {
+    document.getElementById('config-modal').classList.add('hidden');
+}
+
+// Close modal on escape key
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+        closeConfigModal();
+    }
+});
+
+// Close modal when clicking outside
+document.getElementById('config-modal')?.addEventListener('click', function(e) {
+    if (e.target === this) {
+        closeConfigModal();
+    }
+});
+
+// Initialize WebSocket for selected unit
+let currentWebSocket = null;
+
+function initLiveDataStream(unitId) {
+    // Close existing connection if any
+    if (currentWebSocket) {
+        currentWebSocket.close();
+    }
+
+    // WebSocket URL for SLMM backend via proxy
+    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${wsProtocol}//${window.location.host}/api/slmm/${unitId}/live`;
+
+    currentWebSocket = new WebSocket(wsUrl);
+
+    currentWebSocket.onopen = function() {
+        console.log('WebSocket connected');
+        // Toggle button visibility
+        const startBtn = document.getElementById('start-stream-btn');
+        const stopBtn = document.getElementById('stop-stream-btn');
+        if (startBtn) startBtn.style.display = 'none';
+        if (stopBtn) stopBtn.style.display = 'flex';
+    };
+
+    currentWebSocket.onmessage = function(event) {
+        const data = JSON.parse(event.data);
+        updateLiveChart(data);
+        updateLiveMetrics(data);
+    };
+
+    currentWebSocket.onerror = function(error) {
+        console.error('WebSocket error:', error);
+    };
+
+    currentWebSocket.onclose = function() {
+        console.log('WebSocket closed');
+        // Toggle button visibility
+        const startBtn = document.getElementById('start-stream-btn');
+        const stopBtn = document.getElementById('stop-stream-btn');
+        if (startBtn) startBtn.style.display = 'flex';
+        if (stopBtn) stopBtn.style.display = 'none';
+    };
+}
+
+function stopLiveDataStream() {
+    if (currentWebSocket) {
+        currentWebSocket.close();
+        currentWebSocket = null;
+    }
+}
+
+// Update live chart with new data point
+let chartData = {
+    timestamps: [],
+    lp: [],
+    leq: []
+};
+
+function updateLiveChart(data) {
+    const now = new Date();
+    chartData.timestamps.push(now.toLocaleTimeString());
+    chartData.lp.push(parseFloat(data.lp || 0));
+    chartData.leq.push(parseFloat(data.leq || 0));
+
+    // Keep only last 60 data points (1 minute at 1 sample/sec)
+    if (chartData.timestamps.length > 60) {
+        chartData.timestamps.shift();
+        chartData.lp.shift();
+        chartData.leq.shift();
+    }
+
+    // Update chart (using Chart.js if available)
+    if (window.liveChart) {
+        window.liveChart.data.labels = chartData.timestamps;
+        window.liveChart.data.datasets[0].data = chartData.lp;
+        window.liveChart.data.datasets[1].data = chartData.leq;
+        window.liveChart.update('none'); // Update without animation for smooth real-time
+    }
+}
+
+function updateLiveMetrics(data) {
+    // Update metric displays
+    if (document.getElementById('live-lp')) {
+        document.getElementById('live-lp').textContent = data.lp || '--';
+    }
+    if (document.getElementById('live-leq')) {
+        document.getElementById('live-leq').textContent = data.leq || '--';
+    }
+    if (document.getElementById('live-lmax')) {
+        document.getElementById('live-lmax').textContent = data.lmax || '--';
+    }
+    if (document.getElementById('live-lmin')) {
+        document.getElementById('live-lmin').textContent = data.lmin || '--';
+    }
+}
+
+// Cleanup on page unload
+window.addEventListener('beforeunload', function() {
+    if (currentWebSocket) {
+        currentWebSocket.close();
+    }
+});
+</script>
+{% endblock %}