Merge pull request 'Update to v0.7.0' (#30) from dev into main

Reviewed-on: #30

CHANGELOG.md

@@ -5,6 +5,60 @@ All notable changes to Terra-View 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.7.0] - 2026-03-07
+
+### Added
+- **Project Status Management**: Projects can now be placed `on_hold` or `archived`, with automatic cancellation of pending scheduled actions
+- **Hard Delete Projects**: Support for permanently deleting projects, in addition to soft-delete with auto-pruning
+- **Vibration Location Detail**: New dedicated template for vibration project location detail views
+- **Vibration Project Isolation**: Vibration projects no longer show SLM-specific project tabs
+- **Manual SD Card Data Upload**: Upload offline NRL data directly from SD card via ZIP or multi-file select
+  - Accepts `.rnd`/`.rnh` files; parses `.rnh` metadata for session start/stop times, serial number, and store name
+  - Creates `MonitoringSession` and `DataFile` records automatically; no unit assignment required
+  - Upload panel on NRL detail Data Files tab with inline feedback and auto-refresh via HTMX
+- **Standalone SLM Type**: New SLM device mode that operates without a modem (direct IP connection)
+- **NL32 Data Support**: Report generator and web viewer now support NL32 measurement data format
+- **Combined Report Wizard**: Multi-session combined Excel report generation tool
+  - Wizard UI grouped by location with period type badges (day/night)
+  - Each selected session produces one `.xlsx` in a ZIP archive
+  - Period type filtering: day sessions keep last calendar date (7AM–6:59PM); night sessions span both days (7PM–6:59AM)
+- **Combined Report Preview**: Interactive spreadsheet-style preview before generating combined reports
+- **Chart Preview**: Live chart preview in the report generator matching final report styling
+- **SLM Model Schemas**: Per-model configuration schemas for NL32, NL43, NL53 devices
+- **Data Collection Mode**: Projects now store a data collection mode field with UI controls and migration
+
+### Changed
+- **MonitoringSession rename**: `RecordingSession` renamed to `MonitoringSession` throughout codebase; DB table renamed from `recording_sessions` to `monitoring_sessions`
+  - Migration: `backend/migrate_rename_recording_to_monitoring_sessions.py`
+- **Combined Report Split Logic**: Separate days now generate separate `.xlsx` files; NRLs remain one per sheet
+- **Mass Upload Parsing**: Smarter file filtering — no longer imports unneeded Lp files or `.xlsx` files
+- **SLM Start Time Grace Period**: 15-minute grace window added so data starting at session start time is included
+- **NL32 Date Parsing**: Date now read from `start_time` field instead of file metadata
+- **Project Data Labels**: Improved Jinja filters and UI label clarity for project data views
+
+### Fixed
+- **Dev/Prod Separation**: Dev server now uses Docker Compose override; production deployment no longer affected by dev config
+- **SLM Modal**: Bench/deploy toggle now correctly shown in SLM unit modal
+- **Auto-Downloaded Files**: Files downloaded by scheduler now appear in project file listings
+- **Duplicate Download**: Removed duplicate file download that occurred following a scheduled stop
+- **SLMM Environment Variables**: `TCP_IDLE_TTL` and `TCP_MAX_AGE` now correctly passed to SLMM service via docker-compose
+
+### Technical Details
+- `session_label` and `period_type` stored on `monitoring_sessions` table (migration: `migrate_add_session_period_type.py`)
+- `device_model` stored on `monitoring_sessions` table (migration: `migrate_add_session_device_model.py`)
+- Upload endpoint: `POST /api/projects/{project_id}/nrl/{location_id}/upload-data`
+- ZIP filename format: `{session_label}_{project_name}_report.xlsx` (label first)
+
+### Migration Notes
+Run the following migration scripts once per database before deploying:
+```bash
+python backend/migrate_rename_recording_to_monitoring_sessions.py
+python backend/migrate_add_session_period_type.py
+python backend/migrate_add_session_device_model.py
+```
+
+---
+
 ## [0.6.1] - 2026-02-16
 
 ### Added
@@ -445,6 +499,7 @@ No database migration required for v0.4.0. All new features use existing databas
 - Photo management per unit
 - Automated status categorization (OK/Pending/Missing)
 
+[0.7.0]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.6.1...v0.7.0
 [0.6.0]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.5.1...v0.6.0
 [0.5.1]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.5.0...v0.5.1
 [0.5.0]: https://github.com/serversdwn/seismo-fleet-manager/compare/v0.4.4...v0.5.0

README.md

@@ -1,4 +1,4 @@
-# Terra-View v0.6.1
+# Terra-View v0.7.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
@@ -496,6 +496,16 @@ docker compose down -v
 
 ## Release Highlights
 
+### v0.7.0 — 2026-03-07
+- **Project Status Management**: On-hold and archived project states with automatic cancellation of pending actions
+- **Manual SD Card Upload**: Upload offline NRL/SLM data directly from SD card (ZIP or multi-file); auto-creates monitoring sessions from `.rnh` metadata
+- **Combined Report Wizard**: Multi-session Excel report generation with location grouping, period type filtering, and ZIP download
+- **NL32 Support**: Report generator and web viewer now handle NL32 measurement data
+- **Chart Preview**: Live chart preview in the report generator matching final output styling
+- **Standalone SLM Mode**: SLMs can now be configured without a paired modem (direct IP)
+- **Vibration Project Isolation**: Vibration project views no longer show SLM-specific tabs
+- **MonitoringSession Rename**: `RecordingSession` renamed to `MonitoringSession` throughout; run migration before deploying
+
 ### v0.6.1 — 2026-02-16
 - **One-Off Recording Schedules**: Schedule single recordings with specific start/end datetimes
 - **Bidirectional Pairing Sync**: Device-modem pairing now updates both sides automatically
@@ -584,11 +594,13 @@ MIT
 
 ## Version
 
-**Current: 0.6.1** — One-off recording schedules, bidirectional pairing sync, scheduler timezone fix (2026-02-16)
+**Current: 0.7.0** — Project status management, manual SD card upload, combined report wizard, NL32 support, MonitoringSession rename (2026-03-07)
 
-Previous: 0.6.0 — Calendar & reservation mode, device pairing interface, calibration UX overhaul, modem dashboard enhancements (2026-02-06)
+Previous: 0.6.1 — One-off recording schedules, bidirectional pairing sync, scheduler timezone fix (2026-02-16)
 
-Previous: 0.5.1 — Dashboard schedule view with today's actions panel, new Terra-View branding and logo rework (2026-01-27)
+0.6.0 — Calendar & reservation mode, device pairing interface, calibration UX overhaul, modem dashboard enhancements (2026-02-06)
+
+0.5.1 — Dashboard schedule view with today's actions panel, new Terra-View branding and logo rework (2026-01-27)
 
 0.4.4 — Recurring schedules, alerting UI, report templates + RND viewer, and SLM workflow polish (2026-01-23)
 

backend/main.py

@@ -30,7 +30,7 @@ Base.metadata.create_all(bind=engine)
 ENVIRONMENT = os.getenv("ENVIRONMENT", "production")
 
 # Initialize FastAPI app
-VERSION = "0.6.1"
+VERSION = "0.7.0"
 if ENVIRONMENT == "development":
     _build = os.getenv("BUILD_NUMBER", "0")
     if _build and _build != "0":

backend/migrate_add_session_period_type.py

@@ -0,0 +1,131 @@
+#!/usr/bin/env python3
+"""
+Migration: Add session_label and period_type columns to monitoring_sessions.
+
+session_label  - user-editable display name, e.g. "NRL-1 Sun 2/23 Night"
+period_type    - one of: weekday_day | weekday_night | weekend_day | weekend_night
+                 Auto-derived from started_at when NULL.
+
+Period definitions (used in report stats table):
+  weekday_day   Mon-Fri  07:00-22:00  -> Daytime (7AM-10PM)
+  weekday_night Mon-Fri  22:00-07:00  -> Nighttime (10PM-7AM)
+  weekend_day   Sat-Sun  07:00-22:00  -> Daytime (7AM-10PM)
+  weekend_night Sat-Sun  22:00-07:00  -> Nighttime (10PM-7AM)
+
+Run once inside the Docker container:
+    docker exec terra-view python3 backend/migrate_add_session_period_type.py
+"""
+from pathlib import Path
+from datetime import datetime
+
+DB_PATH = Path("data/seismo_fleet.db")
+
+
+def _derive_period_type(started_at_str: str) -> str | None:
+    """Derive period_type from a started_at ISO datetime string."""
+    if not started_at_str:
+        return None
+    try:
+        dt = datetime.fromisoformat(started_at_str)
+    except ValueError:
+        return None
+    is_weekend = dt.weekday() >= 5  # 5=Sat, 6=Sun
+    is_night = dt.hour >= 22 or dt.hour < 7
+    if is_weekend:
+        return "weekend_night" if is_night else "weekend_day"
+    else:
+        return "weekday_night" if is_night else "weekday_day"
+
+
+def _build_label(started_at_str: str, location_name: str | None, period_type: str | None) -> str | None:
+    """Build a human-readable session label."""
+    if not started_at_str:
+        return None
+    try:
+        dt = datetime.fromisoformat(started_at_str)
+    except ValueError:
+        return None
+
+    day_abbr = dt.strftime("%a")   # Mon, Tue, Sun, etc.
+    date_str = dt.strftime("%-m/%-d")  # 2/23
+
+    period_labels = {
+        "weekday_day":   "Day",
+        "weekday_night": "Night",
+        "weekend_day":   "Day",
+        "weekend_night": "Night",
+    }
+    period_str = period_labels.get(period_type or "", "")
+
+    parts = []
+    if location_name:
+        parts.append(location_name)
+    parts.append(f"{day_abbr} {date_str}")
+    if period_str:
+        parts.append(period_str)
+    return " — ".join(parts)
+
+
+def migrate():
+    import sqlite3
+
+    if not DB_PATH.exists():
+        print(f"Database not found at {DB_PATH}. Are you running from /home/serversdown/terra-view?")
+        return
+
+    conn = sqlite3.connect(DB_PATH)
+    conn.row_factory = sqlite3.Row
+    cur = conn.cursor()
+
+    # 1. Add columns (idempotent)
+    cur.execute("PRAGMA table_info(monitoring_sessions)")
+    existing_cols = {row["name"] for row in cur.fetchall()}
+
+    for col, typedef in [("session_label", "TEXT"), ("period_type", "TEXT")]:
+        if col not in existing_cols:
+            cur.execute(f"ALTER TABLE monitoring_sessions ADD COLUMN {col} {typedef}")
+            conn.commit()
+            print(f"✓ Added column {col} to monitoring_sessions")
+        else:
+            print(f"○ Column {col} already exists — skipping ALTER TABLE")
+
+    # 2. Backfill existing rows
+    cur.execute(
+        """SELECT ms.id, ms.started_at, ms.location_id
+           FROM monitoring_sessions ms
+           WHERE ms.period_type IS NULL OR ms.session_label IS NULL"""
+    )
+    sessions = cur.fetchall()
+    print(f"Backfilling {len(sessions)} session(s)...")
+
+    updated = 0
+    for row in sessions:
+        session_id = row["id"]
+        started_at = row["started_at"]
+        location_id = row["location_id"]
+
+        # Look up location name
+        location_name = None
+        if location_id:
+            cur.execute("SELECT name FROM monitoring_locations WHERE id = ?", (location_id,))
+            loc_row = cur.fetchone()
+            if loc_row:
+                location_name = loc_row["name"]
+
+        period_type = _derive_period_type(started_at)
+        label = _build_label(started_at, location_name, period_type)
+
+        cur.execute(
+            "UPDATE monitoring_sessions SET period_type = ?, session_label = ? WHERE id = ?",
+            (period_type, label, session_id),
+        )
+        updated += 1
+
+    conn.commit()
+    conn.close()
+    print(f"✓ Backfilled {updated} session(s).")
+    print("Migration complete.")
+
+
+if __name__ == "__main__":
+    migrate()

backend/models.py

@@ -272,6 +272,14 @@ class MonitoringSession(Base):
     duration_seconds = Column(Integer, nullable=True)
     status = Column(String, default="recording")  # recording, completed, failed
 
+    # Human-readable label auto-derived from date/location, editable by user.
+    # e.g. "NRL-1 — Sun 2/23 — Night"
+    session_label = Column(String, nullable=True)
+
+    # Period classification for report stats columns.
+    # weekday_day | weekday_night | weekend_day | weekend_night
+    period_type = Column(String, nullable=True)
+
     # Snapshot of device configuration at recording time
     session_metadata = Column(Text, nullable=True)  # JSON
 

backend/routers/project_locations.py

@@ -35,6 +35,39 @@ from backend.templates_config import templates
 router = APIRouter(prefix="/api/projects/{project_id}", tags=["project-locations"])
 
 
+# ============================================================================
+# Session period helpers
+# ============================================================================
+
+def _derive_period_type(dt: datetime) -> str:
+    """
+    Classify a session start time into one of four period types.
+    Night = 22:00–07:00, Day = 07:00–22:00.
+    Weekend = Saturday (5) or Sunday (6).
+    """
+    is_weekend = dt.weekday() >= 5
+    is_night = dt.hour >= 22 or dt.hour < 7
+    if is_weekend:
+        return "weekend_night" if is_night else "weekend_day"
+    return "weekday_night" if is_night else "weekday_day"
+
+
+def _build_session_label(dt: datetime, location_name: str, period_type: str) -> str:
+    """Build a human-readable session label, e.g. 'NRL-1 — Sun 2/23 — Night'.
+    Uses started_at date as-is; user can correct period_type in the wizard.
+    """
+    day_abbr = dt.strftime("%a")
+    date_str = f"{dt.month}/{dt.day}"
+    period_str = {
+        "weekday_day":   "Day",
+        "weekday_night": "Night",
+        "weekend_day":   "Day",
+        "weekend_night": "Night",
+    }.get(period_type, "")
+    parts = [p for p in [location_name, f"{day_abbr} {date_str}", period_str] if p]
+    return " — ".join(parts)
+
+
 # ============================================================================
 # Monitoring Locations CRUD
 # ============================================================================
@@ -634,6 +667,30 @@ async def upload_nrl_data(
     if not file_entries:
         raise HTTPException(status_code=400, detail="No usable files found in upload.")
 
+    # --- Step 1b: Filter to only relevant files ---
+    # Keep: .rnh (metadata) and measurement .rnd files
+    #   NL-43 generates two .rnd types: _Leq_ (15-min averages, wanted) and _Lp_ (1-sec granular, skip)
+    #   AU2 (NL-23/older Rion) generates a single Au2_####.rnd per session — always keep those
+    # Drop: _Lp_ .rnd, .xlsx, .mp3, and anything else
+    def _is_wanted(fname: str) -> bool:
+        n = fname.lower()
+        if n.endswith(".rnh"):
+            return True
+        if n.endswith(".rnd"):
+            if "_leq_" in n:        # NL-43 Leq file
+                return True
+            if n.startswith("au2_"): # AU2 format (NL-23) — always Leq equivalent
+                return True
+            if "_lp" not in n and "_leq_" not in n:
+                # Unknown .rnd format — include it so we don't silently drop data
+                return True
+        return False
+
+    file_entries = [(fname, fbytes) for fname, fbytes in file_entries if _is_wanted(fname)]
+
+    if not file_entries:
+        raise HTTPException(status_code=400, detail="No usable .rnd or .rnh files found. Expected NL-43 _Leq_ files or AU2 format .rnd files.")
+
     # --- Step 2: Find and parse .rnh metadata ---
     rnh_meta = {}
     for fname, fbytes in file_entries:
@@ -652,6 +709,9 @@ async def upload_nrl_data(
     index_number = rnh_meta.get("index_number", "")
 
     # --- Step 3: Create MonitoringSession ---
+    period_type = _derive_period_type(started_at) if started_at else None
+    session_label = _build_session_label(started_at, location.name, period_type) if started_at else None
+
     session_id = str(uuid.uuid4())
     monitoring_session = MonitoringSession(
         id=session_id,
@@ -663,6 +723,8 @@ async def upload_nrl_data(
         stopped_at=stopped_at,
         duration_seconds=duration_seconds,
         status="completed",
+        session_label=session_label,
+        period_type=period_type,
         session_metadata=json.dumps({
             "source": "manual_upload",
             "store_name": store_name,

rebuild-prod.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+# Production rebuild script — rebuilds and restarts terra-view on :8001
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+cd "$SCRIPT_DIR"
+
+echo "Building terra-view production..."
+docker compose -f docker-compose.yml build terra-view
+docker compose -f docker-compose.yml up -d terra-view
+
+echo "Done — terra-view production is running on :8001"

templates/combined_report_preview.html

@@ -26,7 +26,7 @@
                         <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>
-                        Generate Excel
+                        Generate Reports (ZIP)
                     </button>
                     <a href="/api/projects/{{ project_id }}/combined-report-wizard"
                        class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-sm">
@@ -187,7 +187,7 @@ document.addEventListener('DOMContentLoaded', function() {
         const el = document.getElementById('spreadsheet-' + idx);
         if (!el) return;
         const opts = Object.assign({}, jssOptions, { data: loc.spreadsheet_data });
-        spreadsheets[loc.location_name] = jspreadsheet(el, opts);
+        spreadsheets[idx] = jspreadsheet(el, opts);
     });
     if (allLocationData.length > 0) {
         switchTab(0);
@@ -228,9 +228,8 @@ function switchTab(idx) {
     }
 
     // Refresh jspreadsheet rendering after showing panel
-    const loc = allLocationData[idx];
+    if (spreadsheets[idx]) {
-    if (loc && spreadsheets[loc.location_name]) {
+        try { spreadsheets[idx].updateTable(); } catch(e) {}
-        try { spreadsheets[loc.location_name].updateTable(); } catch(e) {}
     }
 }
 
@@ -238,13 +237,17 @@ async function downloadCombinedReport() {
     const btn = document.getElementById('download-btn');
     const originalText = btn.innerHTML;
     btn.disabled = true;
-    btn.innerHTML = '<svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg> Generating...';
+    btn.innerHTML = '<svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg> Generating ZIP...';
 
     try {
-        const locations = allLocationData.map(function(loc) {
+        const locations = allLocationData.map(function(loc, idx) {
             return {
-                location_name: loc.location_name,
+                session_id:       loc.session_id       || '',
-                spreadsheet_data: spreadsheets[loc.location_name] ? spreadsheets[loc.location_name].getData() : loc.spreadsheet_data,
+                session_label:    loc.session_label    || '',
+                period_type:      loc.period_type      || '',
+                started_at:       loc.started_at       || '',
+                location_name:    loc.location_name,
+                spreadsheet_data: spreadsheets[idx] ? spreadsheets[idx].getData() : loc.spreadsheet_data,
             };
         });
 
@@ -268,7 +271,7 @@ async function downloadCombinedReport() {
             a.href = url;
 
             const contentDisposition = response.headers.get('Content-Disposition');
-            let filename = 'combined_report.xlsx';
+            let filename = 'combined_reports.zip';
             if (contentDisposition) {
                 const match = contentDisposition.match(/filename="(.+)"/);
                 if (match) filename = match[1];

templates/combined_report_wizard.html

@@ -12,7 +12,7 @@
                     <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Combined Report Wizard</h1>
                     <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ project.name }}</p>
                 </div>
-                <a href="/api/projects/{{ project_id }}"
+                <a href="/projects/{{ project_id }}"
                    class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-sm w-fit">
                     ← Back to Project
                 </a>
@@ -74,105 +74,134 @@
             </div>
         </div>
 
-        <!-- Time Filter Card -->
+        <!-- Sessions Card -->
-        <div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
+        <div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 overflow-hidden">
-            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Time Filter</h2>
+            <div class="flex items-center justify-between mb-1">
-            <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Applied to all locations. Leave blank to include all data.</p>
+                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Monitoring Sessions</h2>
-
-            <!-- Preset Buttons -->
-            <div class="flex flex-wrap gap-2 mb-4">
-                <button type="button" onclick="setTimePreset('night')" data-preset="night"
-                        class="preset-btn px-3 py-1.5 text-sm rounded-md bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
-                    Night 7PM – 7AM
-                </button>
-                <button type="button" onclick="setTimePreset('day')" data-preset="day"
-                        class="preset-btn px-3 py-1.5 text-sm rounded-md bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
-                    Day 7AM – 7PM
-                </button>
-                <button type="button" onclick="setTimePreset('all')" data-preset="all"
-                        class="preset-btn px-3 py-1.5 text-sm rounded-md bg-emerald-600 text-white hover:bg-emerald-700 transition-colors">
-                    All Day
-                </button>
-                <button type="button" onclick="setTimePreset('custom')" data-preset="custom"
-                        class="preset-btn px-3 py-1.5 text-sm rounded-md bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
-                    Custom
-                </button>
-            </div>
-
-            <!-- Time Inputs -->
-            <div class="grid grid-cols-2 gap-4 mb-4">
-                <div>
-                    <label for="start-time" class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Start Time</label>
-                    <input type="time" id="start-time" value=""
-                           onchange="updatePresetButtons()"
-                           class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
-                </div>
-                <div>
-                    <label for="end-time" class="block text-xs text-gray-500 dark:text-gray-400 mb-1">End Time</label>
-                    <input type="time" id="end-time" value=""
-                           onchange="updatePresetButtons()"
-                           class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
-                </div>
-            </div>
-
-            <!-- Date Range -->
-            <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    Date Range <span class="text-gray-400 font-normal">(optional)</span>
-                </label>
-                <div class="grid grid-cols-2 gap-4">
-                    <div>
-                        <label for="start-date" class="block text-xs text-gray-500 dark:text-gray-400 mb-1">From</label>
-                        <input type="date" id="start-date" value=""
-                               class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
-                    </div>
-                    <div>
-                        <label for="end-date" class="block text-xs text-gray-500 dark:text-gray-400 mb-1">To</label>
-                        <input type="date" id="end-date" value=""
-                               class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Locations Card -->
-        <div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
-            <div class="flex items-center justify-between mb-4">
-                <div>
-                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Locations to Include</h2>
-                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
-                        <span id="selected-count">{{ locations|length }}</span> of {{ locations|length }} selected
-                    </p>
-                </div>
                 <div class="flex gap-3 text-sm">
-                    <button type="button" onclick="selectAll()" class="text-emerald-600 dark:text-emerald-400 hover:underline">Select All</button>
+                    <button type="button" onclick="selectAllSessions()" class="text-emerald-600 dark:text-emerald-400 hover:underline">Select All</button>
-                    <button type="button" onclick="deselectAll()" class="text-gray-500 dark:text-gray-400 hover:underline">Deselect All</button>
+                    <button type="button" onclick="deselectAllSessions()" class="text-gray-500 dark:text-gray-400 hover:underline">Deselect All</button>
                 </div>
             </div>
+            <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
+                <span id="selected-count">0</span> session(s) selected — each selected session becomes one sheet in the ZIP.
+                Change the period type per session to control how stats are bucketed (Day vs Night).
+            </p>
 
             {% if locations %}
-            <div class="divide-y divide-gray-100 dark:divide-gray-700">
                 {% for loc in locations %}
-                <label class="flex items-center gap-3 py-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-slate-700/50 px-2 rounded-md transition-colors">
+                {% set loc_name = loc.name %}
-                    <input type="checkbox" name="location" value="{{ loc.name }}" checked
+                {% set sessions = loc.sessions %}
-                           onchange="updateSelectedCount()"
+                <div class="border border-gray-200 dark:border-gray-700 rounded-lg mb-3 overflow-hidden">
-                           class="h-4 w-4 text-emerald-600 border-gray-300 dark:border-gray-600 rounded focus:ring-emerald-500">
+                    <!-- Location header / toggle -->
-                    <span class="flex-1 text-sm text-gray-900 dark:text-white font-medium">{{ loc.name }}</span>
+                    <button type="button"
-                    <span class="text-xs text-gray-400 dark:text-gray-500">{{ loc.file_count }} file{{ 's' if loc.file_count != 1 else '' }}</span>
+                            onclick="toggleLocation('loc-{{ loop.index }}')"
-                </label>
+                            class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 dark:bg-slate-700/50 hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors text-left">
+                        <div class="flex items-center gap-3">
+                            <svg id="chevron-loc-{{ loop.index }}" class="w-4 h-4 text-gray-400 transition-transform" 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>
+                            <span class="font-medium text-gray-900 dark:text-white text-sm">{{ loc_name }}</span>
+                            <span class="text-xs text-gray-400 dark:text-gray-500">{{ sessions|length }} session{{ 's' if sessions|length != 1 else '' }}</span>
+                        </div>
+                        <div class="flex items-center gap-3 text-xs" onclick="event.stopPropagation()">
+                            <button type="button" onclick="selectLocation('loc-{{ loop.index }}')"
+                                    class="text-emerald-600 dark:text-emerald-400 hover:underline">All</button>
+                            <button type="button" onclick="deselectLocation('loc-{{ loop.index }}')"
+                                    class="text-gray-400 hover:underline">None</button>
+                        </div>
+                    </button>
+
+                    <!-- Session rows -->
+                    <div id="loc-{{ loop.index }}" class="divide-y divide-gray-100 dark:divide-gray-700/50">
+                        {% for s in sessions %}
+                        {% set pt_colors = {
+                            'weekday_day':   'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
+                            'weekday_night': 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300',
+                            'weekend_day':   'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300',
+                            'weekend_night': 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300',
+                        } %}
+                        {% set pt_labels = {
+                            'weekday_day':   'Weekday Day',
+                            'weekday_night': 'Weekday Night',
+                            'weekend_day':   'Weekend Day',
+                            'weekend_night': 'Weekend Night',
+                        } %}
+                        <div class="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 dark:hover:bg-slate-700/30 transition-colors">
+                            <!-- Checkbox -->
+                            <input type="checkbox"
+                                   class="session-cb loc-{{ loop.index }}-cb h-4 w-4 text-emerald-600 border-gray-300 dark:border-gray-600 rounded focus:ring-emerald-500 shrink-0"
+                                   value="{{ s.session_id }}"
+                                   checked
+                                   onchange="updateSelectionStats()">
+
+                            <!-- Date/day info -->
+                            <div class="min-w-0 flex-1">
+                                <div class="flex flex-wrap items-center gap-2">
+                                    <span class="text-sm font-medium text-gray-900 dark:text-white">
+                                        {{ s.day_of_week }} {{ s.date_display }}
+                                    </span>
+                                    {% if s.session_label %}
+                                    <span class="text-xs text-gray-400 dark:text-gray-500 truncate">{{ s.session_label }}</span>
+                                    {% endif %}
+                                    {% if s.status == 'recording' %}
+                                    <span class="px-1.5 py-0.5 text-xs bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300 rounded-full flex items-center gap-1">
+                                        <span class="w-1.5 h-1.5 bg-red-500 rounded-full animate-pulse"></span>Recording
+                                    </span>
+                                    {% endif %}
+                                </div>
+                                <div class="flex items-center gap-3 mt-0.5 text-xs text-gray-400 dark:text-gray-500">
+                                    {% if s.started_at %}
+                                    <span>{{ s.started_at }}</span>
+                                    {% endif %}
+                                    {% if s.duration_h is not none %}
+                                    <span>{{ s.duration_h }}h {{ s.duration_m }}m</span>
+                                    {% endif %}
+                                </div>
+                            </div>
+
+                            <!-- Period type dropdown -->
+                            <div class="relative shrink-0" id="wiz-period-wrap-{{ s.session_id }}">
+                                <button type="button"
+                                        onclick="toggleWizPeriodMenu('{{ s.session_id }}')"
+                                        id="wiz-period-badge-{{ s.session_id }}"
+                                        class="px-2 py-0.5 text-xs font-medium rounded-full flex items-center gap-1 transition-colors {{ pt_colors.get(s.period_type, 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400') }}"
+                                        title="Click to change period type">
+                                    <span id="wiz-period-label-{{ s.session_id }}">{{ pt_labels.get(s.period_type, 'Set period') }}</span>
+                                    <svg class="w-3 h-3 opacity-60 shrink-0" 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>
+                                </button>
+                                <div id="wiz-period-menu-{{ s.session_id }}"
+                                     class="hidden absolute right-0 top-full mt-1 z-20 bg-white dark:bg-slate-700 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg min-w-[160px] py-1">
+                                    {% for pt, pt_label in [('weekday_day','Weekday Day'),('weekday_night','Weekday Night'),('weekend_day','Weekend Day'),('weekend_night','Weekend Night')] %}
+                                    <button type="button"
+                                            onclick="setWizPeriodType('{{ s.session_id }}', '{{ pt }}')"
+                                            class="w-full text-left px-3 py-1.5 text-xs hover:bg-gray-100 dark:hover:bg-slate-600 text-gray-700 dark:text-gray-300 {% if s.period_type == pt %}font-bold{% endif %}">
+                                        {{ pt_label }}
+                                    </button>
+                                    {% endfor %}
+                                </div>
+                            </div>
+                        </div>
+                        {% endfor %}
+                    </div>
+                </div>
                 {% endfor %}
-            </div>
             {% else %}
-            <div class="text-center py-8 text-gray-500 dark:text-gray-400">
+            <div class="text-center py-10 text-gray-500 dark:text-gray-400">
-                <p>No Leq measurement files found in this project.</p>
+                <svg class="w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <p class="text-sm mt-1">Upload RND files with '_Leq_' in the filename to generate reports.</p>
+                    <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>
+                <p>No monitoring sessions found.</p>
+                <p class="text-sm mt-1">Upload data files to create sessions first.</p>
             </div>
             {% endif %}
         </div>
 
         <!-- Footer Buttons -->
         <div class="flex flex-col sm:flex-row items-center justify-between gap-3 pb-6">
-            <a href="/api/projects/{{ project_id }}"
+            <a href="/projects/{{ project_id }}"
                class="w-full sm:w-auto px-6 py-2.5 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors text-center text-sm font-medium">
                 Cancel
             </a>
@@ -191,180 +220,173 @@
 </div>
 
 <script>
-let reportTemplates = [];
+const PROJECT_ID = '{{ project_id }}';
 
-// ---- Template management (same as rnd_viewer.html) ----
+const PERIOD_COLORS = {
+    weekday_day:   'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
+    weekday_night: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300',
+    weekend_day:   'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300',
+    weekend_night: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300',
+};
+const PERIOD_LABELS = {
+    weekday_day:   'Weekday Day',
+    weekday_night: 'Weekday Night',
+    weekend_day:   'Weekend Day',
+    weekend_night: 'Weekend Night',
+};
+const ALL_PERIOD_BADGE_CLASSES = [
+    'bg-gray-100','text-gray-500','dark:bg-gray-700','dark:text-gray-400',
+    ...new Set(Object.values(PERIOD_COLORS).flatMap(s => s.split(' ')))
+];
+
+// ── Location accordion ────────────────────────────────────────────
+
+function toggleLocation(locId) {
+    const body = document.getElementById(locId);
+    const chevron = document.getElementById('chevron-' + locId);
+    body.classList.toggle('hidden');
+    chevron.style.transform = body.classList.contains('hidden') ? 'rotate(-90deg)' : '';
+}
+
+function selectLocation(locId) {
+    document.querySelectorAll('.' + locId + '-cb').forEach(cb => cb.checked = true);
+    updateSelectionStats();
+}
+
+function deselectLocation(locId) {
+    document.querySelectorAll('.' + locId + '-cb').forEach(cb => cb.checked = false);
+    updateSelectionStats();
+}
+
+function selectAllSessions() {
+    document.querySelectorAll('.session-cb').forEach(cb => cb.checked = true);
+    updateSelectionStats();
+}
+
+function deselectAllSessions() {
+    document.querySelectorAll('.session-cb').forEach(cb => cb.checked = false);
+    updateSelectionStats();
+}
+
+function updateSelectionStats() {
+    const count = document.querySelectorAll('.session-cb:checked').length;
+    document.getElementById('selected-count').textContent = count;
+    document.getElementById('preview-btn').disabled = count === 0;
+}
+
+// ── Period type dropdown (wizard) ─────────────────────────────────
+
+function toggleWizPeriodMenu(sessionId) {
+    const menu = document.getElementById('wiz-period-menu-' + sessionId);
+    document.querySelectorAll('[id^="wiz-period-menu-"]').forEach(m => {
+        if (m.id !== 'wiz-period-menu-' + sessionId) m.classList.add('hidden');
+    });
+    menu.classList.toggle('hidden');
+}
+
+document.addEventListener('click', function(e) {
+    if (!e.target.closest('[id^="wiz-period-wrap-"]')) {
+        document.querySelectorAll('[id^="wiz-period-menu-"]').forEach(m => m.classList.add('hidden'));
+    }
+});
+
+async function setWizPeriodType(sessionId, periodType) {
+    document.getElementById('wiz-period-menu-' + sessionId).classList.add('hidden');
+    const badge = document.getElementById('wiz-period-badge-' + sessionId);
+    badge.disabled = true;
+    try {
+        const resp = await fetch(`/api/projects/${PROJECT_ID}/sessions/${sessionId}`, {
+            method: 'PATCH',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({period_type: periodType}),
+        });
+        if (!resp.ok) throw new Error(await resp.text());
+        ALL_PERIOD_BADGE_CLASSES.forEach(c => badge.classList.remove(c));
+        const colorStr = PERIOD_COLORS[periodType] || 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400';
+        badge.classList.add(...colorStr.split(' ').filter(Boolean));
+        document.getElementById('wiz-period-label-' + sessionId).textContent = PERIOD_LABELS[periodType] || periodType;
+    } catch(err) {
+        alert('Failed to update period type: ' + err.message);
+    } finally {
+        badge.disabled = false;
+    }
+}
+
+// ── Template management ───────────────────────────────────────────
+
+let reportTemplates = [];
 
 async function loadTemplates() {
     try {
-        const response = await fetch('/api/report-templates?project_id={{ project_id }}');
+        const resp = await fetch('/api/report-templates?project_id=' + PROJECT_ID);
-        if (response.ok) {
+        if (resp.ok) {
-            reportTemplates = await response.json();
+            reportTemplates = await resp.json();
             populateTemplateDropdown();
         }
-    } catch (error) {
+    } catch(e) { console.error('Error loading templates:', e); }
-        console.error('Error loading templates:', error);
-    }
 }
 
 function populateTemplateDropdown() {
     const select = document.getElementById('template-select');
     if (!select) return;
     select.innerHTML = '<option value="">-- Select a template --</option>';
-    reportTemplates.forEach(template => {
+    reportTemplates.forEach(t => {
-        const option = document.createElement('option');
+        const opt = document.createElement('option');
-        option.value = template.id;
+        opt.value = t.id;
-        option.textContent = template.name;
+        opt.textContent = t.name;
-        option.dataset.config = JSON.stringify(template);
+        opt.dataset.config = JSON.stringify(t);
-        select.appendChild(option);
+        select.appendChild(opt);
     });
 }
 
 function applyTemplate() {
     const select = document.getElementById('template-select');
-    const selectedOption = select.options[select.selectedIndex];
+    const opt = select.options[select.selectedIndex];
-    if (!selectedOption.value) return;
+    if (!opt.value) return;
-    const template = JSON.parse(selectedOption.dataset.config);
+    const t = JSON.parse(opt.dataset.config);
-    if (template.report_title) document.getElementById('report-title').value = template.report_title;
+    if (t.report_title) document.getElementById('report-title').value = t.report_title;
-    if (template.start_time) document.getElementById('start-time').value = template.start_time;
-    if (template.end_time) document.getElementById('end-time').value = template.end_time;
-    if (template.start_date) document.getElementById('start-date').value = template.start_date;
-    if (template.end_date) document.getElementById('end-date').value = template.end_date;
-    updatePresetButtons();
 }
 
 async function saveAsTemplate() {
     const name = prompt('Enter a name for this template:');
     if (!name) return;
-    const templateData = {
+    const data = {
-        name: name,
+        name,
-        project_id: '{{ project_id }}',
+        project_id: PROJECT_ID,
         report_title: document.getElementById('report-title').value || 'Background Noise Study',
-        start_time: document.getElementById('start-time').value || null,
-        end_time: document.getElementById('end-time').value || null,
-        start_date: document.getElementById('start-date').value || null,
-        end_date: document.getElementById('end-date').value || null
     };
     try {
-        const response = await fetch('/api/report-templates', {
+        const resp = await fetch('/api/report-templates', {
             method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
+            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify(templateData)
+            body: JSON.stringify(data),
         });
-        if (response.ok) {
+        if (resp.ok) { alert('Template saved!'); loadTemplates(); }
-            alert('Template saved successfully!');
+        else alert('Failed to save template');
-            loadTemplates();
+    } catch(e) { alert('Error: ' + e.message); }
-        } else {
-            alert('Failed to save template');
-        }
-    } catch (error) {
-        alert('Error saving template: ' + error.message);
-    }
 }
 
-// ---- Time preset buttons ----
+// ── Navigate to preview ───────────────────────────────────────────
-
-function setTimePreset(preset) {
-    const startTimeInput = document.getElementById('start-time');
-    const endTimeInput = document.getElementById('end-time');
-
-    document.querySelectorAll('.preset-btn').forEach(btn => {
-        btn.classList.remove('bg-emerald-600', 'text-white');
-        btn.classList.add('bg-gray-200', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300');
-    });
-
-    switch (preset) {
-        case 'night':
-            startTimeInput.value = '19:00';
-            endTimeInput.value = '07:00';
-            break;
-        case 'day':
-            startTimeInput.value = '07:00';
-            endTimeInput.value = '19:00';
-            break;
-        case 'all':
-            startTimeInput.value = '';
-            endTimeInput.value = '';
-            break;
-        case 'custom':
-            break;
-    }
-
-    const activeBtn = document.querySelector(`[data-preset="${preset}"]`);
-    if (activeBtn) {
-        activeBtn.classList.remove('bg-gray-200', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300');
-        activeBtn.classList.add('bg-emerald-600', 'text-white');
-    }
-}
-
-function updatePresetButtons() {
-    const startTime = document.getElementById('start-time').value;
-    const endTime = document.getElementById('end-time').value;
-
-    document.querySelectorAll('.preset-btn').forEach(btn => {
-        btn.classList.remove('bg-emerald-600', 'text-white');
-        btn.classList.add('bg-gray-200', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300');
-    });
-
-    let preset = 'custom';
-    if (startTime === '19:00' && endTime === '07:00') preset = 'night';
-    else if (startTime === '07:00' && endTime === '19:00') preset = 'day';
-    else if (!startTime && !endTime) preset = 'all';
-
-    const activeBtn = document.querySelector(`[data-preset="${preset}"]`);
-    if (activeBtn) {
-        activeBtn.classList.remove('bg-gray-200', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300');
-        activeBtn.classList.add('bg-emerald-600', 'text-white');
-    }
-}
-
-// ---- Location checkboxes ----
-
-function updateSelectedCount() {
-    const checked = document.querySelectorAll('input[name="location"]:checked').length;
-    document.getElementById('selected-count').textContent = checked;
-    document.getElementById('preview-btn').disabled = checked === 0;
-}
-
-function selectAll() {
-    document.querySelectorAll('input[name="location"]').forEach(cb => cb.checked = true);
-    updateSelectedCount();
-}
-
-function deselectAll() {
-    document.querySelectorAll('input[name="location"]').forEach(cb => cb.checked = false);
-    updateSelectedCount();
-}
-
-function getCheckedLocations() {
-    return Array.from(document.querySelectorAll('input[name="location"]:checked')).map(cb => cb.value);
-}
-
-// ---- Navigate to preview ----
 
 function gotoPreview() {
-    const checked = getCheckedLocations();
+    const checked = Array.from(document.querySelectorAll('.session-cb:checked')).map(cb => cb.value);
     if (checked.length === 0) {
-        alert('Please select at least one location.');
+        alert('Please select at least one session.');
         return;
     }
-
     const params = new URLSearchParams({
-        report_title: document.getElementById('report-title').value || 'Background Noise Study',
+        report_title:   document.getElementById('report-title').value   || 'Background Noise Study',
-        project_name: document.getElementById('report-project').value || '',
+        project_name:   document.getElementById('report-project').value || '',
-        client_name: document.getElementById('report-client').value || '',
+        client_name:    document.getElementById('report-client').value  || '',
-        start_time: document.getElementById('start-time').value || '',
+        selected_sessions: checked.join(','),
-        end_time: document.getElementById('end-time').value || '',
-        start_date: document.getElementById('start-date').value || '',
-        end_date: document.getElementById('end-date').value || '',
-        enabled_locations: checked.join(','),
     });
-
+    window.location.href = `/api/projects/${PROJECT_ID}/combined-report-preview?${params.toString()}`;
-    window.location.href = `/api/projects/{{ project_id }}/combined-report-preview?${params.toString()}`;
 }
 
-// ---- Init ----
+// ── Init ─────────────────────────────────────────────────────────
-document.addEventListener('DOMContentLoaded', function () {
+
+document.addEventListener('DOMContentLoaded', function() {
+    updateSelectionStats();
     loadTemplates();
 });
 </script>

templates/nrl_detail.html

@@ -385,16 +385,27 @@
                               file:text-sm file:font-medium file:bg-seismo-orange file:text-white
                               hover:file:bg-seismo-navy file:cursor-pointer" />
                 <div class="flex items-center gap-3 mt-3">
-                    <button onclick="submitUpload()"
+                    <button id="upload-btn" onclick="submitUpload()"
                             class="px-4 py-1.5 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                         Import Files
                     </button>
-                    <button onclick="toggleUploadPanel()"
+                    <button id="upload-cancel-btn" onclick="toggleUploadPanel()"
                             class="px-4 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
                         Cancel
                     </button>
                     <span id="upload-status" class="text-sm hidden"></span>
                 </div>
+                <!-- Progress bar (hidden until upload starts) -->
+                <div id="upload-progress-wrap" class="hidden mt-3">
+                    <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mb-1">
+                        <span id="upload-progress-label">Uploading…</span>
+                    </div>
+                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+                        <div id="upload-progress-bar"
+                             class="bg-green-500 h-2 rounded-full transition-all duration-300"
+                             style="width: 0%"></div>
+                    </div>
+                </div>
             </div>
 
             <div id="data-files-list"
@@ -629,57 +640,105 @@ function toggleUploadPanel() {
     const panel = document.getElementById('upload-panel');
     const status = document.getElementById('upload-status');
     panel.classList.toggle('hidden');
-    // Reset status when reopening
+    // Reset state when reopening
     if (!panel.classList.contains('hidden')) {
         status.textContent = '';
         status.className = 'text-sm hidden';
         document.getElementById('upload-input').value = '';
+        document.getElementById('upload-progress-wrap').classList.add('hidden');
+        document.getElementById('upload-progress-bar').style.width = '0%';
     }
 }
 
-async function submitUpload() {
+function submitUpload() {
     const input = document.getElementById('upload-input');
     const status = document.getElementById('upload-status');
+    const btn = document.getElementById('upload-btn');
+    const cancelBtn = document.getElementById('upload-cancel-btn');
+    const progressWrap = document.getElementById('upload-progress-wrap');
+    const progressBar = document.getElementById('upload-progress-bar');
+    const progressLabel = document.getElementById('upload-progress-label');
 
     if (!input.files.length) {
         alert('Please select files to upload.');
         return;
     }
 
+    const fileCount = input.files.length;
     const formData = new FormData();
     for (const file of input.files) {
         formData.append('files', file);
     }
 
-    status.textContent = 'Uploading\u2026';
+    // Disable controls and show progress bar
-    status.className = 'text-sm text-gray-500';
+    btn.disabled = true;
+    btn.textContent = 'Uploading\u2026';
+    btn.classList.add('opacity-60', 'cursor-not-allowed');
+    cancelBtn.disabled = true;
+    cancelBtn.classList.add('opacity-40', 'cursor-not-allowed');
+    status.className = 'text-sm hidden';
+    progressWrap.classList.remove('hidden');
+    progressBar.style.width = '0%';
+    progressLabel.textContent = `Uploading ${fileCount} file${fileCount !== 1 ? 's' : ''}\u2026`;
 
-    try {
+    const xhr = new XMLHttpRequest();
-        const response = await fetch(
-            `/api/projects/${projectId}/nrl/${locationId}/upload-data`,
-            { method: 'POST', body: formData }
-        );
-        const data = await response.json();
 
-        if (response.ok) {
+    xhr.upload.addEventListener('progress', (e) => {
-            const parts = [`Imported ${data.files_imported} file${data.files_imported !== 1 ? 's' : ''}`];
+        if (e.lengthComputable) {
-            if (data.leq_files || data.lp_files) {
+            const pct = Math.round((e.loaded / e.total) * 100);
-                parts.push(`(${data.leq_files} Leq, ${data.lp_files} Lp)`);
+            progressBar.style.width = pct + '%';
+            progressLabel.textContent = `Uploading ${fileCount} file${fileCount !== 1 ? 's' : ''}\u2026 ${pct}%`;
+        }
+    });
+
+    xhr.upload.addEventListener('load', () => {
+        progressBar.style.width = '100%';
+        progressLabel.textContent = 'Processing files on server\u2026';
+    });
+
+    xhr.addEventListener('load', () => {
+        progressWrap.classList.add('hidden');
+        btn.disabled = false;
+        btn.textContent = 'Import Files';
+        btn.classList.remove('opacity-60', 'cursor-not-allowed');
+        cancelBtn.disabled = false;
+        cancelBtn.classList.remove('opacity-40', 'cursor-not-allowed');
+
+        try {
+            const data = JSON.parse(xhr.responseText);
+            if (xhr.status >= 200 && xhr.status < 300) {
+                const parts = [`Imported ${data.files_imported} file${data.files_imported !== 1 ? 's' : ''}`];
+                if (data.leq_files || data.lp_files) {
+                    parts.push(`(${data.leq_files} Leq, ${data.lp_files} Lp)`);
+                }
+                if (data.store_name) parts.push(`\u2014 ${data.store_name}`);
+                status.textContent = parts.join(' ');
+                status.className = 'text-sm text-green-600 dark:text-green-400';
+                input.value = '';
+                htmx.trigger(document.getElementById('data-files-list'), 'load');
+            } else {
+                status.textContent = `Error: ${data.detail || 'Upload failed'}`;
+                status.className = 'text-sm text-red-600 dark:text-red-400';
             }
-            if (data.store_name) parts.push(`\u2014 ${data.store_name}`);
+        } catch {
-            status.textContent = parts.join(' ');
+            status.textContent = 'Error: Unexpected server response';
-            status.className = 'text-sm text-green-600 dark:text-green-400';
-            input.value = '';
-            // Refresh the file list
-            htmx.trigger(document.getElementById('data-files-list'), 'load');
-        } else {
-            status.textContent = `Error: ${data.detail || 'Upload failed'}`;
             status.className = 'text-sm text-red-600 dark:text-red-400';
         }
-    } catch (err) {
+    });
-        status.textContent = `Error: ${err.message}`;
+
+    xhr.addEventListener('error', () => {
+        progressWrap.classList.add('hidden');
+        btn.disabled = false;
+        btn.textContent = 'Import Files';
+        btn.classList.remove('opacity-60', 'cursor-not-allowed');
+        cancelBtn.disabled = false;
+        cancelBtn.classList.remove('opacity-40', 'cursor-not-allowed');
+        status.textContent = 'Error: Network error during upload';
         status.className = 'text-sm text-red-600 dark:text-red-400';
-    }
+    });
+
+    xhr.open('POST', `/api/projects/${projectId}/nrl/${locationId}/upload-data`);
+    xhr.send(formData);
 }
 </script>
 {% endblock %}

templates/partials/projects/session_list.html

@@ -1,79 +1,149 @@
 <!-- Monitoring Sessions List -->
 {% if sessions %}
-    <div class="space-y-4">
+    <div class="space-y-3">
         {% for item in sessions %}
-        <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
+        {% set s = item.session %}
-            <div class="flex items-start justify-between gap-3">
+        {% set loc = item.location %}
+        {% set unit = item.unit %}
+
+        {# Period display maps #}
+        {% set period_labels = {
+            'weekday_day':   'Weekday Day',
+            'weekday_night': 'Weekday Night',
+            'weekend_day':   'Weekend Day',
+            'weekend_night': 'Weekend Night',
+        } %}
+        {% set period_colors = {
+            'weekday_day':   'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
+            'weekday_night': 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300',
+            'weekend_day':   'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300',
+            'weekend_night': 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300',
+        } %}
+
+        <div class="border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-slate-800 hover:border-gray-300 dark:hover:border-gray-600 transition-colors"
+             id="session-card-{{ s.id }}">
+            <div class="flex items-start justify-between gap-3 p-4 pb-3">
                 <div class="min-w-0 flex-1">
-                    <div class="flex items-center gap-3 mb-2">
+
-                        <h4 class="font-semibold text-gray-900 dark:text-white">
+                    <!-- Label + badges -->
-                            Session {{ item.session.id[:8] }}...
+                    <div class="flex flex-wrap items-center gap-2 mb-2">
-                        </h4>
+                        <span id="label-display-{{ s.id }}"
-                        {% if item.session.status == 'recording' %}
+                              class="font-semibold text-gray-900 dark:text-white text-sm cursor-pointer hover:text-seismo-orange"
-                            <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300 rounded-full flex items-center">
+                              title="Click to edit label"
-                                <span class="w-2 h-2 bg-red-500 rounded-full mr-1.5 animate-pulse"></span>
+                              onclick="startEditLabel('{{ s.id }}')">
-                                Recording
+                            {{ s.session_label or ('Session ' + s.id[:8] + '…') }}
-                            </span>
+                        </span>
-                        {% elif item.session.status == 'completed' %}
+                        <input id="label-input-{{ s.id }}"
-                            <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 rounded-full">
+                               class="hidden text-sm font-semibold bg-transparent border-b border-seismo-orange text-gray-900 dark:text-white focus:outline-none min-w-[180px]"
-                                Completed
+                               value="{{ s.session_label or '' }}"
-                            </span>
+                               onblur="saveLabel('{{ s.id }}')"
-                        {% elif item.session.status == 'paused' %}
+                               onkeydown="if(event.key==='Enter'){saveLabel('{{ s.id }}');}if(event.key==='Escape'){cancelEditLabel('{{ s.id }}');}">
-                            <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300 rounded-full">
+
-                                Paused
+                        {% if s.status == 'recording' %}
-                            </span>
+                            <span class="px-2 py-0.5 text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300 rounded-full flex items-center gap-1">
-                        {% elif item.session.status == 'failed' %}
+                                <span class="w-1.5 h-1.5 bg-red-500 rounded-full animate-pulse"></span>Recording
-                            <span class="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 rounded-full">
-                                Failed
                             </span>
+                        {% elif s.status == 'completed' %}
+                            <span class="px-2 py-0.5 text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 rounded-full">Completed</span>
+                        {% elif s.status == 'failed' %}
+                            <span class="px-2 py-0.5 text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400 rounded-full">Failed</span>
                         {% endif %}
+
+                        <!-- Period type badge (click to change) -->
+                        <div class="relative" id="period-wrap-{{ s.id }}">
+                            <button onclick="togglePeriodMenu('{{ s.id }}')"
+                                    id="period-badge-{{ s.id }}"
+                                    class="px-2 py-0.5 text-xs font-medium rounded-full flex items-center gap-1 transition-colors {{ period_colors.get(s.period_type, 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400') }}"
+                                    title="Click to change period type">
+                                <span id="period-label-{{ s.id }}">{{ period_labels.get(s.period_type, 'Set period') }}</span>
+                                <svg class="w-3 h-3 opacity-60 shrink-0" 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>
+                            </button>
+                            <div id="period-menu-{{ s.id }}"
+                                 class="hidden absolute left-0 top-full mt-1 z-20 bg-white dark:bg-slate-700 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg min-w-[160px] py-1">
+                                {% for pt, pt_label in [('weekday_day','Weekday Day'),('weekday_night','Weekday Night'),('weekend_day','Weekend Day'),('weekend_night','Weekend Night')] %}
+                                <button onclick="setPeriodType('{{ s.id }}', '{{ pt }}')"
+                                        class="w-full text-left px-3 py-1.5 text-xs hover:bg-gray-100 dark:hover:bg-slate-600 text-gray-700 dark:text-gray-300 {% if s.period_type == pt %}font-bold{% endif %}">
+                                    {{ pt_label }}
+                                </button>
+                                {% endfor %}
+                            </div>
+                        </div>
                     </div>
 
-                    <div class="grid grid-cols-2 gap-3 text-sm text-gray-600 dark:text-gray-400">
+                    <!-- Info grid -->
-                        {% if item.unit %}
+                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-x-4 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
-                        <div>
+                        {% if loc %}
-                            <span class="text-xs text-gray-500 dark:text-gray-500">Unit:</span>
+                        <div class="flex items-center gap-1">
-                            <a href="/slm/{{ item.unit.id }}?from_project={{ project_id }}" class="text-seismo-orange hover:text-seismo-navy font-medium ml-1">
+                            <svg class="w-3.5 h-3.5 shrink-0 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                {{ item.unit.id }}
+                                <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>
-                            </a>
+                                <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-medium text-gray-700 dark:text-gray-300">{{ loc.name }}</span>
                         </div>
                         {% endif %}
 
-                        <div>
+                        {% if s.started_at %}
-                            <span class="text-xs text-gray-500">Started:</span>
+                        <div class="flex items-center gap-1">
-                            <span class="ml-1">{{ item.session.started_at|local_datetime if item.session.started_at else 'N/A' }}</span>
+                            <svg class="w-3.5 h-3.5 shrink-0 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        </div>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-
+                            </svg>
-                        {% if item.session.stopped_at %}
+                            <span>{{ s.started_at|local_datetime }}</span>
-                        <div>
-                            <span class="text-xs text-gray-500">Ended:</span>
-                            <span class="ml-1">{{ item.session.stopped_at|local_datetime }}</span>
                         </div>
                         {% endif %}
 
-                        {% if item.session.duration_seconds %}
+                        {% if s.stopped_at %}
-                        <div>
+                        <div class="flex items-center gap-1">
-                            <span class="text-xs text-gray-500">Duration:</span>
+                            <svg class="w-3.5 h-3.5 shrink-0 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <span class="ml-1">{{ (item.session.duration_seconds // 3600) }}h {{ ((item.session.duration_seconds % 3600) // 60) }}m</span>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                            </svg>
+                            <span>Ended {{ s.stopped_at|local_datetime }}</span>
+                        </div>
+                        {% endif %}
+
+                        {% if s.duration_seconds %}
+                        <div class="flex items-center gap-1">
+                            <svg class="w-3.5 h-3.5 shrink-0 text-gray-400" 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>
+                            <span>{{ (s.duration_seconds // 3600) }}h {{ ((s.duration_seconds % 3600) // 60) }}m</span>
+                        </div>
+                        {% endif %}
+
+                        {% if unit %}
+                        <div class="flex items-center gap-1">
+                            <svg class="w-3.5 h-3.5 shrink-0 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2v-4M9 21H5a2 2 0 01-2-2v-4m0 0h18"></path>
+                            </svg>
+                            <a href="/slm/{{ unit.id }}?from_project={{ project_id }}"
+                               class="text-seismo-orange hover:underline font-medium">{{ unit.id }}</a>
+                        </div>
+                        {% endif %}
+
+                        {% if s.device_model %}
+                        <div class="flex items-center gap-1">
+                            <svg class="w-3.5 h-3.5 shrink-0 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
+                            </svg>
+                            <span>{{ s.device_model }}</span>
                         </div>
                         {% endif %}
                     </div>
 
-                    {% if item.session.notes %}
+                    {% if s.notes %}
-                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
+                    <p class="text-xs text-gray-400 dark:text-gray-500 mt-2 italic">{{ s.notes }}</p>
-                        {{ item.session.notes }}
-                    </p>
                     {% endif %}
                 </div>
 
-                <div class="flex items-center gap-2">
+                <div class="flex items-center gap-2 shrink-0">
-                    {% if item.session.status == 'recording' %}
+                    {% if s.status == 'recording' %}
-                        <button onclick="stopRecording('{{ item.session.id }}')"
+                    <button onclick="stopRecording('{{ s.id }}')"
-                                class="px-3 py-1 text-xs bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
+                            class="px-3 py-1 text-xs bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
-                            Stop
+                        Stop
-                        </button>
+                    </button>
                     {% endif %}
-                    <button onclick="viewSession('{{ item.session.id }}')"
+                    <button onclick="viewSession('{{ s.id }}')"
                             class="px-3 py-1 text-xs bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
                         Details
                     </button>
@@ -84,24 +154,107 @@
     </div>
 {% else %}
     <div class="text-center py-12">
-        <svg class="w-16 h-16 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg class="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600" 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>
-        <p class="text-gray-500 dark:text-gray-400 mb-2">No monitoring sessions yet</p>
+        <p class="text-gray-500 dark:text-gray-400 mb-1">No monitoring sessions yet</p>
-        <p class="text-sm text-gray-400 dark:text-gray-500">Schedule a session to get started</p>
+        <p class="text-sm text-gray-400 dark:text-gray-500">Upload data to create sessions</p>
     </div>
 {% endif %}
 
 <script>
+const PERIOD_COLORS = {
+    weekday_day:   'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
+    weekday_night: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300',
+    weekend_day:   'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300',
+    weekend_night: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300',
+};
+const PERIOD_LABELS = {
+    weekday_day:   'Weekday Day',
+    weekday_night: 'Weekday Night',
+    weekend_day:   'Weekend Day',
+    weekend_night: 'Weekend Night',
+};
+const FALLBACK_COLORS = ['bg-gray-100','text-gray-500','dark:bg-gray-700','dark:text-gray-400'];
+const ALL_BADGE_COLORS = [...new Set([
+    ...FALLBACK_COLORS,
+    ...Object.values(PERIOD_COLORS).flatMap(s => s.split(' '))
+])];
+
+function togglePeriodMenu(sessionId) {
+    const menu = document.getElementById('period-menu-' + sessionId);
+    document.querySelectorAll('[id^="period-menu-"]').forEach(m => {
+        if (m.id !== 'period-menu-' + sessionId) m.classList.add('hidden');
+    });
+    menu.classList.toggle('hidden');
+}
+
+document.addEventListener('click', function(e) {
+    if (!e.target.closest('[id^="period-wrap-"]')) {
+        document.querySelectorAll('[id^="period-menu-"]').forEach(m => m.classList.add('hidden'));
+    }
+});
+
+async function setPeriodType(sessionId, periodType) {
+    document.getElementById('period-menu-' + sessionId).classList.add('hidden');
+    const badge = document.getElementById('period-badge-' + sessionId);
+    badge.disabled = true;
+    try {
+        const resp = await fetch(`/api/projects/{{ project_id }}/sessions/${sessionId}`, {
+            method: 'PATCH',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({period_type: periodType}),
+        });
+        if (!resp.ok) throw new Error(await resp.text());
+        ALL_BADGE_COLORS.forEach(c => badge.classList.remove(c));
+        badge.classList.add(...(PERIOD_COLORS[periodType] || FALLBACK_COLORS.join(' ')).split(' ').filter(Boolean));
+        document.getElementById('period-label-' + sessionId).textContent = PERIOD_LABELS[periodType] || periodType;
+    } catch(err) {
+        alert('Failed to update period type: ' + err.message);
+    } finally {
+        badge.disabled = false;
+    }
+}
+
+function startEditLabel(sessionId) {
+    document.getElementById('label-display-' + sessionId).classList.add('hidden');
+    const input = document.getElementById('label-input-' + sessionId);
+    input.classList.remove('hidden');
+    input.focus();
+    input.select();
+}
+
+function cancelEditLabel(sessionId) {
+    document.getElementById('label-input-' + sessionId).classList.add('hidden');
+    document.getElementById('label-display-' + sessionId).classList.remove('hidden');
+}
+
+async function saveLabel(sessionId) {
+    const display = document.getElementById('label-display-' + sessionId);
+    const input   = document.getElementById('label-input-' + sessionId);
+    const newLabel = input.value.trim();
+    try {
+        const resp = await fetch(`/api/projects/{{ project_id }}/sessions/${sessionId}`, {
+            method: 'PATCH',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({session_label: newLabel}),
+        });
+        if (!resp.ok) throw new Error(await resp.text());
+        display.textContent = newLabel || ('Session ' + sessionId.slice(0, 8) + '…');
+    } catch(err) {
+        alert('Failed to save label: ' + err.message);
+    } finally {
+        input.classList.add('hidden');
+        display.classList.remove('hidden');
+    }
+}
+
 function viewSession(sessionId) {
-    // TODO: Implement session detail modal or page
     alert('Session details coming soon: ' + sessionId);
 }
 
 function stopRecording(sessionId) {
     if (!confirm('Stop this monitoring session?')) return;
-
-    // TODO: Implement stop recording API call
     alert('Stop recording API coming soon for session: ' + sessionId);
 }
 </script>

templates/projects/detail.html

@@ -264,16 +264,28 @@
                                       file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0
                                       file:text-sm file:font-medium file:bg-seismo-orange file:text-white
                                       hover:file:bg-seismo-navy file:cursor-pointer" />
-                        <button onclick="submitUploadAll()"
+                        <span id="upload-all-file-count" class="text-xs text-gray-500 dark:text-gray-400 hidden"></span>
+                        <button id="upload-all-btn" onclick="submitUploadAll()"
                                 class="px-4 py-1.5 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                             Import
                         </button>
-                        <button onclick="toggleUploadAll()"
+                        <button id="upload-all-cancel-btn" onclick="toggleUploadAll()"
                                 class="px-4 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
                             Cancel
                         </button>
                         <span id="upload-all-status" class="text-sm hidden"></span>
                     </div>
+                    <!-- Progress bar -->
+                    <div id="upload-all-progress-wrap" class="hidden mt-3">
+                        <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mb-1">
+                            <span id="upload-all-progress-label">Uploading…</span>
+                        </div>
+                        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+                            <div id="upload-all-progress-bar"
+                                 class="bg-green-500 h-2 rounded-full transition-all duration-300"
+                                 style="width: 0%"></div>
+                        </div>
+                    </div>
                     <!-- Result summary -->
                     <div id="upload-all-results" class="hidden mt-3 text-sm space-y-1"></div>
                 </div>
@@ -1642,75 +1654,148 @@ function toggleUploadAll() {
         document.getElementById('upload-all-results').classList.add('hidden');
         document.getElementById('upload-all-results').innerHTML = '';
         document.getElementById('upload-all-input').value = '';
+        document.getElementById('upload-all-file-count').classList.add('hidden');
+        document.getElementById('upload-all-progress-wrap').classList.add('hidden');
+        document.getElementById('upload-all-progress-bar').style.width = '0%';
     }
 }
 
-async function submitUploadAll() {
+// Show file count and filter info when folder is selected
+document.getElementById('upload-all-input').addEventListener('change', function() {
+    const countEl = document.getElementById('upload-all-file-count');
+    const total = this.files.length;
+    if (!total) { countEl.classList.add('hidden'); return; }
+    const wanted = Array.from(this.files).filter(_isWantedFile).length;
+    countEl.textContent = `${wanted} of ${total} files will be uploaded (Leq + .rnh only)`;
+    countEl.classList.remove('hidden');
+});
+
+function _isWantedFile(f) {
+    const n = (f.webkitRelativePath || f.name).toLowerCase();
+    const base = n.split('/').pop();
+    if (base.endsWith('.rnh')) return true;
+    if (base.endsWith('.rnd')) {
+        if (base.includes('_leq_')) return true;   // NL-43 Leq
+        if (base.startsWith('au2_')) return true;   // AU2/NL-23 format
+        if (!base.includes('_lp')) return true;     // unknown format — keep
+    }
+    return false;
+}
+
+function submitUploadAll() {
     const input = document.getElementById('upload-all-input');
     const status = document.getElementById('upload-all-status');
     const resultsEl = document.getElementById('upload-all-results');
+    const btn = document.getElementById('upload-all-btn');
+    const cancelBtn = document.getElementById('upload-all-cancel-btn');
+    const progressWrap = document.getElementById('upload-all-progress-wrap');
+    const progressBar = document.getElementById('upload-all-progress-bar');
+    const progressLabel = document.getElementById('upload-all-progress-label');
 
     if (!input.files.length) {
         alert('Please select a folder to upload.');
         return;
     }
 
+    // Filter client-side — only send Leq .rnd and .rnh files
+    const filesToSend = Array.from(input.files).filter(_isWantedFile);
+    if (!filesToSend.length) {
+        alert('No Leq .rnd or .rnh files found in selected folder.');
+        return;
+    }
+
     const formData = new FormData();
-    for (const f of input.files) {
+    for (const f of filesToSend) {
-        // webkitRelativePath gives the path relative to the selected folder root
         formData.append('files', f);
         formData.append('paths', f.webkitRelativePath || f.name);
     }
 
-    status.textContent = `Uploading ${input.files.length} files\u2026`;
+    // Disable controls and show progress
-    status.className = 'text-sm text-gray-500';
+    btn.disabled = true;
+    btn.textContent = 'Uploading\u2026';
+    btn.classList.add('opacity-60', 'cursor-not-allowed');
+    cancelBtn.disabled = true;
+    cancelBtn.classList.add('opacity-40', 'cursor-not-allowed');
+    status.className = 'text-sm hidden';
     resultsEl.classList.add('hidden');
+    progressWrap.classList.remove('hidden');
+    progressBar.style.width = '0%';
+    progressLabel.textContent = `Uploading ${filesToSend.length} files\u2026`;
 
-    try {
+    const xhr = new XMLHttpRequest();
-        const response = await fetch(
-            `/api/projects/{{ project_id }}/upload-all`,
-            { method: 'POST', body: formData }
-        );
-        const data = await response.json();
 
-        if (response.ok) {
+    xhr.upload.addEventListener('progress', (e) => {
-            const s = data.sessions_created;
+        if (e.lengthComputable) {
-            const f = data.files_imported;
+            const pct = Math.round((e.loaded / e.total) * 100);
-            status.textContent = `\u2713 Imported ${f} file${f !== 1 ? 's' : ''} across ${s} session${s !== 1 ? 's' : ''}`;
+            progressBar.style.width = pct + '%';
-            status.className = 'text-sm text-green-600 dark:text-green-400';
+            progressLabel.textContent = `Uploading ${filesToSend.length} files\u2026 ${pct}%`;
-            input.value = '';
+        }
+    });
 
-            // Build results summary
+    xhr.upload.addEventListener('load', () => {
-            let html = '';
+        progressBar.style.width = '100%';
-            if (data.sessions && data.sessions.length) {
+        progressLabel.textContent = 'Processing files on server\u2026';
-                html += '<div class="font-medium text-gray-700 dark:text-gray-300 mb-1">Sessions created:</div>';
+    });
-                html += '<ul class="space-y-0.5 ml-2">';
+
-                for (const sess of data.sessions) {
+    function _resetControls() {
-                    html += `<li class="text-xs text-gray-600 dark:text-gray-400">\u2022 <span class="font-medium">${sess.location_name}</span> &mdash; ${sess.files} files`;
+        progressWrap.classList.add('hidden');
-                    if (sess.leq_files || sess.lp_files) html += ` (${sess.leq_files} Leq, ${sess.lp_files} Lp)`;
+        btn.disabled = false;
-                    if (sess.store_name) html += ` &mdash; ${sess.store_name}`;
+        btn.textContent = 'Import';
-                    html += '</li>';
+        btn.classList.remove('opacity-60', 'cursor-not-allowed');
+        cancelBtn.disabled = false;
+        cancelBtn.classList.remove('opacity-40', 'cursor-not-allowed');
+    }
+
+    xhr.addEventListener('load', () => {
+        _resetControls();
+        try {
+            const data = JSON.parse(xhr.responseText);
+            if (xhr.status >= 200 && xhr.status < 300) {
+                const s = data.sessions_created;
+                const f = data.files_imported;
+                status.textContent = `\u2713 Imported ${f} file${f !== 1 ? 's' : ''} across ${s} session${s !== 1 ? 's' : ''}`;
+                status.className = 'text-sm text-green-600 dark:text-green-400';
+                input.value = '';
+                document.getElementById('upload-all-file-count').classList.add('hidden');
+
+                let html = '';
+                if (data.sessions && data.sessions.length) {
+                    html += '<div class="font-medium text-gray-700 dark:text-gray-300 mb-1">Sessions created:</div>';
+                    html += '<ul class="space-y-0.5 ml-2">';
+                    for (const sess of data.sessions) {
+                        html += `<li class="text-xs text-gray-600 dark:text-gray-400">\u2022 <span class="font-medium">${sess.location_name}</span> &mdash; ${sess.files} files`;
+                        if (sess.leq_files || sess.lp_files) html += ` (${sess.leq_files} Leq, ${sess.lp_files} Lp)`;
+                        if (sess.store_name) html += ` &mdash; ${sess.store_name}`;
+                        html += '</li>';
+                    }
+                    html += '</ul>';
                 }
-                html += '</ul>';
+                if (data.unmatched_folders && data.unmatched_folders.length) {
+                    html += `<div class="mt-2 text-xs text-amber-600 dark:text-amber-400">\u26a0 Unmatched folders (no NRL location found): ${data.unmatched_folders.join(', ')}</div>`;
+                }
+                if (html) {
+                    resultsEl.innerHTML = html;
+                    resultsEl.classList.remove('hidden');
+                }
+                htmx.trigger(document.getElementById('unified-files'), 'refresh');
+            } else {
+                status.textContent = `Error: ${data.detail || 'Upload failed'}`;
+                status.className = 'text-sm text-red-600 dark:text-red-400';
             }
-            if (data.unmatched_folders && data.unmatched_folders.length) {
+        } catch {
-                html += `<div class="mt-2 text-xs text-amber-600 dark:text-amber-400">\u26a0 Unmatched folders (no NRL location found): ${data.unmatched_folders.join(', ')}</div>`;
+            status.textContent = 'Error: Unexpected server response';
-            }
-            if (html) {
-                resultsEl.innerHTML = html;
-                resultsEl.classList.remove('hidden');
-            }
-
-            // Refresh the unified files view
-            htmx.trigger(document.getElementById('unified-files'), 'refresh');
-        } else {
-            status.textContent = `Error: ${data.detail || 'Upload failed'}`;
             status.className = 'text-sm text-red-600 dark:text-red-400';
         }
-    } catch (err) {
+    });
-        status.textContent = `Error: ${err.message}`;
+
+    xhr.addEventListener('error', () => {
+        _resetControls();
+        status.textContent = 'Error: Network error during upload';
         status.className = 'text-sm text-red-600 dark:text-red-400';
-    }
+    });
+
+    xhr.open('POST', `/api/projects/{{ project_id }}/upload-all`);
+    xhr.send(formData);
 }
 
 // Load project details on page load and restore active tab from URL hash