SRATRC · vvshk · May 14, 2026 · May 18, 2026 · May 18, 2026 · May 20, 2026
diff --git a/admin/travel/coordinatorDashboard.html b/admin/travel/coordinatorDashboard.html
@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <script src="../../style/js/config.js"></script>
+  <script src="../../style/js/coordinatorAuth.js"></script>
+  <script src="https://unpkg.com/html5-qrcode"></script>
+
+  <script>
+    checkCoordinatorAuth();
+  </script>
+
+
+
+  <meta charset="UTF-8" />
+
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <title>
+    Coordinator Dashboard
+  </title>
+
+  <link rel="stylesheet" href="../../style/css/styles.css" />
+
+  <style>
+    .dashboard-grid {
+
+      display: grid;
+
+      grid-template-columns:
+        repeat(auto-fit, minmax(300px, 1fr));
+
+      gap: 20px;
+
+      margin-bottom: 20px;
+    }
+
+    .dashboard-card {
+
+      background: #f8f9fb;
+
+      border-radius: 10px;
+
+      padding: 20px;
+
+      border: 1px solid #ddd;
+    }
+
+    .info-row {
+
+      display: flex;
+
+      justify-content: space-between;
+
+      padding: 10px 0;
+
+      border-bottom:
+        1px solid #eee;
+    }
+
+    .info-label {
+
+      font-weight: 600;
+
+      color: #1d3557;
+    }
+
+    .info-value {
+
+      color: #333;
+    }
+
+    .contact-actions {
+
+      display: flex;
+
+      gap: 10px;
+
+      flex-wrap: wrap;
+    }
+
+    .contact-btn {
+
+      text-decoration: none;
+
+      padding: 6px 12px;
+
+      border-radius: 6px;
+
+      background: #1d3557;
+
+      color: white;
+
+      font-size: 13px;
+    }
+
+    .whatsapp-btn {
+
+      background: #25d366;
+    }
+
+    .passenger-controls {
+
+      display: flex;
+
+      gap: 15px;
+
+      margin-bottom: 20px;
+
+      flex-wrap: wrap;
+    }
+
+    .passenger-controls input,
+    .passenger-controls select {
+
+      padding: 10px;
+
+      border: 1px solid #ccc;
+
+      border-radius: 6px;
+
+      min-width: 220px;
+    }
+
+    .summary-grid {
+
+      display: grid;
+
+      grid-template-columns:
+        repeat(auto-fit,
+          minmax(220px, 1fr));
+
+      gap: 15px;
+
+      margin-bottom: 25px;
+    }
+
+    .summary-card {
+
+      background: #f8fafc;
+
+      border: 1px solid #dbe2ea;
+
+      border-radius: 10px;
+
+      padding: 18px;
+
+      box-shadow:
+        0 2px 6px rgba(0, 0, 0, 0.04);
+    }
+
+    .summary-label {
+
+      font-size: 14px;
+
+      font-weight: 600;
+
+      color: #475569;
+
+      margin-bottom: 10px;
+    }
+
+    .summary-value {
+
+      font-size: 28px;
+
+      font-weight: 700;
+
+      color: #1e293b;
+    }
+
+    .boarded-text {
+
+      color: #16a34a;
+    }
+
+    .pending-text {
+
+      color: #dc2626;
+    }
+  </style>
+
+  <script src="coordinatorDashboard.js" defer></script>
+
+
+</head>
+
+<body>
+
+  <div class="header">
+
+    <div class="container">
+
+      <div class="logout">
+
+        <a href="javascript:void(0);" onclick="coordinatorLogout()">
+          Logout
+        </a>
+
+      </div>
+
+    </div>
+
+  </div>
+
+  <div class="middlecontent">
+
+    <div class="container">
+
+      <div class="whitesec">
+
+        <div class="inner-padding">
+
+
+          <!-- COORDINATOR INFO -->
+
+          <div class="dashboard-grid">
+
+            <!-- COORDINATOR CARD -->
+
+            <div class="dashboard-card">
+
+              <h3>
+                Coordinator Details
+              </h3>
+
+              <div id="coordinatorInfo">
+
+              </div>
+
+            </div>
+
+            <!-- BUS CARD -->
+
+            <div class="dashboard-card">
+
+              <h3>
+                Assigned Bus
+              </h3>
+
+              <div id="busInfo">
+
+              </div>
+
+            </div>
+
+          </div>
+
+          <hr />
+
+
+          <div id="busSummary">
+
+          </div>
+
+          <div id="boardingSummary">
+
+          </div>
+          <hr />
+
+          <!-- PASSENGERS -->
+
+
+          <div class="passenger-controls">
+            <select id="busSelector">
+
+            </select>
+
+            <input type="text" id="passengerSearch" placeholder="Search passenger..." />
+
+            <select id="boardingFilter">
+
+              <option value="all">
+                All
+              </option>
+
+              <option value="boarded">
+                Boarded
+              </option>
+
+              <option value="pending">
+                Pending
+              </option>
+
+            </select>
+
+          </div>
+          <div class="qr-section">
+
+
+
+            <div id="qr-reader" style="
+      width: 300px;
+      margin-top: 15px;
+      display: none;
+    "></div>
+
+          </div>
+          <div class="table-responsive">
+
+
+            <table class="table table-striped table-bordered" id="passengerTable">
+
+              <thead>
+
+                <tr>
+
+                  <th>#</th>
+
+                  <th>Name</th>
+
+                  <th>Mobile</th>
+                  <th>Pickup</th>
+
+                  <th>Stop Time</th>
+
+                  <th>Drop</th>
+                  <th>Luggage</th>
+                  <th>Comments</th>
+
+                  <th>Contact</th>
+
+                  <th>Status</th>
+                  <th>Action</th>
+
+
+                </tr>
+
+              </thead>
+
+              <tbody>
+
+              </tbody>
+
+            </table>
+
+          </div>
+
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</body>
+
+</html>