From f50cf2b7f62a00affe502e80ecc0785272af773b Mon Sep 17 00:00:00 2001
From: serversdown <brian@serversdown.net>
Date: Wed, 1 Apr 2026 05:42:10 +0000
Subject: [PATCH] feat: add functionality to manage deleted projects in
 settings

- Introduced a new section for displaying soft-deleted projects.
- Implemented loading of deleted projects via an API call.
- Added restore and permanently delete options for each deleted project.
- Integrated loading of deleted projects when the data tab is shown.
---
 backend/routers/projects.py                   |  34 +
 .../partials/projects/location_list.html      |   5 -
 templates/projects/detail.html                | 622 ++++++++++--------
 templates/settings.html                       |  83 ++-
 4 files changed, 458 insertions(+), 286 deletions(-)

diff --git a/backend/routers/projects.py b/backend/routers/projects.py
index 53a4bf5..bc40b1b 100644
--- a/backend/routers/projects.py
+++ b/backend/routers/projects.py
@@ -654,6 +654,40 @@ async def create_project(request: Request, db: Session = Depends(get_db)):
     })
 
 
+@router.get("/deleted")
+async def list_deleted_projects(db: Session = Depends(get_db)):
+    """List all soft-deleted projects."""
+    projects = (
+        db.query(Project)
+        .filter(Project.status == "deleted")
+        .order_by(Project.deleted_at.desc())
+        .all()
+    )
+    return JSONResponse([
+        {
+            "id": p.id,
+            "name": p.name,
+            "client_name": p.client_name,
+            "deleted_at": p.deleted_at.isoformat() if p.deleted_at else None,
+        }
+        for p in projects
+    ])
+
+
+@router.post("/{project_id}/restore")
+async def restore_project(project_id: str, db: Session = Depends(get_db)):
+    """Restore a soft-deleted project back to active."""
+    project = db.query(Project).filter_by(id=project_id).first()
+    if not project:
+        raise HTTPException(status_code=404, detail="Project not found")
+    if project.status != "deleted":
+        raise HTTPException(status_code=400, detail="Project is not deleted")
+    project.status = "active"
+    project.deleted_at = None
+    db.commit()
+    return {"success": True, "message": f"Project '{project.name}' restored."}
+
+
 @router.get("/{project_id}")
 async def get_project(project_id: str, db: Session = Depends(get_db)):
     """
diff --git a/templates/partials/projects/location_list.html b/templates/partials/projects/location_list.html
index c455927..9c8219a 100644
--- a/templates/partials/projects/location_list.html
+++ b/templates/partials/projects/location_list.html
@@ -10,11 +10,6 @@
                                class="font-semibold text-gray-900 dark:text-white hover:text-seismo-orange truncate">
                                 {{ item.location.name }}
                             </a>
-                            {% if item.location.location_type %}
-                                <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300">
-                                    {{ item.location.location_type|capitalize }}
-                                </span>
-                            {% endif %}
                         </div>
                         {% if item.location.description %}
                             <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ item.location.description }}</p>
diff --git a/templates/projects/detail.html b/templates/projects/detail.html
index 9e42246..6cc60ed 100644
--- a/templates/projects/detail.html
+++ b/templates/projects/detail.html
@@ -35,30 +35,21 @@
                 class="tab-button px-4 py-3 border-b-2 font-medium text-sm transition-colors border-seismo-orange text-seismo-orange whitespace-nowrap">
             Overview
         </button>
-        <button onclick="switchTab('locations')"
-                data-tab="locations"
-                class="tab-button px-4 py-3 border-b-2 border-transparent font-medium text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600 transition-colors whitespace-nowrap">
-            <span id="locations-tab-label">Locations</span>
+        <button id="vibration-tab-btn" onclick="switchTab('vibration')"
+                data-tab="vibration"
+                class="tab-button hidden px-4 py-3 border-b-2 border-transparent font-medium text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600 transition-colors whitespace-nowrap">
+            <svg class="w-4 h-4 inline mr-1.5" 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"/>
+            </svg>
+            Vibration
         </button>
-        <button id="units-tab-btn" onclick="switchTab('units')"
-                data-tab="units"
-                class="tab-button px-4 py-3 border-b-2 border-transparent font-medium text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600 transition-colors whitespace-nowrap">
-            Assigned Units
-        </button>
-        <button id="schedules-tab-btn" onclick="switchTab('schedules')"
-                data-tab="schedules"
-                class="tab-button px-4 py-3 border-b-2 border-transparent font-medium text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600 transition-colors whitespace-nowrap">
-            Schedules
-        </button>
-        <button id="sessions-tab-btn" onclick="switchTab('sessions')"
-                data-tab="sessions"
-                class="tab-button px-4 py-3 border-b-2 border-transparent font-medium text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600 transition-colors whitespace-nowrap">
-            Monitoring Sessions
-        </button>
-        <button id="data-tab-btn" onclick="switchTab('data')"
-                data-tab="data"
-                class="tab-button px-4 py-3 border-b-2 border-transparent font-medium text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600 transition-colors whitespace-nowrap">
-            Data Files
+        <button id="sound-tab-btn" onclick="switchTab('sound')"
+                data-tab="sound"
+                class="tab-button hidden px-4 py-3 border-b-2 border-transparent font-medium text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600 transition-colors whitespace-nowrap">
+            <svg class="w-4 h-4 inline mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072M12 6a7 7 0 010 14M8.464 8.464a5 5 0 000 7.072"/>
+            </svg>
+            Sound
         </button>
         <button onclick="switchTab('settings')"
                 data-tab="settings"
@@ -86,111 +77,93 @@
         </div>
     </div>
 
-    <!-- Locations Tab -->
-    <div id="locations-tab" class="tab-panel hidden">
-        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
-            <div class="flex items-center justify-between mb-6">
-                <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
-                    <span id="locations-header">Locations</span>
-                </h2>
-                <button onclick="openLocationModal()" id="add-location-btn"
-                        class="px-4 py-2 bg-seismo-orange text-white rounded-lg hover:bg-seismo-navy transition-colors">
-                    <svg class="w-5 h-5 inline mr-1" 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 id="add-location-label">Add Location</span>
-                </button>
-            </div>
+    <!-- Vibration Tab -->
+    <div id="vibration-tab" class="tab-panel hidden">
+        <!-- Vibration sub-nav -->
+        <div class="flex gap-0 mb-5 border-b border-gray-200 dark:border-gray-700">
+            <button id="vib-sub-locations-btn" onclick="switchVibSubTab('locations')"
+                    class="vib-sub-tab px-4 py-2 text-sm font-medium border-b-2 border-seismo-orange text-seismo-orange -mb-px transition-colors whitespace-nowrap">
+                Locations
+            </button>
+            <!-- Future sub-tabs: Sessions, Data Files -->
+        </div>
 
-            <div id="project-locations"
-                 hx-get="/api/projects/{{ project_id }}/locations"
-                 hx-trigger="load"
-                 hx-swap="innerHTML">
-                <div class="text-center py-8 text-gray-500">Loading locations...</div>
+        <!-- Vibration Locations sub-panel -->
+        <div id="vib-sub-locations" class="vib-sub-panel">
+            <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+                <div class="flex items-center justify-between mb-6">
+                    <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Monitoring Locations</h2>
+                    <button onclick="openLocationModal('vibration')"
+                            class="px-4 py-2 bg-seismo-orange text-white rounded-lg hover:bg-seismo-navy transition-colors">
+                        <svg class="w-5 h-5 inline mr-1" 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>
+                        Add Location
+                    </button>
+                </div>
+                <div id="vibration-locations"
+                     hx-get="/api/projects/{{ project_id }}/locations?location_type=vibration"
+                     hx-trigger="load"
+                     hx-swap="innerHTML">
+                    <div class="text-center py-8 text-gray-500">Loading locations...</div>
+                </div>
             </div>
         </div>
     </div>
 
-    <!-- Units Tab -->
-    <div id="units-tab" class="tab-panel hidden">
-        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
-            <div class="flex items-center justify-between mb-6">
-                <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Assigned Units</h2>
-                <div class="text-sm text-gray-500">
-                    Units currently assigned to this project's locations
-                </div>
-            </div>
-
-            <div id="project-units"
-                 hx-get="/api/projects/{{ project_id }}/units"
-                 hx-trigger="load, every 30s"
-                 hx-swap="innerHTML">
-                <div class="text-center py-8 text-gray-500">Loading units...</div>
-            </div>
+    <!-- Sound Tab -->
+    <div id="sound-tab" class="tab-panel hidden">
+        <!-- Sound sub-nav -->
+        <div class="flex gap-0 mb-5 border-b border-gray-200 dark:border-gray-700">
+            <button id="sound-sub-locations-btn" onclick="switchSoundSubTab('locations')"
+                    class="sound-sub-tab px-4 py-2 text-sm font-medium border-b-2 border-seismo-orange text-seismo-orange -mb-px transition-colors whitespace-nowrap">
+                NRLs
+            </button>
+            <button id="sound-sub-sessions-btn" onclick="switchSoundSubTab('sessions')"
+                    class="sound-sub-tab px-4 py-2 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 -mb-px transition-colors whitespace-nowrap">
+                Sessions
+            </button>
+            <button id="sound-sub-data-btn" onclick="switchSoundSubTab('data')"
+                    class="sound-sub-tab px-4 py-2 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 -mb-px transition-colors whitespace-nowrap">
+                Data Files
+            </button>
+            <button id="sound-sub-units-btn" onclick="switchSoundSubTab('units')"
+                    class="sound-sub-tab hidden px-4 py-2 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 -mb-px transition-colors whitespace-nowrap">
+                Assigned Units
+            </button>
+            <button id="sound-sub-schedules-btn" onclick="switchSoundSubTab('schedules')"
+                    class="sound-sub-tab hidden px-4 py-2 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 -mb-px transition-colors whitespace-nowrap">
+                Schedules
+            </button>
         </div>
-    </div>
 
-    <!-- Schedules Tab -->
-    <div id="schedules-tab" class="tab-panel hidden">
-        <!-- Recurring Schedules Section -->
-        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-6">
-            <div class="flex items-center justify-between mb-6">
-                <div>
-                    <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Recurring Schedules</h2>
-                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
-                        Automated patterns that generate scheduled actions
-                    </p>
+        <!-- NRLs sub-panel -->
+        <div id="sound-sub-locations" class="sound-sub-panel">
+            <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+                <div class="flex items-center justify-between mb-6">
+                    <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Noise Recording Locations</h2>
+                    <button onclick="openLocationModal('sound')"
+                            class="px-4 py-2 bg-seismo-orange text-white rounded-lg hover:bg-seismo-navy transition-colors">
+                        <svg class="w-5 h-5 inline mr-1" 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>
+                        Add NRL
+                    </button>
+                </div>
+                <div id="sound-locations"
+                     hx-get="/api/projects/{{ project_id }}/locations?location_type=sound"
+                     hx-trigger="load"
+                     hx-swap="innerHTML">
+                    <div class="text-center py-8 text-gray-500">Loading locations...</div>
                 </div>
-                <button onclick="openScheduleModal()"
-                        class="px-4 py-2 bg-seismo-orange text-white rounded-lg hover:bg-seismo-navy transition-colors">
-                    <svg class="w-5 h-5 inline mr-1" 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>
-                    Create Schedule
-                </button>
-            </div>
-
-            <div id="recurring-schedule-list"
-                 hx-get="/api/projects/{{ project_id }}/recurring-schedules/partials/list"
-                 hx-trigger="load, refresh from:#recurring-schedule-list"
-                 hx-swap="innerHTML">
-                <div class="text-center py-8 text-gray-500">Loading recurring schedules...</div>
             </div>
         </div>
 
-        <!-- Scheduled Actions Section -->
-        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
-            <div class="flex items-center justify-between mb-6">
-                <div>
-                    <h2 id="schedules-title" class="text-xl font-semibold text-gray-900 dark:text-white">Upcoming Actions</h2>
-                    <p id="schedules-subtitle" class="text-sm text-gray-500 dark:text-gray-400 mt-1">
-                        Scheduled start/stop/download actions
-                    </p>
-                </div>
-                <select id="schedules-filter" onchange="filterScheduledActions()"
-                        class="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 text-sm">
-                    <option value="pending">Pending</option>
-                    <option value="all">All</option>
-                    <option value="completed">Completed</option>
-                    <option value="failed">Failed</option>
-                </select>
-            </div>
-
-            <div id="project-schedules"
-                 hx-get="/api/projects/{{ project_id }}/schedules?status=pending"
-                 hx-trigger="load, every 30s, refresh from:#project-schedules"
-                 hx-swap="innerHTML">
-                <div class="text-center py-8 text-gray-500">Loading scheduled actions...</div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Monitoring Sessions Tab -->
-    <div id="sessions-tab" class="tab-panel hidden">
-        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
-            <div class="flex items-center justify-between mb-6">
-                <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Monitoring Sessions</h2>
-                <div class="flex items-center gap-4">
+        <!-- Sessions sub-panel -->
+        <div id="sound-sub-sessions" class="sound-sub-panel hidden">
+            <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+                <div class="flex items-center justify-between mb-6">
+                    <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Monitoring Sessions</h2>
                     <select id="sessions-filter" onchange="filterSessions()"
                             class="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 text-sm">
                         <option value="all">All Sessions</option>
@@ -199,116 +172,167 @@
                         <option value="failed">Failed</option>
                     </select>
                 </div>
+                <div id="project-sessions"
+                     hx-get="/api/projects/{{ project_id }}/sessions"
+                     hx-trigger="load, every 30s"
+                     hx-swap="innerHTML">
+                    <div class="text-center py-8 text-gray-500">Loading sessions...</div>
+                </div>
             </div>
-
-            <div id="project-sessions"
-                 hx-get="/api/projects/{{ project_id }}/sessions"
-                 hx-trigger="load, every 30s"
-                 hx-swap="innerHTML">
-                <div class="text-center py-8 text-gray-500">Loading sessions...</div>
+            <!-- Monthly Calendar -->
+            <div class="mt-6 bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Calendar View</h3>
+                <div id="sessions-calendar"
+                     hx-get="/api/projects/{{ project_id }}/sessions-calendar"
+                     hx-trigger="load"
+                     hx-swap="innerHTML">
+                    <div class="text-center py-6 text-gray-400 text-sm">Loading calendar…</div>
+                </div>
             </div>
         </div>
 
-        <!-- Monthly Calendar -->
-        <div class="mt-6 bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
-            <div class="flex items-center justify-between mb-4">
-                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Calendar View</h3>
-            </div>
-            <div id="sessions-calendar"
-                 hx-get="/api/projects/{{ project_id }}/sessions-calendar"
+        <!-- Data Files sub-panel -->
+        <div id="sound-sub-data" class="sound-sub-panel hidden">
+            <!-- FTP File Browser (remote projects only) -->
+            <div id="ftp-browser" class="mb-6"
+                 hx-get="/api/projects/{{ project_id }}/ftp-browser"
                  hx-trigger="load"
                  hx-swap="innerHTML">
-                <div class="text-center py-6 text-gray-400 text-sm">Loading calendar…</div>
+                <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+                    <div class="text-center py-8 text-gray-500">Loading FTP browser...</div>
+                </div>
+            </div>
+            <!-- Unified Files View -->
+            <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg">
+                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+                    <div class="flex items-center justify-between">
+                        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Project Files</h2>
+                        <div class="flex items-center gap-3">
+                            <button onclick="toggleUploadAll()"
+                                    class="px-3 py-2 text-sm bg-seismo-orange text-white rounded-lg hover:bg-seismo-navy transition-colors flex items-center gap-1.5">
+                                <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-8l-4-4m0 0L8 8m4-4v12"></path>
+                                </svg>
+                                Upload Data
+                            </button>
+                            <button onclick="htmx.trigger('#unified-files', 'refresh')"
+                                    class="px-3 py-2 text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
+                                <svg class="w-4 h-4 inline mr-1" 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>
+                                Refresh
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Upload Data Panel -->
+                <div id="upload-all-panel" class="hidden border-b border-gray-200 dark:border-gray-700">
+                    <div class="px-6 py-4 bg-gray-50 dark:bg-gray-800/50">
+                        <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Bulk Import — Select Folder</p>
+                        <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
+                            Select your data folder directly — no zipping needed. Expected structure:
+                            <code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">[date]/[NRL name]/[Auto_####]/</code>.
+                            NRL folders are matched to locations by name. MP3s are stored; Excel exports are skipped.
+                        </p>
+                        <div class="flex flex-wrap items-center gap-3">
+                            <input type="file" id="upload-all-input"
+                                   webkitdirectory directory multiple
+                                   class="block text-sm text-gray-500 dark:text-gray-400
+                                          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" />
+                            <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 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>
+                        <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>
+                        <div id="upload-all-results" class="hidden mt-3 text-sm space-y-1"></div>
+                    </div>
+                </div>
+                <div id="unified-files"
+                     hx-get="/api/projects/{{ project_id }}/files-unified"
+                     hx-trigger="load, refresh from:#unified-files"
+                     hx-swap="innerHTML">
+                    <div class="px-6 py-12 text-center text-gray-500">Loading files...</div>
+                </div>
             </div>
         </div>
-    </div>
 
-    <!-- Data Files Tab -->
-    <div id="data-tab" class="tab-panel hidden">
-        <!-- FTP File Browser (Download from Devices) -->
-        <div id="ftp-browser" class="mb-6"
-             hx-get="/api/projects/{{ project_id }}/ftp-browser"
-             hx-trigger="load"
-             hx-swap="innerHTML">
+        <!-- Assigned Units sub-panel (remote only) -->
+        <div id="sound-sub-units" class="sound-sub-panel hidden">
             <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
-                <div class="text-center py-8 text-gray-500">Loading FTP browser...</div>
+                <div class="flex items-center justify-between mb-6">
+                    <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Assigned Units</h2>
+                    <div class="text-sm text-gray-500">Units currently assigned to this project's NRLs</div>
+                </div>
+                <div id="project-units"
+                     hx-get="/api/projects/{{ project_id }}/units"
+                     hx-trigger="load, every 30s"
+                     hx-swap="innerHTML">
+                    <div class="text-center py-8 text-gray-500">Loading units...</div>
+                </div>
             </div>
         </div>
 
-        <!-- Unified Files View (Database + Filesystem) -->
-        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg">
-            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-                <div class="flex items-center justify-between">
-                    <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
-                        Project Files
-                    </h2>
-                    <div class="flex items-center gap-3">
-                        <button onclick="toggleUploadAll()"
-                                class="px-3 py-2 text-sm bg-seismo-orange text-white rounded-lg hover:bg-seismo-navy transition-colors flex items-center gap-1.5">
-                            <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-8l-4-4m0 0L8 8m4-4v12"></path>
-                            </svg>
-                            Upload Data
-                        </button>
-                        <button onclick="htmx.trigger('#unified-files', 'refresh')"
-                                class="px-3 py-2 text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
-                            <svg class="w-4 h-4 inline mr-1" 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>
-                            Refresh
-                        </button>
+        <!-- Schedules sub-panel (remote only) -->
+        <div id="sound-sub-schedules" class="sound-sub-panel hidden">
+            <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-6">
+                <div class="flex items-center justify-between mb-6">
+                    <div>
+                        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Recurring Schedules</h2>
+                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Automated patterns that generate scheduled actions</p>
                     </div>
+                    <button onclick="openScheduleModal()"
+                            class="px-4 py-2 bg-seismo-orange text-white rounded-lg hover:bg-seismo-navy transition-colors">
+                        <svg class="w-5 h-5 inline mr-1" 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>
+                        Create Schedule
+                    </button>
+                </div>
+                <div id="recurring-schedule-list"
+                     hx-get="/api/projects/{{ project_id }}/recurring-schedules/partials/list"
+                     hx-trigger="load, refresh from:#recurring-schedule-list"
+                     hx-swap="innerHTML">
+                    <div class="text-center py-8 text-gray-500">Loading recurring schedules...</div>
                 </div>
             </div>
-
-            <!-- Upload Data Panel -->
-            <div id="upload-all-panel" class="hidden border-b border-gray-200 dark:border-gray-700">
-                <div class="px-6 py-4 bg-gray-50 dark:bg-gray-800/50">
-                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Bulk Import — Select Folder</p>
-                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
-                        Select your data folder directly — no zipping needed. Expected structure:
-                        <code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">[date]/[NRL name]/[Auto_####]/</code>.
-                        NRL folders are matched to locations by name. MP3s are stored; Excel exports are skipped.
-                    </p>
-                    <div class="flex flex-wrap items-center gap-3">
-                        <input type="file" id="upload-all-input"
-                               webkitdirectory directory multiple
-                               class="block text-sm text-gray-500 dark:text-gray-400
-                                      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" />
-                        <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 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 class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+                <div class="flex items-center justify-between mb-6">
+                    <div>
+                        <h2 id="schedules-title" class="text-xl font-semibold text-gray-900 dark:text-white">Upcoming Actions</h2>
+                        <p id="schedules-subtitle" class="text-sm text-gray-500 dark:text-gray-400 mt-1">Scheduled start/stop/download actions</p>
                     </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>
+                    <select id="schedules-filter" onchange="filterScheduledActions()"
+                            class="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 text-sm">
+                        <option value="pending">Pending</option>
+                        <option value="all">All</option>
+                        <option value="completed">Completed</option>
+                        <option value="failed">Failed</option>
+                    </select>
+                </div>
+                <div id="project-schedules"
+                     hx-get="/api/projects/{{ project_id }}/schedules?status=pending"
+                     hx-trigger="load, every 30s, refresh from:#project-schedules"
+                     hx-swap="innerHTML">
+                    <div class="text-center py-8 text-gray-500">Loading scheduled actions...</div>
                 </div>
-            </div>
-
-            <div id="unified-files"
-                 hx-get="/api/projects/{{ project_id }}/files-unified"
-                 hx-trigger="load, refresh from:#unified-files"
-                 hx-swap="innerHTML">
-                <div class="px-6 py-12 text-center text-gray-500">Loading files...</div>
             </div>
         </div>
     </div>
@@ -350,30 +374,6 @@
                     </div>
                 </div>
 
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Data Collection</label>
-                    <div class="grid grid-cols-2 gap-3">
-                        <label class="flex items-start gap-3 p-3 border-2 rounded-lg cursor-pointer" id="settings-mode-manual-label">
-                            <input type="radio" name="data_collection_mode" id="settings-mode-manual" value="manual"
-                                   onchange="settingsUpdateModeStyles()"
-                                   class="mt-0.5 accent-seismo-orange shrink-0">
-                            <div>
-                                <p class="text-sm font-medium text-gray-900 dark:text-white">Manual</p>
-                                <p class="text-xs text-gray-500 dark:text-gray-400">SD card retrieved daily</p>
-                            </div>
-                        </label>
-                        <label class="flex items-start gap-3 p-3 border-2 rounded-lg cursor-pointer" id="settings-mode-remote-label">
-                            <input type="radio" name="data_collection_mode" id="settings-mode-remote" value="remote"
-                                   onchange="settingsUpdateModeStyles()"
-                                   class="mt-0.5 accent-seismo-orange shrink-0">
-                            <div>
-                                <p class="text-sm font-medium text-gray-900 dark:text-white">Remote</p>
-                                <p class="text-xs text-gray-500 dark:text-gray-400">Modem, data pulled via FTP</p>
-                            </div>
-                        </label>
-                    </div>
-                </div>
-
                 <div>
                     <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Site Address</label>
                     <input type="text" name="site_address" id="settings-site-address"
@@ -400,6 +400,40 @@
                     </div>
                 </div>
 
+                <div id="sound-settings-section" class="hidden">
+                    <div class="border-t border-gray-200 dark:border-gray-700 pt-5 mb-4">
+                        <h3 class="text-base font-semibold text-gray-900 dark:text-white flex items-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="M15.536 8.464a5 5 0 010 7.072M12 6a7 7 0 010 14M8.464 8.464a5 5 0 000 7.072"/>
+                            </svg>
+                            Sound Monitoring
+                        </h3>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Data Collection</label>
+                        <div class="grid grid-cols-2 gap-3">
+                            <label class="flex items-start gap-3 p-3 border-2 rounded-lg cursor-pointer" id="settings-mode-manual-label">
+                                <input type="radio" name="data_collection_mode" id="settings-mode-manual" value="manual"
+                                       onchange="settingsUpdateModeStyles()"
+                                       class="mt-0.5 accent-seismo-orange shrink-0">
+                                <div>
+                                    <p class="text-sm font-medium text-gray-900 dark:text-white">Manual</p>
+                                    <p class="text-xs text-gray-500 dark:text-gray-400">SD card retrieved daily</p>
+                                </div>
+                            </label>
+                            <label class="flex items-start gap-3 p-3 border-2 rounded-lg cursor-pointer" id="settings-mode-remote-label">
+                                <input type="radio" name="data_collection_mode" id="settings-mode-remote" value="remote"
+                                       onchange="settingsUpdateModeStyles()"
+                                       class="mt-0.5 accent-seismo-orange shrink-0">
+                                <div>
+                                    <p class="text-sm font-medium text-gray-900 dark:text-white">Remote</p>
+                                    <p class="text-xs text-gray-500 dark:text-gray-400">Modem, data pulled via FTP</p>
+                                </div>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+
                 <div id="settings-success" class="hidden text-sm text-green-600 dark:text-green-400"></div>
                 <div id="settings-error" class="hidden text-sm text-red-600"></div>
 
@@ -792,34 +826,52 @@ async function quickUpdateStatus(newStatus) {
 
 // Tab switching
 function switchTab(tabName) {
-    // Hide all tab panels
-    document.querySelectorAll('.tab-panel').forEach(panel => {
-        panel.classList.add('hidden');
-    });
-
-    // Reset all tab buttons
+    document.querySelectorAll('.tab-panel').forEach(panel => panel.classList.add('hidden'));
     document.querySelectorAll('.tab-button').forEach(button => {
         button.classList.remove('border-seismo-orange', 'text-seismo-orange');
         button.classList.add('border-transparent', 'text-gray-600', 'dark:text-gray-400');
     });
 
-    // Show selected tab panel
     const panel = document.getElementById(`${tabName}-tab`);
-    if (panel) {
-        panel.classList.remove('hidden');
-    }
+    if (panel) panel.classList.remove('hidden');
 
-    // Highlight selected tab button
     const button = document.querySelector(`[data-tab="${tabName}"]`);
     if (button) {
         button.classList.remove('border-transparent', 'text-gray-600', 'dark:text-gray-400');
         button.classList.add('border-seismo-orange', 'text-seismo-orange');
     }
 
-    // Persist active tab in URL hash so refresh stays on this tab
     history.replaceState(null, '', `#${tabName}`);
 }
 
+function switchVibSubTab(name) {
+    document.querySelectorAll('.vib-sub-panel').forEach(p => p.classList.add('hidden'));
+    document.querySelectorAll('.vib-sub-tab').forEach(b => {
+        b.classList.remove('border-seismo-orange', 'text-seismo-orange');
+        b.classList.add('border-transparent', 'text-gray-500', 'dark:text-gray-400');
+    });
+    document.getElementById(`vib-sub-${name}`)?.classList.remove('hidden');
+    const btn = document.getElementById(`vib-sub-${name}-btn`);
+    if (btn) {
+        btn.classList.remove('border-transparent', 'text-gray-500', 'dark:text-gray-400');
+        btn.classList.add('border-seismo-orange', 'text-seismo-orange');
+    }
+}
+
+function switchSoundSubTab(name) {
+    document.querySelectorAll('.sound-sub-panel').forEach(p => p.classList.add('hidden'));
+    document.querySelectorAll('.sound-sub-tab').forEach(b => {
+        b.classList.remove('border-seismo-orange', 'text-seismo-orange');
+        b.classList.add('border-transparent', 'text-gray-500', 'dark:text-gray-400');
+    });
+    document.getElementById(`sound-sub-${name}`)?.classList.remove('hidden');
+    const btn = document.getElementById(`sound-sub-${name}-btn`);
+    if (btn) {
+        btn.classList.remove('border-transparent', 'text-gray-500', 'dark:text-gray-400');
+        btn.classList.add('border-seismo-orange', 'text-seismo-orange');
+    }
+}
+
 // Load project details
 async function loadProjectDetails() {
     try {
@@ -849,23 +901,20 @@ async function loadProjectDetails() {
         if (modeRadio) modeRadio.checked = true;
         settingsUpdateModeStyles();
 
-        // Update tab labels and visibility based on active modules
+        // Show/hide module tabs based on active modules
         const hasSoundModule = projectModules.includes('sound_monitoring');
         const hasVibrationModule = projectModules.includes('vibration_monitoring');
-        if (hasSoundModule && !hasVibrationModule) {
-            document.getElementById('locations-tab-label').textContent = 'NRLs';
-            document.getElementById('locations-header').textContent = 'Noise Recording Locations';
-            document.getElementById('add-location-label').textContent = 'Add NRL';
-        }
-        // Monitoring Sessions and Data Files tabs are sound-only
-        // Data Files also hides the FTP browser section for manual projects
         const isRemote = mode === 'remote';
-        document.getElementById('sessions-tab-btn').classList.toggle('hidden', !hasSoundModule);
-        document.getElementById('data-tab-btn').classList.toggle('hidden', !hasSoundModule);
-        // Schedules and Assigned Units: hidden when no sound module; for sound, only show if remote
-        document.getElementById('schedules-tab-btn')?.classList.toggle('hidden', !hasSoundModule || !isRemote);
-        document.getElementById('units-tab-btn')?.classList.toggle('hidden', !hasSoundModule || !isRemote);
-        // FTP browser within Data Files tab
+
+        document.getElementById('vibration-tab-btn').classList.toggle('hidden', !hasVibrationModule);
+        document.getElementById('sound-tab-btn').classList.toggle('hidden', !hasSoundModule);
+        document.getElementById('sound-settings-section')?.classList.toggle('hidden', !hasSoundModule);
+
+        // Within Sound: show Assigned Units + Schedules sub-tabs only for remote projects
+        document.getElementById('sound-sub-units-btn')?.classList.toggle('hidden', !isRemote);
+        document.getElementById('sound-sub-schedules-btn')?.classList.toggle('hidden', !isRemote);
+
+        // FTP browser: only show for remote projects
         document.getElementById('ftp-browser')?.classList.toggle('hidden', !isRemote);
 
         document.getElementById('settings-error').classList.add('hidden');
@@ -983,7 +1032,14 @@ function updateModeLabels() {
     }
 }
 
+// Tracks the active location type tab so "Add Location" opens with the right type
+let _activeLocationType = null;
+function setActiveLocationType(type) {
+    _activeLocationType = type;
+}
+
 function openLocationModal(defaultType) {
+    defaultType = defaultType || _activeLocationType || defaultType;
     editingLocationId = null;
     document.getElementById('location-modal-title').textContent = 'Add Location';
     document.getElementById('location-id').value = '';
@@ -1110,12 +1166,8 @@ document.getElementById('location-form').addEventListener('submit', async functi
         }
 
         closeLocationModal();
+        refreshLocationLists();
         refreshProjectDashboard();
-        // Refresh locations tab if visible
-        htmx.ajax('GET', `/api/projects/${projectId}/locations`, {
-            target: '#project-locations',
-            swap: 'innerHTML'
-        });
     } catch (err) {
         const errorEl = document.getElementById('location-error');
         errorEl.textContent = err.message || 'Failed to save location.';
@@ -1123,6 +1175,15 @@ document.getElementById('location-form').addEventListener('submit', async functi
     }
 });
 
+function refreshLocationLists() {
+    htmx.ajax('GET', `/api/projects/${projectId}/locations?location_type=sound`, {
+        target: '#sound-locations', swap: 'innerHTML'
+    });
+    htmx.ajax('GET', `/api/projects/${projectId}/locations?location_type=vibration`, {
+        target: '#vibration-locations', swap: 'innerHTML'
+    });
+}
+
 async function deleteLocation(locationId) {
     if (!confirm('Delete this location?')) return;
 
@@ -1134,11 +1195,8 @@ async function deleteLocation(locationId) {
             const data = await response.json().catch(() => ({}));
             throw new Error(data.detail || 'Failed to delete location');
         }
+        refreshLocationLists();
         refreshProjectDashboard();
-        htmx.ajax('GET', `/api/projects/${projectId}/locations`, {
-            target: '#project-locations',
-            swap: 'innerHTML'
-        });
     } catch (err) {
         alert(err.message || 'Failed to delete location.');
     }
@@ -1212,11 +1270,8 @@ document.getElementById('assign-form').addEventListener('submit', async function
             throw new Error(data.detail || 'Failed to assign unit');
         }
         closeAssignModal();
+        refreshLocationLists();
         refreshProjectDashboard();
-        htmx.ajax('GET', `/api/projects/${projectId}/locations`, {
-            target: '#project-locations',
-            swap: 'innerHTML'
-        });
     } catch (err) {
         const errorEl = document.getElementById('assign-error');
         errorEl.textContent = err.message || 'Failed to assign unit.';
@@ -1235,11 +1290,8 @@ async function unassignUnit(assignmentId) {
             const data = await response.json().catch(() => ({}));
             throw new Error(data.detail || 'Failed to unassign unit');
         }
+        refreshLocationLists();
         refreshProjectDashboard();
-        htmx.ajax('GET', `/api/projects/${projectId}/locations`, {
-            target: '#project-locations',
-            swap: 'innerHTML'
-        });
     } catch (err) {
         alert(err.message || 'Failed to unassign unit.');
     }
@@ -1839,11 +1891,21 @@ function submitUploadAll() {
 document.addEventListener('DOMContentLoaded', function() {
     loadProjectDetails();
 
-    // Restore tab from URL hash (e.g. #schedules, #settings)
+    // Restore tab from URL hash
     const hash = window.location.hash.replace('#', '');
-    const validTabs = ['overview', 'locations', 'units', 'schedules', 'sessions', 'data', 'settings'];
-    if (hash && validTabs.includes(hash)) {
-        switchTab(hash);
+    const validTabs = ['overview', 'vibration', 'sound', 'settings'];
+    // Backwards compat: map old tab names to new ones
+    const hashMap = { locations: 'sound', units: 'sound', schedules: 'sound', sessions: 'sound', data: 'sound' };
+    const subTabMap = { units: 'units', schedules: 'schedules', sessions: 'sessions', data: 'data' };
+    if (hash) {
+        const mappedTab = hashMap[hash] || hash;
+        if (validTabs.includes(mappedTab)) {
+            switchTab(mappedTab);
+            // Open the relevant sub-tab for backwards compat
+            if (subTabMap[hash]) {
+                switchSoundSubTab(subTabMap[hash]);
+            }
+        }
     }
 });
 
diff --git a/templates/settings.html b/templates/settings.html
index c5d1c82..bd2d603 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -355,6 +355,25 @@
             </form>
             <div id="uploadResult" class="hidden mt-3"></div>
         </div>
+
+        <!-- Deleted Projects -->
+        <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">Deleted Projects</h2>
+                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Projects that have been soft-deleted. Restore them or permanently remove them.</p>
+                </div>
+                <button onclick="loadDeletedProjects()" class="px-4 py-2 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors flex items-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="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>
+                    Refresh
+                </button>
+            </div>
+            <div id="deletedProjectsList">
+                <p class="text-sm text-gray-400 dark:text-gray-500 italic">Loading...</p>
+            </div>
+        </div>
     </div>
 </div>
 
@@ -584,6 +603,67 @@
 </style>
 
 <script>
+// ========== DELETED PROJECTS ==========
+
+async function loadDeletedProjects() {
+    const container = document.getElementById('deletedProjectsList');
+    container.innerHTML = '<p class="text-sm text-gray-400 dark:text-gray-500 italic">Loading...</p>';
+    try {
+        const resp = await fetch('/api/projects/deleted');
+        const projects = await resp.json();
+        if (!projects.length) {
+            container.innerHTML = '<p class="text-sm text-gray-400 dark:text-gray-500 italic">No deleted projects.</p>';
+            return;
+        }
+        container.innerHTML = `
+            <div class="divide-y divide-gray-100 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+                ${projects.map(p => `
+                <div class="flex items-center justify-between px-4 py-3 bg-gray-50 dark:bg-gray-900/30">
+                    <div>
+                        <div class="font-medium text-gray-900 dark:text-white">${p.name}</div>
+                        <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                            ${p.client_name ? p.client_name + ' &middot; ' : ''}Deleted ${new Date(p.deleted_at).toLocaleDateString()}
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-2 ml-4">
+                        <button onclick="restoreProject('${p.id}', '${p.name.replace(/'/g, "\\'")}')"
+                                class="px-3 py-1 text-xs bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
+                            Restore
+                        </button>
+                        <button onclick="permanentlyDeleteProject('${p.id}', '${p.name.replace(/'/g, "\\'")}')"
+                                class="px-3 py-1 text-xs bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
+                            Delete Permanently
+                        </button>
+                    </div>
+                </div>`).join('')}
+            </div>`;
+    } catch (e) {
+        container.innerHTML = '<p class="text-sm text-red-500">Failed to load deleted projects.</p>';
+    }
+}
+
+async function restoreProject(projectId, name) {
+    if (!confirm(`Restore "${name}"?`)) return;
+    const resp = await fetch(`/api/projects/${projectId}/restore`, { method: 'POST' });
+    if (resp.ok) {
+        loadDeletedProjects();
+    } else {
+        const d = await resp.json();
+        alert('Failed to restore: ' + (d.detail || 'Unknown error'));
+    }
+}
+
+async function permanentlyDeleteProject(projectId, name) {
+    if (!confirm(`Permanently delete "${name}" and all its data? This cannot be undone.`)) return;
+    const resp = await fetch(`/api/projects/${projectId}/permanent`, { method: 'DELETE' });
+    if (resp.ok) {
+        loadDeletedProjects();
+    } else {
+        const d = await resp.json();
+        alert('Failed to delete: ' + (d.detail || 'Unknown error'));
+    }
+}
+
 // ========== TAB MANAGEMENT ==========
 
 function showTab(tabName) {
@@ -609,9 +689,10 @@ function showTab(tabName) {
     // Save last active tab to localStorage
     localStorage.setItem('settings-last-tab', tabName);
 
-    // Load roster table when data tab is shown
+    // Load roster table and deleted projects when data tab is shown
     if (tabName === 'data') {
         loadRosterTable();
+        loadDeletedProjects();
     }
 }