Add schedule and unit list templates for project management

- Created `schedule_list.html` to display scheduled actions with execution status, location, and timestamps.
- Implemented buttons for executing and canceling schedules, along with a details view placeholder.
- Created `unit_list.html` to show assigned units with their status, location, model, and session/file counts.
- Added conditional rendering for active sessions and links to view unit and location details.

backend/main.py

@@ -233,8 +233,11 @@ async def nrl_detail_page(
     # Get session count
     session_count = db.query(RecordingSession).filter_by(location_id=location_id).count()
 
-    # Get file count
-    file_count = db.query(DataFile).filter_by(location_id=location_id).count()
+    # Get file count (DataFile links to session, not directly to location)
+    file_count = db.query(DataFile).join(
+        RecordingSession,
+        DataFile.session_id == RecordingSession.id
+    ).filter(RecordingSession.location_id == location_id).count()
 
     # Check for active session
     active_session = db.query(RecordingSession).filter(

backend/routers/project_locations.py

@@ -460,8 +460,12 @@ async def get_nrl_files(
     """
     from backend.models import DataFile, RecordingSession
 
-    files = db.query(DataFile).filter_by(
-        location_id=location_id
+    # Join DataFile with RecordingSession to filter by location_id
+    files = db.query(DataFile).join(
+        RecordingSession,
+        DataFile.session_id == RecordingSession.id
+    ).filter(
+        RecordingSession.location_id == location_id
     ).order_by(DataFile.created_at.desc()).all()
 
     # Enrich with session details

backend/routers/projects.py

@@ -341,6 +341,230 @@ async def get_project_dashboard(
     })
 
 
+# ============================================================================
+# Project Types
+# ============================================================================
+
+@router.get("/{project_id}/header", response_class=JSONResponse)
+async def get_project_header(project_id: str, db: Session = Depends(get_db)):
+    """
+    Get project header information for dynamic display.
+    Returns JSON with project name, status, and type.
+    """
+    project = db.query(Project).filter_by(id=project_id).first()
+    if not project:
+        raise HTTPException(status_code=404, detail="Project not found")
+
+    project_type = db.query(ProjectType).filter_by(id=project.project_type_id).first()
+
+    return JSONResponse({
+        "id": project.id,
+        "name": project.name,
+        "status": project.status,
+        "project_type_id": project.project_type_id,
+        "project_type_name": project_type.name if project_type else None,
+    })
+
+
+@router.get("/{project_id}/units", response_class=HTMLResponse)
+async def get_project_units(
+    project_id: str,
+    request: Request,
+    db: Session = Depends(get_db),
+):
+    """
+    Get all units assigned to this project's locations.
+    Returns HTML partial with unit list.
+    """
+    from backend.models import DataFile
+
+    # Get all assignments for this project
+    assignments = db.query(UnitAssignment).filter(
+        and_(
+            UnitAssignment.project_id == project_id,
+            UnitAssignment.status == "active",
+        )
+    ).all()
+
+    # Enrich with unit and location details
+    units_data = []
+    for assignment in assignments:
+        unit = db.query(RosterUnit).filter_by(id=assignment.unit_id).first()
+        location = db.query(MonitoringLocation).filter_by(id=assignment.location_id).first()
+
+        # Count sessions for this assignment
+        session_count = db.query(func.count(RecordingSession.id)).filter_by(
+            location_id=assignment.location_id,
+            unit_id=assignment.unit_id,
+        ).scalar()
+
+        # Count files from sessions
+        file_count = db.query(func.count(DataFile.id)).join(
+            RecordingSession,
+            DataFile.session_id == RecordingSession.id
+        ).filter(
+            RecordingSession.location_id == assignment.location_id,
+            RecordingSession.unit_id == assignment.unit_id,
+        ).scalar()
+
+        # Check if currently recording
+        active_session = db.query(RecordingSession).filter(
+            and_(
+                RecordingSession.location_id == assignment.location_id,
+                RecordingSession.unit_id == assignment.unit_id,
+                RecordingSession.status == "recording",
+            )
+        ).first()
+
+        units_data.append({
+            "assignment": assignment,
+            "unit": unit,
+            "location": location,
+            "session_count": session_count,
+            "file_count": file_count,
+            "active_session": active_session,
+        })
+
+    # Get project type for label context
+    project = db.query(Project).filter_by(id=project_id).first()
+    project_type = db.query(ProjectType).filter_by(id=project.project_type_id).first() if project else None
+
+    return templates.TemplateResponse("partials/projects/unit_list.html", {
+        "request": request,
+        "project_id": project_id,
+        "units": units_data,
+        "project_type": project_type,
+    })
+
+
+@router.get("/{project_id}/schedules", response_class=HTMLResponse)
+async def get_project_schedules(
+    project_id: str,
+    request: Request,
+    db: Session = Depends(get_db),
+    status: Optional[str] = Query(None),
+):
+    """
+    Get scheduled actions for this project.
+    Returns HTML partial with schedule list.
+    Optional status filter: pending, completed, failed, cancelled
+    """
+    query = db.query(ScheduledAction).filter_by(project_id=project_id)
+
+    # Filter by status if provided
+    if status:
+        query = query.filter(ScheduledAction.execution_status == status)
+
+    schedules = query.order_by(ScheduledAction.scheduled_time.desc()).all()
+
+    # Enrich with location details
+    schedules_data = []
+    for schedule in schedules:
+        location = None
+        if schedule.location_id:
+            location = db.query(MonitoringLocation).filter_by(id=schedule.location_id).first()
+
+        schedules_data.append({
+            "schedule": schedule,
+            "location": location,
+        })
+
+    return templates.TemplateResponse("partials/projects/schedule_list.html", {
+        "request": request,
+        "project_id": project_id,
+        "schedules": schedules_data,
+    })
+
+
+@router.get("/{project_id}/sessions", response_class=HTMLResponse)
+async def get_project_sessions(
+    project_id: str,
+    request: Request,
+    db: Session = Depends(get_db),
+    status: Optional[str] = Query(None),
+):
+    """
+    Get all recording sessions for this project.
+    Returns HTML partial with session list.
+    Optional status filter: recording, completed, paused, failed
+    """
+    query = db.query(RecordingSession).filter_by(project_id=project_id)
+
+    # Filter by status if provided
+    if status:
+        query = query.filter(RecordingSession.status == status)
+
+    sessions = query.order_by(RecordingSession.started_at.desc()).all()
+
+    # Enrich with unit and location details
+    sessions_data = []
+    for session in sessions:
+        unit = None
+        location = None
+
+        if session.unit_id:
+            unit = db.query(RosterUnit).filter_by(id=session.unit_id).first()
+        if session.location_id:
+            location = db.query(MonitoringLocation).filter_by(id=session.location_id).first()
+
+        sessions_data.append({
+            "session": session,
+            "unit": unit,
+            "location": location,
+        })
+
+    return templates.TemplateResponse("partials/projects/session_list.html", {
+        "request": request,
+        "project_id": project_id,
+        "sessions": sessions_data,
+    })
+
+
+@router.get("/{project_id}/files", response_class=HTMLResponse)
+async def get_project_files(
+    project_id: str,
+    request: Request,
+    db: Session = Depends(get_db),
+    file_type: Optional[str] = Query(None),
+):
+    """
+    Get all data files from all sessions in this project.
+    Returns HTML partial with file list.
+    Optional file_type filter: audio, data, log, etc.
+    """
+    from backend.models import DataFile
+
+    # Join through RecordingSession to get project files
+    query = db.query(DataFile).join(
+        RecordingSession,
+        DataFile.session_id == RecordingSession.id
+    ).filter(RecordingSession.project_id == project_id)
+
+    # Filter by file type if provided
+    if file_type:
+        query = query.filter(DataFile.file_type == file_type)
+
+    files = query.order_by(DataFile.created_at.desc()).all()
+
+    # Enrich with session details
+    files_data = []
+    for file in files:
+        session = None
+        if file.session_id:
+            session = db.query(RecordingSession).filter_by(id=file.session_id).first()
+
+        files_data.append({
+            "file": file,
+            "session": session,
+        })
+
+    return templates.TemplateResponse("partials/projects/file_list.html", {
+        "request": request,
+        "project_id": project_id,
+        "files": files_data,
+    })
+
+
 # ============================================================================
 # Project Types
 # ============================================================================

templates/partials/projects/file_list.html

@@ -34,7 +34,7 @@
                             </svg>
                             <div>
                                 <div class="text-sm font-medium text-gray-900 dark:text-white">
-                                    {{ item.file.file_name }}
+                                    {{ item.file.file_path.split('/')[-1] if item.file.file_path else 'Unknown' }}
                                 </div>
                                 {% if item.file.file_path %}
                                 <div class="text-xs text-gray-500 dark:text-gray-400 font-mono">

templates/partials/projects/schedule_list.html

@@ -0,0 +1,149 @@
+<!-- Scheduled Actions List -->
+{% if schedules %}
+    <div class="space-y-4">
+        {% for item in schedules %}
+        <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">
+            <div class="flex items-start justify-between gap-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">
+                            {{ item.schedule.action_type }}
+                        </h4>
+                        {% if item.schedule.execution_status == 'pending' %}
+                            <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">
+                                Pending
+                            </span>
+                        {% elif item.schedule.execution_status == 'completed' %}
+                            <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">
+                                Completed
+                            </span>
+                        {% elif item.schedule.execution_status == 'failed' %}
+                            <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">
+                                Failed
+                            </span>
+                        {% elif item.schedule.execution_status == 'cancelled' %}
+                            <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">
+                                Cancelled
+                            </span>
+                        {% endif %}
+                    </div>
+
+                    <div class="grid grid-cols-2 gap-3 text-sm text-gray-600 dark:text-gray-400">
+                        {% if item.location %}
+                        <div>
+                            <span class="text-xs text-gray-500">Location:</span>
+                            <a href="/projects/{{ project_id }}/nrl/{{ item.location.id }}"
+                               class="text-seismo-orange hover:text-seismo-navy font-medium ml-1">
+                                {{ item.location.name }}
+                            </a>
+                        </div>
+                        {% endif %}
+
+                        <div>
+                            <span class="text-xs text-gray-500">Scheduled:</span>
+                            <span class="ml-1">{{ item.schedule.scheduled_time.strftime('%Y-%m-%d %H:%M') if item.schedule.scheduled_time else 'N/A' }}</span>
+                        </div>
+
+                        {% if item.schedule.executed_at %}
+                        <div>
+                            <span class="text-xs text-gray-500">Executed:</span>
+                            <span class="ml-1">{{ item.schedule.executed_at.strftime('%Y-%m-%d %H:%M') }}</span>
+                        </div>
+                        {% endif %}
+
+                        {% if item.schedule.created_at %}
+                        <div>
+                            <span class="text-xs text-gray-500">Created:</span>
+                            <span class="ml-1">{{ item.schedule.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    {% if item.schedule.description %}
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
+                        {{ item.schedule.description }}
+                    </p>
+                    {% endif %}
+
+                    {% if item.schedule.result_message %}
+                    <div class="mt-2 text-xs">
+                        <span class="text-gray-500">Result:</span>
+                        <span class="ml-1 text-gray-700 dark:text-gray-300">{{ item.schedule.result_message }}</span>
+                    </div>
+                    {% endif %}
+                </div>
+
+                <div class="flex items-center gap-2">
+                    {% if item.schedule.execution_status == 'pending' %}
+                        <button onclick="executeSchedule('{{ item.schedule.id }}')"
+                                class="px-3 py-1 text-xs bg-seismo-orange text-white rounded-lg hover:bg-seismo-navy transition-colors">
+                            Execute Now
+                        </button>
+                        <button onclick="cancelSchedule('{{ item.schedule.id }}')"
+                                class="px-3 py-1 text-xs bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300 rounded-lg hover:bg-red-200 dark:hover:bg-red-900/50 transition-colors">
+                            Cancel
+                        </button>
+                    {% endif %}
+                    <button onclick="viewScheduleDetails('{{ item.schedule.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>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </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">
+            <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>
+        <p class="text-gray-500 dark:text-gray-400 mb-2">No scheduled actions yet</p>
+        <p class="text-sm text-gray-400 dark:text-gray-500">Create schedules to automate tasks</p>
+    </div>
+{% endif %}
+
+<script>
+function executeSchedule(scheduleId) {
+    if (!confirm('Execute this scheduled action now?')) return;
+
+    fetch(`/api/projects/{{ project_id }}/schedules/${scheduleId}/execute`, {
+        method: 'POST',
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            htmx.trigger('#project-schedules', 'refresh');
+        } else {
+            alert('Error: ' + (data.message || 'Unknown error'));
+        }
+    })
+    .catch(error => {
+        alert('Error executing schedule: ' + error);
+    });
+}
+
+function cancelSchedule(scheduleId) {
+    if (!confirm('Cancel this scheduled action?')) return;
+
+    fetch(`/api/projects/{{ project_id }}/schedules/${scheduleId}/cancel`, {
+        method: 'POST',
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            htmx.trigger('#project-schedules', 'refresh');
+        } else {
+            alert('Error: ' + (data.message || 'Unknown error'));
+        }
+    })
+    .catch(error => {
+        alert('Error cancelling schedule: ' + error);
+    });
+}
+
+function viewScheduleDetails(scheduleId) {
+    // TODO: Implement schedule details modal
+    alert('Schedule details coming soon: ' + scheduleId);
+}
+</script>

templates/partials/projects/session_list.html

@@ -44,10 +44,10 @@
                             <span class="ml-1">{{ item.session.started_at.strftime('%Y-%m-%d %H:%M') if item.session.started_at else 'N/A' }}</span>
                         </div>
 
-                        {% if item.session.ended_at %}
+                        {% if item.session.stopped_at %}
                         <div>
                             <span class="text-xs text-gray-500">Ended:</span>
-                            <span class="ml-1">{{ item.session.ended_at.strftime('%Y-%m-%d %H:%M') }}</span>
+                            <span class="ml-1">{{ item.session.stopped_at.strftime('%Y-%m-%d %H:%M') }}</span>
                         </div>
                         {% endif %}
 

templates/partials/projects/unit_list.html

@@ -0,0 +1,99 @@
+<!-- Assigned Units List -->
+{% if units %}
+    <div class="space-y-4">
+        {% for item in units %}
+        <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">
+            <div class="flex items-start justify-between gap-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">
+                            <a href="/slm/{{ item.unit.id }}" class="hover:text-seismo-orange">
+                                {{ item.unit.id }}
+                            </a>
+                        </h4>
+                        {% if item.active_session %}
+                            <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">
+                                <span class="w-2 h-2 bg-red-500 rounded-full mr-1.5 animate-pulse"></span>
+                                Recording
+                            </span>
+                        {% else %}
+                            <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">
+                                Available
+                            </span>
+                        {% endif %}
+                    </div>
+
+                    <div class="grid grid-cols-2 gap-3 text-sm text-gray-600 dark:text-gray-400">
+                        {% if item.location %}
+                        <div>
+                            <span class="text-xs text-gray-500">
+                                {% if project_type and project_type.id == 'sound_monitoring' %}
+                                    NRL:
+                                {% else %}
+                                    Location:
+                                {% endif %}
+                            </span>
+                            <a href="/projects/{{ project_id }}/nrl/{{ item.location.id }}"
+                               class="text-seismo-orange hover:text-seismo-navy font-medium ml-1">
+                                {{ item.location.name }}
+                            </a>
+                        </div>
+                        {% endif %}
+
+                        {% if item.unit.slm_model %}
+                        <div>
+                            <span class="text-xs text-gray-500">Model:</span>
+                            <span class="ml-1">{{ item.unit.slm_model }}</span>
+                        </div>
+                        {% endif %}
+
+                        <div>
+                            <span class="text-xs text-gray-500">Sessions:</span>
+                            <span class="ml-1">{{ item.session_count }}</span>
+                        </div>
+
+                        <div>
+                            <span class="text-xs text-gray-500">Files:</span>
+                            <span class="ml-1">{{ item.file_count }}</span>
+                        </div>
+
+                        {% if item.assignment.assigned_at %}
+                        <div class="col-span-2">
+                            <span class="text-xs text-gray-500">Assigned:</span>
+                            <span class="ml-1">{{ item.assignment.assigned_at.strftime('%Y-%m-%d %H:%M') }}</span>
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    {% if item.unit.note %}
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
+                        {{ item.unit.note }}
+                    </p>
+                    {% endif %}
+                </div>
+
+                <div class="flex items-center gap-2">
+                    <a href="/slm/{{ item.unit.id }}"
+                       class="px-3 py-1 text-xs bg-seismo-orange text-white rounded-lg hover:bg-seismo-navy transition-colors">
+                        View Unit
+                    </a>
+                    {% if item.location %}
+                    <a href="/projects/{{ project_id }}/nrl/{{ item.location.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">
+                        View NRL
+                    </a>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </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">
+            <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>
+        <p class="text-gray-500 dark:text-gray-400 mb-2">No units assigned yet</p>
+        <p class="text-sm text-gray-400 dark:text-gray-500">Assign units to locations to get started</p>
+    </div>
+{% endif %}

templates/projects/detail.html

@@ -3,67 +3,241 @@
 {% block title %}Project Dashboard - Terra-View{% endblock %}
 
 {% block content %}
-<div class="mb-6 flex items-center justify-between">
-    <div>
-        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Project Dashboard</h1>
-        <p class="text-gray-600 dark:text-gray-400 mt-1">Sound monitoring project overview and assignments</p>
+<!-- Breadcrumb Navigation -->
+<div class="mb-6">
+    <nav class="flex items-center space-x-2 text-sm">
+        <a href="/projects" class="text-seismo-orange hover:text-seismo-navy flex items-center">
+            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+            </svg>
+            Projects
+        </a>
+        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+        </svg>
+        <span class="text-gray-900 dark:text-white font-medium" id="project-name-breadcrumb">Project</span>
+    </nav>
 </div>
-    <div class="flex items-center gap-3">
-        <button onclick="openProjectEditModal()" class="px-4 py-2 text-sm bg-seismo-orange hover:bg-seismo-navy text-white rounded-lg">
-            Edit Project
-        </button>
-        <a href="/projects" class="text-sm text-seismo-orange hover:text-seismo-navy">Back to projects</a>
+
+<!-- Header (loads dynamically) -->
+<div id="project-header" hx-get="/api/projects/{{ project_id }}/header" hx-trigger="load" hx-swap="innerHTML">
+    <div class="mb-8 animate-pulse">
+        <div class="h-10 bg-gray-200 dark:bg-gray-700 rounded w-1/3 mb-2"></div>
+        <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/4"></div>
     </div>
 </div>
 
+<!-- Tab Navigation -->
+<div class="mb-6 border-b border-gray-200 dark:border-gray-700">
+    <nav class="flex space-x-6 overflow-x-auto">
+        <button onclick="switchTab('overview')"
+                data-tab="overview"
+                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>
+        <button 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 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 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">
+            Recording Sessions
+        </button>
+        <button 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>
+        <button onclick="switchTab('settings')"
+                data-tab="settings"
+                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">
+            Settings
+        </button>
+    </nav>
+</div>
+
+<!-- Tab Content -->
+<div id="tab-content">
+    <!-- Overview Tab -->
+    <div id="overview-tab" class="tab-panel">
         <div id="project-dashboard"
              hx-get="/api/projects/{{ project_id }}/dashboard"
              hx-trigger="load, every 30s"
              hx-swap="innerHTML">
             <div class="animate-pulse space-y-4">
                 <div class="h-24 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            <div class="h-64 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                     <div class="h-64 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
                     <div class="h-64 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
                 </div>
             </div>
         </div>
+    </div>
 
-<!-- Edit Project Modal -->
-<div id="project-edit-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
-    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl w-full max-w-3xl max-h-[90vh] overflow-y-auto">
-        <div class="p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
-            <div>
-                <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Edit Project</h2>
-                <p class="text-gray-600 dark:text-gray-400 mt-1">Update project details and status</p>
-            </div>
-            <button onclick="closeProjectEditModal()" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+    <!-- 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>
 
-        <form id="project-edit-form" class="p-6 space-y-4">
+            <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>
+            </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>
+        </div>
+    </div>
+
+    <!-- Schedules Tab -->
+    <div id="schedules-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">Scheduled Actions</h2>
+                <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>
+                    Schedule Action
+                </button>
+            </div>
+
+            <div id="project-schedules"
+                 hx-get="/api/projects/{{ project_id }}/schedules"
+                 hx-trigger="load, every 30s"
+                 hx-swap="innerHTML">
+                <div class="text-center py-8 text-gray-500">Loading schedules...</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Recording 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">Recording Sessions</h2>
+                <div class="flex items-center gap-4">
+                    <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>
+                        <option value="recording">Recording</option>
+                        <option value="completed">Completed</option>
+                        <option value="failed">Failed</option>
+                    </select>
+                </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>
+            </div>
+        </div>
+    </div>
+
+    <!-- Data Files Tab -->
+    <div id="data-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">Data Files</h2>
+                <div class="flex items-center gap-4">
+                    <select id="files-filter" onchange="filterFiles()"
+                            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 Files</option>
+                        <option value="audio">Audio</option>
+                        <option value="data">Data</option>
+                        <option value="log">Logs</option>
+                    </select>
+                    <button onclick="exportProjectData()"
+                            class="px-4 py-2 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-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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
+                        </svg>
+                        Export All
+                    </button>
+                </div>
+            </div>
+
+            <div id="project-files"
+                 hx-get="/api/projects/{{ project_id }}/files"
+                 hx-trigger="load"
+                 hx-swap="innerHTML">
+                <div class="text-center py-8 text-gray-500">Loading data files...</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Settings Tab -->
+    <div id="settings-tab" class="tab-panel hidden">
+        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">Project Settings</h2>
+
+            <form id="project-settings-form" class="space-y-6">
                 <div>
                     <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Project Name</label>
-                <input type="text" name="name" id="edit-name" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" required>
+                    <input type="text" name="name" id="settings-name"
+                           class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" required>
                 </div>
 
                 <div>
                     <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description</label>
-                <textarea name="description" id="edit-description" rows="3" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"></textarea>
+                    <textarea name="description" id="settings-description" rows="3"
+                              class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"></textarea>
                 </div>
 
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div>
                         <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Client Name</label>
-                    <input type="text" name="client_name" id="edit-client-name" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                        <input type="text" name="client_name" id="settings-client-name"
+                               class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                     </div>
                     <div>
                         <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Status</label>
-                    <select name="status" id="edit-status" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                        <select name="status" id="settings-status"
+                                class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                             <option value="active">Active</option>
                             <option value="completed">Completed</option>
                             <option value="archived">Archived</option>
@@ -73,43 +247,64 @@
 
                 <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="edit-site-address" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                    <input type="text" name="site_address" id="settings-site-address"
+                           class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                 </div>
 
                 <div>
                     <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Site Coordinates</label>
-                <input type="text" name="site_coordinates" id="edit-site-coordinates" placeholder="40.7128,-74.0060" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                    <input type="text" name="site_coordinates" id="settings-site-coordinates" placeholder="40.7128,-74.0060"
+                           class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                     <p class="text-xs text-gray-500 mt-1">Format: latitude,longitude</p>
                 </div>
 
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div>
                         <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Start Date</label>
-                    <input type="date" name="start_date" id="edit-start-date" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                        <input type="date" name="start_date" id="settings-start-date"
+                               class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                     </div>
                     <div>
                         <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">End Date</label>
-                    <input type="date" name="end_date" id="edit-end-date" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                        <input type="date" name="end_date" id="settings-end-date"
+                               class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                     </div>
                 </div>
 
-            <div id="edit-error" class="hidden text-sm text-red-600"></div>
+                <div id="settings-error" class="hidden text-sm text-red-600"></div>
 
                 <div class="flex justify-end gap-3 pt-2">
-                <button type="button" onclick="closeProjectEditModal()" class="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
-                    Cancel
+                    <button type="button" onclick="loadProjectDetails()"
+                            class="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
+                        Reset
                     </button>
-                <button type="submit" class="px-6 py-2 bg-seismo-orange hover:bg-seismo-navy text-white rounded-lg font-medium">
+                    <button type="submit"
+                            class="px-6 py-2 bg-seismo-orange hover:bg-seismo-navy text-white rounded-lg font-medium">
                         Save Changes
                     </button>
                 </div>
             </form>
+
+            <!-- Danger Zone -->
+            <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
+                <h3 class="text-lg font-semibold text-red-600 dark:text-red-400 mb-4">Danger Zone</h3>
+                <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
+                    <p class="text-sm text-gray-700 dark:text-gray-300 mb-3">
+                        Archive this project to remove it from active listings. All data will be preserved.
+                    </p>
+                    <button onclick="archiveProject()"
+                            class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
+                        Archive Project
+                    </button>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 
 <!-- Location Modal -->
 <div id="location-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
-    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl w-full max-w-3xl max-h-[90vh] overflow-y-auto">
+    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl w-full max-w-3xl max-h-[90vh] overflow-y-auto m-4">
         <div class="p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
             <div>
                 <h2 id="location-modal-title" class="text-2xl font-bold text-gray-900 dark:text-white">Add Location</h2>
@@ -127,40 +322,47 @@
 
             <div>
                 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Name</label>
-                <input type="text" name="name" id="location-name" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" required>
+                <input type="text" name="name" id="location-name"
+                       class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" required>
             </div>
 
             <div>
                 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description</label>
-                <textarea name="description" id="location-description" rows="3" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"></textarea>
+                <textarea name="description" id="location-description" rows="3"
+                          class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"></textarea>
             </div>
 
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div>
                     <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Type</label>
-                    <select name="location_type" id="location-type" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                    <select name="location_type" id="location-type"
+                            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                         <option value="sound">Sound</option>
                         <option value="vibration">Vibration</option>
                     </select>
                 </div>
                 <div>
                     <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Coordinates</label>
-                    <input type="text" name="coordinates" id="location-coordinates" placeholder="40.7128,-74.0060" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                    <input type="text" name="coordinates" id="location-coordinates" placeholder="40.7128,-74.0060"
+                           class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                 </div>
             </div>
 
             <div>
                 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Address</label>
-                <input type="text" name="address" id="location-address" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                <input type="text" name="address" id="location-address"
+                       class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
             </div>
 
             <div id="location-error" class="hidden text-sm text-red-600"></div>
 
             <div class="flex justify-end gap-3 pt-2">
-                <button type="button" onclick="closeLocationModal()" class="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
+                <button type="button" onclick="closeLocationModal()"
+                        class="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                     Cancel
                 </button>
-                <button type="submit" class="px-6 py-2 bg-seismo-orange hover:bg-seismo-navy text-white rounded-lg font-medium">
+                <button type="submit"
+                        class="px-6 py-2 bg-seismo-orange hover:bg-seismo-navy text-white rounded-lg font-medium">
                     Save Location
                 </button>
             </div>
@@ -170,7 +372,7 @@
 
 <!-- Assign Unit Modal -->
 <div id="assign-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
-    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto m-4">
         <div class="p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
             <div>
                 <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Assign Unit</h2>
@@ -189,7 +391,8 @@
 
             <div>
                 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Available Units</label>
-                <select id="assign-unit-id" name="unit_id" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" required>
+                <select id="assign-unit-id" name="unit_id"
+                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" required>
                     <option value="">Select a unit</option>
                 </select>
                 <p id="assign-empty" class="hidden text-xs text-gray-500 mt-2">No available units match this location type.</p>
@@ -197,16 +400,19 @@
 
             <div>
                 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Notes</label>
-                <textarea id="assign-notes" name="notes" rows="2" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"></textarea>
+                <textarea id="assign-notes" name="notes" rows="2"
+                          class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"></textarea>
             </div>
 
             <div id="assign-error" class="hidden text-sm text-red-600"></div>
 
             <div class="flex justify-end gap-3 pt-2">
-                <button type="button" onclick="closeAssignModal()" class="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
+                <button type="button" onclick="closeAssignModal()"
+                        class="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                     Cancel
                 </button>
-                <button type="submit" class="px-6 py-2 bg-seismo-orange hover:bg-seismo-navy text-white rounded-lg font-medium">
+                <button type="submit"
+                        class="px-6 py-2 bg-seismo-orange hover:bg-seismo-navy text-white rounded-lg font-medium">
                     Assign Unit
                 </button>
             </div>
@@ -219,14 +425,67 @@ const projectId = "{{ project_id }}";
 let editingLocationId = null;
 let projectTypeId = null;
 
-function openProjectEditModal() {
-    const modal = document.getElementById('project-edit-modal');
-    modal.classList.remove('hidden');
-    loadProjectDetails();
+// 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-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');
     }
 
-function closeProjectEditModal() {
-    document.getElementById('project-edit-modal').classList.add('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');
+    }
+}
+
+// Load project details
+async function loadProjectDetails() {
+    try {
+        const response = await fetch(`/api/projects/${projectId}`);
+        if (!response.ok) {
+            throw new Error('Failed to load project details');
+        }
+        const data = await response.json();
+        projectTypeId = data.project_type_id || null;
+
+        // Update breadcrumb
+        document.getElementById('project-name-breadcrumb').textContent = data.name || 'Project';
+
+        // Update settings form
+        document.getElementById('settings-name').value = data.name || '';
+        document.getElementById('settings-description').value = data.description || '';
+        document.getElementById('settings-client-name').value = data.client_name || '';
+        document.getElementById('settings-status').value = data.status || 'active';
+        document.getElementById('settings-site-address').value = data.site_address || '';
+        document.getElementById('settings-site-coordinates').value = data.site_coordinates || '';
+        document.getElementById('settings-start-date').value = formatDate(data.start_date);
+        document.getElementById('settings-end-date').value = formatDate(data.end_date);
+
+        // Update tab labels based on project type
+        if (projectTypeId === 'sound_monitoring') {
+            document.getElementById('locations-tab-label').textContent = 'NRLs';
+            document.getElementById('locations-header').textContent = 'Noise Recording Locations';
+            document.getElementById('add-location-label').textContent = 'Add NRL';
+        }
+
+        document.getElementById('settings-error').classList.add('hidden');
+    } catch (err) {
+        console.error('Failed to load project details:', err);
+    }
 }
 
 function formatDate(value) {
@@ -236,54 +495,19 @@ function formatDate(value) {
     return date.toISOString().slice(0, 10);
 }
 
-async function loadProjectDetails() {
-    try {
-        const response = await fetch(`/api/projects/${projectId}`);
-        if (!response.ok) {
-            throw new Error('Failed to load project details');
-        }
-        const data = await response.json();
-        projectTypeId = data.project_type_id || null;
-        document.getElementById('edit-name').value = data.name || '';
-        document.getElementById('edit-description').value = data.description || '';
-        document.getElementById('edit-client-name').value = data.client_name || '';
-        document.getElementById('edit-status').value = data.status || 'active';
-        document.getElementById('edit-site-address').value = data.site_address || '';
-        document.getElementById('edit-site-coordinates').value = data.site_coordinates || '';
-        document.getElementById('edit-start-date').value = formatDate(data.start_date);
-        document.getElementById('edit-end-date').value = formatDate(data.end_date);
-        document.getElementById('edit-error').classList.add('hidden');
-    } catch (err) {
-        const errorEl = document.getElementById('edit-error');
-        errorEl.textContent = err.message || 'Failed to load project details.';
-        errorEl.classList.remove('hidden');
-    }
-}
-
-async function loadProjectType() {
-    try {
-        const response = await fetch(`/api/projects/${projectId}`);
-        if (response.ok) {
-            const data = await response.json();
-            projectTypeId = data.project_type_id || null;
-        }
-    } catch (err) {
-        projectTypeId = null;
-    }
-}
-
-document.getElementById('project-edit-form').addEventListener('submit', async function(e) {
+// Project settings form submission
+document.getElementById('project-settings-form').addEventListener('submit', async function(e) {
     e.preventDefault();
 
     const payload = {
-        name: document.getElementById('edit-name').value.trim(),
-        description: document.getElementById('edit-description').value.trim() || null,
-        client_name: document.getElementById('edit-client-name').value.trim() || null,
-        status: document.getElementById('edit-status').value,
-        site_address: document.getElementById('edit-site-address').value.trim() || null,
-        site_coordinates: document.getElementById('edit-site-coordinates').value.trim() || null,
-        start_date: document.getElementById('edit-start-date').value || null,
-        end_date: document.getElementById('edit-end-date').value || null
+        name: document.getElementById('settings-name').value.trim(),
+        description: document.getElementById('settings-description').value.trim() || null,
+        client_name: document.getElementById('settings-client-name').value.trim() || null,
+        status: document.getElementById('settings-status').value,
+        site_address: document.getElementById('settings-site-address').value.trim() || null,
+        site_coordinates: document.getElementById('settings-site-coordinates').value.trim() || null,
+        start_date: document.getElementById('settings-start-date').value || null,
+        end_date: document.getElementById('settings-end-date').value || null
     };
 
     try {
@@ -297,10 +521,10 @@ document.getElementById('project-edit-form').addEventListener('submit', async fu
             throw new Error('Failed to update project');
         }
 
-        closeProjectEditModal();
-        refreshProjectDashboard();
+        // Reload page to show updated data
+        window.location.reload();
     } catch (err) {
-        const errorEl = document.getElementById('edit-error');
+        const errorEl = document.getElementById('settings-error');
         errorEl.textContent = err.message || 'Failed to update project.';
         errorEl.classList.remove('hidden');
     }
@@ -311,8 +535,13 @@ function refreshProjectDashboard() {
         target: '#project-dashboard',
         swap: 'innerHTML'
     });
+    htmx.ajax('GET', `/api/projects/${projectId}/header`, {
+        target: '#project-header',
+        swap: 'innerHTML'
+    });
 }
 
+// Location modal functions
 function openLocationModal(defaultType) {
     editingLocationId = null;
     document.getElementById('location-modal-title').textContent = 'Add Location';
@@ -413,6 +642,11 @@ document.getElementById('location-form').addEventListener('submit', async functi
 
         closeLocationModal();
         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.';
@@ -432,16 +666,21 @@ async function deleteLocation(locationId) {
             throw new Error(data.detail || 'Failed to delete location');
         }
         refreshProjectDashboard();
+        htmx.ajax('GET', `/api/projects/${projectId}/locations`, {
+            target: '#project-locations',
+            swap: 'innerHTML'
+        });
     } catch (err) {
         alert(err.message || 'Failed to delete location.');
     }
 }
 
+// Assign modal functions
 function openAssignModal(locationId, locationType) {
     const safeType = locationType || 'sound';
     document.getElementById('assign-location-id').value = locationId;
     document.getElementById('assign-location-type').value = safeType;
-    document.getElementById('assign-unit-id').innerHTML = '<option value=\"\">Loading units...</option>';
+    document.getElementById('assign-unit-id').innerHTML = '<option value="">Loading units...</option>';
     document.getElementById('assign-empty').classList.add('hidden');
     document.getElementById('assign-error').classList.add('hidden');
     document.getElementById('assign-modal').classList.remove('hidden');
@@ -460,7 +699,7 @@ async function loadAvailableUnits(locationType) {
         }
         const data = await response.json();
         const select = document.getElementById('assign-unit-id');
-        select.innerHTML = '<option value=\"\">Select a unit</option>';
+        select.innerHTML = '<option value="">Select a unit</option>';
         if (!data.length) {
             document.getElementById('assign-empty').classList.remove('hidden');
             return;
@@ -505,6 +744,10 @@ document.getElementById('assign-form').addEventListener('submit', async function
         }
         closeAssignModal();
         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.';
@@ -524,29 +767,65 @@ async function unassignUnit(assignmentId) {
             throw new Error(data.detail || 'Failed to unassign unit');
         }
         refreshProjectDashboard();
+        htmx.ajax('GET', `/api/projects/${projectId}/locations`, {
+            target: '#project-locations',
+            swap: 'innerHTML'
+        });
     } catch (err) {
         alert(err.message || 'Failed to unassign unit.');
     }
 }
 
+// Filter functions
+function filterSessions() {
+    const filter = document.getElementById('sessions-filter').value;
+    const url = filter === 'all'
+        ? `/api/projects/${projectId}/sessions`
+        : `/api/projects/${projectId}/sessions?status=${filter}`;
+
+    htmx.ajax('GET', url, {
+        target: '#project-sessions',
+        swap: 'innerHTML'
+    });
+}
+
+function filterFiles() {
+    const filter = document.getElementById('files-filter').value;
+    const url = filter === 'all'
+        ? `/api/projects/${projectId}/files`
+        : `/api/projects/${projectId}/files?type=${filter}`;
+
+    htmx.ajax('GET', url, {
+        target: '#project-files',
+        swap: 'innerHTML'
+    });
+}
+
+// Utility functions
+function openScheduleModal() {
+    alert('Schedule modal coming soon');
+}
+
+function exportProjectData() {
+    window.location.href = `/api/projects/${projectId}/export`;
+}
+
+function archiveProject() {
+    if (!confirm('Archive this project? You can restore it later from the archived projects list.')) return;
+
+    document.getElementById('settings-status').value = 'archived';
+    document.getElementById('project-settings-form').dispatchEvent(new Event('submit'));
+}
+
+// Keyboard shortcuts
 document.addEventListener('keydown', function(e) {
     if (e.key === 'Escape') {
-        closeProjectEditModal();
         closeLocationModal();
         closeAssignModal();
     }
 });
 
-document.addEventListener('DOMContentLoaded', function() {
-    loadProjectType();
-});
-
-document.getElementById('project-edit-modal')?.addEventListener('click', function(e) {
-    if (e.target === this) {
-        closeProjectEditModal();
-    }
-});
-
+// Click outside to close modals
 document.getElementById('location-modal')?.addEventListener('click', function(e) {
     if (e.target === this) {
         closeLocationModal();
@@ -558,5 +837,10 @@ document.getElementById('assign-modal')?.addEventListener('click', function(e) {
         closeAssignModal();
     }
 });
+
+// Load project details on page load
+document.addEventListener('DOMContentLoaded', function() {
+    loadProjectDetails();
+});
 </script>
 {% endblock %}