feat: Enhance project and reservation management

- Updated reservation list to display estimated units and improved count display.
- Added "Upcoming" status to project dashboard and header with corresponding styles.
- Implemented a dropdown for quick status updates in project header.
- Modified project list compact view to reflect new status labels.
- Updated project overview to include a tab for upcoming projects.
- Added migration script to introduce estimated_units column in job_reservations table.

templates/projects/detail.html

@@ -328,6 +328,7 @@
                         <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Status</label>
                         <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="upcoming">Upcoming</option>
                             <option value="active">Active</option>
                             <option value="on_hold">On Hold</option>
                             <option value="completed">Completed</option>
@@ -758,6 +759,24 @@ const projectId = "{{ project_id }}";
 let editingLocationId = null;
 let projectTypeId = null;
 
+async function quickUpdateStatus(newStatus) {
+    try {
+        const response = await fetch(`/api/projects/${projectId}`, {
+            method: 'PUT',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({ status: newStatus })
+        });
+        if (response.ok) {
+            // Reload the page to reflect new badge color and any side effects
+            window.location.reload();
+        } else {
+            alert('Failed to update status');
+        }
+    } catch (e) {
+        alert('Error updating status');
+    }
+}
+
 // Tab switching
 function switchTab(tabName) {
     // Hide all tab panels

templates/projects/overview.html

@@ -36,12 +36,17 @@
         <nav class="flex space-x-8 px-6" aria-label="Tabs">
             <button onclick="switchTab('all')"
                     id="tab-all"
-                    class="tab-button border-b-2 border-seismo-orange text-seismo-orange px-1 py-4 text-sm font-medium">
+                    class="tab-button border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 px-1 py-4 text-sm font-medium">
                 All Projects
             </button>
+            <button onclick="switchTab('upcoming')"
+                    id="tab-upcoming"
+                    class="tab-button border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 px-1 py-4 text-sm font-medium">
+                Upcoming
+            </button>
             <button onclick="switchTab('active')"
                     id="tab-active"
-                    class="tab-button border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 px-1 py-4 text-sm font-medium">
+                    class="tab-button border-b-2 border-seismo-orange text-seismo-orange px-1 py-4 text-sm font-medium">
                 Active
             </button>
             <button onclick="switchTab('on_hold')"
@@ -66,7 +71,7 @@
 <!-- Projects List -->
 <div id="projects-list"
      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
-     hx-get="/api/projects/list"
+     hx-get="/api/projects/list?status=active"
      hx-trigger="load"
      hx-swap="innerHTML">
     <!-- Loading skeletons -->