From f976e4e893b7c4d96029e472dda9980cd0fa0f98 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 20 Nov 2025 18:14:29 +0000
Subject: [PATCH 01/29] Add Seismo Fleet Manager backend v0.1

Implemented FastAPI backend with SQLite database for tracking seismograph fleet status:
- database.py: SQLAlchemy setup with SQLite
- models.py: Emitter model with id, unit_type, last_seen, last_file, status, notes
- routes.py: POST /emitters/report and GET /fleet/status endpoints
- main.py: FastAPI app initialization with CORS support
- requirements.txt: Dependencies (FastAPI, SQLAlchemy, uvicorn)
---
 database.py      | 22 +++++++++++++
 main.py          | 41 ++++++++++++++++++++++++
 models.py        | 18 +++++++++++
 requirements.txt |  5 +++
 routes.py        | 82 ++++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 168 insertions(+)
 create mode 100644 database.py
 create mode 100644 main.py
 create mode 100644 models.py
 create mode 100644 requirements.txt
 create mode 100644 routes.py

diff --git a/database.py b/database.py
new file mode 100644
index 0000000..bb191d9
--- /dev/null
+++ b/database.py
@@ -0,0 +1,22 @@
+from sqlalchemy import create_engine
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import sessionmaker
+
+SQLALCHEMY_DATABASE_URL = "sqlite:///./seismo_fleet.db"
+
+engine = create_engine(
+    SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False}
+)
+
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+
+Base = declarative_base()
+
+
+def get_db():
+    """Dependency for database sessions"""
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()
diff --git a/main.py b/main.py
new file mode 100644
index 0000000..9458fd8
--- /dev/null
+++ b/main.py
@@ -0,0 +1,41 @@
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+
+from database import engine, Base
+from routes import router
+
+# Create database tables
+Base.metadata.create_all(bind=engine)
+
+# Initialize FastAPI app
+app = FastAPI(
+    title="Seismo Fleet Manager",
+    description="Backend API for managing seismograph fleet status",
+    version="0.1.0"
+)
+
+# Configure CORS (adjust origins as needed for your deployment)
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # In production, specify exact origins
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Include API routes
+app.include_router(router)
+
+
+@app.get("/")
+def root():
+    """Root endpoint - health check"""
+    return {
+        "message": "Seismo Fleet Manager API v0.1",
+        "status": "running"
+    }
+
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)
diff --git a/models.py b/models.py
new file mode 100644
index 0000000..9ae42c1
--- /dev/null
+++ b/models.py
@@ -0,0 +1,18 @@
+from sqlalchemy import Column, String, DateTime
+from datetime import datetime
+from database import Base
+
+
+class Emitter(Base):
+    """Emitter model representing a seismograph unit in the fleet"""
+    __tablename__ = "emitters"
+
+    id = Column(String, primary_key=True, index=True)
+    unit_type = Column(String, nullable=False)
+    last_seen = Column(DateTime, default=datetime.utcnow)
+    last_file = Column(String, nullable=False)
+    status = Column(String, nullable=False)  # OK, Pending, Missing
+    notes = Column(String, nullable=True)
+
+    def __repr__(self):
+        return f"<Emitter(id={self.id}, type={self.unit_type}, status={self.status})>"
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..4ab590c
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,5 @@
+fastapi==0.104.1
+uvicorn[standard]==0.24.0
+sqlalchemy==2.0.23
+pydantic==2.5.0
+python-multipart==0.0.6
diff --git a/routes.py b/routes.py
new file mode 100644
index 0000000..4cdb4fa
--- /dev/null
+++ b/routes.py
@@ -0,0 +1,82 @@
+from fastapi import APIRouter, Depends, HTTPException
+from sqlalchemy.orm import Session
+from pydantic import BaseModel
+from datetime import datetime
+from typing import Optional, List
+
+from database import get_db
+from models import Emitter
+
+router = APIRouter()
+
+
+# Pydantic schemas for request/response validation
+class EmitterReport(BaseModel):
+    unit: str
+    unit_type: str
+    timestamp: str
+    file: str
+    status: str
+
+
+class EmitterResponse(BaseModel):
+    id: str
+    unit_type: str
+    last_seen: datetime
+    last_file: str
+    status: str
+    notes: Optional[str] = None
+
+    class Config:
+        from_attributes = True
+
+
+@router.post("/emitters/report", status_code=200)
+def report_emitter(report: EmitterReport, db: Session = Depends(get_db)):
+    """
+    Endpoint for emitters to report their status.
+    Creates a new emitter if it doesn't exist, or updates an existing one.
+    """
+    try:
+        # Parse the timestamp
+        timestamp = datetime.fromisoformat(report.timestamp.replace('Z', '+00:00'))
+    except ValueError:
+        raise HTTPException(status_code=400, detail="Invalid timestamp format")
+
+    # Check if emitter already exists
+    emitter = db.query(Emitter).filter(Emitter.id == report.unit).first()
+
+    if emitter:
+        # Update existing emitter
+        emitter.unit_type = report.unit_type
+        emitter.last_seen = timestamp
+        emitter.last_file = report.file
+        emitter.status = report.status
+    else:
+        # Create new emitter
+        emitter = Emitter(
+            id=report.unit,
+            unit_type=report.unit_type,
+            last_seen=timestamp,
+            last_file=report.file,
+            status=report.status
+        )
+        db.add(emitter)
+
+    db.commit()
+    db.refresh(emitter)
+
+    return {
+        "message": "Emitter report received",
+        "unit": emitter.id,
+        "status": emitter.status
+    }
+
+
+@router.get("/fleet/status", response_model=List[EmitterResponse])
+def get_fleet_status(db: Session = Depends(get_db)):
+    """
+    Returns a list of all emitters and their current status.
+    """
+    emitters = db.query(Emitter).all()
+    return emitters
-- 
2.49.1


From 05c63367c8f4e60f250b3357b246c2292b581905 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 20 Nov 2025 18:46:46 +0000
Subject: [PATCH 02/29] Containerize backend with Docker Compose

Added Docker support for easy deployment:
- Dockerfile: Python 3.11 slim image with FastAPI app
- docker-compose.yml: Service definition with volume mounting for data persistence
- .dockerignore: Exclude unnecessary files from Docker build
- database.py: Updated to store SQLite DB in ./data directory for volume persistence
- .gitignore: Added entries for database files and data directory
- README.md: Comprehensive documentation with Docker and local setup instructions

The application can now be run with: docker compose up -d
Database persists in ./data directory mounted as a volume
---
 .dockerignore      |  19 ++++
 .gitignore         |   6 ++
 Dockerfile         |  19 ++++
 README.md          | 251 ++++++++++++++++++++++++++++++++++++++++++++-
 database.py        |   6 +-
 docker-compose.yml |  23 +++++
 6 files changed, 321 insertions(+), 3 deletions(-)
 create mode 100644 .dockerignore
 create mode 100644 Dockerfile
 create mode 100644 docker-compose.yml

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..e809327
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,19 @@
+__pycache__
+*.pyc
+*.pyo
+*.pyd
+.Python
+*.so
+*.egg
+*.egg-info
+dist
+build
+.git
+.gitignore
+*.db
+*.db-journal
+.env
+.venv
+venv/
+ENV/
+data/
diff --git a/.gitignore b/.gitignore
index b7faf40..b697ede 100644
--- a/.gitignore
+++ b/.gitignore
@@ -205,3 +205,9 @@ cython_debug/
 marimo/_static/
 marimo/_lsp/
 __marimo__/
+
+# Seismo Fleet Manager
+# SQLite database files
+*.db
+*.db-journal
+data/
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..3533224
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,19 @@
+FROM python:3.11-slim
+
+# Set working directory
+WORKDIR /app
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+
+# Install dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY . .
+
+# Expose port
+EXPOSE 8000
+
+# Run the application
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]
diff --git a/README.md b/README.md
index 661646a..ee96d16 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,249 @@
-# seismo-fleet-manager
-Web app and backend for tracking deployed units.
+# Seismo Fleet Manager - Backend v0.1
+
+Backend API for managing seismograph fleet status. Track multiple seismographs calling in data from remote deployments, monitor their status, and manage your fleet through a unified database.
+
+## Features
+
+- **Fleet Monitoring**: Track all seismograph units in one place
+- **Status Management**: Automatically mark units as OK, Pending (>12h), or Missing (>24h)
+- **Data Ingestion**: Accept reports from emitter scripts via REST API
+- **SQLite Storage**: Lightweight, file-based database for easy deployment
+
+## Tech Stack
+
+- **FastAPI**: Modern, fast web framework
+- **SQLAlchemy**: SQL toolkit and ORM
+- **SQLite**: Lightweight database
+- **uvicorn**: ASGI server
+- **Docker**: Containerization for easy deployment
+
+## Quick Start with Docker Compose (Recommended)
+
+### Prerequisites
+- Docker and Docker Compose installed
+
+### Running the Application
+
+1. **Start the service:**
+   ```bash
+   docker compose up -d
+   ```
+
+2. **Check logs:**
+   ```bash
+   docker compose logs -f
+   ```
+
+3. **Stop the service:**
+   ```bash
+   docker compose down
+   ```
+
+The API will be available at `http://localhost:8000`
+
+### Data Persistence
+
+The SQLite database is stored in the `./data` directory, which is mounted as a volume. Your data will persist even if you restart or rebuild the container.
+
+## Local Development (Without Docker)
+
+### Prerequisites
+- Python 3.11+
+- pip
+
+### Setup
+
+1. **Install dependencies:**
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+2. **Run the server:**
+   ```bash
+   python main.py
+   ```
+
+   Or with auto-reload:
+   ```bash
+   uvicorn main:app --reload
+   ```
+
+The API will be available at `http://localhost:8000`
+
+## API Endpoints
+
+### Root
+- **GET** `/` - Health check
+
+### Emitter Report
+- **POST** `/emitters/report`
+- Submit status report from a seismograph unit
+- **Request Body:**
+  ```json
+  {
+    "unit": "SEISMO-001",
+    "unit_type": "series3",
+    "timestamp": "2025-11-20T10:30:00",
+    "file": "event_20251120_103000.dat",
+    "status": "OK"
+  }
+  ```
+- **Response:**
+  ```json
+  {
+    "message": "Emitter report received",
+    "unit": "SEISMO-001",
+    "status": "OK"
+  }
+  ```
+
+### Fleet Status
+- **GET** `/fleet/status`
+- Retrieve status of all seismograph units
+- **Response:**
+  ```json
+  [
+    {
+      "id": "SEISMO-001",
+      "unit_type": "series3",
+      "last_seen": "2025-11-20T10:30:00",
+      "last_file": "event_20251120_103000.dat",
+      "status": "OK",
+      "notes": null
+    }
+  ]
+  ```
+
+## API Documentation
+
+Once running, interactive API documentation is available at:
+- **Swagger UI**: http://localhost:8000/docs
+- **ReDoc**: http://localhost:8000/redoc
+
+## Testing the API
+
+### Using curl
+
+**Submit a report:**
+```bash
+curl -X POST http://localhost:8000/emitters/report \
+  -H "Content-Type: application/json" \
+  -d '{
+    "unit": "SEISMO-001",
+    "unit_type": "series3",
+    "timestamp": "2025-11-20T10:30:00",
+    "file": "event_20251120_103000.dat",
+    "status": "OK"
+  }'
+```
+
+**Get fleet status:**
+```bash
+curl http://localhost:8000/fleet/status
+```
+
+### Using Python
+
+```python
+import requests
+from datetime import datetime
+
+# Submit report
+response = requests.post(
+    "http://localhost:8000/emitters/report",
+    json={
+        "unit": "SEISMO-001",
+        "unit_type": "series3",
+        "timestamp": datetime.utcnow().isoformat(),
+        "file": "event_20251120_103000.dat",
+        "status": "OK"
+    }
+)
+print(response.json())
+
+# Get fleet status
+response = requests.get("http://localhost:8000/fleet/status")
+print(response.json())
+```
+
+## Data Model
+
+### Emitters Table
+
+| Field | Type | Description |
+|-------|------|-------------|
+| id | string | Unit identifier (primary key) |
+| unit_type | string | Type of seismograph (e.g., "series3") |
+| last_seen | datetime | Last report timestamp |
+| last_file | string | Last file processed |
+| status | string | Current status: OK, Pending, Missing |
+| notes | string | Optional notes (nullable) |
+
+## Project Structure
+
+```
+seismo-fleet-manager/
+├── main.py              # FastAPI app entry point
+├── database.py          # SQLAlchemy database configuration
+├── models.py            # Database models
+├── routes.py            # API endpoints
+├── requirements.txt     # Python dependencies
+├── Dockerfile           # Docker container definition
+├── docker-compose.yml   # Docker Compose configuration
+├── .dockerignore        # Docker ignore rules
+└── data/                # SQLite database directory (created at runtime)
+```
+
+## Docker Commands
+
+**Build the image:**
+```bash
+docker compose build
+```
+
+**Start in foreground:**
+```bash
+docker compose up
+```
+
+**Start in background:**
+```bash
+docker compose up -d
+```
+
+**View logs:**
+```bash
+docker compose logs -f seismo-backend
+```
+
+**Restart service:**
+```bash
+docker compose restart
+```
+
+**Stop and remove containers:**
+```bash
+docker compose down
+```
+
+**Remove containers and volumes:**
+```bash
+docker compose down -v
+```
+
+## Future Enhancements
+
+- Automated status updates based on last_seen timestamps
+- Web-based dashboard for fleet monitoring
+- Email/SMS alerts for missing units
+- Historical data tracking and reporting
+- Multi-user authentication
+- PostgreSQL support for larger deployments
+
+## License
+
+MIT
+
+## Version
+
+0.1.0 - Initial Release
diff --git a/database.py b/database.py
index bb191d9..49ad5d9 100644
--- a/database.py
+++ b/database.py
@@ -1,8 +1,12 @@
 from sqlalchemy import create_engine
 from sqlalchemy.ext.declarative import declarative_base
 from sqlalchemy.orm import sessionmaker
+import os
 
-SQLALCHEMY_DATABASE_URL = "sqlite:///./seismo_fleet.db"
+# Ensure data directory exists
+os.makedirs("data", exist_ok=True)
+
+SQLALCHEMY_DATABASE_URL = "sqlite:///./data/seismo_fleet.db"
 
 engine = create_engine(
     SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False}
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..0b84fce
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,23 @@
+version: '3.8'
+
+services:
+  seismo-backend:
+    build: .
+    container_name: seismo-fleet-manager
+    ports:
+      - "8000:8000"
+    volumes:
+      # Persist SQLite database
+      - ./data:/app/data
+    environment:
+      - PYTHONUNBUFFERED=1
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8000/"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+volumes:
+  data:
-- 
2.49.1


From 36ce63feb176181046e1a425343f57ed1b86d434 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 20 Nov 2025 19:33:39 +0000
Subject: [PATCH 03/29] Change exposed port from 8000 to 8001 to avoid port
 conflict

---
 docker-compose.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 0b84fce..6214c26 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -5,7 +5,7 @@ services:
     build: .
     container_name: seismo-fleet-manager
     ports:
-      - "8000:8000"
+      - "8001:8000"
     volumes:
       # Persist SQLite database
       - ./data:/app/data
-- 
2.49.1


From 247405c361f6a808a222563ab2215fec35d23d90 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 22 Nov 2025 00:16:26 +0000
Subject: [PATCH 04/29] Add MVP frontend scaffold with FastAPI + HTMX +
 TailwindCSS

- Created complete frontend structure with Jinja2 templates
- Implemented three main pages: Dashboard, Fleet Roster, and Unit Detail
- Added HTMX auto-refresh for real-time updates (10s interval)
- Integrated dark/light mode toggle with localStorage persistence
- Built responsive card-based UI with sidebar navigation
- Created API endpoints for status snapshot, roster, unit details, and photos
- Added mock data service for development (emit_status_snapshot)
- Implemented tabbed interface on unit detail page (Photos, Map, History)
- Integrated Leaflet maps for unit location visualization
- Configured static file serving and photo management
- Updated requirements.txt with Jinja2 and aiofiles
- Reorganized backend structure into routers and services
- Added comprehensive FRONTEND_README.md documentation

Frontend features:
- Auto-refreshing dashboard with fleet summary and alerts
- Sortable fleet roster table (prioritizes Missing > Pending > OK)
- Unit detail view with status, deployment info, and notes
- Photo gallery with thumbnail navigation
- Interactive maps showing unit coordinates
- Consistent styling with brand colors (orange, navy, burgundy)

Ready for integration with real Series3 emitter data.
---
 FRONTEND_README.md                   | 303 +++++++++++++++++++++++++++
 database.py => backend/database.py   |   0
 backend/main.py                      | 108 ++++++++++
 models.py => backend/models.py       |   2 +-
 backend/routers/photos.py            |  64 ++++++
 backend/routers/roster.py            |  46 ++++
 backend/routers/units.py             |  44 ++++
 routes.py => backend/routes.py       |   4 +-
 backend/services/snapshot.py         |  96 +++++++++
 backend/static/style.css             |  12 ++
 requirements.txt                     |   2 +
 templates/base.html                  | 150 +++++++++++++
 templates/dashboard.html             | 178 ++++++++++++++++
 templates/partials/roster_table.html |  87 ++++++++
 templates/roster.html                |  29 +++
 templates/unit_detail.html           | 268 +++++++++++++++++++++++
 16 files changed, 1390 insertions(+), 3 deletions(-)
 create mode 100644 FRONTEND_README.md
 rename database.py => backend/database.py (100%)
 create mode 100644 backend/main.py
 rename models.py => backend/models.py (94%)
 create mode 100644 backend/routers/photos.py
 create mode 100644 backend/routers/roster.py
 create mode 100644 backend/routers/units.py
 rename routes.py => backend/routes.py (96%)
 create mode 100644 backend/services/snapshot.py
 create mode 100644 backend/static/style.css
 create mode 100644 templates/base.html
 create mode 100644 templates/dashboard.html
 create mode 100644 templates/partials/roster_table.html
 create mode 100644 templates/roster.html
 create mode 100644 templates/unit_detail.html

diff --git a/FRONTEND_README.md b/FRONTEND_README.md
new file mode 100644
index 0000000..b9e2fdb
--- /dev/null
+++ b/FRONTEND_README.md
@@ -0,0 +1,303 @@
+# Seismo Fleet Manager - Frontend Documentation
+
+## Overview
+
+This is the MVP frontend scaffold for **Seismo Fleet Manager**, built with:
+- **FastAPI** (backend framework)
+- **HTMX** (dynamic updates without JavaScript frameworks)
+- **TailwindCSS** (utility-first styling)
+- **Jinja2** (server-side templating)
+- **Leaflet** (interactive maps)
+
+No React, Vue, or other frontend frameworks are used.
+
+## Project Structure
+
+```
+seismo-fleet-manager/
+├── backend/
+│   ├── main.py                 # FastAPI app entry point
+│   ├── routers/
+│   │   ├── roster.py          # Fleet roster endpoints
+│   │   ├── units.py           # Individual unit endpoints
+│   │   └── photos.py          # Photo management endpoints
+│   ├── services/
+│   │   └── snapshot.py        # Mock status snapshot (replace with real logic)
+│   ├── static/
+│   │   └── style.css          # Custom CSS
+│   ├── database.py            # SQLAlchemy database setup
+│   ├── models.py              # Database models
+│   └── routes.py              # Legacy API routes
+├── templates/
+│   ├── base.html              # Base layout with sidebar & dark mode
+│   ├── dashboard.html         # Main dashboard page
+│   ├── roster.html            # Fleet roster page
+│   ├── unit_detail.html       # Unit detail page
+│   └── partials/
+│       └── roster_table.html  # HTMX partial for roster table
+├── data/
+│   └── photos/                # Photo storage (organized by unit_id)
+└── requirements.txt
+```
+
+## Running the Application
+
+### Install Dependencies
+
+```bash
+pip install -r requirements.txt
+```
+
+### Run the Server
+
+```bash
+uvicorn backend.main:app --host 0.0.0.0 --port 8001 --reload
+```
+
+The application will be available at:
+- **Web UI**: http://localhost:8001/
+- **API Docs**: http://localhost:8001/docs
+- **Health Check**: http://localhost:8001/health
+
+## Features
+
+### 1. Dashboard (`/`)
+
+The main dashboard provides an at-a-glance view of the fleet:
+
+- **Fleet Summary Card**: Total units, deployed units, status breakdown
+- **Recent Alerts Card**: Shows units with Missing or Pending status
+- **Recent Photos Card**: Placeholder for photo gallery
+- **Fleet Status Preview**: Quick view of first 5 units
+
+**Auto-refresh**: Dashboard updates every 10 seconds via HTMX
+
+### 2. Fleet Roster (`/roster`)
+
+A comprehensive table view of all seismograph units:
+
+**Columns**:
+- Status indicator (colored dot: green=OK, yellow=Pending, red=Missing)
+- Deployment indicator (blue dot if deployed)
+- Unit ID
+- Last seen timestamp
+- Age since last contact
+- Notes
+- Actions (View detail button)
+
+**Features**:
+- Auto-refresh every 10 seconds
+- Sorted by priority (Missing > Pending > OK)
+- Click any row to view unit details
+
+### 3. Unit Detail Page (`/unit/{unit_id}`)
+
+Split-screen layout with detailed information:
+
+**Left Column**:
+- Status card with real-time updates
+- Deployment status
+- Last contact time and file
+- Notes section
+- Editable metadata (mock form)
+
+**Right Column - Tabbed Interface**:
+- **Photos Tab**: Primary photo with thumbnail gallery
+- **Map Tab**: Interactive Leaflet map showing unit location
+- **History Tab**: Placeholder for event history
+
+**Auto-refresh**: Unit data updates every 10 seconds
+
+### 4. Dark/Light Mode
+
+Toggle button in sidebar switches between themes:
+- Uses Tailwind's `dark:` classes
+- Preference saved to localStorage
+- Smooth transitions on theme change
+
+## API Endpoints
+
+### Status & Fleet Data
+
+```http
+GET /api/status-snapshot
+```
+Returns complete fleet status snapshot with statistics.
+
+```http
+GET /api/roster
+```
+Returns sorted list of all units for roster table.
+
+```http
+GET /api/unit/{unit_id}
+```
+Returns detailed information for a single unit including coordinates.
+
+### Photo Management
+
+```http
+GET /api/unit/{unit_id}/photos
+```
+Returns list of photos for a unit, sorted by recency.
+
+```http
+GET /api/unit/{unit_id}/photo/{filename}
+```
+Serves a specific photo file.
+
+### Legacy Endpoints
+
+```http
+POST /emitters/report
+```
+Endpoint for emitters to report status (from original backend).
+
+```http
+GET /fleet/status
+```
+Returns database-backed fleet status (from original backend).
+
+## Mock Data
+
+### Location: `backend/services/snapshot.py`
+
+The `emit_status_snapshot()` function currently returns mock data with 8 units:
+
+- **BE1234**: OK, deployed (San Francisco)
+- **BE5678**: Pending, deployed (Los Angeles)
+- **BE9012**: Missing, deployed (New York)
+- **BE3456**: OK, benched (Chicago)
+- **BE7890**: OK, deployed (Houston)
+- **BE2468**: Pending, deployed
+- **BE1357**: OK, benched
+- **BE8642**: Missing, deployed
+
+**To replace with real data**: Update the `emit_status_snapshot()` function to call your Series3 emitter logic.
+
+## Styling
+
+### Color Palette
+
+The application uses your brand colors:
+
+```css
+orange:   #f48b1c
+navy:     #142a66
+burgundy: #7d234d
+```
+
+These are configured in the Tailwind config as `seismo-orange`, `seismo-navy`, `seismo-burgundy`.
+
+### Cards
+
+All cards use the consistent styling:
+```html
+<div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
+```
+
+### Status Indicators
+
+- Green dot: OK status
+- Yellow dot: Pending status
+- Red dot: Missing status
+- Blue dot: Deployed
+- Gray dot: Benched
+
+## HTMX Usage
+
+HTMX enables dynamic updates without writing JavaScript:
+
+### Auto-refresh Example (Dashboard)
+
+```html
+<div hx-get="/api/status-snapshot"
+     hx-trigger="load, every 10s"
+     hx-swap="none"
+     hx-on::after-request="updateDashboard(event)">
+```
+
+This fetches the snapshot on page load and every 10 seconds, then calls a JavaScript function to update the DOM.
+
+### Partial Template Loading (Roster)
+
+```html
+<div hx-get="/partials/roster-table"
+     hx-trigger="load, every 10s"
+     hx-swap="innerHTML">
+```
+
+This replaces the entire inner HTML with the server-rendered roster table every 10 seconds.
+
+## Adding Photos
+
+To add photos for a unit:
+
+1. Create a directory: `data/photos/{unit_id}/`
+2. Add image files (jpg, jpeg, png, gif, webp)
+3. Photos will automatically appear on the unit detail page
+4. Most recent file becomes the primary photo
+
+Example:
+```bash
+mkdir -p data/photos/BE1234
+cp my-photo.jpg data/photos/BE1234/deployment-site.jpg
+```
+
+## Customization
+
+### Adding New Pages
+
+1. Create a template in `templates/`
+2. Add a route in `backend/main.py`:
+
+```python
+@app.get("/my-page", response_class=HTMLResponse)
+async def my_page(request: Request):
+    return templates.TemplateResponse("my_page.html", {"request": request})
+```
+
+3. Add a navigation link in `templates/base.html`
+
+### Adding New API Endpoints
+
+1. Create a router file in `backend/routers/`
+2. Include the router in `backend/main.py`:
+
+```python
+from backend.routers import my_router
+app.include_router(my_router.router)
+```
+
+## Docker Deployment
+
+The project includes Docker configuration:
+
+```bash
+docker-compose up
+```
+
+This will start the application on port 8001 (configured to avoid conflicts with port 8000).
+
+## Next Steps
+
+1. **Replace Mock Data**: Update `backend/services/snapshot.py` with real Series3 emitter logic
+2. **Database Integration**: The existing SQLAlchemy models can store historical data
+3. **Photo Upload**: Add a form to upload photos from the UI
+4. **Projects Management**: Implement the "Projects" page
+5. **Settings**: Add user preferences and configuration
+6. **Event History**: Populate the History tab with real event data
+7. **Authentication**: Add user login/authentication if needed
+8. **Notifications**: Add real-time alerts for critical status changes
+
+## Development Tips
+
+- The `--reload` flag auto-reloads the server when code changes
+- Use browser DevTools to debug HTMX requests (look for `HX-Request` headers)
+- Check `/docs` for interactive API documentation (Swagger UI)
+- Dark mode state persists in browser localStorage
+- All timestamps are currently mock data - replace with real values
+
+## License
+
+See main README.md for license information.
diff --git a/database.py b/backend/database.py
similarity index 100%
rename from database.py
rename to backend/database.py
diff --git a/backend/main.py b/backend/main.py
new file mode 100644
index 0000000..9e75d26
--- /dev/null
+++ b/backend/main.py
@@ -0,0 +1,108 @@
+from fastapi import FastAPI, Request
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from fastapi.responses import HTMLResponse
+
+from backend.database import engine, Base
+from backend.routers import roster, units, photos
+from backend.services.snapshot import emit_status_snapshot
+
+# Create database tables
+Base.metadata.create_all(bind=engine)
+
+# Initialize FastAPI app
+app = FastAPI(
+    title="Seismo Fleet Manager",
+    description="Backend API for managing seismograph fleet status",
+    version="0.1.0"
+)
+
+# Configure CORS
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Mount static files
+app.mount("/static", StaticFiles(directory="backend/static"), name="static")
+
+# Setup Jinja2 templates
+templates = Jinja2Templates(directory="templates")
+
+# Include API routers
+app.include_router(roster.router)
+app.include_router(units.router)
+app.include_router(photos.router)
+
+
+# Legacy routes from the original backend
+from backend import routes as legacy_routes
+app.include_router(legacy_routes.router)
+
+
+# HTML page routes
+@app.get("/", response_class=HTMLResponse)
+async def dashboard(request: Request):
+    """Dashboard home page"""
+    return templates.TemplateResponse("dashboard.html", {"request": request})
+
+
+@app.get("/roster", response_class=HTMLResponse)
+async def roster_page(request: Request):
+    """Fleet roster page"""
+    return templates.TemplateResponse("roster.html", {"request": request})
+
+
+@app.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
+    })
+
+
+@app.get("/partials/roster-table", response_class=HTMLResponse)
+async def roster_table_partial(request: Request):
+    """Partial template for roster table (HTMX)"""
+    from datetime import datetime
+    snapshot = emit_status_snapshot()
+
+    units_list = []
+    for unit_id, unit_data in snapshot["units"].items():
+        units_list.append({
+            "id": unit_id,
+            "status": unit_data["status"],
+            "age": unit_data["age"],
+            "last_seen": unit_data["last"],
+            "deployed": unit_data["deployed"],
+            "note": unit_data.get("note", ""),
+        })
+
+    # Sort by status priority (Missing > Pending > OK) then by ID
+    status_priority = {"Missing": 0, "Pending": 1, "OK": 2}
+    units_list.sort(key=lambda x: (status_priority.get(x["status"], 3), x["id"]))
+
+    return templates.TemplateResponse("partials/roster_table.html", {
+        "request": request,
+        "units": units_list,
+        "timestamp": datetime.now().strftime("%H:%M:%S")
+    })
+
+
+@app.get("/health")
+def health_check():
+    """Health check endpoint"""
+    return {
+        "message": "Seismo Fleet Manager v0.1",
+        "status": "running"
+    }
+
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8001)
diff --git a/models.py b/backend/models.py
similarity index 94%
rename from models.py
rename to backend/models.py
index 9ae42c1..64490fc 100644
--- a/models.py
+++ b/backend/models.py
@@ -1,6 +1,6 @@
 from sqlalchemy import Column, String, DateTime
 from datetime import datetime
-from database import Base
+from backend.database import Base
 
 
 class Emitter(Base):
diff --git a/backend/routers/photos.py b/backend/routers/photos.py
new file mode 100644
index 0000000..0d083bc
--- /dev/null
+++ b/backend/routers/photos.py
@@ -0,0 +1,64 @@
+from fastapi import APIRouter, HTTPException
+from fastapi.responses import FileResponse
+from pathlib import Path
+from typing import List
+import os
+
+router = APIRouter(prefix="/api", tags=["photos"])
+
+PHOTOS_BASE_DIR = Path("data/photos")
+
+
+@router.get("/unit/{unit_id}/photos")
+def get_unit_photos(unit_id: str):
+    """
+    Reads /data/photos/<unit_id>/ and returns list of image filenames.
+    Primary photo = most recent file.
+    """
+    unit_photo_dir = PHOTOS_BASE_DIR / unit_id
+
+    if not unit_photo_dir.exists():
+        # Return empty list if no photos directory exists
+        return {
+            "unit_id": unit_id,
+            "photos": [],
+            "primary_photo": None
+        }
+
+    # Get all image files
+    image_extensions = {".jpg", ".jpeg", ".png", ".gif", ".webp"}
+    photos = []
+
+    for file_path in unit_photo_dir.iterdir():
+        if file_path.is_file() and file_path.suffix.lower() in image_extensions:
+            photos.append({
+                "filename": file_path.name,
+                "path": f"/api/unit/{unit_id}/photo/{file_path.name}",
+                "modified": file_path.stat().st_mtime
+            })
+
+    # Sort by modification time (most recent first)
+    photos.sort(key=lambda x: x["modified"], reverse=True)
+
+    # Primary photo is the most recent
+    primary_photo = photos[0]["filename"] if photos else None
+
+    return {
+        "unit_id": unit_id,
+        "photos": [p["filename"] for p in photos],
+        "primary_photo": primary_photo,
+        "photo_urls": [p["path"] for p in photos]
+    }
+
+
+@router.get("/unit/{unit_id}/photo/{filename}")
+def get_photo(unit_id: str, filename: str):
+    """
+    Serves a specific photo file.
+    """
+    file_path = PHOTOS_BASE_DIR / unit_id / filename
+
+    if not file_path.exists() or not file_path.is_file():
+        raise HTTPException(status_code=404, detail="Photo not found")
+
+    return FileResponse(file_path)
diff --git a/backend/routers/roster.py b/backend/routers/roster.py
new file mode 100644
index 0000000..d2792e1
--- /dev/null
+++ b/backend/routers/roster.py
@@ -0,0 +1,46 @@
+from fastapi import APIRouter, Depends
+from sqlalchemy.orm import Session
+from datetime import datetime, timedelta
+from typing import Dict, Any
+import random
+
+from backend.database import get_db
+from backend.services.snapshot import emit_status_snapshot
+
+router = APIRouter(prefix="/api", tags=["roster"])
+
+
+@router.get("/status-snapshot")
+def get_status_snapshot(db: Session = Depends(get_db)):
+    """
+    Calls emit_status_snapshot() to get current fleet status.
+    This will be replaced with real Series3 emitter logic later.
+    """
+    return emit_status_snapshot()
+
+
+@router.get("/roster")
+def get_roster(db: Session = Depends(get_db)):
+    """
+    Returns list of units with their metadata and status.
+    Uses mock data for now.
+    """
+    snapshot = emit_status_snapshot()
+    units_list = []
+
+    for unit_id, unit_data in snapshot["units"].items():
+        units_list.append({
+            "id": unit_id,
+            "status": unit_data["status"],
+            "age": unit_data["age"],
+            "last_seen": unit_data["last"],
+            "deployed": unit_data["deployed"],
+            "note": unit_data.get("note", ""),
+            "last_file": unit_data.get("fname", "")
+        })
+
+    # Sort by status priority (Missing > Pending > OK) then by ID
+    status_priority = {"Missing": 0, "Pending": 1, "OK": 2}
+    units_list.sort(key=lambda x: (status_priority.get(x["status"], 3), x["id"]))
+
+    return {"units": units_list}
diff --git a/backend/routers/units.py b/backend/routers/units.py
new file mode 100644
index 0000000..654fa2c
--- /dev/null
+++ b/backend/routers/units.py
@@ -0,0 +1,44 @@
+from fastapi import APIRouter, Depends, HTTPException
+from sqlalchemy.orm import Session
+from datetime import datetime
+from typing import Dict, Any
+
+from backend.database import get_db
+from backend.services.snapshot import emit_status_snapshot
+
+router = APIRouter(prefix="/api", tags=["units"])
+
+
+@router.get("/unit/{unit_id}")
+def get_unit_detail(unit_id: str, db: Session = Depends(get_db)):
+    """
+    Returns detailed data for a single unit.
+    """
+    snapshot = emit_status_snapshot()
+
+    if unit_id not in snapshot["units"]:
+        raise HTTPException(status_code=404, detail=f"Unit {unit_id} not found")
+
+    unit_data = snapshot["units"][unit_id]
+
+    # Mock coordinates for now (will be replaced with real data)
+    mock_coords = {
+        "BE1234": {"lat": 37.7749, "lon": -122.4194, "location": "San Francisco, CA"},
+        "BE5678": {"lat": 34.0522, "lon": -118.2437, "location": "Los Angeles, CA"},
+        "BE9012": {"lat": 40.7128, "lon": -74.0060, "location": "New York, NY"},
+        "BE3456": {"lat": 41.8781, "lon": -87.6298, "location": "Chicago, IL"},
+        "BE7890": {"lat": 29.7604, "lon": -95.3698, "location": "Houston, TX"},
+    }
+
+    coords = mock_coords.get(unit_id, {"lat": 39.8283, "lon": -98.5795, "location": "Unknown"})
+
+    return {
+        "id": unit_id,
+        "status": unit_data["status"],
+        "age": unit_data["age"],
+        "last_seen": unit_data["last"],
+        "last_file": unit_data.get("fname", ""),
+        "deployed": unit_data["deployed"],
+        "note": unit_data.get("note", ""),
+        "coordinates": coords
+    }
diff --git a/routes.py b/backend/routes.py
similarity index 96%
rename from routes.py
rename to backend/routes.py
index 4cdb4fa..e7e34da 100644
--- a/routes.py
+++ b/backend/routes.py
@@ -4,8 +4,8 @@ from pydantic import BaseModel
 from datetime import datetime
 from typing import Optional, List
 
-from database import get_db
-from models import Emitter
+from backend.database import get_db
+from backend.models import Emitter
 
 router = APIRouter()
 
diff --git a/backend/services/snapshot.py b/backend/services/snapshot.py
new file mode 100644
index 0000000..8d7e38d
--- /dev/null
+++ b/backend/services/snapshot.py
@@ -0,0 +1,96 @@
+"""
+Mock implementation of emit_status_snapshot().
+This will be replaced with real Series3 emitter logic by the user.
+"""
+
+from datetime import datetime, timedelta
+import random
+
+
+def emit_status_snapshot():
+    """
+    Mock function that returns fleet status snapshot.
+    In production, this will call the real Series3 emitter logic.
+
+    Returns a dictionary with unit statuses, ages, deployment status, etc.
+    """
+
+    # Mock data for demonstration
+    mock_units = {
+        "BE1234": {
+            "status": "OK",
+            "age": "1h 12m",
+            "last": "2025-11-22 12:32:10",
+            "fname": "evt_1234.mlg",
+            "deployed": True,
+            "note": "Bridge monitoring project - Golden Gate"
+        },
+        "BE5678": {
+            "status": "Pending",
+            "age": "2h 45m",
+            "last": "2025-11-22 11:05:33",
+            "fname": "evt_5678.mlg",
+            "deployed": True,
+            "note": "Dam structural analysis"
+        },
+        "BE9012": {
+            "status": "Missing",
+            "age": "5d 3h",
+            "last": "2025-11-17 09:15:00",
+            "fname": "evt_9012.mlg",
+            "deployed": True,
+            "note": "Tunnel excavation site"
+        },
+        "BE3456": {
+            "status": "OK",
+            "age": "30m",
+            "last": "2025-11-22 13:20:45",
+            "fname": "evt_3456.mlg",
+            "deployed": False,
+            "note": "Benched for maintenance"
+        },
+        "BE7890": {
+            "status": "OK",
+            "age": "15m",
+            "last": "2025-11-22 13:35:22",
+            "fname": "evt_7890.mlg",
+            "deployed": True,
+            "note": "Pipeline monitoring"
+        },
+        "BE2468": {
+            "status": "Pending",
+            "age": "4h 20m",
+            "last": "2025-11-22 09:30:15",
+            "fname": "evt_2468.mlg",
+            "deployed": True,
+            "note": "Building foundation survey"
+        },
+        "BE1357": {
+            "status": "OK",
+            "age": "45m",
+            "last": "2025-11-22 13:05:00",
+            "fname": "evt_1357.mlg",
+            "deployed": False,
+            "note": "Awaiting deployment"
+        },
+        "BE8642": {
+            "status": "Missing",
+            "age": "2d 12h",
+            "last": "2025-11-20 01:30:00",
+            "fname": "evt_8642.mlg",
+            "deployed": True,
+            "note": "Offshore platform - comms issue suspected"
+        }
+    }
+
+    return {
+        "units": mock_units,
+        "timestamp": datetime.now().isoformat(),
+        "total_units": len(mock_units),
+        "deployed_units": sum(1 for u in mock_units.values() if u["deployed"]),
+        "status_summary": {
+            "OK": sum(1 for u in mock_units.values() if u["status"] == "OK"),
+            "Pending": sum(1 for u in mock_units.values() if u["status"] == "Pending"),
+            "Missing": sum(1 for u in mock_units.values() if u["status"] == "Missing")
+        }
+    }
diff --git a/backend/static/style.css b/backend/static/style.css
new file mode 100644
index 0000000..e05260a
--- /dev/null
+++ b/backend/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);
+}
diff --git a/requirements.txt b/requirements.txt
index 4ab590c..f526daf 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -3,3 +3,5 @@ uvicorn[standard]==0.24.0
 sqlalchemy==2.0.23
 pydantic==2.5.0
 python-multipart==0.0.6
+jinja2==3.1.2
+aiofiles==23.2.1
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..155f6ac
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% 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>
+
+    <!-- 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">
+    <div class="flex h-screen overflow-hidden">
+        <!-- Sidebar -->
+        <aside class="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>
+
+            <!-- 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>
+                    Fleet Roster
+                </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="#" 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="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 -->
+            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
+                <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>
+            </div>
+        </aside>
+
+        <!-- Main content -->
+        <main class="flex-1 overflow-y-auto">
+            <div class="p-8">
+                {% block content %}{% endblock %}
+            </div>
+        </main>
+    </div>
+
+    <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');
+            }
+        }
+
+        // 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');
+        }
+    </script>
+
+    {% block extra_scripts %}{% endblock %}
+</body>
+</html>
diff --git a/templates/dashboard.html b/templates/dashboard.html
new file mode 100644
index 0000000..3430a4f
--- /dev/null
+++ b/templates/dashboard.html
@@ -0,0 +1,178 @@
+{% extends "base.html" %}
+
+{% block title %}Dashboard - Seismo Fleet Manager{% endblock %}
+
+{% block content %}
+<div class="mb-8">
+    <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>
+
+<!-- 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">
+            <div class="flex items-center justify-between mb-4">
+                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Fleet Summary</h2>
+                <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>
+            </div>
+            <div class="space-y-3">
+                <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-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-2xl font-bold text-blue-600 dark:text-blue-400">--</span>
+                </div>
+                <div class="border-t border-gray-200 dark:border-gray-700 pt-3 mt-3">
+                    <div class="flex justify-between items-center mb-2">
+                        <div class="flex items-center">
+                            <span class="w-3 h-3 rounded-full bg-green-500 mr-2"></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">
+                        <div class="flex items-center">
+                            <span class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></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">
+                        <div class="flex items-center">
+                            <span class="w-3 h-3 rounded-full bg-red-500 mr-2"></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">
+            <div class="flex items-center justify-between mb-4">
+                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Alerts</h2>
+                <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>
+            </div>
+            <div id="alerts-list" class="space-y-3">
+                <p class="text-sm text-gray-500 dark:text-gray-400">Loading alerts...</p>
+            </div>
+        </div>
+
+        <!-- Recent Photos Card -->
+        <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
+            <div class="flex items-center justify-between mb-4">
+                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Photos</h2>
+                <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="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>
+            </div>
+            <div class="text-center text-gray-500 dark:text-gray-400">
+                <svg class="w-16 h-16 mx-auto mb-2 opacity-50" 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>
+                <p class="text-sm">No recent photos</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Quick Access to Fleet Roster -->
+    <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
+        <div class="flex items-center justify-between mb-4">
+            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Fleet Status</h2>
+            <a href="/roster" class="text-seismo-orange hover:text-seismo-burgundy font-medium flex items-center">
+                View All
+                <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>
+        </div>
+        <div id="fleet-preview" class="space-y-2">
+            <p class="text-gray-500 dark:text-gray-400">Loading fleet data...</p>
+        </div>
+    </div>
+</div>
+
+<script>
+function updateDashboard(event) {
+    try {
+        const data = JSON.parse(event.detail.xhr.response);
+
+        // Update fleet summary
+        document.getElementById('total-units').textContent = data.total_units || 0;
+        document.getElementById('deployed-units').textContent = data.deployed_units || 0;
+        document.getElementById('status-ok').textContent = data.status_summary.OK || 0;
+        document.getElementById('status-pending').textContent = data.status_summary.Pending || 0;
+        document.getElementById('status-missing').textContent = data.status_summary.Missing || 0;
+
+        // Update alerts list
+        const alertsList = document.getElementById('alerts-list');
+        const missingUnits = Object.entries(data.units).filter(([id, unit]) => unit.status === 'Missing');
+        const pendingUnits = Object.entries(data.units).filter(([id, unit]) => unit.status === 'Pending');
+
+        if (missingUnits.length === 0 && pendingUnits.length === 0) {
+            alertsList.innerHTML = '<p class="text-sm text-green-600 dark:text-green-400">✓ All units reporting normally</p>';
+        } else {
+            let alertsHtml = '';
+            missingUnits.slice(0, 3).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>
+                `;
+            });
+            pendingUnits.slice(0, 2).forEach(([id, unit]) => {
+                alertsHtml += `
+                    <div class="flex items-start space-x-2 text-sm">
+                        <span class="w-2 h-2 rounded-full bg-yellow-500 mt-1.5"></span>
+                        <div>
+                            <a href="/unit/${id}" class="font-medium text-yellow-600 dark:text-yellow-400 hover:underline">${id}</a>
+                            <p class="text-gray-600 dark:text-gray-400">Pending for ${unit.age}</p>
+                        </div>
+                    </div>
+                `;
+            });
+            alertsList.innerHTML = alertsHtml;
+        }
+
+        // Update fleet preview
+        const fleetPreview = document.getElementById('fleet-preview');
+        const unitsList = Object.entries(data.units).slice(0, 5);
+        let previewHtml = '';
+
+        unitsList.forEach(([id, unit]) => {
+            const statusColor = unit.status === 'OK' ? 'green' : unit.status === 'Pending' ? 'yellow' : 'red';
+            const deployedDot = unit.deployed ? '<span class="w-2 h-2 rounded-full bg-blue-500"></span>' : '';
+
+            previewHtml += `
+                <a href="/unit/${id}" class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
+                    <div class="flex items-center space-x-3">
+                        <span class="w-3 h-3 rounded-full bg-${statusColor}-500"></span>
+                        ${deployedDot}
+                        <span class="font-medium">${id}</span>
+                    </div>
+                    <span class="text-sm text-gray-500 dark:text-gray-400">${unit.age}</span>
+                </a>
+            `;
+        });
+
+        fleetPreview.innerHTML = previewHtml;
+
+    } catch (error) {
+        console.error('Error updating dashboard:', error);
+    }
+}
+</script>
+{% endblock %}
diff --git a/templates/partials/roster_table.html b/templates/partials/roster_table.html
new file mode 100644
index 0000000..1b33fb3
--- /dev/null
+++ b/templates/partials/roster_table.html
@@ -0,0 +1,87 @@
+<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">
+                    Status
+                </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">
+                    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">
+                    Last Seen
+                </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">
+                    Age
+                </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">
+            {% 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 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">
+                    <div class="text-sm font-medium text-gray-900 dark:text-white">{{ unit.id }}</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">
+                    <a href="/unit/{{ unit.id }}" class="text-seismo-orange hover:text-seismo-burgundy inline-flex items-center">
+                        View
+                        <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>
+                </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>
+
+<script>
+    // Update timestamp
+    document.getElementById('last-updated').textContent = new Date().toLocaleTimeString();
+</script>
diff --git a/templates/roster.html b/templates/roster.html
new file mode 100644
index 0000000..c26f2f5
--- /dev/null
+++ b/templates/roster.html
@@ -0,0 +1,29 @@
+{% extends "base.html" %}
+
+{% block title %}Fleet Roster - Seismo Fleet Manager{% endblock %}
+
+{% block content %}
+<div class="mb-8">
+    <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Fleet Roster</h1>
+    <p class="text-gray-600 dark:text-gray-400 mt-1">Real-time status of all seismograph units</p>
+</div>
+
+<!-- Auto-refresh roster every 10 seconds -->
+<div hx-get="/partials/roster-table" hx-trigger="load, every 10s" hx-swap="innerHTML">
+    <!-- Initial loading state -->
+    <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
+        <div class="flex items-center justify-center py-12">
+            <div class="animate-pulse flex space-x-4">
+                <div class="flex-1 space-y-4 py-1">
+                    <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4"></div>
+                    <div class="space-y-2">
+                        <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded"></div>
+                        <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-5/6"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endblock %}
diff --git a/templates/unit_detail.html b/templates/unit_detail.html
new file mode 100644
index 0000000..193c0f0
--- /dev/null
+++ b/templates/unit_detail.html
@@ -0,0 +1,268 @@
+{% extends "base.html" %}
+
+{% block title %}Unit {{ unit_id }} - Seismo Fleet Manager{% endblock %}
+
+{% block content %}
+<div class="mb-6">
+    <a href="/roster" class="text-seismo-orange hover:text-seismo-burgundy inline-flex items-center mb-4">
+        <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 Fleet Roster
+    </a>
+    <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Unit {{ unit_id }}</h1>
+</div>
+
+<!-- Auto-refresh unit data -->
+<div hx-get="/api/unit/{{ unit_id }}" hx-trigger="load, every 10s" hx-swap="none" hx-on::after-request="updateUnitData(event)">
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Left Column: Unit Info -->
+        <div class="space-y-6">
+            <!-- Status Card -->
+            <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
+                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Unit Status</h2>
+                <div class="space-y-4">
+                    <div class="flex items-center justify-between">
+                        <span class="text-gray-600 dark:text-gray-400">Status</span>
+                        <div class="flex items-center space-x-2">
+                            <span id="status-indicator" class="w-3 h-3 rounded-full bg-gray-400"></span>
+                            <span id="status-text" class="font-semibold">Loading...</span>
+                        </div>
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <span class="text-gray-600 dark:text-gray-400">Deployed</span>
+                        <span id="deployed-status" class="font-semibold">--</span>
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <span class="text-gray-600 dark:text-gray-400">Age</span>
+                        <span id="age-value" class="font-semibold">--</span>
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <span class="text-gray-600 dark:text-gray-400">Last Seen</span>
+                        <span id="last-seen-value" class="font-semibold">--</span>
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <span class="text-gray-600 dark:text-gray-400">Last File</span>
+                        <span id="last-file-value" class="font-mono text-sm">--</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Notes Card -->
+            <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
+                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Notes</h2>
+                <div id="notes-content" class="text-gray-600 dark:text-gray-400">
+                    Loading...
+                </div>
+            </div>
+
+            <!-- Metadata Card -->
+            <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
+                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Edit Metadata</h2>
+                <form class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                            Unit Note
+                        </label>
+                        <textarea
+                            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 focus:ring-2 focus:ring-seismo-orange focus:border-transparent"
+                            rows="3"
+                            placeholder="Enter notes about this unit...">
+                        </textarea>
+                    </div>
+                    <button
+                        type="button"
+                        class="w-full px-4 py-2 bg-seismo-orange hover:bg-seismo-burgundy text-white rounded-lg font-medium transition-colors"
+                        onclick="alert('Mock: Save functionality not implemented')">
+                        Save Changes
+                    </button>
+                </form>
+            </div>
+        </div>
+
+        <!-- Right Column: Tabbed Interface -->
+        <div class="space-y-6">
+            <!-- Tabs -->
+            <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 overflow-hidden">
+                <div class="border-b border-gray-200 dark:border-gray-700">
+                    <nav class="flex -mb-px">
+                        <button
+                            onclick="switchTab('photos')"
+                            id="tab-photos"
+                            class="tab-button flex-1 py-4 px-6 text-center border-b-2 font-medium text-sm transition-colors border-seismo-orange text-seismo-orange">
+                            Photos
+                        </button>
+                        <button
+                            onclick="switchTab('map')"
+                            id="tab-map"
+                            class="tab-button flex-1 py-4 px-6 text-center border-b-2 font-medium text-sm transition-colors border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
+                            Map
+                        </button>
+                        <button
+                            onclick="switchTab('history')"
+                            id="tab-history"
+                            class="tab-button flex-1 py-4 px-6 text-center border-b-2 font-medium text-sm transition-colors border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
+                            History
+                        </button>
+                    </nav>
+                </div>
+
+                <!-- Tab Content -->
+                <div class="p-6">
+                    <!-- Photos Tab -->
+                    <div id="content-photos" class="tab-content">
+                        <div hx-get="/api/unit/{{ unit_id }}/photos" hx-trigger="load" hx-swap="none" hx-on::after-request="updatePhotos(event)">
+                            <div id="photos-container" class="text-center">
+                                <div class="animate-pulse">
+                                    <div class="h-64 bg-gray-200 dark:bg-gray-700 rounded-lg mb-4"></div>
+                                    <div class="grid grid-cols-4 gap-2">
+                                        <div class="h-20 bg-gray-200 dark:bg-gray-700 rounded"></div>
+                                        <div class="h-20 bg-gray-200 dark:bg-gray-700 rounded"></div>
+                                        <div class="h-20 bg-gray-200 dark:bg-gray-700 rounded"></div>
+                                        <div class="h-20 bg-gray-200 dark:bg-gray-700 rounded"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Map Tab -->
+                    <div id="content-map" class="tab-content hidden">
+                        <div id="map" style="height: 500px; width: 100%;" class="rounded-lg"></div>
+                        <div id="location-info" class="mt-4 text-sm text-gray-600 dark:text-gray-400">
+                            <p><strong>Location:</strong> <span id="location-name">Loading...</span></p>
+                            <p><strong>Coordinates:</strong> <span id="coordinates">--</span></p>
+                        </div>
+                    </div>
+
+                    <!-- History Tab -->
+                    <div id="content-history" class="tab-content hidden">
+                        <div class="text-center text-gray-500 dark:text-gray-400 py-12">
+                            <svg class="w-16 h-16 mx-auto mb-4 opacity-50" 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>
+                            <p class="text-lg font-medium">Event History</p>
+                            <p class="text-sm mt-2">Event history will be displayed here</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+let unitData = null;
+let map = null;
+let marker = null;
+
+function switchTab(tabName) {
+    // Update tab buttons
+    document.querySelectorAll('.tab-button').forEach(btn => {
+        btn.classList.remove('border-seismo-orange', 'text-seismo-orange');
+        btn.classList.add('border-transparent', 'text-gray-500', 'dark:text-gray-400');
+    });
+    document.getElementById(`tab-${tabName}`).classList.remove('border-transparent', 'text-gray-500', 'dark:text-gray-400');
+    document.getElementById(`tab-${tabName}`).classList.add('border-seismo-orange', 'text-seismo-orange');
+
+    // Update tab content
+    document.querySelectorAll('.tab-content').forEach(content => {
+        content.classList.add('hidden');
+    });
+    document.getElementById(`content-${tabName}`).classList.remove('hidden');
+
+    // Initialize map if switching to map tab
+    if (tabName === 'map' && !map && unitData) {
+        setTimeout(() => initMap(), 100);
+    }
+}
+
+function updateUnitData(event) {
+    try {
+        unitData = JSON.parse(event.detail.xhr.response);
+
+        // Update status
+        const statusIndicator = document.getElementById('status-indicator');
+        const statusText = document.getElementById('status-text');
+        const statusColors = {
+            'OK': 'bg-green-500',
+            'Pending': 'bg-yellow-500',
+            'Missing': 'bg-red-500'
+        };
+        statusIndicator.className = `w-3 h-3 rounded-full ${statusColors[unitData.status] || 'bg-gray-400'}`;
+        statusText.textContent = unitData.status;
+        statusText.className = `font-semibold ${unitData.status === 'OK' ? 'text-green-600 dark:text-green-400' : unitData.status === 'Pending' ? 'text-yellow-600 dark:text-yellow-400' : 'text-red-600 dark:text-red-400'}`;
+
+        // Update other fields
+        document.getElementById('deployed-status').textContent = unitData.deployed ? '✓ Deployed' : '✗ Benched';
+        document.getElementById('age-value').textContent = unitData.age;
+        document.getElementById('last-seen-value').textContent = unitData.last_seen;
+        document.getElementById('last-file-value').textContent = unitData.last_file;
+        document.getElementById('notes-content').textContent = unitData.note || 'No notes available';
+
+        // Update location info
+        if (unitData.coordinates) {
+            document.getElementById('location-name').textContent = unitData.coordinates.location;
+            document.getElementById('coordinates').textContent = `${unitData.coordinates.lat.toFixed(4)}, ${unitData.coordinates.lon.toFixed(4)}`;
+        }
+
+    } catch (error) {
+        console.error('Error updating unit data:', error);
+    }
+}
+
+function updatePhotos(event) {
+    try {
+        const data = JSON.parse(event.detail.xhr.response);
+        const container = document.getElementById('photos-container');
+
+        if (data.photos.length === 0) {
+            container.innerHTML = `
+                <div class="text-center text-gray-500 dark:text-gray-400 py-12">
+                    <svg class="w-16 h-16 mx-auto mb-4 opacity-50" 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>
+                    <p class="text-lg font-medium">No Photos Available</p>
+                    <p class="text-sm mt-2">Photos will appear here when uploaded</p>
+                </div>
+            `;
+        } else {
+            let html = `
+                <div class="mb-4">
+                    <img src="${data.photo_urls[0]}" alt="Primary photo" class="w-full h-auto rounded-lg shadow-lg" id="primary-image">
+                </div>
+                <div class="grid grid-cols-4 gap-2">
+            `;
+
+            data.photo_urls.forEach((url, index) => {
+                html += `
+                    <img src="${url}" alt="Photo ${index + 1}"
+                         class="w-full h-20 object-cover rounded cursor-pointer hover:opacity-75 transition-opacity"
+                         onclick="document.getElementById('primary-image').src = this.src">
+                `;
+            });
+
+            html += '</div>';
+            container.innerHTML = html;
+        }
+    } catch (error) {
+        console.error('Error updating photos:', error);
+    }
+}
+
+function initMap() {
+    if (!unitData || !unitData.coordinates) return;
+
+    const coords = unitData.coordinates;
+    map = L.map('map').setView([coords.lat, coords.lon], 13);
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '© OpenStreetMap contributors'
+    }).addTo(map);
+
+    marker = L.marker([coords.lat, coords.lon]).addTo(map)
+        .bindPopup(`<b>${unitData.id}</b><br>${coords.location}`)
+        .openPopup();
+}
+</script>
+{% endblock %}
-- 
2.49.1


From 02a99ea47d9edb73fcf46a9473d5c403db13a7eb Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 24 Nov 2025 23:49:21 +0000
Subject: [PATCH 05/29] Fix Docker configuration for new backend structure

- Update Dockerfile to use backend.main:app instead of main:app
- Change exposed port from 8000 to 8001
- Fix docker-compose.yml port mapping to 8001:8001
- Update healthcheck to use correct port and /health endpoint
- Remove old main.py from root directory

Docker now correctly runs the new frontend + backend structure.
---
 Dockerfile         |  6 +++---
 docker-compose.yml |  6 +++---
 main.py            | 41 -----------------------------------------
 3 files changed, 6 insertions(+), 47 deletions(-)
 delete mode 100644 main.py

diff --git a/Dockerfile b/Dockerfile
index 3533224..d567991 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -13,7 +13,7 @@ RUN pip install --no-cache-dir -r requirements.txt
 COPY . .
 
 # Expose port
-EXPOSE 8000
+EXPOSE 8001
 
-# Run the application
-CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]
+# Run the application using the new backend structure
+CMD ["uvicorn", "backend.main:app", "--host", "0.0.0.0", "--port", "8001"]
diff --git a/docker-compose.yml b/docker-compose.yml
index 6214c26..410d866 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -5,15 +5,15 @@ services:
     build: .
     container_name: seismo-fleet-manager
     ports:
-      - "8001:8000"
+      - "8001:8001"
     volumes:
-      # Persist SQLite database
+      # Persist SQLite database and photos
       - ./data:/app/data
     environment:
       - PYTHONUNBUFFERED=1
     restart: unless-stopped
     healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:8000/"]
+      test: ["CMD", "curl", "-f", "http://localhost:8001/health"]
       interval: 30s
       timeout: 10s
       retries: 3
diff --git a/main.py b/main.py
deleted file mode 100644
index 9458fd8..0000000
--- a/main.py
+++ /dev/null
@@ -1,41 +0,0 @@
-from fastapi import FastAPI
-from fastapi.middleware.cors import CORSMiddleware
-
-from database import engine, Base
-from routes import router
-
-# Create database tables
-Base.metadata.create_all(bind=engine)
-
-# Initialize FastAPI app
-app = FastAPI(
-    title="Seismo Fleet Manager",
-    description="Backend API for managing seismograph fleet status",
-    version="0.1.0"
-)
-
-# Configure CORS (adjust origins as needed for your deployment)
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=["*"],  # In production, specify exact origins
-    allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
-)
-
-# Include API routes
-app.include_router(router)
-
-
-@app.get("/")
-def root():
-    """Root endpoint - health check"""
-    return {
-        "message": "Seismo Fleet Manager API v0.1",
-        "status": "running"
-    }
-
-
-if __name__ == "__main__":
-    import uvicorn
-    uvicorn.run(app, host="0.0.0.0", port=8000)
-- 
2.49.1


From 90ecada35f47c6a3aca2dcc789996250923f1fd6 Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Tue, 2 Dec 2025 06:36:13 +0000
Subject: [PATCH 06/29] v0.1.1 update

---
 CHANGELOG.md                              |  63 +++++++
 README.md                                 | 215 +++++++++++++++-------
 backend/database.py                       |   5 +
 backend/main.py                           |  13 +-
 backend/models.py                         |  23 ++-
 backend/routers/dashboard.py              |  25 +++
 backend/routers/dashboard_tabs.py         |  34 ++++
 backend/routers/roster_edit.py            | 178 ++++++++++++++++++
 backend/routes.py                         |  79 ++++++++
 backend/services/snapshot.py              | 199 +++++++++++---------
 sample_roster.csv                         |   6 +
 templates/base.html                       |   1 +
 templates/dashboard.html                  | 151 +++++++++------
 templates/partials/active_table.html      |  25 +++
 templates/partials/benched_table.html     |  25 +++
 templates/partials/dashboard_active.html  |  23 +++
 templates/partials/dashboard_benched.html |  23 +++
 17 files changed, 867 insertions(+), 221 deletions(-)
 create mode 100644 CHANGELOG.md
 create mode 100644 backend/routers/dashboard.py
 create mode 100644 backend/routers/dashboard_tabs.py
 create mode 100644 backend/routers/roster_edit.py
 create mode 100644 sample_roster.csv
 create mode 100644 templates/partials/active_table.html
 create mode 100644 templates/partials/benched_table.html
 create mode 100644 templates/partials/dashboard_active.html
 create mode 100644 templates/partials/dashboard_benched.html

diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..858c54f
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,63 @@
+# Changelog
+
+All notable changes to Seismo Fleet Manager will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.1] - 2025-12-02
+
+### Added
+- **Roster Editing API**: Full CRUD operations for roster management
+  - `POST /api/roster/add` - Add new units to roster
+  - `POST /api/roster/set-deployed/{unit_id}` - Toggle deployment status
+  - `POST /api/roster/set-retired/{unit_id}` - Toggle retired status
+  - `POST /api/roster/set-note/{unit_id}` - Update unit notes
+- **CSV Import**: Bulk roster import functionality
+  - `POST /api/roster/import-csv` - Import units from CSV file
+  - Support for all roster fields: unit_id, unit_type, deployed, retired, note, project_id, location
+  - Optional update_existing parameter to control duplicate handling
+  - Detailed import summary with added/updated/skipped/error counts
+- **Enhanced Database Models**:
+  - Added `project_id` field to RosterUnit model
+  - Added `location` field to RosterUnit model
+  - Added `last_updated` timestamp tracking
+- **Dashboard Enhancements**:
+  - Separate views for Active, Benched, and Retired units
+  - New endpoints: `/dashboard/active` and `/dashboard/benched`
+
+### Fixed
+- Database session management bug in `emit_status_snapshot()`
+  - Added `get_db_session()` helper function for direct session access
+  - Implemented proper session cleanup with try/finally blocks
+- Database schema synchronization issues
+  - Database now properly recreates when model changes are detected
+
+### Changed
+- Updated RosterUnit model to include additional metadata fields
+- Improved error handling in CSV import with row-level error reporting
+- Enhanced snapshot service to properly manage database connections
+
+### Technical Details
+- All roster editing endpoints use Form data for better HTML form compatibility
+- CSV import uses multipart/form-data for file uploads
+- Boolean fields in CSV accept: 'true', '1', 'yes' (case-insensitive)
+- Database sessions now properly closed to prevent connection leaks
+
+## [0.1.0] - 2024-11-20
+
+### Added
+- Initial release of Seismo Fleet Manager
+- FastAPI-based REST API for fleet management
+- SQLite database with SQLAlchemy ORM
+- Emitter reporting endpoints
+- Basic fleet status monitoring
+- Docker and Docker Compose support
+- Web-based dashboard with HTMX
+- Dark/light mode toggle
+- Interactive maps with Leaflet
+- Photo management per unit
+- Automated status categorization (OK/Pending/Missing)
+
+[0.1.1]: https://github.com/yourusername/seismo-fleet-manager/compare/v0.1.0...v0.1.1
+[0.1.0]: https://github.com/yourusername/seismo-fleet-manager/releases/tag/v0.1.0
diff --git a/README.md b/README.md
index ee96d16..115d204 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,16 @@
-# Seismo Fleet Manager - Backend v0.1
+# Seismo Fleet Manager v0.1.1
 
-Backend API for managing seismograph fleet status. Track multiple seismographs calling in data from remote deployments, monitor their status, and manage your fleet through a unified database.
+Backend API and web interface for managing seismograph fleet status. Track multiple seismographs calling in data from remote deployments, monitor their status, and manage your fleet through a unified database.
 
 ## Features
 
+- **Web Dashboard**: Modern, responsive UI with dark/light mode support
 - **Fleet Monitoring**: Track all seismograph units in one place
+- **Roster Management**: Full CRUD operations via API or CSV import *(New in v0.1.1)*
 - **Status Management**: Automatically mark units as OK, Pending (>12h), or Missing (>24h)
 - **Data Ingestion**: Accept reports from emitter scripts via REST API
+- **Photo Management**: Upload and view photos for each unit
+- **Interactive Maps**: Leaflet-based maps showing unit locations
 - **SQLite Storage**: Lightweight, file-based database for easy deployment
 
 ## Tech Stack
@@ -14,6 +18,10 @@ Backend API for managing seismograph fleet status. Track multiple seismographs c
 - **FastAPI**: Modern, fast web framework
 - **SQLAlchemy**: SQL toolkit and ORM
 - **SQLite**: Lightweight database
+- **HTMX**: Dynamic updates without heavy JavaScript frameworks
+- **TailwindCSS**: Utility-first CSS framework
+- **Leaflet**: Interactive maps
+- **Jinja2**: Server-side templating
 - **uvicorn**: ASGI server
 - **Docker**: Containerization for easy deployment
 
@@ -39,11 +47,14 @@ Backend API for managing seismograph fleet status. Track multiple seismographs c
    docker compose down
    ```
 
-The API will be available at `http://localhost:8000`
+The application will be available at:
+- **Web Interface**: http://localhost:8001
+- **API Documentation**: http://localhost:8001/docs
+- **Health Check**: http://localhost:8001/health
 
 ### Data Persistence
 
-The SQLite database is stored in the `./data` directory, which is mounted as a volume. Your data will persist even if you restart or rebuild the container.
+The SQLite database and photos are stored in the `./data` directory, which is mounted as a volume. Your data will persist even if you restart or rebuild the container.
 
 ## Local Development (Without Docker)
 
@@ -60,65 +71,67 @@ The SQLite database is stored in the `./data` directory, which is mounted as a v
 
 2. **Run the server:**
    ```bash
-   python main.py
+   uvicorn backend.main:app --host 0.0.0.0 --port 8001 --reload
    ```
 
-   Or with auto-reload:
-   ```bash
-   uvicorn main:app --reload
-   ```
-
-The API will be available at `http://localhost:8000`
+The application will be available at http://localhost:8001
 
 ## API Endpoints
 
-### Root
-- **GET** `/` - Health check
+### Web Pages
+- **GET** `/` - Dashboard home page
+- **GET** `/roster` - Fleet roster page
+- **GET** `/unit/{unit_id}` - Unit detail page
 
-### Emitter Report
-- **POST** `/emitters/report`
-- Submit status report from a seismograph unit
-- **Request Body:**
-  ```json
-  {
-    "unit": "SEISMO-001",
-    "unit_type": "series3",
-    "timestamp": "2025-11-20T10:30:00",
-    "file": "event_20251120_103000.dat",
-    "status": "OK"
-  }
+### Fleet Status & Monitoring
+- **GET** `/api/status-snapshot` - Complete fleet status snapshot
+- **GET** `/api/roster` - List of all units with metadata
+- **GET** `/api/unit/{unit_id}` - Detailed unit information
+- **GET** `/health` - Health check endpoint
+
+### Roster Management *(New in v0.1.1)*
+- **POST** `/api/roster/add` - Add new unit to roster
+  ```bash
+  curl -X POST http://localhost:8001/api/roster/add \
+    -F "id=BE1234" \
+    -F "unit_type=series3" \
+    -F "deployed=true" \
+    -F "note=Main site sensor"
   ```
-- **Response:**
-  ```json
-  {
-    "message": "Emitter report received",
-    "unit": "SEISMO-001",
-    "status": "OK"
-  }
+- **POST** `/api/roster/set-deployed/{unit_id}` - Toggle deployment status
+- **POST** `/api/roster/set-retired/{unit_id}` - Toggle retired status
+- **POST** `/api/roster/set-note/{unit_id}` - Update unit notes
+- **POST** `/api/roster/import-csv` - Bulk import from CSV
+  ```bash
+  curl -X POST http://localhost:8001/api/roster/import-csv \
+    -F "file=@roster.csv" \
+    -F "update_existing=true"
   ```
 
-### Fleet Status
-- **GET** `/fleet/status`
-- Retrieve status of all seismograph units
-- **Response:**
-  ```json
-  [
-    {
-      "id": "SEISMO-001",
-      "unit_type": "series3",
-      "last_seen": "2025-11-20T10:30:00",
-      "last_file": "event_20251120_103000.dat",
-      "status": "OK",
-      "notes": null
-    }
-  ]
-  ```
+### CSV Import Format
+Create a CSV file with the following columns (only `unit_id` is required):
+```csv
+unit_id,unit_type,deployed,retired,note,project_id,location
+BE1234,series3,true,false,Primary sensor,PROJ-001,San Francisco CA
+BE5678,series3,true,false,Backup sensor,PROJ-001,Los Angeles CA
+```
+
+See [sample_roster.csv](sample_roster.csv) for a working example.
+
+### Emitter Reporting
+- **POST** `/emitters/report` - Submit status report from a seismograph unit
+- **POST** `/api/series3/heartbeat` - Series3 multi-unit telemetry payload
+- **GET** `/fleet/status` - Retrieve status of all seismograph units (legacy)
+
+### Photo Management
+- **GET** `/api/unit/{unit_id}/photos` - List photos for a unit
+- **GET** `/api/unit/{unit_id}/photo/{filename}` - Serve specific photo file
 
 ## API Documentation
 
 Once running, interactive API documentation is available at:
-- **Swagger UI**: http://localhost:8000/docs
-- **ReDoc**: http://localhost:8000/redoc
+- **Swagger UI**: http://localhost:8001/docs
+- **ReDoc**: http://localhost:8001/redoc
 
 ## Testing the API
 
@@ -126,7 +139,7 @@ Once running, interactive API documentation is available at:
 
 **Submit a report:**
 ```bash
-curl -X POST http://localhost:8000/emitters/report \
+curl -X POST http://localhost:8001/emitters/report \
   -H "Content-Type: application/json" \
   -d '{
     "unit": "SEISMO-001",
@@ -139,7 +152,14 @@ curl -X POST http://localhost:8000/emitters/report \
 
 **Get fleet status:**
 ```bash
-curl http://localhost:8000/fleet/status
+curl http://localhost:8001/api/roster
+```
+
+**Import roster from CSV:**
+```bash
+curl -X POST http://localhost:8001/api/roster/import-csv \
+  -F "file=@sample_roster.csv" \
+  -F "update_existing=true"
 ```
 
 ### Using Python
@@ -150,7 +170,7 @@ from datetime import datetime
 
 # Submit report
 response = requests.post(
-    "http://localhost:8000/emitters/report",
+    "http://localhost:8001/emitters/report",
     json={
         "unit": "SEISMO-001",
         "unit_type": "series3",
@@ -162,13 +182,37 @@ response = requests.post(
 print(response.json())
 
 # Get fleet status
-response = requests.get("http://localhost:8000/fleet/status")
+response = requests.get("http://localhost:8001/api/roster")
+print(response.json())
+
+# Import CSV
+with open('roster.csv', 'rb') as f:
+    files = {'file': f}
+    data = {'update_existing': 'true'}
+    response = requests.post(
+        "http://localhost:8001/api/roster/import-csv",
+        files=files,
+        data=data
+    )
 print(response.json())
 ```
 
 ## Data Model
 
-### Emitters Table
+### RosterUnit Table (Your Fleet Roster)
+
+| Field | Type | Description |
+|-------|------|-------------|
+| id | string | Unit identifier (primary key) |
+| unit_type | string | Type of seismograph (default: "series3") |
+| deployed | boolean | Whether unit is deployed in field |
+| retired | boolean | Whether unit is retired from service |
+| note | string | Notes about the unit |
+| project_id | string | Associated project identifier |
+| location | string | Deployment location description |
+| last_updated | datetime | Last modification timestamp |
+
+### Emitter Table (Device Check-ins)
 
 | Field | Type | Description |
 |-------|------|-------------|
@@ -183,15 +227,34 @@ print(response.json())
 
 ```
 seismo-fleet-manager/
-├── main.py              # FastAPI app entry point
-├── database.py          # SQLAlchemy database configuration
-├── models.py            # Database models
-├── routes.py            # API endpoints
-├── requirements.txt     # Python dependencies
-├── Dockerfile           # Docker container definition
-├── docker-compose.yml   # Docker Compose configuration
-├── .dockerignore        # Docker ignore rules
-└── data/                # SQLite database directory (created at runtime)
+├── backend/
+│   ├── main.py              # FastAPI app entry point
+│   ├── database.py          # SQLAlchemy database configuration
+│   ├── models.py            # Database models (RosterUnit, Emitter)
+│   ├── routes.py            # Legacy API endpoints
+│   ├── routers/             # Modular API routers
+│   │   ├── roster.py        # Fleet status endpoints
+│   │   ├── roster_edit.py   # Roster management & CSV import
+│   │   ├── units.py         # Unit detail endpoints
+│   │   ├── photos.py        # Photo management
+│   │   ├── dashboard.py     # Dashboard partials
+│   │   └── dashboard_tabs.py # Dashboard tab endpoints
+│   ├── services/
+│   │   └── snapshot.py      # Fleet status snapshot logic
+│   └── static/              # Static assets (CSS, etc.)
+├── templates/               # Jinja2 HTML templates
+│   ├── base.html            # Base layout with sidebar
+│   ├── dashboard.html       # Main dashboard
+│   ├── roster.html          # Fleet roster table
+│   ├── unit_detail.html     # Unit detail page
+│   └── partials/            # HTMX partial templates
+├── data/                    # SQLite database & photos (persisted)
+├── requirements.txt         # Python dependencies
+├── Dockerfile               # Docker container definition
+├── docker-compose.yml       # Docker Compose configuration
+├── CHANGELOG.md             # Version history
+├── FRONTEND_README.md       # Frontend documentation
+└── README.md                # This file
 ```
 
 ## Docker Commands
@@ -221,6 +284,11 @@ docker compose logs -f seismo-backend
 docker compose restart
 ```
 
+**Rebuild and restart:**
+```bash
+docker compose up -d --build
+```
+
 **Stop and remove containers:**
 ```bash
 docker compose down
@@ -231,14 +299,25 @@ docker compose down
 docker compose down -v
 ```
 
+## What's New in v0.1.1
+
+- **Roster Editing API**: Full CRUD operations for managing your fleet roster
+- **CSV Import**: Bulk upload roster data from CSV files
+- **Enhanced Data Model**: Added project_id and location fields to roster
+- **Bug Fixes**: Improved database session management and error handling
+- **Dashboard Improvements**: Separate views for Active, Benched, and Retired units
+
+See [CHANGELOG.md](CHANGELOG.md) for complete version history.
+
 ## Future Enhancements
 
-- Automated status updates based on last_seen timestamps
-- Web-based dashboard for fleet monitoring
 - Email/SMS alerts for missing units
 - Historical data tracking and reporting
 - Multi-user authentication
 - PostgreSQL support for larger deployments
+- Advanced filtering and search
+- Export roster to various formats
+- Automated backup and restore
 
 ## License
 
@@ -246,4 +325,6 @@ MIT
 
 ## Version
 
-0.1.0 - Initial Release
+**Current: 0.1.1** - Roster Management & CSV Import (2025-12-02)
+
+Previous: 0.1.0 - Initial Release (2024-11-20)
diff --git a/backend/database.py b/backend/database.py
index 49ad5d9..7889459 100644
--- a/backend/database.py
+++ b/backend/database.py
@@ -24,3 +24,8 @@ def get_db():
         yield db
     finally:
         db.close()
+
+
+def get_db_session():
+    """Get a database session directly (not as a dependency)"""
+    return SessionLocal()
diff --git a/backend/main.py b/backend/main.py
index 9e75d26..35e5048 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -5,7 +5,7 @@ from fastapi.templating import Jinja2Templates
 from fastapi.responses import HTMLResponse
 
 from backend.database import engine, Base
-from backend.routers import roster, units, photos
+from backend.routers import roster, units, photos, roster_edit, dashboard, dashboard_tabs
 from backend.services.snapshot import emit_status_snapshot
 
 # Create database tables
@@ -15,7 +15,7 @@ Base.metadata.create_all(bind=engine)
 app = FastAPI(
     title="Seismo Fleet Manager",
     description="Backend API for managing seismograph fleet status",
-    version="0.1.0"
+    version="0.1.1"
 )
 
 # Configure CORS
@@ -37,6 +37,10 @@ templates = Jinja2Templates(directory="templates")
 app.include_router(roster.router)
 app.include_router(units.router)
 app.include_router(photos.router)
+app.include_router(roster_edit.router)
+app.include_router(dashboard.router)
+app.include_router(dashboard_tabs.router)
+
 
 
 # Legacy routes from the original backend
@@ -98,8 +102,9 @@ async def roster_table_partial(request: Request):
 def health_check():
     """Health check endpoint"""
     return {
-        "message": "Seismo Fleet Manager v0.1",
-        "status": "running"
+        "message": "Seismo Fleet Manager v0.1.1",
+        "status": "running",
+        "version": "0.1.1"
     }
 
 
diff --git a/backend/models.py b/backend/models.py
index 64490fc..19a0e92 100644
--- a/backend/models.py
+++ b/backend/models.py
@@ -1,18 +1,31 @@
-from sqlalchemy import Column, String, DateTime
+from sqlalchemy import Column, String, DateTime, Boolean, Text
 from datetime import datetime
 from backend.database import Base
 
 
 class Emitter(Base):
-    """Emitter model representing a seismograph unit in the fleet"""
     __tablename__ = "emitters"
 
     id = Column(String, primary_key=True, index=True)
     unit_type = Column(String, nullable=False)
     last_seen = Column(DateTime, default=datetime.utcnow)
     last_file = Column(String, nullable=False)
-    status = Column(String, nullable=False)  # OK, Pending, Missing
+    status = Column(String, nullable=False)
     notes = Column(String, nullable=True)
 
-    def __repr__(self):
-        return f"<Emitter(id={self.id}, type={self.unit_type}, status={self.status})>"
+
+class RosterUnit(Base):
+    """
+    Roster table: represents our *intended assignment* of a unit.
+    This is editable from the GUI.
+    """
+    __tablename__ = "roster"
+
+    id = Column(String, primary_key=True, index=True)
+    unit_type = Column(String, default="series3")
+    deployed = Column(Boolean, default=True)
+    retired = Column(Boolean, default=False)
+    note = Column(String, nullable=True)
+    project_id = Column(String, nullable=True)
+    location = Column(String, nullable=True)
+    last_updated = Column(DateTime, default=datetime.utcnow)
\ No newline at end of file
diff --git a/backend/routers/dashboard.py b/backend/routers/dashboard.py
new file mode 100644
index 0000000..525edec
--- /dev/null
+++ b/backend/routers/dashboard.py
@@ -0,0 +1,25 @@
+from fastapi import APIRouter, Request, Depends
+from fastapi.templating import Jinja2Templates
+
+from backend.services.snapshot import emit_status_snapshot
+
+router = APIRouter()
+templates = Jinja2Templates(directory="templates")
+
+
+@router.get("/dashboard/active")
+def dashboard_active(request: Request):
+    snapshot = emit_status_snapshot()
+    return templates.TemplateResponse(
+        "partials/active_table.html",
+        {"request": request, "units": snapshot["active"]}
+    )
+
+
+@router.get("/dashboard/benched")
+def dashboard_benched(request: Request):
+    snapshot = emit_status_snapshot()
+    return templates.TemplateResponse(
+        "partials/benched_table.html",
+        {"request": request, "units": snapshot["benched"]}
+    )
diff --git a/backend/routers/dashboard_tabs.py b/backend/routers/dashboard_tabs.py
new file mode 100644
index 0000000..607ead2
--- /dev/null
+++ b/backend/routers/dashboard_tabs.py
@@ -0,0 +1,34 @@
+# backend/routers/dashboard_tabs.py
+from fastapi import APIRouter, Depends
+from sqlalchemy.orm import Session
+
+from backend.database import get_db
+from backend.services.snapshot import emit_status_snapshot
+
+router = APIRouter(prefix="/dashboard", tags=["dashboard-tabs"])
+
+@router.get("/active")
+def get_active_units(db: Session = Depends(get_db)):
+    """
+    Return only ACTIVE (deployed) units for dashboard table swap.
+    """
+    snap = emit_status_snapshot()
+    units = {
+        uid: u
+        for uid, u in snap["units"].items()
+        if u["deployed"] is True
+    }
+    return {"units": units}
+
+@router.get("/benched")
+def get_benched_units(db: Session = Depends(get_db)):
+    """
+    Return only BENCHED (not deployed) units for dashboard table swap.
+    """
+    snap = emit_status_snapshot()
+    units = {
+        uid: u
+        for uid, u in snap["units"].items()
+        if u["deployed"] is False
+    }
+    return {"units": units}
diff --git a/backend/routers/roster_edit.py b/backend/routers/roster_edit.py
new file mode 100644
index 0000000..ca598ec
--- /dev/null
+++ b/backend/routers/roster_edit.py
@@ -0,0 +1,178 @@
+from fastapi import APIRouter, Depends, HTTPException, Form, UploadFile, File
+from sqlalchemy.orm import Session
+from datetime import datetime
+import csv
+import io
+
+from backend.database import get_db
+from backend.models import RosterUnit
+
+router = APIRouter(prefix="/api/roster", tags=["roster-edit"])
+
+
+def get_or_create_roster_unit(db: Session, unit_id: str):
+    unit = db.query(RosterUnit).filter(RosterUnit.id == unit_id).first()
+    if not unit:
+        unit = RosterUnit(id=unit_id)
+        db.add(unit)
+        db.commit()
+        db.refresh(unit)
+    return unit
+
+
+@router.post("/add")
+def add_roster_unit(
+    id: str = Form(...),
+    unit_type: str = Form("series3"),
+    deployed: bool = Form(True),
+    note: str = Form(""),
+    db: Session = Depends(get_db)
+):
+    if db.query(RosterUnit).filter(RosterUnit.id == id).first():
+        raise HTTPException(status_code=400, detail="Unit already exists")
+
+    unit = RosterUnit(
+        id=id,
+        unit_type=unit_type,
+        deployed=deployed,
+        note=note,
+        last_updated=datetime.utcnow(),
+    )
+    db.add(unit)
+    db.commit()
+    return {"message": "Unit added", "id": id}
+
+
+@router.post("/set-deployed/{unit_id}")
+def set_deployed(unit_id: str, deployed: bool = Form(...), db: Session = Depends(get_db)):
+    unit = get_or_create_roster_unit(db, unit_id)
+    unit.deployed = deployed
+    unit.last_updated = datetime.utcnow()
+    db.commit()
+    return {"message": "Updated", "id": unit_id, "deployed": deployed}
+
+
+@router.post("/set-retired/{unit_id}")
+def set_retired(unit_id: str, retired: bool = Form(...), db: Session = Depends(get_db)):
+    unit = get_or_create_roster_unit(db, unit_id)
+    unit.retired = retired
+    unit.last_updated = datetime.utcnow()
+    db.commit()
+    return {"message": "Updated", "id": unit_id, "retired": retired}
+
+
+@router.post("/set-note/{unit_id}")
+def set_note(unit_id: str, note: str = Form(""), db: Session = Depends(get_db)):
+    unit = get_or_create_roster_unit(db, unit_id)
+    unit.note = note
+    unit.last_updated = datetime.utcnow()
+    db.commit()
+    return {"message": "Updated", "id": unit_id, "note": note}
+
+
+@router.post("/import-csv")
+async def import_csv(
+    file: UploadFile = File(...),
+    update_existing: bool = Form(True),
+    db: Session = Depends(get_db)
+):
+    """
+    Import roster units from CSV file.
+
+    Expected CSV columns (unit_id is required, others are optional):
+    - unit_id: Unique identifier for the unit
+    - unit_type: Type of unit (default: "series3")
+    - deployed: Boolean for deployment status (default: False)
+    - retired: Boolean for retirement status (default: False)
+    - note: Notes about the unit
+    - project_id: Project identifier
+    - location: Location description
+
+    Args:
+        file: CSV file upload
+        update_existing: If True, update existing units; if False, skip them
+    """
+
+    if not file.filename.endswith('.csv'):
+        raise HTTPException(status_code=400, detail="File must be a CSV")
+
+    # Read file content
+    contents = await file.read()
+    csv_text = contents.decode('utf-8')
+    csv_reader = csv.DictReader(io.StringIO(csv_text))
+
+    results = {
+        "added": [],
+        "updated": [],
+        "skipped": [],
+        "errors": []
+    }
+
+    for row_num, row in enumerate(csv_reader, start=2):  # Start at 2 to account for header
+        try:
+            # Validate required field
+            unit_id = row.get('unit_id', '').strip()
+            if not unit_id:
+                results["errors"].append({
+                    "row": row_num,
+                    "error": "Missing required field: unit_id"
+                })
+                continue
+
+            # Check if unit exists
+            existing_unit = db.query(RosterUnit).filter(RosterUnit.id == unit_id).first()
+
+            if existing_unit:
+                if not update_existing:
+                    results["skipped"].append(unit_id)
+                    continue
+
+                # Update existing unit
+                existing_unit.unit_type = row.get('unit_type', existing_unit.unit_type or 'series3')
+                existing_unit.deployed = row.get('deployed', '').lower() in ('true', '1', 'yes') if row.get('deployed') else existing_unit.deployed
+                existing_unit.retired = row.get('retired', '').lower() in ('true', '1', 'yes') if row.get('retired') else existing_unit.retired
+                existing_unit.note = row.get('note', existing_unit.note or '')
+                existing_unit.project_id = row.get('project_id', existing_unit.project_id)
+                existing_unit.location = row.get('location', existing_unit.location)
+                existing_unit.last_updated = datetime.utcnow()
+
+                results["updated"].append(unit_id)
+            else:
+                # Create new unit
+                new_unit = RosterUnit(
+                    id=unit_id,
+                    unit_type=row.get('unit_type', 'series3'),
+                    deployed=row.get('deployed', '').lower() in ('true', '1', 'yes'),
+                    retired=row.get('retired', '').lower() in ('true', '1', 'yes'),
+                    note=row.get('note', ''),
+                    project_id=row.get('project_id'),
+                    location=row.get('location'),
+                    last_updated=datetime.utcnow()
+                )
+                db.add(new_unit)
+                results["added"].append(unit_id)
+
+        except Exception as e:
+            results["errors"].append({
+                "row": row_num,
+                "unit_id": row.get('unit_id', 'unknown'),
+                "error": str(e)
+            })
+
+    # Commit all changes
+    try:
+        db.commit()
+    except Exception as e:
+        db.rollback()
+        raise HTTPException(status_code=500, detail=f"Database error: {str(e)}")
+
+    return {
+        "message": "CSV import completed",
+        "summary": {
+            "added": len(results["added"]),
+            "updated": len(results["updated"]),
+            "skipped": len(results["skipped"]),
+            "errors": len(results["errors"])
+        },
+        "details": results
+    }
diff --git a/backend/routes.py b/backend/routes.py
index e7e34da..fd39489 100644
--- a/backend/routes.py
+++ b/backend/routes.py
@@ -80,3 +80,82 @@ def get_fleet_status(db: Session = Depends(get_db)):
     """
     emitters = db.query(Emitter).all()
     return emitters
+
+# series3v1.1 Standardized Heartbeat Schema (multi-unit)
+from fastapi import Request
+
+@router.post("/api/series3/heartbeat", status_code=200)
+async def series3_heartbeat(request: Request, db: Session = Depends(get_db)):
+    """
+    Accepts a full telemetry payload from the Series3 emitter.
+    Updates or inserts each unit into the database.
+    """
+    payload = await request.json()
+
+    source = payload.get("source_id")
+    units = payload.get("units", [])
+
+    print("\n=== Series 3 Heartbeat ===")
+    print("Source:", source)
+    print("Units received:", len(units))
+    print("==========================\n")
+
+    results = []
+
+    for u in units:
+        uid = u.get("unit_id")
+        last_event_time = u.get("last_event_time")
+        event_meta = u.get("event_metadata", {})
+        age_minutes = u.get("age_minutes")
+
+        try:
+            if last_event_time:
+                ts = datetime.fromisoformat(last_event_time.replace("Z", "+00:00"))
+            else:
+                ts = None
+        except:
+            ts = None
+
+        # Pull from DB
+        emitter = db.query(Emitter).filter(Emitter.id == uid).first()
+
+        # File name (from event_metadata)
+        last_file = event_meta.get("file_name")
+        status = "Unknown"
+
+        # Determine status based on age
+        if age_minutes is None:
+            status = "Missing"
+        elif age_minutes > 24 * 60:
+            status = "Missing"
+        elif age_minutes > 12 * 60:
+            status = "Pending"
+        else:
+            status = "OK"
+
+        if emitter:
+            # Update existing
+            emitter.last_seen = ts
+            emitter.last_file = last_file
+            emitter.status = status
+        else:
+            # Insert new
+            emitter = Emitter(
+                id=uid,
+                unit_type="series3",
+                last_seen=ts,
+                last_file=last_file,
+                status=status
+            )
+            db.add(emitter)
+
+        results.append({"unit": uid, "status": status})
+
+    db.commit()
+
+    return {
+        "message": "Heartbeat processed",
+        "source": source,
+        "units_processed": len(results),
+        "results": results
+    }
diff --git a/backend/services/snapshot.py b/backend/services/snapshot.py
index 8d7e38d..cf01943 100644
--- a/backend/services/snapshot.py
+++ b/backend/services/snapshot.py
@@ -1,96 +1,121 @@
-"""
-Mock implementation of emit_status_snapshot().
-This will be replaced with real Series3 emitter logic by the user.
-"""
+from datetime import datetime, timezone
+from sqlalchemy.orm import Session
 
-from datetime import datetime, timedelta
-import random
+from backend.database import get_db_session
+from backend.models import Emitter, RosterUnit
+
+
+def ensure_utc(dt):
+    if dt is None:
+        return None
+    if dt.tzinfo is None:
+        return dt.replace(tzinfo=timezone.utc)
+    return dt.astimezone(timezone.utc)
+
+
+def format_age(last_seen):
+    if not last_seen:
+        return "N/A"
+    last_seen = ensure_utc(last_seen)
+    now = datetime.now(timezone.utc)
+    diff = now - last_seen
+    hours = diff.total_seconds() // 3600
+    mins = (diff.total_seconds() % 3600) // 60
+    return f"{int(hours)}h {int(mins)}m"
 
 
 def emit_status_snapshot():
     """
-    Mock function that returns fleet status snapshot.
-    In production, this will call the real Series3 emitter logic.
-
-    Returns a dictionary with unit statuses, ages, deployment status, etc.
+    Merge roster (what we *intend*) with emitter data (what is *actually happening*).
     """
 
-    # Mock data for demonstration
-    mock_units = {
-        "BE1234": {
-            "status": "OK",
-            "age": "1h 12m",
-            "last": "2025-11-22 12:32:10",
-            "fname": "evt_1234.mlg",
-            "deployed": True,
-            "note": "Bridge monitoring project - Golden Gate"
-        },
-        "BE5678": {
-            "status": "Pending",
-            "age": "2h 45m",
-            "last": "2025-11-22 11:05:33",
-            "fname": "evt_5678.mlg",
-            "deployed": True,
-            "note": "Dam structural analysis"
-        },
-        "BE9012": {
-            "status": "Missing",
-            "age": "5d 3h",
-            "last": "2025-11-17 09:15:00",
-            "fname": "evt_9012.mlg",
-            "deployed": True,
-            "note": "Tunnel excavation site"
-        },
-        "BE3456": {
-            "status": "OK",
-            "age": "30m",
-            "last": "2025-11-22 13:20:45",
-            "fname": "evt_3456.mlg",
-            "deployed": False,
-            "note": "Benched for maintenance"
-        },
-        "BE7890": {
-            "status": "OK",
-            "age": "15m",
-            "last": "2025-11-22 13:35:22",
-            "fname": "evt_7890.mlg",
-            "deployed": True,
-            "note": "Pipeline monitoring"
-        },
-        "BE2468": {
-            "status": "Pending",
-            "age": "4h 20m",
-            "last": "2025-11-22 09:30:15",
-            "fname": "evt_2468.mlg",
-            "deployed": True,
-            "note": "Building foundation survey"
-        },
-        "BE1357": {
-            "status": "OK",
-            "age": "45m",
-            "last": "2025-11-22 13:05:00",
-            "fname": "evt_1357.mlg",
-            "deployed": False,
-            "note": "Awaiting deployment"
-        },
-        "BE8642": {
-            "status": "Missing",
-            "age": "2d 12h",
-            "last": "2025-11-20 01:30:00",
-            "fname": "evt_8642.mlg",
-            "deployed": True,
-            "note": "Offshore platform - comms issue suspected"
-        }
-    }
+    db = get_db_session()
+    try:
+        roster = {r.id: r for r in db.query(RosterUnit).all()}
+        emitters = {e.id: e for e in db.query(Emitter).all()}
 
-    return {
-        "units": mock_units,
-        "timestamp": datetime.now().isoformat(),
-        "total_units": len(mock_units),
-        "deployed_units": sum(1 for u in mock_units.values() if u["deployed"]),
-        "status_summary": {
-            "OK": sum(1 for u in mock_units.values() if u["status"] == "OK"),
-            "Pending": sum(1 for u in mock_units.values() if u["status"] == "Pending"),
-            "Missing": sum(1 for u in mock_units.values() if u["status"] == "Missing")
+        units = {}
+
+        # --- Merge roster entries first ---
+        for unit_id, r in roster.items():
+            e = emitters.get(unit_id)
+
+            if r.retired:
+                # Retired units get separated later
+                status = "Retired"
+                age = "N/A"
+                last_seen = None
+                fname = ""
+            else:
+                if e:
+                    status = e.status
+                    last_seen = ensure_utc(e.last_seen)
+                    age = format_age(last_seen)
+                    fname = e.last_file
+                else:
+                    # Rostered but no emitter data
+                    status = "Missing"
+                    last_seen = None
+                    age = "N/A"
+                    fname = ""
+
+            units[unit_id] = {
+                "id": unit_id,
+                "status": status,
+                "age": age,
+                "last": last_seen.isoformat() if last_seen else None,
+                "fname": fname,
+                "deployed": r.deployed,
+                "note": r.note or "",
+                "retired": r.retired,
+            }
+
+        # --- Add unexpected emitter-only units ---
+        for unit_id, e in emitters.items():
+            if unit_id not in roster:
+                last_seen = ensure_utc(e.last_seen)
+                units[unit_id] = {
+                    "id": unit_id,
+                    "status": e.status,
+                    "age": format_age(last_seen),
+                    "last": last_seen.isoformat(),
+                    "fname": e.last_file,
+                    "deployed": False,            # default
+                    "note": "",
+                    "retired": False,
+                }
+
+        # Separate buckets for UI
+        active_units = {
+            uid: u for uid, u in units.items()
+            if not u["retired"] and u["deployed"]
         }
-    }
+
+        benched_units = {
+            uid: u for uid, u in units.items()
+            if not u["retired"] and not u["deployed"]
+        }
+
+        retired_units = {
+            uid: u for uid, u in units.items()
+            if u["retired"]
+        }
+
+        return {
+            "timestamp": datetime.utcnow().isoformat(),
+            "units": units,
+            "active": active_units,
+            "benched": benched_units,
+            "retired": retired_units,
+            "summary": {
+                "total": len(units),
+                "active": len(active_units),
+                "benched": len(benched_units),
+                "retired": len(retired_units),
+                "ok": sum(1 for u in units.values() if u["status"] == "OK"),
+                "pending": sum(1 for u in units.values() if u["status"] == "Pending"),
+                "missing": sum(1 for u in units.values() if u["status"] == "Missing"),
+            }
+        }
+    finally:
+        db.close()
diff --git a/sample_roster.csv b/sample_roster.csv
new file mode 100644
index 0000000..c54c894
--- /dev/null
+++ b/sample_roster.csv
@@ -0,0 +1,6 @@
+unit_id,unit_type,deployed,retired,note,project_id,location
+BE1234,series3,true,false,Primary unit at main site,PROJ-001,San Francisco CA
+BE5678,series3,true,false,Backup sensor,PROJ-001,Los Angeles CA
+BE9012,series3,false,false,In maintenance,PROJ-002,Workshop
+BE3456,series3,true,false,,PROJ-003,New York NY
+BE7890,series3,false,true,Decommissioned 2024,,Storage
diff --git a/templates/base.html b/templates/base.html
index 155f6ac..eb72c35 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -68,6 +68,7 @@
                     Seismo<br>
                     <span class="text-seismo-orange dark:text-seismo-burgundy">Fleet Manager</span>
                 </h1>
+                <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">v0.1.1</p>
             </div>
 
             <!-- Navigation -->
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 3430a4f..26e7095 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -9,14 +9,21 @@
 </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 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">
             <div class="flex items-center justify-between mb-4">
                 <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Fleet Summary</h2>
                 <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>
+                    <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 class="space-y-3">
@@ -59,7 +66,9 @@
             <div class="flex items-center justify-between mb-4">
                 <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Alerts</h2>
                 <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>
+                    <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>
             <div id="alerts-list" class="space-y-3">
@@ -72,107 +81,133 @@
             <div class="flex items-center justify-between mb-4">
                 <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Photos</h2>
                 <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="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>
+                    <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>
             </div>
             <div class="text-center text-gray-500 dark:text-gray-400">
                 <svg class="w-16 h-16 mx-auto mb-2 opacity-50" 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>
+                    <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>
                 <p class="text-sm">No recent photos</p>
             </div>
         </div>
+
     </div>
 
-    <!-- Quick Access to Fleet Roster -->
+    <!-- Fleet Status Section with Tabs -->
     <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
+
         <div class="flex items-center justify-between mb-4">
             <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Fleet Status</h2>
+
             <a href="/roster" class="text-seismo-orange hover:text-seismo-burgundy font-medium flex items-center">
-                View All
+                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>
         </div>
-        <div id="fleet-preview" class="space-y-2">
+
+        <!-- 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">
             <p class="text-gray-500 dark:text-gray-400">Loading fleet data...</p>
         </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;
+}
+</style>
+
+
 <script>
 function updateDashboard(event) {
     try {
         const data = JSON.parse(event.detail.xhr.response);
 
-        // Update fleet summary
-        document.getElementById('total-units').textContent = data.total_units || 0;
-        document.getElementById('deployed-units').textContent = data.deployed_units || 0;
-        document.getElementById('status-ok').textContent = data.status_summary.OK || 0;
-        document.getElementById('status-pending').textContent = data.status_summary.Pending || 0;
-        document.getElementById('status-missing').textContent = data.status_summary.Missing || 0;
+        // ===== Fleet summary numbers =====
+        document.getElementById('total-units').textContent = data.total_units ?? 0;
+        document.getElementById('deployed-units').textContent = data.deployed_units ?? 0;
+        document.getElementById('status-ok').textContent = data.status_summary.OK ?? 0;
+        document.getElementById('status-pending').textContent = data.status_summary.Pending ?? 0;
+        document.getElementById('status-missing').textContent = data.status_summary.Missing ?? 0;
 
-        // Update alerts list
+        // ===== Alerts =====
         const alertsList = document.getElementById('alerts-list');
-        const missingUnits = Object.entries(data.units).filter(([id, unit]) => unit.status === 'Missing');
-        const pendingUnits = Object.entries(data.units).filter(([id, unit]) => unit.status === 'Pending');
+        const missingUnits = Object.entries(data.units).filter(([_, u]) => u.status === 'Missing');
+        const pendingUnits = Object.entries(data.units).filter(([_, u]) => u.status === 'Pending');
 
-        if (missingUnits.length === 0 && pendingUnits.length === 0) {
-            alertsList.innerHTML = '<p class="text-sm text-green-600 dark:text-green-400">✓ All units reporting normally</p>';
+        if (!missingUnits.length && !pendingUnits.length) {
+            alertsList.innerHTML =
+                '<p class="text-sm text-green-600 dark:text-green-400">✓ All units reporting normally</p>';
         } else {
             let alertsHtml = '';
+
             missingUnits.slice(0, 3).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 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>`;
             });
+
             pendingUnits.slice(0, 2).forEach(([id, unit]) => {
                 alertsHtml += `
-                    <div class="flex items-start space-x-2 text-sm">
-                        <span class="w-2 h-2 rounded-full bg-yellow-500 mt-1.5"></span>
-                        <div>
-                            <a href="/unit/${id}" class="font-medium text-yellow-600 dark:text-yellow-400 hover:underline">${id}</a>
-                            <p class="text-gray-600 dark:text-gray-400">Pending for ${unit.age}</p>
-                        </div>
+                <div class="flex items-start space-x-2 text-sm">
+                    <span class="w-2 h-2 rounded-full bg-yellow-500 mt-1.5"></span>
+                    <div>
+                        <a href="/unit/${id}" class="font-medium text-yellow-600 dark:text-yellow-400 hover:underline">${id}</a>
+                        <p class="text-gray-600 dark:text-gray-400">Pending for ${unit.age}</p>
                     </div>
-                `;
+                </div>`;
             });
+
             alertsList.innerHTML = alertsHtml;
         }
 
-        // Update fleet preview
-        const fleetPreview = document.getElementById('fleet-preview');
-        const unitsList = Object.entries(data.units).slice(0, 5);
-        let previewHtml = '';
-
-        unitsList.forEach(([id, unit]) => {
-            const statusColor = unit.status === 'OK' ? 'green' : unit.status === 'Pending' ? 'yellow' : 'red';
-            const deployedDot = unit.deployed ? '<span class="w-2 h-2 rounded-full bg-blue-500"></span>' : '';
-
-            previewHtml += `
-                <a href="/unit/${id}" class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
-                    <div class="flex items-center space-x-3">
-                        <span class="w-3 h-3 rounded-full bg-${statusColor}-500"></span>
-                        ${deployedDot}
-                        <span class="font-medium">${id}</span>
-                    </div>
-                    <span class="text-sm text-gray-500 dark:text-gray-400">${unit.age}</span>
-                </a>
-            `;
-        });
-
-        fleetPreview.innerHTML = previewHtml;
-
-    } catch (error) {
-        console.error('Error updating dashboard:', error);
+    } catch (err) {
+        console.error("Dashboard update error:", err);
     }
 }
 </script>
+
 {% endblock %}
diff --git a/templates/partials/active_table.html b/templates/partials/active_table.html
new file mode 100644
index 0000000..a680d88
--- /dev/null
+++ b/templates/partials/active_table.html
@@ -0,0 +1,25 @@
+<table class="fleet-table">
+    <thead>
+        <tr>
+            <th>ID</th>
+            <th>Status</th>
+            <th>Age</th>
+            <th>Last Seen</th>
+            <th>File</th>
+            <th>Note</th>
+        </tr>
+    </thead>
+
+    <tbody>
+        {% for uid, u in units.items() %}
+        <tr>
+            <td>{{ uid }}</td>
+            <td>{{ u.status }}</td>
+            <td>{{ u.age }}</td>
+            <td>{{ u.last }}</td>
+            <td>{{ u.fname }}</td>
+            <td>{{ u.note }}</td>
+        </tr>
+        {% endfor %}
+    </tbody>
+</table>
diff --git a/templates/partials/benched_table.html b/templates/partials/benched_table.html
new file mode 100644
index 0000000..a680d88
--- /dev/null
+++ b/templates/partials/benched_table.html
@@ -0,0 +1,25 @@
+<table class="fleet-table">
+    <thead>
+        <tr>
+            <th>ID</th>
+            <th>Status</th>
+            <th>Age</th>
+            <th>Last Seen</th>
+            <th>File</th>
+            <th>Note</th>
+        </tr>
+    </thead>
+
+    <tbody>
+        {% for uid, u in units.items() %}
+        <tr>
+            <td>{{ uid }}</td>
+            <td>{{ u.status }}</td>
+            <td>{{ u.age }}</td>
+            <td>{{ u.last }}</td>
+            <td>{{ u.fname }}</td>
+            <td>{{ u.note }}</td>
+        </tr>
+        {% endfor %}
+    </tbody>
+</table>
diff --git a/templates/partials/dashboard_active.html b/templates/partials/dashboard_active.html
new file mode 100644
index 0000000..3c1cb60
--- /dev/null
+++ b/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 %}
diff --git a/templates/partials/dashboard_benched.html b/templates/partials/dashboard_benched.html
new file mode 100644
index 0000000..4d7a025
--- /dev/null
+++ b/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 %}
-- 
2.49.1


From e46f668c340d67ccffa3b7d07f7a888e69e476f1 Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Tue, 2 Dec 2025 07:53:16 +0000
Subject: [PATCH 07/29] added frontend unit addition/editing

---
 backend/routers/roster_edit.py |   6 +-
 templates/roster.html          | 203 ++++++++++++++++++++++++++++++++-
 2 files changed, 206 insertions(+), 3 deletions(-)

diff --git a/backend/routers/roster_edit.py b/backend/routers/roster_edit.py
index ca598ec..257f00f 100644
--- a/backend/routers/roster_edit.py
+++ b/backend/routers/roster_edit.py
@@ -24,8 +24,10 @@ def get_or_create_roster_unit(db: Session, unit_id: str):
 def add_roster_unit(
     id: str = Form(...),
     unit_type: str = Form("series3"),
-    deployed: bool = Form(True),
+    deployed: bool = Form(False),
     note: str = Form(""),
+    project_id: str = Form(None),
+    location: str = Form(None),
     db: Session = Depends(get_db)
 ):
     if db.query(RosterUnit).filter(RosterUnit.id == id).first():
@@ -36,6 +38,8 @@ def add_roster_unit(
         unit_type=unit_type,
         deployed=deployed,
         note=note,
+        project_id=project_id,
+        location=location,
         last_updated=datetime.utcnow(),
     )
     db.add(unit)
diff --git a/templates/roster.html b/templates/roster.html
index c26f2f5..78b8608 100644
--- a/templates/roster.html
+++ b/templates/roster.html
@@ -4,8 +4,26 @@
 
 {% block content %}
 <div class="mb-8">
-    <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Fleet Roster</h1>
-    <p class="text-gray-600 dark:text-gray-400 mt-1">Real-time status of all seismograph units</p>
+    <div class="flex justify-between items-start">
+        <div>
+            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Fleet Roster</h1>
+            <p class="text-gray-600 dark:text-gray-400 mt-1">Real-time status of all seismograph units</p>
+        </div>
+        <div class="flex gap-3">
+            <button onclick="openAddUnitModal()" class="px-4 py-2 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg flex items-center gap-2 transition-colors">
+                <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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                </svg>
+                Add Unit
+            </button>
+            <button onclick="openImportModal()" class="px-4 py-2 bg-seismo-navy hover:bg-blue-800 text-white rounded-lg flex items-center gap-2 transition-colors">
+                <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="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
+                </svg>
+                Import CSV
+            </button>
+        </div>
+    </div>
 </div>
 
 <!-- Auto-refresh roster every 10 seconds -->
@@ -26,4 +44,185 @@
     </div>
 </div>
 
+<!-- Add Unit Modal -->
+<div id="addUnitModal" 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 shadow-2xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto">
+        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
+            <div class="flex justify-between items-center">
+                <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Add Unit</h2>
+                <button onclick="closeAddUnitModal()" class="text-gray-400 hover:text-gray-600 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>
+        </div>
+        <form id="addUnitForm" hx-post="/api/roster/add" hx-swap="none" class="p-6 space-y-4">
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Unit ID *</label>
+                <input type="text" name="id" required
+                    class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange"
+                    placeholder="BE1234">
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Unit Type</label>
+                <input type="text" name="unit_type" value="series3"
+                    class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Project ID</label>
+                <input type="text" name="project_id"
+                    class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange"
+                    placeholder="PROJ-001">
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Location</label>
+                <input type="text" name="location"
+                    class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange"
+                    placeholder="San Francisco, CA">
+            </div>
+            <div class="flex items-center gap-4">
+                <label class="flex items-center gap-2 cursor-pointer">
+                    <input type="checkbox" name="deployed" value="true" checked
+                        class="w-4 h-4 text-seismo-orange focus:ring-seismo-orange rounded">
+                    <span class="text-sm text-gray-700 dark:text-gray-300">Deployed</span>
+                </label>
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Notes</label>
+                <textarea name="note" rows="3"
+                    class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange"
+                    placeholder="Additional notes..."></textarea>
+            </div>
+            <div class="flex gap-3 pt-4">
+                <button type="submit" class="flex-1 px-4 py-2 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg transition-colors">
+                    Add Unit
+                </button>
+                <button type="button" onclick="closeAddUnitModal()" class="px-4 py-2 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 text-gray-700 dark:text-white rounded-lg transition-colors">
+                    Cancel
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- Import CSV Modal -->
+<div id="importModal" 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 shadow-2xl max-w-lg w-full mx-4">
+        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
+            <div class="flex justify-between items-center">
+                <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Import CSV</h2>
+                <button onclick="closeImportModal()" class="text-gray-400 hover:text-gray-600 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>
+        </div>
+        <form id="importForm" class="p-6 space-y-4">
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">CSV File *</label>
+                <input type="file" name="file" accept=".csv" required
+                    class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Format: unit_id,unit_type,deployed,retired,note,project_id,location</p>
+            </div>
+            <div class="flex items-center gap-2">
+                <input type="checkbox" name="update_existing" id="updateExisting" checked
+                    class="w-4 h-4 text-seismo-orange focus:ring-seismo-orange rounded">
+                <label for="updateExisting" class="text-sm text-gray-700 dark:text-gray-300 cursor-pointer">Update existing units</label>
+            </div>
+            <div class="flex gap-3 pt-4">
+                <button type="submit" class="flex-1 px-4 py-2 bg-seismo-navy hover:bg-blue-800 text-white rounded-lg transition-colors">
+                    Import
+                </button>
+                <button type="button" onclick="closeImportModal()" class="px-4 py-2 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 text-gray-700 dark:text-white rounded-lg transition-colors">
+                    Cancel
+                </button>
+            </div>
+            <div id="importResult" class="hidden mt-4 p-4 rounded-lg"></div>
+        </form>
+    </div>
+</div>
+
+<script>
+    // Add Unit Modal
+    function openAddUnitModal() {
+        document.getElementById('addUnitModal').classList.remove('hidden');
+    }
+
+    function closeAddUnitModal() {
+        document.getElementById('addUnitModal').classList.add('hidden');
+        document.getElementById('addUnitForm').reset();
+    }
+
+    // Import Modal
+    function openImportModal() {
+        document.getElementById('importModal').classList.remove('hidden');
+    }
+
+    function closeImportModal() {
+        document.getElementById('importModal').classList.add('hidden');
+        document.getElementById('importForm').reset();
+        document.getElementById('importResult').classList.add('hidden');
+    }
+
+    // Handle Add Unit form submission
+    document.getElementById('addUnitForm').addEventListener('htmx:afterRequest', function(event) {
+        if (event.detail.successful) {
+            closeAddUnitModal();
+            // Trigger roster refresh
+            htmx.trigger(document.querySelector('[hx-get="/partials/roster-table"]'), 'load');
+            // Show success message
+            alert('Unit added successfully!');
+        } else {
+            alert('Error adding unit. Please check the form and try again.');
+        }
+    });
+
+    // Handle CSV Import
+    document.getElementById('importForm').addEventListener('submit', async function(e) {
+        e.preventDefault();
+
+        const formData = new FormData(this);
+        const resultDiv = document.getElementById('importResult');
+
+        try {
+            const response = await fetch('/api/roster/import-csv', {
+                method: 'POST',
+                body: formData
+            });
+
+            const result = await response.json();
+
+            if (response.ok) {
+                resultDiv.className = 'mt-4 p-4 rounded-lg bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200';
+                resultDiv.innerHTML = `
+                    <p class="font-semibold mb-2">Import Successful!</p>
+                    <ul class="text-sm space-y-1">
+                        <li>✅ Added: ${result.summary.added}</li>
+                        <li>🔄 Updated: ${result.summary.updated}</li>
+                        <li>⏭️ Skipped: ${result.summary.skipped}</li>
+                        <li>❌ Errors: ${result.summary.errors}</li>
+                    </ul>
+                `;
+                resultDiv.classList.remove('hidden');
+
+                // Trigger roster refresh
+                htmx.trigger(document.querySelector('[hx-get="/partials/roster-table"]'), 'load');
+
+                // Close modal after 2 seconds
+                setTimeout(() => closeImportModal(), 2000);
+            } else {
+                resultDiv.className = 'mt-4 p-4 rounded-lg bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200';
+                resultDiv.innerHTML = `<p class="font-semibold">Import Failed</p><p class="text-sm">${result.detail || 'Unknown error'}</p>`;
+                resultDiv.classList.remove('hidden');
+            }
+        } catch (error) {
+            resultDiv.className = 'mt-4 p-4 rounded-lg bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200';
+            resultDiv.innerHTML = `<p class="font-semibold">Import Failed</p><p class="text-sm">${error.message}</p>`;
+            resultDiv.classList.remove('hidden');
+        }
+    });
+</script>
+
 {% endblock %}
-- 
2.49.1


From 802601ae8d435602a0e51bf4ffb08061bd3bc25a Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Wed, 3 Dec 2025 00:51:18 +0000
Subject: [PATCH 08/29] pre refactor

---
 backend/main.py                          | 23 +++++++++
 backend/models.py                        | 14 +++++-
 backend/routers/roster_edit.py           | 53 +++++++++++++++++++-
 backend/services/snapshot.py             | 11 ++++-
 templates/dashboard.html                 | 10 ++--
 templates/partials/unknown_emitters.html | 61 ++++++++++++++++++++++++
 templates/roster.html                    | 41 ++++++++++++++++
 7 files changed, 205 insertions(+), 8 deletions(-)
 create mode 100644 templates/partials/unknown_emitters.html

diff --git a/backend/main.py b/backend/main.py
index 35e5048..3e0003a 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -98,6 +98,29 @@ async def roster_table_partial(request: Request):
     })
 
 
+@app.get("/partials/unknown-emitters", response_class=HTMLResponse)
+async def unknown_emitters_partial(request: Request):
+    """Partial template for unknown emitters (HTMX)"""
+    snapshot = emit_status_snapshot()
+
+    unknown_list = []
+    for unit_id, unit_data in snapshot.get("unknown", {}).items():
+        unknown_list.append({
+            "id": unit_id,
+            "status": unit_data["status"],
+            "age": unit_data["age"],
+            "fname": unit_data.get("fname", ""),
+        })
+
+    # Sort by ID
+    unknown_list.sort(key=lambda x: x["id"])
+
+    return templates.TemplateResponse("partials/unknown_emitters.html", {
+        "request": request,
+        "unknown_units": unknown_list
+    })
+
+
 @app.get("/health")
 def health_check():
     """Health check endpoint"""
diff --git a/backend/models.py b/backend/models.py
index 19a0e92..6f1f9d2 100644
--- a/backend/models.py
+++ b/backend/models.py
@@ -28,4 +28,16 @@ class RosterUnit(Base):
     note = Column(String, nullable=True)
     project_id = Column(String, nullable=True)
     location = Column(String, nullable=True)
-    last_updated = Column(DateTime, default=datetime.utcnow)
\ No newline at end of file
+    last_updated = Column(DateTime, default=datetime.utcnow)
+
+
+class IgnoredUnit(Base):
+    """
+    Ignored units: units that report but should be filtered out from unknown emitters.
+    Used to suppress noise from old projects.
+    """
+    __tablename__ = "ignored_units"
+
+    id = Column(String, primary_key=True, index=True)
+    reason = Column(String, nullable=True)
+    ignored_at = Column(DateTime, default=datetime.utcnow)
\ No newline at end of file
diff --git a/backend/routers/roster_edit.py b/backend/routers/roster_edit.py
index 257f00f..1922942 100644
--- a/backend/routers/roster_edit.py
+++ b/backend/routers/roster_edit.py
@@ -5,7 +5,7 @@ import csv
 import io
 
 from backend.database import get_db
-from backend.models import RosterUnit
+from backend.models import RosterUnit, IgnoredUnit
 
 router = APIRouter(prefix="/api/roster", tags=["roster-edit"])
 
@@ -180,3 +180,54 @@ async def import_csv(
         },
         "details": results
     }
+
+
+@router.post("/ignore/{unit_id}")
+def ignore_unit(unit_id: str, reason: str = Form(""), db: Session = Depends(get_db)):
+    """
+    Add a unit to the ignore list to suppress it from unknown emitters.
+    """
+    # Check if already ignored
+    if db.query(IgnoredUnit).filter(IgnoredUnit.id == unit_id).first():
+        raise HTTPException(status_code=400, detail="Unit already ignored")
+
+    ignored = IgnoredUnit(
+        id=unit_id,
+        reason=reason,
+        ignored_at=datetime.utcnow()
+    )
+    db.add(ignored)
+    db.commit()
+    return {"message": "Unit ignored", "id": unit_id}
+
+
+@router.delete("/ignore/{unit_id}")
+def unignore_unit(unit_id: str, db: Session = Depends(get_db)):
+    """
+    Remove a unit from the ignore list.
+    """
+    ignored = db.query(IgnoredUnit).filter(IgnoredUnit.id == unit_id).first()
+    if not ignored:
+        raise HTTPException(status_code=404, detail="Unit not in ignore list")
+
+    db.delete(ignored)
+    db.commit()
+    return {"message": "Unit unignored", "id": unit_id}
+
+
+@router.get("/ignored")
+def list_ignored_units(db: Session = Depends(get_db)):
+    """
+    Get list of all ignored units.
+    """
+    ignored_units = db.query(IgnoredUnit).all()
+    return {
+        "ignored": [
+            {
+                "id": unit.id,
+                "reason": unit.reason,
+                "ignored_at": unit.ignored_at.isoformat()
+            }
+            for unit in ignored_units
+        ]
+    }
diff --git a/backend/services/snapshot.py b/backend/services/snapshot.py
index cf01943..f71b2f5 100644
--- a/backend/services/snapshot.py
+++ b/backend/services/snapshot.py
@@ -2,7 +2,7 @@ from datetime import datetime, timezone
 from sqlalchemy.orm import Session
 
 from backend.database import get_db_session
-from backend.models import Emitter, RosterUnit
+from backend.models import Emitter, RosterUnit, IgnoredUnit
 
 
 def ensure_utc(dt):
@@ -33,6 +33,7 @@ def emit_status_snapshot():
     try:
         roster = {r.id: r for r in db.query(RosterUnit).all()}
         emitters = {e.id: e for e in db.query(Emitter).all()}
+        ignored = {i.id for i in db.query(IgnoredUnit).all()}
 
         units = {}
 
@@ -101,17 +102,25 @@ def emit_status_snapshot():
             if u["retired"]
         }
 
+        # Unknown units - emitters that aren't in the roster and aren't ignored
+        unknown_units = {
+            uid: u for uid, u in units.items()
+            if uid not in roster and uid not in ignored
+        }
+
         return {
             "timestamp": datetime.utcnow().isoformat(),
             "units": units,
             "active": active_units,
             "benched": benched_units,
             "retired": retired_units,
+            "unknown": unknown_units,
             "summary": {
                 "total": len(units),
                 "active": len(active_units),
                 "benched": len(benched_units),
                 "retired": len(retired_units),
+                "unknown": len(unknown_units),
                 "ok": sum(1 for u in units.values() if u["status"] == "OK"),
                 "pending": sum(1 for u in units.values() if u["status"] == "Pending"),
                 "missing": sum(1 for u in units.values() if u["status"] == "Missing"),
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 26e7095..a52a101 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -162,11 +162,11 @@ function updateDashboard(event) {
         const data = JSON.parse(event.detail.xhr.response);
 
         // ===== Fleet summary numbers =====
-        document.getElementById('total-units').textContent = data.total_units ?? 0;
-        document.getElementById('deployed-units').textContent = data.deployed_units ?? 0;
-        document.getElementById('status-ok').textContent = data.status_summary.OK ?? 0;
-        document.getElementById('status-pending').textContent = data.status_summary.Pending ?? 0;
-        document.getElementById('status-missing').textContent = data.status_summary.Missing ?? 0;
+        document.getElementById('total-units').textContent = data.summary?.total ?? 0;
+        document.getElementById('deployed-units').textContent = data.summary?.active ?? 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;
 
         // ===== Alerts =====
         const alertsList = document.getElementById('alerts-list');
diff --git a/templates/partials/unknown_emitters.html b/templates/partials/unknown_emitters.html
new file mode 100644
index 0000000..584b3d7
--- /dev/null
+++ b/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 %}
diff --git a/templates/roster.html b/templates/roster.html
index 78b8608..29bc0dd 100644
--- a/templates/roster.html
+++ b/templates/roster.html
@@ -26,6 +26,11 @@
     </div>
 </div>
 
+<!-- Unknown Emitters Section -->
+<div hx-get="/partials/unknown-emitters" hx-trigger="load, every 10s" hx-swap="innerHTML">
+    <!-- Loading placeholder -->
+</div>
+
 <!-- Auto-refresh roster every 10 seconds -->
 <div hx-get="/partials/roster-table" hx-trigger="load, every 10s" hx-swap="innerHTML">
     <!-- Initial loading state -->
@@ -155,6 +160,42 @@
         document.getElementById('addUnitForm').reset();
     }
 
+    // Add unknown unit to roster
+    function addUnknownUnit(unitId) {
+        openAddUnitModal();
+        // Pre-fill the unit ID
+        document.querySelector('#addUnitForm input[name="id"]').value = unitId;
+        // Set deployed to true by default
+        document.querySelector('#addUnitForm input[name="deployed"]').checked = true;
+    }
+
+    // Ignore unknown unit
+    async function ignoreUnknownUnit(unitId) {
+        if (!confirm(`Ignore unit ${unitId}? It will no longer appear in the unknown emitters list.`)) {
+            return;
+        }
+
+        try {
+            const formData = new FormData();
+            formData.append('reason', 'Ignored from unknown emitters');
+
+            const response = await fetch(`/api/roster/ignore/${unitId}`, {
+                method: 'POST',
+                body: formData
+            });
+
+            if (response.ok) {
+                // Trigger refresh of unknown emitters
+                htmx.trigger(document.querySelector('[hx-get="/partials/unknown-emitters"]'), 'load');
+            } else {
+                const result = await response.json();
+                alert(`Error ignoring unit: ${result.detail || 'Unknown error'}`);
+            }
+        } catch (error) {
+            alert(`Error ignoring unit: ${error.message}`);
+        }
+    }
+
     // Import Modal
     function openImportModal() {
         document.getElementById('importModal').classList.remove('hidden');
-- 
2.49.1


From dc853806bb20b94ad761c1d3cf1025fe521266d0 Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Wed, 3 Dec 2025 07:57:25 +0000
Subject: [PATCH 09/29] v0.2 fleet overhaul

---
 backend/main.py                       |   7 +
 backend/migrate_add_device_types.py   |  84 ++++
 backend/models.py                     |  18 +-
 backend/routers/roster_edit.py        | 140 ++++++-
 backend/services/snapshot.py          |  18 +
 create_test_db.py                     | 115 ++++++
 templates/dashboard.html              | 120 +++++-
 templates/partials/active_table.html  |  73 ++--
 templates/partials/benched_table.html |  73 ++--
 templates/partials/roster_table.html  |  92 ++++-
 templates/roster.html                 | 375 ++++++++++++++++-
 templates/unit_detail.html            | 567 ++++++++++++++++----------
 12 files changed, 1400 insertions(+), 282 deletions(-)
 create mode 100644 backend/migrate_add_device_types.py
 create mode 100644 create_test_db.py

diff --git a/backend/main.py b/backend/main.py
index 3e0003a..a61f2b5 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -85,6 +85,13 @@ async def roster_table_partial(request: Request):
             "last_seen": unit_data["last"],
             "deployed": unit_data["deployed"],
             "note": unit_data.get("note", ""),
+            "device_type": unit_data.get("device_type", "seismograph"),
+            "last_calibrated": unit_data.get("last_calibrated"),
+            "next_calibration_due": unit_data.get("next_calibration_due"),
+            "deployed_with_modem_id": unit_data.get("deployed_with_modem_id"),
+            "ip_address": unit_data.get("ip_address"),
+            "phone_number": unit_data.get("phone_number"),
+            "hardware_model": unit_data.get("hardware_model"),
         })
 
     # Sort by status priority (Missing > Pending > OK) then by ID
diff --git a/backend/migrate_add_device_types.py b/backend/migrate_add_device_types.py
new file mode 100644
index 0000000..f923f34
--- /dev/null
+++ b/backend/migrate_add_device_types.py
@@ -0,0 +1,84 @@
+"""
+Migration script to add device type support to the roster table.
+
+This adds columns for:
+- device_type (seismograph/modem discriminator)
+- Seismograph-specific fields (calibration dates, modem pairing)
+- Modem-specific fields (IP address, phone number, hardware model)
+
+Run this script once to migrate an existing database.
+"""
+
+import sqlite3
+import os
+
+# Database path
+DB_PATH = "./data/seismo_fleet.db"
+
+def migrate_database():
+    """Add new columns to the roster table"""
+
+    if not os.path.exists(DB_PATH):
+        print(f"Database not found at {DB_PATH}")
+        print("The database will be created automatically when you run the application.")
+        return
+
+    print(f"Migrating database: {DB_PATH}")
+
+    conn = sqlite3.connect(DB_PATH)
+    cursor = conn.cursor()
+
+    # Check if device_type column already exists
+    cursor.execute("PRAGMA table_info(roster)")
+    columns = [col[1] for col in cursor.fetchall()]
+
+    if "device_type" in columns:
+        print("Migration already applied - device_type column exists")
+        conn.close()
+        return
+
+    print("Adding new columns to roster table...")
+
+    try:
+        # Add device type discriminator
+        cursor.execute("ALTER TABLE roster ADD COLUMN device_type TEXT DEFAULT 'seismograph'")
+        print("  ✓ Added device_type column")
+
+        # Add seismograph-specific fields
+        cursor.execute("ALTER TABLE roster ADD COLUMN last_calibrated DATE")
+        print("  ✓ Added last_calibrated column")
+
+        cursor.execute("ALTER TABLE roster ADD COLUMN next_calibration_due DATE")
+        print("  ✓ Added next_calibration_due column")
+
+        cursor.execute("ALTER TABLE roster ADD COLUMN deployed_with_modem_id TEXT")
+        print("  ✓ Added deployed_with_modem_id column")
+
+        # Add modem-specific fields
+        cursor.execute("ALTER TABLE roster ADD COLUMN ip_address TEXT")
+        print("  ✓ Added ip_address column")
+
+        cursor.execute("ALTER TABLE roster ADD COLUMN phone_number TEXT")
+        print("  ✓ Added phone_number column")
+
+        cursor.execute("ALTER TABLE roster ADD COLUMN hardware_model TEXT")
+        print("  ✓ Added hardware_model column")
+
+        # Set all existing units to seismograph type
+        cursor.execute("UPDATE roster SET device_type = 'seismograph' WHERE device_type IS NULL")
+        print("  ✓ Set existing units to seismograph type")
+
+        conn.commit()
+        print("\nMigration completed successfully!")
+
+    except sqlite3.Error as e:
+        print(f"\nError during migration: {e}")
+        conn.rollback()
+        raise
+
+    finally:
+        conn.close()
+
+
+if __name__ == "__main__":
+    migrate_database()
diff --git a/backend/models.py b/backend/models.py
index 6f1f9d2..6474d80 100644
--- a/backend/models.py
+++ b/backend/models.py
@@ -1,4 +1,4 @@
-from sqlalchemy import Column, String, DateTime, Boolean, Text
+from sqlalchemy import Column, String, DateTime, Boolean, Text, Date
 from datetime import datetime
 from backend.database import Base
 
@@ -18,11 +18,15 @@ class RosterUnit(Base):
     """
     Roster table: represents our *intended assignment* of a unit.
     This is editable from the GUI.
+
+    Supports multiple device types (seismograph, modem) with type-specific fields.
     """
     __tablename__ = "roster"
 
+    # Core fields (all device types)
     id = Column(String, primary_key=True, index=True)
-    unit_type = Column(String, default="series3")
+    unit_type = Column(String, default="series3")  # Backward compatibility
+    device_type = Column(String, default="seismograph")  # "seismograph" | "modem"
     deployed = Column(Boolean, default=True)
     retired = Column(Boolean, default=False)
     note = Column(String, nullable=True)
@@ -30,6 +34,16 @@ class RosterUnit(Base):
     location = Column(String, nullable=True)
     last_updated = Column(DateTime, default=datetime.utcnow)
 
+    # Seismograph-specific fields (nullable for modems)
+    last_calibrated = Column(Date, nullable=True)
+    next_calibration_due = Column(Date, nullable=True)
+    deployed_with_modem_id = Column(String, nullable=True)  # FK to another RosterUnit
+
+    # Modem-specific fields (nullable for seismographs)
+    ip_address = Column(String, nullable=True)
+    phone_number = Column(String, nullable=True)
+    hardware_model = Column(String, nullable=True)
+
 
 class IgnoredUnit(Base):
     """
diff --git a/backend/routers/roster_edit.py b/backend/routers/roster_edit.py
index 1922942..a29ab89 100644
--- a/backend/routers/roster_edit.py
+++ b/backend/routers/roster_edit.py
@@ -1,6 +1,6 @@
 from fastapi import APIRouter, Depends, HTTPException, Form, UploadFile, File
 from sqlalchemy.orm import Session
-from datetime import datetime
+from datetime import datetime, date
 import csv
 import io
 
@@ -23,28 +23,149 @@ def get_or_create_roster_unit(db: Session, unit_id: str):
 @router.post("/add")
 def add_roster_unit(
     id: str = Form(...),
+    device_type: str = Form("seismograph"),
     unit_type: str = Form("series3"),
     deployed: bool = Form(False),
     note: str = Form(""),
     project_id: str = Form(None),
     location: str = Form(None),
+    # Seismograph-specific fields
+    last_calibrated: str = Form(None),
+    next_calibration_due: str = Form(None),
+    deployed_with_modem_id: str = Form(None),
+    # Modem-specific fields
+    ip_address: str = Form(None),
+    phone_number: str = Form(None),
+    hardware_model: str = Form(None),
     db: Session = Depends(get_db)
 ):
     if db.query(RosterUnit).filter(RosterUnit.id == id).first():
         raise HTTPException(status_code=400, detail="Unit already exists")
 
+    # Parse date fields if provided
+    last_cal_date = None
+    if last_calibrated:
+        try:
+            last_cal_date = datetime.strptime(last_calibrated, "%Y-%m-%d").date()
+        except ValueError:
+            raise HTTPException(status_code=400, detail="Invalid last_calibrated date format. Use YYYY-MM-DD")
+
+    next_cal_date = None
+    if next_calibration_due:
+        try:
+            next_cal_date = datetime.strptime(next_calibration_due, "%Y-%m-%d").date()
+        except ValueError:
+            raise HTTPException(status_code=400, detail="Invalid next_calibration_due date format. Use YYYY-MM-DD")
+
     unit = RosterUnit(
         id=id,
+        device_type=device_type,
         unit_type=unit_type,
         deployed=deployed,
         note=note,
         project_id=project_id,
         location=location,
         last_updated=datetime.utcnow(),
+        # Seismograph-specific fields
+        last_calibrated=last_cal_date,
+        next_calibration_due=next_cal_date,
+        deployed_with_modem_id=deployed_with_modem_id if deployed_with_modem_id else None,
+        # Modem-specific fields
+        ip_address=ip_address if ip_address else None,
+        phone_number=phone_number if phone_number else None,
+        hardware_model=hardware_model if hardware_model else None,
     )
     db.add(unit)
     db.commit()
-    return {"message": "Unit added", "id": id}
+    return {"message": "Unit added", "id": id, "device_type": device_type}
+
+
+@router.get("/{unit_id}")
+def get_roster_unit(unit_id: str, db: Session = Depends(get_db)):
+    """Get a single roster unit by ID"""
+    unit = db.query(RosterUnit).filter(RosterUnit.id == unit_id).first()
+    if not unit:
+        raise HTTPException(status_code=404, detail="Unit not found")
+
+    return {
+        "id": unit.id,
+        "device_type": unit.device_type or "seismograph",
+        "unit_type": unit.unit_type,
+        "deployed": unit.deployed,
+        "retired": unit.retired,
+        "note": unit.note or "",
+        "project_id": unit.project_id or "",
+        "location": unit.location or "",
+        "last_calibrated": unit.last_calibrated.isoformat() if unit.last_calibrated else "",
+        "next_calibration_due": unit.next_calibration_due.isoformat() if unit.next_calibration_due else "",
+        "deployed_with_modem_id": unit.deployed_with_modem_id or "",
+        "ip_address": unit.ip_address or "",
+        "phone_number": unit.phone_number or "",
+        "hardware_model": unit.hardware_model or "",
+    }
+
+
+@router.post("/edit/{unit_id}")
+def edit_roster_unit(
+    unit_id: str,
+    device_type: str = Form("seismograph"),
+    unit_type: str = Form("series3"),
+    deployed: bool = Form(False),
+    retired: bool = Form(False),
+    note: str = Form(""),
+    project_id: str = Form(None),
+    location: str = Form(None),
+    # Seismograph-specific fields
+    last_calibrated: str = Form(None),
+    next_calibration_due: str = Form(None),
+    deployed_with_modem_id: str = Form(None),
+    # Modem-specific fields
+    ip_address: str = Form(None),
+    phone_number: str = Form(None),
+    hardware_model: str = Form(None),
+    db: Session = Depends(get_db)
+):
+    unit = db.query(RosterUnit).filter(RosterUnit.id == unit_id).first()
+    if not unit:
+        raise HTTPException(status_code=404, detail="Unit not found")
+
+    # Parse date fields if provided
+    last_cal_date = None
+    if last_calibrated:
+        try:
+            last_cal_date = datetime.strptime(last_calibrated, "%Y-%m-%d").date()
+        except ValueError:
+            raise HTTPException(status_code=400, detail="Invalid last_calibrated date format. Use YYYY-MM-DD")
+
+    next_cal_date = None
+    if next_calibration_due:
+        try:
+            next_cal_date = datetime.strptime(next_calibration_due, "%Y-%m-%d").date()
+        except ValueError:
+            raise HTTPException(status_code=400, detail="Invalid next_calibration_due date format. Use YYYY-MM-DD")
+
+    # Update all fields
+    unit.device_type = device_type
+    unit.unit_type = unit_type
+    unit.deployed = deployed
+    unit.retired = retired
+    unit.note = note
+    unit.project_id = project_id
+    unit.location = location
+    unit.last_updated = datetime.utcnow()
+
+    # Seismograph-specific fields
+    unit.last_calibrated = last_cal_date
+    unit.next_calibration_due = next_cal_date
+    unit.deployed_with_modem_id = deployed_with_modem_id if deployed_with_modem_id else None
+
+    # Modem-specific fields
+    unit.ip_address = ip_address if ip_address else None
+    unit.phone_number = phone_number if phone_number else None
+    unit.hardware_model = hardware_model if hardware_model else None
+
+    db.commit()
+    return {"message": "Unit updated", "id": unit_id, "device_type": device_type}
 
 
 @router.post("/set-deployed/{unit_id}")
@@ -65,6 +186,21 @@ def set_retired(unit_id: str, retired: bool = Form(...), db: Session = Depends(g
     return {"message": "Updated", "id": unit_id, "retired": retired}
 
 
+@router.delete("/{unit_id}")
+def delete_roster_unit(unit_id: str, db: Session = Depends(get_db)):
+    """
+    Permanently delete a unit from the roster database.
+    This is different from ignoring - the unit is completely removed.
+    """
+    unit = db.query(RosterUnit).filter(RosterUnit.id == unit_id).first()
+    if not unit:
+        raise HTTPException(status_code=404, detail="Unit not found")
+
+    db.delete(unit)
+    db.commit()
+    return {"message": "Unit deleted", "id": unit_id}
+
+
 @router.post("/set-note/{unit_id}")
 def set_note(unit_id: str, note: str = Form(""), db: Session = Depends(get_db)):
     unit = get_or_create_roster_unit(db, unit_id)
diff --git a/backend/services/snapshot.py b/backend/services/snapshot.py
index f71b2f5..fa10bdb 100644
--- a/backend/services/snapshot.py
+++ b/backend/services/snapshot.py
@@ -69,6 +69,16 @@ def emit_status_snapshot():
                 "deployed": r.deployed,
                 "note": r.note or "",
                 "retired": r.retired,
+                # Device type and type-specific fields
+                "device_type": r.device_type or "seismograph",
+                "last_calibrated": r.last_calibrated.isoformat() if r.last_calibrated else None,
+                "next_calibration_due": r.next_calibration_due.isoformat() if r.next_calibration_due else None,
+                "deployed_with_modem_id": r.deployed_with_modem_id,
+                "ip_address": r.ip_address,
+                "phone_number": r.phone_number,
+                "hardware_model": r.hardware_model,
+                # Location for mapping
+                "location": r.location or "",
             }
 
         # --- Add unexpected emitter-only units ---
@@ -84,6 +94,14 @@ def emit_status_snapshot():
                     "deployed": False,            # default
                     "note": "",
                     "retired": False,
+                    # Device type and type-specific fields (defaults for unknown units)
+                    "device_type": "seismograph",  # default
+                    "last_calibrated": None,
+                    "next_calibration_due": None,
+                    "deployed_with_modem_id": None,
+                    "ip_address": None,
+                    "phone_number": None,
+                    "hardware_model": None,
                 }
 
         # Separate buckets for UI
diff --git a/create_test_db.py b/create_test_db.py
new file mode 100644
index 0000000..11b44fc
--- /dev/null
+++ b/create_test_db.py
@@ -0,0 +1,115 @@
+#!/usr/bin/env python3
+"""
+Create a fresh test database with the new schema and some sample data.
+"""
+
+from sqlalchemy import create_engine
+from sqlalchemy.orm import sessionmaker
+from datetime import datetime, date, timedelta
+from backend.models import Base, RosterUnit, Emitter
+
+# Create a new test database
+TEST_DB_PATH = "/tmp/sfm_test.db"
+engine = create_engine(f"sqlite:///{TEST_DB_PATH}", connect_args={"check_same_thread": False})
+
+# Drop all tables and recreate them with the new schema
+Base.metadata.drop_all(bind=engine)
+Base.metadata.create_all(bind=engine)
+
+# Create a session
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+db = SessionLocal()
+
+try:
+    # Add some test seismographs
+    seismo1 = RosterUnit(
+        id="BE9449",
+        device_type="seismograph",
+        unit_type="series3",
+        deployed=True,
+        note="Primary field unit",
+        project_id="PROJ-001",
+        location="Site A",
+        last_calibrated=date(2024, 1, 15),
+        next_calibration_due=date(2025, 1, 15),
+        deployed_with_modem_id="MDM001",
+        last_updated=datetime.utcnow(),
+    )
+
+    seismo2 = RosterUnit(
+        id="BE9450",
+        device_type="seismograph",
+        unit_type="series3",
+        deployed=False,
+        note="Benched for maintenance",
+        project_id="PROJ-001",
+        location="Warehouse",
+        last_calibrated=date(2023, 6, 20),
+        next_calibration_due=date(2024, 6, 20),  # Past due
+        last_updated=datetime.utcnow(),
+    )
+
+    # Add some test modems
+    modem1 = RosterUnit(
+        id="MDM001",
+        device_type="modem",
+        unit_type="modem",
+        deployed=True,
+        note="Paired with BE9449",
+        project_id="PROJ-001",
+        location="Site A",
+        ip_address="192.168.1.100",
+        phone_number="+1-555-0123",
+        hardware_model="Raven XTV",
+        last_updated=datetime.utcnow(),
+    )
+
+    modem2 = RosterUnit(
+        id="MDM002",
+        device_type="modem",
+        unit_type="modem",
+        deployed=False,
+        note="Spare modem",
+        project_id="PROJ-001",
+        location="Warehouse",
+        ip_address="192.168.1.101",
+        phone_number="+1-555-0124",
+        hardware_model="Raven XT",
+        last_updated=datetime.utcnow(),
+    )
+
+    # Add test emitters (status reports)
+    emitter1 = Emitter(
+        id="BE9449",
+        unit_type="series3",
+        last_seen=datetime.utcnow() - timedelta(hours=2),
+        last_file="BE9449.2024.336.12.00.mseed",
+        status="OK",
+        notes="Running normally",
+    )
+
+    emitter2 = Emitter(
+        id="BE9450",
+        unit_type="series3",
+        last_seen=datetime.utcnow() - timedelta(days=30),
+        last_file="BE9450.2024.306.08.00.mseed",
+        status="Missing",
+        notes="No data received",
+    )
+
+    # Add all units
+    db.add_all([seismo1, seismo2, modem1, modem2, emitter1, emitter2])
+    db.commit()
+
+    print(f"✓ Test database created at {TEST_DB_PATH}")
+    print(f"✓ Added 2 seismographs (BE9449, BE9450)")
+    print(f"✓ Added 2 modems (MDM001, MDM002)")
+    print(f"✓ Added 2 emitter status reports")
+    print(f"\nDatabase is ready for testing!")
+
+except Exception as e:
+    print(f"Error creating test database: {e}")
+    db.rollback()
+    raise
+finally:
+    db.close()
diff --git a/templates/dashboard.html b/templates/dashboard.html
index a52a101..4e3308a 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -98,6 +98,15 @@
 
     </div>
 
+    <!-- Fleet Map -->
+    <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6 mb-8">
+        <div class="flex items-center justify-between mb-4">
+            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Fleet Map</h2>
+            <span class="text-sm text-gray-500 dark:text-gray-400">Deployed units</span>
+        </div>
+        <div id="fleet-map" class="w-full h-96 rounded-lg"></div>
+    </div>
+
     <!-- Fleet Status Section with Tabs -->
     <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
 
@@ -132,7 +141,10 @@
         </div>
 
         <!-- Tab Content Target -->
-        <div id="fleet-table" class="space-y-2">
+        <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>
 
@@ -204,10 +216,116 @@ function updateDashboard(event) {
             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 = [];
+
+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);
+
+    // Add OpenStreetMap tiles
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '© OpenStreetMap contributors',
+        maxZoom: 18
+    }).addTo(fleetMap);
+}
+
+function updateFleetMap(data) {
+    if (!fleetMap) return;
+
+    // Clear existing markers
+    fleetMarkers.forEach(marker => fleetMap.removeLayer(marker));
+    fleetMarkers = [];
+
+    // Get deployed units with location data
+    const deployedUnits = Object.entries(data.units).filter(([_, u]) => u.deployed && u.location);
+
+    if (deployedUnits.length === 0) {
+        return;
+    }
+
+    const bounds = [];
+
+    deployedUnits.forEach(([id, unit]) => {
+        const coords = parseLocation(unit.location);
+        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) {
+        fleetMap.fitBounds(bounds, { padding: [50, 50] });
+    }
+}
+
+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;
+}
 </script>
 
 {% endblock %}
diff --git a/templates/partials/active_table.html b/templates/partials/active_table.html
index a680d88..d9f4b72 100644
--- a/templates/partials/active_table.html
+++ b/templates/partials/active_table.html
@@ -1,25 +1,50 @@
-<table class="fleet-table">
-    <thead>
-        <tr>
-            <th>ID</th>
-            <th>Status</th>
-            <th>Age</th>
-            <th>Last Seen</th>
-            <th>File</th>
-            <th>Note</th>
-        </tr>
-    </thead>
+{% 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-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 %}
+            </div>
 
-    <tbody>
-        {% for uid, u in units.items() %}
-        <tr>
-            <td>{{ uid }}</td>
-            <td>{{ u.status }}</td>
-            <td>{{ u.age }}</td>
-            <td>{{ u.last }}</td>
-            <td>{{ u.fname }}</td>
-            <td>{{ u.note }}</td>
-        </tr>
-        {% endfor %}
-    </tbody>
-</table>
+            <!-- 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 %}
+<p class="text-sm text-gray-500 dark:text-gray-400 text-center py-8">No active units</p>
+{% endif %}
diff --git a/templates/partials/benched_table.html b/templates/partials/benched_table.html
index a680d88..b109259 100644
--- a/templates/partials/benched_table.html
+++ b/templates/partials/benched_table.html
@@ -1,25 +1,50 @@
-<table class="fleet-table">
-    <thead>
-        <tr>
-            <th>ID</th>
-            <th>Status</th>
-            <th>Age</th>
-            <th>Last Seen</th>
-            <th>File</th>
-            <th>Note</th>
-        </tr>
-    </thead>
+{% 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-3 h-3 rounded-full bg-gray-400" title="Benched"></span>
+            </div>
 
-    <tbody>
-        {% for uid, u in units.items() %}
-        <tr>
-            <td>{{ uid }}</td>
-            <td>{{ u.status }}</td>
-            <td>{{ u.age }}</td>
-            <td>{{ u.last }}</td>
-            <td>{{ u.fname }}</td>
-            <td>{{ u.note }}</td>
-        </tr>
-        {% endfor %}
-    </tbody>
-</table>
+            <!-- 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 %}
+<p class="text-sm text-gray-500 dark:text-gray-400 text-center py-8">No benched units</p>
+{% endif %}
diff --git a/templates/partials/roster_table.html b/templates/partials/roster_table.html
index 1b33fb3..f893aaf 100644
--- a/templates/partials/roster_table.html
+++ b/templates/partials/roster_table.html
@@ -8,6 +8,12 @@
                 <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">
+                    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">
                     Last Seen
                 </th>
@@ -43,7 +49,50 @@
                     </div>
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="text-sm font-medium text-gray-900 dark:text-white">{{ unit.id }}</div>
+                    <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>
@@ -63,12 +112,41 @@
                     </div>
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                    <a href="/unit/{{ unit.id }}" class="text-seismo-orange hover:text-seismo-burgundy inline-flex items-center">
-                        View
-                        <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>
+                    <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 %}
diff --git a/templates/roster.html b/templates/roster.html
index 29bc0dd..1a22ff5 100644
--- a/templates/roster.html
+++ b/templates/roster.html
@@ -69,6 +69,14 @@
                     class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange"
                     placeholder="BE1234">
             </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Device Type *</label>
+                <select name="device_type" id="deviceTypeSelect" onchange="toggleDeviceFields()"
+                    class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                    <option value="seismograph">Seismograph</option>
+                    <option value="modem">Modem</option>
+                </select>
+            </div>
             <div>
                 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Unit Type</label>
                 <input type="text" name="unit_type" value="series3"
@@ -86,9 +94,52 @@
                     class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange"
                     placeholder="San Francisco, CA">
             </div>
+
+            <!-- Seismograph-specific fields -->
+            <div id="seismographFields" class="space-y-4 border-t border-gray-200 dark:border-gray-700 pt-4">
+                <p class="text-sm font-semibold text-gray-700 dark:text-gray-300">Seismograph Information</p>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Last Calibrated</label>
+                    <input type="date" name="last_calibrated"
+                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Next Calibration Due</label>
+                    <input type="date" name="next_calibration_due"
+                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Typically 1 year after last calibration</p>
+                </div>
+                <div id="modemPairingField" class="hidden">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Deployed With Modem</label>
+                    <input type="text" name="deployed_with_modem_id" placeholder="Modem ID"
+                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Only needed when deployed</p>
+                </div>
+            </div>
+
+            <!-- Modem-specific fields -->
+            <div id="modemFields" class="hidden space-y-4 border-t border-gray-200 dark:border-gray-700 pt-4">
+                <p class="text-sm font-semibold text-gray-700 dark:text-gray-300">Modem Information</p>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">IP Address</label>
+                    <input type="text" name="ip_address" placeholder="192.168.1.100"
+                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Phone Number</label>
+                    <input type="text" name="phone_number" placeholder="+1-555-0123"
+                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Hardware Model</label>
+                    <input type="text" name="hardware_model" placeholder="e.g., Raven XTV"
+                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                </div>
+            </div>
+
             <div class="flex items-center gap-4">
                 <label class="flex items-center gap-2 cursor-pointer">
-                    <input type="checkbox" name="deployed" value="true" checked
+                    <input type="checkbox" name="deployed" id="deployedCheckbox" value="true" checked onchange="toggleModemPairing()"
                         class="w-4 h-4 text-seismo-orange focus:ring-seismo-orange rounded">
                     <span class="text-sm text-gray-700 dark:text-gray-300">Deployed</span>
                 </label>
@@ -111,6 +162,118 @@
     </div>
 </div>
 
+<!-- Edit Unit Modal -->
+<div id="editUnitModal" 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 shadow-2xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto">
+        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
+            <div class="flex justify-between items-center">
+                <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Edit Unit</h2>
+                <button onclick="closeEditUnitModal()" class="text-gray-400 hover:text-gray-600 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>
+        </div>
+        <form id="editUnitForm" hx-post="" hx-swap="none" class="p-6 space-y-4">
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Unit ID</label>
+                <input type="text" name="id" id="editUnitId" readonly
+                    class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed">
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Device Type *</label>
+                <select name="device_type" id="editDeviceTypeSelect" onchange="toggleEditDeviceFields()"
+                    class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                    <option value="seismograph">Seismograph</option>
+                    <option value="modem">Modem</option>
+                </select>
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Unit Type</label>
+                <input type="text" name="unit_type" id="editUnitType"
+                    class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Project ID</label>
+                <input type="text" name="project_id" id="editProjectId"
+                    class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Location</label>
+                <input type="text" name="location" id="editLocation"
+                    class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+            </div>
+
+            <!-- Seismograph-specific fields -->
+            <div id="editSeismographFields" class="space-y-4 border-t border-gray-200 dark:border-gray-700 pt-4">
+                <p class="text-sm font-semibold text-gray-700 dark:text-gray-300">Seismograph Information</p>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Last Calibrated</label>
+                    <input type="date" name="last_calibrated" id="editLastCalibrated"
+                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Next Calibration Due</label>
+                    <input type="date" name="next_calibration_due" id="editNextCalibrationDue"
+                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                </div>
+                <div id="editModemPairingField" class="hidden">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Deployed With Modem</label>
+                    <input type="text" name="deployed_with_modem_id" id="editDeployedWithModemId" placeholder="Modem ID"
+                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                </div>
+            </div>
+
+            <!-- Modem-specific fields -->
+            <div id="editModemFields" class="hidden space-y-4 border-t border-gray-200 dark:border-gray-700 pt-4">
+                <p class="text-sm font-semibold text-gray-700 dark:text-gray-300">Modem Information</p>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">IP Address</label>
+                    <input type="text" name="ip_address" id="editIpAddress" placeholder="192.168.1.100"
+                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Phone Number</label>
+                    <input type="text" name="phone_number" id="editPhoneNumber" placeholder="+1-555-0123"
+                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Hardware Model</label>
+                    <input type="text" name="hardware_model" id="editHardwareModel" placeholder="e.g., Raven XTV"
+                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                </div>
+            </div>
+
+            <div class="flex items-center gap-4">
+                <label class="flex items-center gap-2 cursor-pointer">
+                    <input type="checkbox" name="deployed" id="editDeployedCheckbox" value="true" onchange="toggleEditModemPairing()"
+                        class="w-4 h-4 text-seismo-orange focus:ring-seismo-orange rounded">
+                    <span class="text-sm text-gray-700 dark:text-gray-300">Deployed</span>
+                </label>
+                <label class="flex items-center gap-2 cursor-pointer">
+                    <input type="checkbox" name="retired" id="editRetiredCheckbox" value="true"
+                        class="w-4 h-4 text-seismo-orange focus:ring-seismo-orange rounded">
+                    <span class="text-sm text-gray-700 dark:text-gray-300">Retired</span>
+                </label>
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Notes</label>
+                <textarea name="note" id="editNote" rows="3"
+                    class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange"></textarea>
+            </div>
+            <div class="flex gap-3 pt-4">
+                <button type="submit" class="flex-1 px-4 py-2 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg transition-colors">
+                    Save Changes
+                </button>
+                <button type="button" onclick="closeEditUnitModal()" class="px-4 py-2 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 text-gray-700 dark:text-white rounded-lg transition-colors">
+                    Cancel
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
 <!-- Import CSV Modal -->
 <div id="importModal" 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 shadow-2xl max-w-lg w-full mx-4">
@@ -153,6 +316,7 @@
     // Add Unit Modal
     function openAddUnitModal() {
         document.getElementById('addUnitModal').classList.remove('hidden');
+        toggleDeviceFields(); // Initialize field visibility
     }
 
     function closeAddUnitModal() {
@@ -160,6 +324,35 @@
         document.getElementById('addUnitForm').reset();
     }
 
+    // Toggle device-specific fields based on device type selection
+    function toggleDeviceFields() {
+        const deviceType = document.getElementById('deviceTypeSelect').value;
+        const seismoFields = document.getElementById('seismographFields');
+        const modemFields = document.getElementById('modemFields');
+
+        if (deviceType === 'seismograph') {
+            seismoFields.classList.remove('hidden');
+            modemFields.classList.add('hidden');
+            toggleModemPairing(); // Check if modem pairing should be shown
+        } else {
+            seismoFields.classList.add('hidden');
+            modemFields.classList.remove('hidden');
+        }
+    }
+
+    // Toggle modem pairing field visibility (only for deployed seismographs)
+    function toggleModemPairing() {
+        const deviceType = document.getElementById('deviceTypeSelect').value;
+        const deployedCheckbox = document.getElementById('deployedCheckbox');
+        const modemPairingField = document.getElementById('modemPairingField');
+
+        if (deviceType === 'seismograph' && deployedCheckbox.checked) {
+            modemPairingField.classList.remove('hidden');
+        } else {
+            modemPairingField.classList.add('hidden');
+        }
+    }
+
     // Add unknown unit to roster
     function addUnknownUnit(unitId) {
         openAddUnitModal();
@@ -167,6 +360,8 @@
         document.querySelector('#addUnitForm input[name="id"]').value = unitId;
         // Set deployed to true by default
         document.querySelector('#addUnitForm input[name="deployed"]').checked = true;
+        // Trigger field visibility updates
+        toggleModemPairing();  // Show modem pairing field for deployed seismographs
     }
 
     // Ignore unknown unit
@@ -220,6 +415,184 @@
         }
     });
 
+    // Edit Unit Modal Functions
+    function openEditUnitModal() {
+        document.getElementById('editUnitModal').classList.remove('hidden');
+    }
+
+    function closeEditUnitModal() {
+        document.getElementById('editUnitModal').classList.add('hidden');
+        document.getElementById('editUnitForm').reset();
+    }
+
+    // Toggle device-specific fields in edit modal
+    function toggleEditDeviceFields() {
+        const deviceType = document.getElementById('editDeviceTypeSelect').value;
+        const seismoFields = document.getElementById('editSeismographFields');
+        const modemFields = document.getElementById('editModemFields');
+
+        if (deviceType === 'seismograph') {
+            seismoFields.classList.remove('hidden');
+            modemFields.classList.add('hidden');
+            toggleEditModemPairing();
+        } else {
+            seismoFields.classList.add('hidden');
+            modemFields.classList.remove('hidden');
+        }
+    }
+
+    // Toggle modem pairing field in edit modal
+    function toggleEditModemPairing() {
+        const deviceType = document.getElementById('editDeviceTypeSelect').value;
+        const deployedCheckbox = document.getElementById('editDeployedCheckbox');
+        const modemPairingField = document.getElementById('editModemPairingField');
+
+        if (deviceType === 'seismograph' && deployedCheckbox.checked) {
+            modemPairingField.classList.remove('hidden');
+        } else {
+            modemPairingField.classList.add('hidden');
+        }
+    }
+
+    // Edit Unit - Fetch data and populate form
+    async function editUnit(unitId) {
+        try {
+            const response = await fetch(`/api/roster/${unitId}`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch unit data');
+            }
+
+            const unit = await response.json();
+
+            // Populate form fields
+            document.getElementById('editUnitId').value = unit.id;
+            document.getElementById('editDeviceTypeSelect').value = unit.device_type;
+            document.getElementById('editUnitType').value = unit.unit_type;
+            document.getElementById('editProjectId').value = unit.project_id;
+            document.getElementById('editLocation').value = unit.location;
+            document.getElementById('editNote').value = unit.note;
+
+            // Checkboxes
+            document.getElementById('editDeployedCheckbox').checked = unit.deployed;
+            document.getElementById('editRetiredCheckbox').checked = unit.retired;
+
+            // Seismograph fields
+            document.getElementById('editLastCalibrated').value = unit.last_calibrated;
+            document.getElementById('editNextCalibrationDue').value = unit.next_calibration_due;
+            document.getElementById('editDeployedWithModemId').value = unit.deployed_with_modem_id;
+
+            // Modem fields
+            document.getElementById('editIpAddress').value = unit.ip_address;
+            document.getElementById('editPhoneNumber').value = unit.phone_number;
+            document.getElementById('editHardwareModel').value = unit.hardware_model;
+
+            // Set form action
+            document.getElementById('editUnitForm').setAttribute('hx-post', `/api/roster/edit/${unitId}`);
+
+            // Show/hide fields based on device type
+            toggleEditDeviceFields();
+
+            // Open modal
+            openEditUnitModal();
+        } catch (error) {
+            alert(`Error loading unit data: ${error.message}`);
+        }
+    }
+
+    // Handle Edit Unit form submission
+    document.getElementById('editUnitForm').addEventListener('htmx:afterRequest', function(event) {
+        if (event.detail.successful) {
+            closeEditUnitModal();
+            // Trigger roster refresh
+            htmx.trigger(document.querySelector('[hx-get="/partials/roster-table"]'), 'load');
+            alert('Unit updated successfully!');
+        } else {
+            alert('Error updating unit. Please check the form and try again.');
+        }
+    });
+
+    // Toggle Deployed Status
+    async function toggleDeployed(unitId, deployed) {
+        const action = deployed ? 'deploy' : 'bench';
+        if (!confirm(`Are you sure you want to ${action} unit ${unitId}?`)) {
+            return;
+        }
+
+        try {
+            const formData = new FormData();
+            formData.append('deployed', deployed);
+
+            const response = await fetch(`/api/roster/set-deployed/${unitId}`, {
+                method: 'POST',
+                body: formData
+            });
+
+            if (response.ok) {
+                // Trigger roster refresh
+                htmx.trigger(document.querySelector('[hx-get="/partials/roster-table"]'), 'load');
+                alert(`Unit ${deployed ? 'deployed' : 'benched'} successfully!`);
+            } else {
+                const result = await response.json();
+                alert(`Error: ${result.detail || 'Unknown error'}`);
+            }
+        } catch (error) {
+            alert(`Error: ${error.message}`);
+        }
+    }
+
+    // Move to Ignore List
+    async function moveToIgnore(unitId) {
+        const reason = prompt(`Why are you ignoring unit ${unitId}?`, '');
+        if (reason === null) {
+            return; // User cancelled
+        }
+
+        try {
+            const formData = new FormData();
+            formData.append('reason', reason);
+
+            const response = await fetch(`/api/roster/ignore/${unitId}`, {
+                method: 'POST',
+                body: formData
+            });
+
+            if (response.ok) {
+                // Trigger roster refresh
+                htmx.trigger(document.querySelector('[hx-get="/partials/roster-table"]'), 'load');
+                alert(`Unit ${unitId} moved to ignore list`);
+            } else {
+                const result = await response.json();
+                alert(`Error: ${result.detail || 'Unknown error'}`);
+            }
+        } catch (error) {
+            alert(`Error: ${error.message}`);
+        }
+    }
+
+    // Delete Unit
+    async function deleteUnit(unitId) {
+        if (!confirm(`Are you sure you want to PERMANENTLY delete unit ${unitId}?\n\nThis action cannot be undone!`)) {
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/roster/${unitId}`, {
+                method: 'DELETE'
+            });
+
+            if (response.ok) {
+                // Trigger roster refresh
+                htmx.trigger(document.querySelector('[hx-get="/partials/roster-table"]'), 'load');
+                alert(`Unit ${unitId} deleted successfully`);
+            } else {
+                const result = await response.json();
+                alert(`Error: ${result.detail || 'Unknown error'}`);
+            }
+        } catch (error) {
+            alert(`Error: ${error.message}`);
+        }
+    }
+
     // Handle CSV Import
     document.getElementById('importForm').addEventListener('submit', async function(e) {
         e.preventDefault();
diff --git a/templates/unit_detail.html b/templates/unit_detail.html
index 193c0f0..ed312bb 100644
--- a/templates/unit_detail.html
+++ b/templates/unit_detail.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block title %}Unit {{ unit_id }} - Seismo Fleet Manager{% endblock %}
+{% block title %}Unit Detail - Seismo Fleet Manager{% endblock %}
 
 {% block content %}
 <div class="mb-6">
@@ -10,259 +10,384 @@
         </svg>
         Back to Fleet Roster
     </a>
-    <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Unit {{ unit_id }}</h1>
+    <div class="flex justify-between items-center">
+        <h1 class="text-3xl font-bold text-gray-900 dark:text-white" id="pageTitle">Loading...</h1>
+        <button onclick="deleteUnit()" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors flex items-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="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>
+            Delete Unit
+        </button>
+    </div>
 </div>
 
-<!-- Auto-refresh unit data -->
-<div hx-get="/api/unit/{{ unit_id }}" hx-trigger="load, every 10s" hx-swap="none" hx-on::after-request="updateUnitData(event)">
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <!-- Left Column: Unit Info -->
-        <div class="space-y-6">
-            <!-- Status Card -->
-            <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
-                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Unit Status</h2>
-                <div class="space-y-4">
-                    <div class="flex items-center justify-between">
-                        <span class="text-gray-600 dark:text-gray-400">Status</span>
-                        <div class="flex items-center space-x-2">
-                            <span id="status-indicator" class="w-3 h-3 rounded-full bg-gray-400"></span>
-                            <span id="status-text" class="font-semibold">Loading...</span>
-                        </div>
-                    </div>
-                    <div class="flex items-center justify-between">
-                        <span class="text-gray-600 dark:text-gray-400">Deployed</span>
-                        <span id="deployed-status" class="font-semibold">--</span>
-                    </div>
-                    <div class="flex items-center justify-between">
-                        <span class="text-gray-600 dark:text-gray-400">Age</span>
-                        <span id="age-value" class="font-semibold">--</span>
-                    </div>
-                    <div class="flex items-center justify-between">
-                        <span class="text-gray-600 dark:text-gray-400">Last Seen</span>
-                        <span id="last-seen-value" class="font-semibold">--</span>
-                    </div>
-                    <div class="flex items-center justify-between">
-                        <span class="text-gray-600 dark:text-gray-400">Last File</span>
-                        <span id="last-file-value" class="font-mono text-sm">--</span>
-                    </div>
+<!-- Loading state -->
+<div id="loadingState" class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-12 text-center">
+    <div class="animate-pulse">
+        <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mx-auto mb-4"></div>
+        <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mx-auto"></div>
+    </div>
+</div>
+
+<!-- Main content (hidden until loaded) -->
+<div id="mainContent" class="hidden space-y-6">
+    <!-- Status Card -->
+    <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
+        <div class="flex justify-between items-start mb-6">
+            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Status</h2>
+            <div class="flex items-center space-x-2">
+                <span id="statusIndicator" class="w-3 h-3 rounded-full"></span>
+                <span id="statusText" class="font-semibold"></span>
+            </div>
+        </div>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div>
+                <span class="text-sm text-gray-500 dark:text-gray-400">Last Seen</span>
+                <p id="lastSeen" class="font-medium text-gray-900 dark:text-white">--</p>
+            </div>
+            <div>
+                <span class="text-sm text-gray-500 dark:text-gray-400">Age</span>
+                <p id="age" class="font-medium text-gray-900 dark:text-white">--</p>
+            </div>
+            <div>
+                <span class="text-sm text-gray-500 dark:text-gray-400">Deployed</span>
+                <p id="deployedStatus" class="font-medium text-gray-900 dark:text-white">--</p>
+            </div>
+            <div>
+                <span class="text-sm text-gray-500 dark:text-gray-400">Retired</span>
+                <p id="retiredStatus" class="font-medium text-gray-900 dark:text-white">--</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Location Map -->
+    <div id="mapCard" class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Location</h2>
+        <div id="unit-map" class="w-full h-64 rounded-lg mb-4"></div>
+        <p id="locationText" class="text-sm text-gray-500 dark:text-gray-400"></p>
+    </div>
+
+    <!-- Edit Unit Form -->
+    <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">Unit Information</h2>
+        <form id="editForm" class="space-y-6">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <!-- Device Type -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Device Type</label>
+                    <select name="device_type" id="deviceType" onchange="toggleDetailFields()"
+                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                        <option value="seismograph">Seismograph</option>
+                        <option value="modem">Modem</option>
+                    </select>
+                </div>
+
+                <!-- Unit Type -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Unit Type</label>
+                    <input type="text" name="unit_type" id="unitType"
+                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                </div>
+
+                <!-- Project ID -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Project ID</label>
+                    <input type="text" name="project_id" id="projectId"
+                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                </div>
+
+                <!-- Location -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Location</label>
+                    <input type="text" name="location" id="location"
+                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
                 </div>
             </div>
 
-            <!-- Notes Card -->
-            <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
-                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Notes</h2>
-                <div id="notes-content" class="text-gray-600 dark:text-gray-400">
-                    Loading...
-                </div>
-            </div>
-
-            <!-- Metadata Card -->
-            <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
-                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Edit Metadata</h2>
-                <form class="space-y-4">
+            <!-- Seismograph Fields -->
+            <div id="seismographFields" class="space-y-4 border-t border-gray-200 dark:border-gray-700 pt-4">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Seismograph Information</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                            Unit Note
-                        </label>
-                        <textarea
-                            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 focus:ring-2 focus:ring-seismo-orange focus:border-transparent"
-                            rows="3"
-                            placeholder="Enter notes about this unit...">
-                        </textarea>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Last Calibrated</label>
+                        <input type="date" name="last_calibrated" id="lastCalibrated"
+                            class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
                     </div>
-                    <button
-                        type="button"
-                        class="w-full px-4 py-2 bg-seismo-orange hover:bg-seismo-burgundy text-white rounded-lg font-medium transition-colors"
-                        onclick="alert('Mock: Save functionality not implemented')">
-                        Save Changes
-                    </button>
-                </form>
-            </div>
-        </div>
-
-        <!-- Right Column: Tabbed Interface -->
-        <div class="space-y-6">
-            <!-- Tabs -->
-            <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 overflow-hidden">
-                <div class="border-b border-gray-200 dark:border-gray-700">
-                    <nav class="flex -mb-px">
-                        <button
-                            onclick="switchTab('photos')"
-                            id="tab-photos"
-                            class="tab-button flex-1 py-4 px-6 text-center border-b-2 font-medium text-sm transition-colors border-seismo-orange text-seismo-orange">
-                            Photos
-                        </button>
-                        <button
-                            onclick="switchTab('map')"
-                            id="tab-map"
-                            class="tab-button flex-1 py-4 px-6 text-center border-b-2 font-medium text-sm transition-colors border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
-                            Map
-                        </button>
-                        <button
-                            onclick="switchTab('history')"
-                            id="tab-history"
-                            class="tab-button flex-1 py-4 px-6 text-center border-b-2 font-medium text-sm transition-colors border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
-                            History
-                        </button>
-                    </nav>
-                </div>
-
-                <!-- Tab Content -->
-                <div class="p-6">
-                    <!-- Photos Tab -->
-                    <div id="content-photos" class="tab-content">
-                        <div hx-get="/api/unit/{{ unit_id }}/photos" hx-trigger="load" hx-swap="none" hx-on::after-request="updatePhotos(event)">
-                            <div id="photos-container" class="text-center">
-                                <div class="animate-pulse">
-                                    <div class="h-64 bg-gray-200 dark:bg-gray-700 rounded-lg mb-4"></div>
-                                    <div class="grid grid-cols-4 gap-2">
-                                        <div class="h-20 bg-gray-200 dark:bg-gray-700 rounded"></div>
-                                        <div class="h-20 bg-gray-200 dark:bg-gray-700 rounded"></div>
-                                        <div class="h-20 bg-gray-200 dark:bg-gray-700 rounded"></div>
-                                        <div class="h-20 bg-gray-200 dark:bg-gray-700 rounded"></div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Next Calibration Due</label>
+                        <input type="date" name="next_calibration_due" id="nextCalibrationDue"
+                            class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
                     </div>
-
-                    <!-- Map Tab -->
-                    <div id="content-map" class="tab-content hidden">
-                        <div id="map" style="height: 500px; width: 100%;" class="rounded-lg"></div>
-                        <div id="location-info" class="mt-4 text-sm text-gray-600 dark:text-gray-400">
-                            <p><strong>Location:</strong> <span id="location-name">Loading...</span></p>
-                            <p><strong>Coordinates:</strong> <span id="coordinates">--</span></p>
-                        </div>
-                    </div>
-
-                    <!-- History Tab -->
-                    <div id="content-history" class="tab-content hidden">
-                        <div class="text-center text-gray-500 dark:text-gray-400 py-12">
-                            <svg class="w-16 h-16 mx-auto mb-4 opacity-50" 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>
-                            <p class="text-lg font-medium">Event History</p>
-                            <p class="text-sm mt-2">Event history will be displayed here</p>
-                        </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Deployed With Modem</label>
+                        <input type="text" name="deployed_with_modem_id" id="deployedWithModemId" placeholder="Modem ID"
+                            class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
                     </div>
                 </div>
             </div>
-        </div>
+
+            <!-- Modem Fields -->
+            <div id="modemFields" class="hidden space-y-4 border-t border-gray-200 dark:border-gray-700 pt-4">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Modem Information</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">IP Address</label>
+                        <input type="text" name="ip_address" id="ipAddress" placeholder="192.168.1.100"
+                            class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Phone Number</label>
+                        <input type="text" name="phone_number" id="phoneNumber" placeholder="+1-555-0123"
+                            class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Hardware Model</label>
+                        <input type="text" name="hardware_model" id="hardwareModel" placeholder="e.g., Raven XTV"
+                            class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                    </div>
+                </div>
+            </div>
+
+            <!-- Checkboxes -->
+            <div class="flex items-center gap-6 border-t border-gray-200 dark:border-gray-700 pt-4">
+                <label class="flex items-center gap-2 cursor-pointer">
+                    <input type="checkbox" name="deployed" id="deployed" value="true"
+                        class="w-4 h-4 text-seismo-orange focus:ring-seismo-orange rounded">
+                    <span class="text-sm text-gray-700 dark:text-gray-300">Deployed</span>
+                </label>
+                <label class="flex items-center gap-2 cursor-pointer">
+                    <input type="checkbox" name="retired" id="retired" value="true"
+                        class="w-4 h-4 text-seismo-orange focus:ring-seismo-orange rounded">
+                    <span class="text-sm text-gray-700 dark:text-gray-300">Retired</span>
+                </label>
+            </div>
+
+            <!-- Notes -->
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Notes</label>
+                <textarea name="note" id="note" rows="4"
+                    class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange"></textarea>
+            </div>
+
+            <!-- Save Button -->
+            <div class="flex gap-3">
+                <button type="submit" class="flex-1 px-6 py-3 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg font-medium transition-colors">
+                    Save Changes
+                </button>
+                <a href="/roster" class="px-6 py-3 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 text-gray-700 dark:text-white rounded-lg font-medium transition-colors">
+                    Cancel
+                </a>
+            </div>
+        </form>
     </div>
 </div>
 
 <script>
-let unitData = null;
-let map = null;
-let marker = null;
+const unitId = "{{ unit_id }}";
+let currentUnit = null;
 
-function switchTab(tabName) {
-    // Update tab buttons
-    document.querySelectorAll('.tab-button').forEach(btn => {
-        btn.classList.remove('border-seismo-orange', 'text-seismo-orange');
-        btn.classList.add('border-transparent', 'text-gray-500', 'dark:text-gray-400');
-    });
-    document.getElementById(`tab-${tabName}`).classList.remove('border-transparent', 'text-gray-500', 'dark:text-gray-400');
-    document.getElementById(`tab-${tabName}`).classList.add('border-seismo-orange', 'text-seismo-orange');
-
-    // Update tab content
-    document.querySelectorAll('.tab-content').forEach(content => {
-        content.classList.add('hidden');
-    });
-    document.getElementById(`content-${tabName}`).classList.remove('hidden');
-
-    // Initialize map if switching to map tab
-    if (tabName === 'map' && !map && unitData) {
-        setTimeout(() => initMap(), 100);
-    }
-}
-
-function updateUnitData(event) {
+// Load unit data on page load
+async function loadUnitData() {
     try {
-        unitData = JSON.parse(event.detail.xhr.response);
-
-        // Update status
-        const statusIndicator = document.getElementById('status-indicator');
-        const statusText = document.getElementById('status-text');
-        const statusColors = {
-            'OK': 'bg-green-500',
-            'Pending': 'bg-yellow-500',
-            'Missing': 'bg-red-500'
-        };
-        statusIndicator.className = `w-3 h-3 rounded-full ${statusColors[unitData.status] || 'bg-gray-400'}`;
-        statusText.textContent = unitData.status;
-        statusText.className = `font-semibold ${unitData.status === 'OK' ? 'text-green-600 dark:text-green-400' : unitData.status === 'Pending' ? 'text-yellow-600 dark:text-yellow-400' : 'text-red-600 dark:text-red-400'}`;
-
-        // Update other fields
-        document.getElementById('deployed-status').textContent = unitData.deployed ? '✓ Deployed' : '✗ Benched';
-        document.getElementById('age-value').textContent = unitData.age;
-        document.getElementById('last-seen-value').textContent = unitData.last_seen;
-        document.getElementById('last-file-value').textContent = unitData.last_file;
-        document.getElementById('notes-content').textContent = unitData.note || 'No notes available';
-
-        // Update location info
-        if (unitData.coordinates) {
-            document.getElementById('location-name').textContent = unitData.coordinates.location;
-            document.getElementById('coordinates').textContent = `${unitData.coordinates.lat.toFixed(4)}, ${unitData.coordinates.lon.toFixed(4)}`;
+        const response = await fetch(`/api/roster/${unitId}`);
+        if (!response.ok) {
+            throw new Error('Unit not found');
         }
 
+        currentUnit = await response.json();
+        populateForm();
+
+        // Hide loading, show content
+        document.getElementById('loadingState').classList.add('hidden');
+        document.getElementById('mainContent').classList.remove('hidden');
     } catch (error) {
-        console.error('Error updating unit data:', error);
+        alert(`Error loading unit: ${error.message}`);
+        window.location.href = '/roster';
     }
 }
 
-function updatePhotos(event) {
-    try {
-        const data = JSON.parse(event.detail.xhr.response);
-        const container = document.getElementById('photos-container');
+// Populate form with unit data
+function populateForm() {
+    // Update page title
+    document.getElementById('pageTitle').textContent = `Unit ${currentUnit.id}`;
 
-        if (data.photos.length === 0) {
-            container.innerHTML = `
-                <div class="text-center text-gray-500 dark:text-gray-400 py-12">
-                    <svg class="w-16 h-16 mx-auto mb-4 opacity-50" 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>
-                    <p class="text-lg font-medium">No Photos Available</p>
-                    <p class="text-sm mt-2">Photos will appear here when uploaded</p>
-                </div>
-            `;
+    // Status info
+    const statusColors = {
+        'OK': 'bg-green-500',
+        'Pending': 'bg-yellow-500',
+        'Missing': 'bg-red-500'
+    };
+    document.getElementById('statusIndicator').className = `w-3 h-3 rounded-full ${statusColors.OK || 'bg-gray-400'}`;
+    document.getElementById('statusText').textContent = 'No status data';
+    document.getElementById('lastSeen').textContent = '--';
+    document.getElementById('age').textContent = '--';
+    document.getElementById('deployedStatus').textContent = currentUnit.deployed ? 'Yes' : 'No';
+    document.getElementById('retiredStatus').textContent = currentUnit.retired ? 'Yes' : 'No';
+
+    // Form fields
+    document.getElementById('deviceType').value = currentUnit.device_type;
+    document.getElementById('unitType').value = currentUnit.unit_type;
+    document.getElementById('projectId').value = currentUnit.project_id;
+    document.getElementById('location').value = currentUnit.location;
+    document.getElementById('deployed').checked = currentUnit.deployed;
+    document.getElementById('retired').checked = currentUnit.retired;
+    document.getElementById('note').value = currentUnit.note;
+
+    // Seismograph fields
+    document.getElementById('lastCalibrated').value = currentUnit.last_calibrated;
+    document.getElementById('nextCalibrationDue').value = currentUnit.next_calibration_due;
+    document.getElementById('deployedWithModemId').value = currentUnit.deployed_with_modem_id;
+
+    // Modem fields
+    document.getElementById('ipAddress').value = currentUnit.ip_address;
+    document.getElementById('phoneNumber').value = currentUnit.phone_number;
+    document.getElementById('hardwareModel').value = currentUnit.hardware_model;
+
+    // Show/hide fields based on device type
+    toggleDetailFields();
+
+    // Update map with unit location
+    updateUnitMap(currentUnit);
+}
+
+// Toggle device-specific fields
+function toggleDetailFields() {
+    const deviceType = document.getElementById('deviceType').value;
+    const seismoFields = document.getElementById('seismographFields');
+    const modemFields = document.getElementById('modemFields');
+
+    if (deviceType === 'seismograph') {
+        seismoFields.classList.remove('hidden');
+        modemFields.classList.add('hidden');
+    } else {
+        seismoFields.classList.add('hidden');
+        modemFields.classList.remove('hidden');
+    }
+}
+
+// Handle form submission
+document.getElementById('editForm').addEventListener('submit', async function(e) {
+    e.preventDefault();
+
+    const formData = new FormData(this);
+
+    try {
+        const response = await fetch(`/api/roster/edit/${unitId}`, {
+            method: 'POST',
+            body: formData
+        });
+
+        if (response.ok) {
+            alert('Unit updated successfully!');
+            loadUnitData(); // Reload data
         } else {
-            let html = `
-                <div class="mb-4">
-                    <img src="${data.photo_urls[0]}" alt="Primary photo" class="w-full h-auto rounded-lg shadow-lg" id="primary-image">
-                </div>
-                <div class="grid grid-cols-4 gap-2">
-            `;
-
-            data.photo_urls.forEach((url, index) => {
-                html += `
-                    <img src="${url}" alt="Photo ${index + 1}"
-                         class="w-full h-20 object-cover rounded cursor-pointer hover:opacity-75 transition-opacity"
-                         onclick="document.getElementById('primary-image').src = this.src">
-                `;
-            });
-
-            html += '</div>';
-            container.innerHTML = html;
+            const result = await response.json();
+            alert(`Error: ${result.detail || 'Unknown error'}`);
         }
     } catch (error) {
-        console.error('Error updating photos:', error);
+        alert(`Error: ${error.message}`);
+    }
+});
+
+// Delete unit
+async function deleteUnit() {
+    if (!confirm(`Are you sure you want to PERMANENTLY delete unit ${unitId}?\n\nThis action cannot be undone!`)) {
+        return;
+    }
+
+    try {
+        const response = await fetch(`/api/roster/${unitId}`, {
+            method: 'DELETE'
+        });
+
+        if (response.ok) {
+            alert('Unit deleted successfully');
+            window.location.href = '/roster';
+        } else {
+            const result = await response.json();
+            alert(`Error: ${result.detail || 'Unknown error'}`);
+        }
+    } catch (error) {
+        alert(`Error: ${error.message}`);
     }
 }
 
-function initMap() {
-    if (!unitData || !unitData.coordinates) return;
+// Initialize unit location map
+let unitMap = null;
 
-    const coords = unitData.coordinates;
-    map = L.map('map').setView([coords.lat, coords.lon], 13);
+function initUnitMap() {
+    // Default center (will be updated when location is loaded)
+    unitMap = L.map('unit-map').setView([39.8283, -98.5795], 4);
 
+    // Add OpenStreetMap tiles
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        attribution: '© OpenStreetMap contributors'
-    }).addTo(map);
-
-    marker = L.marker([coords.lat, coords.lon]).addTo(map)
-        .bindPopup(`<b>${unitData.id}</b><br>${coords.location}`)
-        .openPopup();
+        attribution: '© OpenStreetMap contributors',
+        maxZoom: 18
+    }).addTo(unitMap);
 }
+
+function updateUnitMap(unit) {
+    if (!unit.location || !unitMap) {
+        document.getElementById('mapCard').classList.add('hidden');
+        return;
+    }
+
+    const coords = parseLocation(unit.location);
+    if (coords) {
+        const [lat, lon] = coords;
+
+        // Show the map card
+        document.getElementById('mapCard').classList.remove('hidden');
+
+        // Center map on unit location
+        unitMap.setView([lat, lon], 13);
+
+        // Add marker with unit info
+        const statusColor = unit.status === 'OK' ? 'green' : unit.status === 'Pending' ? 'orange' : 'red';
+
+        L.circleMarker([lat, lon], {
+            radius: 10,
+            fillColor: statusColor,
+            color: '#fff',
+            weight: 3,
+            opacity: 1,
+            fillOpacity: 0.8
+        }).addTo(unitMap).bindPopup(`
+            <div class="p-2">
+                <h3 class="font-bold text-lg">${unit.id}</h3>
+                <p class="text-sm">Status: <span style="color: ${statusColor}">${unit.status || 'Unknown'}</span></p>
+                <p class="text-sm">Type: ${unit.device_type}</p>
+            </div>
+        `).openPopup();
+
+        // Update location text
+        document.getElementById('locationText').textContent = `Coordinates: ${lat.toFixed(6)}, ${lon.toFixed(6)}`;
+    } else {
+        // Show map card but indicate location not mappable
+        document.getElementById('mapCard').classList.remove('hidden');
+        document.getElementById('locationText').textContent = `Location: ${unit.location} (coordinates not available)`;
+    }
+}
+
+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 data when page loads
+initUnitMap();
+loadUnitData();
 </script>
 {% endblock %}
-- 
2.49.1


From 4cef580185c8f8bd9a604990eb065526d02d5f5a Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Wed, 3 Dec 2025 21:23:18 +0000
Subject: [PATCH 10/29] v0.2.1.  many features added and cleaned up.

---
 backend/main.py                       | 115 ++++-
 backend/models.py                     |   4 +-
 backend/routers/roster_edit.py        |  41 +-
 backend/routers/settings.py           | 241 +++++++++++
 backend/services/snapshot.py          |  13 +-
 templates/base.html                   |   4 +-
 templates/dashboard.html              |  23 +-
 templates/partials/ignored_table.html |  69 +++
 templates/partials/retired_table.html |  77 ++++
 templates/partials/roster_table.html  | 155 ++++++-
 templates/roster.html                 | 260 ++++++++++--
 templates/settings.html               | 584 ++++++++++++++++++++++++++
 templates/unit_detail.html            | 410 +++++++++++++-----
 13 files changed, 1815 insertions(+), 181 deletions(-)
 create mode 100644 backend/routers/settings.py
 create mode 100644 templates/partials/ignored_table.html
 create mode 100644 templates/partials/retired_table.html
 create mode 100644 templates/settings.html

diff --git a/backend/main.py b/backend/main.py
index a61f2b5..e9264e8 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -1,12 +1,14 @@
-from fastapi import FastAPI, Request
+from fastapi import FastAPI, Request, Depends
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 from fastapi.responses import HTMLResponse
+from sqlalchemy.orm import Session
 
-from backend.database import engine, Base
+from backend.database import engine, Base, get_db
 from backend.routers import roster, units, photos, roster_edit, dashboard, dashboard_tabs
 from backend.services.snapshot import emit_status_snapshot
+from backend.models import IgnoredUnit
 
 # Create database tables
 Base.metadata.create_all(bind=engine)
@@ -41,6 +43,9 @@ app.include_router(roster_edit.router)
 app.include_router(dashboard.router)
 app.include_router(dashboard_tabs.router)
 
+from backend.routers import settings
+app.include_router(settings.router)
+
 
 
 # Legacy routes from the original backend
@@ -70,14 +75,20 @@ async def unit_detail_page(request: Request, unit_id: str):
     })
 
 
-@app.get("/partials/roster-table", response_class=HTMLResponse)
-async def roster_table_partial(request: Request):
-    """Partial template for roster table (HTMX)"""
+@app.get("/settings", response_class=HTMLResponse)
+async def settings_page(request: Request):
+    """Settings page for roster management"""
+    return templates.TemplateResponse("settings.html", {"request": request})
+
+
+@app.get("/partials/roster-deployed", response_class=HTMLResponse)
+async def roster_deployed_partial(request: Request):
+    """Partial template for deployed units tab"""
     from datetime import datetime
     snapshot = emit_status_snapshot()
 
     units_list = []
-    for unit_id, unit_data in snapshot["units"].items():
+    for unit_id, unit_data in snapshot["active"].items():
         units_list.append({
             "id": unit_id,
             "status": unit_data["status"],
@@ -105,6 +116,98 @@ async def roster_table_partial(request: Request):
     })
 
 
+@app.get("/partials/roster-benched", response_class=HTMLResponse)
+async def roster_benched_partial(request: Request):
+    """Partial template for benched units tab"""
+    from datetime import datetime
+    snapshot = emit_status_snapshot()
+
+    units_list = []
+    for unit_id, unit_data in snapshot["benched"].items():
+        units_list.append({
+            "id": unit_id,
+            "status": unit_data["status"],
+            "age": unit_data["age"],
+            "last_seen": unit_data["last"],
+            "deployed": unit_data["deployed"],
+            "note": unit_data.get("note", ""),
+            "device_type": unit_data.get("device_type", "seismograph"),
+            "last_calibrated": unit_data.get("last_calibrated"),
+            "next_calibration_due": unit_data.get("next_calibration_due"),
+            "deployed_with_modem_id": unit_data.get("deployed_with_modem_id"),
+            "ip_address": unit_data.get("ip_address"),
+            "phone_number": unit_data.get("phone_number"),
+            "hardware_model": unit_data.get("hardware_model"),
+        })
+
+    # Sort by ID
+    units_list.sort(key=lambda x: x["id"])
+
+    return templates.TemplateResponse("partials/roster_table.html", {
+        "request": request,
+        "units": units_list,
+        "timestamp": datetime.now().strftime("%H:%M:%S")
+    })
+
+
+@app.get("/partials/roster-retired", response_class=HTMLResponse)
+async def roster_retired_partial(request: Request):
+    """Partial template for retired units tab"""
+    from datetime import datetime
+    snapshot = emit_status_snapshot()
+
+    units_list = []
+    for unit_id, unit_data in snapshot["retired"].items():
+        units_list.append({
+            "id": unit_id,
+            "status": unit_data["status"],
+            "age": unit_data["age"],
+            "last_seen": unit_data["last"],
+            "deployed": unit_data["deployed"],
+            "note": unit_data.get("note", ""),
+            "device_type": unit_data.get("device_type", "seismograph"),
+            "last_calibrated": unit_data.get("last_calibrated"),
+            "next_calibration_due": unit_data.get("next_calibration_due"),
+            "deployed_with_modem_id": unit_data.get("deployed_with_modem_id"),
+            "ip_address": unit_data.get("ip_address"),
+            "phone_number": unit_data.get("phone_number"),
+            "hardware_model": unit_data.get("hardware_model"),
+        })
+
+    # Sort by ID
+    units_list.sort(key=lambda x: x["id"])
+
+    return templates.TemplateResponse("partials/retired_table.html", {
+        "request": request,
+        "units": units_list,
+        "timestamp": datetime.now().strftime("%H:%M:%S")
+    })
+
+
+@app.get("/partials/roster-ignored", response_class=HTMLResponse)
+async def roster_ignored_partial(request: Request, db: Session = Depends(get_db)):
+    """Partial template for ignored units tab"""
+    from datetime import datetime
+
+    ignored = db.query(IgnoredUnit).all()
+    ignored_list = []
+    for unit in ignored:
+        ignored_list.append({
+            "id": unit.id,
+            "reason": unit.reason or "",
+            "ignored_at": unit.ignored_at.strftime("%Y-%m-%d %H:%M:%S") if unit.ignored_at else "Unknown"
+        })
+
+    # Sort by ID
+    ignored_list.sort(key=lambda x: x["id"])
+
+    return templates.TemplateResponse("partials/ignored_table.html", {
+        "request": request,
+        "ignored_units": ignored_list,
+        "timestamp": datetime.now().strftime("%H:%M:%S")
+    })
+
+
 @app.get("/partials/unknown-emitters", response_class=HTMLResponse)
 async def unknown_emitters_partial(request: Request):
     """Partial template for unknown emitters (HTMX)"""
diff --git a/backend/models.py b/backend/models.py
index 6474d80..d941264 100644
--- a/backend/models.py
+++ b/backend/models.py
@@ -31,7 +31,9 @@ class RosterUnit(Base):
     retired = Column(Boolean, default=False)
     note = Column(String, nullable=True)
     project_id = Column(String, nullable=True)
-    location = Column(String, nullable=True)
+    location = Column(String, nullable=True)  # Legacy field - use address/coordinates instead
+    address = Column(String, nullable=True)  # Human-readable address
+    coordinates = Column(String, nullable=True)  # Lat,Lon format: "34.0522,-118.2437"
     last_updated = Column(DateTime, default=datetime.utcnow)
 
     # Seismograph-specific fields (nullable for modems)
diff --git a/backend/routers/roster_edit.py b/backend/routers/roster_edit.py
index a29ab89..82f2061 100644
--- a/backend/routers/roster_edit.py
+++ b/backend/routers/roster_edit.py
@@ -5,7 +5,7 @@ import csv
 import io
 
 from backend.database import get_db
-from backend.models import RosterUnit, IgnoredUnit
+from backend.models import RosterUnit, IgnoredUnit, Emitter
 
 router = APIRouter(prefix="/api/roster", tags=["roster-edit"])
 
@@ -26,9 +26,12 @@ def add_roster_unit(
     device_type: str = Form("seismograph"),
     unit_type: str = Form("series3"),
     deployed: bool = Form(False),
+    retired: bool = Form(False),
     note: str = Form(""),
     project_id: str = Form(None),
     location: str = Form(None),
+    address: str = Form(None),
+    coordinates: str = Form(None),
     # Seismograph-specific fields
     last_calibrated: str = Form(None),
     next_calibration_due: str = Form(None),
@@ -62,9 +65,12 @@ def add_roster_unit(
         device_type=device_type,
         unit_type=unit_type,
         deployed=deployed,
+        retired=retired,
         note=note,
         project_id=project_id,
         location=location,
+        address=address,
+        coordinates=coordinates,
         last_updated=datetime.utcnow(),
         # Seismograph-specific fields
         last_calibrated=last_cal_date,
@@ -96,6 +102,8 @@ def get_roster_unit(unit_id: str, db: Session = Depends(get_db)):
         "note": unit.note or "",
         "project_id": unit.project_id or "",
         "location": unit.location or "",
+        "address": unit.address or "",
+        "coordinates": unit.coordinates or "",
         "last_calibrated": unit.last_calibrated.isoformat() if unit.last_calibrated else "",
         "next_calibration_due": unit.next_calibration_due.isoformat() if unit.next_calibration_due else "",
         "deployed_with_modem_id": unit.deployed_with_modem_id or "",
@@ -115,6 +123,8 @@ def edit_roster_unit(
     note: str = Form(""),
     project_id: str = Form(None),
     location: str = Form(None),
+    address: str = Form(None),
+    coordinates: str = Form(None),
     # Seismograph-specific fields
     last_calibrated: str = Form(None),
     next_calibration_due: str = Form(None),
@@ -152,6 +162,8 @@ def edit_roster_unit(
     unit.note = note
     unit.project_id = project_id
     unit.location = location
+    unit.address = address
+    unit.coordinates = coordinates
     unit.last_updated = datetime.utcnow()
 
     # Seismograph-specific fields
@@ -189,14 +201,27 @@ def set_retired(unit_id: str, retired: bool = Form(...), db: Session = Depends(g
 @router.delete("/{unit_id}")
 def delete_roster_unit(unit_id: str, db: Session = Depends(get_db)):
     """
-    Permanently delete a unit from the roster database.
-    This is different from ignoring - the unit is completely removed.
+    Permanently delete a unit from the database.
+    Checks both roster and emitters tables and deletes from any table where the unit exists.
     """
-    unit = db.query(RosterUnit).filter(RosterUnit.id == unit_id).first()
-    if not unit:
+    deleted = False
+
+    # Try to delete from roster table
+    roster_unit = db.query(RosterUnit).filter(RosterUnit.id == unit_id).first()
+    if roster_unit:
+        db.delete(roster_unit)
+        deleted = True
+
+    # Try to delete from emitters table
+    emitter = db.query(Emitter).filter(Emitter.id == unit_id).first()
+    if emitter:
+        db.delete(emitter)
+        deleted = True
+
+    # If not found in either table, return error
+    if not deleted:
         raise HTTPException(status_code=404, detail="Unit not found")
 
-    db.delete(unit)
     db.commit()
     return {"message": "Unit deleted", "id": unit_id}
 
@@ -274,6 +299,8 @@ async def import_csv(
                 existing_unit.note = row.get('note', existing_unit.note or '')
                 existing_unit.project_id = row.get('project_id', existing_unit.project_id)
                 existing_unit.location = row.get('location', existing_unit.location)
+                existing_unit.address = row.get('address', existing_unit.address)
+                existing_unit.coordinates = row.get('coordinates', existing_unit.coordinates)
                 existing_unit.last_updated = datetime.utcnow()
 
                 results["updated"].append(unit_id)
@@ -287,6 +314,8 @@ async def import_csv(
                     note=row.get('note', ''),
                     project_id=row.get('project_id'),
                     location=row.get('location'),
+                    address=row.get('address'),
+                    coordinates=row.get('coordinates'),
                     last_updated=datetime.utcnow()
                 )
                 db.add(new_unit)
diff --git a/backend/routers/settings.py b/backend/routers/settings.py
new file mode 100644
index 0000000..7063209
--- /dev/null
+++ b/backend/routers/settings.py
@@ -0,0 +1,241 @@
+from fastapi import APIRouter, Depends, HTTPException, UploadFile, File
+from fastapi.responses import StreamingResponse
+from sqlalchemy.orm import Session
+from datetime import datetime, date
+import csv
+import io
+
+from backend.database import get_db
+from backend.models import RosterUnit, Emitter, IgnoredUnit
+
+router = APIRouter(prefix="/api/settings", tags=["settings"])
+
+
+@router.get("/export-csv")
+def export_roster_csv(db: Session = Depends(get_db)):
+    """Export all roster units to CSV"""
+    units = db.query(RosterUnit).all()
+
+    # Create CSV in memory
+    output = io.StringIO()
+    fieldnames = [
+        'unit_id', 'unit_type', 'device_type', 'deployed', 'retired',
+        'note', 'project_id', 'location', 'address', 'coordinates',
+        'last_calibrated', 'next_calibration_due', 'deployed_with_modem_id',
+        'ip_address', 'phone_number', 'hardware_model'
+    ]
+
+    writer = csv.DictWriter(output, fieldnames=fieldnames)
+    writer.writeheader()
+
+    for unit in units:
+        writer.writerow({
+            'unit_id': unit.id,
+            'unit_type': unit.unit_type or '',
+            'device_type': unit.device_type or 'seismograph',
+            'deployed': 'true' if unit.deployed else 'false',
+            'retired': 'true' if unit.retired else 'false',
+            'note': unit.note or '',
+            'project_id': unit.project_id or '',
+            'location': unit.location or '',
+            'address': unit.address or '',
+            'coordinates': unit.coordinates or '',
+            'last_calibrated': unit.last_calibrated.strftime('%Y-%m-%d') if unit.last_calibrated else '',
+            'next_calibration_due': unit.next_calibration_due.strftime('%Y-%m-%d') if unit.next_calibration_due else '',
+            'deployed_with_modem_id': unit.deployed_with_modem_id or '',
+            'ip_address': unit.ip_address or '',
+            'phone_number': unit.phone_number or '',
+            'hardware_model': unit.hardware_model or ''
+        })
+
+    output.seek(0)
+    filename = f"roster_export_{date.today().isoformat()}.csv"
+
+    return StreamingResponse(
+        io.BytesIO(output.getvalue().encode('utf-8')),
+        media_type="text/csv",
+        headers={"Content-Disposition": f"attachment; filename={filename}"}
+    )
+
+
+@router.get("/stats")
+def get_table_stats(db: Session = Depends(get_db)):
+    """Get counts for all tables"""
+    roster_count = db.query(RosterUnit).count()
+    emitters_count = db.query(Emitter).count()
+    ignored_count = db.query(IgnoredUnit).count()
+
+    return {
+        "roster": roster_count,
+        "emitters": emitters_count,
+        "ignored": ignored_count,
+        "total": roster_count + emitters_count + ignored_count
+    }
+
+
+@router.get("/roster-units")
+def get_all_roster_units(db: Session = Depends(get_db)):
+    """Get all roster units for management table"""
+    units = db.query(RosterUnit).order_by(RosterUnit.id).all()
+
+    return [{
+        "id": unit.id,
+        "device_type": unit.device_type or "seismograph",
+        "unit_type": unit.unit_type or "series3",
+        "deployed": unit.deployed,
+        "retired": unit.retired,
+        "note": unit.note or "",
+        "project_id": unit.project_id or "",
+        "location": unit.location or "",
+        "address": unit.address or "",
+        "coordinates": unit.coordinates or "",
+        "last_calibrated": unit.last_calibrated.isoformat() if unit.last_calibrated else None,
+        "next_calibration_due": unit.next_calibration_due.isoformat() if unit.next_calibration_due else None,
+        "deployed_with_modem_id": unit.deployed_with_modem_id or "",
+        "ip_address": unit.ip_address or "",
+        "phone_number": unit.phone_number or "",
+        "hardware_model": unit.hardware_model or "",
+        "last_updated": unit.last_updated.isoformat() if unit.last_updated else None
+    } for unit in units]
+
+
+def parse_date(date_str):
+    """Helper function to parse date strings"""
+    if not date_str or not date_str.strip():
+        return None
+    try:
+        return datetime.strptime(date_str.strip(), "%Y-%m-%d").date()
+    except ValueError:
+        return None
+
+
+@router.post("/import-csv-replace")
+async def import_csv_replace(
+    file: UploadFile = File(...),
+    db: Session = Depends(get_db)
+):
+    """
+    Replace all roster data with CSV import (atomic transaction).
+    Clears roster table first, then imports all rows from CSV.
+    """
+
+    if not file.filename.endswith('.csv'):
+        raise HTTPException(status_code=400, detail="File must be a CSV")
+
+    # Read and parse CSV
+    contents = await file.read()
+    csv_text = contents.decode('utf-8')
+    csv_reader = csv.DictReader(io.StringIO(csv_text))
+
+    # Parse all rows FIRST (fail fast before deletion)
+    parsed_units = []
+    for row_num, row in enumerate(csv_reader, start=2):
+        unit_id = row.get('unit_id', '').strip()
+        if not unit_id:
+            raise HTTPException(
+                status_code=400,
+                detail=f"Row {row_num}: Missing required field unit_id"
+            )
+
+        # Parse and validate dates
+        last_cal_date = parse_date(row.get('last_calibrated'))
+        next_cal_date = parse_date(row.get('next_calibration_due'))
+
+        parsed_units.append({
+            'id': unit_id,
+            'unit_type': row.get('unit_type', 'series3'),
+            'device_type': row.get('device_type', 'seismograph'),
+            'deployed': row.get('deployed', '').lower() in ('true', '1', 'yes'),
+            'retired': row.get('retired', '').lower() in ('true', '1', 'yes'),
+            'note': row.get('note', ''),
+            'project_id': row.get('project_id') or None,
+            'location': row.get('location') or None,
+            'address': row.get('address') or None,
+            'coordinates': row.get('coordinates') or None,
+            'last_calibrated': last_cal_date,
+            'next_calibration_due': next_cal_date,
+            'deployed_with_modem_id': row.get('deployed_with_modem_id') or None,
+            'ip_address': row.get('ip_address') or None,
+            'phone_number': row.get('phone_number') or None,
+            'hardware_model': row.get('hardware_model') or None,
+        })
+
+    # Atomic transaction: delete all, then insert all
+    try:
+        deleted_count = db.query(RosterUnit).delete()
+
+        for unit_data in parsed_units:
+            new_unit = RosterUnit(**unit_data, last_updated=datetime.utcnow())
+            db.add(new_unit)
+
+        db.commit()
+
+        return {
+            "message": "Roster replaced successfully",
+            "deleted": deleted_count,
+            "added": len(parsed_units)
+        }
+
+    except Exception as e:
+        db.rollback()
+        raise HTTPException(status_code=500, detail=f"Import failed: {str(e)}")
+
+
+@router.post("/clear-all")
+def clear_all_data(db: Session = Depends(get_db)):
+    """Clear all tables (roster, emitters, ignored)"""
+    try:
+        roster_count = db.query(RosterUnit).delete()
+        emitters_count = db.query(Emitter).delete()
+        ignored_count = db.query(IgnoredUnit).delete()
+
+        db.commit()
+
+        return {
+            "message": "All data cleared",
+            "deleted": {
+                "roster": roster_count,
+                "emitters": emitters_count,
+                "ignored": ignored_count,
+                "total": roster_count + emitters_count + ignored_count
+            }
+        }
+    except Exception as e:
+        db.rollback()
+        raise HTTPException(status_code=500, detail=f"Clear failed: {str(e)}")
+
+
+@router.post("/clear-roster")
+def clear_roster(db: Session = Depends(get_db)):
+    """Clear roster table only"""
+    try:
+        count = db.query(RosterUnit).delete()
+        db.commit()
+        return {"message": "Roster cleared", "deleted": count}
+    except Exception as e:
+        db.rollback()
+        raise HTTPException(status_code=500, detail=f"Clear failed: {str(e)}")
+
+
+@router.post("/clear-emitters")
+def clear_emitters(db: Session = Depends(get_db)):
+    """Clear emitters table only"""
+    try:
+        count = db.query(Emitter).delete()
+        db.commit()
+        return {"message": "Emitters cleared", "deleted": count}
+    except Exception as e:
+        db.rollback()
+        raise HTTPException(status_code=500, detail=f"Clear failed: {str(e)}")
+
+
+@router.post("/clear-ignored")
+def clear_ignored(db: Session = Depends(get_db)):
+    """Clear ignored units table only"""
+    try:
+        count = db.query(IgnoredUnit).delete()
+        db.commit()
+        return {"message": "Ignored units cleared", "deleted": count}
+    except Exception as e:
+        db.rollback()
+        raise HTTPException(status_code=500, detail=f"Clear failed: {str(e)}")
diff --git a/backend/services/snapshot.py b/backend/services/snapshot.py
index fa10bdb..478d987 100644
--- a/backend/services/snapshot.py
+++ b/backend/services/snapshot.py
@@ -79,6 +79,8 @@ def emit_status_snapshot():
                 "hardware_model": r.hardware_model,
                 # Location for mapping
                 "location": r.location or "",
+                "address": r.address or "",
+                "coordinates": r.coordinates or "",
             }
 
         # --- Add unexpected emitter-only units ---
@@ -102,6 +104,10 @@ def emit_status_snapshot():
                     "ip_address": None,
                     "phone_number": None,
                     "hardware_model": None,
+                    # Location fields
+                    "location": "",
+                    "address": "",
+                    "coordinates": "",
                 }
 
         # Separate buckets for UI
@@ -139,9 +145,10 @@ def emit_status_snapshot():
                 "benched": len(benched_units),
                 "retired": len(retired_units),
                 "unknown": len(unknown_units),
-                "ok": sum(1 for u in units.values() if u["status"] == "OK"),
-                "pending": sum(1 for u in units.values() if u["status"] == "Pending"),
-                "missing": sum(1 for u in units.values() if u["status"] == "Missing"),
+                # Status counts only for deployed units (active_units)
+                "ok": sum(1 for u in active_units.values() if u["status"] == "OK"),
+                "pending": sum(1 for u in active_units.values() if u["status"] == "Pending"),
+                "missing": sum(1 for u in active_units.values() if u["status"] == "Missing"),
             }
         }
     finally:
diff --git a/templates/base.html b/templates/base.html
index eb72c35..e2d496c 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -68,7 +68,7 @@
                     Seismo<br>
                     <span class="text-seismo-orange dark:text-seismo-burgundy">Fleet Manager</span>
                 </h1>
-                <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">v0.1.1</p>
+                <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">v 0.2.1</p>
             </div>
 
             <!-- Navigation -->
@@ -94,7 +94,7 @@
                     Projects
                 </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">
+                <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>
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 4e3308a..c11fd06 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -35,7 +35,12 @@
                     <span class="text-gray-600 dark:text-gray-400">Deployed</span>
                     <span id="deployed-units" class="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-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">Deployed Status:</p>
                     <div class="flex justify-between items-center mb-2">
                         <div class="flex items-center">
                             <span class="w-3 h-3 rounded-full bg-green-500 mr-2"></span>
@@ -176,14 +181,16 @@ function updateDashboard(event) {
         // ===== 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;
 
         // ===== Alerts =====
         const alertsList = document.getElementById('alerts-list');
-        const missingUnits = Object.entries(data.units).filter(([_, u]) => u.status === 'Missing');
-        const pendingUnits = Object.entries(data.units).filter(([_, u]) => u.status === 'Pending');
+        // Only show alerts for deployed units (not benched)
+        const missingUnits = Object.entries(data.active).filter(([_, u]) => u.status === 'Missing');
+        const pendingUnits = Object.entries(data.active).filter(([_, u]) => u.status === 'Pending');
 
         if (!missingUnits.length && !pendingUnits.length) {
             alertsList.innerHTML =
@@ -243,6 +250,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
 let fleetMap = null;
 let fleetMarkers = [];
+let fleetMapInitialized = false;
 
 function initFleetMap() {
     // Initialize the map centered on the US (can adjust based on your deployment area)
@@ -262,8 +270,8 @@ function updateFleetMap(data) {
     fleetMarkers.forEach(marker => fleetMap.removeLayer(marker));
     fleetMarkers = [];
 
-    // Get deployed units with location data
-    const deployedUnits = Object.entries(data.units).filter(([_, u]) => u.deployed && u.location);
+    // Get deployed units with coordinates data
+    const deployedUnits = Object.entries(data.units).filter(([_, u]) => u.deployed && u.coordinates);
 
     if (deployedUnits.length === 0) {
         return;
@@ -272,7 +280,7 @@ function updateFleetMap(data) {
     const bounds = [];
 
     deployedUnits.forEach(([id, unit]) => {
-        const coords = parseLocation(unit.location);
+        const coords = parseLocation(unit.coordinates);
         if (coords) {
             const [lat, lon] = coords;
 
@@ -304,9 +312,10 @@ function updateFleetMap(data) {
         }
     });
 
-    // Fit map to show all markers
-    if (bounds.length > 0) {
+    // Fit map to show all markers only on first load
+    if (bounds.length > 0 && !fleetMapInitialized) {
         fleetMap.fitBounds(bounds, { padding: [50, 50] });
+        fleetMapInitialized = true;
     }
 }
 
diff --git a/templates/partials/ignored_table.html b/templates/partials/ignored_table.html
new file mode 100644
index 0000000..0b0a105
--- /dev/null
+++ b/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>
diff --git a/templates/partials/retired_table.html b/templates/partials/retired_table.html
new file mode 100644
index 0000000..cb6cf68
--- /dev/null
+++ b/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>
diff --git a/templates/partials/roster_table.html b/templates/partials/roster_table.html
index f893aaf..6a48d34 100644
--- a/templates/partials/roster_table.html
+++ b/templates/partials/roster_table.html
@@ -1,36 +1,60 @@
 <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">
+    <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">
-                    Status
+                <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">
-                    Unit ID
+                <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">
-                    Type
+                <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">
-                    Last Seen
+                <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">
-                    Age
+                <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">
-                    Note
+                <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 class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-gray-700">
+        <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">
+            <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' %}
@@ -159,7 +183,108 @@
     </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
     document.getElementById('last-updated').textContent = new Date().toLocaleTimeString();
+
+    // 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>
diff --git a/templates/roster.html b/templates/roster.html
index 1a22ff5..527a6d8 100644
--- a/templates/roster.html
+++ b/templates/roster.html
@@ -31,22 +31,56 @@
     <!-- Loading placeholder -->
 </div>
 
-<!-- Auto-refresh roster every 10 seconds -->
-<div hx-get="/partials/roster-table" hx-trigger="load, every 10s" hx-swap="innerHTML">
-    <!-- Initial loading state -->
-    <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
-        <div class="flex items-center justify-center py-12">
-            <div class="animate-pulse flex space-x-4">
-                <div class="flex-1 space-y-4 py-1">
-                    <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4"></div>
-                    <div class="space-y-2">
-                        <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded"></div>
-                        <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-5/6"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
+<!-- Fleet Roster with Tabs -->
+<div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
+
+    <!-- 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 roster-tab-button active-roster-tab"
+            data-endpoint="/partials/roster-deployed"
+            hx-get="/partials/roster-deployed"
+            hx-target="#roster-content"
+            hx-swap="innerHTML">
+            Deployed
+        </button>
+
+        <button
+            class="px-4 py-2 text-sm font-medium roster-tab-button"
+            data-endpoint="/partials/roster-benched"
+            hx-get="/partials/roster-benched"
+            hx-target="#roster-content"
+            hx-swap="innerHTML">
+            Benched
+        </button>
+
+        <button
+            class="px-4 py-2 text-sm font-medium roster-tab-button"
+            data-endpoint="/partials/roster-retired"
+            hx-get="/partials/roster-retired"
+            hx-target="#roster-content"
+            hx-swap="innerHTML">
+            Retired
+        </button>
+
+        <button
+            class="px-4 py-2 text-sm font-medium roster-tab-button"
+            data-endpoint="/partials/roster-ignored"
+            hx-get="/partials/roster-ignored"
+            hx-target="#roster-content"
+            hx-swap="innerHTML">
+            Ignored
+        </button>
     </div>
+
+    <!-- Tab Content Target -->
+    <div id="roster-content"
+         hx-get="/partials/roster-deployed"
+         hx-trigger="load"
+         hx-swap="innerHTML">
+        <p class="text-gray-500 dark:text-gray-400">Loading roster data...</p>
+    </div>
+
 </div>
 
 <!-- Add Unit Modal -->
@@ -143,6 +177,11 @@
                         class="w-4 h-4 text-seismo-orange focus:ring-seismo-orange rounded">
                     <span class="text-sm text-gray-700 dark:text-gray-300">Deployed</span>
                 </label>
+                <label class="flex items-center gap-2 cursor-pointer">
+                    <input type="checkbox" name="retired" id="retiredCheckbox" value="true"
+                        class="w-4 h-4 text-seismo-orange focus:ring-seismo-orange rounded">
+                    <span class="text-sm text-gray-700 dark:text-gray-300">Retired</span>
+                </label>
             </div>
             <div>
                 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Notes</label>
@@ -175,7 +214,7 @@
                 </button>
             </div>
         </div>
-        <form id="editUnitForm" hx-post="" hx-swap="none" class="p-6 space-y-4">
+        <form id="editUnitForm" class="p-6 space-y-4">
             <div>
                 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Unit ID</label>
                 <input type="text" name="id" id="editUnitId" readonly
@@ -200,10 +239,15 @@
                     class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
             </div>
             <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Location</label>
-                <input type="text" name="location" id="editLocation"
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Address</label>
+                <input type="text" name="address" id="editAddress" placeholder="123 Main St, City, State"
                     class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
             </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Coordinates</label>
+                <input type="text" name="coordinates" id="editCoordinates" placeholder="34.0522,-118.2437"
+                    class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange font-mono">
+            </div>
 
             <!-- Seismograph-specific fields -->
             <div id="editSeismographFields" class="space-y-4 border-t border-gray-200 dark:border-gray-700 pt-4">
@@ -406,8 +450,11 @@
     document.getElementById('addUnitForm').addEventListener('htmx:afterRequest', function(event) {
         if (event.detail.successful) {
             closeAddUnitModal();
-            // Trigger roster refresh
-            htmx.trigger(document.querySelector('[hx-get="/partials/roster-table"]'), 'load');
+            // Trigger roster refresh for current active tab
+            htmx.ajax('GET', currentRosterEndpoint, {
+                target: '#roster-content',
+                swap: 'innerHTML'
+            });
             // Show success message
             alert('Unit added successfully!');
         } else {
@@ -469,7 +516,8 @@
             document.getElementById('editDeviceTypeSelect').value = unit.device_type;
             document.getElementById('editUnitType').value = unit.unit_type;
             document.getElementById('editProjectId').value = unit.project_id;
-            document.getElementById('editLocation').value = unit.location;
+            document.getElementById('editAddress').value = unit.address;
+            document.getElementById('editCoordinates').value = unit.coordinates;
             document.getElementById('editNote').value = unit.note;
 
             // Checkboxes
@@ -486,8 +534,8 @@
             document.getElementById('editPhoneNumber').value = unit.phone_number;
             document.getElementById('editHardwareModel').value = unit.hardware_model;
 
-            // Set form action
-            document.getElementById('editUnitForm').setAttribute('hx-post', `/api/roster/edit/${unitId}`);
+            // Store unit ID for form submission
+            document.getElementById('editUnitForm').dataset.unitId = unitId;
 
             // Show/hide fields based on device type
             toggleEditDeviceFields();
@@ -500,14 +548,37 @@
     }
 
     // Handle Edit Unit form submission
-    document.getElementById('editUnitForm').addEventListener('htmx:afterRequest', function(event) {
-        if (event.detail.successful) {
-            closeEditUnitModal();
-            // Trigger roster refresh
-            htmx.trigger(document.querySelector('[hx-get="/partials/roster-table"]'), 'load');
-            alert('Unit updated successfully!');
-        } else {
-            alert('Error updating unit. Please check the form and try again.');
+    document.getElementById('editUnitForm').addEventListener('submit', async function(event) {
+        event.preventDefault();
+
+        const unitId = this.dataset.unitId;
+        if (!unitId) {
+            alert('Error: Unit ID not found');
+            return;
+        }
+
+        const formData = new FormData(this);
+
+        try {
+            const response = await fetch(`/api/roster/edit/${unitId}`, {
+                method: 'POST',
+                body: formData
+            });
+
+            if (response.ok) {
+                closeEditUnitModal();
+                // Trigger roster refresh for current active tab
+                htmx.ajax('GET', currentRosterEndpoint, {
+                    target: '#roster-content',
+                    swap: 'innerHTML'
+                });
+                alert('Unit updated successfully!');
+            } else {
+                const result = await response.json();
+                alert(`Error: ${result.detail || 'Unknown error'}`);
+            }
+        } catch (error) {
+            alert(`Error updating unit: ${error.message}`);
         }
     });
 
@@ -528,8 +599,11 @@
             });
 
             if (response.ok) {
-                // Trigger roster refresh
-                htmx.trigger(document.querySelector('[hx-get="/partials/roster-table"]'), 'load');
+                // Trigger roster refresh for current active tab
+                htmx.ajax('GET', currentRosterEndpoint, {
+                    target: '#roster-content',
+                    swap: 'innerHTML'
+                });
                 alert(`Unit ${deployed ? 'deployed' : 'benched'} successfully!`);
             } else {
                 const result = await response.json();
@@ -557,8 +631,11 @@
             });
 
             if (response.ok) {
-                // Trigger roster refresh
-                htmx.trigger(document.querySelector('[hx-get="/partials/roster-table"]'), 'load');
+                // Trigger roster refresh for current active tab
+                htmx.ajax('GET', currentRosterEndpoint, {
+                    target: '#roster-content',
+                    swap: 'innerHTML'
+                });
                 alert(`Unit ${unitId} moved to ignore list`);
             } else {
                 const result = await response.json();
@@ -581,8 +658,11 @@
             });
 
             if (response.ok) {
-                // Trigger roster refresh
-                htmx.trigger(document.querySelector('[hx-get="/partials/roster-table"]'), 'load');
+                // Trigger roster refresh for current active tab
+                htmx.ajax('GET', currentRosterEndpoint, {
+                    target: '#roster-content',
+                    swap: 'innerHTML'
+                });
                 alert(`Unit ${unitId} deleted successfully`);
             } else {
                 const result = await response.json();
@@ -621,8 +701,11 @@
                 `;
                 resultDiv.classList.remove('hidden');
 
-                // Trigger roster refresh
-                htmx.trigger(document.querySelector('[hx-get="/partials/roster-table"]'), 'load');
+                // Trigger roster refresh for current active tab
+                htmx.ajax('GET', currentRosterEndpoint, {
+                    target: '#roster-content',
+                    swap: 'innerHTML'
+                });
 
                 // Close modal after 2 seconds
                 setTimeout(() => closeImportModal(), 2000);
@@ -637,6 +720,105 @@
             resultDiv.classList.remove('hidden');
         }
     });
+
+    // Handle roster tab switching with auto-refresh
+    let currentRosterEndpoint = '/partials/roster-deployed'; // Default to deployed tab
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const tabButtons = document.querySelectorAll('.roster-tab-button');
+
+        tabButtons.forEach(button => {
+            button.addEventListener('click', function() {
+                // Remove active-roster-tab class from all buttons
+                tabButtons.forEach(btn => btn.classList.remove('active-roster-tab'));
+                // Add active-roster-tab class to clicked button
+                this.classList.add('active-roster-tab');
+
+                // Update current endpoint for auto-refresh
+                currentRosterEndpoint = this.getAttribute('data-endpoint');
+            });
+        });
+
+        // Auto-refresh the current active tab every 10 seconds
+        setInterval(() => {
+            const rosterContent = document.getElementById('roster-content');
+            if (rosterContent) {
+                // Use HTMX to trigger a refresh of the current endpoint
+                htmx.ajax('GET', currentRosterEndpoint, {
+                    target: '#roster-content',
+                    swap: 'innerHTML'
+                });
+            }
+        }, 10000); // 10 seconds
+    });
+
+    // Un-ignore Unit (remove from ignored list)
+    async function unignoreUnit(unitId) {
+        if (!confirm(`Remove unit ${unitId} from ignore list?`)) {
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/roster/ignore/${unitId}`, {
+                method: 'DELETE'
+            });
+
+            if (response.ok) {
+                // Trigger ignored tab refresh
+                htmx.trigger(document.querySelector('[hx-get="/partials/roster-ignored"]'), 'load');
+                alert(`Unit ${unitId} removed from ignore list`);
+            } else {
+                const result = await response.json();
+                alert(`Error: ${result.detail || 'Unknown error'}`);
+            }
+        } catch (error) {
+            alert(`Error: ${error.message}`);
+        }
+    }
+
+    // Delete ignored unit completely (from emitters table)
+    async function deleteIgnoredUnit(unitId) {
+        if (!confirm(`Are you sure you want to PERMANENTLY delete unit ${unitId}?\n\nThis will remove it from the ignore list and delete all records.`)) {
+            return;
+        }
+
+        try {
+            // First remove from ignore list
+            await fetch(`/api/roster/ignore/${unitId}`, {
+                method: 'DELETE'
+            });
+
+            // Then delete the unit
+            const response = await fetch(`/api/roster/${unitId}`, {
+                method: 'DELETE'
+            });
+
+            if (response.ok) {
+                // Trigger ignored tab refresh
+                htmx.trigger(document.querySelector('[hx-get="/partials/roster-ignored"]'), 'load');
+                alert(`Unit ${unitId} deleted successfully`);
+            } else {
+                const result = await response.json();
+                alert(`Error: ${result.detail || 'Unknown error'}`);
+            }
+        } catch (error) {
+            alert(`Error: ${error.message}`);
+        }
+    }
 </script>
 
+<style>
+.roster-tab-button {
+    color: #6b7280; /* gray-500 */
+    border-bottom: 2px solid transparent;
+}
+.roster-tab-button:hover {
+    color: #374151; /* gray-700 */
+}
+.active-roster-tab {
+    color: #f48b1c !important; /* seismo orange */
+    border-bottom: 2px solid #f48b1c !important;
+}
+</style>
+
 {% endblock %}
diff --git a/templates/settings.html b/templates/settings.html
new file mode 100644
index 0000000..9eb0245
--- /dev/null
+++ b/templates/settings.html
@@ -0,0 +1,584 @@
+{% extends "base.html" %}
+
+{% block title %}Settings - Seismo Fleet Manager{% endblock %}
+
+{% block content %}
+<div class="mb-8">
+    <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Roster Manager</h1>
+    <p class="text-gray-600 dark:text-gray-400 mt-1">Manage your fleet roster data - import, export, and reset</p>
+</div>
+
+<!-- CSV Export Section -->
+<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-6">
+    <div class="flex items-start justify-between">
+        <div class="flex-1">
+            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Export Roster</h2>
+            <p class="text-gray-600 dark:text-gray-400 mb-4">
+                Download all roster data as CSV for backup or editing externally
+            </p>
+        </div>
+        <div>
+            <a href="/api/settings/export-csv"
+               class="px-6 py-3 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg transition-colors inline-flex items-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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
+                </svg>
+                Download CSV
+            </a>
+        </div>
+    </div>
+</div>
+
+<!-- CSV Import Section -->
+<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-6">
+    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Import Roster</h2>
+
+    <form id="importSettingsForm" class="space-y-4">
+        <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">CSV File *</label>
+            <input type="file" name="file" accept=".csv" required
+                   class="block w-full text-sm text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer bg-gray-50 dark:bg-slate-700 focus:outline-none">
+            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                CSV must include column: unit_id (required)
+            </p>
+        </div>
+
+        <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Import Mode *</label>
+            <div class="space-y-3">
+                <label class="flex items-start gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-slate-700 cursor-pointer">
+                    <input type="radio" name="mode" value="merge" checked
+                           class="mt-1 w-4 h-4 text-seismo-orange focus:ring-seismo-orange">
+                    <div>
+                        <div class="font-medium text-gray-900 dark:text-white">Merge/Overwrite</div>
+                        <div class="text-sm text-gray-600 dark:text-gray-400">Update existing units, add new units (safe)</div>
+                    </div>
+                </label>
+                <label class="flex items-start gap-3 p-3 rounded-lg border border-red-300 dark:border-red-800 hover:bg-red-50 dark:hover:bg-red-900/20 cursor-pointer">
+                    <input type="radio" name="mode" value="replace"
+                           class="mt-1 w-4 h-4 text-red-600 focus:ring-red-600">
+                    <div>
+                        <div class="font-medium text-red-600 dark:text-red-400">Replace All</div>
+                        <div class="text-sm text-red-600 dark:text-red-400">⚠️ Delete ALL roster units first, then import (DANGEROUS)</div>
+                    </div>
+                </label>
+            </div>
+        </div>
+
+        <div id="importResult" class="hidden"></div>
+
+        <button type="submit" class="px-6 py-3 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg transition-colors">
+            Import CSV
+        </button>
+    </form>
+</div>
+
+<!-- Roster Management Table -->
+<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-6">
+    <div class="flex items-center justify-between mb-4">
+        <div>
+            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Roster Units</h2>
+            <p class="text-gray-600 dark:text-gray-400 text-sm mt-1">
+                Manage all units with inline editing and quick actions
+            </p>
+        </div>
+        <button onclick="refreshRosterTable()" class="px-4 py-2 text-seismo-orange hover:bg-orange-50 dark:hover:bg-orange-900/20 rounded-lg transition-colors">
+            <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>
+        </button>
+    </div>
+
+    <!-- Loading State -->
+    <div id="rosterTableLoading" class="text-center py-8">
+        <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-seismo-orange"></div>
+        <p class="text-gray-600 dark:text-gray-400 mt-2">Loading roster units...</p>
+    </div>
+
+    <!-- Table Container -->
+    <div id="rosterTableContainer" class="hidden overflow-x-auto">
+        <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 class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Unit ID</th>
+                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Type</th>
+                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Status</th>
+                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Note</th>
+                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Location</th>
+                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Actions</th>
+                </tr>
+            </thead>
+            <tbody id="rosterTableBody" class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-gray-700">
+                <!-- Rows will be inserted here by JavaScript -->
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Empty State -->
+    <div id="rosterTableEmpty" class="hidden text-center py-8">
+        <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>
+        <p class="text-gray-600 dark:text-gray-400 mt-2">No roster units found</p>
+    </div>
+</div>
+
+<!-- Danger Zone -->
+<div class="bg-red-50 dark:bg-red-900/20 rounded-xl border-2 border-red-200 dark:border-red-800 p-6">
+    <div class="flex items-start gap-3 mb-6">
+        <svg class="w-6 h-6 text-red-600 dark:text-red-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>
+            <h2 class="text-xl font-semibold text-red-600 dark:text-red-400 mb-1">Danger Zone</h2>
+            <p class="text-sm text-gray-700 dark:text-gray-300">
+                Irreversible operations - use with extreme caution
+            </p>
+        </div>
+    </div>
+
+    <div class="space-y-4">
+        <!-- Clear All Data -->
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 p-4 bg-white dark:bg-slate-800 rounded-lg border border-red-200 dark:border-red-800">
+            <div class="flex-1">
+                <h3 class="font-semibold text-gray-900 dark:text-white mb-1">Clear All Data</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">
+                    Delete ALL roster units, emitters, and ignored units
+                </p>
+            </div>
+            <button onclick="confirmClearAll()"
+                    class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors whitespace-nowrap">
+                Clear All
+            </button>
+        </div>
+
+        <!-- Clear Roster Only -->
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 p-4 bg-white dark:bg-slate-800 rounded-lg border border-red-200 dark:border-red-800">
+            <div class="flex-1">
+                <h3 class="font-semibold text-gray-900 dark:text-white mb-1">Clear Roster Table</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">
+                    Delete all roster units only (keeps emitters and ignored units)
+                </p>
+            </div>
+            <button onclick="confirmClearRoster()"
+                    class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors whitespace-nowrap">
+                Clear Roster
+            </button>
+        </div>
+
+        <!-- Clear Emitters Only -->
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 p-4 bg-white dark:bg-slate-800 rounded-lg border border-red-200 dark:border-red-800">
+            <div class="flex-1">
+                <h3 class="font-semibold text-gray-900 dark:text-white mb-1">Clear Emitters Table</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">
+                    Delete all auto-discovered emitters (will repopulate automatically)
+                </p>
+            </div>
+            <button onclick="confirmClearEmitters()"
+                    class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors whitespace-nowrap">
+                Clear Emitters
+            </button>
+        </div>
+
+        <!-- Clear Ignored Only -->
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 p-4 bg-white dark:bg-slate-800 rounded-lg border border-red-200 dark:border-red-800">
+            <div class="flex-1">
+                <h3 class="font-semibold text-gray-900 dark:text-white mb-1">Clear Ignored Units</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">
+                    Remove all units from the ignore list
+                </p>
+            </div>
+            <button onclick="confirmClearIgnored()"
+                    class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors whitespace-nowrap">
+                Clear Ignored
+            </button>
+        </div>
+    </div>
+</div>
+
+<script>
+// CSV Import Handler
+document.getElementById('importSettingsForm').addEventListener('submit', async function(e) {
+    e.preventDefault();
+
+    const formData = new FormData(this);
+    const mode = formData.get('mode');
+    const resultDiv = document.getElementById('importResult');
+
+    // For replace mode, get confirmation
+    if (mode === 'replace') {
+        try {
+            const stats = await fetch('/api/settings/stats').then(r => r.json());
+
+            const confirmMsg = `⚠️ REPLACE MODE WARNING ⚠️
+
+This will DELETE all ${stats.roster} roster units first, then import from CSV.
+
+THIS CANNOT BE UNDONE!
+
+Make sure you have a backup before proceeding.
+
+Continue?`;
+
+            if (!confirm(confirmMsg)) {
+                return;
+            }
+        } catch (error) {
+            alert('Error fetching statistics: ' + error.message);
+            return;
+        }
+    }
+
+    // Choose endpoint based on mode
+    const endpoint = mode === 'replace'
+        ? '/api/settings/import-csv-replace'
+        : '/api/roster/import-csv';
+
+    try {
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            body: formData
+        });
+
+        const result = await response.json();
+
+        if (response.ok) {
+            resultDiv.className = 'mt-4 p-4 rounded-lg bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200';
+
+            if (mode === 'replace') {
+                resultDiv.innerHTML = `
+                    <p class="font-semibold mb-2">Import Successful!</p>
+                    <ul class="text-sm space-y-1">
+                        <li>✅ Deleted: ${result.deleted}</li>
+                        <li>✅ Added: ${result.added}</li>
+                    </ul>
+                `;
+            } else {
+                resultDiv.innerHTML = `
+                    <p class="font-semibold mb-2">Import Successful!</p>
+                    <ul class="text-sm space-y-1">
+                        <li>✅ Added: ${result.summary.added}</li>
+                        <li>🔄 Updated: ${result.summary.updated}</li>
+                        <li>⏭️ Skipped: ${result.summary.skipped}</li>
+                        <li>❌ Errors: ${result.summary.errors}</li>
+                    </ul>
+                `;
+            }
+            resultDiv.classList.remove('hidden');
+
+            // Reset form after 3 seconds
+            setTimeout(() => {
+                this.reset();
+                resultDiv.classList.add('hidden');
+            }, 3000);
+        } else {
+            resultDiv.className = 'mt-4 p-4 rounded-lg bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200';
+            resultDiv.innerHTML = `<p class="font-semibold">Import Failed</p><p class="text-sm">${result.detail || 'Unknown error'}</p>`;
+            resultDiv.classList.remove('hidden');
+        }
+    } catch (error) {
+        resultDiv.className = 'mt-4 p-4 rounded-lg bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200';
+        resultDiv.innerHTML = `<p class="font-semibold">Import Failed</p><p class="text-sm">${error.message}</p>`;
+        resultDiv.classList.remove('hidden');
+    }
+});
+
+// Clear All Data
+async function confirmClearAll() {
+    try {
+        const stats = await fetch('/api/settings/stats').then(r => r.json());
+
+        const message = `⚠️ CLEAR ALL DATA WARNING ⚠️
+
+You are about to DELETE ALL data:
+
+• Roster units: ${stats.roster}
+• Emitters: ${stats.emitters}
+• Ignored units: ${stats.ignored}
+• TOTAL: ${stats.total} records
+
+THIS ACTION CANNOT BE UNDONE!
+
+Export a backup first if needed.
+
+Are you absolutely sure?`;
+
+        if (!confirm(message)) {
+            return;
+        }
+
+        const response = await fetch('/api/settings/clear-all', {
+            method: 'POST'
+        });
+
+        if (response.ok) {
+            const result = await response.json();
+            alert(`✅ Success! Deleted ${result.deleted.total} records\n\n• Roster: ${result.deleted.roster}\n• Emitters: ${result.deleted.emitters}\n• Ignored: ${result.deleted.ignored}`);
+            location.reload();
+        } else {
+            const result = await response.json();
+            alert('❌ Error: ' + (result.detail || 'Unknown error'));
+        }
+    } catch (error) {
+        alert('❌ Error: ' + error.message);
+    }
+}
+
+// Clear Roster Only
+async function confirmClearRoster() {
+    try {
+        const stats = await fetch('/api/settings/stats').then(r => r.json());
+
+        if (!confirm(`Delete all ${stats.roster} roster units?\n\nThis cannot be undone!`)) {
+            return;
+        }
+
+        const response = await fetch('/api/settings/clear-roster', {
+            method: 'POST'
+        });
+
+        if (response.ok) {
+            const result = await response.json();
+            alert(`✅ Success! Deleted ${result.deleted} roster units`);
+            location.reload();
+        } else {
+            const result = await response.json();
+            alert('❌ Error: ' + (result.detail || 'Unknown error'));
+        }
+    } catch (error) {
+        alert('❌ Error: ' + error.message);
+    }
+}
+
+// Clear Emitters Only
+async function confirmClearEmitters() {
+    try {
+        const stats = await fetch('/api/settings/stats').then(r => r.json());
+
+        if (!confirm(`Delete all ${stats.emitters} emitters?\n\nEmitters will repopulate automatically from ACH files.`)) {
+            return;
+        }
+
+        const response = await fetch('/api/settings/clear-emitters', {
+            method: 'POST'
+        });
+
+        if (response.ok) {
+            const result = await response.json();
+            alert(`✅ Success! Deleted ${result.deleted} emitters`);
+            location.reload();
+        } else {
+            const result = await response.json();
+            alert('❌ Error: ' + (result.detail || 'Unknown error'));
+        }
+    } catch (error) {
+        alert('❌ Error: ' + error.message);
+    }
+}
+
+// Clear Ignored Only
+async function confirmClearIgnored() {
+    try {
+        const stats = await fetch('/api/settings/stats').then(r => r.json());
+
+        if (!confirm(`Remove all ${stats.ignored} units from ignore list?\n\nThey will appear as unknown emitters again.`)) {
+            return;
+        }
+
+        const response = await fetch('/api/settings/clear-ignored', {
+            method: 'POST'
+        });
+
+        if (response.ok) {
+            const result = await response.json();
+            alert(`✅ Success! Removed ${result.deleted} units from ignore list`);
+            location.reload();
+        } else {
+            const result = await response.json();
+            alert('❌ Error: ' + (result.detail || 'Unknown error'));
+        }
+    } catch (error) {
+        alert('❌ Error: ' + error.message);
+    }
+}
+
+// ========== ROSTER MANAGEMENT TABLE ==========
+
+// Load roster table on page load
+document.addEventListener('DOMContentLoaded', function() {
+    loadRosterTable();
+});
+
+async function loadRosterTable() {
+    const loading = document.getElementById('rosterTableLoading');
+    const container = document.getElementById('rosterTableContainer');
+    const empty = document.getElementById('rosterTableEmpty');
+    const tbody = document.getElementById('rosterTableBody');
+
+    try {
+        loading.classList.remove('hidden');
+        container.classList.add('hidden');
+        empty.classList.add('hidden');
+
+        const response = await fetch('/api/settings/roster-units');
+        const units = await response.json();
+
+        if (units.length === 0) {
+            loading.classList.add('hidden');
+            empty.classList.remove('hidden');
+            return;
+        }
+
+        tbody.innerHTML = units.map(unit => createRosterRow(unit)).join('');
+
+        loading.classList.add('hidden');
+        container.classList.remove('hidden');
+    } catch (error) {
+        loading.classList.add('hidden');
+        alert('Error loading roster: ' + error.message);
+    }
+}
+
+function createRosterRow(unit) {
+    const statusBadges = [];
+    if (unit.deployed) {
+        statusBadges.push('<span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">Deployed</span>');
+    } else {
+        statusBadges.push('<span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">Benched</span>');
+    }
+    if (unit.retired) {
+        statusBadges.push('<span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300">Retired</span>');
+    }
+
+    return `
+        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" data-unit-id="${unit.id}">
+            <td class="px-4 py-3 whitespace-nowrap">
+                <a href="/unit/${unit.id}" class="text-sm font-medium text-seismo-orange hover:text-orange-600 dark:hover:text-orange-400">
+                    ${unit.id}
+                </a>
+            </td>
+            <td class="px-4 py-3 whitespace-nowrap">
+                <div class="text-sm text-gray-900 dark:text-white">${unit.device_type}</div>
+                <div class="text-xs text-gray-500 dark:text-gray-400">${unit.unit_type}</div>
+            </td>
+            <td class="px-4 py-3">
+                <div class="flex flex-wrap gap-1">
+                    ${statusBadges.join('')}
+                </div>
+            </td>
+            <td class="px-4 py-3">
+                <div class="text-sm text-gray-600 dark:text-gray-400 max-w-xs truncate" title="${unit.note}">
+                    ${unit.note || '<span class="text-gray-400 italic">No note</span>'}
+                </div>
+            </td>
+            <td class="px-4 py-3">
+                <div class="text-sm text-gray-600 dark:text-gray-400 max-w-xs truncate" title="${unit.location}">
+                    ${unit.location || '<span class="text-gray-400 italic">—</span>'}
+                </div>
+            </td>
+            <td class="px-4 py-3 whitespace-nowrap text-right text-sm">
+                <div class="flex justify-end gap-1">
+                    <button onclick="toggleDeployed('${unit.id}', ${unit.deployed})"
+                        class="p-2 hover:bg-gray-100 dark:hover:bg-gray-600 rounded transition-colors"
+                        title="${unit.deployed ? 'Bench Unit' : 'Deploy Unit'}">
+                        <svg class="w-4 h-4 ${unit.deployed ? 'text-green-600 dark:text-green-400' : 'text-gray-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>
+                    </button>
+                    <button onclick="toggleRetired('${unit.id}', ${unit.retired})"
+                        class="p-2 hover:bg-gray-100 dark:hover:bg-gray-600 rounded transition-colors"
+                        title="${unit.retired ? 'Unretire Unit' : 'Retire Unit'}">
+                        <svg class="w-4 h-4 ${unit.retired ? 'text-purple-600 dark:text-purple-400' : 'text-gray-400'}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
+                        </svg>
+                    </button>
+                    <button onclick="editUnit('${unit.id}')"
+                        class="p-2 hover:bg-gray-100 dark:hover:bg-gray-600 rounded transition-colors text-blue-600 dark:text-blue-400"
+                        title="Edit Unit">
+                        <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="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="confirmDeleteUnit('${unit.id}')"
+                        class="p-2 hover:bg-gray-100 dark:hover:bg-gray-600 rounded transition-colors text-red-600 dark:text-red-400"
+                        title="Delete Unit">
+                        <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="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>
+    `;
+}
+
+async function toggleDeployed(unitId, currentState) {
+    try {
+        const response = await fetch(`/api/roster/set-deployed/${unitId}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+            body: `deployed=${!currentState}`
+        });
+
+        if (response.ok) {
+            await loadRosterTable();
+        } else {
+            const result = await response.json();
+            alert('Error: ' + (result.detail || 'Unknown error'));
+        }
+    } catch (error) {
+        alert('Error: ' + error.message);
+    }
+}
+
+async function toggleRetired(unitId, currentState) {
+    try {
+        const response = await fetch(`/api/roster/set-retired/${unitId}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+            body: `retired=${!currentState}`
+        });
+
+        if (response.ok) {
+            await loadRosterTable();
+        } else {
+            const result = await response.json();
+            alert('Error: ' + (result.detail || 'Unknown error'));
+        }
+    } catch (error) {
+        alert('Error: ' + error.message);
+    }
+}
+
+function editUnit(unitId) {
+    // Navigate to unit detail page for full editing
+    window.location.href = `/unit/${unitId}`;
+}
+
+async function confirmDeleteUnit(unitId) {
+    if (!confirm(`Delete unit ${unitId}?\n\nThis will permanently remove the unit from the roster.\n\nContinue?`)) {
+        return;
+    }
+
+    try {
+        const response = await fetch(`/api/roster/${unitId}`, {
+            method: 'DELETE'
+        });
+
+        if (response.ok) {
+            await loadRosterTable();
+            alert(`✅ Unit ${unitId} deleted successfully`);
+        } else {
+            const result = await response.json();
+            alert('❌ Error: ' + (result.detail || 'Unknown error'));
+        }
+    } catch (error) {
+        alert('❌ Error: ' + error.message);
+    }
+}
+
+function refreshRosterTable() {
+    loadRosterTable();
+}
+</script>
+{% endblock %}
diff --git a/templates/unit_detail.html b/templates/unit_detail.html
index ed312bb..016a500 100644
--- a/templates/unit_detail.html
+++ b/templates/unit_detail.html
@@ -12,12 +12,20 @@
     </a>
     <div class="flex justify-between items-center">
         <h1 class="text-3xl font-bold text-gray-900 dark:text-white" id="pageTitle">Loading...</h1>
-        <button onclick="deleteUnit()" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors flex items-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="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>
-            Delete Unit
-        </button>
+        <div class="flex gap-3">
+            <button id="editButton" onclick="enterEditMode()" class="px-4 py-2 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg transition-colors flex items-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="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>
+                Edit Unit
+            </button>
+            <button onclick="deleteUnit()" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors flex items-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="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>
+                Delete Unit
+            </button>
+        </div>
     </div>
 </div>
 
@@ -61,15 +69,98 @@
     </div>
 
     <!-- Location Map -->
-    <div id="mapCard" class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
+    <div id="mapCard" class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6 hidden">
         <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Location</h2>
-        <div id="unit-map" class="w-full h-64 rounded-lg mb-4"></div>
+        <div id="unit-map" style="height: 400px; width: 100%;" class="rounded-lg mb-4"></div>
         <p id="locationText" class="text-sm text-gray-500 dark:text-gray-400"></p>
     </div>
 
-    <!-- Edit Unit Form -->
-    <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
+    <!-- View Mode: Unit Information (Default) -->
+    <div id="viewMode" class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
         <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">Unit Information</h2>
+
+        <div class="space-y-6">
+            <!-- Basic Info Grid -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                    <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Device Type</label>
+                    <p id="viewDeviceType" class="mt-1 text-gray-900 dark:text-white font-medium">--</p>
+                </div>
+                <div>
+                    <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Unit Type</label>
+                    <p id="viewUnitType" class="mt-1 text-gray-900 dark:text-white font-medium">--</p>
+                </div>
+                <div>
+                    <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Project ID</label>
+                    <p id="viewProjectId" class="mt-1 text-gray-900 dark:text-white font-medium">--</p>
+                </div>
+                <div>
+                    <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Address</label>
+                    <p id="viewAddress" class="mt-1 text-gray-900 dark:text-white font-medium">--</p>
+                </div>
+                <div class="md:col-span-2">
+                    <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Coordinates</label>
+                    <p id="viewCoordinates" class="mt-1 text-gray-900 dark:text-white font-medium font-mono text-sm">--</p>
+                </div>
+            </div>
+
+            <!-- Seismograph Info -->
+            <div id="viewSeismographFields" class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Seismograph Information</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Last Calibrated</label>
+                        <p id="viewLastCalibrated" class="mt-1 text-gray-900 dark:text-white font-medium">--</p>
+                    </div>
+                    <div>
+                        <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Next Calibration Due</label>
+                        <p id="viewNextCalibrationDue" class="mt-1 text-gray-900 dark:text-white font-medium">--</p>
+                    </div>
+                    <div>
+                        <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Deployed With Modem</label>
+                        <p id="viewDeployedWithModemId" class="mt-1 text-gray-900 dark:text-white font-medium">--</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Modem Info -->
+            <div id="viewModemFields" class="hidden border-t border-gray-200 dark:border-gray-700 pt-6">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Modem Information</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="text-sm font-medium text-gray-500 dark:text-gray-400">IP Address</label>
+                        <p id="viewIpAddress" class="mt-1 text-gray-900 dark:text-white font-medium">--</p>
+                    </div>
+                    <div>
+                        <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Phone Number</label>
+                        <p id="viewPhoneNumber" class="mt-1 text-gray-900 dark:text-white font-medium">--</p>
+                    </div>
+                    <div>
+                        <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Hardware Model</label>
+                        <p id="viewHardwareModel" class="mt-1 text-gray-900 dark:text-white font-medium">--</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Notes -->
+            <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Notes</label>
+                <p id="viewNote" class="mt-1 text-gray-900 dark:text-white whitespace-pre-wrap">--</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Edit Mode: Unit Information Form (Hidden by default) -->
+    <div id="editMode" class="hidden rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
+        <div class="flex justify-between items-center mb-6">
+            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Edit Unit Information</h2>
+            <button onclick="cancelEdit()" 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>
+
         <form id="editForm" class="space-y-6">
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <!-- Device Type -->
@@ -96,12 +187,19 @@
                         class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
                 </div>
 
-                <!-- Location -->
+                <!-- Address -->
                 <div>
-                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Location</label>
-                    <input type="text" name="location" id="location"
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Address</label>
+                    <input type="text" name="address" id="address" placeholder="123 Main St, City, State"
                         class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
                 </div>
+
+                <!-- Coordinates -->
+                <div class="md:col-span-2">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Coordinates</label>
+                    <input type="text" name="coordinates" id="coordinates" placeholder="34.0522,-118.2437"
+                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange font-mono">
+                </div>
             </div>
 
             <!-- Seismograph Fields -->
@@ -169,14 +267,14 @@
                     class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange"></textarea>
             </div>
 
-            <!-- Save Button -->
+            <!-- Save/Cancel Buttons -->
             <div class="flex gap-3">
                 <button type="submit" class="flex-1 px-6 py-3 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg font-medium transition-colors">
                     Save Changes
                 </button>
-                <a href="/roster" class="px-6 py-3 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 text-gray-700 dark:text-white rounded-lg font-medium transition-colors">
+                <button type="button" onclick="cancelEdit()" class="px-6 py-3 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 text-gray-700 dark:text-white rounded-lg font-medium transition-colors">
                     Cancel
-                </a>
+                </button>
             </div>
         </form>
     </div>
@@ -185,69 +283,137 @@
 <script>
 const unitId = "{{ unit_id }}";
 let currentUnit = null;
+let currentSnapshot = null;
+let unitMap = null;
+let mapMarker = null;
 
 // Load unit data on page load
 async function loadUnitData() {
     try {
-        const response = await fetch(`/api/roster/${unitId}`);
-        if (!response.ok) {
+        // Fetch unit roster data
+        const rosterResponse = await fetch(`/api/roster/${unitId}`);
+        if (!rosterResponse.ok) {
             throw new Error('Unit not found');
         }
+        currentUnit = await rosterResponse.json();
 
-        currentUnit = await response.json();
-        populateForm();
+        // Fetch snapshot data for status info
+        const snapshotResponse = await fetch('/api/status-snapshot');
+        if (snapshotResponse.ok) {
+            currentSnapshot = await snapshotResponse.json();
+        }
+
+        // Populate views
+        populateViewMode();
+        populateEditForm();
 
         // Hide loading, show content
         document.getElementById('loadingState').classList.add('hidden');
         document.getElementById('mainContent').classList.remove('hidden');
+
+        // Initialize map after content is visible
+        setTimeout(() => {
+            initUnitMap();
+        }, 100);
     } catch (error) {
         alert(`Error loading unit: ${error.message}`);
         window.location.href = '/roster';
     }
 }
 
-// Populate form with unit data
-function populateForm() {
+// Populate view mode (read-only display)
+function populateViewMode() {
     // Update page title
     document.getElementById('pageTitle').textContent = `Unit ${currentUnit.id}`;
 
-    // Status info
-    const statusColors = {
-        'OK': 'bg-green-500',
-        'Pending': 'bg-yellow-500',
-        'Missing': 'bg-red-500'
-    };
-    document.getElementById('statusIndicator').className = `w-3 h-3 rounded-full ${statusColors.OK || 'bg-gray-400'}`;
-    document.getElementById('statusText').textContent = 'No status data';
-    document.getElementById('lastSeen').textContent = '--';
-    document.getElementById('age').textContent = '--';
+    // Get status info from snapshot
+    let unitStatus = null;
+    if (currentSnapshot && currentSnapshot.units) {
+        unitStatus = currentSnapshot.units[unitId];
+    }
+
+    // Status card
+    if (unitStatus) {
+        const statusColors = {
+            'OK': 'bg-green-500',
+            'Pending': 'bg-yellow-500',
+            'Missing': 'bg-red-500'
+        };
+        const statusTextColors = {
+            'OK': 'text-green-600 dark:text-green-400',
+            'Pending': 'text-yellow-600 dark:text-yellow-400',
+            'Missing': 'text-red-600 dark:text-red-400'
+        };
+
+        document.getElementById('statusIndicator').className = `w-3 h-3 rounded-full ${statusColors[unitStatus.status] || 'bg-gray-400'}`;
+        document.getElementById('statusText').className = `font-semibold ${statusTextColors[unitStatus.status] || 'text-gray-600'}`;
+        document.getElementById('statusText').textContent = unitStatus.status || 'Unknown';
+        document.getElementById('lastSeen').textContent = unitStatus.last || '--';
+        document.getElementById('age').textContent = unitStatus.age || '--';
+    } else {
+        document.getElementById('statusIndicator').className = 'w-3 h-3 rounded-full bg-gray-400';
+        document.getElementById('statusText').className = 'font-semibold text-gray-600 dark:text-gray-400';
+        document.getElementById('statusText').textContent = 'No status data';
+        document.getElementById('lastSeen').textContent = '--';
+        document.getElementById('age').textContent = '--';
+    }
+
     document.getElementById('deployedStatus').textContent = currentUnit.deployed ? 'Yes' : 'No';
     document.getElementById('retiredStatus').textContent = currentUnit.retired ? 'Yes' : 'No';
 
-    // Form fields
-    document.getElementById('deviceType').value = currentUnit.device_type;
-    document.getElementById('unitType').value = currentUnit.unit_type;
-    document.getElementById('projectId').value = currentUnit.project_id;
-    document.getElementById('location').value = currentUnit.location;
-    document.getElementById('deployed').checked = currentUnit.deployed;
-    document.getElementById('retired').checked = currentUnit.retired;
-    document.getElementById('note').value = currentUnit.note;
+    // Basic info
+    document.getElementById('viewDeviceType').textContent = currentUnit.device_type || '--';
+    document.getElementById('viewUnitType').textContent = currentUnit.unit_type || '--';
+    document.getElementById('viewProjectId').textContent = currentUnit.project_id || '--';
+    document.getElementById('viewAddress').textContent = currentUnit.address || '--';
+    document.getElementById('viewCoordinates').textContent = currentUnit.coordinates || '--';
 
     // Seismograph fields
-    document.getElementById('lastCalibrated').value = currentUnit.last_calibrated;
-    document.getElementById('nextCalibrationDue').value = currentUnit.next_calibration_due;
-    document.getElementById('deployedWithModemId').value = currentUnit.deployed_with_modem_id;
+    document.getElementById('viewLastCalibrated').textContent = currentUnit.last_calibrated || '--';
+    document.getElementById('viewNextCalibrationDue').textContent = currentUnit.next_calibration_due || '--';
+    document.getElementById('viewDeployedWithModemId').textContent = currentUnit.deployed_with_modem_id || '--';
 
     // Modem fields
-    document.getElementById('ipAddress').value = currentUnit.ip_address;
-    document.getElementById('phoneNumber').value = currentUnit.phone_number;
-    document.getElementById('hardwareModel').value = currentUnit.hardware_model;
+    document.getElementById('viewIpAddress').textContent = currentUnit.ip_address || '--';
+    document.getElementById('viewPhoneNumber').textContent = currentUnit.phone_number || '--';
+    document.getElementById('viewHardwareModel').textContent = currentUnit.hardware_model || '--';
+
+    // Notes
+    document.getElementById('viewNote').textContent = currentUnit.note || '--';
+
+    // Show/hide fields based on device type
+    if (currentUnit.device_type === 'modem') {
+        document.getElementById('viewSeismographFields').classList.add('hidden');
+        document.getElementById('viewModemFields').classList.remove('hidden');
+    } else {
+        document.getElementById('viewSeismographFields').classList.remove('hidden');
+        document.getElementById('viewModemFields').classList.add('hidden');
+    }
+}
+
+// Populate edit form
+function populateEditForm() {
+    document.getElementById('deviceType').value = currentUnit.device_type || 'seismograph';
+    document.getElementById('unitType').value = currentUnit.unit_type || '';
+    document.getElementById('projectId').value = currentUnit.project_id || '';
+    document.getElementById('address').value = currentUnit.address || '';
+    document.getElementById('coordinates').value = currentUnit.coordinates || '';
+    document.getElementById('deployed').checked = currentUnit.deployed;
+    document.getElementById('retired').checked = currentUnit.retired;
+    document.getElementById('note').value = currentUnit.note || '';
+
+    // Seismograph fields
+    document.getElementById('lastCalibrated').value = currentUnit.last_calibrated || '';
+    document.getElementById('nextCalibrationDue').value = currentUnit.next_calibration_due || '';
+    document.getElementById('deployedWithModemId').value = currentUnit.deployed_with_modem_id || '';
+
+    // Modem fields
+    document.getElementById('ipAddress').value = currentUnit.ip_address || '';
+    document.getElementById('phoneNumber').value = currentUnit.phone_number || '';
+    document.getElementById('hardwareModel').value = currentUnit.hardware_model || '';
 
     // Show/hide fields based on device type
     toggleDetailFields();
-
-    // Update map with unit location
-    updateUnitMap(currentUnit);
 }
 
 // Toggle device-specific fields
@@ -265,6 +431,23 @@ function toggleDetailFields() {
     }
 }
 
+// Enter edit mode
+function enterEditMode() {
+    document.getElementById('viewMode').classList.add('hidden');
+    document.getElementById('editMode').classList.remove('hidden');
+    document.getElementById('editButton').classList.add('hidden');
+}
+
+// Cancel edit mode
+function cancelEdit() {
+    document.getElementById('editMode').classList.add('hidden');
+    document.getElementById('viewMode').classList.remove('hidden');
+    document.getElementById('editButton').classList.remove('hidden');
+
+    // Reset form to current values
+    populateEditForm();
+}
+
 // Handle form submission
 document.getElementById('editForm').addEventListener('submit', async function(e) {
     e.preventDefault();
@@ -279,7 +462,9 @@ document.getElementById('editForm').addEventListener('submit', async function(e)
 
         if (response.ok) {
             alert('Unit updated successfully!');
-            loadUnitData(); // Reload data
+            // Reload data and return to view mode
+            await loadUnitData();
+            cancelEdit();
         } else {
             const result = await response.json();
             alert(`Error: ${result.detail || 'Unknown error'}`);
@@ -312,61 +497,84 @@ async function deleteUnit() {
     }
 }
 
-// Initialize unit location map
-let unitMap = null;
-
+// Initialize unit location map (only called once)
 function initUnitMap() {
-    // Default center (will be updated when location is loaded)
-    unitMap = L.map('unit-map').setView([39.8283, -98.5795], 4);
-
-    // Add OpenStreetMap tiles
-    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        attribution: '© OpenStreetMap contributors',
-        maxZoom: 18
-    }).addTo(unitMap);
-}
-
-function updateUnitMap(unit) {
-    if (!unit.location || !unitMap) {
+    if (!currentUnit.coordinates) {
         document.getElementById('mapCard').classList.add('hidden');
         return;
     }
 
-    const coords = parseLocation(unit.location);
-    if (coords) {
-        const [lat, lon] = coords;
-
-        // Show the map card
-        document.getElementById('mapCard').classList.remove('hidden');
-
-        // Center map on unit location
-        unitMap.setView([lat, lon], 13);
-
-        // Add marker with unit info
-        const statusColor = unit.status === 'OK' ? 'green' : unit.status === 'Pending' ? 'orange' : 'red';
-
-        L.circleMarker([lat, lon], {
-            radius: 10,
-            fillColor: statusColor,
-            color: '#fff',
-            weight: 3,
-            opacity: 1,
-            fillOpacity: 0.8
-        }).addTo(unitMap).bindPopup(`
-            <div class="p-2">
-                <h3 class="font-bold text-lg">${unit.id}</h3>
-                <p class="text-sm">Status: <span style="color: ${statusColor}">${unit.status || 'Unknown'}</span></p>
-                <p class="text-sm">Type: ${unit.device_type}</p>
-            </div>
-        `).openPopup();
-
-        // Update location text
-        document.getElementById('locationText').textContent = `Coordinates: ${lat.toFixed(6)}, ${lon.toFixed(6)}`;
-    } else {
-        // Show map card but indicate location not mappable
-        document.getElementById('mapCard').classList.remove('hidden');
-        document.getElementById('locationText').textContent = `Location: ${unit.location} (coordinates not available)`;
+    const coords = parseLocation(currentUnit.coordinates);
+    if (!coords) {
+        document.getElementById('mapCard').classList.add('hidden');
+        return;
     }
+
+    const [lat, lon] = coords;
+
+    // Show the map card
+    document.getElementById('mapCard').classList.remove('hidden');
+
+    // Only initialize map if it doesn't exist
+    if (!unitMap) {
+        // Initialize map
+        unitMap = L.map('unit-map').setView([lat, lon], 13);
+
+        // Add OpenStreetMap tiles
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+            maxZoom: 18
+        }).addTo(unitMap);
+
+        // Force map to update its size
+        setTimeout(() => {
+            unitMap.invalidateSize();
+        }, 100);
+    }
+
+    // Update marker (can be called multiple times)
+    updateMapMarker(lat, lon);
+
+    // Update location text
+    const locationParts = [];
+    if (currentUnit.address) {
+        locationParts.push(currentUnit.address);
+    }
+    locationParts.push(`Coordinates: ${lat.toFixed(6)}, ${lon.toFixed(6)}`);
+    document.getElementById('locationText').textContent = locationParts.join(' • ');
+}
+
+// Update map marker with current status
+function updateMapMarker(lat, lon) {
+    // Remove old marker if it exists
+    if (mapMarker) {
+        mapMarker.remove();
+    }
+
+    // Get status color
+    let statusColor = 'gray';
+    let status = 'Unknown';
+    if (currentSnapshot && currentSnapshot.units && currentSnapshot.units[unitId]) {
+        const unitStatus = currentSnapshot.units[unitId];
+        status = unitStatus.status || 'Unknown';
+        statusColor = status === 'OK' ? 'green' : status === 'Pending' ? 'orange' : status === 'Missing' ? 'red' : 'gray';
+    }
+
+    // Add new marker
+    mapMarker = L.circleMarker([lat, lon], {
+        radius: 10,
+        fillColor: statusColor,
+        color: '#fff',
+        weight: 3,
+        opacity: 1,
+        fillOpacity: 0.8
+    }).addTo(unitMap).bindPopup(`
+        <div class="p-2">
+            <h3 class="font-bold text-lg">${currentUnit.id}</h3>
+            <p class="text-sm">Status: <span style="color: ${statusColor}">${status}</span></p>
+            <p class="text-sm">Type: ${currentUnit.device_type}</p>
+        </div>
+    `).openPopup();
 }
 
 function parseLocation(location) {
@@ -377,17 +585,15 @@ function parseLocation(location) {
     if (parts.length === 2) {
         const lat = parseFloat(parts[0]);
         const lon = parseFloat(parts[1]);
-        if (!isNaN(lat) && !isNaN(lon)) {
+        if (!isNaN(lat) && !isNaN(lon) && lat >= -90 && lat <= 90 && lon >= -180 && lon <= 180) {
             return [lat, lon];
         }
     }
 
-    // TODO: Add geocoding support for address strings
     return null;
 }
 
 // Load data when page loads
-initUnitMap();
 loadUnitData();
 </script>
 {% endblock %}
-- 
2.49.1


From 83593f7b33d1f6d2b85ab364024c69ad4b42186f Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Wed, 3 Dec 2025 22:16:56 +0000
Subject: [PATCH 11/29] update docs

---
 CHANGELOG.md |  39 +++++++++++-
 README.md    | 168 +++++++++++++++++++++++++++++++++++++++++++--------
 2 files changed, 179 insertions(+), 28 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 858c54f..cfe0043 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,39 @@ All notable changes to Seismo Fleet Manager will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.1] - 2025-12-03
+
+### Added
+- `/settings` roster manager page with CSV export/import, live stats, and danger-zone reset controls.
+- `/api/settings` router that exposes `export-csv`, `stats`, `roster-units`, `import-csv-replace`, and the clear-* endpoints backing the UI.
+- Dedicated HTMX partials/tabs for deployed, benched, retired, and ignored units plus new ignored-table UI to unignore or delete entries.
+
+### Changed
+- Roster and unit detail templates now display device-type specific metadata (calibration windows, modem pairings, IP/phone fields) alongside inline actions.
+- Base navigation highlights the new settings workflow and routes retired/ignored buckets through dedicated endpoints + partials.
+
+### Fixed
+- Snapshot summary counts only consider deployed units, preventing dashboard alerts from including benched hardware.
+- Snapshot payloads now include address/coordinate metadata so map widgets and CSV exports stay accurate.
+
+## [0.2.0] - 2025-12-03
+
+### Added
+- Device-type aware roster schema (seismographs vs modems) with new metadata columns plus `backend/migrate_add_device_types.py` for upgrading existing SQLite files.
+- `create_test_db.py` helper that generates a ready-to-use demo database with sample seismographs, modems, and emitter rows.
+- Ignore list persistence/API so noisy legacy emitters can be quarantined via `/api/roster/ignore` and surfaced in the UI.
+- Roster page enhancements: Add Unit modal, CSV import modal, and HTMX-powered table fed by `/partials/roster-table`.
+- Unit detail view rewritten to fetch data via API, expose deployment status, and allow edits to all metadata.
+
+### Changed
+- Snapshot service now merges roster + emitter data into active/benched/retired/unknown buckets and includes device-specific metadata in each record.
+- Roster edit endpoints parse date fields, manage modem/seismograph specific attributes, and guarantee records exist when toggling deployed/retired states.
+- Dashboard partial endpoints are grouped under `/dashboard/*` so HTMX tabs stay in sync with the consolidated snapshot payload.
+
+### Fixed
+- Toggling deployed/retired flags no longer fails when a unit does not exist because the router now auto-creates placeholder roster rows.
+- CSV import applies address/coordinate updates instead of silently dropping unknown columns.
+
 ## [0.1.1] - 2025-12-02
 
 ### Added
@@ -59,5 +92,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Photo management per unit
 - Automated status categorization (OK/Pending/Missing)
 
-[0.1.1]: https://github.com/yourusername/seismo-fleet-manager/compare/v0.1.0...v0.1.1
-[0.1.0]: https://github.com/yourusername/seismo-fleet-manager/releases/tag/v0.1.0
+[0.2.1]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.2.0...v0.2.1
+[0.2.0]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.1.1...v0.2.0
+[0.1.1]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.1.0...v0.1.1
+[0.1.0]: https://github.com/serversdwn/seismo-fleet-manager/releases/tag/v0.1.0
diff --git a/README.md b/README.md
index 115d204..5bc60c8 100644
--- a/README.md
+++ b/README.md
@@ -1,18 +1,31 @@
-# Seismo Fleet Manager v0.1.1
+# Seismo Fleet Manager v0.2.1
 
-Backend API and web interface for managing seismograph fleet status. Track multiple seismographs calling in data from remote deployments, monitor their status, and manage your fleet through a unified database.
+Backend API and HTMX-powered web interface for managing a mixed fleet of seismographs and field modems. Track deployments, monitor health in real time, merge roster intent with incoming telemetry, and control your fleet through a unified database and dashboard.
 
 ## Features
 
-- **Web Dashboard**: Modern, responsive UI with dark/light mode support
-- **Fleet Monitoring**: Track all seismograph units in one place
-- **Roster Management**: Full CRUD operations via API or CSV import *(New in v0.1.1)*
-- **Status Management**: Automatically mark units as OK, Pending (>12h), or Missing (>24h)
+- **Web Dashboard**: Modern, responsive UI with dark/light mode, live HTMX updates, and integrated fleet map
+- **Fleet Monitoring**: Track deployed, benched, retired, and ignored units in separate buckets with unknown-emitter triage
+- **Roster Management**: Full CRUD + CSV import/export, device-type aware metadata, and inline actions from the roster tables
+- **Settings & Safeguards**: `/settings` page exposes roster stats, exports, replace-all imports, and danger-zone reset tools
+- **Device & Modem Metadata**: Capture calibration windows, modem pairings, phone/IP details, and addresses per unit
+- **Status Management**: Automatically mark deployed units as OK, Pending (>12h), or Missing (>24h) based on recent telemetry
 - **Data Ingestion**: Accept reports from emitter scripts via REST API
 - **Photo Management**: Upload and view photos for each unit
 - **Interactive Maps**: Leaflet-based maps showing unit locations
 - **SQLite Storage**: Lightweight, file-based database for easy deployment
 
+## Roster Manager & Settings
+
+Visit [`/settings`](http://localhost:8001/settings) to perform bulk roster operations with guardrails:
+
+- **CSV export/import**: Download the entire roster, merge updates, or replace all units in one transaction.
+- **Live roster table**: Fetch every unit via HTMX, edit metadata, toggle deployed/retired states, move emitters to the ignore list, or delete records in-place.
+- **Stats at a glance**: View counts for the roster, emitters, and ignored units to confirm import/cleanup operations worked.
+- **Danger zone controls**: Clear specific tables or wipe all fleet data when resetting a lab/demo environment.
+
+All UI actions call `GET/POST /api/settings/*` endpoints so you can automate the same workflows from scripts.
+
 ## Tech Stack
 
 - **FastAPI**: Modern, fast web framework
@@ -76,12 +89,34 @@ The SQLite database and photos are stored in the `./data` directory, which is mo
 
 The application will be available at http://localhost:8001
 
+### Optional: Generate Sample Data
+
+Need realistic data quickly? Run:
+
+```bash
+python create_test_db.py
+cp /tmp/sfm_test.db data/seismo_fleet.db
+```
+
+The helper script creates a modem/seismograph mix so you can exercise the dashboard, roster tabs, and unit detail screens immediately.
+
+## Upgrading from v0.1.x
+
+Versions ≥0.2 introduce new roster columns (device_type, calibration dates, modem metadata, addresses, etc.). Run the migration once per database file before starting the app:
+
+```bash
+python backend/migrate_add_device_types.py
+```
+
+The script is idempotent—if the new columns already exist it simply exits.
+
 ## API Endpoints
 
 ### Web Pages
 - **GET** `/` - Dashboard home page
 - **GET** `/roster` - Fleet roster page
 - **GET** `/unit/{unit_id}` - Unit detail page
+- **GET** `/settings` - Roster manager, CSV import/export, and danger-zone utilities
 
 ### Fleet Status & Monitoring
 - **GET** `/api/status-snapshot` - Complete fleet status snapshot
@@ -89,34 +124,61 @@ The application will be available at http://localhost:8001
 - **GET** `/api/unit/{unit_id}` - Detailed unit information
 - **GET** `/health` - Health check endpoint
 
-### Roster Management *(New in v0.1.1)*
+### Roster Management
 - **POST** `/api/roster/add` - Add new unit to roster
   ```bash
   curl -X POST http://localhost:8001/api/roster/add \
     -F "id=BE1234" \
+    -F "device_type=seismograph" \
     -F "unit_type=series3" \
+    -F "project_id=PROJ-001" \
     -F "deployed=true" \
     -F "note=Main site sensor"
   ```
+- **GET** `/api/roster/{unit_id}` - Fetch a single roster entry for editing
+- **POST** `/api/roster/edit/{unit_id}` - Update all metadata (device type, calibration dates, modem fields, etc.)
 - **POST** `/api/roster/set-deployed/{unit_id}` - Toggle deployment status
 - **POST** `/api/roster/set-retired/{unit_id}` - Toggle retired status
 - **POST** `/api/roster/set-note/{unit_id}` - Update unit notes
-- **POST** `/api/roster/import-csv` - Bulk import from CSV
+- **DELETE** `/api/roster/{unit_id}` - Remove a roster/emitter pair entirely
+- **POST** `/api/roster/import-csv` - Bulk import from CSV (merge/update mode)
   ```bash
   curl -X POST http://localhost:8001/api/roster/import-csv \
     -F "file=@roster.csv" \
     -F "update_existing=true"
   ```
+- **POST** `/api/roster/ignore/{unit_id}` - Move an unknown emitter to the ignore list
+- **DELETE** `/api/roster/ignore/{unit_id}` - Remove a unit from the ignore list
+- **GET** `/api/roster/ignored` - List all ignored units with reasons
+
+### Settings & Data Management
+- **GET** `/api/settings/export-csv` - Download the entire roster as CSV
+- **GET** `/api/settings/stats` - Counts for roster, emitters, and ignored tables
+- **GET** `/api/settings/roster-units` - Raw roster dump for the settings data grid
+- **POST** `/api/settings/import-csv-replace` - Replace the entire roster in one atomic transaction
+- **POST** `/api/settings/clear-all` - Danger-zone action that wipes roster, emitters, and ignored tables
+- **POST** `/api/settings/clear-roster` - Delete only roster entries
+- **POST** `/api/settings/clear-emitters` - Delete auto-discovered emitters
+- **POST** `/api/settings/clear-ignored` - Reset ignore list
 
 ### CSV Import Format
-Create a CSV file with the following columns (only `unit_id` is required):
-```csv
-unit_id,unit_type,deployed,retired,note,project_id,location
-BE1234,series3,true,false,Primary sensor,PROJ-001,San Francisco CA
-BE5678,series3,true,false,Backup sensor,PROJ-001,Los Angeles CA
+Create a CSV file with the following columns (only `unit_id` is required, everything else is optional):
+
+```
+unit_id,unit_type,device_type,deployed,retired,note,project_id,location,address,coordinates,last_calibrated,next_calibration_due,deployed_with_modem_id,ip_address,phone_number,hardware_model
 ```
 
-See [sample_roster.csv](sample_roster.csv) for a working example.
+Boolean columns accept `true/false`, `1/0`, or `yes/no` (case-insensitive). Date columns expect `YYYY-MM-DD`. Use the same schema whether you merge via `/api/roster/import-csv` or replace everything with `/api/settings/import-csv-replace`.
+
+#### Example
+
+```csv
+unit_id,unit_type,device_type,deployed,retired,note,project_id,location,address,coordinates,last_calibrated,next_calibration_due,deployed_with_modem_id,ip_address,phone_number,hardware_model
+BE1234,series3,seismograph,true,false,Primary sensor,PROJ-001,"Station A","123 Market St, San Francisco, CA","37.7937,-122.3965",2025-01-15,2026-01-15,MDM001,,,
+MDM001,modem,modem,true,false,Field modem,PROJ-001,"Station A","123 Market St, San Francisco, CA","37.7937,-122.3965",,,,"192.0.2.10","+1-555-0100","Raven XTV"
+```
+
+See [sample_roster.csv](sample_roster.csv) for a minimal working example.
 
 ### Emitter Reporting
 - **POST** `/emitters/report` - Submit status report from a seismograph unit
@@ -199,30 +261,59 @@ print(response.json())
 
 ## Data Model
 
-### RosterUnit Table (Your Fleet Roster)
+### RosterUnit Table (Fleet Roster)
+
+**Common fields**
 
 | Field | Type | Description |
 |-------|------|-------------|
 | id | string | Unit identifier (primary key) |
-| unit_type | string | Type of seismograph (default: "series3") |
-| deployed | boolean | Whether unit is deployed in field |
-| retired | boolean | Whether unit is retired from service |
+| unit_type | string | Hardware model name (default: `series3`) |
+| device_type | string | `seismograph` or `modem` discriminator |
+| deployed | boolean | Whether the unit is in the field |
+| retired | boolean | Removes the unit from deployments but preserves history |
 | note | string | Notes about the unit |
 | project_id | string | Associated project identifier |
-| location | string | Deployment location description |
+| location | string | Legacy location label |
+| address | string | Human-readable address |
+| coordinates | string | `lat,lon` pair used by the map |
 | last_updated | datetime | Last modification timestamp |
 
+**Seismograph-only fields**
+
+| Field | Type | Description |
+|-------|------|-------------|
+| last_calibrated | date | Last calibration date |
+| next_calibration_due | date | Next calibration date |
+| deployed_with_modem_id | string | Which modem is paired during deployment |
+
+**Modem-only fields**
+
+| Field | Type | Description |
+|-------|------|-------------|
+| ip_address | string | Assigned IP (static or DHCP) |
+| phone_number | string | Cellular number for the modem |
+| hardware_model | string | Modem hardware reference |
+
 ### Emitter Table (Device Check-ins)
 
 | Field | Type | Description |
 |-------|------|-------------|
 | id | string | Unit identifier (primary key) |
-| unit_type | string | Type of seismograph (e.g., "series3") |
+| unit_type | string | Reported device type/model |
 | last_seen | datetime | Last report timestamp |
 | last_file | string | Last file processed |
 | status | string | Current status: OK, Pending, Missing |
 | notes | string | Optional notes (nullable) |
 
+### IgnoredUnit Table (Noise Management)
+
+| Field | Type | Description |
+|-------|------|-------------|
+| id | string | Unit identifier (primary key) |
+| reason | string | Optional context for ignoring |
+| ignored_at | datetime | When the ignore action occurred |
+
 ## Project Structure
 
 ```
@@ -230,7 +321,7 @@ seismo-fleet-manager/
 ├── backend/
 │   ├── main.py              # FastAPI app entry point
 │   ├── database.py          # SQLAlchemy database configuration
-│   ├── models.py            # Database models (RosterUnit, Emitter)
+│   ├── models.py            # Database models (RosterUnit, Emitter, IgnoredUnit)
 │   ├── routes.py            # Legacy API endpoints
 │   ├── routers/             # Modular API routers
 │   │   ├── roster.py        # Fleet status endpoints
@@ -238,16 +329,24 @@ seismo-fleet-manager/
 │   │   ├── units.py         # Unit detail endpoints
 │   │   ├── photos.py        # Photo management
 │   │   ├── dashboard.py     # Dashboard partials
-│   │   └── dashboard_tabs.py # Dashboard tab endpoints
+│   │   ├── dashboard_tabs.py # Dashboard tab endpoints
+│   │   └── settings.py      # Roster manager/data operations
 │   ├── services/
 │   │   └── snapshot.py      # Fleet status snapshot logic
+│   ├── migrate_add_device_types.py # SQLite migration for v0.2 schema
 │   └── static/              # Static assets (CSS, etc.)
+├── create_test_db.py        # Generate a sample SQLite DB with mixed devices
 ├── templates/               # Jinja2 HTML templates
 │   ├── base.html            # Base layout with sidebar
 │   ├── dashboard.html       # Main dashboard
 │   ├── roster.html          # Fleet roster table
 │   ├── unit_detail.html     # Unit detail page
+│   ├── settings.html        # Roster manager UI
 │   └── partials/            # HTMX partial templates
+│       ├── roster_table.html
+│       ├── retired_table.html
+│       ├── ignored_table.html
+│       └── unknown_emitters.html
 ├── data/                    # SQLite database & photos (persisted)
 ├── requirements.txt         # Python dependencies
 ├── Dockerfile               # Docker container definition
@@ -299,15 +398,28 @@ docker compose down
 docker compose down -v
 ```
 
-## What's New in v0.1.1
+## Release Highlights
 
+### v0.2.1 — 2025-12-03
+- Added the `/settings` roster manager with CSV export/import, live stats, and danger-zone table reset actions.
+- Deployed/Benched/Retired/Ignored tabs now have dedicated HTMX partials, sorting, and inline actions (edit, deploy toggle, ignore, delete).
+- Unit detail pages expose device-type specific metadata (calibration windows, modem pairing, IP/phone fields) with a refreshed editing experience.
+- Snapshot summary and dashboard counts now focus on deployed units and include address/coordinate data for mapping widgets.
+
+### v0.2.0 — 2025-12-03
+- Introduced device-type aware roster schema (seismograph vs modem) plus migration + `create_test_db.py` helper for new installs.
+- Added Ignore list model/endpoints to quarantine noisy emitters directly from the roster.
+- Roster page gained Add Unit + CSV Import modals, HTMX-driven updates, and unknown emitter callouts.
+- Snapshot service now returns active/benched/retired/unknown buckets containing richer metadata for the dashboard and roster tabs.
+
+### v0.1.1 — 2025-12-02
 - **Roster Editing API**: Full CRUD operations for managing your fleet roster
 - **CSV Import**: Bulk upload roster data from CSV files
 - **Enhanced Data Model**: Added project_id and location fields to roster
 - **Bug Fixes**: Improved database session management and error handling
 - **Dashboard Improvements**: Separate views for Active, Benched, and Retired units
 
-See [CHANGELOG.md](CHANGELOG.md) for complete version history.
+See [CHANGELOG.md](CHANGELOG.md) for the full release notes.
 
 ## Future Enhancements
 
@@ -325,6 +437,10 @@ MIT
 
 ## Version
 
-**Current: 0.1.1** - Roster Management & CSV Import (2025-12-02)
+**Current: 0.2.1** — Settings & roster manager refresh (2025-12-03)
 
-Previous: 0.1.0 - Initial Release (2024-11-20)
+Previous: 0.2.0 — Device-type aware roster + ignore list (2025-12-03)
+
+0.1.1 — Roster Management & CSV Import (2025-12-02)
+
+0.1.0 — Initial Release (2024-11-20)
-- 
2.49.1


From 690669c697715f5bd81adfec27e8aad24c277e10 Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Mon, 8 Dec 2025 22:15:54 +0000
Subject: [PATCH 12/29] v0.2.2-series4 endpoint added, dev branch set up at
 :1001

---
 backend/main.py                |  25 ++++++-
 backend/routers/roster_edit.py |  10 ++-
 backend/routes.py              | 129 ++++++++++++++++++++++++++++++++-
 backend/services/snapshot.py   |   6 +-
 docker-compose.yml             |  26 ++++++-
 sfm.code-workspace             |   7 ++
 templates/base.html            |   9 ++-
 templates/dashboard.html       |   7 ++
 8 files changed, 206 insertions(+), 13 deletions(-)
 create mode 100644 sfm.code-workspace

diff --git a/backend/main.py b/backend/main.py
index e9264e8..4b5a155 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -1,3 +1,4 @@
+import os
 from fastapi import FastAPI, Request, Depends
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
@@ -13,11 +14,15 @@ from backend.models import IgnoredUnit
 # Create database tables
 Base.metadata.create_all(bind=engine)
 
+# Read environment (development or production)
+ENVIRONMENT = os.getenv("ENVIRONMENT", "production")
+
 # Initialize FastAPI app
+VERSION = "0.2.2"
 app = FastAPI(
     title="Seismo Fleet Manager",
     description="Backend API for managing seismograph fleet status",
-    version="0.1.1"
+    version=VERSION
 )
 
 # Configure CORS
@@ -35,6 +40,24 @@ app.mount("/static", StaticFiles(directory="backend/static"), name="static")
 # Setup Jinja2 templates
 templates = Jinja2Templates(directory="templates")
 
+# Add custom context processor to inject environment variable into all templates
+@app.middleware("http")
+async def add_environment_to_context(request: Request, call_next):
+    """Middleware to add environment variable to request state"""
+    request.state.environment = ENVIRONMENT
+    response = await call_next(request)
+    return response
+
+# 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
+
 # Include API routers
 app.include_router(roster.router)
 app.include_router(units.router)
diff --git a/backend/routers/roster_edit.py b/backend/routers/roster_edit.py
index 82f2061..e1ab7ca 100644
--- a/backend/routers/roster_edit.py
+++ b/backend/routers/roster_edit.py
@@ -202,7 +202,7 @@ def set_retired(unit_id: str, retired: bool = Form(...), db: Session = Depends(g
 def delete_roster_unit(unit_id: str, db: Session = Depends(get_db)):
     """
     Permanently delete a unit from the database.
-    Checks both roster and emitters tables and deletes from any table where the unit exists.
+    Checks roster, emitters, and ignored_units tables and deletes from any table where the unit exists.
     """
     deleted = False
 
@@ -218,7 +218,13 @@ def delete_roster_unit(unit_id: str, db: Session = Depends(get_db)):
         db.delete(emitter)
         deleted = True
 
-    # If not found in either table, return error
+    # Try to delete from ignored_units table
+    ignored_unit = db.query(IgnoredUnit).filter(IgnoredUnit.id == unit_id).first()
+    if ignored_unit:
+        db.delete(ignored_unit)
+        deleted = True
+
+    # If not found in any table, return error
     if not deleted:
         raise HTTPException(status_code=404, detail="Unit not found")
 
diff --git a/backend/routes.py b/backend/routes.py
index fd39489..2c6cd8f 100644
--- a/backend/routes.py
+++ b/backend/routes.py
@@ -10,6 +10,32 @@ from backend.models import Emitter
 router = APIRouter()
 
 
+# Helper function to detect unit type from unit ID
+def detect_unit_type(unit_id: str) -> str:
+    """
+    Automatically detect if a unit is Series 3 or Series 4 based on ID pattern.
+
+    Series 4 (Micromate) units have IDs starting with "UM" followed by digits (e.g., UM11719)
+    Series 3 units typically have other patterns
+
+    Returns:
+        "series4" if the unit ID matches Micromate pattern (UM#####)
+        "series3" otherwise
+    """
+    if not unit_id:
+        return "unknown"
+
+    # Series 4 (Micromate) pattern: UM followed by digits
+    if unit_id.upper().startswith("UM") and len(unit_id) > 2:
+        # Check if remaining characters after "UM" are digits
+        rest = unit_id[2:]
+        if rest.isdigit():
+            return "series4"
+
+    # Default to series3 for other patterns
+    return "series3"
+
+
 # Pydantic schemas for request/response validation
 class EmitterReport(BaseModel):
     unit: str
@@ -138,11 +164,16 @@ async def series3_heartbeat(request: Request, db: Session = Depends(get_db)):
             emitter.last_seen = ts
             emitter.last_file = last_file
             emitter.status = status
+            # Update unit_type if it was incorrectly classified
+            detected_type = detect_unit_type(uid)
+            if emitter.unit_type != detected_type:
+                emitter.unit_type = detected_type
         else:
-            # Insert new
+            # Insert new - auto-detect unit type from ID
+            detected_type = detect_unit_type(uid)
             emitter = Emitter(
                 id=uid,
-                unit_type="series3",
+                unit_type=detected_type,
                 last_seen=ts,
                 last_file=last_file,
                 status=status
@@ -159,3 +190,97 @@ async def series3_heartbeat(request: Request, db: Session = Depends(get_db)):
         "units_processed": len(results),
         "results": results
     }
+
+
+# series4 (Micromate) Standardized Heartbeat Schema
+@router.post("/api/series4/heartbeat", status_code=200)
+async def series4_heartbeat(request: Request, db: Session = Depends(get_db)):
+    """
+    Accepts a full telemetry payload from the Series4 (Micromate) emitter.
+    Updates or inserts each unit into the database.
+
+    Expected payload:
+    {
+      "source": "series4_emitter",
+      "generated_at": "2025-12-04T20:01:00",
+      "units": [
+        {
+          "unit_id": "UM11719",
+          "type": "micromate",
+          "project_hint": "Clearwater - ECMS 57940",
+          "last_call": "2025-12-04T19:30:42",
+          "status": "OK",
+          "age_days": 0.04,
+          "age_hours": 0.9,
+          "mlg_path": "C:\\THORDATA\\..."
+        }
+      ]
+    }
+    """
+    payload = await request.json()
+
+    source = payload.get("source", "series4_emitter")
+    units = payload.get("units", [])
+
+    print("\n=== Series 4 Heartbeat ===")
+    print("Source:", source)
+    print("Units received:", len(units))
+    print("==========================\n")
+
+    results = []
+
+    for u in units:
+        uid = u.get("unit_id")
+        last_call_str = u.get("last_call")
+        status = u.get("status", "Unknown")
+        mlg_path = u.get("mlg_path")
+        project_hint = u.get("project_hint")
+
+        # Parse last_call timestamp
+        try:
+            if last_call_str:
+                ts = datetime.fromisoformat(last_call_str.replace("Z", "+00:00"))
+            else:
+                ts = None
+        except:
+            ts = None
+
+        # Pull from DB
+        emitter = db.query(Emitter).filter(Emitter.id == uid).first()
+
+        if emitter:
+            # Update existing
+            emitter.last_seen = ts
+            emitter.last_file = mlg_path
+            emitter.status = status
+            # Update unit_type if it was incorrectly classified
+            detected_type = detect_unit_type(uid)
+            if emitter.unit_type != detected_type:
+                emitter.unit_type = detected_type
+            # Optionally update notes with project hint if it exists
+            if project_hint and not emitter.notes:
+                emitter.notes = f"Project: {project_hint}"
+        else:
+            # Insert new - auto-detect unit type from ID
+            detected_type = detect_unit_type(uid)
+            notes = f"Project: {project_hint}" if project_hint else None
+            emitter = Emitter(
+                id=uid,
+                unit_type=detected_type,
+                last_seen=ts,
+                last_file=mlg_path,
+                status=status,
+                notes=notes
+            )
+            db.add(emitter)
+
+        results.append({"unit": uid, "status": status})
+
+    db.commit()
+
+    return {
+        "message": "Heartbeat processed",
+        "source": source,
+        "units_processed": len(results),
+        "results": results
+    }
diff --git a/backend/services/snapshot.py b/backend/services/snapshot.py
index 478d987..b8805f0 100644
--- a/backend/services/snapshot.py
+++ b/backend/services/snapshot.py
@@ -113,12 +113,12 @@ def emit_status_snapshot():
         # Separate buckets for UI
         active_units = {
             uid: u for uid, u in units.items()
-            if not u["retired"] and u["deployed"]
+            if not u["retired"] and u["deployed"] and uid not in ignored
         }
 
         benched_units = {
             uid: u for uid, u in units.items()
-            if not u["retired"] and not u["deployed"]
+            if not u["retired"] and not u["deployed"] and uid not in ignored
         }
 
         retired_units = {
@@ -140,7 +140,7 @@ def emit_status_snapshot():
             "retired": retired_units,
             "unknown": unknown_units,
             "summary": {
-                "total": len(units),
+                "total": len(active_units) + len(benched_units),
                 "active": len(active_units),
                 "benched": len(benched_units),
                 "retired": len(retired_units),
diff --git a/docker-compose.yml b/docker-compose.yml
index 410d866..b0c0ccf 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,16 +1,35 @@
-version: '3.8'
-
 services:
+
+  # --- PRODUCTION ---
   seismo-backend:
     build: .
     container_name: seismo-fleet-manager
     ports:
       - "8001:8001"
     volumes:
-      # Persist SQLite database and photos
       - ./data:/app/data
     environment:
       - PYTHONUNBUFFERED=1
+      - ENVIRONMENT=production
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8001/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+  # --- DEVELOPMENT ---
+  sfm-dev:
+    build: .
+    container_name: sfm-dev
+    ports:
+      - "1001:8001"
+    volumes:
+      - ./data-dev:/app/data
+    environment:
+      - PYTHONUNBUFFERED=1
+      - ENVIRONMENT=development
     restart: unless-stopped
     healthcheck:
       test: ["CMD", "curl", "-f", "http://localhost:8001/health"]
@@ -21,3 +40,4 @@ services:
 
 volumes:
   data:
+  data-dev:
diff --git a/sfm.code-workspace b/sfm.code-workspace
new file mode 100644
index 0000000..2a0ed79
--- /dev/null
+++ b/sfm.code-workspace
@@ -0,0 +1,7 @@
+{
+	"folders": [
+		{
+			"path": ".."
+		}
+	]
+}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index e2d496c..8814760 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% block title %}Seismo Fleet Manager{% endblock %}</title>
+    <title>{% if environment == 'development' %}[DEV] {% endif %}{% block title %}Seismo Fleet Manager{% endblock %}</title>
 
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
@@ -68,7 +68,12 @@
                     Seismo<br>
                     <span class="text-seismo-orange dark:text-seismo-burgundy">Fleet Manager</span>
                 </h1>
-                <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">v 0.2.1</p>
+                <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 -->
diff --git a/templates/dashboard.html b/templates/dashboard.html
index c11fd06..cdbd881 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -3,6 +3,13 @@
 {% 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">
     <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>
-- 
2.49.1


From 6fc8721830c5046df81af1c7a911c7855d7182ee Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Tue, 9 Dec 2025 02:08:00 +0000
Subject: [PATCH 13/29] settings overhaul, many QOL improvements

---
 backend/main.py                         |    2 +-
 backend/migrate_add_user_preferences.py |   80 ++
 backend/models.py                       |   24 +-
 backend/routers/settings.py             |   88 +-
 templates/base.html                     |  110 +++
 templates/dashboard.html                |   47 +-
 templates/partials/active_table.html    |    8 +-
 templates/partials/benched_table.html   |    8 +-
 templates/roster.html                   |   40 +
 templates/settings.html                 | 1072 ++++++++++++++++-------
 templates/unit_detail.html              |   57 +-
 11 files changed, 1188 insertions(+), 348 deletions(-)
 create mode 100644 backend/migrate_add_user_preferences.py

diff --git a/backend/main.py b/backend/main.py
index 4b5a155..4ca8828 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -18,7 +18,7 @@ Base.metadata.create_all(bind=engine)
 ENVIRONMENT = os.getenv("ENVIRONMENT", "production")
 
 # Initialize FastAPI app
-VERSION = "0.2.2"
+VERSION = "0.2.3"
 app = FastAPI(
     title="Seismo Fleet Manager",
     description="Backend API for managing seismograph fleet status",
diff --git a/backend/migrate_add_user_preferences.py b/backend/migrate_add_user_preferences.py
new file mode 100644
index 0000000..73a4e9c
--- /dev/null
+++ b/backend/migrate_add_user_preferences.py
@@ -0,0 +1,80 @@
+"""
+Migration script to add user_preferences table.
+
+This creates a new table for storing persistent user preferences:
+- Display settings (timezone, theme, date format)
+- Auto-refresh configuration
+- Calibration defaults
+- Status threshold customization
+
+Run this script once to migrate an existing database.
+"""
+
+import sqlite3
+import os
+
+# Database path
+DB_PATH = "./data/seismo_fleet.db"
+
+def migrate_database():
+    """Create user_preferences table"""
+
+    if not os.path.exists(DB_PATH):
+        print(f"Database not found at {DB_PATH}")
+        print("The database will be created automatically when you run the application.")
+        return
+
+    print(f"Migrating database: {DB_PATH}")
+
+    conn = sqlite3.connect(DB_PATH)
+    cursor = conn.cursor()
+
+    # Check if user_preferences table already exists
+    cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='user_preferences'")
+    table_exists = cursor.fetchone()
+
+    if table_exists:
+        print("Migration already applied - user_preferences table exists")
+        conn.close()
+        return
+
+    print("Creating user_preferences table...")
+
+    try:
+        cursor.execute("""
+            CREATE TABLE user_preferences (
+                id INTEGER PRIMARY KEY DEFAULT 1,
+                timezone TEXT DEFAULT 'America/New_York',
+                theme TEXT DEFAULT 'auto',
+                auto_refresh_interval INTEGER DEFAULT 10,
+                date_format TEXT DEFAULT 'MM/DD/YYYY',
+                table_rows_per_page INTEGER DEFAULT 25,
+                calibration_interval_days INTEGER DEFAULT 365,
+                calibration_warning_days INTEGER DEFAULT 30,
+                status_ok_threshold_hours INTEGER DEFAULT 12,
+                status_pending_threshold_hours INTEGER DEFAULT 24,
+                updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+            )
+        """)
+        print("  ✓ Created user_preferences table")
+
+        # Insert default preferences
+        cursor.execute("""
+            INSERT INTO user_preferences (id) VALUES (1)
+        """)
+        print("  ✓ Inserted default preferences")
+
+        conn.commit()
+        print("\nMigration completed successfully!")
+
+    except sqlite3.Error as e:
+        print(f"\nError during migration: {e}")
+        conn.rollback()
+        raise
+
+    finally:
+        conn.close()
+
+
+if __name__ == "__main__":
+    migrate_database()
diff --git a/backend/models.py b/backend/models.py
index d941264..4b36061 100644
--- a/backend/models.py
+++ b/backend/models.py
@@ -1,4 +1,4 @@
-from sqlalchemy import Column, String, DateTime, Boolean, Text, Date
+from sqlalchemy import Column, String, DateTime, Boolean, Text, Date, Integer
 from datetime import datetime
 from backend.database import Base
 
@@ -56,4 +56,24 @@ class IgnoredUnit(Base):
 
     id = Column(String, primary_key=True, index=True)
     reason = Column(String, nullable=True)
-    ignored_at = Column(DateTime, default=datetime.utcnow)
\ No newline at end of file
+    ignored_at = Column(DateTime, default=datetime.utcnow)
+
+
+class UserPreferences(Base):
+    """
+    User preferences: persistent storage for application settings.
+    Single-row table (id=1) to store global user preferences.
+    """
+    __tablename__ = "user_preferences"
+
+    id = Column(Integer, primary_key=True, default=1)
+    timezone = Column(String, default="America/New_York")
+    theme = Column(String, default="auto")  # auto, light, dark
+    auto_refresh_interval = Column(Integer, default=10)  # seconds
+    date_format = Column(String, default="MM/DD/YYYY")
+    table_rows_per_page = Column(Integer, default=25)
+    calibration_interval_days = Column(Integer, default=365)
+    calibration_warning_days = Column(Integer, default=30)
+    status_ok_threshold_hours = Column(Integer, default=12)
+    status_pending_threshold_hours = Column(Integer, default=24)
+    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
\ No newline at end of file
diff --git a/backend/routers/settings.py b/backend/routers/settings.py
index 7063209..1af0547 100644
--- a/backend/routers/settings.py
+++ b/backend/routers/settings.py
@@ -2,11 +2,13 @@ from fastapi import APIRouter, Depends, HTTPException, UploadFile, File
 from fastapi.responses import StreamingResponse
 from sqlalchemy.orm import Session
 from datetime import datetime, date
+from pydantic import BaseModel
+from typing import Optional
 import csv
 import io
 
 from backend.database import get_db
-from backend.models import RosterUnit, Emitter, IgnoredUnit
+from backend.models import RosterUnit, Emitter, IgnoredUnit, UserPreferences
 
 router = APIRouter(prefix="/api/settings", tags=["settings"])
 
@@ -239,3 +241,87 @@ def clear_ignored(db: Session = Depends(get_db)):
     except Exception as e:
         db.rollback()
         raise HTTPException(status_code=500, detail=f"Clear failed: {str(e)}")
+
+
+# User Preferences Endpoints
+
+class PreferencesUpdate(BaseModel):
+    """Schema for updating user preferences (all fields optional)"""
+    timezone: Optional[str] = None
+    theme: Optional[str] = None
+    auto_refresh_interval: Optional[int] = None
+    date_format: Optional[str] = None
+    table_rows_per_page: Optional[int] = None
+    calibration_interval_days: Optional[int] = None
+    calibration_warning_days: Optional[int] = None
+    status_ok_threshold_hours: Optional[int] = None
+    status_pending_threshold_hours: Optional[int] = None
+
+
+@router.get("/preferences")
+def get_preferences(db: Session = Depends(get_db)):
+    """
+    Get user preferences. Creates default preferences if none exist.
+    """
+    prefs = db.query(UserPreferences).filter(UserPreferences.id == 1).first()
+
+    if not prefs:
+        # Create default preferences
+        prefs = UserPreferences(id=1)
+        db.add(prefs)
+        db.commit()
+        db.refresh(prefs)
+
+    return {
+        "timezone": prefs.timezone,
+        "theme": prefs.theme,
+        "auto_refresh_interval": prefs.auto_refresh_interval,
+        "date_format": prefs.date_format,
+        "table_rows_per_page": prefs.table_rows_per_page,
+        "calibration_interval_days": prefs.calibration_interval_days,
+        "calibration_warning_days": prefs.calibration_warning_days,
+        "status_ok_threshold_hours": prefs.status_ok_threshold_hours,
+        "status_pending_threshold_hours": prefs.status_pending_threshold_hours,
+        "updated_at": prefs.updated_at.isoformat() if prefs.updated_at else None
+    }
+
+
+@router.put("/preferences")
+def update_preferences(
+    updates: PreferencesUpdate,
+    db: Session = Depends(get_db)
+):
+    """
+    Update user preferences. Accepts partial updates.
+    Creates default preferences if none exist.
+    """
+    prefs = db.query(UserPreferences).filter(UserPreferences.id == 1).first()
+
+    if not prefs:
+        # Create default preferences
+        prefs = UserPreferences(id=1)
+        db.add(prefs)
+
+    # Update only provided fields
+    update_data = updates.dict(exclude_unset=True)
+    for field, value in update_data.items():
+        setattr(prefs, field, value)
+
+    prefs.updated_at = datetime.utcnow()
+
+    db.commit()
+    db.refresh(prefs)
+
+    return {
+        "message": "Preferences updated successfully",
+        "timezone": prefs.timezone,
+        "theme": prefs.theme,
+        "auto_refresh_interval": prefs.auto_refresh_interval,
+        "date_format": prefs.date_format,
+        "table_rows_per_page": prefs.table_rows_per_page,
+        "calibration_interval_days": prefs.calibration_interval_days,
+        "calibration_warning_days": prefs.calibration_warning_days,
+        "status_ok_threshold_hours": prefs.status_ok_threshold_hours,
+        "status_pending_threshold_hours": prefs.status_pending_threshold_hours,
+        "updated_at": prefs.updated_at.isoformat() if prefs.updated_at else None
+    }
diff --git a/templates/base.html b/templates/base.html
index 8814760..b16ba60 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -149,6 +149,116 @@
         } 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>
 
     {% block extra_scripts %}{% endblock %}
diff --git a/templates/dashboard.html b/templates/dashboard.html
index cdbd881..851c1ca 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -10,9 +10,15 @@
 </div>
 {% endif %}
 
-<div class="mb-8">
-    <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 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 -->
@@ -48,23 +54,35 @@
                 </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">
+                    <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"></span>
+                            <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">
+                    <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"></span>
+                            <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">
+                    <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"></span>
+                            <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>
@@ -185,6 +203,17 @@ 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;
diff --git a/templates/partials/active_table.html b/templates/partials/active_table.html
index d9f4b72..bd62e74 100644
--- a/templates/partials/active_table.html
+++ b/templates/partials/active_table.html
@@ -46,5 +46,11 @@
     {% endfor %}
 </div>
 {% else %}
-<p class="text-sm text-gray-500 dark:text-gray-400 text-center py-8">No active units</p>
+<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 %}
diff --git a/templates/partials/benched_table.html b/templates/partials/benched_table.html
index b109259..20164bf 100644
--- a/templates/partials/benched_table.html
+++ b/templates/partials/benched_table.html
@@ -46,5 +46,11 @@
     {% endfor %}
 </div>
 {% else %}
-<p class="text-sm text-gray-500 dark:text-gray-400 text-center py-8">No benched units</p>
+<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 %}
diff --git a/templates/roster.html b/templates/roster.html
index 527a6d8..b870668 100644
--- a/templates/roster.html
+++ b/templates/roster.html
@@ -34,6 +34,21 @@
 <!-- Fleet Roster with Tabs -->
 <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
 
+    <!-- Search Bar -->
+    <div class="mb-4">
+        <div class="relative">
+            <input
+                type="text"
+                id="roster-search"
+                placeholder="Search by Unit ID, Type, or Note..."
+                class="w-full px-4 py-2 pl-10 pr-4 text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-seismo-orange"
+                onkeyup="filterRosterTable()">
+            <svg class="absolute left-3 top-3 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>
+
     <!-- Tab Bar -->
     <div class="flex border-b border-gray-200 dark:border-gray-700 mb-4">
         <button
@@ -805,6 +820,31 @@
             alert(`Error: ${error.message}`);
         }
     }
+
+    // Filter roster table based on search input
+    function filterRosterTable() {
+        const searchInput = document.getElementById('roster-search').value.toLowerCase();
+        const table = document.querySelector('#roster-content table tbody');
+
+        if (!table) return;
+
+        const rows = table.getElementsByTagName('tr');
+
+        for (let row of rows) {
+            const cells = row.getElementsByTagName('td');
+            if (cells.length === 0) continue; // Skip header or empty rows
+
+            const unitId = cells[1]?.textContent?.toLowerCase() || '';
+            const unitType = cells[2]?.textContent?.toLowerCase() || '';
+            const note = cells[6]?.textContent?.toLowerCase() || '';
+
+            const matches = unitId.includes(searchInput) ||
+                          unitType.includes(searchInput) ||
+                          note.includes(searchInput);
+
+            row.style.display = matches ? '' : 'none';
+        }
+    }
 </script>
 
 <style>
diff --git a/templates/settings.html b/templates/settings.html
index 9eb0245..8602236 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -4,238 +4,614 @@
 
 {% block content %}
 <div class="mb-8">
-    <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Roster Manager</h1>
-    <p class="text-gray-600 dark:text-gray-400 mt-1">Manage your fleet roster data - import, export, and reset</p>
+    <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Settings</h1>
+    <p class="text-gray-600 dark:text-gray-400 mt-1">Configure application preferences and manage fleet data</p>
 </div>
 
-<!-- CSV Export Section -->
-<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-6">
-    <div class="flex items-start justify-between">
-        <div class="flex-1">
-            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Export Roster</h2>
-            <p class="text-gray-600 dark:text-gray-400 mb-4">
-                Download all roster data as CSV for backup or editing externally
-            </p>
-        </div>
-        <div>
-            <a href="/api/settings/export-csv"
-               class="px-6 py-3 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg transition-colors inline-flex items-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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
-                </svg>
-                Download CSV
-            </a>
-        </div>
-    </div>
-</div>
-
-<!-- CSV Import Section -->
-<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-6">
-    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Import Roster</h2>
-
-    <form id="importSettingsForm" class="space-y-4">
-        <div>
-            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">CSV File *</label>
-            <input type="file" name="file" accept=".csv" required
-                   class="block w-full text-sm text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer bg-gray-50 dark:bg-slate-700 focus:outline-none">
-            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                CSV must include column: unit_id (required)
-            </p>
-        </div>
-
-        <div>
-            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Import Mode *</label>
-            <div class="space-y-3">
-                <label class="flex items-start gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-slate-700 cursor-pointer">
-                    <input type="radio" name="mode" value="merge" checked
-                           class="mt-1 w-4 h-4 text-seismo-orange focus:ring-seismo-orange">
-                    <div>
-                        <div class="font-medium text-gray-900 dark:text-white">Merge/Overwrite</div>
-                        <div class="text-sm text-gray-600 dark:text-gray-400">Update existing units, add new units (safe)</div>
-                    </div>
-                </label>
-                <label class="flex items-start gap-3 p-3 rounded-lg border border-red-300 dark:border-red-800 hover:bg-red-50 dark:hover:bg-red-900/20 cursor-pointer">
-                    <input type="radio" name="mode" value="replace"
-                           class="mt-1 w-4 h-4 text-red-600 focus:ring-red-600">
-                    <div>
-                        <div class="font-medium text-red-600 dark:text-red-400">Replace All</div>
-                        <div class="text-sm text-red-600 dark:text-red-400">⚠️ Delete ALL roster units first, then import (DANGEROUS)</div>
-                    </div>
-                </label>
-            </div>
-        </div>
-
-        <div id="importResult" class="hidden"></div>
-
-        <button type="submit" class="px-6 py-3 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg transition-colors">
-            Import CSV
-        </button>
-    </form>
-</div>
-
-<!-- Roster Management Table -->
-<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-6">
-    <div class="flex items-center justify-between mb-4">
-        <div>
-            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Roster Units</h2>
-            <p class="text-gray-600 dark:text-gray-400 text-sm mt-1">
-                Manage all units with inline editing and quick actions
-            </p>
-        </div>
-        <button onclick="refreshRosterTable()" class="px-4 py-2 text-seismo-orange hover:bg-orange-50 dark:hover:bg-orange-900/20 rounded-lg transition-colors">
-            <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>
-        </button>
-    </div>
-
-    <!-- Loading State -->
-    <div id="rosterTableLoading" class="text-center py-8">
-        <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-seismo-orange"></div>
-        <p class="text-gray-600 dark:text-gray-400 mt-2">Loading roster units...</p>
-    </div>
-
-    <!-- Table Container -->
-    <div id="rosterTableContainer" class="hidden overflow-x-auto">
-        <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 class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Unit ID</th>
-                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Type</th>
-                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Status</th>
-                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Note</th>
-                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Location</th>
-                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Actions</th>
-                </tr>
-            </thead>
-            <tbody id="rosterTableBody" class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-gray-700">
-                <!-- Rows will be inserted here by JavaScript -->
-            </tbody>
-        </table>
-    </div>
-
-    <!-- Empty State -->
-    <div id="rosterTableEmpty" class="hidden text-center py-8">
-        <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>
+<!-- Tab Navigation -->
+<div class="flex border-b border-gray-200 dark:border-gray-700 mb-6">
+    <button class="settings-tab active-settings-tab" data-tab="general" onclick="showTab('general')">
+        <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
         </svg>
-        <p class="text-gray-600 dark:text-gray-400 mt-2">No roster units found</p>
-    </div>
-</div>
-
-<!-- Danger Zone -->
-<div class="bg-red-50 dark:bg-red-900/20 rounded-xl border-2 border-red-200 dark:border-red-800 p-6">
-    <div class="flex items-start gap-3 mb-6">
-        <svg class="w-6 h-6 text-red-600 dark:text-red-400 flex-shrink-0 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        General
+    </button>
+    <button class="settings-tab" data-tab="data" onclick="showTab('data')">
+        <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
+        </svg>
+        Data Management
+    </button>
+    <button class="settings-tab" data-tab="advanced" onclick="showTab('advanced')">
+        <svg class="w-4 h-4 inline-block mr-1" 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>
+        Advanced
+    </button>
+    <button class="settings-tab text-red-600 dark:text-red-400" data-tab="danger" onclick="showTab('danger')">
+        <svg class="w-4 h-4 inline-block mr-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>
-            <h2 class="text-xl font-semibold text-red-600 dark:text-red-400 mb-1">Danger Zone</h2>
-            <p class="text-sm text-gray-700 dark:text-gray-300">
-                Irreversible operations - use with extreme caution
-            </p>
+        Danger Zone
+    </button>
+</div>
+
+<!-- General Tab -->
+<div id="general-tab" class="tab-content">
+    <div class="space-y-6">
+        <!-- Display Preferences Card -->
+        <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">Display Preferences</h2>
+
+            <div class="space-y-4">
+                <!-- Timezone -->
+                <div>
+                    <label for="timezone-select" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Timezone
+                    </label>
+                    <select id="timezone-select"
+                            class="w-full max-w-md px-4 py-2 text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-seismo-orange">
+                        <option value="America/New_York">Eastern Time (ET)</option>
+                        <option value="America/Chicago">Central Time (CT)</option>
+                        <option value="America/Denver">Mountain Time (MT)</option>
+                        <option value="America/Los_Angeles">Pacific Time (PT)</option>
+                        <option value="America/Anchorage">Alaska Time (AKT)</option>
+                        <option value="Pacific/Honolulu">Hawaii Time (HT)</option>
+                        <option value="UTC">UTC</option>
+                        <option value="Europe/London">London (GMT/BST)</option>
+                        <option value="Europe/Paris">Paris (CET/CEST)</option>
+                        <option value="Asia/Tokyo">Tokyo (JST)</option>
+                        <option value="Australia/Sydney">Sydney (AEST/AEDT)</option>
+                    </select>
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                        All timestamps will be displayed in this timezone
+                    </p>
+                </div>
+
+                <!-- Theme -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Theme
+                    </label>
+                    <div class="flex gap-4">
+                        <label class="flex items-center gap-2 cursor-pointer">
+                            <input type="radio" name="theme" value="auto" class="w-4 h-4 text-seismo-orange focus:ring-seismo-orange">
+                            <span class="text-sm text-gray-700 dark:text-gray-300">Auto (System)</span>
+                        </label>
+                        <label class="flex items-center gap-2 cursor-pointer">
+                            <input type="radio" name="theme" value="light" class="w-4 h-4 text-seismo-orange focus:ring-seismo-orange">
+                            <span class="text-sm text-gray-700 dark:text-gray-300">Light</span>
+                        </label>
+                        <label class="flex items-center gap-2 cursor-pointer">
+                            <input type="radio" name="theme" value="dark" class="w-4 h-4 text-seismo-orange focus:ring-seismo-orange">
+                            <span class="text-sm text-gray-700 dark:text-gray-300">Dark</span>
+                        </label>
+                    </div>
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                        Choose your preferred color scheme
+                    </p>
+                </div>
+
+                <!-- Auto-refresh Interval -->
+                <div>
+                    <label for="refresh-interval" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Auto-Refresh Interval
+                    </label>
+                    <select id="refresh-interval"
+                            class="w-full max-w-md px-4 py-2 text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-seismo-orange">
+                        <option value="5">5 seconds</option>
+                        <option value="10" selected>10 seconds</option>
+                        <option value="30">30 seconds</option>
+                        <option value="60">1 minute</option>
+                        <option value="0">Disabled</option>
+                    </select>
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                        How often the dashboard should refresh automatically
+                    </p>
+                </div>
+            </div>
+
+            <button onclick="saveGeneralSettings()" class="mt-6 px-6 py-3 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg transition-colors">
+                Save Changes
+            </button>
         </div>
     </div>
+</div>
 
-    <div class="space-y-4">
-        <!-- Clear All Data -->
-        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 p-4 bg-white dark:bg-slate-800 rounded-lg border border-red-200 dark:border-red-800">
-            <div class="flex-1">
-                <h3 class="font-semibold text-gray-900 dark:text-white mb-1">Clear All Data</h3>
-                <p class="text-sm text-gray-600 dark:text-gray-400">
-                    Delete ALL roster units, emitters, and ignored units
-                </p>
+<!-- Data Management Tab -->
+<div id="data-tab" class="tab-content hidden">
+    <div class="space-y-6">
+        <!-- Export Section -->
+        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+            <div class="flex items-start justify-between">
+                <div class="flex-1">
+                    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Export Data</h2>
+                    <p class="text-gray-600 dark:text-gray-400">
+                        Download all roster data as CSV for backup or editing externally
+                    </p>
+                </div>
+                <div>
+                    <a href="/api/settings/export-csv"
+                       class="px-6 py-3 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg transition-colors inline-flex items-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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
+                        </svg>
+                        Download CSV
+                    </a>
+                </div>
             </div>
-            <button onclick="confirmClearAll()"
-                    class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors whitespace-nowrap">
-                Clear All
+        </div>
+
+        <!-- Import Section (Merge Mode Only) -->
+        <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">Import Data (Merge Mode)</h2>
+
+            <form id="importMergeForm" class="space-y-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">CSV File</label>
+                    <input type="file" name="file" accept=".csv" required
+                           class="block w-full text-sm text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer bg-gray-50 dark:bg-slate-700 focus:outline-none">
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                        CSV must include column: unit_id (required). Existing units will be updated, new units will be added.
+                    </p>
+                </div>
+
+                <div id="importMergeResult" class="hidden"></div>
+
+                <button type="submit" class="px-6 py-3 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg transition-colors">
+                    Import CSV
+                </button>
+            </form>
+        </div>
+
+        <!-- Roster Management Table -->
+        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+            <div class="flex items-center justify-between mb-4">
+                <div>
+                    <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Roster Units</h2>
+                    <p class="text-gray-600 dark:text-gray-400 text-sm mt-1">
+                        Manage all units with inline editing and quick actions
+                    </p>
+                </div>
+                <button onclick="refreshRosterTable()" class="px-4 py-2 text-seismo-orange hover:bg-orange-50 dark:hover:bg-orange-900/20 rounded-lg transition-colors">
+                    <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>
+                </button>
+            </div>
+
+            <!-- Loading State -->
+            <div id="rosterTableLoading" class="text-center py-8">
+                <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-seismo-orange"></div>
+                <p class="text-gray-600 dark:text-gray-400 mt-2">Loading roster units...</p>
+            </div>
+
+            <!-- Table Container -->
+            <div id="rosterTableContainer" class="hidden overflow-x-auto">
+                <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 class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Unit ID</th>
+                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Type</th>
+                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Status</th>
+                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Note</th>
+                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Location</th>
+                            <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="rosterTableBody" class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-gray-700">
+                        <!-- Rows will be inserted here by JavaScript -->
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- Empty State -->
+            <div id="rosterTableEmpty" class="hidden text-center py-8">
+                <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>
+                <p class="text-gray-600 dark:text-gray-400 mt-2">No roster units found</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Advanced Tab -->
+<div id="advanced-tab" class="tab-content hidden">
+    <div class="space-y-6">
+        <!-- Warning Banner -->
+        <div class="bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-500 p-4">
+            <div class="flex">
+                <svg class="w-5 h-5 text-yellow-500 mr-2 flex-shrink-0" 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>
+                    <p class="font-semibold text-yellow-800 dark:text-yellow-300">Advanced Settings</p>
+                    <p class="text-sm text-yellow-700 dark:text-yellow-400 mt-1">These settings can affect system behavior. Change with caution.</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- CSV Import - Replace Mode -->
+        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 border-2 border-yellow-200 dark:border-yellow-800">
+            <h2 class="text-xl font-semibold text-yellow-800 dark:text-yellow-300 mb-2">CSV Import - Replace Mode</h2>
+            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                This will DELETE all existing roster units before importing.
+            </p>
+
+            <form id="importReplaceForm" class="space-y-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">CSV File</label>
+                    <input type="file" name="file" accept=".csv" required
+                           class="block w-full text-sm text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer bg-gray-50 dark:bg-slate-700 focus:outline-none">
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                        All roster data will be replaced with this CSV file
+                    </p>
+                </div>
+
+                <div id="importReplaceResult" class="hidden"></div>
+
+                <button type="submit" class="px-6 py-3 bg-yellow-600 hover:bg-yellow-700 text-white rounded-lg transition-colors">
+                    Replace All Roster Data
+                </button>
+            </form>
+        </div>
+
+        <!-- Status Thresholds -->
+        <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">Status Thresholds</h2>
+
+            <div class="space-y-4">
+                <div>
+                    <label for="ok-threshold" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        OK Threshold (hours)
+                    </label>
+                    <input type="number" id="ok-threshold" min="1" max="24"
+                           class="w-full max-w-md px-4 py-2 text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-seismo-orange">
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                        Units are OK if last seen within this many hours
+                    </p>
+                </div>
+
+                <div>
+                    <label for="pending-threshold" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Pending Threshold (hours)
+                    </label>
+                    <input type="number" id="pending-threshold" min="1" max="48"
+                           class="w-full max-w-md px-4 py-2 text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-seismo-orange">
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                        Units are Pending if last seen within this many hours (units exceeding this are Missing)
+                    </p>
+                </div>
+            </div>
+
+            <button onclick="saveStatusThresholds()" class="mt-6 px-6 py-3 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg transition-colors">
+                Save Thresholds
             </button>
         </div>
 
+        <!-- Calibration Defaults -->
+        <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">Calibration Defaults</h2>
+
+            <div class="space-y-4">
+                <div>
+                    <label for="cal-interval" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Calibration Interval (days)
+                    </label>
+                    <input type="number" id="cal-interval" min="1"
+                           class="w-full max-w-md px-4 py-2 text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-seismo-orange">
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                        Default interval between calibrations
+                    </p>
+                </div>
+
+                <div>
+                    <label for="cal-warning" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Warning Threshold (days before due)
+                    </label>
+                    <input type="number" id="cal-warning" min="1"
+                           class="w-full max-w-md px-4 py-2 text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-seismo-orange">
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                        Show warnings when calibration is due within this many days
+                    </p>
+                </div>
+            </div>
+
+            <button onclick="saveCalibrationDefaults()" class="mt-6 px-6 py-3 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg transition-colors">
+                Save Defaults
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- Danger Zone Tab -->
+<div id="danger-tab" class="tab-content hidden">
+    <div class="space-y-6">
+        <!-- Warning Banner -->
+        <div class="bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 p-4">
+            <div class="flex">
+                <svg class="w-5 h-5 text-red-500 mr-2 flex-shrink-0" 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>
+                    <p class="font-semibold text-red-800 dark:text-red-300">Danger Zone</p>
+                    <p class="text-sm text-red-700 dark:text-red-400 mt-1">These operations are PERMANENT and CANNOT be undone. Proceed with extreme caution.</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Clear All Data -->
+        <div class="border-2 border-red-300 dark:border-red-800 rounded-lg p-6 bg-white dark:bg-slate-800">
+            <div class="flex justify-between items-start">
+                <div>
+                    <h3 class="font-semibold text-red-600 dark:text-red-400 text-lg">Clear All Data</h3>
+                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                        Deletes roster units, emitters, and ignored units. Everything will be lost.
+                    </p>
+                </div>
+                <button onclick="confirmClearAll()" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors whitespace-nowrap">
+                    Clear All
+                </button>
+            </div>
+        </div>
+
         <!-- Clear Roster Only -->
-        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 p-4 bg-white dark:bg-slate-800 rounded-lg border border-red-200 dark:border-red-800">
-            <div class="flex-1">
-                <h3 class="font-semibold text-gray-900 dark:text-white mb-1">Clear Roster Table</h3>
-                <p class="text-sm text-gray-600 dark:text-gray-400">
-                    Delete all roster units only (keeps emitters and ignored units)
-                </p>
+        <div class="border border-red-200 dark:border-red-800 rounded-lg p-6 bg-white dark:bg-slate-800">
+            <div class="flex justify-between items-start">
+                <div>
+                    <h3 class="font-semibold text-gray-900 dark:text-white">Clear Roster Table</h3>
+                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                        Delete all roster units only (keeps emitters and ignored units)
+                    </p>
+                </div>
+                <button onclick="confirmClearRoster()" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors whitespace-nowrap">
+                    Clear Roster
+                </button>
             </div>
-            <button onclick="confirmClearRoster()"
-                    class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors whitespace-nowrap">
-                Clear Roster
-            </button>
         </div>
 
         <!-- Clear Emitters Only -->
-        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 p-4 bg-white dark:bg-slate-800 rounded-lg border border-red-200 dark:border-red-800">
-            <div class="flex-1">
-                <h3 class="font-semibold text-gray-900 dark:text-white mb-1">Clear Emitters Table</h3>
-                <p class="text-sm text-gray-600 dark:text-gray-400">
-                    Delete all auto-discovered emitters (will repopulate automatically)
-                </p>
+        <div class="border border-red-200 dark:border-red-800 rounded-lg p-6 bg-white dark:bg-slate-800">
+            <div class="flex justify-between items-start">
+                <div>
+                    <h3 class="font-semibold text-gray-900 dark:text-white">Clear Emitters Table</h3>
+                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                        Delete all auto-discovered emitters (will repopulate automatically)
+                    </p>
+                </div>
+                <button onclick="confirmClearEmitters()" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors whitespace-nowrap">
+                    Clear Emitters
+                </button>
             </div>
-            <button onclick="confirmClearEmitters()"
-                    class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors whitespace-nowrap">
-                Clear Emitters
-            </button>
         </div>
 
-        <!-- Clear Ignored Only -->
-        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 p-4 bg-white dark:bg-slate-800 rounded-lg border border-red-200 dark:border-red-800">
-            <div class="flex-1">
-                <h3 class="font-semibold text-gray-900 dark:text-white mb-1">Clear Ignored Units</h3>
-                <p class="text-sm text-gray-600 dark:text-gray-400">
-                    Remove all units from the ignore list
-                </p>
+        <!-- Clear Ignored Units -->
+        <div class="border border-red-200 dark:border-red-800 rounded-lg p-6 bg-white dark:bg-slate-800">
+            <div class="flex justify-between items-start">
+                <div>
+                    <h3 class="font-semibold text-gray-900 dark:text-white">Clear Ignored Units</h3>
+                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                        Remove all units from the ignore list
+                    </p>
+                </div>
+                <button onclick="confirmClearIgnored()" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors whitespace-nowrap">
+                    Clear Ignored
+                </button>
             </div>
-            <button onclick="confirmClearIgnored()"
-                    class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors whitespace-nowrap">
-                Clear Ignored
-            </button>
         </div>
     </div>
 </div>
 
+<style>
+.settings-tab {
+    padding: 0.75rem 1.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #6b7280;
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s;
+    background: none;
+    cursor: pointer;
+}
+
+.settings-tab:hover {
+    color: #374151;
+    background-color: rgba(249, 250, 251, 0.5);
+}
+
+.dark .settings-tab:hover {
+    color: #d1d5db;
+    background-color: rgba(55, 65, 81, 0.3);
+}
+
+.active-settings-tab {
+    color: #f48b1c !important;
+    border-bottom-color: #f48b1c !important;
+}
+
+.tab-content {
+    animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+</style>
+
 <script>
-// CSV Import Handler
-document.getElementById('importSettingsForm').addEventListener('submit', async function(e) {
+// ========== TAB MANAGEMENT ==========
+
+function showTab(tabName) {
+    // Hide all tabs
+    document.querySelectorAll('.tab-content').forEach(tab => {
+        tab.classList.add('hidden');
+    });
+
+    // Remove active class from all buttons
+    document.querySelectorAll('.settings-tab').forEach(btn => {
+        btn.classList.remove('active-settings-tab');
+    });
+
+    // Show selected tab
+    document.getElementById(tabName + '-tab').classList.remove('hidden');
+
+    // Add active class to clicked button
+    const clickedButton = document.querySelector(`[data-tab="${tabName}"]`);
+    if (clickedButton) {
+        clickedButton.classList.add('active-settings-tab');
+    }
+
+    // Save last active tab to localStorage
+    localStorage.setItem('settings-last-tab', tabName);
+
+    // Load roster table when data tab is shown
+    if (tabName === 'data') {
+        loadRosterTable();
+    }
+}
+
+// Restore last active tab on page load
+window.addEventListener('DOMContentLoaded', () => {
+    const lastTab = localStorage.getItem('settings-last-tab') || 'general';
+    showTab(lastTab);
+    loadPreferences();
+});
+
+// ========== GENERAL TAB - PREFERENCES ==========
+
+let currentPreferences = {};
+
+async function loadPreferences() {
+    try {
+        const response = await fetch('/api/settings/preferences');
+        const prefs = await response.json();
+        currentPreferences = prefs;
+
+        // Load timezone
+        document.getElementById('timezone-select').value = prefs.timezone || 'America/New_York';
+
+        // Load theme
+        const themeRadios = document.querySelectorAll('input[name="theme"]');
+        themeRadios.forEach(radio => {
+            radio.checked = radio.value === (prefs.theme || 'auto');
+        });
+
+        // Load auto-refresh interval
+        document.getElementById('refresh-interval').value = prefs.auto_refresh_interval || 10;
+
+        // Load status thresholds
+        document.getElementById('ok-threshold').value = prefs.status_ok_threshold_hours || 12;
+        document.getElementById('pending-threshold').value = prefs.status_pending_threshold_hours || 24;
+
+        // Load calibration defaults
+        document.getElementById('cal-interval').value = prefs.calibration_interval_days || 365;
+        document.getElementById('cal-warning').value = prefs.calibration_warning_days || 30;
+
+    } catch (error) {
+        console.error('Error loading preferences:', error);
+    }
+}
+
+async function saveGeneralSettings() {
+    const timezone = document.getElementById('timezone-select').value;
+    const theme = document.querySelector('input[name="theme"]:checked').value;
+    const autoRefreshInterval = parseInt(document.getElementById('refresh-interval').value);
+
+    try {
+        const response = await fetch('/api/settings/preferences', {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                timezone,
+                theme,
+                auto_refresh_interval: autoRefreshInterval
+            })
+        });
+
+        if (response.ok) {
+            // Also update localStorage for immediate effect
+            localStorage.setItem('timezone', timezone);
+
+            // Visual feedback
+            alert('Settings saved successfully!');
+
+            // Refresh timestamps on page
+            if (typeof updateAllTimestamps === 'function') {
+                updateAllTimestamps();
+            }
+        } else {
+            const result = await response.json();
+            alert('Error saving settings: ' + (result.detail || 'Unknown error'));
+        }
+    } catch (error) {
+        alert('Error saving settings: ' + error.message);
+    }
+}
+
+async function saveStatusThresholds() {
+    const okThreshold = parseInt(document.getElementById('ok-threshold').value);
+    const pendingThreshold = parseInt(document.getElementById('pending-threshold').value);
+
+    try {
+        const response = await fetch('/api/settings/preferences', {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                status_ok_threshold_hours: okThreshold,
+                status_pending_threshold_hours: pendingThreshold
+            })
+        });
+
+        if (response.ok) {
+            alert('Status thresholds saved successfully!');
+        } else {
+            const result = await response.json();
+            alert('Error saving thresholds: ' + (result.detail || 'Unknown error'));
+        }
+    } catch (error) {
+        alert('Error saving thresholds: ' + error.message);
+    }
+}
+
+async function saveCalibrationDefaults() {
+    const calInterval = parseInt(document.getElementById('cal-interval').value);
+    const calWarning = parseInt(document.getElementById('cal-warning').value);
+
+    try {
+        const response = await fetch('/api/settings/preferences', {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                calibration_interval_days: calInterval,
+                calibration_warning_days: calWarning
+            })
+        });
+
+        if (response.ok) {
+            alert('Calibration defaults saved successfully!');
+        } else {
+            const result = await response.json();
+            alert('Error saving defaults: ' + (result.detail || 'Unknown error'));
+        }
+    } catch (error) {
+        alert('Error saving defaults: ' + error.message);
+    }
+}
+
+// ========== DATA TAB - IMPORT/EXPORT ==========
+
+// Merge Mode Import
+document.getElementById('importMergeForm').addEventListener('submit', async function(e) {
     e.preventDefault();
 
     const formData = new FormData(this);
-    const mode = formData.get('mode');
-    const resultDiv = document.getElementById('importResult');
-
-    // For replace mode, get confirmation
-    if (mode === 'replace') {
-        try {
-            const stats = await fetch('/api/settings/stats').then(r => r.json());
-
-            const confirmMsg = `⚠️ REPLACE MODE WARNING ⚠️
-
-This will DELETE all ${stats.roster} roster units first, then import from CSV.
-
-THIS CANNOT BE UNDONE!
-
-Make sure you have a backup before proceeding.
-
-Continue?`;
-
-            if (!confirm(confirmMsg)) {
-                return;
-            }
-        } catch (error) {
-            alert('Error fetching statistics: ' + error.message);
-            return;
-        }
-    }
-
-    // Choose endpoint based on mode
-    const endpoint = mode === 'replace'
-        ? '/api/settings/import-csv-replace'
-        : '/api/roster/import-csv';
+    const resultDiv = document.getElementById('importMergeResult');
 
     try {
-        const response = await fetch(endpoint, {
+        const response = await fetch('/api/roster/import-csv', {
             method: 'POST',
             body: formData
         });
@@ -244,32 +620,22 @@ Continue?`;
 
         if (response.ok) {
             resultDiv.className = 'mt-4 p-4 rounded-lg bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200';
-
-            if (mode === 'replace') {
-                resultDiv.innerHTML = `
-                    <p class="font-semibold mb-2">Import Successful!</p>
-                    <ul class="text-sm space-y-1">
-                        <li>✅ Deleted: ${result.deleted}</li>
-                        <li>✅ Added: ${result.added}</li>
-                    </ul>
-                `;
-            } else {
-                resultDiv.innerHTML = `
-                    <p class="font-semibold mb-2">Import Successful!</p>
-                    <ul class="text-sm space-y-1">
-                        <li>✅ Added: ${result.summary.added}</li>
-                        <li>🔄 Updated: ${result.summary.updated}</li>
-                        <li>⏭️ Skipped: ${result.summary.skipped}</li>
-                        <li>❌ Errors: ${result.summary.errors}</li>
-                    </ul>
-                `;
-            }
+            resultDiv.innerHTML = `
+                <p class="font-semibold mb-2">Import Successful!</p>
+                <ul class="text-sm space-y-1">
+                    <li>✅ Added: ${result.summary.added}</li>
+                    <li>🔄 Updated: ${result.summary.updated}</li>
+                    <li>⏭️ Skipped: ${result.summary.skipped}</li>
+                    <li>❌ Errors: ${result.summary.errors}</li>
+                </ul>
+            `;
             resultDiv.classList.remove('hidden');
 
-            // Reset form after 3 seconds
+            // Refresh roster table
             setTimeout(() => {
                 this.reset();
                 resultDiv.classList.add('hidden');
+                loadRosterTable();
             }, 3000);
         } else {
             resultDiv.className = 'mt-4 p-4 rounded-lg bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200';
@@ -283,132 +649,74 @@ Continue?`;
     }
 });
 
-// Clear All Data
-async function confirmClearAll() {
+// Replace Mode Import
+document.getElementById('importReplaceForm').addEventListener('submit', async function(e) {
+    e.preventDefault();
+
+    const formData = new FormData(this);
+    const resultDiv = document.getElementById('importReplaceResult');
+
+    // Get confirmation
     try {
         const stats = await fetch('/api/settings/stats').then(r => r.json());
 
-        const message = `⚠️ CLEAR ALL DATA WARNING ⚠️
+        const confirmMsg = `⚠️ REPLACE MODE WARNING ⚠️
 
-You are about to DELETE ALL data:
+This will DELETE all ${stats.roster} roster units first, then import from CSV.
 
-• Roster units: ${stats.roster}
-• Emitters: ${stats.emitters}
-• Ignored units: ${stats.ignored}
-• TOTAL: ${stats.total} records
+THIS CANNOT BE UNDONE!
 
-THIS ACTION CANNOT BE UNDONE!
+Make sure you have a backup before proceeding.
 
-Export a backup first if needed.
+Continue?`;
 
-Are you absolutely sure?`;
-
-        if (!confirm(message)) {
+        if (!confirm(confirmMsg)) {
             return;
         }
-
-        const response = await fetch('/api/settings/clear-all', {
-            method: 'POST'
-        });
-
-        if (response.ok) {
-            const result = await response.json();
-            alert(`✅ Success! Deleted ${result.deleted.total} records\n\n• Roster: ${result.deleted.roster}\n• Emitters: ${result.deleted.emitters}\n• Ignored: ${result.deleted.ignored}`);
-            location.reload();
-        } else {
-            const result = await response.json();
-            alert('❌ Error: ' + (result.detail || 'Unknown error'));
-        }
     } catch (error) {
-        alert('❌ Error: ' + error.message);
+        alert('Error fetching statistics: ' + error.message);
+        return;
     }
-}
 
-// Clear Roster Only
-async function confirmClearRoster() {
     try {
-        const stats = await fetch('/api/settings/stats').then(r => r.json());
-
-        if (!confirm(`Delete all ${stats.roster} roster units?\n\nThis cannot be undone!`)) {
-            return;
-        }
-
-        const response = await fetch('/api/settings/clear-roster', {
-            method: 'POST'
+        const response = await fetch('/api/settings/import-csv-replace', {
+            method: 'POST',
+            body: formData
         });
 
-        if (response.ok) {
-            const result = await response.json();
-            alert(`✅ Success! Deleted ${result.deleted} roster units`);
-            location.reload();
-        } else {
-            const result = await response.json();
-            alert('❌ Error: ' + (result.detail || 'Unknown error'));
-        }
-    } catch (error) {
-        alert('❌ Error: ' + error.message);
-    }
-}
-
-// Clear Emitters Only
-async function confirmClearEmitters() {
-    try {
-        const stats = await fetch('/api/settings/stats').then(r => r.json());
-
-        if (!confirm(`Delete all ${stats.emitters} emitters?\n\nEmitters will repopulate automatically from ACH files.`)) {
-            return;
-        }
-
-        const response = await fetch('/api/settings/clear-emitters', {
-            method: 'POST'
-        });
+        const result = await response.json();
 
         if (response.ok) {
-            const result = await response.json();
-            alert(`✅ Success! Deleted ${result.deleted} emitters`);
-            location.reload();
+            resultDiv.className = 'mt-4 p-4 rounded-lg bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200';
+            resultDiv.innerHTML = `
+                <p class="font-semibold mb-2">Replace Import Successful!</p>
+                <ul class="text-sm space-y-1">
+                    <li>🗑️ Deleted: ${result.deleted}</li>
+                    <li>✅ Added: ${result.added}</li>
+                </ul>
+            `;
+            resultDiv.classList.remove('hidden');
+
+            // Refresh roster table
+            setTimeout(() => {
+                this.reset();
+                resultDiv.classList.add('hidden');
+                loadRosterTable();
+            }, 3000);
         } else {
-            const result = await response.json();
-            alert('❌ Error: ' + (result.detail || 'Unknown error'));
+            resultDiv.className = 'mt-4 p-4 rounded-lg bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200';
+            resultDiv.innerHTML = `<p class="font-semibold">Import Failed</p><p class="text-sm">${result.detail || 'Unknown error'}</p>`;
+            resultDiv.classList.remove('hidden');
         }
     } catch (error) {
-        alert('❌ Error: ' + error.message);
+        resultDiv.className = 'mt-4 p-4 rounded-lg bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200';
+        resultDiv.innerHTML = `<p class="font-semibold">Import Failed</p><p class="text-sm">${error.message}</p>`;
+        resultDiv.classList.remove('hidden');
     }
-}
-
-// Clear Ignored Only
-async function confirmClearIgnored() {
-    try {
-        const stats = await fetch('/api/settings/stats').then(r => r.json());
-
-        if (!confirm(`Remove all ${stats.ignored} units from ignore list?\n\nThey will appear as unknown emitters again.`)) {
-            return;
-        }
-
-        const response = await fetch('/api/settings/clear-ignored', {
-            method: 'POST'
-        });
-
-        if (response.ok) {
-            const result = await response.json();
-            alert(`✅ Success! Removed ${result.deleted} units from ignore list`);
-            location.reload();
-        } else {
-            const result = await response.json();
-            alert('❌ Error: ' + (result.detail || 'Unknown error'));
-        }
-    } catch (error) {
-        alert('❌ Error: ' + error.message);
-    }
-}
+});
 
 // ========== ROSTER MANAGEMENT TABLE ==========
 
-// Load roster table on page load
-document.addEventListener('DOMContentLoaded', function() {
-    loadRosterTable();
-});
-
 async function loadRosterTable() {
     const loading = document.getElementById('rosterTableLoading');
     const container = document.getElementById('rosterTableContainer');
@@ -551,7 +859,6 @@ async function toggleRetired(unitId, currentState) {
 }
 
 function editUnit(unitId) {
-    // Navigate to unit detail page for full editing
     window.location.href = `/unit/${unitId}`;
 }
 
@@ -580,5 +887,122 @@ async function confirmDeleteUnit(unitId) {
 function refreshRosterTable() {
     loadRosterTable();
 }
+
+// ========== DANGER ZONE ==========
+
+async function confirmClearAll() {
+    try {
+        const stats = await fetch('/api/settings/stats').then(r => r.json());
+
+        const message = `⚠️ CLEAR ALL DATA WARNING ⚠️
+
+You are about to DELETE ALL data:
+
+• Roster units: ${stats.roster}
+• Emitters: ${stats.emitters}
+• Ignored units: ${stats.ignored}
+• TOTAL: ${stats.total} records
+
+THIS ACTION CANNOT BE UNDONE!
+
+Export a backup first if needed.
+
+Are you absolutely sure?`;
+
+        if (!confirm(message)) {
+            return;
+        }
+
+        const response = await fetch('/api/settings/clear-all', {
+            method: 'POST'
+        });
+
+        if (response.ok) {
+            const result = await response.json();
+            alert(`✅ Success! Deleted ${result.deleted.total} records\n\n• Roster: ${result.deleted.roster}\n• Emitters: ${result.deleted.emitters}\n• Ignored: ${result.deleted.ignored}`);
+            location.reload();
+        } else {
+            const result = await response.json();
+            alert('❌ Error: ' + (result.detail || 'Unknown error'));
+        }
+    } catch (error) {
+        alert('❌ Error: ' + error.message);
+    }
+}
+
+async function confirmClearRoster() {
+    try {
+        const stats = await fetch('/api/settings/stats').then(r => r.json());
+
+        if (!confirm(`Delete all ${stats.roster} roster units?\n\nThis cannot be undone!`)) {
+            return;
+        }
+
+        const response = await fetch('/api/settings/clear-roster', {
+            method: 'POST'
+        });
+
+        if (response.ok) {
+            const result = await response.json();
+            alert(`✅ Success! Deleted ${result.deleted} roster units`);
+            location.reload();
+        } else {
+            const result = await response.json();
+            alert('❌ Error: ' + (result.detail || 'Unknown error'));
+        }
+    } catch (error) {
+        alert('❌ Error: ' + error.message);
+    }
+}
+
+async function confirmClearEmitters() {
+    try {
+        const stats = await fetch('/api/settings/stats').then(r => r.json());
+
+        if (!confirm(`Delete all ${stats.emitters} emitters?\n\nEmitters will repopulate automatically from heartbeats.`)) {
+            return;
+        }
+
+        const response = await fetch('/api/settings/clear-emitters', {
+            method: 'POST'
+        });
+
+        if (response.ok) {
+            const result = await response.json();
+            alert(`✅ Success! Deleted ${result.deleted} emitters`);
+            location.reload();
+        } else {
+            const result = await response.json();
+            alert('❌ Error: ' + (result.detail || 'Unknown error'));
+        }
+    } catch (error) {
+        alert('❌ Error: ' + error.message);
+    }
+}
+
+async function confirmClearIgnored() {
+    try {
+        const stats = await fetch('/api/settings/stats').then(r => r.json());
+
+        if (!confirm(`Remove all ${stats.ignored} units from ignore list?\n\nThey will appear as unknown emitters again.`)) {
+            return;
+        }
+
+        const response = await fetch('/api/settings/clear-ignored', {
+            method: 'POST'
+        });
+
+        if (response.ok) {
+            const result = await response.json();
+            alert(`✅ Success! Removed ${result.deleted} units from ignore list`);
+            location.reload();
+        } else {
+            const result = await response.json();
+            alert('❌ Error: ' + (result.detail || 'Unknown error'));
+        }
+    } catch (error) {
+        alert('❌ Error: ' + error.message);
+    }
+}
 </script>
 {% endblock %}
diff --git a/templates/unit_detail.html b/templates/unit_detail.html
index 016a500..547000e 100644
--- a/templates/unit_detail.html
+++ b/templates/unit_detail.html
@@ -4,14 +4,44 @@
 
 {% block content %}
 <div class="mb-6">
-    <a href="/roster" class="text-seismo-orange hover:text-seismo-burgundy inline-flex items-center mb-4">
-        <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 Fleet Roster
-    </a>
+    <!-- Breadcrumb Navigation -->
+    <nav class="flex mb-4 text-sm" aria-label="Breadcrumb">
+        <ol class="inline-flex items-center space-x-1 md:space-x-3">
+            <li class="inline-flex items-center">
+                <a href="/" class="text-gray-500 hover:text-seismo-orange dark:text-gray-400">
+                    Dashboard
+                </a>
+            </li>
+            <li>
+                <div class="flex items-center">
+                    <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
+                    </svg>
+                    <a href="/roster" class="ml-1 text-gray-500 hover:text-seismo-orange dark:text-gray-400">
+                        Fleet Roster
+                    </a>
+                </div>
+            </li>
+            <li aria-current="page">
+                <div class="flex items-center">
+                    <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
+                    </svg>
+                    <span class="ml-1 text-gray-700 dark:text-gray-300 font-medium" id="breadcrumb-unit">Unit</span>
+                </div>
+            </li>
+        </ol>
+    </nav>
+
     <div class="flex justify-between items-center">
-        <h1 class="text-3xl font-bold text-gray-900 dark:text-white" id="pageTitle">Loading...</h1>
+        <div class="flex items-center gap-2">
+            <h1 class="text-3xl font-bold text-gray-900 dark:text-white" id="pageTitle">Loading...</h1>
+            <button onclick="copyToClipboard(window.currentUnitId, this)" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors p-1" title="Copy Unit ID">
+                <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 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+                </svg>
+            </button>
+        </div>
         <div class="flex gap-3">
             <button id="editButton" onclick="enterEditMode()" class="px-4 py-2 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg transition-colors flex items-center gap-2">
                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -323,8 +353,10 @@ async function loadUnitData() {
 
 // Populate view mode (read-only display)
 function populateViewMode() {
-    // Update page title
+    // Update page title and store unit ID for copy function
+    window.currentUnitId = currentUnit.id;
     document.getElementById('pageTitle').textContent = `Unit ${currentUnit.id}`;
+    document.getElementById('breadcrumb-unit').textContent = currentUnit.id;
 
     // Get status info from snapshot
     let unitStatus = null;
@@ -348,7 +380,14 @@ function populateViewMode() {
         document.getElementById('statusIndicator').className = `w-3 h-3 rounded-full ${statusColors[unitStatus.status] || 'bg-gray-400'}`;
         document.getElementById('statusText').className = `font-semibold ${statusTextColors[unitStatus.status] || 'text-gray-600'}`;
         document.getElementById('statusText').textContent = unitStatus.status || 'Unknown';
-        document.getElementById('lastSeen').textContent = unitStatus.last || '--';
+
+        // Format "Last Seen" with timezone-aware formatting
+        if (unitStatus.last && typeof formatFullTimestamp === 'function') {
+            document.getElementById('lastSeen').textContent = formatFullTimestamp(unitStatus.last);
+        } else {
+            document.getElementById('lastSeen').textContent = unitStatus.last || '--';
+        }
+
         document.getElementById('age').textContent = unitStatus.age || '--';
     } else {
         document.getElementById('statusIndicator').className = 'w-3 h-3 rounded-full bg-gray-400';
-- 
2.49.1


From 195df967e4352e0db2f7864bcb30df220c69118d Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Tue, 9 Dec 2025 06:18:30 +0000
Subject: [PATCH 14/29] 0.3.0 update-docs updated

---
 CHANGELOG.md    | 60 +++++++++++++++++++++++++++++++++++++
 README.md       | 79 +++++++++++++++++++++++++++++++++++++------------
 backend/main.py |  6 ++--
 3 files changed, 123 insertions(+), 22 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cfe0043..bd3d0df 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,65 @@ All notable changes to Seismo Fleet Manager will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.0] - 2025-12-09
+
+### Added
+- **Series 4 (Micromate) Support**: New `/api/series4/heartbeat` endpoint for receiving telemetry from Series 4 Micromate units
+  - Auto-detection of Series 4 units via UM##### ID pattern
+  - Stores project hints from emitter payload in unit notes
+  - Automatic unit type classification across both Series 3 and Series 4 endpoints
+- **Development Environment Labels**: Visual indicators to distinguish dev from production deployments
+  - Yellow "DEV" badge in sidebar navigation
+  - "[DEV]" prefix in browser title
+  - Yellow banner on dashboard when running in development mode
+  - Environment variable support in docker-compose.yml (ENVIRONMENT=production|development)
+- **Quality of Life Improvements**:
+  - Human-readable relative timestamps (e.g., "2h 15m ago", "3d ago") with full date in tooltips
+  - "Last Updated" timestamp indicator on dashboard
+  - Status icons for colorblind accessibility (checkmark for OK, clock for Pending, X for Missing)
+  - Breadcrumb navigation on unit detail pages
+  - Copy-to-clipboard buttons for unit IDs
+  - Search/filter functionality for fleet roster table
+  - Improved empty state messages with icons
+- **Timezone Support**: Comprehensive timezone handling across the application
+  - Timezone selector in Settings (defaults to America/New_York EST)
+  - Human-readable timestamp format (e.g., "9/10/2020 8:00 AM EST")
+  - Timezone-aware display for all timestamps site-wide
+  - Settings stored in localStorage for immediate effect
+- **Settings Page Redesign**: Complete overhaul with tabbed interface and persistent preferences
+  - **General Tab**: Display preferences (timezone, theme, auto-refresh interval)
+  - **Data Management Tab**: Safe operations (CSV export, merge import, roster table)
+  - **Advanced Tab**: Power user settings (replace mode import, calibration defaults, status thresholds)
+  - **Danger Zone Tab**: Destructive operations isolated with enhanced warnings
+  - Backend preferences storage via new UserPreferences model
+  - Tab state persistence in localStorage
+  - Smooth animations and consistent styling with existing pages
+- **User Preferences API**: New backend endpoints for persistent settings storage
+  - `GET /api/settings/preferences` - Retrieve all user preferences
+  - `PUT /api/settings/preferences` - Update preferences (supports partial updates)
+  - Database-backed storage for cross-device preference sync
+  - Migration script: `backend/migrate_add_user_preferences.py`
+
+### Changed
+- Timestamps now display in user-selected timezone with human-readable format throughout the application
+- Settings page reorganized from 644-line flat layout to clean 4-tab interface
+- CSV Replace Mode moved from Data Management to Advanced tab with additional warnings
+- Import operations separated: safe merge in Data Management tab, destructive replace in Advanced tab
+- Page title changed from "Roster Manager" to "Settings" for better clarity
+- All preferences now persist to backend database instead of relying solely on localStorage
+
+### Fixed
+- Unit type classification now consistent across Series 3 and Series 4 heartbeat endpoints
+- Auto-correction of misclassified unit types when they report to wrong endpoint
+
+### Technical Details
+- New `detect_unit_type()` helper function for pattern-based unit classification
+- UserPreferences model with single-row table pattern (id=1) for global settings
+- Series 4 units identified by UM prefix followed by digits (e.g., UM11719)
+- JavaScript Intl API used for client-side timezone conversion
+- Pydantic schema for partial preference updates (PreferencesUpdate model)
+- Environment context injection via custom FastAPI template response wrapper
+
 ## [0.2.1] - 2025-12-03
 
 ### Added
@@ -92,6 +151,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Photo management per unit
 - Automated status categorization (OK/Pending/Missing)
 
+[0.3.0]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.2.1...v0.3.0
 [0.2.1]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.2.0...v0.2.1
 [0.2.0]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.1.1...v0.2.0
 [0.1.1]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.1.0...v0.1.1
diff --git a/README.md b/README.md
index 5bc60c8..bb47f1c 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Seismo Fleet Manager v0.2.1
+# Seismo Fleet Manager v0.3.0
 
 Backend API and HTMX-powered web interface for managing a mixed fleet of seismographs and field modems. Track deployments, monitor health in real time, merge roster intent with incoming telemetry, and control your fleet through a unified database and dashboard.
 
@@ -100,15 +100,27 @@ cp /tmp/sfm_test.db data/seismo_fleet.db
 
 The helper script creates a modem/seismograph mix so you can exercise the dashboard, roster tabs, and unit detail screens immediately.
 
-## Upgrading from v0.1.x
+## Upgrading from Previous Versions
 
-Versions ≥0.2 introduce new roster columns (device_type, calibration dates, modem metadata, addresses, etc.). Run the migration once per database file before starting the app:
+### From v0.2.x to v0.3.0
+
+Version 0.3.0 introduces user preferences storage. Run the migration once per database file:
+
+```bash
+python backend/migrate_add_user_preferences.py
+```
+
+This creates the `user_preferences` table for persistent settings storage (timezone, theme, auto-refresh interval, calibration defaults, status thresholds).
+
+### From v0.1.x to v0.2.x or later
+
+Versions ≥0.2 introduce new roster columns (device_type, calibration dates, modem metadata, addresses, etc.). Run the migration once per database file:
 
 ```bash
 python backend/migrate_add_device_types.py
 ```
 
-The script is idempotent—if the new columns already exist it simply exits.
+Both migration scripts are idempotent—if the columns/tables already exist, they simply exit.
 
 ## API Endpoints
 
@@ -156,6 +168,8 @@ The script is idempotent—if the new columns already exist it simply exits.
 - **GET** `/api/settings/stats` - Counts for roster, emitters, and ignored tables
 - **GET** `/api/settings/roster-units` - Raw roster dump for the settings data grid
 - **POST** `/api/settings/import-csv-replace` - Replace the entire roster in one atomic transaction
+- **GET** `/api/settings/preferences` - Get user preferences (timezone, theme, calibration defaults, etc.)
+- **PUT** `/api/settings/preferences` - Update user preferences (supports partial updates)
 - **POST** `/api/settings/clear-all` - Danger-zone action that wipes roster, emitters, and ignored tables
 - **POST** `/api/settings/clear-roster` - Delete only roster entries
 - **POST** `/api/settings/clear-emitters` - Delete auto-discovered emitters
@@ -182,7 +196,8 @@ See [sample_roster.csv](sample_roster.csv) for a minimal working example.
 
 ### Emitter Reporting
 - **POST** `/emitters/report` - Submit status report from a seismograph unit
-- **POST** `/api/series3/heartbeat` - Series3 multi-unit telemetry payload
+- **POST** `/api/series3/heartbeat` - Series 3 multi-unit telemetry payload
+- **POST** `/api/series4/heartbeat` - Series 4 (Micromate) multi-unit telemetry payload
 - **GET** `/fleet/status` - Retrieve status of all seismograph units (legacy)
 
 ### Photo Management
@@ -314,6 +329,22 @@ print(response.json())
 | reason | string | Optional context for ignoring |
 | ignored_at | datetime | When the ignore action occurred |
 
+### UserPreferences Table (Settings Storage)
+
+| Field | Type | Description |
+|-------|------|-------------|
+| id | integer | Always 1 (single-row table) |
+| timezone | string | Display timezone (default: America/New_York) |
+| theme | string | UI theme: auto, light, or dark |
+| auto_refresh_interval | integer | Dashboard refresh interval in seconds |
+| date_format | string | Date format preference |
+| table_rows_per_page | integer | Default pagination size |
+| calibration_interval_days | integer | Default days between calibrations |
+| calibration_warning_days | integer | Warning threshold before calibration due |
+| status_ok_threshold_hours | integer | Hours for OK status threshold |
+| status_pending_threshold_hours | integer | Hours for Pending status threshold |
+| updated_at | datetime | Last preference update timestamp |
+
 ## Project Structure
 
 ```
@@ -321,8 +352,8 @@ seismo-fleet-manager/
 ├── backend/
 │   ├── main.py              # FastAPI app entry point
 │   ├── database.py          # SQLAlchemy database configuration
-│   ├── models.py            # Database models (RosterUnit, Emitter, IgnoredUnit)
-│   ├── routes.py            # Legacy API endpoints
+│   ├── models.py            # Database models (RosterUnit, Emitter, IgnoredUnit, UserPreferences)
+│   ├── routes.py            # Legacy API endpoints + Series 3/4 heartbeat endpoints
 │   ├── routers/             # Modular API routers
 │   │   ├── roster.py        # Fleet status endpoints
 │   │   ├── roster_edit.py   # Roster management & CSV import
@@ -330,10 +361,11 @@ seismo-fleet-manager/
 │   │   ├── photos.py        # Photo management
 │   │   ├── dashboard.py     # Dashboard partials
 │   │   ├── dashboard_tabs.py # Dashboard tab endpoints
-│   │   └── settings.py      # Roster manager/data operations
+│   │   └── settings.py      # Settings, preferences, and data management
 │   ├── services/
 │   │   └── snapshot.py      # Fleet status snapshot logic
 │   ├── migrate_add_device_types.py # SQLite migration for v0.2 schema
+│   ├── migrate_add_user_preferences.py # SQLite migration for v0.3 schema
 │   └── static/              # Static assets (CSS, etc.)
 ├── create_test_db.py        # Generate a sample SQLite DB with mixed devices
 ├── templates/               # Jinja2 HTML templates
@@ -400,24 +432,31 @@ docker compose down -v
 
 ## Release Highlights
 
+### v0.3.0 — 2025-12-09
+- **Series 4 Support**: New `/api/series4/heartbeat` endpoint with auto-detection for Micromate units (UM##### pattern)
+- **Settings Redesign**: Completely redesigned Settings page with 4-tab interface (General, Data Management, Advanced, Danger Zone)
+- **User Preferences**: Backend storage for timezone, theme, auto-refresh interval, calibration defaults, and status thresholds
+- **Development Labels**: Visual indicators to distinguish dev from production environments
+- **Timezone Support**: Comprehensive timezone handling with human-readable timestamps site-wide
+- **Quality of Life**: Relative timestamps, status icons for accessibility, breadcrumb navigation, copy-to-clipboard, search functionality
+
 ### v0.2.1 — 2025-12-03
-- Added the `/settings` roster manager with CSV export/import, live stats, and danger-zone table reset actions.
-- Deployed/Benched/Retired/Ignored tabs now have dedicated HTMX partials, sorting, and inline actions (edit, deploy toggle, ignore, delete).
-- Unit detail pages expose device-type specific metadata (calibration windows, modem pairing, IP/phone fields) with a refreshed editing experience.
-- Snapshot summary and dashboard counts now focus on deployed units and include address/coordinate data for mapping widgets.
+- Added the `/settings` roster manager with CSV export/import, live stats, and danger-zone table reset actions
+- Deployed/Benched/Retired/Ignored tabs now have dedicated HTMX partials, sorting, and inline actions
+- Unit detail pages expose device-type specific metadata (calibration windows, modem pairing, IP/phone fields)
+- Snapshot summary and dashboard counts now focus on deployed units and include address/coordinate data
 
 ### v0.2.0 — 2025-12-03
-- Introduced device-type aware roster schema (seismograph vs modem) plus migration + `create_test_db.py` helper for new installs.
-- Added Ignore list model/endpoints to quarantine noisy emitters directly from the roster.
-- Roster page gained Add Unit + CSV Import modals, HTMX-driven updates, and unknown emitter callouts.
-- Snapshot service now returns active/benched/retired/unknown buckets containing richer metadata for the dashboard and roster tabs.
+- Introduced device-type aware roster schema (seismograph vs modem) plus migration + `create_test_db.py` helper
+- Added Ignore list model/endpoints to quarantine noisy emitters directly from the roster
+- Roster page gained Add Unit + CSV Import modals, HTMX-driven updates, and unknown emitter callouts
+- Snapshot service now returns active/benched/retired/unknown buckets containing richer metadata
 
 ### v0.1.1 — 2025-12-02
 - **Roster Editing API**: Full CRUD operations for managing your fleet roster
 - **CSV Import**: Bulk upload roster data from CSV files
 - **Enhanced Data Model**: Added project_id and location fields to roster
 - **Bug Fixes**: Improved database session management and error handling
-- **Dashboard Improvements**: Separate views for Active, Benched, and Retired units
 
 See [CHANGELOG.md](CHANGELOG.md) for the full release notes.
 
@@ -437,9 +476,11 @@ MIT
 
 ## Version
 
-**Current: 0.2.1** — Settings & roster manager refresh (2025-12-03)
+**Current: 0.3.0** — Series 4 support, settings redesign, user preferences (2025-12-09)
 
-Previous: 0.2.0 — Device-type aware roster + ignore list (2025-12-03)
+Previous: 0.2.1 — Settings & roster manager refresh (2025-12-03)
+
+0.2.0 — Device-type aware roster + ignore list (2025-12-03)
 
 0.1.1 — Roster Management & CSV Import (2025-12-02)
 
diff --git a/backend/main.py b/backend/main.py
index 4ca8828..d707063 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -18,7 +18,7 @@ Base.metadata.create_all(bind=engine)
 ENVIRONMENT = os.getenv("ENVIRONMENT", "production")
 
 # Initialize FastAPI app
-VERSION = "0.2.3"
+VERSION = "0.3.0"
 app = FastAPI(
     title="Seismo Fleet Manager",
     description="Backend API for managing seismograph fleet status",
@@ -258,9 +258,9 @@ async def unknown_emitters_partial(request: Request):
 def health_check():
     """Health check endpoint"""
     return {
-        "message": "Seismo Fleet Manager v0.1.1",
+        "message": f"Seismo Fleet Manager v{VERSION}",
         "status": "running",
-        "version": "0.1.1"
+        "version": VERSION
     }
 
 
-- 
2.49.1


From 274e390c3e17516bc4ae0c3557d2dbb69f848753 Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Thu, 11 Dec 2025 04:03:23 +0000
Subject: [PATCH 15/29] Full PWA mobile version added, bug fixes on deployment
 status, navigation links added

---
 backend/main.py                               | 121 +++-
 .../icons/ICON_GENERATION_INSTRUCTIONS.md     |  78 +++
 backend/static/icons/icon-128.png             | Bin 0 -> 1931 bytes
 backend/static/icons/icon-128.png.svg         |   4 +
 backend/static/icons/icon-144.png             | Bin 0 -> 2228 bytes
 backend/static/icons/icon-144.png.svg         |   4 +
 backend/static/icons/icon-152.png             | Bin 0 -> 2297 bytes
 backend/static/icons/icon-152.png.svg         |   4 +
 backend/static/icons/icon-192.png             | Bin 0 -> 2931 bytes
 backend/static/icons/icon-192.png.svg         |   4 +
 backend/static/icons/icon-384.png             | Bin 0 -> 5925 bytes
 backend/static/icons/icon-384.png.svg         |   4 +
 backend/static/icons/icon-512.png             | Bin 0 -> 7936 bytes
 backend/static/icons/icon-512.png.svg         |   4 +
 backend/static/icons/icon-72.png              | Bin 0 -> 1122 bytes
 backend/static/icons/icon-72.png.svg          |   4 +
 backend/static/icons/icon-96.png              | Bin 0 -> 1479 bytes
 backend/static/icons/icon-96.png.svg          |   4 +
 backend/static/manifest.json                  |  78 +++
 backend/static/mobile.css                     | 564 +++++++++++++++++
 backend/static/mobile.js                      | 588 ++++++++++++++++++
 backend/static/offline-db.js                  | 352 +++++++++++
 backend/static/sw.js                          | 347 +++++++++++
 templates/base.html                           |  75 ++-
 templates/dashboard.html                      |  26 +-
 templates/partials/roster_table.html          | 166 ++++-
 26 files changed, 2393 insertions(+), 34 deletions(-)
 create mode 100644 backend/static/icons/ICON_GENERATION_INSTRUCTIONS.md
 create mode 100644 backend/static/icons/icon-128.png
 create mode 100644 backend/static/icons/icon-128.png.svg
 create mode 100644 backend/static/icons/icon-144.png
 create mode 100644 backend/static/icons/icon-144.png.svg
 create mode 100644 backend/static/icons/icon-152.png
 create mode 100644 backend/static/icons/icon-152.png.svg
 create mode 100644 backend/static/icons/icon-192.png
 create mode 100644 backend/static/icons/icon-192.png.svg
 create mode 100644 backend/static/icons/icon-384.png
 create mode 100644 backend/static/icons/icon-384.png.svg
 create mode 100644 backend/static/icons/icon-512.png
 create mode 100644 backend/static/icons/icon-512.png.svg
 create mode 100644 backend/static/icons/icon-72.png
 create mode 100644 backend/static/icons/icon-72.png.svg
 create mode 100644 backend/static/icons/icon-96.png
 create mode 100644 backend/static/icons/icon-96.png.svg
 create mode 100644 backend/static/manifest.json
 create mode 100644 backend/static/mobile.css
 create mode 100644 backend/static/mobile.js
 create mode 100644 backend/static/offline-db.js
 create mode 100644 backend/static/sw.js

diff --git a/backend/main.py b/backend/main.py
index d707063..45839e4 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -3,8 +3,10 @@ from fastapi import FastAPI, Request, Depends
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
-from fastapi.responses import HTMLResponse
+from fastapi.responses import HTMLResponse, FileResponse, JSONResponse
 from sqlalchemy.orm import Session
+from typing import List, Dict
+from pydantic import BaseModel
 
 from backend.database import engine, Base, get_db
 from backend.routers import roster, units, photos, roster_edit, dashboard, dashboard_tabs
@@ -18,7 +20,7 @@ Base.metadata.create_all(bind=engine)
 ENVIRONMENT = os.getenv("ENVIRONMENT", "production")
 
 # Initialize FastAPI app
-VERSION = "0.3.0"
+VERSION = "0.3.1"
 app = FastAPI(
     title="Seismo Fleet Manager",
     description="Backend API for managing seismograph fleet status",
@@ -104,6 +106,99 @@ async def settings_page(request: Request):
     return templates.TemplateResponse("settings.html", {"request": request})
 
 
+# ===== PWA ROUTES =====
+
+@app.get("/sw.js")
+async def service_worker():
+    """Serve service worker with proper headers for PWA"""
+    return FileResponse(
+        "backend/static/sw.js",
+        media_type="application/javascript",
+        headers={
+            "Service-Worker-Allowed": "/",
+            "Cache-Control": "no-cache"
+        }
+    )
+
+
+@app.get("/offline-db.js")
+async def offline_db_script():
+    """Serve offline database script"""
+    return FileResponse(
+        "backend/static/offline-db.js",
+        media_type="application/javascript",
+        headers={"Cache-Control": "no-cache"}
+    )
+
+
+# Pydantic model for sync edits
+class EditItem(BaseModel):
+    id: int
+    unitId: str
+    changes: Dict
+    timestamp: int
+
+
+class SyncEditsRequest(BaseModel):
+    edits: List[EditItem]
+
+
+@app.post("/api/sync-edits")
+async def sync_edits(request: SyncEditsRequest, db: Session = Depends(get_db)):
+    """Process offline edit queue and sync to database"""
+    from backend.models import RosterUnit
+
+    results = []
+    synced_ids = []
+
+    for edit in request.edits:
+        try:
+            # Find the unit
+            unit = db.query(RosterUnit).filter_by(id=edit.unitId).first()
+
+            if not unit:
+                results.append({
+                    "id": edit.id,
+                    "status": "error",
+                    "reason": f"Unit {edit.unitId} not found"
+                })
+                continue
+
+            # Apply changes
+            for key, value in edit.changes.items():
+                if hasattr(unit, key):
+                    # Handle boolean conversions
+                    if key in ['deployed', 'retired']:
+                        setattr(unit, key, value in ['true', True, 'True', '1', 1])
+                    else:
+                        setattr(unit, key, value if value != '' else None)
+
+            db.commit()
+
+            results.append({
+                "id": edit.id,
+                "status": "success"
+            })
+            synced_ids.append(edit.id)
+
+        except Exception as e:
+            db.rollback()
+            results.append({
+                "id": edit.id,
+                "status": "error",
+                "reason": str(e)
+            })
+
+    synced_count = len(synced_ids)
+
+    return JSONResponse({
+        "synced": synced_count,
+        "total": len(request.edits),
+        "synced_ids": synced_ids,
+        "results": results
+    })
+
+
 @app.get("/partials/roster-deployed", response_class=HTMLResponse)
 async def roster_deployed_partial(request: Request):
     """Partial template for deployed units tab"""
@@ -114,12 +209,15 @@ async def roster_deployed_partial(request: Request):
     for unit_id, unit_data in snapshot["active"].items():
         units_list.append({
             "id": unit_id,
-            "status": unit_data["status"],
-            "age": unit_data["age"],
-            "last_seen": unit_data["last"],
-            "deployed": unit_data["deployed"],
+            "status": unit_data.get("status", "Unknown"),
+            "age": unit_data.get("age", "N/A"),
+            "last_seen": unit_data.get("last", "Never"),
+            "deployed": unit_data.get("deployed", False),
             "note": unit_data.get("note", ""),
             "device_type": unit_data.get("device_type", "seismograph"),
+            "address": unit_data.get("address", ""),
+            "coordinates": unit_data.get("coordinates", ""),
+            "project_id": unit_data.get("project_id", ""),
             "last_calibrated": unit_data.get("last_calibrated"),
             "next_calibration_due": unit_data.get("next_calibration_due"),
             "deployed_with_modem_id": unit_data.get("deployed_with_modem_id"),
@@ -149,12 +247,15 @@ async def roster_benched_partial(request: Request):
     for unit_id, unit_data in snapshot["benched"].items():
         units_list.append({
             "id": unit_id,
-            "status": unit_data["status"],
-            "age": unit_data["age"],
-            "last_seen": unit_data["last"],
-            "deployed": unit_data["deployed"],
+            "status": unit_data.get("status", "N/A"),
+            "age": unit_data.get("age", "N/A"),
+            "last_seen": unit_data.get("last", "Never"),
+            "deployed": unit_data.get("deployed", False),
             "note": unit_data.get("note", ""),
             "device_type": unit_data.get("device_type", "seismograph"),
+            "address": unit_data.get("address", ""),
+            "coordinates": unit_data.get("coordinates", ""),
+            "project_id": unit_data.get("project_id", ""),
             "last_calibrated": unit_data.get("last_calibrated"),
             "next_calibration_due": unit_data.get("next_calibration_due"),
             "deployed_with_modem_id": unit_data.get("deployed_with_modem_id"),
diff --git a/backend/static/icons/ICON_GENERATION_INSTRUCTIONS.md b/backend/static/icons/ICON_GENERATION_INSTRUCTIONS.md
new file mode 100644
index 0000000..a62823f
--- /dev/null
+++ b/backend/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
diff --git a/backend/static/icons/icon-128.png b/backend/static/icons/icon-128.png
new file mode 100644
index 0000000000000000000000000000000000000000..83af799d5a012a7374c9920ec3b9ee07406f1ccf
GIT binary patch
literal 1931
zcmc(g=T{R57R5sxq!So02<SRgK{m9>1P~dPVvuSQ=_CpZkrrwUq!<E%N;6ASN+8J4
zK_l(Z0znue5?WA-fQXc=2vLxw8jxZCiQRYJyYHO);rHQwxoHSD2RUgqX#fBq=XlK?
zb@CJcdy>EtbwTeI0{{{zM|&H0V(}M7s0)K|_T_Q+_1V}brgYl@i?gPm00fChXL!@+
zelE8?$xnBjsJ$k!oUH>7Z0bK5+_&U(%X5Q<)p-1%{QSEI>6ZTJQ%)8#l`a49^Ccey
zsOo=_*^UrxJ-yNsMg2e%UD@8_95**CZPiHuCDc0;E9IpDr^Nxuz(gCdmrnuy2!OF3
z;H)x0_Wy3T2XJn^{DyNo@B18jrk`G`9jCgWztma%Ug)SYu<{Y)opR)fWb4;)l_zm|
zk6gcLqPCCI_~Mf0%r<GuIKiqiuzEp9aT>DJ8JKcItpj^`Ri|P^nSeLm9hxg#cGsOS
zotso)JwSsrf|hFuC4ng43+vySrb^!NgB3?ai-NGD-X_{@c3A9Y20cQ$6>-5<c<&8%
z>OW%`N^^tO=3J>9Si@pmiL%wXe3j16F%@G7<{y{KRAD_L5hEcg3Vjs!pGA$39o5+I
z{(7;1V9(OT<wCaWlRi{VNRTE)5BR%51j<pUXe6E<(mT<bnba}Yl`}nph?@m^>J-4L
zWPe3U|ALP<Lf)N@bG5ds4F&ZHLdm>+O!88+-`e@)fATLivESLUE~bA%>y`|oygmEr
zkL%!6i4`u~M(B;~I%u`AA?<L7Z<?G?!)Ad_?&V3n8CJY$!xvjbpSOzjxq*b(ZCJpc
z(NGQj6otxnH<?v5SRlX6$9Q5rFpg<d=64Zu2~WradZ!5GBlG0tW-(bP`*9JCa?5IC
z`f`v`!onXcbFaGd`Fz(-0M7M7<{3BfS7zGk6Q=5TQm9Op6gtU9zMDcu8sn7qIV+7;
zM%cZdVD-E&OwpqNTffA~K`Gg<LmNvCUD-9ki{?|zH5HNtdtl=QVhFdME62%3S{`>9
zn%u+k!F)3fdD$mA>V~+UR<jo(>lX7>sPo$CK&sZIG%9{AE2_fO;nN;&y0zM+L#rbR
zPEp{L{R@(5Ch_XmGf$4VBO)miOX4FqDHr(xswoOL*KGpff@(uOtt*QfyXtt87~-Ae
zjE=A83#lBh`I}RVQxjH-7$rV9x(iZC9+h{{h-SH}`7oeco0W0s*h;fS7q2(nilh)7
z@I`vu#sT5O?Tteuu@kTQ{5ofX!H-ge<hr>zIC;Esxi3iaagrn@ka{vVw!^LcOK8)n
z;FeO|`ILP|Rp!UJ>Y-;8uaL3Gdduz|c#I}j8LZHjPpBB7Y1iCs(W{p&piV*SwQkz!
z&CjUF`2@3bRyp;0AJBdY>qnCjLM{}2A<8*sSoqceN<}g2-Lb=T=H{dLg35$IxV_}n
z#JM4|Xm8;6+OhKY9!$ox%;g0LS-}?dz}RBndaSEZ`^p|&KuuyO{RRnjQC9e#_yf~S
zo==mL_%T|=ZXlO8Xa)a!MBMqKnIGoq4ny9j`2CHNL6;y<I2;?dDGv+dxv`8aJARZi
z4y*|};`pXs&6UZ!5#}T<=W^uNHmPjw!fgh&c=cKp8gT!5yF(6WobKGRoKyb1HYJOg
zU2Yz;U0ab23AGysrgN<{Rz5r6EBw6^yPp<;3CP2e85UXUAgS=jL*p2|r~>7~KRl=i
zF9b?7+)Gj8!JHZ~qo7^A2r=_&*K>u%gzi}CFRbv)+9QM0v@?s*%^+yd7!02ZHq;bz
z1BnK9^JZA4@uFPueIH)w_p`kAx6SRaO?qopXN}WZbE@Hvu5o^TYvNcbZnn+VK!6mc
zp)^Yc6A2Te)r=zKHf)jmH?05RwQ#lhQ?kB%aMs^T4vDTq&r9;HA>BQ2i_7t$s<G>I
zf$~EV+>-W&`?^B&T$t}fg5pC4W^VMg5MQJaY=dHk$I~NE_O<Ra^~~;Y1XK-c2P>QD
zZDyOJn9k)5I44yWZ_=@b`FQ<Q%;Mt_$(`>7o;UI~)C4%MoWWjUuG&|qyMC)z$ajMf
zrcdeHy1wBd1;5c}n2(u&9=Q`BVz<>f_deJ^c5{KviA~BiyuDhQD&9C_tbPPW3Zkyx
zDLA5WI`Yb_PTwVJ9j{Z0B0eWGZakD;9!AF@C_}d;Hi#6SSG;LNM%30RXT9X;o~w6i
zOqLOW4^r0?uJpE;M!IOVRSi8m3BM2TNHR1EaCM1+xUnK_-{bOrlXbZDIU}CDNmJDG
o=L$URrW-1H*+2i!`{WpCLNzIqXvlkUQnCQYt8VrzTmO510sAOpR{#J2

literal 0
HcmV?d00001

diff --git a/backend/static/icons/icon-128.png.svg b/backend/static/icons/icon-128.png.svg
new file mode 100644
index 0000000..e812a63
--- /dev/null
+++ b/backend/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>
diff --git a/backend/static/icons/icon-144.png b/backend/static/icons/icon-144.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8d90b5e2406ca775486f8dee85e487c4b340d13
GIT binary patch
literal 2228
zcmdUx_ct4i8pmmG`?|(!uc$a7wl+pdsZc>HK|*+qQlq8OT8*uwGxn%TOXWtWR9tT(
zZ4pXZyD3HOnAM^+V#cP(b^nTc?m6G*`~CTIp65L0o92YNA|?zF77!2+L)h71jx*=K
zBXr`}gTT?N0s=w_2pcQcIPx<2nuFJ{a#PP1)P!xKpmfp%WxcDPWUT1_PkJbTos);J
z{`O2`oRno}uR?=u-Wmgz+!imVp~kF%oN`RiVAQf)XhHwk!aQ65YeVX{&YY_B)B5y4
ztW9NvEqD;UoUoIV&aA<8zk9RHU+2Rp35hEze8%cw5#Ln)a`;6ni3_P;lm#kbP73<}
zcLIL`w7*J+js9HiOJQ+aqSI}%^vZKJJW(>}G*$YD%JT%Z^aLegtcS4@gW_4SZ6ou^
zY|GkKlCTAUL!vH<lknG*(HFsTWir#xF0)Cl2Jn_5i=SCqVZWL8V-=5fago{0=q>&n
zYnjpV_`|{ge(ue0Z8n<MH8Ur!7w-Biz9f9f!vg;!X2rr%F=45&j&1&j1GU(z#Jj6-
zDUxitxeCgF4!DJ7ei^xwF&D&Q<p>}jyqGFlonXrvUH6hWr+`V-PfO)5Tm9xSOlhf8
zuHY-<-oiMYA_{DO4QOrG>o=cN$Zd=)9`$W=(vhnm<L}NzSir7?Y@GNE*IjzIKh(;S
z%TPk9Z?u{_47z`6Y?z_+K6TPihOAIVxxKD-huhVAG<5BIhBsE-P_pc~CigjyQok0~
z$~{VcfRLqT)r3UNbGD8D!HDNZZ0_AlvDcX<WD_pGK$5u7Q<Xq7XrO6)MaB$&$J;()
z+OG0;JoWa(8~lyGlRyDaKvC`7_?l>EU92`$gCMb<p;U-nS<wn0gc@A;Y6m&!OgFe^
zhHOW^l;mJVZ+?81D7j}pY<WXhnj*nMV|NyO>V~!_&c)VRkg1WjJlTxea<lqs3apVo
ztG2WG7f*^{rA99|BQd|N45-&7MzVu22lcH;+;#-$=I#w;5y<zY_PghcQoNmu5oVj|
z7;oe+^$vsP7kU*uI~EI>tKPV3OsHS%50~}vN1C2*0hcUA{yd~zVxIT(Fn@mHvr#xc
z02MsgK7x%o7Z?LvAoYZpLjxsM^#T5`akn@z6=axE)BrtOMh;WDmP}RO_>=$m>n1!I
zA*)mq*AI~AJad;{OiE3^Jkmmncx{bm{}{sZ_r{73*BG`UcOogN)8Qgwx3ZS&nbo3u
z9-rZ}XXln)8ON^MiaGY<T3tGMnL!!TFKybyJwI5>K|o*yV%D1=_Tg2QFLsBkiojVl
z=aKsm!L#0RZ6^HYkLdM;qzlnt>Y4gx<dOb>UhfuCO^=-8gHr-(bvRb2@?5L<<u@%s
z;0^<6-LcMdtx2P_5_$#s_z;h|2L=?~ln(}oGG%XnM@j3FC_P_cr@Jkx%%*)@q~Mgv
zIyzCa-y-^GW;VJeXwmJKQyvZVq?T5*N6b&%g(df*6Ur<vByKUS5>mplRtD8)w-CWs
zGg7CXL?^C;JG*A%;a^cTLh|CJZ_{MEb+==_xELPfd`ejGTIJJYZ?iHCOXmtriIzI(
z;6z5Kvo>PuUndIkzl~f!oWMW7!|Qcl^!>Qe4q09v{9c<n<vSnKaCeR4*3%;V@Rv<E
zs!Vg<*l@dmQ%Yy<^=0}7;IxATH=xoNpL}5TNYY;d{oALzov$z?Cdrj=z4zs}W+<ap
zRgj84MYqFXL{7*(A{;v9y)y``zpzHt^*!T7FS8Fon{(+9glsn8zUxuGsms+HR2@=$
zxI$sIFrK9aH*Do~1?KZAJOBOk-N~$n5GZ5G__P;uF@B7gQKuHVGB8sy4hz?Qy+tK*
z=*HRTs=S<^lSLSr^a6acbie(ESpKY%5D1_+9xRG42gMbS4%4pn95&x`c>wp&F7W7^
zSYL>M@cH-H-jC8~PQRs8x`t5r5#EppT9m)X6RC1EHH+m;%4=n+8j_4W=i+AR)=kG8
zm=JK`pXI)Zt0ItVRiQ&xYFJ%!cQD}t%kPW9_r__H_qB`>*{A)>2e8Gr^)<Uh1$aOU
zgduO2dm}>TN7C0>sCJ<~C5QEJN%}z?QpR3T%jhU<ObQ*i$EI0xySXL3y+Vt|1Rvmg
z>v#DYi(C~DSO)E@Lw9&&Flvj<Q)U(X(w!>yYWkU7Q}?+6w!QJu<#b?!ixyL_ZukYP
zljK=J6Qb&oJML5g@_k;EPQ*G2;;%yFBQ=51z}oI>IHm9V?FW;&7N6TZL8!z1wDG^s
za;V>ZIW8&A*UvNq7Uze*C|r8Ear_ch!g!*!ac(pH;vbpAFs8Kb@tT0C9VQ-WNK!S&
z=Cp%uPi#HluhH6-HNrt_pq74SN=k_%nHdoi`7OfBJIds1a`S{#C#t}AUPSX%WBriZ
zq=KI_%D?Z`?(VP2{w^p#yjW5WWoNXr6q;Y2v%gk~k11j_;eaMV6#r~L$JO!2tVQ=f
zx*G&tn%rXVdqD)v<GiLPqVgOA+UHv4Lp6oZz%^#;Z?DEKwz@^P(X-FHUtz8jFeD5T
zBRU1m&D|n^C5VnGgRv)#p&yvUQ+jc#wi3zDqz-Dun=bkPkF^WwSjb~x^o9<O+lT<d
L7G=YL`#t&({cSXi

literal 0
HcmV?d00001

diff --git a/backend/static/icons/icon-144.png.svg b/backend/static/icons/icon-144.png.svg
new file mode 100644
index 0000000..5de8b3a
--- /dev/null
+++ b/backend/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>
diff --git a/backend/static/icons/icon-152.png b/backend/static/icons/icon-152.png
new file mode 100644
index 0000000000000000000000000000000000000000..9ef75afecbf8abe4ed67bea837f6038f5cc8277b
GIT binary patch
literal 2297
zcmdUx`9Bkk1IHy2kq}e+My}i&#aw&HZSIGeqfrX$Fngpia-~v)v|*Vet#vH9LW(v~
zYw<i{?pzBo)6ABe$>aN9e7~>P`}6ty_W9-W%O}g%+f`2HsEnAHm>kT_$!|9w{#X0O
zcb!<#6fY*W{{zg)9*!$rD7g~t&pDFbEi@O(v9D?YMv<k%u##F2@oP#AwSFP0^Y_KY
z;YS;K&lYZ8v4doJkr3$K9=K^hpY`om#456J<aosk<;!U%75bk{@Rk}H@ui1GrRk$t
z7$(Xtzq#KwzBDecY<*!%B%*h-6A4UC>Do5En=+AvKW(7ic3CQ2us2&m{QsPcyBw~>
z@|%6^BGUH@&G|58fA?N@n7hG0pZYQ^b!2rJ{GdV`gt=1T_yIlMo&k7}3roAzG}&U(
zi{e5`e)mz>K3hzhcZ#V&dUh}hstqprF^b-RpWS|wxDu$gfW05{;fb-y4hu4bX_6Bv
z&O3x$OhL*2tdzwyN`cYFzpuK(HY*(iBQ#$MYRl9Yu4P6td`cwkG#{BKrPia}0t=B`
zsY>Vm)qU(;47nZ2J7bM531zLJ0JT+W_J7ibp|n@de1RYj%HrdeI_y<c42enz)B`O^
z?UXS;-Z{`;%8BPb@~AO3;K%SoTVD0fsj+FjQ)oY<B5SpbCvH!*w=2sP=nmB5+U@_a
zAc3Y@_gWLI+F?JsM~;mw_9|iZnIX@e#G3`G_aI~bi(nsUDZY&6l0dJv)PdTu))}5%
zIA5!#<6gev#SeSk2-w%3E^MBAZrks_SVLsIL#AM<g*vOnV*q{)*yLGslUAE^#7$@n
z!u3eYtP1507*i(OL4>&A$!>l>vcJ$*FYnJdE={gHv7XbmB>F7Xcrr8lDNc_xHrz`5
zTb4K1Xf1QMAE6^3{m}S~3D5axYp4QfX00it-e}fA=@vQ+T@ttx-t(UQ!#27+>R88R
z7F8Zil^&TL$e}Sukc#2YqT6cITvgmg_i@Y^-Gt8lU)dPwI#<S>7oY(%71ek**c_3%
zC$U^NNY&Jxlw4g>(YqQsg&%62;gIV!2=%15L*Jv4`xZ~Vi(>=&6uvFonOD5c42#e!
zUaJ$G2Yw{h^%iG;srDR-GS8M+HhpGI8Jhos<~0H5B7Y%QYXMfks;@)XFVOAhWp9$H
zzB5<jKRq19Q3iCjS6c+v8*g~0=v@gi(t%n`Ae)DWb#1g#1GM%1+<S9qTb}%s6Kk}J
zDbg8CiNE{?Jg*kI#)1bU<9@pA?SyzmT$+BuTOPypSs3R8Fz+aNJrH%9@M|BD$Q^(C
zuYjY=^-Vs%$|DW1h(;3jhw2J?)O^3q_U{c_NOuLgX9u6PKA-`!xeivgo4~CG4-U<%
zoBrl!wFKwV5F86l;13~6w*1u|GyCOJ<6Y2p{j8*=R$yQ8dCbXo4>#@6-)9ao&$Psh
z+iq^WqgmuNG{f<SiDI4I%r)R%X&7R<SGg20s)|Uamr`SI5vfeeb{Iv=C~Z3mcuyWL
z!3teWOWEpaym|Khn@A)mD%G~eUa{c2`UTmVX4m_D1{&D6g^!Q(fu@DlCe@K%>{@Q_
zXh|^VyiDw7W3|vjsyd`GJnun4Zqq{M7^jD?f+3t2ZsgV<y%eALhXNd#QUS)oq5aR(
z8ql_hGh3%N2*Z)4dH~yGeiA~lE=p(wPq7}zAJEh0POES{JTH9>ZmElKX6{U)9#6&v
zj{9>GM4OpdqlyTNo1RXz#-BwEIaflEb3n)}WHqF$%8JeK^%Du5E*x=~LNoMW(whsP
z{{W=E-y!IF%abs;Ygx)5S93#vK_p`UQbQ-yf9iZ&x$-+`$sr^tGk?7%n!h<XzEWiq
zha$M0K4UidmE=pb9S&W@{0TDJ`sO&xZT%)^NSk`eOI^-YWe>-;2voCAu+>6^k3Qxp
z7QNugZn(|2I32J*)YW;LlT$veg1QM^gixG;2oL`@35-q@_w8KtIz!&|r%Vhr6%w$P
z?l@no*_m)U(OPqBX<W`HwP6}xZ_8H2ANSlyU=AMMZTx!CW70IoBT0umrrR}LAm9Y5
z-+%gx4lyf?i~q5B!C3NFdibNuAI{8CK&`LZefE*{S^1bydYDFVCbCRj6x(5^yHtK?
z&Tx9c?JostjkgH9)^#v+^<<i9{>IRXxR57V+vv$QS;FUnK^w#;J+W#N;b6S>-SMut
zo!{KF->-iTPFuA=Bzq7#HY;t(G<vq8)luIG!Q9nR_A&DUzKNI?G@{C<3HK;QII{gx
z{&NY)vw96+_PBu3&1;x36g|;rT`SmLR7c#VhffbCv3rZIWhP^yi=lTDaE5k9BLZsq
zgR}9Y3#kJ`VO?G|Q3jezjHfr=T6!IT<NKdsS?X13xQ4EP@3r07rt0;D0`qoMwKZt#
zd~#ddF@0_B!O$0ufcZ!)Wr=+1x}1_e-hA0{h?V|}06W})Z`3?ls8HHG5ynN?BOaJ*
z;K?0<tvmzNhO9h@slh<;qeE7mHeOq{|I#8}2l>o|HaTYBNO?`5NIaM7+C>G8yWiGQ
zH8B*Rgk)us$7?pvk?TY{05><<iuTz!*sWsklrLmCV1OyXV2~07zuPAh+Z^Kbr`ZvY
ztlc3#I&&|cwwel*!!@jB$k0K#0)53`XF>5kiNn(W3*6e-Lxa7Hb+>KP+PySlFlTS4
JYKL<f{{n%i7*zlO

literal 0
HcmV?d00001

diff --git a/backend/static/icons/icon-152.png.svg b/backend/static/icons/icon-152.png.svg
new file mode 100644
index 0000000..a3f0850
--- /dev/null
+++ b/backend/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>
diff --git a/backend/static/icons/icon-192.png b/backend/static/icons/icon-192.png
new file mode 100644
index 0000000000000000000000000000000000000000..3290b4732349f1474341d4aac69e773ca8899281
GIT binary patch
literal 2931
zcmd^B_ct2~8&=e8Yur-Ts+v_>30kw<#!l^`cGO-mOO0Da^BHNaSf#d5n?|f6G_6r8
z*Nh}3HW8x)4L<kJ_|Esk`@TOs=e*~<?|Gi{JkTfR!0T-MY;<&V*NqGfEH7u@zr{j-
z+3~%<pU}~<KQJ=TvyLhv<Nf@t)`T#7q^>_O(9lS3h}az{x-u;@SjJSS(oNUi0P|SE
z#I<mOAYxVkV6`diMBq|w>Z*)zU6V|VaxwynoT+>hmODr;KF-V}@$XZp*^up7C<*6m
zU}nGD3_FX@Am<T*u@({-3<wP;9Tcq<S!dexz!~0Tt4uQ_oLs+hg_WM3n~_nRg~gDQ
z^R0-8h@P(QtAqr`{{sN3$wn!)h=PMN6h`=63N)OHHVti}+t^^X8@Wa_E9bciAYkKN
zeswlOMulEVbYJNXKj?*Kl~7nsxgtO$6Kq4_38K{f%5~!DaWrPKQFiHQZ121o;4vRl
z-YHO(=BU5%$tS7rmb_tpclW_TFi~Fickk1<TA7kXz9Sd=Q==HSL6T4O;j|k2W5&P*
z<+3`R9>5Z{K>wrI#F8nFGJ|(1@=1;2c#sp5LufG$n(L~-uEE>VeTb+}$3*nTHReBc
z`0KjFZq$fRq4a{aMw@k*GmU6Ejz8icI38oIP(z70{p5Px``>(1_NwmTo$HVWNApbj
z$k$}=fqr!n)IS$+IAtfMRA2tE6(2g_r@|)|Wz(|I)!Gd^aeeI}I1yy4^HB!Sj9&{a
zYxtU7sL8Wa7m-c%%Mn)kBE~tA0N}aaV?T!uP8sL9++};L)ALv#$>PDv(3-Gpd7<Fv
zXip}e{Ce)$_=x{YSh!R1i+6#Ky7yT6Wj~A!Rf*PTO%aMg_C^hI5^hCwDz=fS0N&C(
zGt$<`X_9{gIy<CPq1w}6M&}(kT)L`TIe)Oxrn8+5R2AK6s@80%W>E}i*2L9Xq3qKG
zgnd-_KoLw`11fbQo)C}4rdbjz)J#_y8gEu(@7<{Nf;hAyC)TOqLJj7gsqhW6obtpj
zoNp?_UXyB-{r&bw{SHP2_JKKzE-BXn!z|nPvFZNQZ-f6SYL>_+ag6%hLDKYcEF__4
z)^IajcB~-(Urne4oK%3iBi0kkvQSz=a*#vR=l;XMVPbW&xYHf$SD6?{3~h$Ycq^XM
z_FI19YQVh|yFtj2cIwz|qpz(c2R#}CTlpRXau<%6SNMxsAHb#<4oz!`UDWOLeQ*pQ
zay6NSHL>1ZJ~5t&dVMIa*vnA+w%p|H-0wEET8s}Mh!?V-Uz(BnSw3VX%ubkyBs3@+
zpNt3jLNLd<&}YsYD1snU;vZ>dx<?zFYnI_dk}4{g{J^vIihDniyo~SNu4>SVwnvej
z*}s}uF_I!CHF{gtJLqsV87$e9Ag^Q^Qwf}pvim6zmHP#fRSh^$;8ktUonYqW1zZVd
zSJwl8XA8CzgrW~u8~#I}4LaFzj4XZ<g(>V>o|>GLU%qHO?yP=TxHoANhu+{AL&##J
z=n8#kAN28_*z78%V~)6j*QDuNX$=Z|E9&2ut%(9Z@VCthPrRP(p1DK8UlD<TO=Qju
z?cZ{&7*)PBigRP!X(}6nl0NL*+oP&=@43$4lRPKrdAC}1SO|QVeE7}k)E&D$84J@w
zc^X7|sh`ceKJQXZnyNVlOQ1TbMbPbbh1eqq(SW<|ol1Ky<Fz-W4oWVyC%$@eF?TG^
z(+?s2@EcDs$*p>`<T0TYvZu(tjs{9xPu_VG#Bgu&L2BD~GCQ++hCo<NVftx&*eWr0
zwIzHBrJ8;IHPhiem#b|~*>1NpA+qUki!>Z~j$IR@l_ZzBM~r=l7v0D@5|!*4#+s55
zJKDWu-_Wzl)0V%ZI$RZMt859d;^f*!P$k?mU19ta)50hzOEA#m0L^i0B-NaPSD^v>
zL^FbIHjZ=xy)}By*oYkRN<}X-gTk+BUzMFP`#5rcoECFQjQpK$u3{N_caJ~cj>zC+
z&WA2qv=f!Uvl#)XBXqEN(<)rLar^Ft(BXZmKe(pag`{D#q`u>E?vXdk=W-+*R<i|a
z^o&!omOs3x{S*!oTsRla)Q6?Up7(hv3b3afsAdIO|JuiA?)DY&qEl>U8w=GJ_HUOs
zo@BAhbOwC$r_#*L{03q2gQ#9;#eru07MS~D$Cre&=|(PKc6ZTGs&{Cs#pjLV<dQfP
zty4N{N~7u7W_-|CBA@nvXl)`*h~^z)S1h@EcH|+yBJHO30ctP^EW~SXK&4KkikENs
zy%$JLo?gkf+mh=K5@16-Qfo$duls}K>-4_BOc?AzU#x~F=@&?XVBu3A$5NTj5lW~5
zX)dZ<>!c4od8y46%ZsIJxJy+BfgSCZ)8q`HU_FnuGVN&Hy%)fx{^=!`#<;sLV;Wr`
z>mmNnDXnE(6S6Q6BuIr!@SX<>VnUupWcsxex&g#)M6i158vRzQ?;$T@a6EEYqfuz<
z?(tA+zyQbOS~P@NaI^sml*|QwerGg=XrP_h<xUHq*^=f83ibbd<eXC#24{BgG^M+N
zq&)@xy-QAf_IFxAN5{zQ8vNPz_&Fheib6!(Y>72L1_gh=WmYdiza~hY&aO+$U&?r#
z(81z8T|$97ZI9nT+0*OnVKo|1nr|h*BZ(HD52ZdFvt4rgGrM|n^+XjUq+!Ft=xe|>
zcAo?qIBxm_v~U&NmeNb(!$Iq2<$rlnlTYuwoNoTPfzxz<GgmUWIHu<8+Po~iyzUNK
z?;3wuD!CSy@$e>d_4xg~t8Mb*FCn-o4i{99vR7J5iK>g7HuH~?_0QUS-Z6{Wa4Ow_
zXMDsU$D9)8xYgBTaksgC#@xT_H2Ot}!|HYFN|J*Y!$sNnwMG~Bw8GmZhF_|Aq>6Xt
zpS+a)DK716pppNyIN%I@`WqSX{=yaAW5<?~werficFOVml)QB(-pLY|H@yK(g~eO!
z*|@h!#s9b!UB<5}>I|K}r}c37G&1|JD|WI=tTRT;2PTWa1I9k+2Smz9YFQ@zb7>wX
zZQniTrpNx$r?;C|FrfCMo?e={+=;izM<ADjO0M!vOP7F#N&vk7J>TWYT-YJ6JdfhB
zlyT~6*qe({CKk04`hp|l_!unbmPOx1KIlqMO!<SjszyZ*0^_gh+<h^nXvo!9uDlaN
z=l<`6{R{Vp|8@C(JeyL)4TI6=Zs}frVfP}PntlABJ^_Tgbwum<Pg2xK<h4=CIJ50j
zb5gzh(2t{ma&nSGWwqptWuc#aB~o@w5GGQUUtP$7<Z=7Xvo?4})Cv)Vi&JeYa3)so
zD-ju!*1*zfgiVwR8|?9-S#FFtci_BCc*n}B^vYW+ybrd`z73gzefUwD^;|Qwj8jX*
n(Es2$FVi0D|6;<+ytsmGH{>p(C!1V`X*#37%nceIxxV@@J4|Rp

literal 0
HcmV?d00001

diff --git a/backend/static/icons/icon-192.png.svg b/backend/static/icons/icon-192.png.svg
new file mode 100644
index 0000000..ef79877
--- /dev/null
+++ b/backend/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>
diff --git a/backend/static/icons/icon-384.png b/backend/static/icons/icon-384.png
new file mode 100644
index 0000000000000000000000000000000000000000..2cf0aefd5dabef6f41108ab1c9a78556e89e162f
GIT binary patch
literal 5925
zcmeHr`8(9#`~TQd%2tx>FBPH47P3~BvWD#YZfuim4Z}!<2qjx%8PeF7P$pxm$YdQ2
zV{9|B&tOKAF?K%FAMyR=d%dsgoL|oKKG%Jo_x5<)_sa(s#@t-OTmS%o`~E!xYXE>H
z;om;V$~=)rNRa>l!S(wFw;w(!q!7T5vRC51(){h)YGNZBcrHggJ~?Qv5zON~I?;PM
zD)>&J+36^0^yP(I@`rSEx(Y>=q7jCb9t9R;-A~LEea<)iiT09hLc=4aHJ$w)Ys6`>
zHk6$cu;HlGuGd3<pW3z`8@;{1tJuPbgL}{kgl+KbiqaBhH<cA|%8$$fxaY!tGC_!y
zUH=RVt7H;@h3{?xAmu-OKo6fJ!0RL*K<R&<|7Vu}m*LQOk5^KPYgAjMDcRqLH_tai
z!y5h92EA$1s~n>1Y%QtT2U6i2lwLZW54rtT(Sxxw*zGp(8n3+m`HOaoo8{w;$~us0
zYj+WrYC#dQ5TjkWe=NZ|Z&S$r^TSyC!P6zf;U&X3_|*vC$#x{<<#pKr8xz?sLb+(*
zy0jjdJ^@R{!uC{PC$J)%$_ihUos+PMG2CMJJd`9#e(>OXQ|q~NiVT6pCyS)ieYMqn
zAy&7K7xltouW!{4##9`dfyVoa*L$DR^+yCsn=Kuz#*mwxm-uxIKTtws5B^HzJ_o-}
zInq3spP^Uq%nFu1o5g-lJjzoSPaXLNb+e~s8ZR4=e$S=g0FFaXE$t&AyDg^8;YshI
zjEEXgRrlwyIoJ-I`M*ph3xrAIhDGtU;fqW1&cQL2<%h9oKi>3#18Ydwu<x7A{?rb@
zJM(YmYLr<ANa+nP3Gkg9&#gK+va2n&Ci^dkSw(Dfv|2W`{eiTO!gJ}N`C09<Eq{Oc
zGH9Uj)I?J1FbQt&@@gp29AXydhXXE*tq2Q-KWglbjCMrQ^-F%_PWd(8|Gh_qV**?9
z&(Tm`ga0gyUsk6OA3cdbN}xONA^TN~$8#74yC3Yrf1hr4DuY-*OGyX#I>ce({#sgI
z(}d@5oJ}b=4pKDUeFd*y9klG2)D9L+dkR=8e|5aqc`2yea6j(UOCatOakX|Xpg1gO
z?5)435$^+wzdQB&#DY9DUcuny{i?dpLsnXZv&r&r8svm->Dz^S?7O0an#%T~*tK0o
zb3L~VS6ni$EUxcgzRO91+ZDUoEoO^zoV7sVy1+)x0u~Rmms^qT@?0{?*A`BYs7+MN
zkl9ETOUkr$tY*`8i##HGFKvpwC=Tv3^6&M>kbO>Unf`qB$IO|FbGuKRt$%NxIu;BX
z0mQ|{+bkASSj(lb_Wt6Pt3S;zW|CxIVNzK7o4{q7+$@k<+-Qs(h5A!WZ%<wH;%k03
z`b6OX`4{XNAhhShSQ-C5->2FUO?A+XJDi#SCB+KiK8#6s$Vft1Y&r(wt7U2$^~!uT
z>IRDDg`2t4oqO5*+`ne~a7oK>SYJCbt7(u78GLhV`QGNkX##GN3ag!a-eGv&q>32@
z7}0_y#_Dm<+15`#1iLu`UUu8Ul&bN+cp{f6fmf&TPB%0{JAPr<6Qx04wbwt>Go;;x
z&AOInml3ZN<w))iM!G(hK&!fQ0%>b%H-+3$I3(C;Is?TO$Lm~3ZLK&+?L@z_N;*A~
z#1$8swo{_GR@EJD$?!=A7wTqG>g>?Ybv%e{oT!5n$;lPl7UjeXho9@oom%!^lcN{O
z&00?vUZxFpuv}EomrvdQuJ;opVglDz#atNKwcr7Lg?v%jc;ru1LHp(Sy&^gjBSD6E
zroXw=Uy%?*U>67@N4Dz8GHHtq0b-uEuy*j|XDvc6&-u^FTwIfiK;hKo*U$58w+QIc
zj1Sks(_7}o;Kg+_^!|RWsJeapIhBHBtW?aclh|m~>bKR5!bJl()7iCv>pvw<ZkAO|
z2Z84^H>Eo6Y~pUsR2@e(`BA7^>Rl)=%#X96uMW@;CugUubygNy4<KsZhb<4EAHu=W
z3#t|9@&S)Kk#rMk3-SW7Gl-CBG5AF}>zeWjgT(t)*KZN>Ti#b%`kW8%RvuR?X&QXA
z(nSoE9rL{m+j=E^Oj<lMsiYqbFZ#uJwxH4t&x8i^L{G#&Z`5UZp~vFB(a#k8ic_xb
zWIESV+{dYxv_~H7gg$R%%?5UCB_*ok^`tisPlthmCNOA_FXQl5FV_R73FK~AnPe!L
zl;gtPP~HEyfydkR_ro;z>A%WTMk4aB&X;6=+_V~0p?}HY-CIYa!d2UE6s|1j*${Md
z#JU^!AFj5d9uLW=>3VZqg#?v#R&aT}X{nH>UZYff%nZ;fYvB+lhRT0AqLn=Hss(@#
z=0XDxeh%8zXqF6k@S)v63ai5RPi@&sBU%Dbvb2nO-H_;s)gvL;FClsTxs7VKBDMAq
z&oYH)w?#KO%(^txUAs@KV**T(Nsv<g>7nEcoY+|)p2E-Pt!$To+WG?BpmC&63*LMV
z741Q~7r}Lxd3QIUNx1Dt<^cmgvVAiGrmOc`V~Qja)g-++DhWl^17SxoR^1I$9c7t3
z&hfCj7MT>NLT<p5x$&vx*UJmYz$sAtM9?I`L3p*sE2EJ$0;rE%3qfAk?%4a<rZ^K$
zKS~|WzP!9lQ;Hh14|rl5IsT_Qizs{a2xhpzqt_;ELLfeBxF-Z}6#t<?C_rqm*yqvf
z708jXZ+W5wL<8hC#@^w-d#~+4{rA_QsI1MGckC+_ArZq%&%}0ZcKecprq*G8vv9ls
zI^Vk%;3{smA<^t7lN_r@SHspF#SXMdM<ui=XFYx|v;WX?oJ?F-iDMMhW~UhZ33h#v
z1gMjzyermJ&QVthY2Mg(7R%#2H(!KxVBwP6ii-WlW-Ina%g__%uWWQ10plDUru)LF
zL$^kQ^hWc}zr;a3eL$ZCB2hM}qj%e&xL~f(x{#ycUsDCg6RW_Eshfg$2H}R_Md~&s
zeffRL2~wamLT>%idBz({+o-FEL=#uxdwPU|$ZGX{hiHqUQE{^E(EEm)(SQDWHyG`H
z$ZT&p=%{bM3Xe#Iu#BEw>F;V?gj6cdFmcB{10&i>PQR21L;)*-k_!ZeY+P3w8?&59
zIEmFO75vN!lSWiG&Dc6pIcv1Ct;L~OGO@P12)q%s2q*PrbP0KWZ@}b*I8VGT6qq`!
zd3SU6t{O$X^<Aa5%>uC+GoFJ!WLAIgp+s3k@4@n{%Z;9OZ<8#jV`=#G_oUfS4an;0
zSmbQvfeMatG1x&c+Qqv?2e!Nb>U_91u9>Gc*vXsj>=vxtGkZ+B;gXPTt=CY~zAH0L
zGDYrDWjFTbU^X(Hf5t8GUB`W7`)kWR;Jj4mRPmF_zRo!a1ZBIq9_uJI*lDTkm4GtN
zf<7)ci4l;%1oG4>t{wFe&^#dGwtAZ4M`SdlGI}aA3h1~sZ}ip$UI)be@zmr~)v=er
zU^?BIFk)?Th<{hzdvu0uHDh*rbz<SPFmDL)m{)#P6u4e2yjhG>rA0(LMmsKl#-Izb
zr>cQu++hgE%P2VPHrpaiCM4Fslop+T@BUvsr&#duUCvJ3u0FweTQi}4k)ao2rFy4)
zZgL<8J6qIX(Z8PDB*Npmio>AY7{+ARF10=X%Scw}7BswX7cZfqp$FBExi<1sLbaoW
zyt{)L3U2eeVi~fQtH$s*qfu9%c+CK05pIDn24UOZG}Eh^=|4pxlvJ~+V8Y8TOwo2P
z_cWAi8`}5SN?ya+PZ5Gt>t?DcS{}735ljnDV;;us|CtF0RTbh%)7)9ahFi{tC22M}
zEDASMfLK)tD9*UpcqPEGE&kEWp4WmZcSS~|5$|j3)feGQ?gZo$$tdxuy@SDViF(cR
zB7Hr^z=BNpI~_=D7@W&{yV#W*Vbr#D`IeWYzDZTb^%vV4j);)|!ua9U>pP657_yb5
z&x*@CW7Q$FrOWoDcC%X1<o1IeBj&?Gx~mG@9Cz!wkw5x3*W3$Z$w#Rc|Kz81*$J-W
zIy&Ktdlwt4cJ9`cseSXCmHA=DymT884-VZc>T+&7G_&2QF*g1-8Vz~y^XBbFKai>C
z{>R+ionwdSJJZD%PigGy%I31Fej_*P93HLX+BOa_qd1Gq((T)yr`w@zJBjqGe8SKX
z`ghIi?kUSlz}8a>cc8rzTHL6I`T{*}3DQjH)(a0F?{|%kTljszOp>G`>DbEhxR&xm
z2T2lsW#B!7U+azDQRM{p$aAHx-RN`#92&RV@4D6*{)y31uU&Q>=6RE&OJh5WsS5Tq
zY;6EmoQZ$*J`Z*_j1gxY%o%{qd6Nw<s)H<kUOElk@^_!^+S%Rv8(wer403HR!nT5%
zHYkOCzxi!Z{lfcgtAYG8NJ+>1q>fy?!iA2g)_bzPNbm)%y*v#UQ_*^k-9ur<+fhSi
zIv&#H+eFSZ{xt0vjh`*H#g?V8thl~Q*4nfa+%}{NJY~k20h5IZfLKsdzrSqhJAY$h
zJ>p@OtcJWllhCNW`9Q|&d=s@=8$fZNl{6z{pi-Gts?N^XnKT*_CSA-Hp#~j!xbg|F
zNjY~;6fC>IRL^V(d<}<NTb~Kr)t~OG&T@NetzE?LEX`^KQxYy+Kp%E)*u1&Qf--`m
z8Gfd71=nAgR244Lm^4mL^ROR<rJjs4ANaT@*F1A!YdVVG>IUsRc|$i$;VdV7C-uV1
zOXysU){|m9_<Ty2Vy<?)$1iNr8nUC~kEOlT->=Cn1qPDxk1xDD$CykD;w#}z-^*gS
zT-#l*kyr0%`ul~5Dar{#84ET^shSTn3m7Y1iMTNg-pR?C)w*el_7<d>83m{IKn{kl
z5=jA%*hvc<IeRqnYQ>f_PkQoqudx?LukNDUYH6J2n4p-kOA7oY1(WgRfl%kC3dtxx
zoJ9{`Tty8LOaB<uE~Sqw!NWdQv0wEgx4HCY+|oUQqyPxt!S>|}BJ7R#g4Vf6+X!-@
z{AP!O->jZNLa2Ej?yPqFQKk0;NP*Ps6PT#CAFmTHA6gf5`O3kw8*BWdC(w0@FFFF+
zg9aH*<%SyzLM*7y@jAIWn|vig$V=-X;ZbfQO%zLric3N~c;gKR$04?CCuQ-nSiOV@
zgl05j?G5d1^9&Xx@xt6H@l7<(f0ERz)ahp02%{|n^HV%meBk(9aaH$13Z)dZf4c0{
z3fFJ}tR+4pmI)ruWBc2PPyYPo#TUYS6SmCqE|5P;vmxVqp2mf63^}bVbRVC%katE{
z5|KSAa9|d>zs4(mu)DXNcm5V4NlD8;Ae88_g9hFoi?g49xqPK(wTMv$YY|C{?d2X}
ze`_6`6S*<<hiEFotK&fMH03e?11wh?g}ZwK4dx^`=cClJTRZ-9zvoAWizvk;NMDyD
z9sh#8HP%ILRQYZ(p^Q{W585mkw^%!MtigSFQTS;5dqPt0b;X-6TD~Agy{FIRT%mef
z4YCK^VfH(D%WhNKBh!i?Z91YgFLm_N*7J({Rb5UKJ3U#OC{gq6A3BnxNz~uh)WBJA
zY4EG*2Ovp1djl7Tf5iRRd0^EtVx|3;^^=b}T|^*$%`=&4Y)b{5t~;4Qm~)KJx9GP7
zdepdm9#SVHby79>Ygk|&)`5-PpC{&G9#=h%2~NJX$!rzkM)D$ub2P>GVwueo($8sQ
z`C{FgN#xFy8gL>AEc0sLI6*^jng!()+P~A=Kb)RZWFqVSbxh;6)ygL%4<ho5%~Y~Y
zo00X5TN>J5oaWfhVpDzPwI2=Pe7Gy?jhpPYjoL13|90NcqQ>z!Z6?;4OKptr9y{$^
zNsZ&+w@J;rCnnFm>wqVS%oS-iWkf9%llpSSIXoV)Uu`-%jQC9F11w1C^V6A$szuqW
zC2{p!VHJ=KZCKivEs)pY`Z{v*!3XWgC!rP2$vJ}w8b%3HUi<IlqKer<UjoP*xB<hx
z(7=;D@~j`43ET)M*uzRPAWQrtAKUz<kpcg?f~xrAiEE5mmhzvE;0f{2Du=v7%lEbZ
zs^9^Uf#OnK{i|oTPmySBY1Y?|+6GYSc2V{66pM^KE}zoBoaRhw*aZz192jORRsKgI
z$~r&Hy2~9MBIZ@ojx(}|ZT%>G4nqK87)X{FN;DA*kl&&1H)GnA5op$)%a=|BU{e%<
zAk#Tw?j6L~O#3&rD?0M2MW$l)5jB=k9-$ztsrhKsn5`-|>0^+}>yKx|N@|KI&2UQd
z@s8Q&AENEoK_1{Y;kV<D4-TGU&xkPw-$^0yO<i@rx0c@@hVbM%aD4aghi{%ID?Pu$
z9BjA|^+Tu+%*P*@GybildU$4`_%y9}-J77vYzr(HKFv+MC1v@%BU@b7XcJ|l3Pfz`
zsIe(l2Q2G7*+;DP0Yx>bcds^I;iz3sz=?j!XFEy&YI`tF3@*fPrYQE28@Is0ab<lv
zWqm_;flOkr$Xy-|yqHp$zsq$ql6lHp6?7Nd^ZEvVUa<aeCi(x(EcWO^m*`_8s9;o|
QIsOLRH?%OQzvGekf03WT8UO$Q

literal 0
HcmV?d00001

diff --git a/backend/static/icons/icon-384.png.svg b/backend/static/icons/icon-384.png.svg
new file mode 100644
index 0000000..f71f324
--- /dev/null
+++ b/backend/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>
diff --git a/backend/static/icons/icon-512.png b/backend/static/icons/icon-512.png
new file mode 100644
index 0000000000000000000000000000000000000000..b2c82dd52a18d17bb16f9dbcf7ca7891b74583d9
GIT binary patch
literal 7936
zcmeHM_fu0{w>|+BkrH_=C|!{%NEf693m}5@9-7jmm(W{41SB*?x)cEc0RicqP*gPZ
zj+D>|EkSA^lzhkg{c`_=duQI6Gn34jefHXW?e(nZS!+jWX{gX&WWERh0KMvy$2tH&
z0sf@`F8uuoV185z0PJ0=k00pyX5eT1e5dv^=eDzNt5piZ6Sj^~h>3=bu-mVxUaC^Q
zFSx=tAlBVEdP8O^vXE`EueJ#<-l;JB+|JupM*O&E)3oOwoz>b;tohu_7cOxs{_~GV
zm&OZOg++L+lWH=z@zB}4Ge+cQ3Nmu<xY>f7uemdv^3TcGR$+Xrh1%dkIX?jSeNh$$
z082V>X%86z;1UV|LbRv=;Pov4;Jg9>fSd~ea6t(G6#4!g@~>b14Tk^wAgPQoS3LjK
zL`Tx^-4RwxpP={dj=>V@T0`#lvd>+j@1518om3+w*Q&Ykwbr-nqj*cB61lUg`)&)(
z*9%>#i(D{nH!|SMl2pK7kCIj{$joEJJ^6NDVtG#`gFlbF2E0)M?zY*gN?uhj6JmiI
z%T=^7eIdTitX*0@X%}=9=uVd=cfT0t4n|5mmuK?W5BDHFEW>^*vAR`f)iJ~7*?(II
zVGILI87Th1uM&RZHqMuqvznQSWjSUK&R+$mk#qIUk~-NYyYtwuF*M5ZOc(yxG5H}U
zWR-=r)M%XHo38pw6u!qQ<$qOKMs~h+Eu2NNu|AYcJj2hQBX9hqcw|mOITf*-6!x==
zE#)IUU(U~RWV-%TD~SX6^6wABH>g{+r0OfJ<=C*kcE-B&SgkNAPekv)Cix$fUCp69
z?+-Z@<-o{@-Q$NTja5L|SWC438L{GM4GAS_>81>-iBJwgj0~i=kJV)B#^|k$hw*F&
z==YA<#_)T!wN6e4DWJ#Z8E12z&$iFM;^M;kCTQ;Dq$gyoCQpW1co|%8c^hrt1I;4$
zLl8G50G2z-=)vjMyW(Vqs|~py93$?H)A6IkGQYAhAK+O8r=_&qe7~vCiTFV85;S%J
zx$64vRqoW+^}vW<LGafCuU*%yGV4Ys_(G!x*=sr2Cf~zfZY$Zs)O8Q_cH1B&Mp!6A
zdY;JK@|L#S=ZA~qD(E+!o2&GBoyjNI_2DLh@3;i)6xQz2@<p3_E`i-?{hmKf_Ij35
z%kSE6`ACktVTr&<K!>o)>D)%Q>>)pm=}_q|iMG;8xqN}bDS0F)R$jThL+&xv+(E=y
z3i=S6(4m^gL}7itP{^;p!#vN>9U?W(pkL4RcT^8Yh>BtL=?uNfv^U{K=p8o;tGeC<
z?_qa!WN~*7<SQQriLPB9OmbEhrur$jOj!HiIJ_||RshqtTLDf+e^^0xf+6)LYX{lT
z;p}2@XMo-8xA*ufg*-!u^;a(&tJtFld4}6$(bJ-Hi1Tx`ey8zebHAV>hR{#FA6yDx
zHI^NK#8ve(a3bY$3X!lW+<pL?d!AwYUZFwHwGcta^>Qh8gejKL3*7BXN;-VX+!H2t
zTEtj&ZVo2AVTt9?8U(j%kcWGab~f^+h(ZgOMzTdT4VD1v`7*8!y8B;4X)Q^*vIQ60
zq|&E+4=FzrAdl+KzW`sY&?q`%NAT)V5atOZQJGmLFf_qQ68$LtJV6972P4=-sPkMX
zQo&cM6mM~<4bJSYmx0p2q8#D=oURAIIlA@=$J9MIdqBKokQ7d{RZaS+b|xtr?0Bbf
z9c4Lg2T#7;K-rzMGOqX}nN`h`a4k{@M0jOYf(E=};|){O3-0^F-^*S`-7(psm-6jg
zCOm26Xt~IT%H?wjSRfn)Y1WRc9p$Pc9eQs=>dngQ$Y$^FmlG55ggXji3(-9jch5fL
z(Kt#x&y3+m<(j%BP9`ONCcb7`rv4Dkn;uOOP0QoeciruX;JQ9Jrc;QsG63Ce8v$Ht
z%9Y6=9NW77LT98B=Pg4~<1sxG|AjM?tiV;JUzG*dmZ`^+;!1^y7VwpEavV$j8=3x*
zSbZ*6;?<2^4|U{v8y%#+wx@iJNq>^EVKxByTcz`8vgO;Cv`@>QW)VYMewF!swyHux
z=@VLnSv~pYN@>eODR<8UYqgndf`!wbz#mnp5Mf9N`0rds@Ox!5-!1TWkH?yNQvxUR
z8XsdkJiqyPej~<rF<-2*0zv3fc4JaY6eE7?`f3E`oxf&1VyJYV77Q$?xH_bie{@~J
z-B5FltI2SkJWRfPG8~tkS#-9}GX90Mw&IGOYQ~vr-})ZeB@&{fO&GUfPh8UsvJM2M
z557HgZp|Iy@RldJAWTj_(|0)wd+K3{q{)3*7ylDQ-Hp_))vFIOnwa+NgW3d!vm1XM
z0wXKolKu*3Ow>%_i}s{9PQI9<Z&4&6VdrN2@<x_xIf_T@Y?ez*sVr!v?`V>}=G$JO
zi`W^pN~zt`=xzoLo2^a3@deDfjLgDuUl#bq%-&&WLDeKI?c5b5zmG-m;o}ztFt7L9
zkk7w{Zv(D-iJwM0v!iJr<25rrlTW3}ME!4G%4uhrG!iWy{0;`K?hopZGKTK~)*Jiw
z?#6Ab)v^K!Ynt*lfq>j(AiUU4OeMOTV#Q5&^hwQmsaeqHf{T=Mm?3M<n~7x{WC{dh
zjLkVKfs>h96CI*dF%0V8|8TSbM&0qd*tBc<LR<Lq<nIUw&y{Br!B~S*Onz(gSIrqR
z>2I!iwyusOtO>v1S?~b8=}}FisH&j{8jG01ntaf+YHQzkGdt+!LKwfV`F*V)Pa>G4
zH;5?!%t16E@0Xt&%(S!C9PDZn6R+14zye;~cU`M_u3gZ52&nT){4RX%I1_R$<=jxa
zZfQ-ishxK4pGh&aK#Gn#X}3#YX5q=(BS`At5=Rb?>-tLiO`$Tn>n{Bb3sslb<!&L}
zDrBS}4$qJpy%XNm`b8f6G@x1Cbo|Ic=RWW6cN_(YI*IsFuVPaNMC?T<A*iq3WH?*6
z)==ZeX0hqhS255wx5p*V%ZD=73h#0JkzQan;}97@;Ps1pWJ)UCr?&2HYCDp4`I9<$
z9{-@8GyR!A^W88dX6x{z)ermCTNrZv7Hi$9X}$_KQE)x8TlA`c2C@~VHF52y{<6+P
z&{d>Ilfg52qOe1Zb3m(4uYLA=I3yJl4|mkRkpt2~t90a}2K|h)K-60Qoy2X(%j^NU
zLk;-OMz_pC@KI^kc(#$bM9zLUgtVIBiOw6UUkXE{&gnUls)U#PtLh#nsr`Bfenq<!
zvFM*Mv5a{-JvFi04WFG2!pV|t_Sf{e7w<jC?R5l>_`hiV<hGNZP;x&lX-(70<|Iz)
zS0aew65LtEe%2qZZdrC?EaRI=BJ>)8L-6pWG}=Z`IIHI{{b9Nf2_?%rv(J82VcFl!
zeY}1C<j$!s=yPRTr~WK$yJ%W%(C4V!O%4GOYfATQ@nALloKQ^|D)-wzWACl97W1%H
z!CO(<u5eDNu(-=1M*K=g?v8k?4U?7NqS+!g!QM3X^u|~HOCuR)o1Zf*NxPV|n}5*|
zoYycjAt~+jE9rYE`24oe;B^uT?srGy>SqH2N2WBOWdnvxK0%T~#Bk(+`aThBVY??V
zQk_@29&eE8-tR~31epb^B#%V+&M%W0uNK1UO7>=K?RzeTSmj|u-MkwDCRf8x3~Gfc
zimd}jU9(W&mV~UTME|gI?AK`4`x!+^Fvi)*kDC`^$`pwA4o*%7k5Y~V^}rZ!p$sqV
z+SO}Fl(4;^_*C1RAc*v}FC3&j(kuJ&Z9QRo6utI9I?Ky?B;chqdBE*#p3#C6Q+g+6
zPfu;;)PZ#up32r#6Fe6lhv`1*1*68rinQwh?i-aW7gT&eO!l;|7XQ3HeUL`Kd`7<<
ztfZ}j0`-M!e?zYPsS<U>#arokCrDs=pDHm6@m)$UuIE$-DoAMT0eWma_7?j@Pw!Ln
z&?st(*!fs&7py<eWAgYeh#E@eaO#07G*^o!e`UYkhpZ{ttjVgJ=Pw*o3*($JS=Xac
zL=1jIEwsI3oc)f3TLrsif^aExI10fRr`dUIbHw#Y`O_elzj8|@9wY0|md?tXkEX|3
z&~=}xetvI|80ee|`kpDkmg9Bb6+fDOmZ2eXdY^ZNrVUhO-I>eE<qz4eDK!*WpTv*X
z5{`G^WRKyTeuG$R%&?I4=fqsO(jm^?F;aUp+Fjd=RP`!;V5LJ2qIG4tA9~NhQz1sX
z@=Foifx6CF;SYAk6;@rZmPh#(qNM#7`8)akO_F|FxzVx2&-YJ%b)gYf#Xtsa!`Wsh
zPo7~;)J31A3NN9p*_LCLUOcN2ROt1BaerM&6>Jq$nU!CdTJ7}RNr+j?dHw<z?uXuA
zt7*EDuBkq^KXS?*Wa`^t8#eH>W)t0yZhm%YdU_m|y!5zk#Qac8U!Qok)NO&VsRj5@
zJ1PO`qcViM@>gxU&H_8PGc5wiCrt4WeNXkJR-dvbNoqlp+V4Q@97LKm`9IZfNVMjm
zQ{;3&llN;1IP#nXQUhH!u&(8DyY|G%HhnEe<iIHRq8cr%!KV>5oUK_m20GM-hb|<S
zFX-ktWz$&9GuasPH??4nmNKk{q4&e8C(l#faQ3lq_YqM^Qj<UAs7=uV6R902^x8AP
zUFCcAAaH&AEdr<d8g{)(m(hnE)M^)bW6dx0aHdtB80Gs7z;XLb)?IyM9WcyOWCVWX
z@gM^Vp~L4DwG+W`%S4+a_jD|tN`!(*lMR00^5wdu|4orFHs?`Y2Pf5qYVIxLiGZ_|
z;;fUtF7&zx0=S}dBg+GOw6PD;n$)S4N1gn3`3D7u6|3hx#v;l4507o|ID{%u(z~BM
zqi|sl7a4Z0)QVmI?z#8Wph-|`Y*Rji;!VUajU60<0?L{@YckL+%P@R6lQYAF<6KHp
zp=%kN&dAKMZhp;!cb7tpLH*+DKmP+MFY3x;zw#?I&~B3h7Vy(vjk)ELb?t#7A>dS?
zH|(Al|N1i|!|N)GEnAYVqz=VLKFmlA9?AN0dS__A+$$yRFiOiR_z$(CNv!!fF|4it
zzVd6C(`H-*V)HaDi|U-E0i2Tv#hTRY=f{GF*_$4E{GqX2XqTnsqIGQ@2^FBnoO|3I
z+oj*2A@SU1OVcZgw(U!@Xn&_`8FsHDb_(wJ$o)Ml>W@3Jxi+cgmI#wTU)W^ny4?G~
zHK*`3^mLwh4kXpfyW@1CmHV%F2y0P;GT=U};g%CRe#tWT-S}&V%^BpXuwtdsLLF&M
zPrx>Ou{JxSxWN%eqL)=ThC%Pj5Qyn{RPlmabH@BDFT`w-+Tam49J_t~7`~=i!x%EV
z4sAMH^X)7}Pk%kI`_Ouf-7##$ysDrJmXYXZSt)s*%2l)S0OukbfOOytL$=x5-Cmd;
zG^oid#r(Gx<!7_dmGOS|%U4w+f^EPTsY_%}ia7dTBJgANIS<%%zUH#&xwKcIZU>I?
zHb2VR6EC!VzpayeIe3c(?E_cK%;g*P(=9<!-ch5t6Wx_^MZJK0FC)8%`BzPU>W;3<
zsx3HX9^$*ASK5GXx4IH6VHygSrLH2l{Hm*{TxsWDHsP1SZ%a^JhRIYIk0E!MMw8@G
zS~24=YZBd~=HKukmY$-%4`L3Gir4#vpxzDxO!HrM_`6Ay=iFLzNA93>2w7P|?U;qO
zom`rl73>NDG5UxKK)h2o&Qj3dJ(VnsF=-P9Wf&bqt4mQjz^*>f&afeuPXq3u<Zc<1
zhO}B<MdgN6Xre|)=Xq`ifQ(dUP}@*B^1FNYX$7&+`$7mQmuBOv{ncsMIi!#E15h@K
z>vMf5j+7dwyWx=<&=Ao0^D0|x>Peu)ONU#w$cnrjn2?U0Z2uh(aFMTPOUN4++pmAF
zeYpK4MYbEg@3Om|9ZcA0GHeMbGa^rgE-Pirr9ta;rs(}y`clvmN`U7-&x|bA1e(bE
zl2Y=>#kg7lc@<_*^?L;frH-y`H-jW5gI*obJ1Cg}9r6ZPEkz8S&JdGb{nkiOYT7-&
z?-w=bBAEA(*T_9Z%mpw>B_L+-+Rql;s27Ok@%fq&nKzUjErYuLcbA6n%P(j)G&ROo
z4?M&efzI2y$z4#1qMG>yB{yn7A3W+p%{8CPe@gm1zzRhfpgRD=nuEdqSdg!uaeR;T
zcG1qRxbU(J9*XHg%Wwkc)%Y<`qLjT1b7C*eJ1tdC2eOh%ID@b!$fwf7*^^wr4_N}S
zbrhaEvtLC|I%7~*&6Zl3nmE>FqT&>4F0uinx!46{B(v%)79q9s{J1+an-;m$6mPF#
z33tW_3l&u4<eUO$=2<E^M0yL%t0O+5dVs^*o+zb|pixL_r}ExUJcz7Gr;g<<B@-nA
zkn693PqcU*>;+&X>4|Zc%c#RcvSH@3lUY6s#oN0SqD{(%aeppca2R%B_mmyZmJ#cW
zkKibS`Qc6!K5)<U;~MK(du_c6q#5ZPSmI^Ohb-Cm{=C^*<r~f>i9P}xb_;?%Pb<c^
zCU(O~p>(H9KW$Z$>Z@hk>R}nBgGo2juE8m{mxVJyiBQGdoP#{<nKyKqt!l9Sxmsgd
zan$<uQPuO_R;@T?!w73IdwNMputrJS#p}It>A4(Y9DCHxdoO4Y<GdAAG;d1cm<+}~
z)9;)#Gwr8u=EUfhdI^~0c{fjsWUIierrW+WJMHG#Z`Opa-TQJA=Vr!O!o8mq-ZE*1
zjt3N3z|_d_c`rmX%X&+bGF2R?!pscMS|A)|4Y8#5^s)73{=AgkqSoe*<$ZbcJ7DEF
zX~vpRR1aJ2>#Jl03m&kg(1WSzmus%xooT`buOvg!S}@DHg7MZ1l7712Oi!CO;-ASj
zh6SDnN>BDYz4T)5FFF@1JnOJY5aWEQofvyH4{Y9a6|nW!87fQ}WHM|;N1F~he}MW|
zPnR7HywPlmrd-tS67DycZu#hXm+8LDf-J^Dk1LhTFn9T4r4>{dAGjFjW6=`S53*)I
zF+9fPSMJFiEu47Ix5lh3XFl**IkYFpkrR8yqJ&{<Lyr89ZVC=qPODWUls92~_7kgP
z{1W)(BQ9-@Ej@~EYOPw2VL0|=A2_VO@zJISVabPlwstsrx;^*?VaLmhW_jcS^ugz7
zPv=p!Fw?<npw4Ev0u~B;?TYiiY3i<(CpoJH+MhMRjJ#_NQlR;fg&7?5$DY17FZdA4
z$5~paOzFX{oq}DU+RR*X;{zq_h=R)aSbt5DJa5<E2HpL*A>4i2GNIjB9dS=Jyk*uS
zbj65aWA|P|A>?foSlT76sJoV>DUkCQqEcJr-%fFO??+Z1cb1*G9f0s3i4hXB0(%Vw
zc22`IC8N0$rK*MoVE5uUV;eL5MBl|aRJi_=n@6ay^-lvOS=l3V?hs9|85up!XkjMS
zYSMry%!pW}ZD81;5ed=cb-DN?j#r~+@dz3c%?YeX+{61Gs3(EVnzv&YLhj4|)+rqH
zV*}K~fYbp+Y50a!6C@RYh~&V2*WK>nw*>Bn1F5|wGd3Wlg1j3-rwFLqNGt?8&AtG;
zO`PJFfZaFTUn~L~M+dI(0+jWFRBdu+Q`FrP$Culdxd5K+x=1FuS#$e60l@knTO~2`
zr`n(fEFdE)v8&<0PZ284DsG)*GU==`yKXz*0x*mLtiQGwZK}-LW2KB<?mYyoZ;MmS
zsYEjEg`2|H&+lf6=8flOj|V(OgVd-v;_`QdfH;-q!Q(Y>$x9^EASjqXzc1Bp_^hJN
zl)3uQCocyX*pGo!7I4^@`cP$4xv!5!#c*<Sj)yha@O-AvrBwELa6?De`p1DQ?*{qE
z_mOm;vMaEHk%LGJr++1^^Ur{4N;`37p$%6Y2{RN2BT&NM3;{Mu!D?i`ziWklM_w2Z
z5Pc5xfq4>?>)>O-VPcdn9%R;l3~C@ZdLZ>(zOCk)g~mlq<4bEmsBD*Ugf#ZBhQza^
zV}e0)`5yOFNxRsCYdq<AJTb16k3qt>(|}83qvccCuZ;1=Zu1TP<?a?h;ubf+G0x<H
ze_4`#dTG=-+t^&9BA0K#RBljD#5j{h^egpy(PPj)$ZS&nY8vsl8#Q#mLnG8RWbdlv
zr*}^9+;%4OIa;AV=Wqd?HCb-?vI)2Whk}<*lkVO_GweU*@2#JLNxjF{Tm~Bhi11Um
z*}EL8>$`mFkT)a5fsHJ4yJ=j^F)LVF61;vODs4B%5@(XD;qMt7hisp5CnOsUF>9JE
z(l`p*$MSr+tlfm16upQ4qbYkb+&9l}XDEW(eC#5^v&}%Km_A26kRQHi43=)bJd|zL
p6ZBX9y>R>Ymhu1H?dv)j0>PF$C5cC=fH&KKs*=XzvWJ$h{sXlmlHC9R

literal 0
HcmV?d00001

diff --git a/backend/static/icons/icon-512.png.svg b/backend/static/icons/icon-512.png.svg
new file mode 100644
index 0000000..39b3068
--- /dev/null
+++ b/backend/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>
diff --git a/backend/static/icons/icon-72.png b/backend/static/icons/icon-72.png
new file mode 100644
index 0000000000000000000000000000000000000000..d0d0359701badde4a197137ee2c23f6d3b9004dc
GIT binary patch
literal 1122
zcmV-o1fBbdP)<h;3K|Lk000e1NJLTq002k;002k`0ssI2+K(g<000CjNkl<Zc%1E;
z{cjUx9KfHuw(E_JzTCR9wzMqljWH-=3`iE;B5xulnn;4cA_-AQfDmHh&-#nu2Y*$g
ze}FEK7(^YSM#f7}NyCd>*vK|Y%i5*wuDz~heY>`I{&4KPbi3Z3iY||NK0kf$d(Yb^
z&$I76O-5KYo&^6#$dz8ezXcXU4J?KlSPV6=7;0cK)WBk>fyGb*i=hS<Lk%p38dwZ9
zuo!A!G1S0fsDZ^$L#x_iXA^s<E!bn7v)1PH8a~D8=JL8ohI+&r##zISP-8q-BQ^fv
zjo&smBr6a2!EN_9Q)?@9*>!2)NwTi2*Gu-;SFd{HnX7@OQ`dW{5hDrVeBZ;v?Lm2x
zrZ}47)*I7(w)o;zz7URfOn>a@T%3d&q|#A5yXA42)qlgm)|na&FV9$N^ZQ&;s6iBW
zOiKzUHu<H;VZZG&Z|n54RU{#_nCAC5XOFZ8Ew%XyL*JTdJod|WsMUy=_1tUgBHul+
zOPND$AuTCD4WcNv!JMks6~#Eo>CWBkE(wJA=w(b^#`LMT_1!LiwxEGuxjKU#(~=kg
zz!CU^qj(gJHAN}T6f}~R1Xm)z7;U){u)$7Qfzg;z40bfJEyj5<e%Zk|S7*f7yU;)t
zMKO7;v(@E3+Br^BTs4b@VI*jcWGFE{+VOms1{Z?Sm~kw=TrtI?I5}58Ghged&x()7
zHwKP%J{^l2##zH?%y=i#u(%?Z(eGda$A2tKCh|2~hxRCSDG9{IN$0ulDFDF1*3c*S
zI*j_lZs+r|F*M<FTU5R!5{f&<3&e+ay5uKNLkMn5@^E|beBZ;7w{Bj2^Y;FAk!4P^
zd@f8n#Ys*2!hz=S+igLyY|Iz5-^<F0DwWFpwV?H#pLa~n)i3$BlTLlP>;C&&r(l+?
zPB=~72sMiF;D%}Gdvn=m&lDjFmCDWI_i)3$Z~M2eVF%VSz1GBLOLCRAByVtb%j3&F
zyFazWv8=k>4^6msJ7)m^z1D=3{CdI#HHi9^N&vtUr9Dv^0H7s>9&6%^+c)4~#J40N
z3^<r2#j56ds4<+TY;`#)^Cx3^#2TOmfx843dBPK+-}`l2BL8>IeBsrS7l;d!PI(4)
zyFdjodtLVPS01c4rWd~|@}wZU1|&Hh?5wI>Tqq#`fM=X`*bn`+R6L3#0bXwoA7~E$
z5pEdv+wMl`nKV`6iDpCQwA&}&rTeqyDwbZENQN2-TKBr50DwzAM;4}Rh^YLH5dier
z;^IYqN$$>?A224^S(n3!Yuo-wcg3Sv<cT6*evK+)oHd+Q{zbI1DDGG!Lv;`B?RUg_
z*RWl5%DFmg)^mCdpDU5EtbQzR_~~iWm4HoEex)Grf0!Z$7DEjzh8kE5HLw_JU@_Fd
oVyJ<|Py>sh1{OmNEQT6?0kO$u@4tHM8vp<R07*qoM6N<$g4G!yr2qf`

literal 0
HcmV?d00001

diff --git a/backend/static/icons/icon-72.png.svg b/backend/static/icons/icon-72.png.svg
new file mode 100644
index 0000000..5ebfd03
--- /dev/null
+++ b/backend/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>
diff --git a/backend/static/icons/icon-96.png b/backend/static/icons/icon-96.png
new file mode 100644
index 0000000000000000000000000000000000000000..cbcff51ba24af1ac1cd529833a5b6532ddfd850f
GIT binary patch
literal 1479
zcmcJP`9Bj30EfpL)1*{vB3H+dBS)@Cxw7>-lKaTj6sp&`*K3Cknb#2+HFL9&Ba0z(
zyfXKFl(Wse)hrg9DaMkw_kVcbAD-{?`F#I?C;6(QofJqO1ONb};4qtOKOOKd5~4r%
z?#^O303enQx3P5nBY!pD$KD4i_r{4k^G&oYIC0{{9ag<VY)Okqv^*qc_{G5R5nY{?
z`ffpUH&A&qAWaY2+uhRxVM{CL6FXbIY|@U+Eg9wbUhY&S&`>2FSC)4hEL=Gyz@384
z7$lU*UB>K1k8bS=Sl`dG&pjZ8o`<U_bnTKQo0*oD0Cfp~m`Je-KxW_lhk&cn0FdaV
z|L6SPR%^s*D`?y-$Yp8sdC<W8KDaG>A<BO7Kyr=dWM~J5R^80H7I%_XqaaHYglsv*
zeVbZ$6K01W%?YHF%=r$S%kXY<{(POtQ}x2BHHl<pD$gWKKL=FhBF?<4@SgN7m^tRq
zzi)rLR$Dc#DAfF2>|(nAsII}UO@y=D=^Y&59j6dmK6?3e79<Uq18<M2+mL6B;^3wl
z;M1&;_1<k!N4<UEZr1aKi@K%Y9?#7fuF0L4kW<bmbn57gD>#67Tq)=!%E{drO#Uzo
z+a1Rb9zDFDI-nm}L&Z>S+33N=7x<)OzaPKC%SD-iG>EwSd0+IkF+4QZUAW$Bx;YSN
zxr#D2^i5vR*cC*mKw(MAr_Rb`Yl)vGENL=Z7D8&j7Sb)U>?3DAo<XidIdc;&HhgA0
za<V^594H*-NxvPMHkUCN;-@K|pHU1}+u3?{6Xyp?*6({d39}oKS7bmni-cRQIrfqC
zz{AecX-g_$o@7v18RvjtGJ49{Lg7iU)e0tGDTWvkP)Acb0-2W7>Tfzzg44GwC2tH4
zjZhj>rf4l%;7XZ^+j<DA=(5+A?RX1|Yqu*L-(LXV=xl!zJx)%QRm;6qsqMz+g;H1z
zb01Pc;b@r~N-Q3J1xFcHW<-3R$m9=D3GuU^zfkvo%<C|G0ROAm1sk@NZGWk}3!=bg
zHrE$;3eSy*BNAc_$y{QPpMtFCcyQiQ3uU-wW74V8w$7-%)qx9@IFb3u7nxmDr2C_-
zSi2@$RHAnqd(XXnJisAoY?^^(mk+#<xL`BaxM?pp`(;q>u8hAhn9x(*kCiIQ3!7=Z
z82@2u+uB&h$~|wUt@xm_MiC~Sa{`I<f4rgN=s_76gFVsILanu8xl-Yz4#b41=jslx
z&gV|pV5(XCwk$dhiYbd*TlPjnzely4mmA|^4J6Br?O+SU%$<y0r9T=58C9`)NWU!9
zX-fLdiQ3rL%ZvmghxA9bboEWo143i;WS>_a-bqc0!^i|~&plS7?n=)85Yx7l4pO38
z9}Ss^%Xl}xY_^jyRZD-E0_$+Q<?|F#sVWgPUQWE(ep2&0`s$-kjEJhS^l8N(Evxj^
z`5MaCD6S$R<*k{QbvU=~6&CYn5LTBoLx4T|>OyC`_>_LiRe~hoOKU24MUka(o2$DY
z%?yW3Yb!m(DBi~t*L)?rAhPjhq>3htQK<T$rm8t`ATe1dt8oa?NKOHQ8@hC+o;wBl
z%L0Q$^)hO*Z4XYF_%rmfkPu|Bh7?;HNAiKZ?Q_PX|32hijmDWnmq+Shu?daBqU&A<
z%Xj(sk?~`_7p{C%OG+(l5*XO(j$TA=Tdok2_6%PYt5%>w;3E;{%&5xr_>S=Imx$}L
zyP~Anx*?;--ZJm2H&&~7;Vxv?p)PN@>lu|qI>Mw=vRgnAnQOL-3-vQ@d#<z0{)|2Z
k-227tH(rwUf7dO6<T!}Nx+h0;`x$5e+}6>i)+*rPKWQbkUH||9

literal 0
HcmV?d00001

diff --git a/backend/static/icons/icon-96.png.svg b/backend/static/icons/icon-96.png.svg
new file mode 100644
index 0000000..1217879
--- /dev/null
+++ b/backend/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>
diff --git a/backend/static/manifest.json b/backend/static/manifest.json
new file mode 100644
index 0000000..8d0c879
--- /dev/null
+++ b/backend/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" }]
+    }
+  ]
+}
diff --git a/backend/static/mobile.css b/backend/static/mobile.css
new file mode 100644
index 0000000..c8db026
--- /dev/null
+++ b/backend/static/mobile.css
@@ -0,0 +1,564 @@
+/* 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 */
+  }
+}
+
+/* ===== 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;
+    }
+  }
+}
diff --git a/backend/static/mobile.js b/backend/static/mobile.js
new file mode 100644
index 0000000..6575f95
--- /dev/null
+++ b/backend/static/mobile.js
@@ -0,0 +1,588 @@
+/* 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 = '';
+    } else {
+      // Open menu
+      sidebar.classList.add('open');
+      backdrop.classList.add('show');
+      hamburgerBtn?.classList.add('menu-open');
+      document.body.style.overflow = 'hidden';
+    }
+  }
+}
+
+// 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 = '';
+  }
+}
+
+// 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 = '';
+    }
+  }
+}
+
+// ===== 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) {
+  // 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;
diff --git a/backend/static/offline-db.js b/backend/static/offline-db.js
new file mode 100644
index 0000000..15cc8bd
--- /dev/null
+++ b/backend/static/offline-db.js
@@ -0,0 +1,352 @@
+/* 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);
+  }
+});
+
+// Export for use in other scripts
+export default OfflineDB;
diff --git a/backend/static/sw.js b/backend/static/sw.js
new file mode 100644
index 0000000..2c24788
--- /dev/null
+++ b/backend/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');
diff --git a/templates/base.html b/templates/base.html
index b16ba60..9370401 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -15,6 +15,16 @@
     <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 = {
@@ -59,9 +69,28 @@
     {% block extra_head %}{% endblock %}
 </head>
 <body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+    <!-- Hamburger Button (Mobile Only) -->
+    <button id="hamburgerBtn" class="hamburger-btn md:hidden" onclick="toggleMenu()" aria-label="Menu">
+        <div class="hamburger-icon">
+            <div class="hamburger-line"></div>
+            <div class="hamburger-line"></div>
+            <div class="hamburger-line"></div>
+        </div>
+    </button>
+
+    <!-- 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 -->
-        <aside class="w-64 bg-white dark:bg-slate-800 shadow-lg flex flex-col">
+        <!-- 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">
@@ -122,14 +151,48 @@
             </div>
         </aside>
 
+        <!-- Backdrop (Mobile Only) -->
+        <div id="backdrop" class="backdrop" onclick="closeMenuFromBackdrop()"></div>
+
         <!-- Main content -->
-        <main class="flex-1 overflow-y-auto">
+        <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 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>Roster</span>
+            </button>
+            <button class="bottom-nav-btn" data-href="/roster?action=add" onclick="window.location.href='/roster?action=add'">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+                </svg>
+                <span>Add Unit</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() {
@@ -261,6 +324,12 @@
         }
     </script>
 
+    <!-- Offline Database -->
+    <script src="/static/offline-db.js?v=0.3.1"></script>
+
+    <!-- Mobile JavaScript -->
+    <script src="/static/mobile.js?v=0.3.1"></script>
+
     {% block extra_scripts %}{% endblock %}
 </body>
 </html>
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 851c1ca..c5ae233 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -42,15 +42,15 @@
             <div class="space-y-3">
                 <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-2xl font-bold text-gray-900 dark:text-white">--</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-2xl font-bold text-blue-600 dark:text-blue-400">--</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-2xl font-bold text-gray-600 dark:text-gray-400">--</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">Deployed Status:</p>
@@ -134,7 +134,7 @@
             <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Fleet Map</h2>
             <span class="text-sm text-gray-500 dark:text-gray-400">Deployed units</span>
         </div>
-        <div id="fleet-map" class="w-full h-96 rounded-lg"></div>
+        <div id="fleet-map" class="w-full h-64 md:h-96 rounded-lg"></div>
     </div>
 
     <!-- Fleet Status Section with Tabs -->
@@ -224,17 +224,16 @@ function updateDashboard(event) {
 
         // ===== Alerts =====
         const alertsList = document.getElementById('alerts-list');
-        // Only show alerts for deployed units (not benched)
+        // Only show alerts for deployed units that are MISSING (not pending)
         const missingUnits = Object.entries(data.active).filter(([_, u]) => u.status === 'Missing');
-        const pendingUnits = Object.entries(data.active).filter(([_, u]) => u.status === 'Pending');
 
-        if (!missingUnits.length && !pendingUnits.length) {
+        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.slice(0, 3).forEach(([id, unit]) => {
+            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>
@@ -245,17 +244,6 @@ function updateDashboard(event) {
                 </div>`;
             });
 
-            pendingUnits.slice(0, 2).forEach(([id, unit]) => {
-                alertsHtml += `
-                <div class="flex items-start space-x-2 text-sm">
-                    <span class="w-2 h-2 rounded-full bg-yellow-500 mt-1.5"></span>
-                    <div>
-                        <a href="/unit/${id}" class="font-medium text-yellow-600 dark:text-yellow-400 hover:underline">${id}</a>
-                        <p class="text-gray-600 dark:text-gray-400">Pending for ${unit.age}</p>
-                    </div>
-                </div>`;
-            });
-
             alertsList.innerHTML = alertsHtml;
         }
 
diff --git a/templates/partials/roster_table.html b/templates/partials/roster_table.html
index 6a48d34..3ca638a 100644
--- a/templates/partials/roster_table.html
+++ b/templates/partials/roster_table.html
@@ -1,4 +1,5 @@
-<div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 overflow-hidden">
+<!-- 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>
@@ -183,6 +184,160 @@
     </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 (Tap to Navigate) -->
+        {% if unit.address %}
+        <div class="text-sm mb-1">
+            <a href="https://www.google.com/maps/search/?api=1&query={{ unit.address | urlencode }}"
+               target="_blank"
+               onclick="event.stopPropagation()"
+               class="flex items-center gap-1 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>
+        </div>
+        {% elif unit.coordinates %}
+        <div class="text-sm mb-1">
+            <a href="https://www.google.com/maps/search/?api=1&query={{ unit.coordinates | urlencode }}"
+               target="_blank"
+               onclick="event.stopPropagation()"
+               class="flex items-center gap-1 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 underline">{{ unit.coordinates }}</span>
+            </a>
+        </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: '⇅';
@@ -201,7 +356,14 @@
 
 <script>
     // Update timestamp
-    document.getElementById('last-updated').textContent = new Date().toLocaleTimeString();
+    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();
+    }
 
     // Sorting state
     let currentSort = { column: null, direction: 'asc' };
-- 
2.49.1


From 7cadd972be748b250f65c1dd5474ef629d63df51 Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Wed, 10 Dec 2025 23:06:27 -0500
Subject: [PATCH 16/29] Bump version to v0.3.2

Updated version number from v0.3.0 to v0.3.2 in README.
---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index bb47f1c..543b549 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,4 @@
-# Seismo Fleet Manager v0.3.0
-
+# Seismo Fleet Manager v0.3.2
 Backend API and HTMX-powered web interface for managing a mixed fleet of seismographs and field modems. Track deployments, monitor health in real time, merge roster intent with incoming telemetry, and control your fleet through a unified database and dashboard.
 
 ## Features
@@ -14,6 +13,7 @@ Backend API and HTMX-powered web interface for managing a mixed fleet of seismog
 - **Photo Management**: Upload and view photos for each unit
 - **Interactive Maps**: Leaflet-based maps showing unit locations
 - **SQLite Storage**: Lightweight, file-based database for easy deployment
+- **PWA Mobile Version**: Optimized for ease of use during remote deployment operations.
 
 ## Roster Manager & Settings
 
-- 
2.49.1


From 3aff0cb07602bcff2f30cff0d52eb1635c81699d Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Thu, 11 Dec 2025 06:15:43 +0000
Subject: [PATCH 17/29] fixed mobile modal view status

---
 backend/static/mobile.js             |  5 +++
 templates/base.html                  | 47 ++++++++++++++++++++++++++--
 templates/partials/roster_table.html | 11 +++++++
 3 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/backend/static/mobile.js b/backend/static/mobile.js
index 6575f95..9651181 100644
--- a/backend/static/mobile.js
+++ b/backend/static/mobile.js
@@ -328,6 +328,11 @@ function populateUnitModal(unit, cardStatusInfo = null) {
 }
 
 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];
diff --git a/templates/base.html b/templates/base.html
index 9370401..f647a78 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -137,8 +137,8 @@
                 </a>
             </nav>
 
-            <!-- Dark mode toggle -->
-            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
+            <!-- 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>
@@ -148,6 +148,13 @@
                     </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>
 
@@ -206,6 +213,42 @@
             }
         }
 
+        // 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');
diff --git a/templates/partials/roster_table.html b/templates/partials/roster_table.html
index 3ca638a..9471322 100644
--- a/templates/partials/roster_table.html
+++ b/templates/partials/roster_table.html
@@ -365,6 +365,17 @@
         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' };
 
-- 
2.49.1


From 3a41b81bb6b21feeeec5d62b2bf85780cfeaa7c6 Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Fri, 12 Dec 2025 08:18:38 +0000
Subject: [PATCH 18/29] docs updated for 0.3.2

---
 CHANGELOG.md        | 60 +++++++++++++++++++++++++++++++++++++++++++++
 README.md           | 30 ++++++++++++++++++++---
 backend/main.py     |  2 +-
 templates/base.html |  4 +--
 4 files changed, 89 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bd3d0df..d4abb42 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,64 @@ All notable changes to Seismo Fleet Manager will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.2] - 2025-12-12
+
+### Added
+- **Progressive Web App (PWA) Mobile Optimization**: Complete mobile-first redesign for field deployment usage
+  - **Responsive Navigation**: Hamburger menu with slide-in sidebar for mobile, always-visible sidebar for desktop
+  - **Bottom Navigation Bar**: Quick access to Dashboard, Roster, Add Unit, and Settings (mobile only)
+  - **Mobile Card View**: Compact card layout for roster units with status dots, location, and project ID
+  - **Tap-to-Navigate**: Location addresses and coordinates are clickable and open in user's default navigation app (Google Maps, Apple Maps, Waze, etc.)
+  - **Unit Detail Modal**: Bottom sheet modal showing full unit details with edit capabilities (tap any unit card to open)
+  - **Touch Optimization**: 44x44px minimum button targets following iOS/Android accessibility guidelines
+  - **Service Worker**: Network-first caching strategy for offline-capable operation
+  - **IndexedDB Storage**: Offline data persistence for unit information and pending edits
+  - **Background Sync**: Queues edits made while offline and syncs automatically when connection returns
+  - **Offline Indicator**: Visual banner showing offline status with manual sync button
+  - **PWA Manifest**: Installable as a standalone app on mobile devices with custom icons
+  - **Hard Reload Button**: "Clear Cache & Reload" utility in sidebar menu to force fresh JavaScript/CSS
+- **Mobile-Specific Files**:
+  - `backend/static/mobile.css` - Mobile UI styles, hamburger menu, bottom nav, cards, modals
+  - `backend/static/mobile.js` - Mobile interactions, offline sync, modal management
+  - `backend/static/sw.js` - Service worker for PWA functionality
+  - `backend/static/offline-db.js` - IndexedDB wrapper for offline storage
+  - `backend/static/manifest.json` - PWA configuration
+  - `backend/static/icons/` - 8 PWA icon sizes (72px-512px)
+
+### Changed
+- **Dashboard Alerts**: Only show Missing units in notifications (Pending units no longer appear in alerts)
+- **Roster Template**: Mobile card view shows status from server-side render instead of fetching separately
+- **Mobile Status Display**: Benched units show "Benched" label instead of "Unknown" or "N/A"
+- **Base Template**: Added cache-busting query parameters to JavaScript files (e.g., `mobile.js?v=0.3.2`)
+- **Sidebar Menu**: Added utility section with "Toggle theme" and "Clear Cache & Reload" buttons
+
+### Fixed
+- **Modal Status Display**: Fixed unit detail modal showing "Unknown" status by passing status data from card to modal
+- **Mobile Card Status**: Fixed grey dot with "Unknown" label for benched units - now properly shows deployment state
+- **Status Data Passing**: Roster cards now pass status and age to modal via function parameters and global status map
+- **Service Worker Caching**: Aggressive browser caching issue resolved with version query parameters and hard reload function
+
+### Technical Details
+- Mobile breakpoint at 768px (`md:` prefix in TailwindCSS)
+- PWA installable via Add to Home Screen on iOS/Android
+- Service worker caches all static assets with network-first strategy
+- Google Maps search API used for universal navigation links (works across all map apps)
+- Status map stored in `window.rosterStatusMap` from server-side rendered data
+- Hard reload function clears service worker caches, unregisters workers, and deletes IndexedDB
+
+## [0.3.1] - 2025-12-12
+
+### Fixed
+- **Dashboard Notifications**: Removed Pending units from alert list - only Missing units now trigger notifications
+- **Status Dots**: Verified deployed units display correct status dots (OK=green, Pending=yellow, Missing=red) in both active and benched tables
+- **Mobile Card View**: Fixed roster cards showing "Unknown" status by using `.get()` with defaults in backend routes
+- **Backend Status Handling**: Added default values for status, age, last_seen fields to prevent KeyError exceptions
+
+### Changed
+- Backend roster partial routes (`/partials/roster-deployed`, `/partials/roster-benched`) now use `.get()` method with sensible defaults
+- Deployed units default to "Unknown" status when data unavailable
+- Benched units default to "N/A" status when data unavailable
+
 ## [0.3.0] - 2025-12-09
 
 ### Added
@@ -151,6 +209,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Photo management per unit
 - Automated status categorization (OK/Pending/Missing)
 
+[0.3.2]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.3.1...v0.3.2
+[0.3.1]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.3.0...v0.3.1
 [0.3.0]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.2.1...v0.3.0
 [0.2.1]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.2.0...v0.2.1
 [0.2.0]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.1.1...v0.2.0
diff --git a/README.md b/README.md
index 543b549..32ed33d 100644
--- a/README.md
+++ b/README.md
@@ -3,6 +3,12 @@ Backend API and HTMX-powered web interface for managing a mixed fleet of seismog
 
 ## Features
 
+- **Progressive Web App (PWA)**: Mobile-first responsive design optimized for field deployment operations
+  - **Install as App**: Add to home screen on iOS/Android for native app experience
+  - **Offline Capable**: Service worker caching with IndexedDB storage for offline operation
+  - **Touch Optimized**: 44x44px minimum touch targets, hamburger menu, bottom navigation bar
+  - **Mobile Card View**: Compact unit cards with status dots, tap-to-navigate locations, and detail modals
+  - **Background Sync**: Queue edits while offline and automatically sync when connection returns
 - **Web Dashboard**: Modern, responsive UI with dark/light mode, live HTMX updates, and integrated fleet map
 - **Fleet Monitoring**: Track deployed, benched, retired, and ignored units in separate buckets with unknown-emitter triage
 - **Roster Management**: Full CRUD + CSV import/export, device-type aware metadata, and inline actions from the roster tables
@@ -11,9 +17,8 @@ Backend API and HTMX-powered web interface for managing a mixed fleet of seismog
 - **Status Management**: Automatically mark deployed units as OK, Pending (>12h), or Missing (>24h) based on recent telemetry
 - **Data Ingestion**: Accept reports from emitter scripts via REST API
 - **Photo Management**: Upload and view photos for each unit
-- **Interactive Maps**: Leaflet-based maps showing unit locations
+- **Interactive Maps**: Leaflet-based maps showing unit locations with tap-to-navigate for mobile
 - **SQLite Storage**: Lightweight, file-based database for easy deployment
-- **PWA Mobile Version**: Optimized for ease of use during remote deployment operations.
 
 ## Roster Manager & Settings
 
@@ -432,6 +437,19 @@ docker compose down -v
 
 ## Release Highlights
 
+### v0.3.2 — 2025-12-12
+- **Progressive Web App (PWA)**: Complete mobile optimization with offline support, installable as standalone app
+- **Mobile-First UI**: Hamburger menu, bottom navigation bar, card-based roster view optimized for touch
+- **Tap-to-Navigate**: Location links open in user's preferred navigation app (Google Maps, Apple Maps, Waze)
+- **Offline Editing**: Service worker + IndexedDB for offline operation with automatic sync when online
+- **Unit Detail Modals**: Bottom sheet modals for quick unit info access with full edit capabilities
+- **Hard Reload Utility**: "Clear Cache & Reload" button to force fresh assets (helpful for development)
+
+### v0.3.1 — 2025-12-12
+- **Dashboard Alerts**: Only Missing units show in notifications (Pending units no longer alert)
+- **Status Fixes**: Fixed "Unknown" status issues in mobile card views and detail modals
+- **Backend Improvements**: Safer data access with `.get()` defaults to prevent errors
+
 ### v0.3.0 — 2025-12-09
 - **Series 4 Support**: New `/api/series4/heartbeat` endpoint with auto-detection for Micromate units (UM##### pattern)
 - **Settings Redesign**: Completely redesigned Settings page with 4-tab interface (General, Data Management, Advanced, Danger Zone)
@@ -476,9 +494,13 @@ MIT
 
 ## Version
 
-**Current: 0.3.0** — Series 4 support, settings redesign, user preferences (2025-12-09)
+**Current: 0.3.2** — Progressive Web App with mobile optimization (2025-12-12)
 
-Previous: 0.2.1 — Settings & roster manager refresh (2025-12-03)
+Previous: 0.3.1 — Dashboard alerts and status fixes (2025-12-12)
+
+0.3.0 — Series 4 support, settings redesign, user preferences (2025-12-09)
+
+0.2.1 — Settings & roster manager refresh (2025-12-03)
 
 0.2.0 — Device-type aware roster + ignore list (2025-12-03)
 
diff --git a/backend/main.py b/backend/main.py
index 45839e4..fab90a7 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -20,7 +20,7 @@ Base.metadata.create_all(bind=engine)
 ENVIRONMENT = os.getenv("ENVIRONMENT", "production")
 
 # Initialize FastAPI app
-VERSION = "0.3.1"
+VERSION = "0.3.2"
 app = FastAPI(
     title="Seismo Fleet Manager",
     description="Backend API for managing seismograph fleet status",
diff --git a/templates/base.html b/templates/base.html
index f647a78..4672c30 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -368,10 +368,10 @@
     </script>
 
     <!-- Offline Database -->
-    <script src="/static/offline-db.js?v=0.3.1"></script>
+    <script src="/static/offline-db.js?v=0.3.2"></script>
 
     <!-- Mobile JavaScript -->
-    <script src="/static/mobile.js?v=0.3.1"></script>
+    <script src="/static/mobile.js?v=0.3.2"></script>
 
     {% block extra_scripts %}{% endblock %}
 </body>
-- 
2.49.1


From 6db958ffa62661fde7bf6932299d407c75bba677 Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Mon, 15 Dec 2025 18:27:00 +0000
Subject: [PATCH 19/29] map overlap bug fixed

---
 CHANGELOG.md                          |  23 +++
 README.md                             |  13 +-
 backend/main.py                       |   2 +-
 backend/static/mobile.css             |  48 ++++++
 backend/static/mobile.js              |   4 +
 templates/base.html                   |  24 +--
 templates/dashboard.html              | 234 +++++++++++++++++++-------
 templates/partials/active_table.html  |   6 +-
 templates/partials/benched_table.html |   2 +-
 templates/partials/roster_table.html  |  28 +--
 10 files changed, 276 insertions(+), 108 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d4abb42..1eb567f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,28 @@ All notable changes to Seismo Fleet Manager will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.3] - 2025-12-12
+
+### Changed
+- **Mobile Navigation**: Moved hamburger menu button from floating top-right to bottom navigation bar
+  - Bottom nav now shows: Menu (hamburger), Dashboard, Roster, Settings
+  - Removed "Add Unit" from bottom nav (still accessible via sidebar menu)
+  - Hamburger no longer floats over content on mobile
+- **Status Dot Visibility**: Increased status dot size from 12px to 16px (w-3/h-3 → w-4/h-4) in dashboard fleet overview for better at-a-glance visibility
+  - Affects both Active and Benched tabs in dashboard
+  - Makes status colors (green/yellow/red) easier to spot during quick scroll
+
+### Fixed
+- **Location Navigation**: Moved tap-to-navigate functionality from roster card view to unit detail modal only
+  - Roster cards now show simple location text with pin emoji
+  - Navigation links (opening Maps app) only appear in the modal when tapping a unit
+  - Reduces visual clutter and accidental navigation triggers
+
+### Technical Details
+- Bottom navigation remains at 4 buttons, first button now triggers sidebar menu
+- Removed standalone hamburger button element and associated CSS
+- Modal already had navigation links, no changes needed there
+
 ## [0.3.2] - 2025-12-12
 
 ### Added
@@ -209,6 +231,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Photo management per unit
 - Automated status categorization (OK/Pending/Missing)
 
+[0.3.3]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.3.2...v0.3.3
 [0.3.2]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.3.1...v0.3.2
 [0.3.1]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.3.0...v0.3.1
 [0.3.0]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.2.1...v0.3.0
diff --git a/README.md b/README.md
index 32ed33d..e34142d 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Seismo Fleet Manager v0.3.2
+# Seismo Fleet Manager v0.3.3
 Backend API and HTMX-powered web interface for managing a mixed fleet of seismographs and field modems. Track deployments, monitor health in real time, merge roster intent with incoming telemetry, and control your fleet through a unified database and dashboard.
 
 ## Features
@@ -437,6 +437,11 @@ docker compose down -v
 
 ## Release Highlights
 
+### v0.3.3 — 2025-12-12
+- **Improved Mobile Navigation**: Hamburger menu moved to bottom nav bar (no more floating button covering content)
+- **Better Status Visibility**: Larger status dots (16px) in dashboard fleet overview for easier at-a-glance status checks
+- **Cleaner Roster Cards**: Location navigation links moved to detail modal only, reducing clutter in card view
+
 ### v0.3.2 — 2025-12-12
 - **Progressive Web App (PWA)**: Complete mobile optimization with offline support, installable as standalone app
 - **Mobile-First UI**: Hamburger menu, bottom navigation bar, card-based roster view optimized for touch
@@ -494,9 +499,11 @@ MIT
 
 ## Version
 
-**Current: 0.3.2** — Progressive Web App with mobile optimization (2025-12-12)
+**Current: 0.3.3** — Mobile navigation improvements and better status visibility (2025-12-12)
 
-Previous: 0.3.1 — Dashboard alerts and status fixes (2025-12-12)
+Previous: 0.3.2 — Progressive Web App with mobile optimization (2025-12-12)
+
+0.3.1 — Dashboard alerts and status fixes (2025-12-12)
 
 0.3.0 — Series 4 support, settings redesign, user preferences (2025-12-09)
 
diff --git a/backend/main.py b/backend/main.py
index fab90a7..963eca1 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -20,7 +20,7 @@ Base.metadata.create_all(bind=engine)
 ENVIRONMENT = os.getenv("ENVIRONMENT", "production")
 
 # Initialize FastAPI app
-VERSION = "0.3.2"
+VERSION = "0.3.3"
 app = FastAPI(
     title="Seismo Fleet Manager",
     description="Backend API for managing seismograph fleet status",
diff --git a/backend/static/mobile.css b/backend/static/mobile.css
index c8db026..fce8491 100644
--- a/backend/static/mobile.css
+++ b/backend/static/mobile.css
@@ -455,6 +455,54 @@
   }
 }
 
+/* ===== 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;
diff --git a/backend/static/mobile.js b/backend/static/mobile.js
index 9651181..74b2f44 100644
--- a/backend/static/mobile.js
+++ b/backend/static/mobile.js
@@ -20,12 +20,14 @@ function toggleMenu() {
       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');
     }
   }
 }
@@ -41,6 +43,7 @@ function closeMenuFromBackdrop() {
     backdrop.classList.remove('show');
     hamburgerBtn?.classList.remove('menu-open');
     document.body.style.overflow = '';
+    document.body.classList.remove('menu-open');
   }
 }
 
@@ -56,6 +59,7 @@ function handleResize() {
       backdrop.classList.remove('show');
       hamburgerBtn?.classList.remove('menu-open');
       document.body.style.overflow = '';
+      document.body.classList.remove('menu-open');
     }
   }
 }
diff --git a/templates/base.html b/templates/base.html
index 4672c30..a741902 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -69,14 +69,6 @@
     {% block extra_head %}{% endblock %}
 </head>
 <body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
-    <!-- Hamburger Button (Mobile Only) -->
-    <button id="hamburgerBtn" class="hamburger-btn md:hidden" onclick="toggleMenu()" aria-label="Menu">
-        <div class="hamburger-icon">
-            <div class="hamburger-line"></div>
-            <div class="hamburger-line"></div>
-            <div class="hamburger-line"></div>
-        </div>
-    </button>
 
     <!-- Offline Indicator -->
     <div id="offlineIndicator" class="offline-indicator">
@@ -172,6 +164,12 @@
     <!-- 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>
@@ -184,12 +182,6 @@
                 </svg>
                 <span>Roster</span>
             </button>
-            <button class="bottom-nav-btn" data-href="/roster?action=add" onclick="window.location.href='/roster?action=add'">
-                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
-                </svg>
-                <span>Add Unit</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>
@@ -368,10 +360,10 @@
     </script>
 
     <!-- Offline Database -->
-    <script src="/static/offline-db.js?v=0.3.2"></script>
+    <script src="/static/offline-db.js?v=0.3.3"></script>
 
     <!-- Mobile JavaScript -->
-    <script src="/static/mobile.js?v=0.3.2"></script>
+    <script src="/static/mobile.js?v=0.3.3"></script>
 
     {% block extra_scripts %}{% endblock %}
 </body>
diff --git a/templates/dashboard.html b/templates/dashboard.html
index c5ae233..e2c3796 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -30,16 +30,21 @@
     <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">
-            <div class="flex items-center justify-between mb-4">
+        <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>
-                <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>
+                <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">
+            <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>
@@ -92,31 +97,41 @@
         </div>
 
         <!-- Recent Alerts Card -->
-        <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
-            <div class="flex items-center justify-between mb-4">
+        <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>
-                <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>
+                <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">
+            <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>
 
         <!-- Recent Photos Card -->
-        <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
-            <div class="flex items-center justify-between mb-4">
+        <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6" 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-lg font-semibold text-gray-900 dark:text-white">Recent Photos</h2>
-                <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="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>
+                <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="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="text-center text-gray-500 dark:text-gray-400">
+            <div class="text-center text-gray-500 dark:text-gray-400 card-content" id="recent-photos-content">
                 <svg class="w-16 h-16 mx-auto mb-2 opacity-50" 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">
@@ -129,53 +144,67 @@
     </div>
 
     <!-- Fleet Map -->
-    <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6 mb-8">
-        <div class="flex items-center justify-between mb-4">
+    <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>
-            <span class="text-sm text-gray-500 dark:text-gray-400">Deployed units</span>
+            <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 id="fleet-map" class="w-full h-64 md:h-96 rounded-lg"></div>
     </div>
 
     <!-- Fleet Status Section with Tabs -->
-    <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
+    <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">
+        <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>
 
-            <a href="/roster" class="text-seismo-orange hover:text-seismo-burgundy font-medium flex items-center">
-                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>
+            <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>
-            </a>
+            </div>
         </div>
 
-        <!-- 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>
+        <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>
+                <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>
+            <!-- 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>
@@ -195,10 +224,82 @@
     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-photos', '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);
@@ -276,15 +377,24 @@ 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) {
@@ -336,9 +446,11 @@ function updateFleetMap(data) {
         }
     });
 
-    // Fit map to show all markers only on first load
-    if (bounds.length > 0 && !fleetMapInitialized) {
-        fleetMap.fitBounds(bounds, { padding: [50, 50] });
+    // 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;
     }
 }
diff --git a/templates/partials/active_table.html b/templates/partials/active_table.html
index bd62e74..e72a4d5 100644
--- a/templates/partials/active_table.html
+++ b/templates/partials/active_table.html
@@ -6,11 +6,11 @@
             <!-- Status Indicator -->
             <div class="flex-shrink-0">
                 {% if unit.status == 'OK' %}
-                <span class="w-3 h-3 rounded-full bg-green-500" title="OK"></span>
+                <span class="w-4 h-4 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>
+                <span class="w-4 h-4 rounded-full bg-yellow-500" title="Pending"></span>
                 {% else %}
-                <span class="w-3 h-3 rounded-full bg-red-500" title="Missing"></span>
+                <span class="w-4 h-4 rounded-full bg-red-500" title="Missing"></span>
                 {% endif %}
             </div>
 
diff --git a/templates/partials/benched_table.html b/templates/partials/benched_table.html
index 20164bf..73478be 100644
--- a/templates/partials/benched_table.html
+++ b/templates/partials/benched_table.html
@@ -5,7 +5,7 @@
         <div class="flex items-center space-x-3 flex-1">
             <!-- Status Indicator (grayed out for benched) -->
             <div class="flex-shrink-0">
-                <span class="w-3 h-3 rounded-full bg-gray-400" title="Benched"></span>
+                <span class="w-4 h-4 rounded-full bg-gray-400" title="Benched"></span>
             </div>
 
             <!-- Unit Info -->
diff --git a/templates/partials/roster_table.html b/templates/partials/roster_table.html
index 9471322..720f158 100644
--- a/templates/partials/roster_table.html
+++ b/templates/partials/roster_table.html
@@ -229,32 +229,14 @@
             {% endif %}
         </div>
 
-        <!-- Location (Tap to Navigate) -->
+        <!-- Location -->
         {% if unit.address %}
-        <div class="text-sm mb-1">
-            <a href="https://www.google.com/maps/search/?api=1&query={{ unit.address | urlencode }}"
-               target="_blank"
-               onclick="event.stopPropagation()"
-               class="flex items-center gap-1 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>
+        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">
+            📍 {{ unit.address }}
         </div>
         {% elif unit.coordinates %}
-        <div class="text-sm mb-1">
-            <a href="https://www.google.com/maps/search/?api=1&query={{ unit.coordinates | urlencode }}"
-               target="_blank"
-               onclick="event.stopPropagation()"
-               class="flex items-center gap-1 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 underline">{{ unit.coordinates }}</span>
-            </a>
+        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">
+            📍 {{ unit.coordinates }}
         </div>
         {% endif %}
 
-- 
2.49.1


From 191dceff2b5807fd2584fbcfce94fc9400076ee5 Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Mon, 15 Dec 2025 18:46:26 +0000
Subject: [PATCH 20/29] Photo mode feature added.

---
 backend/routers/photos.py  | 184 ++++++++++++++++++++++++++++++++++++-
 requirements.txt           |   1 +
 templates/dashboard.html   |  60 ++++++++++++
 templates/unit_detail.html | 134 ++++++++++++++++++++++++++-
 4 files changed, 375 insertions(+), 4 deletions(-)

diff --git a/backend/routers/photos.py b/backend/routers/photos.py
index 0d083bc..6039973 100644
--- a/backend/routers/photos.py
+++ b/backend/routers/photos.py
@@ -1,14 +1,152 @@
-from fastapi import APIRouter, HTTPException
-from fastapi.responses import FileResponse
+from fastapi import APIRouter, HTTPException, UploadFile, File, Depends
+from fastapi.responses import FileResponse, JSONResponse
 from pathlib import Path
-from typing import List
+from typing import List, Optional
+from datetime import datetime
 import os
+import shutil
+from PIL import Image
+from PIL.ExifTags import TAGS, GPSTAGS
+from sqlalchemy.orm import Session
+from backend.database import get_db
+from backend.models import RosterUnit
 
 router = APIRouter(prefix="/api", tags=["photos"])
 
 PHOTOS_BASE_DIR = Path("data/photos")
 
 
+def extract_exif_data(image_path: Path) -> dict:
+    """
+    Extract EXIF metadata from an image file.
+    Returns dict with timestamp, GPS coordinates, and other metadata.
+    """
+    try:
+        image = Image.open(image_path)
+        exif_data = image._getexif()
+
+        if not exif_data:
+            return {}
+
+        metadata = {}
+
+        # Extract standard EXIF tags
+        for tag_id, value in exif_data.items():
+            tag = TAGS.get(tag_id, tag_id)
+
+            # Extract datetime
+            if tag == "DateTime" or tag == "DateTimeOriginal":
+                try:
+                    metadata["timestamp"] = datetime.strptime(str(value), "%Y:%m:%d %H:%M:%S")
+                except:
+                    pass
+
+            # Extract GPS data
+            if tag == "GPSInfo":
+                gps_data = {}
+                for gps_tag_id in value:
+                    gps_tag = GPSTAGS.get(gps_tag_id, gps_tag_id)
+                    gps_data[gps_tag] = value[gps_tag_id]
+
+                # Convert GPS data to decimal degrees
+                lat = gps_data.get("GPSLatitude")
+                lat_ref = gps_data.get("GPSLatitudeRef")
+                lon = gps_data.get("GPSLongitude")
+                lon_ref = gps_data.get("GPSLongitudeRef")
+
+                if lat and lon and lat_ref and lon_ref:
+                    # Convert to decimal degrees
+                    lat_decimal = convert_to_degrees(lat)
+                    if lat_ref == "S":
+                        lat_decimal = -lat_decimal
+
+                    lon_decimal = convert_to_degrees(lon)
+                    if lon_ref == "W":
+                        lon_decimal = -lon_decimal
+
+                    metadata["latitude"] = lat_decimal
+                    metadata["longitude"] = lon_decimal
+                    metadata["coordinates"] = f"{lat_decimal},{lon_decimal}"
+
+        return metadata
+    except Exception as e:
+        print(f"Error extracting EXIF data: {e}")
+        return {}
+
+
+def convert_to_degrees(value):
+    """
+    Convert GPS coordinates from degrees/minutes/seconds to decimal degrees.
+    """
+    d, m, s = value
+    return float(d) + (float(m) / 60.0) + (float(s) / 3600.0)
+
+
+@router.post("/unit/{unit_id}/upload-photo")
+async def upload_photo(
+    unit_id: str,
+    photo: UploadFile = File(...),
+    auto_populate_coords: bool = True,
+    db: Session = Depends(get_db)
+):
+    """
+    Upload a photo for a unit and extract EXIF metadata.
+    If GPS data exists and auto_populate_coords is True, update the unit's coordinates.
+    """
+    # Validate file type
+    allowed_extensions = {".jpg", ".jpeg", ".png", ".gif", ".webp"}
+    file_ext = Path(photo.filename).suffix.lower()
+
+    if file_ext not in allowed_extensions:
+        raise HTTPException(
+            status_code=400,
+            detail=f"Invalid file type. Allowed: {', '.join(allowed_extensions)}"
+        )
+
+    # Create photos directory for this unit
+    unit_photo_dir = PHOTOS_BASE_DIR / unit_id
+    unit_photo_dir.mkdir(parents=True, exist_ok=True)
+
+    # Generate filename with timestamp to avoid collisions
+    timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+    filename = f"{timestamp}_{photo.filename}"
+    file_path = unit_photo_dir / filename
+
+    # Save the file
+    try:
+        with open(file_path, "wb") as buffer:
+            shutil.copyfileobj(photo.file, buffer)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Failed to save photo: {str(e)}")
+
+    # Extract EXIF metadata
+    metadata = extract_exif_data(file_path)
+
+    # Update unit coordinates if GPS data exists and auto_populate_coords is True
+    coordinates_updated = False
+    if auto_populate_coords and "coordinates" in metadata:
+        roster_unit = db.query(RosterUnit).filter(RosterUnit.id == unit_id).first()
+
+        if roster_unit:
+            roster_unit.coordinates = metadata["coordinates"]
+            roster_unit.last_updated = datetime.utcnow()
+            db.commit()
+            coordinates_updated = True
+
+    return JSONResponse(content={
+        "success": True,
+        "filename": filename,
+        "file_path": f"/api/unit/{unit_id}/photo/{filename}",
+        "metadata": {
+            "timestamp": metadata.get("timestamp").isoformat() if metadata.get("timestamp") else None,
+            "latitude": metadata.get("latitude"),
+            "longitude": metadata.get("longitude"),
+            "coordinates": metadata.get("coordinates")
+        },
+        "coordinates_updated": coordinates_updated
+    })
+
+
 @router.get("/unit/{unit_id}/photos")
 def get_unit_photos(unit_id: str):
     """
@@ -51,6 +189,46 @@ def get_unit_photos(unit_id: str):
     }
 
 
+@router.get("/recent-photos")
+def get_recent_photos(limit: int = 12):
+    """
+    Get the most recently uploaded photos across all units.
+    Returns photos sorted by modification time (newest first).
+    """
+    if not PHOTOS_BASE_DIR.exists():
+        return {"photos": []}
+
+    all_photos = []
+    image_extensions = {".jpg", ".jpeg", ".png", ".gif", ".webp"}
+
+    # Scan all unit directories
+    for unit_dir in PHOTOS_BASE_DIR.iterdir():
+        if not unit_dir.is_dir():
+            continue
+
+        unit_id = unit_dir.name
+
+        # Get all photos in this unit's directory
+        for file_path in unit_dir.iterdir():
+            if file_path.is_file() and file_path.suffix.lower() in image_extensions:
+                all_photos.append({
+                    "unit_id": unit_id,
+                    "filename": file_path.name,
+                    "path": f"/api/unit/{unit_id}/photo/{file_path.name}",
+                    "modified": file_path.stat().st_mtime,
+                    "modified_iso": datetime.fromtimestamp(file_path.stat().st_mtime).isoformat()
+                })
+
+    # Sort by modification time (most recent first) and limit
+    all_photos.sort(key=lambda x: x["modified"], reverse=True)
+    recent_photos = all_photos[:limit]
+
+    return {
+        "photos": recent_photos,
+        "total": len(all_photos)
+    }
+
+
 @router.get("/unit/{unit_id}/photo/{filename}")
 def get_photo(unit_id: str, filename: str):
     """
diff --git a/requirements.txt b/requirements.txt
index f526daf..86b1adc 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -5,3 +5,4 @@ pydantic==2.5.0
 python-multipart==0.0.6
 jinja2==3.1.2
 aiofiles==23.2.1
+Pillow==10.1.0
diff --git a/templates/dashboard.html b/templates/dashboard.html
index e2c3796..5bb86ec 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -159,6 +159,26 @@
         </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">
 
@@ -471,6 +491,46 @@ function parseLocation(location) {
     // 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);
 </script>
 
 {% endblock %}
diff --git a/templates/unit_detail.html b/templates/unit_detail.html
index 547000e..55ebe6a 100644
--- a/templates/unit_detail.html
+++ b/templates/unit_detail.html
@@ -177,6 +177,38 @@
                 <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Notes</label>
                 <p id="viewNote" class="mt-1 text-gray-900 dark:text-white whitespace-pre-wrap">--</p>
             </div>
+
+            <!-- Photos -->
+            <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                <div class="flex justify-between items-start mb-4">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Photos</h3>
+                    <div class="flex flex-col sm:flex-row gap-2">
+                        <!-- Take Photo Button (Camera) -->
+                        <label for="photoCameraUpload" class="px-4 py-2 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg transition-colors cursor-pointer flex items-center gap-2 text-sm sm:text-base">
+                            <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 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                            </svg>
+                            <span class="hidden sm:inline">Take Photo</span>
+                            <span class="sm:hidden">Camera</span>
+                        </label>
+                        <!-- Choose from Library Button -->
+                        <label for="photoLibraryUpload" class="px-4 py-2 bg-seismo-navy hover:bg-blue-800 text-white rounded-lg transition-colors cursor-pointer flex items-center gap-2 text-sm sm:text-base">
+                            <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 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>
+                            <span class="hidden sm:inline">Choose Photo</span>
+                            <span class="sm:hidden">Library</span>
+                        </label>
+                        <input type="file" id="photoCameraUpload" accept="image/*" capture="environment" class="hidden" onchange="uploadPhoto(this.files[0])">
+                        <input type="file" id="photoLibraryUpload" accept="image/*" class="hidden" onchange="uploadPhoto(this.files[0])">
+                    </div>
+                </div>
+                <div id="photoGallery" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                    <p class="text-sm text-gray-500 dark:text-gray-400 col-span-full">Loading photos...</p>
+                </div>
+                <div id="uploadStatus" class="hidden mt-4 p-4 rounded-lg"></div>
+            </div>
         </div>
     </div>
 
@@ -632,7 +664,107 @@ function parseLocation(location) {
     return null;
 }
 
+// Load and display photos
+async function loadPhotos() {
+    try {
+        const response = await fetch(`/api/unit/${unitId}/photos`);
+        if (!response.ok) {
+            throw new Error('Failed to load photos');
+        }
+
+        const data = await response.json();
+        const gallery = document.getElementById('photoGallery');
+
+        if (data.photos && data.photos.length > 0) {
+            gallery.innerHTML = '';
+            data.photo_urls.forEach((url, index) => {
+                const photoDiv = document.createElement('div');
+                photoDiv.className = 'relative group';
+                photoDiv.innerHTML = `
+                    <img src="${url}" alt="Unit photo ${index + 1}"
+                         class="w-full h-48 object-cover rounded-lg shadow cursor-pointer hover:shadow-lg transition-shadow"
+                         onclick="window.open('${url}', '_blank')">
+                    ${index === 0 ? '<span class="absolute top-2 left-2 bg-seismo-orange text-white text-xs px-2 py-1 rounded">Primary</span>' : ''}
+                `;
+                gallery.appendChild(photoDiv);
+            });
+        } else {
+            gallery.innerHTML = '<p class="text-sm text-gray-500 dark:text-gray-400 col-span-full">No photos yet. Add a photo to get started.</p>';
+        }
+    } catch (error) {
+        console.error('Error loading photos:', error);
+        document.getElementById('photoGallery').innerHTML = '<p class="text-sm text-red-500 col-span-full">Failed to load photos</p>';
+    }
+}
+
+// Upload photo with EXIF metadata extraction
+async function uploadPhoto(file) {
+    if (!file) return;
+
+    const statusDiv = document.getElementById('uploadStatus');
+    statusDiv.className = 'mt-4 p-4 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200';
+    statusDiv.textContent = 'Uploading photo and extracting metadata...';
+    statusDiv.classList.remove('hidden');
+
+    const formData = new FormData();
+    formData.append('photo', file);
+
+    try {
+        const response = await fetch(`/api/unit/${unitId}/upload-photo`, {
+            method: 'POST',
+            body: formData
+        });
+
+        if (!response.ok) {
+            throw new Error('Upload failed');
+        }
+
+        const result = await response.json();
+
+        // Show success message with metadata info
+        let message = 'Photo uploaded successfully!';
+        if (result.metadata && result.metadata.coordinates) {
+            message += ` GPS location detected: ${result.metadata.coordinates}`;
+            if (result.coordinates_updated) {
+                message += ' (Unit coordinates updated automatically)';
+            }
+        } else {
+            message += ' No GPS data found in photo.';
+        }
+
+        statusDiv.className = 'mt-4 p-4 rounded-lg bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200';
+        statusDiv.textContent = message;
+
+        // Reload photos and unit data
+        await loadPhotos();
+        if (result.coordinates_updated) {
+            await loadUnitData();
+        }
+
+        // Hide status after 5 seconds
+        setTimeout(() => {
+            statusDiv.classList.add('hidden');
+        }, 5000);
+
+        // Reset both file inputs
+        document.getElementById('photoCameraUpload').value = '';
+        document.getElementById('photoLibraryUpload').value = '';
+
+    } catch (error) {
+        console.error('Error uploading photo:', error);
+        statusDiv.className = 'mt-4 p-4 rounded-lg bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200';
+        statusDiv.textContent = `Error uploading photo: ${error.message}`;
+
+        // Hide error after 5 seconds
+        setTimeout(() => {
+            statusDiv.classList.add('hidden');
+        }, 5000);
+    }
+}
+
 // Load data when page loads
-loadUnitData();
+loadUnitData().then(() => {
+    loadPhotos();
+});
 </script>
 {% endblock %}
-- 
2.49.1


From d97999e26f1f2ce7ca270a8653e0e319cf07c2e8 Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Tue, 16 Dec 2025 04:38:06 +0000
Subject: [PATCH 21/29] unit history added

---
 backend/migrate_add_unit_history.py |  78 +++++++++++++++++
 backend/models.py                   |  18 ++++
 backend/routers/roster_edit.py      | 127 ++++++++++++++++++++++++++-
 templates/unit_detail.html          | 129 ++++++++++++++++++++++++++++
 4 files changed, 351 insertions(+), 1 deletion(-)
 create mode 100644 backend/migrate_add_unit_history.py

diff --git a/backend/migrate_add_unit_history.py b/backend/migrate_add_unit_history.py
new file mode 100644
index 0000000..15cdaad
--- /dev/null
+++ b/backend/migrate_add_unit_history.py
@@ -0,0 +1,78 @@
+"""
+Migration script to add unit history timeline support.
+
+This creates the unit_history table to track all changes to units:
+- Note changes (archived old notes, new notes)
+- Deployment status changes (deployed/benched)
+- Retired status changes
+- Other field changes
+
+Run this script once to migrate an existing database.
+"""
+
+import sqlite3
+import os
+
+# Database path
+DB_PATH = "./data/seismo_fleet.db"
+
+def migrate_database():
+    """Create the unit_history table"""
+
+    if not os.path.exists(DB_PATH):
+        print(f"Database not found at {DB_PATH}")
+        print("The database will be created automatically when you run the application.")
+        return
+
+    print(f"Migrating database: {DB_PATH}")
+
+    conn = sqlite3.connect(DB_PATH)
+    cursor = conn.cursor()
+
+    # Check if unit_history table already exists
+    cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='unit_history'")
+    if cursor.fetchone():
+        print("Migration already applied - unit_history table exists")
+        conn.close()
+        return
+
+    print("Creating unit_history table...")
+
+    try:
+        cursor.execute("""
+            CREATE TABLE unit_history (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                unit_id TEXT NOT NULL,
+                change_type TEXT NOT NULL,
+                field_name TEXT,
+                old_value TEXT,
+                new_value TEXT,
+                changed_at TIMESTAMP NOT NULL,
+                source TEXT DEFAULT 'manual',
+                notes TEXT
+            )
+        """)
+        print("  ✓ Created unit_history table")
+
+        # Create indexes for better query performance
+        cursor.execute("CREATE INDEX idx_unit_history_unit_id ON unit_history(unit_id)")
+        print("  ✓ Created index on unit_id")
+
+        cursor.execute("CREATE INDEX idx_unit_history_changed_at ON unit_history(changed_at)")
+        print("  ✓ Created index on changed_at")
+
+        conn.commit()
+        print("\nMigration completed successfully!")
+        print("Units will now track their complete history of changes.")
+
+    except sqlite3.Error as e:
+        print(f"\nError during migration: {e}")
+        conn.rollback()
+        raise
+
+    finally:
+        conn.close()
+
+
+if __name__ == "__main__":
+    migrate_database()
diff --git a/backend/models.py b/backend/models.py
index 4b36061..bf3f32d 100644
--- a/backend/models.py
+++ b/backend/models.py
@@ -59,6 +59,24 @@ class IgnoredUnit(Base):
     ignored_at = Column(DateTime, default=datetime.utcnow)
 
 
+class UnitHistory(Base):
+    """
+    Unit history: complete timeline of changes to each unit.
+    Tracks note changes, status changes, deployment/benched events, and more.
+    """
+    __tablename__ = "unit_history"
+
+    id = Column(Integer, primary_key=True, autoincrement=True)
+    unit_id = Column(String, nullable=False, index=True)  # FK to RosterUnit.id
+    change_type = Column(String, nullable=False)  # note_change, deployed_change, retired_change, etc.
+    field_name = Column(String, nullable=True)  # Which field changed
+    old_value = Column(Text, nullable=True)  # Previous value
+    new_value = Column(Text, nullable=True)  # New value
+    changed_at = Column(DateTime, default=datetime.utcnow, nullable=False, index=True)
+    source = Column(String, default="manual")  # manual, csv_import, telemetry, offline_sync
+    notes = Column(Text, nullable=True)  # Optional reason/context for the change
+
+
 class UserPreferences(Base):
     """
     User preferences: persistent storage for application settings.
diff --git a/backend/routers/roster_edit.py b/backend/routers/roster_edit.py
index e1ab7ca..a495885 100644
--- a/backend/routers/roster_edit.py
+++ b/backend/routers/roster_edit.py
@@ -5,11 +5,28 @@ import csv
 import io
 
 from backend.database import get_db
-from backend.models import RosterUnit, IgnoredUnit, Emitter
+from backend.models import RosterUnit, IgnoredUnit, Emitter, UnitHistory
 
 router = APIRouter(prefix="/api/roster", tags=["roster-edit"])
 
 
+def record_history(db: Session, unit_id: str, change_type: str, field_name: str = None,
+                   old_value: str = None, new_value: str = None, source: str = "manual", notes: str = None):
+    """Helper function to record a change in unit history"""
+    history_entry = UnitHistory(
+        unit_id=unit_id,
+        change_type=change_type,
+        field_name=field_name,
+        old_value=old_value,
+        new_value=new_value,
+        changed_at=datetime.utcnow(),
+        source=source,
+        notes=notes
+    )
+    db.add(history_entry)
+    # Note: caller is responsible for db.commit()
+
+
 def get_or_create_roster_unit(db: Session, unit_id: str):
     unit = db.query(RosterUnit).filter(RosterUnit.id == unit_id).first()
     if not unit:
@@ -154,6 +171,11 @@ def edit_roster_unit(
         except ValueError:
             raise HTTPException(status_code=400, detail="Invalid next_calibration_due date format. Use YYYY-MM-DD")
 
+    # Track changes for history
+    old_note = unit.note
+    old_deployed = unit.deployed
+    old_retired = unit.retired
+
     # Update all fields
     unit.device_type = device_type
     unit.unit_type = unit_type
@@ -176,6 +198,20 @@ def edit_roster_unit(
     unit.phone_number = phone_number if phone_number else None
     unit.hardware_model = hardware_model if hardware_model else None
 
+    # Record history entries for changed fields
+    if old_note != note:
+        record_history(db, unit_id, "note_change", "note", old_note, note, "manual")
+
+    if old_deployed != deployed:
+        status_text = "deployed" if deployed else "benched"
+        old_status_text = "deployed" if old_deployed else "benched"
+        record_history(db, unit_id, "deployed_change", "deployed", old_status_text, status_text, "manual")
+
+    if old_retired != retired:
+        status_text = "retired" if retired else "active"
+        old_status_text = "retired" if old_retired else "active"
+        record_history(db, unit_id, "retired_change", "retired", old_status_text, status_text, "manual")
+
     db.commit()
     return {"message": "Unit updated", "id": unit_id, "device_type": device_type}
 
@@ -183,8 +219,24 @@ def edit_roster_unit(
 @router.post("/set-deployed/{unit_id}")
 def set_deployed(unit_id: str, deployed: bool = Form(...), db: Session = Depends(get_db)):
     unit = get_or_create_roster_unit(db, unit_id)
+    old_deployed = unit.deployed
     unit.deployed = deployed
     unit.last_updated = datetime.utcnow()
+
+    # Record history entry for deployed status change
+    if old_deployed != deployed:
+        status_text = "deployed" if deployed else "benched"
+        old_status_text = "deployed" if old_deployed else "benched"
+        record_history(
+            db=db,
+            unit_id=unit_id,
+            change_type="deployed_change",
+            field_name="deployed",
+            old_value=old_status_text,
+            new_value=status_text,
+            source="manual"
+        )
+
     db.commit()
     return {"message": "Updated", "id": unit_id, "deployed": deployed}
 
@@ -192,8 +244,24 @@ def set_deployed(unit_id: str, deployed: bool = Form(...), db: Session = Depends
 @router.post("/set-retired/{unit_id}")
 def set_retired(unit_id: str, retired: bool = Form(...), db: Session = Depends(get_db)):
     unit = get_or_create_roster_unit(db, unit_id)
+    old_retired = unit.retired
     unit.retired = retired
     unit.last_updated = datetime.utcnow()
+
+    # Record history entry for retired status change
+    if old_retired != retired:
+        status_text = "retired" if retired else "active"
+        old_status_text = "retired" if old_retired else "active"
+        record_history(
+            db=db,
+            unit_id=unit_id,
+            change_type="retired_change",
+            field_name="retired",
+            old_value=old_status_text,
+            new_value=status_text,
+            source="manual"
+        )
+
     db.commit()
     return {"message": "Updated", "id": unit_id, "retired": retired}
 
@@ -235,8 +303,22 @@ def delete_roster_unit(unit_id: str, db: Session = Depends(get_db)):
 @router.post("/set-note/{unit_id}")
 def set_note(unit_id: str, note: str = Form(""), db: Session = Depends(get_db)):
     unit = get_or_create_roster_unit(db, unit_id)
+    old_note = unit.note
     unit.note = note
     unit.last_updated = datetime.utcnow()
+
+    # Record history entry for note change
+    if old_note != note:
+        record_history(
+            db=db,
+            unit_id=unit_id,
+            change_type="note_change",
+            field_name="note",
+            old_value=old_note,
+            new_value=note,
+            source="manual"
+        )
+
     db.commit()
     return {"message": "Updated", "id": unit_id, "note": note}
 
@@ -402,3 +484,46 @@ def list_ignored_units(db: Session = Depends(get_db)):
             for unit in ignored_units
         ]
     }
+
+
+@router.get("/history/{unit_id}")
+def get_unit_history(unit_id: str, db: Session = Depends(get_db)):
+    """
+    Get complete history timeline for a unit.
+    Returns all historical changes ordered by most recent first.
+    """
+    history_entries = db.query(UnitHistory).filter(
+        UnitHistory.unit_id == unit_id
+    ).order_by(UnitHistory.changed_at.desc()).all()
+
+    return {
+        "unit_id": unit_id,
+        "history": [
+            {
+                "id": entry.id,
+                "change_type": entry.change_type,
+                "field_name": entry.field_name,
+                "old_value": entry.old_value,
+                "new_value": entry.new_value,
+                "changed_at": entry.changed_at.isoformat(),
+                "source": entry.source,
+                "notes": entry.notes
+            }
+            for entry in history_entries
+        ]
+    }
+
+
+@router.delete("/history/{history_id}")
+def delete_history_entry(history_id: int, db: Session = Depends(get_db)):
+    """
+    Delete a specific history entry by ID.
+    Allows manual cleanup of old history entries.
+    """
+    history_entry = db.query(UnitHistory).filter(UnitHistory.id == history_id).first()
+    if not history_entry:
+        raise HTTPException(status_code=404, detail="History entry not found")
+
+    db.delete(history_entry)
+    db.commit()
+    return {"message": "History entry deleted", "id": history_id}
diff --git a/templates/unit_detail.html b/templates/unit_detail.html
index 55ebe6a..ebf4706 100644
--- a/templates/unit_detail.html
+++ b/templates/unit_detail.html
@@ -178,6 +178,14 @@
                 <p id="viewNote" class="mt-1 text-gray-900 dark:text-white whitespace-pre-wrap">--</p>
             </div>
 
+            <!-- Unit History Timeline -->
+            <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Timeline</h3>
+                <div id="historyTimeline" class="space-y-3">
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Loading history...</p>
+                </div>
+            </div>
+
             <!-- Photos -->
             <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
                 <div class="flex justify-between items-start mb-4">
@@ -762,9 +770,130 @@ async function uploadPhoto(file) {
     }
 }
 
+// Load and display unit history timeline
+async function loadUnitHistory() {
+    try {
+        const response = await fetch(`/api/roster/history/${unitId}`);
+        if (!response.ok) {
+            throw new Error('Failed to load history');
+        }
+
+        const data = await response.json();
+        const timeline = document.getElementById('historyTimeline');
+
+        if (data.history && data.history.length > 0) {
+            timeline.innerHTML = '';
+            data.history.forEach(entry => {
+                const timelineEntry = createTimelineEntry(entry);
+                timeline.appendChild(timelineEntry);
+            });
+        } else {
+            timeline.innerHTML = '<p class="text-sm text-gray-500 dark:text-gray-400">No history yet. Changes will appear here.</p>';
+        }
+    } catch (error) {
+        console.error('Error loading history:', error);
+        document.getElementById('historyTimeline').innerHTML = '<p class="text-sm text-red-500">Failed to load history</p>';
+    }
+}
+
+// Create a timeline entry element
+function createTimelineEntry(entry) {
+    const div = document.createElement('div');
+    div.className = 'flex gap-3 p-3 rounded-lg bg-gray-50 dark:bg-slate-700/50';
+
+    // Icon based on change type
+    const icons = {
+        'note_change': `<svg class="w-5 h-5 text-blue-500" 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>`,
+        'deployed_change': `<svg class="w-5 h-5 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>`,
+        'retired_change': `<svg class="w-5 h-5 text-orange-500" 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>`
+    };
+
+    const icon = icons[entry.change_type] || `<svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+    </svg>`;
+
+    // Format change description
+    let description = '';
+    if (entry.change_type === 'note_change') {
+        description = `<strong>Note changed</strong>`;
+        if (entry.old_value) {
+            description += `<br><span class="text-xs text-gray-500 dark:text-gray-400">From: "${entry.old_value}"</span>`;
+        }
+        if (entry.new_value) {
+            description += `<br><span class="text-xs text-gray-600 dark:text-gray-300">To: "${entry.new_value}"</span>`;
+        }
+    } else if (entry.change_type === 'deployed_change') {
+        description = `<strong>Status changed to ${entry.new_value}</strong>`;
+    } else if (entry.change_type === 'retired_change') {
+        description = `<strong>Marked as ${entry.new_value}</strong>`;
+    } else {
+        description = `<strong>${entry.field_name} changed</strong>`;
+        if (entry.old_value && entry.new_value) {
+            description += `<br><span class="text-xs text-gray-500 dark:text-gray-400">${entry.old_value} → ${entry.new_value}</span>`;
+        }
+    }
+
+    // Format timestamp
+    const timestamp = new Date(entry.changed_at).toLocaleString();
+
+    div.innerHTML = `
+        <div class="flex-shrink-0">
+            ${icon}
+        </div>
+        <div class="flex-1 min-w-0">
+            <div class="text-sm text-gray-900 dark:text-white">
+                ${description}
+            </div>
+            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                ${timestamp}
+                ${entry.source !== 'manual' ? `<span class="ml-2 px-2 py-0.5 bg-gray-200 dark:bg-gray-600 rounded text-xs">${entry.source}</span>` : ''}
+            </div>
+        </div>
+        <div class="flex-shrink-0">
+            <button onclick="deleteHistoryEntry(${entry.id})" class="text-gray-400 hover:text-red-500 transition-colors" title="Delete this history entry">
+                <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="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>
+    `;
+
+    return div;
+}
+
+// Delete a history entry
+async function deleteHistoryEntry(historyId) {
+    if (!confirm('Are you sure you want to delete this history entry?')) {
+        return;
+    }
+
+    try {
+        const response = await fetch(`/api/roster/history/${historyId}`, {
+            method: 'DELETE'
+        });
+
+        if (response.ok) {
+            // Reload history
+            await loadUnitHistory();
+        } else {
+            const result = await response.json();
+            alert(`Error: ${result.detail || 'Unknown error'}`);
+        }
+    } catch (error) {
+        alert(`Error: ${error.message}`);
+    }
+}
+
 // Load data when page loads
 loadUnitData().then(() => {
     loadPhotos();
+    loadUnitHistory();
 });
 </script>
 {% endblock %}
-- 
2.49.1


From 27f8719e3303db18aa8454cba9cd384d43bc9e9e Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Tue, 16 Dec 2025 20:02:04 +0000
Subject: [PATCH 22/29] db management system added

---
 backend/main.py                      |   3 +-
 backend/routers/activity.py          | 146 ++++++++
 backend/routers/settings.py          | 146 +++++++-
 backend/services/backup_scheduler.py | 145 ++++++++
 backend/services/database_backup.py  | 192 +++++++++++
 docs/DATABASE_MANAGEMENT.md          | 477 +++++++++++++++++++++++++++
 scripts/clone_db_to_dev.py           | 149 +++++++++
 templates/dashboard.html             | 112 ++++++-
 templates/settings.html              | 351 ++++++++++++++++++++
 9 files changed, 1705 insertions(+), 16 deletions(-)
 create mode 100644 backend/routers/activity.py
 create mode 100644 backend/services/backup_scheduler.py
 create mode 100644 backend/services/database_backup.py
 create mode 100644 docs/DATABASE_MANAGEMENT.md
 create mode 100755 scripts/clone_db_to_dev.py

diff --git a/backend/main.py b/backend/main.py
index 963eca1..1c95686 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -9,7 +9,7 @@ from typing import List, Dict
 from pydantic import BaseModel
 
 from backend.database import engine, Base, get_db
-from backend.routers import roster, units, photos, roster_edit, dashboard, dashboard_tabs
+from backend.routers import roster, units, photos, roster_edit, dashboard, dashboard_tabs, activity
 from backend.services.snapshot import emit_status_snapshot
 from backend.models import IgnoredUnit
 
@@ -67,6 +67,7 @@ app.include_router(photos.router)
 app.include_router(roster_edit.router)
 app.include_router(dashboard.router)
 app.include_router(dashboard_tabs.router)
+app.include_router(activity.router)
 
 from backend.routers import settings
 app.include_router(settings.router)
diff --git a/backend/routers/activity.py b/backend/routers/activity.py
new file mode 100644
index 0000000..b881a8e
--- /dev/null
+++ b/backend/routers/activity.py
@@ -0,0 +1,146 @@
+from fastapi import APIRouter, Depends
+from sqlalchemy.orm import Session
+from sqlalchemy import desc
+from pathlib import Path
+from datetime import datetime, timedelta, timezone
+from typing import List, Dict, Any
+from backend.database import get_db
+from backend.models import UnitHistory, Emitter, RosterUnit
+
+router = APIRouter(prefix="/api", tags=["activity"])
+
+PHOTOS_BASE_DIR = Path("data/photos")
+
+
+@router.get("/recent-activity")
+def get_recent_activity(limit: int = 20, db: Session = Depends(get_db)):
+    """
+    Get recent activity feed combining unit history changes and photo uploads.
+    Returns a unified timeline of events sorted by timestamp (newest first).
+    """
+    activities = []
+
+    # Get recent history entries
+    history_entries = db.query(UnitHistory)\
+        .order_by(desc(UnitHistory.changed_at))\
+        .limit(limit * 2)\
+        .all()  # Get more than needed to mix with photos
+
+    for entry in history_entries:
+        activity = {
+            "type": "history",
+            "timestamp": entry.changed_at.isoformat(),
+            "timestamp_unix": entry.changed_at.timestamp(),
+            "unit_id": entry.unit_id,
+            "change_type": entry.change_type,
+            "field_name": entry.field_name,
+            "old_value": entry.old_value,
+            "new_value": entry.new_value,
+            "source": entry.source,
+            "notes": entry.notes
+        }
+        activities.append(activity)
+
+    # Get recent photos
+    if PHOTOS_BASE_DIR.exists():
+        image_extensions = {".jpg", ".jpeg", ".png", ".gif", ".webp"}
+        photo_activities = []
+
+        for unit_dir in PHOTOS_BASE_DIR.iterdir():
+            if not unit_dir.is_dir():
+                continue
+
+            unit_id = unit_dir.name
+
+            for file_path in unit_dir.iterdir():
+                if file_path.is_file() and file_path.suffix.lower() in image_extensions:
+                    modified_time = file_path.stat().st_mtime
+                    photo_activities.append({
+                        "type": "photo",
+                        "timestamp": datetime.fromtimestamp(modified_time).isoformat(),
+                        "timestamp_unix": modified_time,
+                        "unit_id": unit_id,
+                        "filename": file_path.name,
+                        "photo_url": f"/api/unit/{unit_id}/photo/{file_path.name}"
+                    })
+
+        activities.extend(photo_activities)
+
+    # Sort all activities by timestamp (newest first)
+    activities.sort(key=lambda x: x["timestamp_unix"], reverse=True)
+
+    # Limit to requested number
+    activities = activities[:limit]
+
+    return {
+        "activities": activities,
+        "total": len(activities)
+    }
+
+
+@router.get("/recent-callins")
+def get_recent_callins(hours: int = 6, limit: int = None, db: Session = Depends(get_db)):
+    """
+    Get recent unit call-ins (units that have reported recently).
+    Returns units sorted by most recent last_seen timestamp.
+
+    Args:
+        hours: Look back this many hours (default: 6)
+        limit: Maximum number of results (default: None = all)
+    """
+    # Calculate the time threshold
+    time_threshold = datetime.now(timezone.utc) - timedelta(hours=hours)
+
+    # Query emitters with recent activity, joined with roster info
+    recent_emitters = db.query(Emitter)\
+        .filter(Emitter.last_seen >= time_threshold)\
+        .order_by(desc(Emitter.last_seen))\
+        .all()
+
+    # Get roster info for all units
+    roster_dict = {r.id: r for r in db.query(RosterUnit).all()}
+
+    call_ins = []
+    for emitter in recent_emitters:
+        roster_unit = roster_dict.get(emitter.id)
+
+        # Calculate time since last seen
+        last_seen_utc = emitter.last_seen.replace(tzinfo=timezone.utc) if emitter.last_seen.tzinfo is None else emitter.last_seen
+        time_diff = datetime.now(timezone.utc) - last_seen_utc
+
+        # Format time ago
+        if time_diff.total_seconds() < 60:
+            time_ago = "just now"
+        elif time_diff.total_seconds() < 3600:
+            minutes = int(time_diff.total_seconds() / 60)
+            time_ago = f"{minutes}m ago"
+        else:
+            hours_ago = time_diff.total_seconds() / 3600
+            if hours_ago < 24:
+                time_ago = f"{int(hours_ago)}h {int((hours_ago % 1) * 60)}m ago"
+            else:
+                days = int(hours_ago / 24)
+                time_ago = f"{days}d ago"
+
+        call_in = {
+            "unit_id": emitter.id,
+            "last_seen": emitter.last_seen.isoformat(),
+            "time_ago": time_ago,
+            "status": emitter.status,
+            "device_type": roster_unit.device_type if roster_unit else "seismograph",
+            "deployed": roster_unit.deployed if roster_unit else False,
+            "note": roster_unit.note if roster_unit and roster_unit.note else "",
+            "location": roster_unit.address if roster_unit and roster_unit.address else (roster_unit.location if roster_unit else "")
+        }
+        call_ins.append(call_in)
+
+    # Apply limit if specified
+    if limit:
+        call_ins = call_ins[:limit]
+
+    return {
+        "call_ins": call_ins,
+        "total": len(call_ins),
+        "hours": hours,
+        "time_threshold": time_threshold.isoformat()
+    }
diff --git a/backend/routers/settings.py b/backend/routers/settings.py
index 1af0547..4cd0fb0 100644
--- a/backend/routers/settings.py
+++ b/backend/routers/settings.py
@@ -1,14 +1,17 @@
 from fastapi import APIRouter, Depends, HTTPException, UploadFile, File
-from fastapi.responses import StreamingResponse
+from fastapi.responses import StreamingResponse, FileResponse
 from sqlalchemy.orm import Session
 from datetime import datetime, date
 from pydantic import BaseModel
 from typing import Optional
 import csv
 import io
+import shutil
+from pathlib import Path
 
 from backend.database import get_db
 from backend.models import RosterUnit, Emitter, IgnoredUnit, UserPreferences
+from backend.services.database_backup import DatabaseBackupService
 
 router = APIRouter(prefix="/api/settings", tags=["settings"])
 
@@ -325,3 +328,144 @@ def update_preferences(
         "status_pending_threshold_hours": prefs.status_pending_threshold_hours,
         "updated_at": prefs.updated_at.isoformat() if prefs.updated_at else None
     }
+
+
+# Database Management Endpoints
+
+backup_service = DatabaseBackupService()
+
+
+@router.get("/database/stats")
+def get_database_stats():
+    """Get current database statistics"""
+    try:
+        stats = backup_service.get_database_stats()
+        return stats
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Failed to get database stats: {str(e)}")
+
+
+@router.post("/database/snapshot")
+def create_database_snapshot(description: Optional[str] = None):
+    """Create a full database snapshot"""
+    try:
+        snapshot = backup_service.create_snapshot(description=description)
+        return {
+            "message": "Snapshot created successfully",
+            "snapshot": snapshot
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Snapshot creation failed: {str(e)}")
+
+
+@router.get("/database/snapshots")
+def list_database_snapshots():
+    """List all available database snapshots"""
+    try:
+        snapshots = backup_service.list_snapshots()
+        return {
+            "snapshots": snapshots,
+            "count": len(snapshots)
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Failed to list snapshots: {str(e)}")
+
+
+@router.get("/database/snapshot/{filename}")
+def download_snapshot(filename: str):
+    """Download a specific snapshot file"""
+    try:
+        snapshot_path = backup_service.download_snapshot(filename)
+        return FileResponse(
+            path=str(snapshot_path),
+            filename=filename,
+            media_type="application/x-sqlite3"
+        )
+    except FileNotFoundError:
+        raise HTTPException(status_code=404, detail=f"Snapshot {filename} not found")
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Download failed: {str(e)}")
+
+
+@router.delete("/database/snapshot/{filename}")
+def delete_database_snapshot(filename: str):
+    """Delete a specific snapshot"""
+    try:
+        backup_service.delete_snapshot(filename)
+        return {
+            "message": f"Snapshot {filename} deleted successfully",
+            "filename": filename
+        }
+    except FileNotFoundError:
+        raise HTTPException(status_code=404, detail=f"Snapshot {filename} not found")
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Delete failed: {str(e)}")
+
+
+class RestoreRequest(BaseModel):
+    """Schema for restore request"""
+    filename: str
+    create_backup: bool = True
+
+
+@router.post("/database/restore")
+def restore_database(request: RestoreRequest, db: Session = Depends(get_db)):
+    """Restore database from a snapshot"""
+    try:
+        # Close the database connection before restoring
+        db.close()
+
+        result = backup_service.restore_snapshot(
+            filename=request.filename,
+            create_backup_before_restore=request.create_backup
+        )
+
+        return result
+    except FileNotFoundError:
+        raise HTTPException(status_code=404, detail=f"Snapshot {request.filename} not found")
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Restore failed: {str(e)}")
+
+
+@router.post("/database/upload-snapshot")
+async def upload_snapshot(file: UploadFile = File(...)):
+    """Upload a snapshot file to the backups directory"""
+    if not file.filename.endswith('.db'):
+        raise HTTPException(status_code=400, detail="File must be a .db file")
+
+    try:
+        # Save uploaded file to backups directory
+        backups_dir = Path("./data/backups")
+        backups_dir.mkdir(parents=True, exist_ok=True)
+
+        timestamp = datetime.utcnow().strftime("%Y%m%d_%H%M%S")
+        uploaded_filename = f"snapshot_uploaded_{timestamp}.db"
+        file_path = backups_dir / uploaded_filename
+
+        # Save file
+        with open(file_path, "wb") as buffer:
+            shutil.copyfileobj(file.file, buffer)
+
+        # Create metadata
+        metadata = {
+            "filename": uploaded_filename,
+            "created_at": timestamp,
+            "created_at_iso": datetime.utcnow().isoformat(),
+            "description": f"Uploaded: {file.filename}",
+            "size_bytes": file_path.stat().st_size,
+            "size_mb": round(file_path.stat().st_size / (1024 * 1024), 2),
+            "type": "uploaded"
+        }
+
+        metadata_path = backups_dir / f"{uploaded_filename}.meta.json"
+        import json
+        with open(metadata_path, 'w') as f:
+            json.dump(metadata, f, indent=2)
+
+        return {
+            "message": "Snapshot uploaded successfully",
+            "snapshot": metadata
+        }
+
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Upload failed: {str(e)}")
diff --git a/backend/services/backup_scheduler.py b/backend/services/backup_scheduler.py
new file mode 100644
index 0000000..15168cc
--- /dev/null
+++ b/backend/services/backup_scheduler.py
@@ -0,0 +1,145 @@
+"""
+Automatic Database Backup Scheduler
+Handles scheduled automatic backups of the database
+"""
+
+import schedule
+import time
+import threading
+from datetime import datetime
+from typing import Optional
+import logging
+
+from backend.services.database_backup import DatabaseBackupService
+
+logger = logging.getLogger(__name__)
+
+
+class BackupScheduler:
+    """Manages automatic database backups on a schedule"""
+
+    def __init__(self, db_path: str = "./data/seismo_fleet.db", backups_dir: str = "./data/backups"):
+        self.backup_service = DatabaseBackupService(db_path=db_path, backups_dir=backups_dir)
+        self.scheduler_thread: Optional[threading.Thread] = None
+        self.is_running = False
+
+        # Default settings
+        self.backup_interval_hours = 24  # Daily backups
+        self.keep_count = 10  # Keep last 10 backups
+        self.enabled = False
+
+    def configure(self, interval_hours: int = 24, keep_count: int = 10, enabled: bool = True):
+        """
+        Configure backup scheduler settings
+
+        Args:
+            interval_hours: Hours between automatic backups
+            keep_count: Number of backups to retain
+            enabled: Whether automatic backups are enabled
+        """
+        self.backup_interval_hours = interval_hours
+        self.keep_count = keep_count
+        self.enabled = enabled
+
+        logger.info(f"Backup scheduler configured: interval={interval_hours}h, keep={keep_count}, enabled={enabled}")
+
+    def create_automatic_backup(self):
+        """Create an automatic backup and cleanup old ones"""
+        if not self.enabled:
+            logger.info("Automatic backups are disabled, skipping")
+            return
+
+        try:
+            timestamp = datetime.utcnow().strftime("%Y-%m-%d %H:%M UTC")
+            description = f"Automatic backup - {timestamp}"
+
+            logger.info("Creating automatic backup...")
+            snapshot = self.backup_service.create_snapshot(description=description)
+
+            logger.info(f"Automatic backup created: {snapshot['filename']} ({snapshot['size_mb']} MB)")
+
+            # Cleanup old backups
+            cleanup_result = self.backup_service.cleanup_old_snapshots(keep_count=self.keep_count)
+            if cleanup_result['deleted'] > 0:
+                logger.info(f"Cleaned up {cleanup_result['deleted']} old snapshots")
+
+            return snapshot
+
+        except Exception as e:
+            logger.error(f"Automatic backup failed: {str(e)}")
+            return None
+
+    def start(self):
+        """Start the backup scheduler in a background thread"""
+        if self.is_running:
+            logger.warning("Backup scheduler is already running")
+            return
+
+        if not self.enabled:
+            logger.info("Backup scheduler is disabled, not starting")
+            return
+
+        logger.info(f"Starting backup scheduler (every {self.backup_interval_hours} hours)")
+
+        # Clear any existing scheduled jobs
+        schedule.clear()
+
+        # Schedule the backup job
+        schedule.every(self.backup_interval_hours).hours.do(self.create_automatic_backup)
+
+        # Also run immediately on startup
+        self.create_automatic_backup()
+
+        # Start the scheduler thread
+        self.is_running = True
+        self.scheduler_thread = threading.Thread(target=self._run_scheduler, daemon=True)
+        self.scheduler_thread.start()
+
+        logger.info("Backup scheduler started successfully")
+
+    def _run_scheduler(self):
+        """Internal method to run the scheduler loop"""
+        while self.is_running:
+            schedule.run_pending()
+            time.sleep(60)  # Check every minute
+
+    def stop(self):
+        """Stop the backup scheduler"""
+        if not self.is_running:
+            logger.warning("Backup scheduler is not running")
+            return
+
+        logger.info("Stopping backup scheduler...")
+        self.is_running = False
+        schedule.clear()
+
+        if self.scheduler_thread:
+            self.scheduler_thread.join(timeout=5)
+
+        logger.info("Backup scheduler stopped")
+
+    def get_status(self) -> dict:
+        """Get current scheduler status"""
+        next_run = None
+        if self.is_running and schedule.jobs:
+            next_run = schedule.jobs[0].next_run.isoformat() if schedule.jobs[0].next_run else None
+
+        return {
+            "enabled": self.enabled,
+            "running": self.is_running,
+            "interval_hours": self.backup_interval_hours,
+            "keep_count": self.keep_count,
+            "next_run": next_run
+        }
+
+
+# Global scheduler instance
+_scheduler_instance: Optional[BackupScheduler] = None
+
+
+def get_backup_scheduler() -> BackupScheduler:
+    """Get or create the global backup scheduler instance"""
+    global _scheduler_instance
+    if _scheduler_instance is None:
+        _scheduler_instance = BackupScheduler()
+    return _scheduler_instance
diff --git a/backend/services/database_backup.py b/backend/services/database_backup.py
new file mode 100644
index 0000000..2858fd2
--- /dev/null
+++ b/backend/services/database_backup.py
@@ -0,0 +1,192 @@
+"""
+Database Backup and Restore Service
+Handles full database snapshots, restoration, and remote synchronization
+"""
+
+import os
+import shutil
+import sqlite3
+from datetime import datetime
+from pathlib import Path
+from typing import List, Dict, Optional
+import json
+
+
+class DatabaseBackupService:
+    """Manages database backup operations"""
+
+    def __init__(self, db_path: str = "./data/seismo_fleet.db", backups_dir: str = "./data/backups"):
+        self.db_path = Path(db_path)
+        self.backups_dir = Path(backups_dir)
+        self.backups_dir.mkdir(parents=True, exist_ok=True)
+
+    def create_snapshot(self, description: Optional[str] = None) -> Dict:
+        """
+        Create a full database snapshot using SQLite backup API
+        Returns snapshot metadata
+        """
+        if not self.db_path.exists():
+            raise FileNotFoundError(f"Database not found at {self.db_path}")
+
+        # Generate snapshot filename with timestamp
+        timestamp = datetime.utcnow().strftime("%Y%m%d_%H%M%S")
+        snapshot_name = f"snapshot_{timestamp}.db"
+        snapshot_path = self.backups_dir / snapshot_name
+
+        # Get database size before backup
+        db_size = self.db_path.stat().st_size
+
+        try:
+            # Use SQLite backup API for safe backup (handles concurrent access)
+            source_conn = sqlite3.connect(str(self.db_path))
+            dest_conn = sqlite3.connect(str(snapshot_path))
+
+            # Perform the backup
+            with dest_conn:
+                source_conn.backup(dest_conn)
+
+            source_conn.close()
+            dest_conn.close()
+
+            # Create metadata
+            metadata = {
+                "filename": snapshot_name,
+                "created_at": timestamp,
+                "created_at_iso": datetime.utcnow().isoformat(),
+                "description": description or "Manual snapshot",
+                "size_bytes": snapshot_path.stat().st_size,
+                "size_mb": round(snapshot_path.stat().st_size / (1024 * 1024), 2),
+                "original_db_size_bytes": db_size,
+                "type": "manual"
+            }
+
+            # Save metadata as JSON sidecar file
+            metadata_path = self.backups_dir / f"{snapshot_name}.meta.json"
+            with open(metadata_path, 'w') as f:
+                json.dump(metadata, f, indent=2)
+
+            return metadata
+
+        except Exception as e:
+            # Clean up partial snapshot if it exists
+            if snapshot_path.exists():
+                snapshot_path.unlink()
+            raise Exception(f"Snapshot creation failed: {str(e)}")
+
+    def list_snapshots(self) -> List[Dict]:
+        """
+        List all available snapshots with metadata
+        Returns list sorted by creation date (newest first)
+        """
+        snapshots = []
+
+        for db_file in sorted(self.backups_dir.glob("snapshot_*.db"), reverse=True):
+            metadata_file = self.backups_dir / f"{db_file.name}.meta.json"
+
+            if metadata_file.exists():
+                with open(metadata_file, 'r') as f:
+                    metadata = json.load(f)
+            else:
+                # Fallback for legacy snapshots without metadata
+                stat_info = db_file.stat()
+                metadata = {
+                    "filename": db_file.name,
+                    "created_at": datetime.fromtimestamp(stat_info.st_mtime).strftime("%Y%m%d_%H%M%S"),
+                    "created_at_iso": datetime.fromtimestamp(stat_info.st_mtime).isoformat(),
+                    "description": "Legacy snapshot",
+                    "size_bytes": stat_info.st_size,
+                    "size_mb": round(stat_info.st_size / (1024 * 1024), 2),
+                    "type": "manual"
+                }
+
+            snapshots.append(metadata)
+
+        return snapshots
+
+    def delete_snapshot(self, filename: str) -> bool:
+        """Delete a snapshot and its metadata"""
+        snapshot_path = self.backups_dir / filename
+        metadata_path = self.backups_dir / f"{filename}.meta.json"
+
+        if not snapshot_path.exists():
+            raise FileNotFoundError(f"Snapshot {filename} not found")
+
+        snapshot_path.unlink()
+        if metadata_path.exists():
+            metadata_path.unlink()
+
+        return True
+
+    def restore_snapshot(self, filename: str, create_backup_before_restore: bool = True) -> Dict:
+        """
+        Restore database from a snapshot
+        Creates a safety backup before restoring if requested
+        """
+        snapshot_path = self.backups_dir / filename
+
+        if not snapshot_path.exists():
+            raise FileNotFoundError(f"Snapshot {filename} not found")
+
+        if not self.db_path.exists():
+            raise FileNotFoundError(f"Database not found at {self.db_path}")
+
+        backup_info = None
+
+        # Create safety backup before restore
+        if create_backup_before_restore:
+            backup_info = self.create_snapshot(description="Auto-backup before restore")
+
+        try:
+            # Replace database file
+            shutil.copy2(str(snapshot_path), str(self.db_path))
+
+            return {
+                "message": "Database restored successfully",
+                "restored_from": filename,
+                "restored_at": datetime.utcnow().isoformat(),
+                "backup_created": backup_info["filename"] if backup_info else None
+            }
+
+        except Exception as e:
+            raise Exception(f"Restore failed: {str(e)}")
+
+    def get_database_stats(self) -> Dict:
+        """Get statistics about the current database"""
+        if not self.db_path.exists():
+            return {"error": "Database not found"}
+
+        conn = sqlite3.connect(str(self.db_path))
+        cursor = conn.cursor()
+
+        # Get table counts
+        cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name NOT LIKE 'sqlite_%'")
+        tables = cursor.fetchall()
+
+        table_stats = {}
+        total_rows = 0
+
+        for (table_name,) in tables:
+            cursor.execute(f"SELECT COUNT(*) FROM {table_name}")
+            count = cursor.fetchone()[0]
+            table_stats[table_name] = count
+            total_rows += count
+
+        conn.close()
+
+        db_size = self.db_path.stat().st_size
+
+        return {
+            "database_path": str(self.db_path),
+            "size_bytes": db_size,
+            "size_mb": round(db_size / (1024 * 1024), 2),
+            "total_rows": total_rows,
+            "tables": table_stats,
+            "last_modified": datetime.fromtimestamp(self.db_path.stat().st_mtime).isoformat()
+        }
+
+    def download_snapshot(self, filename: str) -> Path:
+        """Get the file path for downloading a snapshot"""
+        snapshot_path = self.backups_dir / filename
+        if not snapshot_path.exists():
+            raise FileNotFoundError(f"Snapshot {filename} not found")
+        return snapshot_path
diff --git a/docs/DATABASE_MANAGEMENT.md b/docs/DATABASE_MANAGEMENT.md
new file mode 100644
index 0000000..73e3246
--- /dev/null
+++ b/docs/DATABASE_MANAGEMENT.md
@@ -0,0 +1,477 @@
+# Database Management Guide
+
+This guide covers the comprehensive database management features available in the Seismo Fleet Manager, including manual snapshots, restoration, remote cloning, and automatic backups.
+
+## Table of Contents
+
+1. [Manual Database Snapshots](#manual-database-snapshots)
+2. [Restore from Snapshot](#restore-from-snapshot)
+3. [Download and Upload Snapshots](#download-and-upload-snapshots)
+4. [Clone Database to Dev Server](#clone-database-to-dev-server)
+5. [Automatic Backup Service](#automatic-backup-service)
+6. [API Reference](#api-reference)
+
+---
+
+## Manual Database Snapshots
+
+### Creating a Snapshot via UI
+
+1. Navigate to **Settings** → **Danger Zone** tab
+2. Scroll to the **Database Management** section
+3. Click **"Create Snapshot"**
+4. Optionally enter a description
+5. The snapshot will be created and appear in the "Available Snapshots" list
+
+### Creating a Snapshot via API
+
+```bash
+curl -X POST http://localhost:8000/api/settings/database/snapshot \
+  -H "Content-Type: application/json" \
+  -d '{"description": "Pre-deployment backup"}'
+```
+
+### What Happens
+
+- A full copy of the SQLite database is created using the SQLite backup API
+- The snapshot is stored in `./data/backups/` directory
+- A metadata JSON file is created alongside the snapshot
+- No downtime or interruption to the running application
+
+### Snapshot Files
+
+Snapshots are stored as:
+- **Database file**: `snapshot_YYYYMMDD_HHMMSS.db`
+- **Metadata file**: `snapshot_YYYYMMDD_HHMMSS.db.meta.json`
+
+Example:
+```
+data/backups/
+├── snapshot_20250101_143022.db
+├── snapshot_20250101_143022.db.meta.json
+├── snapshot_20250102_080000.db
+└── snapshot_20250102_080000.db.meta.json
+```
+
+---
+
+## Restore from Snapshot
+
+### Restoring via UI
+
+1. Navigate to **Settings** → **Danger Zone** tab
+2. In the **Available Snapshots** section, find the snapshot you want to restore
+3. Click the **restore icon** (circular arrow) next to the snapshot
+4. Confirm the restoration warning
+5. A safety backup of the current database is automatically created
+6. The database is replaced with the snapshot
+7. The page reloads automatically
+
+### Restoring via API
+
+```bash
+curl -X POST http://localhost:8000/api/settings/database/restore \
+  -H "Content-Type: application/json" \
+  -d '{
+    "filename": "snapshot_20250101_143022.db",
+    "create_backup": true
+  }'
+```
+
+### Important Notes
+
+- **Always creates a safety backup** before restoring (unless explicitly disabled)
+- **Application reload required** - Users should refresh their browsers
+- **Atomic operation** - The entire database is replaced at once
+- **Cannot be undone** - But you'll have the safety backup
+
+---
+
+## Download and Upload Snapshots
+
+### Download a Snapshot
+
+**Via UI**: Click the download icon next to any snapshot in the list
+
+**Via Browser**:
+```
+http://localhost:8000/api/settings/database/snapshot/snapshot_20250101_143022.db
+```
+
+**Via Command Line**:
+```bash
+curl -o backup.db http://localhost:8000/api/settings/database/snapshot/snapshot_20250101_143022.db
+```
+
+### Upload a Snapshot
+
+**Via UI**:
+1. Navigate to **Settings** → **Danger Zone** tab
+2. Find the **Upload Snapshot** section
+3. Click **"Choose File"** and select a `.db` file
+4. Click **"Upload Snapshot"**
+
+**Via Command Line**:
+```bash
+curl -X POST http://localhost:8000/api/settings/database/upload-snapshot \
+  -F "file=@/path/to/your/backup.db"
+```
+
+---
+
+## Clone Database to Dev Server
+
+The clone tool allows you to copy the production database to a remote development server over the network.
+
+### Prerequisites
+
+- Remote dev server must have the same Seismo Fleet Manager installation
+- Network connectivity between production and dev servers
+- Python 3 and `requests` library installed
+
+### Basic Usage
+
+```bash
+# Clone current database to dev server
+python3 scripts/clone_db_to_dev.py --url https://dev.example.com
+
+# Clone using existing snapshot
+python3 scripts/clone_db_to_dev.py \
+  --url https://dev.example.com \
+  --snapshot snapshot_20250101_143022.db
+
+# Clone with authentication token
+python3 scripts/clone_db_to_dev.py \
+  --url https://dev.example.com \
+  --token YOUR_AUTH_TOKEN
+```
+
+### What Happens
+
+1. Creates a snapshot of the production database (or uses existing one)
+2. Uploads the snapshot to the remote dev server
+3. Automatically restores the snapshot on the dev server
+4. Creates a safety backup on the dev server before restoring
+
+### Remote Server Setup
+
+The remote dev server needs no special setup - it just needs to be running the same Seismo Fleet Manager application with the database management endpoints enabled.
+
+### Use Cases
+
+- **Testing**: Test changes against production data in a dev environment
+- **Debugging**: Investigate production issues with real data safely
+- **Training**: Provide realistic data for user training
+- **Development**: Build new features with realistic data
+
+---
+
+## Automatic Backup Service
+
+The automatic backup service runs scheduled backups in the background and manages backup retention.
+
+### Configuration
+
+The backup scheduler can be configured programmatically or via environment variables.
+
+**Programmatic Configuration**:
+
+```python
+from backend.services.backup_scheduler import get_backup_scheduler
+
+scheduler = get_backup_scheduler()
+scheduler.configure(
+    interval_hours=24,  # Backup every 24 hours
+    keep_count=10,      # Keep last 10 backups
+    enabled=True        # Enable automatic backups
+)
+scheduler.start()
+```
+
+**Environment Variables** (add to your `.env` or deployment config):
+
+```bash
+AUTO_BACKUP_ENABLED=true
+AUTO_BACKUP_INTERVAL_HOURS=24
+AUTO_BACKUP_KEEP_COUNT=10
+```
+
+### Integration with Application Startup
+
+Add to `backend/main.py`:
+
+```python
+from backend.services.backup_scheduler import get_backup_scheduler
+
+@app.on_event("startup")
+async def startup_event():
+    # Start automatic backup scheduler
+    scheduler = get_backup_scheduler()
+    scheduler.configure(
+        interval_hours=24,  # Daily backups
+        keep_count=10,      # Keep 10 most recent
+        enabled=True
+    )
+    scheduler.start()
+
+@app.on_event("shutdown")
+async def shutdown_event():
+    # Stop backup scheduler gracefully
+    scheduler = get_backup_scheduler()
+    scheduler.stop()
+```
+
+### Manual Control
+
+```python
+from backend.services.backup_scheduler import get_backup_scheduler
+
+scheduler = get_backup_scheduler()
+
+# Get current status
+status = scheduler.get_status()
+print(status)
+# {'enabled': True, 'running': True, 'interval_hours': 24, 'keep_count': 10, 'next_run': '2025-01-02T14:00:00'}
+
+# Create backup immediately
+scheduler.create_automatic_backup()
+
+# Stop scheduler
+scheduler.stop()
+
+# Start scheduler
+scheduler.start()
+```
+
+### Backup Retention
+
+The scheduler automatically deletes old backups based on the `keep_count` setting. For example, if `keep_count=10`, only the 10 most recent backups are kept, and older ones are automatically deleted.
+
+---
+
+## API Reference
+
+### Database Statistics
+
+```http
+GET /api/settings/database/stats
+```
+
+Returns database size, row counts, and last modified time.
+
+**Response**:
+```json
+{
+  "database_path": "./data/seismo_fleet.db",
+  "size_bytes": 1048576,
+  "size_mb": 1.0,
+  "total_rows": 1250,
+  "tables": {
+    "roster": 450,
+    "emitters": 600,
+    "ignored_units": 50,
+    "unit_history": 150
+  },
+  "last_modified": "2025-01-01T14:30:22"
+}
+```
+
+### Create Snapshot
+
+```http
+POST /api/settings/database/snapshot
+Content-Type: application/json
+
+{
+  "description": "Optional description"
+}
+```
+
+**Response**:
+```json
+{
+  "message": "Snapshot created successfully",
+  "snapshot": {
+    "filename": "snapshot_20250101_143022.db",
+    "created_at": "20250101_143022",
+    "created_at_iso": "2025-01-01T14:30:22",
+    "description": "Optional description",
+    "size_bytes": 1048576,
+    "size_mb": 1.0,
+    "type": "manual"
+  }
+}
+```
+
+### List Snapshots
+
+```http
+GET /api/settings/database/snapshots
+```
+
+**Response**:
+```json
+{
+  "snapshots": [
+    {
+      "filename": "snapshot_20250101_143022.db",
+      "created_at": "20250101_143022",
+      "created_at_iso": "2025-01-01T14:30:22",
+      "description": "Manual backup",
+      "size_mb": 1.0,
+      "type": "manual"
+    }
+  ],
+  "count": 1
+}
+```
+
+### Download Snapshot
+
+```http
+GET /api/settings/database/snapshot/{filename}
+```
+
+Returns the snapshot file as a download.
+
+### Delete Snapshot
+
+```http
+DELETE /api/settings/database/snapshot/{filename}
+```
+
+### Restore Database
+
+```http
+POST /api/settings/database/restore
+Content-Type: application/json
+
+{
+  "filename": "snapshot_20250101_143022.db",
+  "create_backup": true
+}
+```
+
+**Response**:
+```json
+{
+  "message": "Database restored successfully",
+  "restored_from": "snapshot_20250101_143022.db",
+  "restored_at": "2025-01-01T15:00:00",
+  "backup_created": "snapshot_20250101_150000.db"
+}
+```
+
+### Upload Snapshot
+
+```http
+POST /api/settings/database/upload-snapshot
+Content-Type: multipart/form-data
+
+file: <binary data>
+```
+
+---
+
+## Best Practices
+
+### 1. Regular Backups
+
+- **Enable automatic backups** with a 24-hour interval
+- **Keep at least 7-10 backups** for historical coverage
+- **Create manual snapshots** before major changes
+
+### 2. Before Major Operations
+
+Always create a snapshot before:
+- Software upgrades
+- Bulk data imports
+- Database schema changes
+- Testing destructive operations
+
+### 3. Testing Restores
+
+Periodically test your restore process:
+1. Download a snapshot
+2. Test restoration on a dev environment
+3. Verify data integrity
+
+### 4. Off-Site Backups
+
+For production systems:
+- **Download snapshots** to external storage regularly
+- Use the clone tool to **sync to remote servers**
+- Store backups in **multiple geographic locations**
+
+### 5. Snapshot Management
+
+- Delete old snapshots when no longer needed
+- Use descriptive names/descriptions for manual snapshots
+- Keep pre-deployment snapshots separate
+
+---
+
+## Troubleshooting
+
+### Snapshot Creation Fails
+
+**Problem**: "Database is locked" error
+
+**Solution**: The database is being written to. Wait a moment and try again. The SQLite backup API handles most locking automatically.
+
+### Restore Doesn't Complete
+
+**Problem**: Restore appears to hang
+
+**Solution**:
+- Check server logs for errors
+- Ensure sufficient disk space
+- Verify the snapshot file isn't corrupted
+
+### Upload Fails on Dev Server
+
+**Problem**: "Permission denied" or "File too large"
+
+**Solutions**:
+- Check file upload size limits in your web server config (nginx/apache)
+- Verify write permissions on `./data/backups/` directory
+- Ensure sufficient disk space
+
+### Automatic Backups Not Running
+
+**Problem**: No automatic backups being created
+
+**Solutions**:
+1. Check if scheduler is enabled: `scheduler.get_status()`
+2. Check application logs for scheduler errors
+3. Ensure `schedule` library is installed: `pip install schedule`
+4. Verify scheduler was started in application startup
+
+---
+
+## Security Considerations
+
+1. **Access Control**: Restrict access to the Settings → Danger Zone to administrators only
+2. **Backup Storage**: Store backups in a secure location with proper permissions
+3. **Remote Cloning**: Use authentication tokens when cloning to remote servers
+4. **Data Sensitivity**: Remember that snapshots contain all database data - treat them with the same security as the live database
+
+---
+
+## File Locations
+
+- **Database**: `./data/seismo_fleet.db`
+- **Backups Directory**: `./data/backups/`
+- **Clone Script**: `./scripts/clone_db_to_dev.py`
+- **Backup Service**: `./backend/services/database_backup.py`
+- **Scheduler Service**: `./backend/services/backup_scheduler.py`
+
+---
+
+## Support
+
+For issues or questions:
+1. Check application logs in `./logs/`
+2. Review this documentation
+3. Test with a small database first
+4. Contact your system administrator
diff --git a/scripts/clone_db_to_dev.py b/scripts/clone_db_to_dev.py
new file mode 100755
index 0000000..e9394d8
--- /dev/null
+++ b/scripts/clone_db_to_dev.py
@@ -0,0 +1,149 @@
+#!/usr/bin/env python3
+"""
+Clone Production Database to Dev Server
+Helper script to clone the production database to a remote development server
+"""
+
+import argparse
+import requests
+from pathlib import Path
+import sys
+
+# Add parent directory to path for imports
+sys.path.insert(0, str(Path(__file__).parent.parent))
+
+from backend.services.database_backup import DatabaseBackupService
+
+
+def clone_to_dev(remote_url: str, snapshot_filename: str = None, auth_token: str = None):
+    """Clone database to remote dev server"""
+
+    backup_service = DatabaseBackupService()
+
+    print(f"🔄 Cloning database to {remote_url}...")
+
+    try:
+        # If no snapshot specified, create a new one
+        if snapshot_filename:
+            print(f"📦 Using existing snapshot: {snapshot_filename}")
+            snapshot_path = backup_service.backups_dir / snapshot_filename
+            if not snapshot_path.exists():
+                print(f"❌ Error: Snapshot {snapshot_filename} not found")
+                return False
+        else:
+            print("📸 Creating new snapshot...")
+            snapshot_info = backup_service.create_snapshot(description="Clone to dev server")
+            snapshot_filename = snapshot_info["filename"]
+            snapshot_path = backup_service.backups_dir / snapshot_filename
+            print(f"✅ Snapshot created: {snapshot_filename} ({snapshot_info['size_mb']} MB)")
+
+        # Upload to remote server
+        print(f"📤 Uploading to {remote_url}...")
+
+        headers = {}
+        if auth_token:
+            headers["Authorization"] = f"Bearer {auth_token}"
+
+        with open(snapshot_path, 'rb') as f:
+            files = {'file': (snapshot_filename, f, 'application/x-sqlite3')}
+
+            response = requests.post(
+                f"{remote_url.rstrip('/')}/api/settings/database/upload-snapshot",
+                files=files,
+                headers=headers,
+                timeout=300
+            )
+
+            response.raise_for_status()
+            result = response.json()
+
+            print(f"✅ Upload successful!")
+            print(f"   Remote filename: {result['snapshot']['filename']}")
+            print(f"   Size: {result['snapshot']['size_mb']} MB")
+
+            # Now restore on remote server
+            print("🔄 Restoring on remote server...")
+            restore_response = requests.post(
+                f"{remote_url.rstrip('/')}/api/settings/database/restore",
+                json={
+                    "filename": result['snapshot']['filename'],
+                    "create_backup": True
+                },
+                headers=headers,
+                timeout=60
+            )
+
+            restore_response.raise_for_status()
+            restore_result = restore_response.json()
+
+            print(f"✅ Database cloned successfully!")
+            print(f"   Restored from: {restore_result['restored_from']}")
+            print(f"   Remote backup created: {restore_result.get('backup_created', 'N/A')}")
+
+            return True
+
+    except requests.exceptions.RequestException as e:
+        print(f"❌ Network error: {str(e)}")
+        return False
+    except Exception as e:
+        print(f"❌ Error: {str(e)}")
+        return False
+
+
+def main():
+    parser = argparse.ArgumentParser(
+        description="Clone production database to development server",
+        formatter_class=argparse.RawDescriptionHelpFormatter,
+        epilog="""
+Examples:
+  # Clone current database to dev server
+  python clone_db_to_dev.py --url https://dev.example.com
+
+  # Clone using existing snapshot
+  python clone_db_to_dev.py --url https://dev.example.com --snapshot snapshot_20250101_120000.db
+
+  # Clone with authentication
+  python clone_db_to_dev.py --url https://dev.example.com --token YOUR_TOKEN
+        """
+    )
+
+    parser.add_argument(
+        '--url',
+        required=True,
+        help='Remote dev server URL (e.g., https://dev.example.com)'
+    )
+
+    parser.add_argument(
+        '--snapshot',
+        help='Use existing snapshot instead of creating new one'
+    )
+
+    parser.add_argument(
+        '--token',
+        help='Authentication token for remote server'
+    )
+
+    args = parser.parse_args()
+
+    print("=" * 60)
+    print("  Database Cloning Tool - Production to Dev")
+    print("=" * 60)
+    print()
+
+    success = clone_to_dev(
+        remote_url=args.url,
+        snapshot_filename=args.snapshot,
+        auth_token=args.token
+    )
+
+    print()
+    if success:
+        print("🎉 Cloning completed successfully!")
+        sys.exit(0)
+    else:
+        print("💥 Cloning failed")
+        sys.exit(1)
+
+
+if __name__ == "__main__":
+    main()
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 5bb86ec..6fdb27d 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -116,28 +116,28 @@
             </div>
         </div>
 
-        <!-- Recent Photos Card -->
-        <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6" 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-lg font-semibold text-gray-900 dark:text-white">Recent Photos</h2>
+        <!-- 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="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">
+                              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-photos-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <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="text-center text-gray-500 dark:text-gray-400 card-content" id="recent-photos-content">
-                <svg class="w-16 h-16 mx-auto mb-2 opacity-50" 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>
-                <p class="text-sm">No recent photos</p>
+            <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>
 
@@ -295,7 +295,7 @@ function toggleCard(cardName) {
 // Restore card states from localStorage on page load
 function restoreCardStates() {
     const cardStates = JSON.parse(localStorage.getItem('dashboardCardStates') || '{}');
-    const cardNames = ['fleet-summary', 'recent-alerts', 'recent-photos', 'fleet-map', 'fleet-status'];
+    const cardNames = ['fleet-summary', 'recent-alerts', 'recent-callins', 'fleet-map', 'fleet-status'];
 
     cardNames.forEach(cardName => {
         const content = document.getElementById(`${cardName}-content`);
@@ -531,6 +531,90 @@ async function loadRecentPhotos() {
 // 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 %}
diff --git a/templates/settings.html b/templates/settings.html
index 8602236..407f6c3 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -401,6 +401,99 @@
                 </button>
             </div>
         </div>
+
+        <!-- DATABASE MANAGEMENT SECTION -->
+        <div class="mt-8 mb-4">
+            <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Database Management</h2>
+            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Create snapshots, restore backups, and manage database files</p>
+        </div>
+
+        <!-- Database Statistics -->
+        <div class="border-2 border-blue-300 dark:border-blue-800 rounded-lg p-6 bg-white dark:bg-slate-800">
+            <h3 class="font-semibold text-blue-600 dark:text-blue-400 text-lg mb-3">Database Statistics</h3>
+            <div id="dbStatsLoading" class="text-center py-4">
+                <div class="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
+            </div>
+            <div id="dbStatsContent" class="hidden">
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+                    <div>
+                        <p class="text-gray-500 dark:text-gray-400">Database Size</p>
+                        <p id="dbSize" class="text-lg font-semibold text-gray-900 dark:text-white">-</p>
+                    </div>
+                    <div>
+                        <p class="text-gray-500 dark:text-gray-400">Total Rows</p>
+                        <p id="dbRows" class="text-lg font-semibold text-gray-900 dark:text-white">-</p>
+                    </div>
+                    <div>
+                        <p class="text-gray-500 dark:text-gray-400">Last Modified</p>
+                        <p id="dbModified" class="text-lg font-semibold text-gray-900 dark:text-white">-</p>
+                    </div>
+                    <div>
+                        <p class="text-gray-500 dark:text-gray-400">Snapshots</p>
+                        <p id="dbSnapshotCount" class="text-lg font-semibold text-gray-900 dark:text-white">-</p>
+                    </div>
+                </div>
+            </div>
+            <button onclick="loadDatabaseStats()" class="mt-4 px-4 py-2 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors text-sm">
+                Refresh Stats
+            </button>
+        </div>
+
+        <!-- Create Snapshot -->
+        <div class="border border-green-200 dark:border-green-800 rounded-lg p-6 bg-white dark:bg-slate-800">
+            <div class="flex justify-between items-start">
+                <div class="flex-1">
+                    <h3 class="font-semibold text-green-600 dark:text-green-400">Create Database Snapshot</h3>
+                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                        Create a full backup of the current database state
+                    </p>
+                </div>
+                <button onclick="createSnapshot()" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors whitespace-nowrap">
+                    Create Snapshot
+                </button>
+            </div>
+        </div>
+
+        <!-- Snapshots List -->
+        <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-6 bg-white dark:bg-slate-800">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="font-semibold text-gray-900 dark:text-white">Available Snapshots</h3>
+                <button onclick="loadSnapshots()" class="px-3 py-1 text-sm text-seismo-orange hover:bg-orange-50 dark:hover:bg-orange-900/20 rounded transition-colors">
+                    Refresh
+                </button>
+            </div>
+
+            <div id="snapshotsLoading" class="text-center py-4">
+                <div class="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-seismo-orange"></div>
+            </div>
+
+            <div id="snapshotsList" class="hidden space-y-2">
+                <!-- Snapshots will be inserted here -->
+            </div>
+
+            <div id="snapshotsEmpty" class="hidden text-center py-8 text-gray-500 dark:text-gray-400">
+                <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="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
+                </svg>
+                <p class="mt-2">No snapshots found</p>
+                <p class="text-sm">Create your first snapshot above</p>
+            </div>
+        </div>
+
+        <!-- Upload Snapshot -->
+        <div class="border border-purple-200 dark:border-purple-800 rounded-lg p-6 bg-white dark:bg-slate-800">
+            <h3 class="font-semibold text-purple-600 dark:text-purple-400 mb-2">Upload Snapshot</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                Upload a database snapshot file from another server
+            </p>
+            <form id="uploadSnapshotForm" class="space-y-3">
+                <input type="file" accept=".db" id="snapshotFileInput" class="block w-full text-sm text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer bg-gray-50 dark:bg-slate-700">
+                <button type="submit" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors">
+                    Upload Snapshot
+                </button>
+            </form>
+            <div id="uploadResult" class="hidden mt-3"></div>
+        </div>
     </div>
 </div>
 
@@ -1004,5 +1097,263 @@ async function confirmClearIgnored() {
         alert('❌ Error: ' + error.message);
     }
 }
+
+// ========== DATABASE MANAGEMENT ==========
+
+async function loadDatabaseStats() {
+    const loading = document.getElementById('dbStatsLoading');
+    const content = document.getElementById('dbStatsContent');
+
+    try {
+        loading.classList.remove('hidden');
+        content.classList.add('hidden');
+
+        const response = await fetch('/api/settings/database/stats');
+        const stats = await response.json();
+
+        // Update stats display
+        document.getElementById('dbSize').textContent = stats.size_mb + ' MB';
+        document.getElementById('dbRows').textContent = stats.total_rows.toLocaleString();
+
+        const lastMod = new Date(stats.last_modified);
+        document.getElementById('dbModified').textContent = lastMod.toLocaleDateString();
+
+        // Load snapshot count
+        const snapshotsResp = await fetch('/api/settings/database/snapshots');
+        const snapshotsData = await snapshotsResp.json();
+        document.getElementById('dbSnapshotCount').textContent = snapshotsData.count;
+
+        loading.classList.add('hidden');
+        content.classList.remove('hidden');
+    } catch (error) {
+        loading.classList.add('hidden');
+        alert('Error loading database stats: ' + error.message);
+    }
+}
+
+async function createSnapshot() {
+    const description = prompt('Enter a description for this snapshot (optional):');
+
+    try {
+        const response = await fetch('/api/settings/database/snapshot', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ description: description || null })
+        });
+
+        const result = await response.json();
+
+        if (response.ok) {
+            alert(`✅ Snapshot created successfully!\n\nFilename: ${result.snapshot.filename}\nSize: ${result.snapshot.size_mb} MB`);
+            loadSnapshots();
+            loadDatabaseStats();
+        } else {
+            alert('❌ Error: ' + (result.detail || 'Unknown error'));
+        }
+    } catch (error) {
+        alert('❌ Error: ' + error.message);
+    }
+}
+
+async function loadSnapshots() {
+    const loading = document.getElementById('snapshotsLoading');
+    const list = document.getElementById('snapshotsList');
+    const empty = document.getElementById('snapshotsEmpty');
+
+    try {
+        loading.classList.remove('hidden');
+        list.classList.add('hidden');
+        empty.classList.add('hidden');
+
+        const response = await fetch('/api/settings/database/snapshots');
+        const data = await response.json();
+
+        if (data.snapshots.length === 0) {
+            loading.classList.add('hidden');
+            empty.classList.remove('hidden');
+            return;
+        }
+
+        list.innerHTML = data.snapshots.map(snapshot => createSnapshotCard(snapshot)).join('');
+
+        loading.classList.add('hidden');
+        list.classList.remove('hidden');
+    } catch (error) {
+        loading.classList.add('hidden');
+        alert('Error loading snapshots: ' + error.message);
+    }
+}
+
+function createSnapshotCard(snapshot) {
+    const createdDate = new Date(snapshot.created_at_iso);
+    const dateStr = createdDate.toLocaleString();
+
+    return `
+        <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-gray-50 dark:bg-gray-700/50">
+            <div class="flex justify-between items-start">
+                <div class="flex-1">
+                    <div class="flex items-center gap-2">
+                        <h4 class="font-medium text-gray-900 dark:text-white">${snapshot.filename}</h4>
+                        <span class="text-xs px-2 py-1 rounded ${snapshot.type === 'manual' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300' : 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300'}">
+                            ${snapshot.type}
+                        </span>
+                    </div>
+                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">${snapshot.description}</p>
+                    <div class="flex gap-4 mt-2 text-xs text-gray-500 dark:text-gray-400">
+                        <span>📅 ${dateStr}</span>
+                        <span>💾 ${snapshot.size_mb} MB</span>
+                    </div>
+                </div>
+                <div class="flex gap-2 ml-4">
+                    <button onclick="downloadSnapshot('${snapshot.filename}')"
+                        class="p-2 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors text-blue-600 dark:text-blue-400"
+                        title="Download">
+                        <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
+                        </svg>
+                    </button>
+                    <button onclick="restoreSnapshot('${snapshot.filename}')"
+                        class="p-2 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors text-green-600 dark:text-green-400"
+                        title="Restore">
+                        <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="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>
+                    </button>
+                    <button onclick="deleteSnapshot('${snapshot.filename}')"
+                        class="p-2 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors text-red-600 dark:text-red-400"
+                        title="Delete">
+                        <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="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>
+            </div>
+        </div>
+    `;
+}
+
+function downloadSnapshot(filename) {
+    window.location.href = `/api/settings/database/snapshot/${filename}`;
+}
+
+async function restoreSnapshot(filename) {
+    const confirmMsg = `⚠️ RESTORE DATABASE WARNING ⚠️
+
+This will REPLACE the current database with snapshot:
+${filename}
+
+A backup of the current database will be created automatically before restoring.
+
+THIS ACTION WILL RESTART THE APPLICATION!
+
+Continue?`;
+
+    if (!confirm(confirmMsg)) {
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/settings/database/restore', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                filename: filename,
+                create_backup: true
+            })
+        });
+
+        const result = await response.json();
+
+        if (response.ok) {
+            alert(`✅ Database restored successfully!\n\nRestored from: ${result.restored_from}\nBackup created: ${result.backup_created}\n\nThe page will now reload.`);
+            location.reload();
+        } else {
+            alert('❌ Error: ' + (result.detail || 'Unknown error'));
+        }
+    } catch (error) {
+        alert('❌ Error: ' + error.message);
+    }
+}
+
+async function deleteSnapshot(filename) {
+    if (!confirm(`Delete snapshot ${filename}?\n\nThis cannot be undone.`)) {
+        return;
+    }
+
+    try {
+        const response = await fetch(`/api/settings/database/snapshot/${filename}`, {
+            method: 'DELETE'
+        });
+
+        const result = await response.json();
+
+        if (response.ok) {
+            alert(`✅ Snapshot deleted: ${filename}`);
+            loadSnapshots();
+            loadDatabaseStats();
+        } else {
+            alert('❌ Error: ' + (result.detail || 'Unknown error'));
+        }
+    } catch (error) {
+        alert('❌ Error: ' + error.message);
+    }
+}
+
+// Upload snapshot form handler
+document.getElementById('uploadSnapshotForm').addEventListener('submit', async function(e) {
+    e.preventDefault();
+
+    const fileInput = document.getElementById('snapshotFileInput');
+    const resultDiv = document.getElementById('uploadResult');
+
+    if (!fileInput.files[0]) {
+        alert('Please select a file');
+        return;
+    }
+
+    const formData = new FormData();
+    formData.append('file', fileInput.files[0]);
+
+    try {
+        const response = await fetch('/api/settings/database/upload-snapshot', {
+            method: 'POST',
+            body: formData
+        });
+
+        const result = await response.json();
+
+        if (response.ok) {
+            resultDiv.className = 'mt-3 p-3 rounded-lg bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200';
+            resultDiv.innerHTML = `✅ Uploaded: ${result.snapshot.filename} (${result.snapshot.size_mb} MB)`;
+            resultDiv.classList.remove('hidden');
+
+            fileInput.value = '';
+            loadSnapshots();
+            loadDatabaseStats();
+
+            setTimeout(() => {
+                resultDiv.classList.add('hidden');
+            }, 5000);
+        } else {
+            resultDiv.className = 'mt-3 p-3 rounded-lg bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200';
+            resultDiv.innerHTML = `❌ Error: ${result.detail || 'Unknown error'}`;
+            resultDiv.classList.remove('hidden');
+        }
+    } catch (error) {
+        resultDiv.className = 'mt-3 p-3 rounded-lg bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200';
+        resultDiv.innerHTML = `❌ Error: ${error.message}`;
+        resultDiv.classList.remove('hidden');
+    }
+});
+
+// Load database stats and snapshots when danger zone tab is shown
+const originalShowTab = showTab;
+showTab = function(tabName) {
+    originalShowTab(tabName);
+    if (tabName === 'danger') {
+        loadDatabaseStats();
+        loadSnapshots();
+    }
+};
 </script>
 {% endblock %}
-- 
2.49.1


From 7c89d203d71a5d26920195036ef6fd07fe70228a Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Tue, 16 Dec 2025 20:05:49 +0000
Subject: [PATCH 23/29] renamed datamanagement to roster management

---
 templates/settings.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/settings.html b/templates/settings.html
index 407f6c3..ee7f250 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -20,7 +20,7 @@
         <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
         </svg>
-        Data Management
+        Roster Management
     </button>
     <button class="settings-tab" data-tab="advanced" onclick="showTab('advanced')">
         <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-- 
2.49.1


From 7d17d355a73e5453cd3015e12a9350d1ff2d3763 Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Tue, 16 Dec 2025 20:23:55 +0000
Subject: [PATCH 24/29] settings oragnized, DB management system fixes

---
 .../snapshot_20251216_201738.db.meta.json     |  10 +
 ...shot_uploaded_20251216_201732.db.meta.json |   9 +
 templates/settings.html                       | 245 ++++++++++--------
 3 files changed, 150 insertions(+), 114 deletions(-)
 create mode 100644 data-dev/backups/snapshot_20251216_201738.db.meta.json
 create mode 100644 data-dev/backups/snapshot_uploaded_20251216_201732.db.meta.json

diff --git a/data-dev/backups/snapshot_20251216_201738.db.meta.json b/data-dev/backups/snapshot_20251216_201738.db.meta.json
new file mode 100644
index 0000000..1d25dc1
--- /dev/null
+++ b/data-dev/backups/snapshot_20251216_201738.db.meta.json
@@ -0,0 +1,10 @@
+{
+  "filename": "snapshot_20251216_201738.db",
+  "created_at": "20251216_201738",
+  "created_at_iso": "2025-12-16T20:17:38.638982",
+  "description": "Auto-backup before restore",
+  "size_bytes": 57344,
+  "size_mb": 0.05,
+  "original_db_size_bytes": 57344,
+  "type": "manual"
+}
\ No newline at end of file
diff --git a/data-dev/backups/snapshot_uploaded_20251216_201732.db.meta.json b/data-dev/backups/snapshot_uploaded_20251216_201732.db.meta.json
new file mode 100644
index 0000000..257cc02
--- /dev/null
+++ b/data-dev/backups/snapshot_uploaded_20251216_201732.db.meta.json
@@ -0,0 +1,9 @@
+{
+  "filename": "snapshot_uploaded_20251216_201732.db",
+  "created_at": "20251216_201732",
+  "created_at_iso": "2025-12-16T20:17:32.574205",
+  "description": "Uploaded: snapshot_20251216_200259.db",
+  "size_bytes": 77824,
+  "size_mb": 0.07,
+  "type": "uploaded"
+}
\ No newline at end of file
diff --git a/templates/settings.html b/templates/settings.html
index ee7f250..12a4d2f 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -22,6 +22,12 @@
         </svg>
         Roster Management
     </button>
+    <button class="settings-tab" data-tab="database" onclick="showTab('database')">
+        <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path>
+        </svg>
+        Database
+    </button>
     <button class="settings-tab" data-tab="advanced" onclick="showTab('advanced')">
         <svg class="w-4 h-4 inline-block mr-1" 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>
@@ -214,30 +220,24 @@
                 <p class="text-gray-600 dark:text-gray-400 mt-2">No roster units found</p>
             </div>
         </div>
-    </div>
-</div>
-
-<!-- Advanced Tab -->
-<div id="advanced-tab" class="tab-content hidden">
-    <div class="space-y-6">
-        <!-- Warning Banner -->
-        <div class="bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-500 p-4">
-            <div class="flex">
-                <svg class="w-5 h-5 text-yellow-500 mr-2 flex-shrink-0" 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>
-                    <p class="font-semibold text-yellow-800 dark:text-yellow-300">Advanced Settings</p>
-                    <p class="text-sm text-yellow-700 dark:text-yellow-400 mt-1">These settings can affect system behavior. Change with caution.</p>
-                </div>
-            </div>
-        </div>
 
         <!-- CSV Import - Replace Mode -->
         <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 border-2 border-yellow-200 dark:border-yellow-800">
+            <div class="bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-500 p-4 mb-4">
+                <div class="flex">
+                    <svg class="w-5 h-5 text-yellow-500 mr-2 flex-shrink-0" 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>
+                        <p class="font-semibold text-yellow-800 dark:text-yellow-300">Replace Mode Warning</p>
+                        <p class="text-sm text-yellow-700 dark:text-yellow-400 mt-1">This will DELETE all existing roster units before importing.</p>
+                    </div>
+                </div>
+            </div>
+
             <h2 class="text-xl font-semibold text-yellow-800 dark:text-yellow-300 mb-2">CSV Import - Replace Mode</h2>
             <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
-                This will DELETE all existing roster units before importing.
+                Use this to completely replace your roster with a CSV file. All existing roster data will be deleted first.
             </p>
 
             <form id="importReplaceForm" class="space-y-4">
@@ -257,6 +257,116 @@
                 </button>
             </form>
         </div>
+    </div>
+</div>
+
+<!-- Database Tab -->
+<div id="database-tab" class="tab-content hidden">
+    <div class="space-y-6">
+        <!-- Database Statistics -->
+        <div class="border-2 border-blue-300 dark:border-blue-800 rounded-lg p-6 bg-white dark:bg-slate-800">
+            <h3 class="font-semibold text-blue-600 dark:text-blue-400 text-lg mb-3">Database Statistics</h3>
+            <div id="dbStatsLoading" class="text-center py-4">
+                <div class="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
+            </div>
+            <div id="dbStatsContent" class="hidden">
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+                    <div>
+                        <p class="text-gray-500 dark:text-gray-400">Database Size</p>
+                        <p id="dbSize" class="text-lg font-semibold text-gray-900 dark:text-white">-</p>
+                    </div>
+                    <div>
+                        <p class="text-gray-500 dark:text-gray-400">Total Rows</p>
+                        <p id="dbRows" class="text-lg font-semibold text-gray-900 dark:text-white">-</p>
+                    </div>
+                    <div>
+                        <p class="text-gray-500 dark:text-gray-400">Last Modified</p>
+                        <p id="dbModified" class="text-lg font-semibold text-gray-900 dark:text-white">-</p>
+                    </div>
+                    <div>
+                        <p class="text-gray-500 dark:text-gray-400">Snapshots</p>
+                        <p id="dbSnapshotCount" class="text-lg font-semibold text-gray-900 dark:text-white">-</p>
+                    </div>
+                </div>
+            </div>
+            <button onclick="loadDatabaseStats()" class="mt-4 px-4 py-2 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors text-sm">
+                Refresh Stats
+            </button>
+        </div>
+
+        <!-- Create Snapshot -->
+        <div class="border border-green-200 dark:border-green-800 rounded-lg p-6 bg-white dark:bg-slate-800">
+            <div class="flex justify-between items-start">
+                <div class="flex-1">
+                    <h3 class="font-semibold text-green-600 dark:text-green-400">Create Database Snapshot</h3>
+                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                        Create a full backup of the current database state
+                    </p>
+                </div>
+                <button onclick="createSnapshot()" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors whitespace-nowrap">
+                    Create Snapshot
+                </button>
+            </div>
+        </div>
+
+        <!-- Snapshots List -->
+        <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-6 bg-white dark:bg-slate-800">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="font-semibold text-gray-900 dark:text-white">Available Snapshots</h3>
+                <button onclick="loadSnapshots()" class="px-3 py-1 text-sm text-seismo-orange hover:bg-orange-50 dark:hover:bg-orange-900/20 rounded transition-colors">
+                    Refresh
+                </button>
+            </div>
+
+            <div id="snapshotsLoading" class="text-center py-4">
+                <div class="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-seismo-orange"></div>
+            </div>
+
+            <div id="snapshotsList" class="hidden space-y-2">
+                <!-- Snapshots will be inserted here -->
+            </div>
+
+            <div id="snapshotsEmpty" class="hidden text-center py-8 text-gray-500 dark:text-gray-400">
+                <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="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
+                </svg>
+                <p class="mt-2">No snapshots found</p>
+                <p class="text-sm">Create your first snapshot above</p>
+            </div>
+        </div>
+
+        <!-- Upload Snapshot -->
+        <div class="border border-purple-200 dark:border-purple-800 rounded-lg p-6 bg-white dark:bg-slate-800">
+            <h3 class="font-semibold text-purple-600 dark:text-purple-400 mb-2">Upload Snapshot</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                Upload a database snapshot file from another server
+            </p>
+            <form id="uploadSnapshotForm" class="space-y-3">
+                <input type="file" accept=".db" id="snapshotFileInput" class="block w-full text-sm text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer bg-gray-50 dark:bg-slate-700">
+                <button type="submit" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors">
+                    Upload Snapshot
+                </button>
+            </form>
+            <div id="uploadResult" class="hidden mt-3"></div>
+        </div>
+    </div>
+</div>
+
+<!-- Advanced Tab -->
+<div id="advanced-tab" class="tab-content hidden">
+    <div class="space-y-6">
+        <!-- Warning Banner -->
+        <div class="bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-500 p-4">
+            <div class="flex">
+                <svg class="w-5 h-5 text-yellow-500 mr-2 flex-shrink-0" 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>
+                    <p class="font-semibold text-yellow-800 dark:text-yellow-300">Advanced Settings</p>
+                    <p class="text-sm text-yellow-700 dark:text-yellow-400 mt-1">These settings can affect system behavior. Change with caution.</p>
+                </div>
+            </div>
+        </div>
 
         <!-- Status Thresholds -->
         <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
@@ -401,99 +511,6 @@
                 </button>
             </div>
         </div>
-
-        <!-- DATABASE MANAGEMENT SECTION -->
-        <div class="mt-8 mb-4">
-            <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Database Management</h2>
-            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Create snapshots, restore backups, and manage database files</p>
-        </div>
-
-        <!-- Database Statistics -->
-        <div class="border-2 border-blue-300 dark:border-blue-800 rounded-lg p-6 bg-white dark:bg-slate-800">
-            <h3 class="font-semibold text-blue-600 dark:text-blue-400 text-lg mb-3">Database Statistics</h3>
-            <div id="dbStatsLoading" class="text-center py-4">
-                <div class="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
-            </div>
-            <div id="dbStatsContent" class="hidden">
-                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-                    <div>
-                        <p class="text-gray-500 dark:text-gray-400">Database Size</p>
-                        <p id="dbSize" class="text-lg font-semibold text-gray-900 dark:text-white">-</p>
-                    </div>
-                    <div>
-                        <p class="text-gray-500 dark:text-gray-400">Total Rows</p>
-                        <p id="dbRows" class="text-lg font-semibold text-gray-900 dark:text-white">-</p>
-                    </div>
-                    <div>
-                        <p class="text-gray-500 dark:text-gray-400">Last Modified</p>
-                        <p id="dbModified" class="text-lg font-semibold text-gray-900 dark:text-white">-</p>
-                    </div>
-                    <div>
-                        <p class="text-gray-500 dark:text-gray-400">Snapshots</p>
-                        <p id="dbSnapshotCount" class="text-lg font-semibold text-gray-900 dark:text-white">-</p>
-                    </div>
-                </div>
-            </div>
-            <button onclick="loadDatabaseStats()" class="mt-4 px-4 py-2 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors text-sm">
-                Refresh Stats
-            </button>
-        </div>
-
-        <!-- Create Snapshot -->
-        <div class="border border-green-200 dark:border-green-800 rounded-lg p-6 bg-white dark:bg-slate-800">
-            <div class="flex justify-between items-start">
-                <div class="flex-1">
-                    <h3 class="font-semibold text-green-600 dark:text-green-400">Create Database Snapshot</h3>
-                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
-                        Create a full backup of the current database state
-                    </p>
-                </div>
-                <button onclick="createSnapshot()" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors whitespace-nowrap">
-                    Create Snapshot
-                </button>
-            </div>
-        </div>
-
-        <!-- Snapshots List -->
-        <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-6 bg-white dark:bg-slate-800">
-            <div class="flex justify-between items-center mb-4">
-                <h3 class="font-semibold text-gray-900 dark:text-white">Available Snapshots</h3>
-                <button onclick="loadSnapshots()" class="px-3 py-1 text-sm text-seismo-orange hover:bg-orange-50 dark:hover:bg-orange-900/20 rounded transition-colors">
-                    Refresh
-                </button>
-            </div>
-
-            <div id="snapshotsLoading" class="text-center py-4">
-                <div class="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-seismo-orange"></div>
-            </div>
-
-            <div id="snapshotsList" class="hidden space-y-2">
-                <!-- Snapshots will be inserted here -->
-            </div>
-
-            <div id="snapshotsEmpty" class="hidden text-center py-8 text-gray-500 dark:text-gray-400">
-                <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="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
-                </svg>
-                <p class="mt-2">No snapshots found</p>
-                <p class="text-sm">Create your first snapshot above</p>
-            </div>
-        </div>
-
-        <!-- Upload Snapshot -->
-        <div class="border border-purple-200 dark:border-purple-800 rounded-lg p-6 bg-white dark:bg-slate-800">
-            <h3 class="font-semibold text-purple-600 dark:text-purple-400 mb-2">Upload Snapshot</h3>
-            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
-                Upload a database snapshot file from another server
-            </p>
-            <form id="uploadSnapshotForm" class="space-y-3">
-                <input type="file" accept=".db" id="snapshotFileInput" class="block w-full text-sm text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer bg-gray-50 dark:bg-slate-700">
-                <button type="submit" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors">
-                    Upload Snapshot
-                </button>
-            </form>
-            <div id="uploadResult" class="hidden mt-3"></div>
-        </div>
     </div>
 </div>
 
@@ -1346,11 +1363,11 @@ document.getElementById('uploadSnapshotForm').addEventListener('submit', async f
     }
 });
 
-// Load database stats and snapshots when danger zone tab is shown
+// Load database stats and snapshots when database tab is shown
 const originalShowTab = showTab;
 showTab = function(tabName) {
     originalShowTab(tabName);
-    if (tabName === 'danger') {
+    if (tabName === 'database') {
         loadDatabaseStats();
         loadSnapshots();
     }
-- 
2.49.1


From 2d22d0d3290087b862e9d16403dd28014dfa5830 Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Tue, 16 Dec 2025 20:39:56 +0000
Subject: [PATCH 25/29] docs updated to v0.4.0

---
 CHANGELOG.md        | 63 +++++++++++++++++++++++++++++++++++++++++++++
 README.md           | 47 ++++++++++++++++++++++++++++-----
 backend/main.py     |  2 +-
 templates/base.html |  4 +--
 4 files changed, 107 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1eb567f..99ff90c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,68 @@ All notable changes to Seismo Fleet Manager will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.4.0] - 2025-12-16
+
+### Added
+- **Database Management System**: Comprehensive backup and restore capabilities
+  - **Manual Snapshots**: Create on-demand backups of the entire database with optional descriptions
+  - **Restore from Snapshot**: Restore database from any snapshot with automatic safety backup
+  - **Upload/Download Snapshots**: Transfer database snapshots to/from the server
+  - **Database Tab**: New dedicated tab in Settings for all database management operations
+  - **Database Statistics**: View database size, row counts by table, and last modified time
+  - **Snapshot Metadata**: Each snapshot includes creation time, description, size, and type (manual/automatic)
+  - **Safety Backups**: Automatic backup created before any restore operation
+- **Remote Database Cloning**: Dev tools for cloning production database to remote development servers
+  - **Clone Script**: `scripts/clone_db_to_dev.py` for copying database over WAN
+  - **Network Upload**: Upload snapshots via HTTP to remote servers
+  - **Auto-restore**: Automatically restore uploaded database on target server
+  - **Authentication Support**: Optional token-based authentication for secure transfers
+- **Automatic Backup Scheduler**: Background service for automated database backups
+  - **Configurable Intervals**: Set backup frequency (default: 24 hours)
+  - **Retention Management**: Automatically delete old backups (configurable keep count)
+  - **Manual Trigger**: Force immediate backup via API
+  - **Status Monitoring**: Check scheduler status and next scheduled run time
+  - **Background Thread**: Non-blocking operation using Python threading
+- **Settings Reorganization**: Improved tab structure for better organization
+  - Renamed "Data Management" tab to "Roster Management"
+  - Moved CSV Replace Mode from Advanced tab to Roster Management tab
+  - Created dedicated Database tab for all backup/restore operations
+- **Comprehensive Documentation**: New `docs/DATABASE_MANAGEMENT.md` guide covering:
+  - Manual snapshot creation and restoration workflows
+  - Download/upload procedures for off-site backups
+  - Remote database cloning setup and usage
+  - Automatic backup configuration and integration
+  - API reference for all database endpoints
+  - Best practices and troubleshooting guide
+
+### Changed
+- **Settings Tab Organization**: Restructured for better logical grouping
+  - **General**: Display preferences (timezone, theme, auto-refresh)
+  - **Roster Management**: CSV operations and roster table (now includes Replace Mode)
+  - **Database**: All backup/restore operations (NEW)
+  - **Advanced**: Power user settings (calibration, thresholds)
+  - **Danger Zone**: Destructive operations
+- CSV Replace Mode warnings enhanced and moved to Roster Management context
+
+### Technical Details
+- **SQLite Backup API**: Uses native SQLite backup API for concurrent-safe snapshots
+- **Metadata Tracking**: JSON sidecar files store snapshot metadata alongside database files
+- **Atomic Operations**: Database restoration is atomic with automatic rollback on failure
+- **File Structure**: Snapshots stored in `./data/backups/` with timestamped filenames
+- **API Endpoints**: 7 new endpoints for database management operations
+- **Backup Service**: `backend/services/database_backup.py` - Core backup/restore logic
+- **Scheduler Service**: `backend/services/backup_scheduler.py` - Automatic backup automation
+- **Clone Utility**: `scripts/clone_db_to_dev.py` - Remote database synchronization tool
+
+### Security Considerations
+- Snapshots contain full database data and should be secured appropriately
+- Remote cloning supports optional authentication tokens
+- Restore operations require safety backup creation by default
+- All destructive operations remain in Danger Zone with warnings
+
+### Migration Notes
+No database migration required for v0.4.0. All new features use existing database structure and add new backup management capabilities without modifying the core schema.
+
 ## [0.3.3] - 2025-12-12
 
 ### Changed
@@ -231,6 +293,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Photo management per unit
 - Automated status categorization (OK/Pending/Missing)
 
+[0.4.0]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.3.3...v0.4.0
 [0.3.3]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.3.2...v0.3.3
 [0.3.2]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.3.1...v0.3.2
 [0.3.1]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.3.0...v0.3.1
diff --git a/README.md b/README.md
index e34142d..3451713 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Seismo Fleet Manager v0.3.3
+# Seismo Fleet Manager v0.4.0
 Backend API and HTMX-powered web interface for managing a mixed fleet of seismographs and field modems. Track deployments, monitor health in real time, merge roster intent with incoming telemetry, and control your fleet through a unified database and dashboard.
 
 ## Features
@@ -19,6 +19,12 @@ Backend API and HTMX-powered web interface for managing a mixed fleet of seismog
 - **Photo Management**: Upload and view photos for each unit
 - **Interactive Maps**: Leaflet-based maps showing unit locations with tap-to-navigate for mobile
 - **SQLite Storage**: Lightweight, file-based database for easy deployment
+- **Database Management**: Comprehensive backup and restore system
+  - **Manual Snapshots**: Create on-demand backups with descriptions
+  - **Restore from Snapshot**: Restore database with automatic safety backups
+  - **Upload/Download**: Transfer database snapshots for off-site storage
+  - **Remote Cloning**: Copy production database to remote dev servers over WAN
+  - **Automatic Backups**: Scheduled background backups with configurable retention
 
 ## Roster Manager & Settings
 
@@ -26,10 +32,12 @@ Visit [`/settings`](http://localhost:8001/settings) to perform bulk roster opera
 
 - **CSV export/import**: Download the entire roster, merge updates, or replace all units in one transaction.
 - **Live roster table**: Fetch every unit via HTMX, edit metadata, toggle deployed/retired states, move emitters to the ignore list, or delete records in-place.
+- **Database backups**: Create snapshots, restore from backups, upload/download database files, view database statistics.
+- **Remote cloning**: Clone production database to remote development servers over the network (see `scripts/clone_db_to_dev.py`).
 - **Stats at a glance**: View counts for the roster, emitters, and ignored units to confirm import/cleanup operations worked.
 - **Danger zone controls**: Clear specific tables or wipe all fleet data when resetting a lab/demo environment.
 
-All UI actions call `GET/POST /api/settings/*` endpoints so you can automate the same workflows from scripts.
+All UI actions call `GET/POST /api/settings/*` endpoints so you can automate the same workflows from scripts. See [docs/DATABASE_MANAGEMENT.md](docs/DATABASE_MANAGEMENT.md) for comprehensive database backup and restore documentation.
 
 ## Tech Stack
 
@@ -180,6 +188,17 @@ Both migration scripts are idempotent—if the columns/tables already exist, the
 - **POST** `/api/settings/clear-emitters` - Delete auto-discovered emitters
 - **POST** `/api/settings/clear-ignored` - Reset ignore list
 
+### Database Management
+- **GET** `/api/settings/database/stats` - Database size, row counts, and last modified time
+- **POST** `/api/settings/database/snapshot` - Create manual database snapshot with optional description
+- **GET** `/api/settings/database/snapshots` - List all available snapshots with metadata
+- **GET** `/api/settings/database/snapshot/{filename}` - Download a specific snapshot file
+- **DELETE** `/api/settings/database/snapshot/{filename}` - Delete a snapshot
+- **POST** `/api/settings/database/restore` - Restore database from snapshot (creates safety backup)
+- **POST** `/api/settings/database/upload-snapshot` - Upload snapshot file to server
+
+See [docs/DATABASE_MANAGEMENT.md](docs/DATABASE_MANAGEMENT.md) for detailed documentation and examples.
+
 ### CSV Import Format
 Create a CSV file with the following columns (only `unit_id` is required, everything else is optional):
 
@@ -368,7 +387,9 @@ seismo-fleet-manager/
 │   │   ├── dashboard_tabs.py # Dashboard tab endpoints
 │   │   └── settings.py      # Settings, preferences, and data management
 │   ├── services/
-│   │   └── snapshot.py      # Fleet status snapshot logic
+│   │   ├── snapshot.py      # Fleet status snapshot logic
+│   │   ├── database_backup.py # Database backup and restore service
+│   │   └── backup_scheduler.py # Automatic backup scheduler
 │   ├── migrate_add_device_types.py # SQLite migration for v0.2 schema
 │   ├── migrate_add_user_preferences.py # SQLite migration for v0.3 schema
 │   └── static/              # Static assets (CSS, etc.)
@@ -385,6 +406,11 @@ seismo-fleet-manager/
 │       ├── ignored_table.html
 │       └── unknown_emitters.html
 ├── data/                    # SQLite database & photos (persisted)
+│   └── backups/             # Database snapshots directory
+├── scripts/
+│   └── clone_db_to_dev.py   # Remote database cloning utility
+├── docs/
+│   └── DATABASE_MANAGEMENT.md # Database backup/restore guide
 ├── requirements.txt         # Python dependencies
 ├── Dockerfile               # Docker container definition
 ├── docker-compose.yml       # Docker Compose configuration
@@ -437,6 +463,14 @@ docker compose down -v
 
 ## Release Highlights
 
+### v0.4.0 — 2025-12-16
+- **Database Management System**: Complete backup and restore functionality with manual snapshots, restore operations, and upload/download capabilities
+- **Remote Database Cloning**: New `clone_db_to_dev.py` script for copying production database to remote dev servers over WAN
+- **Automatic Backup Scheduler**: Background service for scheduled backups with configurable retention management
+- **Database Tab**: New dedicated tab in Settings for all database operations with real-time statistics
+- **Settings Reorganization**: Improved tab structure - renamed "Data Management" to "Roster Management", moved CSV Replace Mode, created Database tab
+- **Comprehensive Documentation**: New `docs/DATABASE_MANAGEMENT.md` with complete guide to backup/restore workflows, API reference, and best practices
+
 ### v0.3.3 — 2025-12-12
 - **Improved Mobile Navigation**: Hamburger menu moved to bottom nav bar (no more floating button covering content)
 - **Better Status Visibility**: Larger status dots (16px) in dashboard fleet overview for easier at-a-glance status checks
@@ -491,7 +525,6 @@ See [CHANGELOG.md](CHANGELOG.md) for the full release notes.
 - PostgreSQL support for larger deployments
 - Advanced filtering and search
 - Export roster to various formats
-- Automated backup and restore
 
 ## License
 
@@ -499,9 +532,11 @@ MIT
 
 ## Version
 
-**Current: 0.3.3** — Mobile navigation improvements and better status visibility (2025-12-12)
+**Current: 0.4.0** — Database management system with backup/restore and remote cloning (2025-12-16)
 
-Previous: 0.3.2 — Progressive Web App with mobile optimization (2025-12-12)
+Previous: 0.3.3 — Mobile navigation improvements and better status visibility (2025-12-12)
+
+0.3.2 — Progressive Web App with mobile optimization (2025-12-12)
 
 0.3.1 — Dashboard alerts and status fixes (2025-12-12)
 
diff --git a/backend/main.py b/backend/main.py
index 1c95686..575f7dc 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -20,7 +20,7 @@ Base.metadata.create_all(bind=engine)
 ENVIRONMENT = os.getenv("ENVIRONMENT", "production")
 
 # Initialize FastAPI app
-VERSION = "0.3.3"
+VERSION = "0.4.0"
 app = FastAPI(
     title="Seismo Fleet Manager",
     description="Backend API for managing seismograph fleet status",
diff --git a/templates/base.html b/templates/base.html
index a741902..90ce252 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -360,10 +360,10 @@
     </script>
 
     <!-- Offline Database -->
-    <script src="/static/offline-db.js?v=0.3.3"></script>
+    <script src="/static/offline-db.js?v=0.4.0"></script>
 
     <!-- Mobile JavaScript -->
-    <script src="/static/mobile.js?v=0.3.3"></script>
+    <script src="/static/mobile.js?v=0.4.0"></script>
 
     {% block extra_scripts %}{% endblock %}
 </body>
-- 
2.49.1


From ab9c650d93d11e9788ef5b3b1f63900b261a67de Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Tue, 16 Dec 2025 20:54:43 +0000
Subject: [PATCH 26/29] .dockerignore improve for deployment

---
 .dockerignore | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/.dockerignore b/.dockerignore
index e809327..7e67d4d 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,19 +1,39 @@
+# Python cache / compiled
 __pycache__
 *.pyc
 *.pyo
 *.pyd
 .Python
+
+# Build artifacts
 *.so
 *.egg
 *.egg-info
 dist
 build
+
+# VCS
 .git
 .gitignore
+
+# Databases (must live in volumes)
 *.db
 *.db-journal
+
+# Environment / virtualenv
 .env
 .venv
 venv/
 ENV/
+
+# Runtime data (mounted volumes)
 data/
+
+# Editors / OS junk
+.vscode/
+.idea/
+.DS_Store
+Thumbs.db
+
+# Tests (optional)
+tests/
-- 
2.49.1


From e78d252cf37c2e0ed367c895bc437e84660ed570 Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Tue, 16 Dec 2025 20:56:03 +0000
Subject: [PATCH 27/29] .dockerignore improve for deployment

---
 .dockerignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.dockerignore b/.dockerignore
index 7e67d4d..f26b729 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -34,6 +34,8 @@ data/
 .idea/
 .DS_Store
 Thumbs.db
+.claude
+sfm.code-workspace
 
 # Tests (optional)
 tests/
-- 
2.49.1


From dba4ad168cf2a5c22326da65921e382104726db3 Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Mon, 29 Dec 2025 19:18:53 +0000
Subject: [PATCH 28/29] refactor: clean up whitespace and improve formatting in
 emit_status_snapshot function

---
 backend/models.py            |  2 +-
 backend/services/snapshot.py | 25 ++++++++++++-------------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/backend/models.py b/backend/models.py
index bf3f32d..0b75631 100644
--- a/backend/models.py
+++ b/backend/models.py
@@ -94,4 +94,4 @@ class UserPreferences(Base):
     calibration_warning_days = Column(Integer, default=30)
     status_ok_threshold_hours = Column(Integer, default=12)
     status_pending_threshold_hours = Column(Integer, default=24)
-    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
\ No newline at end of file
+    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
diff --git a/backend/services/snapshot.py b/backend/services/snapshot.py
index b8805f0..7c737b7 100644
--- a/backend/services/snapshot.py
+++ b/backend/services/snapshot.py
@@ -40,7 +40,6 @@ def emit_status_snapshot():
         # --- Merge roster entries first ---
         for unit_id, r in roster.items():
             e = emitters.get(unit_id)
-
             if r.retired:
                 # Retired units get separated later
                 status = "Retired"
@@ -60,12 +59,12 @@ def emit_status_snapshot():
                     age = "N/A"
                     fname = ""
 
-            units[unit_id] = {
-                "id": unit_id,
-                "status": status,
-                "age": age,
-                "last": last_seen.isoformat() if last_seen else None,
-                "fname": fname,
+                units[unit_id] = {
+                    "id": unit_id,
+                    "status": status,
+                    "age": age,
+                    "last": last_seen.isoformat() if last_seen else None,
+                    "fname": fname,
                 "deployed": r.deployed,
                 "note": r.note or "",
                 "retired": r.retired,
@@ -76,12 +75,12 @@ def emit_status_snapshot():
                 "deployed_with_modem_id": r.deployed_with_modem_id,
                 "ip_address": r.ip_address,
                 "phone_number": r.phone_number,
-                "hardware_model": r.hardware_model,
-                # Location for mapping
-                "location": r.location or "",
-                "address": r.address or "",
-                "coordinates": r.coordinates or "",
-            }
+                    "hardware_model": r.hardware_model,
+                    # Location for mapping
+                    "location": r.location or "",
+                    "address": r.address or "",
+                    "coordinates": r.coordinates or "",
+                }
 
         # --- Add unexpected emitter-only units ---
         for unit_id, e in emitters.items():
-- 
2.49.1


From e16f61aca71eae665732f964efeb1a1ace4a4bb8 Mon Sep 17 00:00:00 2001
From: serversdwn <brianharrison02@gmail.com>
Date: Fri, 2 Jan 2026 20:27:09 +0000
Subject: [PATCH 29/29] slm integration added

---
 backend/main.py                      |   4 +-
 backend/migrate_add_slm_fields.py    |  78 +++++++++++
 backend/models.py                    |  18 ++-
 backend/routers/settings.py          |   8 ++
 backend/routers/slm_ui.py            | 123 +++++++++++++++++
 backend/routers/slmm.py              | 130 ++++++++++++++++++
 docker-compose.yml                   |   1 +
 requirements.txt                     |   1 +
 templates/partials/slm_controls.html | 105 +++++++++++++++
 templates/roster.html                |  53 +++++++-
 templates/slm_detail.html            | 195 +++++++++++++++++++++++++++
 11 files changed, 710 insertions(+), 6 deletions(-)
 create mode 100644 backend/migrate_add_slm_fields.py
 create mode 100644 backend/routers/slm_ui.py
 create mode 100644 backend/routers/slmm.py
 create mode 100644 templates/partials/slm_controls.html
 create mode 100644 templates/slm_detail.html

diff --git a/backend/main.py b/backend/main.py
index 575f7dc..ed55a49 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -9,7 +9,7 @@ from typing import List, Dict
 from pydantic import BaseModel
 
 from backend.database import engine, Base, get_db
-from backend.routers import roster, units, photos, roster_edit, dashboard, dashboard_tabs, activity
+from backend.routers import roster, units, photos, roster_edit, dashboard, dashboard_tabs, activity, slmm, slm_ui
 from backend.services.snapshot import emit_status_snapshot
 from backend.models import IgnoredUnit
 
@@ -68,6 +68,8 @@ app.include_router(roster_edit.router)
 app.include_router(dashboard.router)
 app.include_router(dashboard_tabs.router)
 app.include_router(activity.router)
+app.include_router(slmm.router)
+app.include_router(slm_ui.router)
 
 from backend.routers import settings
 app.include_router(settings.router)
diff --git a/backend/migrate_add_slm_fields.py b/backend/migrate_add_slm_fields.py
new file mode 100644
index 0000000..1c1b50e
--- /dev/null
+++ b/backend/migrate_add_slm_fields.py
@@ -0,0 +1,78 @@
+#!/usr/bin/env python3
+"""
+Database migration: Add sound level meter fields to roster table.
+
+Adds columns for sound_level_meter device type support.
+"""
+
+import sqlite3
+from pathlib import Path
+
+def migrate():
+    """Add SLM fields to roster table if they don't exist."""
+
+    # Try multiple possible database locations
+    possible_paths = [
+        Path("data/seismo_fleet.db"),
+        Path("data/sfm.db"),
+        Path("data/seismo.db"),
+    ]
+
+    db_path = None
+    for path in possible_paths:
+        if path.exists():
+            db_path = path
+            break
+
+    if db_path is None:
+        print(f"Database not found in any of: {[str(p) for p in possible_paths]}")
+        print("Creating database with models.py will include new fields automatically.")
+        return
+
+    print(f"Using database: {db_path}")
+
+    conn = sqlite3.connect(db_path)
+    cursor = conn.cursor()
+
+    # Check if columns already exist
+    cursor.execute("PRAGMA table_info(roster)")
+    existing_columns = {row[1] for row in cursor.fetchall()}
+
+    new_columns = {
+        "slm_host": "TEXT",
+        "slm_tcp_port": "INTEGER",
+        "slm_model": "TEXT",
+        "slm_serial_number": "TEXT",
+        "slm_frequency_weighting": "TEXT",
+        "slm_time_weighting": "TEXT",
+        "slm_measurement_range": "TEXT",
+        "slm_last_check": "DATETIME",
+    }
+
+    migrations_applied = []
+
+    for column_name, column_type in new_columns.items():
+        if column_name not in existing_columns:
+            try:
+                cursor.execute(f"ALTER TABLE roster ADD COLUMN {column_name} {column_type}")
+                migrations_applied.append(column_name)
+                print(f"✓ Added column: {column_name} ({column_type})")
+            except sqlite3.OperationalError as e:
+                print(f"✗ Failed to add column {column_name}: {e}")
+        else:
+            print(f"○ Column already exists: {column_name}")
+
+    conn.commit()
+    conn.close()
+
+    if migrations_applied:
+        print(f"\n✓ Migration complete! Added {len(migrations_applied)} new columns.")
+    else:
+        print("\n○ No migration needed - all columns already exist.")
+
+    print("\nSound level meter fields are now available in the roster table.")
+    print("You can now set device_type='sound_level_meter' for SLM devices.")
+
+
+if __name__ == "__main__":
+    migrate()
diff --git a/backend/models.py b/backend/models.py
index 0b75631..e80c49c 100644
--- a/backend/models.py
+++ b/backend/models.py
@@ -19,14 +19,14 @@ class RosterUnit(Base):
     Roster table: represents our *intended assignment* of a unit.
     This is editable from the GUI.
 
-    Supports multiple device types (seismograph, modem) with type-specific fields.
+    Supports multiple device types (seismograph, modem, sound_level_meter) with type-specific fields.
     """
     __tablename__ = "roster"
 
     # Core fields (all device types)
     id = Column(String, primary_key=True, index=True)
     unit_type = Column(String, default="series3")  # Backward compatibility
-    device_type = Column(String, default="seismograph")  # "seismograph" | "modem"
+    device_type = Column(String, default="seismograph")  # "seismograph" | "modem" | "sound_level_meter"
     deployed = Column(Boolean, default=True)
     retired = Column(Boolean, default=False)
     note = Column(String, nullable=True)
@@ -36,16 +36,26 @@ class RosterUnit(Base):
     coordinates = Column(String, nullable=True)  # Lat,Lon format: "34.0522,-118.2437"
     last_updated = Column(DateTime, default=datetime.utcnow)
 
-    # Seismograph-specific fields (nullable for modems)
+    # Seismograph-specific fields (nullable for modems and SLMs)
     last_calibrated = Column(Date, nullable=True)
     next_calibration_due = Column(Date, nullable=True)
     deployed_with_modem_id = Column(String, nullable=True)  # FK to another RosterUnit
 
-    # Modem-specific fields (nullable for seismographs)
+    # Modem-specific fields (nullable for seismographs and SLMs)
     ip_address = Column(String, nullable=True)
     phone_number = Column(String, nullable=True)
     hardware_model = Column(String, nullable=True)
 
+    # Sound Level Meter-specific fields (nullable for seismographs and modems)
+    slm_host = Column(String, nullable=True)  # Device IP or hostname
+    slm_tcp_port = Column(Integer, nullable=True)  # TCP control port (default 2255)
+    slm_model = Column(String, nullable=True)  # NL-43, NL-53, etc.
+    slm_serial_number = Column(String, nullable=True)  # Device serial number
+    slm_frequency_weighting = Column(String, nullable=True)  # A, C, Z
+    slm_time_weighting = Column(String, nullable=True)  # F (Fast), S (Slow), I (Impulse)
+    slm_measurement_range = Column(String, nullable=True)  # e.g., "30-130 dB"
+    slm_last_check = Column(DateTime, nullable=True)  # Last communication check
+
 
 class IgnoredUnit(Base):
     """
diff --git a/backend/routers/settings.py b/backend/routers/settings.py
index 4cd0fb0..bb14357 100644
--- a/backend/routers/settings.py
+++ b/backend/routers/settings.py
@@ -100,6 +100,14 @@ def get_all_roster_units(db: Session = Depends(get_db)):
         "ip_address": unit.ip_address or "",
         "phone_number": unit.phone_number or "",
         "hardware_model": unit.hardware_model or "",
+        "slm_host": unit.slm_host or "",
+        "slm_tcp_port": unit.slm_tcp_port,
+        "slm_model": unit.slm_model or "",
+        "slm_serial_number": unit.slm_serial_number or "",
+        "slm_frequency_weighting": unit.slm_frequency_weighting or "",
+        "slm_time_weighting": unit.slm_time_weighting or "",
+        "slm_measurement_range": unit.slm_measurement_range or "",
+        "slm_last_check": unit.slm_last_check.isoformat() if unit.slm_last_check else None,
         "last_updated": unit.last_updated.isoformat() if unit.last_updated else None
     } for unit in units]
 
diff --git a/backend/routers/slm_ui.py b/backend/routers/slm_ui.py
new file mode 100644
index 0000000..d0945f6
--- /dev/null
+++ b/backend/routers/slm_ui.py
@@ -0,0 +1,123 @@
+"""
+Sound Level Meter UI Router
+
+Provides endpoints for SLM dashboard cards, detail pages, and real-time data.
+"""
+
+from fastapi import APIRouter, Depends, HTTPException, Request
+from fastapi.responses import HTMLResponse
+from fastapi.templating import Jinja2Templates
+from sqlalchemy.orm import Session
+from datetime import datetime
+import httpx
+import logging
+import os
+
+from backend.database import get_db
+from backend.models import RosterUnit
+
+logger = logging.getLogger(__name__)
+
+router = APIRouter(prefix="/slm", tags=["slm-ui"])
+templates = Jinja2Templates(directory="templates")
+
+SLMM_BASE_URL = os.getenv("SLMM_BASE_URL", "http://172.19.0.1:8100")
+
+
+@router.get("/{unit_id}", response_class=HTMLResponse)
+async def slm_detail_page(request: Request, unit_id: str, db: Session = Depends(get_db)):
+    """Sound level meter detail page with controls."""
+
+    # Get roster unit
+    unit = db.query(RosterUnit).filter_by(id=unit_id).first()
+    if not unit or unit.device_type != "sound_level_meter":
+        raise HTTPException(status_code=404, detail="Sound level meter not found")
+
+    return templates.TemplateResponse("slm_detail.html", {
+        "request": request,
+        "unit": unit,
+        "unit_id": unit_id
+    })
+
+
+@router.get("/api/{unit_id}/summary")
+async def get_slm_summary(unit_id: str, db: Session = Depends(get_db)):
+    """Get SLM summary data for dashboard card."""
+
+    # Get roster unit
+    unit = db.query(RosterUnit).filter_by(id=unit_id).first()
+    if not unit or unit.device_type != "sound_level_meter":
+        raise HTTPException(status_code=404, detail="Sound level meter not found")
+
+    # Try to get live status from SLMM
+    status_data = None
+    try:
+        async with httpx.AsyncClient(timeout=3.0) as client:
+            response = await client.get(f"{SLMM_BASE_URL}/api/nl43/{unit_id}/status")
+            if response.status_code == 200:
+                status_data = response.json().get("data")
+    except Exception as e:
+        logger.warning(f"Failed to get SLM status for {unit_id}: {e}")
+
+    return {
+        "unit_id": unit_id,
+        "device_type": "sound_level_meter",
+        "deployed": unit.deployed,
+        "model": unit.slm_model or "NL-43",
+        "location": unit.address or unit.location,
+        "coordinates": unit.coordinates,
+        "note": unit.note,
+        "status": status_data,
+        "last_check": unit.slm_last_check.isoformat() if unit.slm_last_check else None,
+    }
+
+
+@router.get("/partials/{unit_id}/card", response_class=HTMLResponse)
+async def slm_dashboard_card(request: Request, unit_id: str, db: Session = Depends(get_db)):
+    """Render SLM dashboard card partial."""
+
+    summary = await get_slm_summary(unit_id, db)
+
+    return templates.TemplateResponse("partials/slm_card.html", {
+        "request": request,
+        "slm": summary
+    })
+
+
+@router.get("/partials/{unit_id}/controls", response_class=HTMLResponse)
+async def slm_controls_partial(request: Request, unit_id: str, db: Session = Depends(get_db)):
+    """Render SLM control panel partial."""
+
+    unit = db.query(RosterUnit).filter_by(id=unit_id).first()
+    if not unit or unit.device_type != "sound_level_meter":
+        raise HTTPException(status_code=404, detail="Sound level meter not found")
+
+    # Get current status from SLMM
+    measurement_state = None
+    battery_level = None
+    try:
+        async with httpx.AsyncClient(timeout=3.0) as client:
+            # Get measurement state
+            state_response = await client.get(
+                f"{SLMM_BASE_URL}/api/nl43/{unit_id}/measurement-state"
+            )
+            if state_response.status_code == 200:
+                measurement_state = state_response.json().get("measurement_state")
+
+            # Get battery level
+            battery_response = await client.get(
+                f"{SLMM_BASE_URL}/api/nl43/{unit_id}/battery"
+            )
+            if battery_response.status_code == 200:
+                battery_level = battery_response.json().get("battery_level")
+    except Exception as e:
+        logger.warning(f"Failed to get SLM control data for {unit_id}: {e}")
+
+    return templates.TemplateResponse("partials/slm_controls.html", {
+        "request": request,
+        "unit_id": unit_id,
+        "unit": unit,
+        "measurement_state": measurement_state,
+        "battery_level": battery_level,
+        "is_measuring": measurement_state == "Start"
+    })
diff --git a/backend/routers/slmm.py b/backend/routers/slmm.py
new file mode 100644
index 0000000..b075637
--- /dev/null
+++ b/backend/routers/slmm.py
@@ -0,0 +1,130 @@
+"""
+SLMM (Sound Level Meter Manager) Proxy Router
+
+Proxies requests from SFM to the standalone SLMM backend service.
+SLMM runs on port 8100 and handles NL43/NL53 sound level meter communication.
+"""
+
+from fastapi import APIRouter, HTTPException, Request, Response
+from fastapi.responses import StreamingResponse
+import httpx
+import logging
+import os
+
+logger = logging.getLogger(__name__)
+
+router = APIRouter(prefix="/api/slmm", tags=["slmm"])
+
+# SLMM backend URL - configurable via environment variable
+SLMM_BASE_URL = os.getenv("SLMM_BASE_URL", "http://localhost:8100")
+
+
+@router.get("/health")
+async def check_slmm_health():
+    """
+    Check if the SLMM backend service is reachable and healthy.
+    """
+    try:
+        async with httpx.AsyncClient(timeout=5.0) as client:
+            response = await client.get(f"{SLMM_BASE_URL}/health")
+
+            if response.status_code == 200:
+                data = response.json()
+                return {
+                    "status": "ok",
+                    "slmm_status": "connected",
+                    "slmm_url": SLMM_BASE_URL,
+                    "slmm_version": data.get("version", "unknown"),
+                    "slmm_response": data
+                }
+            else:
+                return {
+                    "status": "degraded",
+                    "slmm_status": "error",
+                    "slmm_url": SLMM_BASE_URL,
+                    "detail": f"SLMM returned status {response.status_code}"
+                }
+
+    except httpx.ConnectError:
+        return {
+            "status": "error",
+            "slmm_status": "unreachable",
+            "slmm_url": SLMM_BASE_URL,
+            "detail": "Cannot connect to SLMM backend. Is it running?"
+        }
+    except Exception as e:
+        return {
+            "status": "error",
+            "slmm_status": "error",
+            "slmm_url": SLMM_BASE_URL,
+            "detail": str(e)
+        }
+
+
+@router.api_route("/{path:path}", methods=["GET", "POST", "PUT", "DELETE", "PATCH"])
+async def proxy_to_slmm(path: str, request: Request):
+    """
+    Proxy all requests to the SLMM backend service.
+
+    This allows SFM to act as a unified frontend for all device types,
+    while SLMM remains a standalone backend service.
+    """
+    # Build target URL
+    target_url = f"{SLMM_BASE_URL}/api/nl43/{path}"
+
+    # Get query parameters
+    query_params = dict(request.query_params)
+
+    # Get request body if present
+    body = None
+    if request.method in ["POST", "PUT", "PATCH"]:
+        try:
+            body = await request.body()
+        except Exception as e:
+            logger.error(f"Failed to read request body: {e}")
+            body = None
+
+    # Get headers (exclude host and other proxy-specific headers)
+    headers = dict(request.headers)
+    headers_to_exclude = ["host", "content-length", "transfer-encoding", "connection"]
+    proxy_headers = {k: v for k, v in headers.items() if k.lower() not in headers_to_exclude}
+
+    logger.info(f"Proxying {request.method} request to SLMM: {target_url}")
+
+    try:
+        async with httpx.AsyncClient(timeout=30.0) as client:
+            # Forward the request to SLMM
+            response = await client.request(
+                method=request.method,
+                url=target_url,
+                params=query_params,
+                headers=proxy_headers,
+                content=body
+            )
+
+            # Return the response from SLMM
+            return Response(
+                content=response.content,
+                status_code=response.status_code,
+                headers=dict(response.headers),
+                media_type=response.headers.get("content-type")
+            )
+
+    except httpx.ConnectError:
+        logger.error(f"Failed to connect to SLMM backend at {SLMM_BASE_URL}")
+        raise HTTPException(
+            status_code=503,
+            detail=f"SLMM backend service unavailable. Is SLMM running on {SLMM_BASE_URL}?"
+        )
+    except httpx.TimeoutException:
+        logger.error(f"Timeout connecting to SLMM backend at {SLMM_BASE_URL}")
+        raise HTTPException(
+            status_code=504,
+            detail="SLMM backend timeout"
+        )
+    except Exception as e:
+        logger.error(f"Error proxying to SLMM: {e}")
+        raise HTTPException(
+            status_code=500,
+            detail=f"Failed to proxy request to SLMM: {str(e)}"
+        )
diff --git a/docker-compose.yml b/docker-compose.yml
index b0c0ccf..cb16f59 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -11,6 +11,7 @@ services:
     environment:
       - PYTHONUNBUFFERED=1
       - ENVIRONMENT=production
+      - SLMM_BASE_URL=http://172.19.0.1:8100
     restart: unless-stopped
     healthcheck:
       test: ["CMD", "curl", "-f", "http://localhost:8001/health"]
diff --git a/requirements.txt b/requirements.txt
index 86b1adc..9c7ba93 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -6,3 +6,4 @@ python-multipart==0.0.6
 jinja2==3.1.2
 aiofiles==23.2.1
 Pillow==10.1.0
+httpx==0.25.2
diff --git a/templates/partials/slm_controls.html b/templates/partials/slm_controls.html
new file mode 100644
index 0000000..2a5cbdd
--- /dev/null
+++ b/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>
diff --git a/templates/roster.html b/templates/roster.html
index b870668..d0f8752 100644
--- a/templates/roster.html
+++ b/templates/roster.html
@@ -124,6 +124,7 @@
                     class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
                     <option value="seismograph">Seismograph</option>
                     <option value="modem">Modem</option>
+                    <option value="sound_level_meter">Sound Level Meter</option>
                 </select>
             </div>
             <div>
@@ -186,6 +187,49 @@
                 </div>
             </div>
 
+            <!-- Sound Level Meter-specific fields -->
+            <div id="slmFields" class="hidden space-y-4 border-t border-gray-200 dark:border-gray-700 pt-4">
+                <p class="text-sm font-semibold text-gray-700 dark:text-gray-300">Sound Level Meter Information</p>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">SLM Model</label>
+                    <input type="text" name="slm_model" placeholder="NL-43"
+                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Host/IP Address</label>
+                    <input type="text" name="slm_host" placeholder="192.168.1.100"
+                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                </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" placeholder="2255"
+                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                </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" placeholder="SN123456"
+                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                </div>
+                <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-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                        <option value="A">A-weighting</option>
+                        <option value="C">C-weighting</option>
+                        <option value="Z">Z-weighting (Flat)</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-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
+                        <option value="F">F (Fast)</option>
+                        <option value="S">S (Slow)</option>
+                        <option value="I">I (Impulse)</option>
+                    </select>
+                </div>
+            </div>
+
             <div class="flex items-center gap-4">
                 <label class="flex items-center gap-2 cursor-pointer">
                     <input type="checkbox" name="deployed" id="deployedCheckbox" value="true" checked onchange="toggleModemPairing()"
@@ -388,14 +432,21 @@
         const deviceType = document.getElementById('deviceTypeSelect').value;
         const seismoFields = document.getElementById('seismographFields');
         const modemFields = document.getElementById('modemFields');
+        const slmFields = document.getElementById('slmFields');
 
         if (deviceType === 'seismograph') {
             seismoFields.classList.remove('hidden');
             modemFields.classList.add('hidden');
+            slmFields.classList.add('hidden');
             toggleModemPairing(); // Check if modem pairing should be shown
-        } else {
+        } else if (deviceType === 'modem') {
             seismoFields.classList.add('hidden');
             modemFields.classList.remove('hidden');
+            slmFields.classList.add('hidden');
+        } else if (deviceType === 'sound_level_meter') {
+            seismoFields.classList.add('hidden');
+            modemFields.classList.add('hidden');
+            slmFields.classList.remove('hidden');
         }
     }
 
diff --git a/templates/slm_detail.html b/templates/slm_detail.html
new file mode 100644
index 0000000..25cc18a
--- /dev/null
+++ b/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 %}
-- 
2.49.1