v0.1.1 update

templates/base.html

@@ -68,6 +68,7 @@
                     Seismo<br>
                     <span class="text-seismo-orange dark:text-seismo-burgundy">Fleet Manager</span>
                 </h1>
+                <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">v0.1.1</p>
             </div>
 
             <!-- Navigation -->

templates/dashboard.html

@@ -9,14 +9,21 @@
 </div>
 
 <!-- Dashboard cards with auto-refresh -->
-<div hx-get="/api/status-snapshot" hx-trigger="load, every 10s" hx-swap="none" hx-on::after-request="updateDashboard(event)">
+<div hx-get="/api/status-snapshot"
+     hx-trigger="load, every 10s"
+     hx-swap="none"
+     hx-on::after-request="updateDashboard(event)">
+
     <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+
         <!-- Fleet Summary Card -->
         <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
             <div class="flex items-center justify-between mb-4">
                 <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Fleet Summary</h2>
                 <svg class="w-6 h-6 text-seismo-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
+                    </path>
                 </svg>
             </div>
             <div class="space-y-3">
@@ -59,7 +66,9 @@
             <div class="flex items-center justify-between mb-4">
                 <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Alerts</h2>
                 <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
+                    </path>
                 </svg>
             </div>
             <div id="alerts-list" class="space-y-3">
@@ -72,107 +81,133 @@
             <div class="flex items-center justify-between mb-4">
                 <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Photos</h2>
                 <svg class="w-6 h-6 text-seismo-burgundy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z">
+                    </path>
                 </svg>
             </div>
             <div class="text-center text-gray-500 dark:text-gray-400">
                 <svg class="w-16 h-16 mx-auto mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z">
+                    </path>
                 </svg>
                 <p class="text-sm">No recent photos</p>
             </div>
         </div>
+
     </div>
 
-    <!-- Quick Access to Fleet Roster -->
+    <!-- Fleet Status Section with Tabs -->
     <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
+
         <div class="flex items-center justify-between mb-4">
             <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Fleet Status</h2>
+
             <a href="/roster" class="text-seismo-orange hover:text-seismo-burgundy font-medium flex items-center">
-                View All
+                Full Roster
                 <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                 </svg>
             </a>
         </div>
-        <div id="fleet-preview" class="space-y-2">
+
+        <!-- Tab Bar -->
+        <div class="flex border-b border-gray-200 dark:border-gray-700 mb-4">
+            <button 
+                class="px-4 py-2 text-sm font-medium tab-button active-tab"
+                hx-get="/dashboard/active"
+                hx-target="#fleet-table"
+                hx-swap="innerHTML">
+                Active
+            </button>
+
+            <button 
+                class="px-4 py-2 text-sm font-medium tab-button"
+                hx-get="/dashboard/benched"
+                hx-target="#fleet-table"
+                hx-swap="innerHTML">
+                Benched
+            </button>
+        </div>
+
+        <!-- Tab Content Target -->
+        <div id="fleet-table" class="space-y-2">
             <p class="text-gray-500 dark:text-gray-400">Loading fleet data...</p>
         </div>
+
     </div>
 </div>
 
+
+<!-- TAB STYLE -->
+<style>
+.tab-button {
+    color: #6b7280; /* gray-500 */
+    border-bottom: 2px solid transparent;
+}
+.tab-button:hover {
+    color: #374151; /* gray-700 */
+}
+.active-tab {
+    color: #b84a12 !important; /* seismo orange */
+    border-bottom: 2px solid #b84a12 !important;
+}
+</style>
+
+
 <script>
 function updateDashboard(event) {
     try {
         const data = JSON.parse(event.detail.xhr.response);
 
-        // Update fleet summary
-        document.getElementById('total-units').textContent = data.total_units || 0;
-        document.getElementById('deployed-units').textContent = data.deployed_units || 0;
-        document.getElementById('status-ok').textContent = data.status_summary.OK || 0;
-        document.getElementById('status-pending').textContent = data.status_summary.Pending || 0;
-        document.getElementById('status-missing').textContent = data.status_summary.Missing || 0;
+        // ===== Fleet summary numbers =====
+        document.getElementById('total-units').textContent = data.total_units ?? 0;
+        document.getElementById('deployed-units').textContent = data.deployed_units ?? 0;
+        document.getElementById('status-ok').textContent = data.status_summary.OK ?? 0;
+        document.getElementById('status-pending').textContent = data.status_summary.Pending ?? 0;
+        document.getElementById('status-missing').textContent = data.status_summary.Missing ?? 0;
 
-        // Update alerts list
+        // ===== Alerts =====
         const alertsList = document.getElementById('alerts-list');
-        const missingUnits = Object.entries(data.units).filter(([id, unit]) => unit.status === 'Missing');
-        const pendingUnits = Object.entries(data.units).filter(([id, unit]) => unit.status === 'Pending');
+        const missingUnits = Object.entries(data.units).filter(([_, u]) => u.status === 'Missing');
+        const pendingUnits = Object.entries(data.units).filter(([_, u]) => u.status === 'Pending');
 
-        if (missingUnits.length === 0 && pendingUnits.length === 0) {
-            alertsList.innerHTML = '<p class="text-sm text-green-600 dark:text-green-400">✓ All units reporting normally</p>';
+        if (!missingUnits.length && !pendingUnits.length) {
+            alertsList.innerHTML =
+                '<p class="text-sm text-green-600 dark:text-green-400">✓ All units reporting normally</p>';
         } else {
             let alertsHtml = '';
+
             missingUnits.slice(0, 3).forEach(([id, unit]) => {
                 alertsHtml += `
-                    <div class="flex items-start space-x-2 text-sm">
-                        <span class="w-2 h-2 rounded-full bg-red-500 mt-1.5"></span>
-                        <div>
-                            <a href="/unit/${id}" class="font-medium text-red-600 dark:text-red-400 hover:underline">${id}</a>
-                            <p class="text-gray-600 dark:text-gray-400">Missing for ${unit.age}</p>
-                        </div>
+                <div class="flex items-start space-x-2 text-sm">
+                    <span class="w-2 h-2 rounded-full bg-red-500 mt-1.5"></span>
+                    <div>
+                        <a href="/unit/${id}" class="font-medium text-red-600 dark:text-red-400 hover:underline">${id}</a>
+                        <p class="text-gray-600 dark:text-gray-400">Missing for ${unit.age}</p>
                     </div>
-                `;
+                </div>`;
             });
+
             pendingUnits.slice(0, 2).forEach(([id, unit]) => {
                 alertsHtml += `
-                    <div class="flex items-start space-x-2 text-sm">
-                        <span class="w-2 h-2 rounded-full bg-yellow-500 mt-1.5"></span>
-                        <div>
-                            <a href="/unit/${id}" class="font-medium text-yellow-600 dark:text-yellow-400 hover:underline">${id}</a>
-                            <p class="text-gray-600 dark:text-gray-400">Pending for ${unit.age}</p>
-                        </div>
+                <div class="flex items-start space-x-2 text-sm">
+                    <span class="w-2 h-2 rounded-full bg-yellow-500 mt-1.5"></span>
+                    <div>
+                        <a href="/unit/${id}" class="font-medium text-yellow-600 dark:text-yellow-400 hover:underline">${id}</a>
+                        <p class="text-gray-600 dark:text-gray-400">Pending for ${unit.age}</p>
                     </div>
-                `;
+                </div>`;
             });
+
             alertsList.innerHTML = alertsHtml;
         }
 
-        // Update fleet preview
-        const fleetPreview = document.getElementById('fleet-preview');
-        const unitsList = Object.entries(data.units).slice(0, 5);
-        let previewHtml = '';
-
-        unitsList.forEach(([id, unit]) => {
-            const statusColor = unit.status === 'OK' ? 'green' : unit.status === 'Pending' ? 'yellow' : 'red';
-            const deployedDot = unit.deployed ? '<span class="w-2 h-2 rounded-full bg-blue-500"></span>' : '';
-
-            previewHtml += `
-                <a href="/unit/${id}" class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
-                    <div class="flex items-center space-x-3">
-                        <span class="w-3 h-3 rounded-full bg-${statusColor}-500"></span>
-                        ${deployedDot}
-                        <span class="font-medium">${id}</span>
-                    </div>
-                    <span class="text-sm text-gray-500 dark:text-gray-400">${unit.age}</span>
-                </a>
-            `;
-        });
-
-        fleetPreview.innerHTML = previewHtml;
-
-    } catch (error) {
-        console.error('Error updating dashboard:', error);
+    } catch (err) {
+        console.error("Dashboard update error:", err);
     }
 }
 </script>
+
 {% endblock %}

templates/partials/active_table.html

@@ -0,0 +1,25 @@
+<table class="fleet-table">
+    <thead>
+        <tr>
+            <th>ID</th>
+            <th>Status</th>
+            <th>Age</th>
+            <th>Last Seen</th>
+            <th>File</th>
+            <th>Note</th>
+        </tr>
+    </thead>
+
+    <tbody>
+        {% for uid, u in units.items() %}
+        <tr>
+            <td>{{ uid }}</td>
+            <td>{{ u.status }}</td>
+            <td>{{ u.age }}</td>
+            <td>{{ u.last }}</td>
+            <td>{{ u.fname }}</td>
+            <td>{{ u.note }}</td>
+        </tr>
+        {% endfor %}
+    </tbody>
+</table>

templates/partials/benched_table.html

@@ -0,0 +1,25 @@
+<table class="fleet-table">
+    <thead>
+        <tr>
+            <th>ID</th>
+            <th>Status</th>
+            <th>Age</th>
+            <th>Last Seen</th>
+            <th>File</th>
+            <th>Note</th>
+        </tr>
+    </thead>
+
+    <tbody>
+        {% for uid, u in units.items() %}
+        <tr>
+            <td>{{ uid }}</td>
+            <td>{{ u.status }}</td>
+            <td>{{ u.age }}</td>
+            <td>{{ u.last }}</td>
+            <td>{{ u.fname }}</td>
+            <td>{{ u.note }}</td>
+        </tr>
+        {% endfor %}
+    </tbody>
+</table>

templates/partials/dashboard_active.html

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

templates/partials/dashboard_benched.html

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