Bind live MySQL database tables (Rides, Passengers, Pending Approvals) into Siro Admin Portal

dashboard/siro-admin/js/app.js

@@ -280,12 +280,96 @@ document.addEventListener('DOMContentLoaded', () => {
         }
 
         showNotification('Live Database Stats Synchronized!', 'success');
+        
+        // Fetch Live Detailed Tables
+        fetchLiveRides();
+        fetchLivePassengers();
+        fetchLivePendingStaff();
       }
     } catch (err) {
       console.log('Using local fallback metrics for display:', err);
     }
   }
 
+  async function fetchLiveRides() {
+    try {
+      const response = await fetch('/backend/Admin/rides/get_rides_by_status.php?status=All', {
+        headers: { 'Authorization': `Bearer ${currentUser?.jwt || ''}` }
+      });
+      const data = await response.json();
+      const rides = Array.isArray(data) ? data : (data.data || []);
+      if (rides.length > 0) {
+        const tbody = document.getElementById('ridesTableBody');
+        if (tbody) {
+          tbody.innerHTML = rides.slice(0, 15).map(r => `
+            <tr>
+              <td><strong>SR-${r.id}</strong></td>
+              <td>${r.p_fname || 'Passenger'} ${r.p_lname || ''}</td>
+              <td>${r.d_fname || 'Driver'} ${r.d_lname || ''}</td>
+              <td><span style="font-size:0.82rem; color: var(--text-muted);"><i class="ph ph-map-pin"></i> ${r.address_start || 'Pickup'} → ${r.address_end || 'Dropoff'}</span></td>
+              <td><strong>$${r.price || r.price_for_passenger || '0.00'}</strong></td>
+              <td><span class="badge ${getStatusBadge(r.status)}">${r.status || 'Active'}</span></td>
+              <td>${r.created_at ? r.created_at.substring(11, 16) : 'Just now'}</td>
+              <td>
+                <button class="btn btn-secondary btn-sm" onclick="viewDetails('SR-${r.id}')">
+                  <i class="ph ph-eye"></i> View
+                </button>
+              </td>
+            </tr>
+          `).join('');
+        }
+      }
+    } catch (err) {
+      console.log('Error fetching live rides:', err);
+    }
+  }
+
+  async function fetchLivePassengers() {
+    try {
+      const response = await fetch('/backend/Admin/getPassengerDetails.php', {
+        headers: { 'Authorization': `Bearer ${currentUser?.jwt || ''}` }
+      });
+      const data = await response.json();
+      const passengers = Array.isArray(data) ? data : (data.data || []);
+      if (passengers.length > 0) {
+        const tbody = document.getElementById('passengersTableBody');
+        if (tbody) {
+          tbody.innerHTML = passengers.slice(0, 15).map(p => `
+            <tr>
+              <td><strong>PSG-${p.id}</strong></td>
+              <td>${p.first_name || 'Passenger'} ${p.last_name || ''}</td>
+              <td>${p.email || p.phone || 'N/A'}</td>
+              <td>${p.countPassengerRide || 0} trips</td>
+              <td><i class="ph-fill ph-star" style="color:var(--warning);"></i> ${p.passengerAverageRating || '5.0'}</td>
+              <td>${p.created_at ? p.created_at.substring(0, 10) : 'Jan 2025'}</td>
+              <td><span class="badge ${getStatusBadge(p.status || 'Active')}">${p.status || 'Active'}</span></td>
+              <td>
+                <button class="btn btn-secondary btn-sm"><i class="ph ph-user"></i> Profile</button>
+              </td>
+            </tr>
+          `).join('');
+        }
+      }
+    } catch (err) {
+      console.log('Error fetching live passengers:', err);
+    }
+  }
+
+  async function fetchLivePendingStaff() {
+    try {
+      const response = await fetch('/backend/Admin/Staff/pending.php', {
+        headers: { 'Authorization': `Bearer ${currentUser?.jwt || ''}` }
+      });
+      const data = await response.json();
+      const pending = data?.data || [];
+      if (pending.length > 0) {
+        showNotification(`Notice: You have ${pending.length} pending staff approval requests!`, 'info');
+      }
+    } catch (err) {
+      console.log('Pending staff lookup:', err);
+    }
+  }
+
   const fingerprintLoginBtn = document.getElementById('fingerprintLoginBtn');
   fingerprintLoginBtn?.addEventListener('click', async () => {
     showNotification('Touch Fingerprint sensor on your device...', 'info');