settings overhaul, many QOL improvements

templates/roster.html

@@ -34,6 +34,21 @@
 <!-- Fleet Roster with Tabs -->
 <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
 
+    <!-- Search Bar -->
+    <div class="mb-4">
+        <div class="relative">
+            <input
+                type="text"
+                id="roster-search"
+                placeholder="Search by Unit ID, Type, or Note..."
+                class="w-full px-4 py-2 pl-10 pr-4 text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-seismo-orange"
+                onkeyup="filterRosterTable()">
+            <svg class="absolute left-3 top-3 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+            </svg>
+        </div>
+    </div>
+
     <!-- Tab Bar -->
     <div class="flex border-b border-gray-200 dark:border-gray-700 mb-4">
         <button
@@ -805,6 +820,31 @@
             alert(`Error: ${error.message}`);
         }
     }
+
+    // Filter roster table based on search input
+    function filterRosterTable() {
+        const searchInput = document.getElementById('roster-search').value.toLowerCase();
+        const table = document.querySelector('#roster-content table tbody');
+
+        if (!table) return;
+
+        const rows = table.getElementsByTagName('tr');
+
+        for (let row of rows) {
+            const cells = row.getElementsByTagName('td');
+            if (cells.length === 0) continue; // Skip header or empty rows
+
+            const unitId = cells[1]?.textContent?.toLowerCase() || '';
+            const unitType = cells[2]?.textContent?.toLowerCase() || '';
+            const note = cells[6]?.textContent?.toLowerCase() || '';
+
+            const matches = unitId.includes(searchInput) ||
+                          unitType.includes(searchInput) ||
+                          note.includes(searchInput);
+
+            row.style.display = matches ? '' : 'none';
+        }
+    }
 </script>
 
 <style>