Add driver document review and staff onboarding

Driver documents: paged list from auth/driver/drivers_pending_list.php, a
detail panel showing each uploaded document as a thumbnail linking to the
full image, and activation via Admin/driver/updateDriverFromAdmin.php. The
confirmation states how many documents were reviewed and warns explicitly
when a captain has none on file, since approving then activates an
unverified account.

Details are requested as a POST body. The mobile app calls this endpoint as
GET "?id=", which filterRequest() never reads, so its detail lookup cannot
be receiving an id at all.

Staff: pending admin/service accounts with per-account activation via
Staff/activate.php, the employee list, and a creation form posting to
Staff/add.php. Administrator accounts are offered only to super admins,
matching add.php's own check; passwords are rejected below 8 characters and
cleared from the form after submission.

Both screens mask phone numbers for plain admins and never render
token/password/fingerprint fields.

Also stop .btn-primary stretching to full width when used inline in a card
header — it is styled for the login form.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

dashboard/siro-admin/css/main.css

@@ -1326,3 +1326,61 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 textarea.form-input { text-align: start; }
+
+/* Driver document review */
+.doc-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+.doc-card {
+  margin: 0;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-color);
+  background: rgba(255, 255, 255, 0.03);
+  overflow: hidden;
+}
+
+.doc-card img {
+  display: block;
+  width: 100%;
+  height: 150px;
+  object-fit: cover;
+  background: rgba(2, 6, 23, 0.6);
+  transition: var(--transition-fast);
+}
+
+.doc-card img:hover { opacity: 0.85; }
+
+.doc-missing {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  height: 150px;
+  color: var(--text-subtle);
+  font-size: 0.8rem;
+  background: rgba(2, 6, 23, 0.6);
+}
+
+.doc-card figcaption {
+  padding: 0.6rem 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  font-size: 0.8rem;
+  color: var(--text-main);
+  border-top: 1px solid var(--border-color);
+}
+
+.doc-card figcaption .stamp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* .btn-primary is full-width by default (login form); inline uses must not be */
+.btn-primary.btn-sm {
+  width: auto;
+  padding: 0.4rem 0.9rem;
+  justify-content: center;
+}
+
+.card-header { gap: 1rem; flex-wrap: wrap; }

dashboard/siro-admin/js/app.js

@@ -919,10 +919,15 @@
       subtitle: 'Push a notification to every captain or every passenger',
       custom: renderBroadcast,
     },
+    {
+      id: 'driverDocs', group: 'Quality', icon: 'ph-identification-card', title: 'Driver Documents',
+      subtitle: 'Captains awaiting document review and activation',
+      custom: renderDriverDocs,
+    },
     {
       id: 'staff', superOnly: true, group: 'Administration', icon: 'ph-identification-badge', title: 'Staff & Employees',
-      subtitle: 'Internal staff records',
+      subtitle: 'Internal staff records, activation and onboarding',
-      panels: [{ title: 'Employees', path: '/Admin/employee/get.php' }],
+      custom: renderStaff,
     },
     {
       id: 'audit', group: 'Administration', icon: 'ph-scroll', title: 'Audit Log',
@@ -1053,6 +1058,323 @@
     });
   }
 
+  // ── Driver document review ───────────────────────────────────────────────
+  // The list is paged server-side (limit/offset). Activation posts
+  // status=active to Admin/driver/updateDriverFromAdmin.php, exactly as the
+  // Flutter DriverDocsController does.
+  const DOCS_PAGE_SIZE = 15;
+  let docsOffset = 0;
+
+  async function renderDriverDocs(host, offset = 0) {
+    docsOffset = offset;
+    host.innerHTML = '<div class="card"><div class="table-msg">Loading captains awaiting review…</div></div>';
+
+    let drivers = [];
+    try {
+      const payload = await api('/auth/driver/drivers_pending_list.php', {
+        params: { limit: DOCS_PAGE_SIZE, offset },
+      });
+      drivers = normaliseRows(payload);
+    } catch (err) {
+      if (handleApiError(err, 'driver-docs')) return;
+      host.innerHTML = `<div class="card"><div class="table-msg is-error">${esc(err.message)}</div></div>`;
+      return;
+    }
+
+    if (!drivers.length && offset === 0) {
+      host.innerHTML = '<div class="card"><div class="table-msg">No captains are awaiting document review.</div></div>';
+      return;
+    }
+
+    host.innerHTML = `
+      <div class="card">
+        <div class="card-header">
+          <h3 class="card-title">Awaiting review <span class="card-sub">showing ${drivers.length} from #${offset + 1}</span></h3>
+          <div style="display:flex; gap:0.5rem;">
+            <button class="btn btn-secondary btn-sm" id="docsPrev" ${offset === 0 ? 'disabled' : ''}><i class="ph ph-caret-left"></i></button>
+            <button class="btn btn-secondary btn-sm" id="docsNext" ${drivers.length < DOCS_PAGE_SIZE ? 'disabled' : ''}><i class="ph ph-caret-right"></i></button>
+          </div>
+        </div>
+        <div class="table-responsive">
+          <table class="data-table">
+            <thead><tr><th>ID</th><th>Name</th><th>Phone</th><th></th></tr></thead>
+            <tbody>
+              ${drivers.map((d) => `
+                <tr>
+                  <td><strong>#${esc(d.id)}</strong></td>
+                  <td>${esc(`${d.first_name || ''} ${d.last_name || ''}`.trim() || 'Unnamed')}</td>
+                  <td>${esc(maskPhone(d.phone))}</td>
+                  <td><button class="btn btn-secondary btn-sm" data-review="${esc(d.id)}"><i class="ph ph-files"></i> Review documents</button></td>
+                </tr>`).join('')}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="card" id="docsDetail">
+        <div class="table-msg">Pick a captain above to inspect their documents.</div>
+      </div>`;
+
+    $('docsPrev')?.addEventListener('click', () =>
+      renderDriverDocs(host, Math.max(0, offset - DOCS_PAGE_SIZE)));
+    $('docsNext')?.addEventListener('click', () =>
+      renderDriverDocs(host, offset + DOCS_PAGE_SIZE));
+
+    host.querySelectorAll('[data-review]').forEach((btn) =>
+      btn.addEventListener('click', () => showDriverDocs(btn.dataset.review, host)));
+  }
+
+  async function showDriverDocs(driverId, host) {
+    const panel = $('docsDetail');
+    panel.innerHTML = '<div class="table-msg">Loading documents…</div>';
+
+    let driver = {};
+    let documents = [];
+    try {
+      // Sent as a POST body: filterRequest() ignores query strings, so the
+      // mobile app's GET "?id=" form never reaches this endpoint's $driverId.
+      const payload = await api('/auth/driver/driver_details.php', { params: { id: driverId } });
+      driver = payload?.driver || {};
+      documents = payload?.documents || [];
+    } catch (err) {
+      if (handleApiError(err, 'driver-details')) return;
+      panel.innerHTML = `<div class="table-msg is-error">${esc(err.message)}</div>`;
+      return;
+    }
+
+    const facts = Object.entries(driver)
+      .filter(([k, v]) => !/token|password|fingerprint/i.test(k) && v !== null && v !== '')
+      .slice(0, 18);
+
+    panel.innerHTML = `
+      <div class="card-header">
+        <h3 class="card-title">
+          ${esc(`${driver.first_name || ''} ${driver.last_name || ''}`.trim() || `Captain #${driverId}`)}
+          <span class="card-sub">#${esc(driverId)} · ${esc(driver.status || 'unknown')}</span>
+        </h3>
+        <button class="btn btn-primary btn-sm" data-approve-driver="${esc(driverId)}">
+          <i class="ph ph-check"></i> <span>Approve &amp; activate</span>
+        </button>
+      </div>
+
+      <div class="sub-panel">
+        <h4 class="sub-panel-title">Documents (${documents.length})</h4>
+        ${documents.length ? `
+          <div class="doc-grid">
+            ${documents.map((doc) => `
+              <figure class="doc-card">
+                ${doc.link
+                  ? `<a href="${esc(doc.link)}" target="_blank" rel="noopener">
+                       <img src="${esc(doc.link)}" alt="${esc(doc.doc_type || 'document')}" loading="lazy">
+                     </a>`
+                  : '<div class="doc-missing"><i class="ph ph-file-x"></i> no file linked</div>'}
+                <figcaption>
+                  <strong>${esc(humanize(doc.doc_type || 'document'))}</strong>
+                  <span class="stamp">${esc(doc.image_name || '—')}</span>
+                </figcaption>
+              </figure>`).join('')}
+          </div>`
+          : '<div class="table-msg">This captain has uploaded no documents — approving now would activate an unverified account.</div>'}
+      </div>
+
+      <div class="sub-panel">
+        <h4 class="sub-panel-title">Record</h4>
+        <div class="mini-list">
+          ${facts.map(([k, v]) => `
+            <div class="kv-row">
+              <span>${esc(humanize(k))}</span>
+              <strong>${esc(/phone/i.test(k) ? maskPhone(v) : formatValue(v, k))}</strong>
+            </div>`).join('')}
+        </div>
+      </div>`;
+
+    panel.querySelector('[data-approve-driver]').addEventListener('click', () =>
+      approveDriver(driverId, driver, documents.length, host));
+  }
+
+  async function approveDriver(driverId, driver, docCount, host) {
+    const name = `${driver.first_name || ''} ${driver.last_name || ''}`.trim() || `#${driverId}`;
+    const warning = docCount === 0
+      ? '\n\nWARNING: no documents are on file for this captain.'
+      : `\n\n${docCount} document(s) reviewed.`;
+
+    if (!confirm(`Activate captain ${name}?${warning}\n\nThey will be able to accept rides immediately.`)) return;
+
+    try {
+      await api('/Admin/driver/updateDriverFromAdmin.php', {
+        params: { id: driverId, status: 'active' },
+      });
+      toast(`Captain ${name} activated.`, 'success');
+      renderDriverDocs(host, docsOffset);
+    } catch (err) {
+      if (!handleApiError(err, 'driver-approve')) toast(err.message, 'danger');
+    }
+  }
+
+  // ── Staff management ─────────────────────────────────────────────────────
+  async function renderStaff(host) {
+    host.innerHTML = `
+      <div class="card" id="staffPending"><div class="table-msg">Loading pending accounts…</div></div>
+      <div class="card" id="staffList"><div class="table-msg">Loading employees…</div></div>
+      <div class="card">
+        <div class="card-header"><h3 class="card-title">Add a staff account</h3></div>
+        <p class="card-note">
+          Creates a login for the Siro admin tools. Choose the password with the new member present, or have
+          them change it at first sign-in — it is stored hashed and cannot be read back.
+        </p>
+        <div class="tariff-grid">
+          <label class="tariff-field">
+            <span class="tariff-label">Role</span>
+            <select class="select-input" id="staffRole">
+              <option value="service">Customer service</option>
+              <option value="admin">Administrator</option>
+            </select>
+          </label>
+          <label class="tariff-field">
+            <span class="tariff-label">Full name <em>required</em></span>
+            <input type="text" class="form-input" id="staffName" autocomplete="off">
+          </label>
+          <label class="tariff-field">
+            <span class="tariff-label">Phone</span>
+            <input type="text" class="form-input" id="staffPhone" autocomplete="off">
+          </label>
+          <label class="tariff-field">
+            <span class="tariff-label">Email</span>
+            <input type="email" class="form-input" id="staffEmail" autocomplete="off">
+          </label>
+          <label class="tariff-field">
+            <span class="tariff-label">Password <em>required</em></span>
+            <input type="password" class="form-input" id="staffPassword" autocomplete="new-password">
+          </label>
+          <label class="tariff-field">
+            <span class="tariff-label">Country</span>
+            <input type="text" class="form-input" id="staffCountry" value="Jordan">
+          </label>
+        </div>
+        <div class="api-base-row" style="margin-top:1rem;">
+          <button class="btn btn-primary btn-sm" id="staffAdd"><i class="ph ph-user-plus"></i> <span>Create account</span></button>
+          <span class="stamp" id="staffStatus"></span>
+        </div>
+      </div>`;
+
+    $('staffAdd').addEventListener('click', () => addStaff(host));
+    loadStaffPending(host);
+    loadEmployees();
+  }
+
+  async function loadStaffPending(host) {
+    const panel = $('staffPending');
+    try {
+      const payload = await api('/Admin/Staff/pending.php');
+      const rows = payload?.data || [];
+      const sources = payload?.sources || {};
+
+      const notes = Object.entries(sources)
+        .filter(([, state]) => state !== 'ok')
+        .map(([name, state]) => `<div class="table-msg is-error">${esc(humanize(name))}: ${esc(state)}</div>`)
+        .join('');
+
+      panel.innerHTML = `
+        <div class="card-header"><h3 class="card-title">Pending activation</h3></div>
+        ${notes}
+        ${rows.length ? `
+          <div class="table-responsive">
+            <table class="data-table">
+              <thead><tr><th>ID</th><th>Name</th><th>Phone</th><th>Type</th><th>Requested</th><th></th></tr></thead>
+              <tbody>
+                ${rows.map((r) => `
+                  <tr>
+                    <td><strong>#${esc(r.id)}</strong></td>
+                    <td>${esc(r.name || '—')}</td>
+                    <td>${esc(maskPhone(r.phone))}</td>
+                    <td><span class="badge badge-info">${esc(r.type)}</span></td>
+                    <td>${esc(fmtDate(r.created_at, true))}</td>
+                    <td><button class="btn btn-secondary btn-sm" data-activate="${esc(r.id)}" data-type="${esc(r.type)}">
+                      <i class="ph ph-check"></i> Activate
+                    </button></td>
+                  </tr>`).join('')}
+              </tbody>
+            </table>
+          </div>` : (notes ? '' : '<div class="table-msg">No accounts are waiting for activation.</div>')}`;
+
+      panel.querySelectorAll('[data-activate]').forEach((btn) =>
+        btn.addEventListener('click', () => activateStaff(btn.dataset.activate, btn.dataset.type, host)));
+    } catch (err) {
+      if (handleApiError(err, 'staff-pending')) return;
+      panel.innerHTML = `<div class="table-msg is-error">${esc(err.message)}</div>`;
+    }
+  }
+
+  async function loadEmployees() {
+    const panel = $('staffList');
+    try {
+      const payload = await api('/Admin/employee/get.php');
+      panel.innerHTML = '<div class="card-header"><h3 class="card-title">Employees</h3></div><div class="panel-body"></div>';
+      renderPayload(panel.querySelector('.panel-body'), payload);
+    } catch (err) {
+      if (handleApiError(err, 'employees')) return;
+      panel.innerHTML = `<div class="card-header"><h3 class="card-title">Employees</h3></div><div class="table-msg is-error">${esc(err.message)}</div>`;
+    }
+  }
+
+  async function activateStaff(userId, type, host) {
+    if (!confirm(`Activate ${type} account #${userId}? They will be able to sign in immediately.`)) return;
+    try {
+      await api('/Admin/Staff/activate.php', { params: { user_id: userId, type } });
+      toast(`Account #${userId} activated.`, 'success');
+      loadStaffPending(host);
+    } catch (err) {
+      if (!handleApiError(err, 'staff-activate')) toast(err.message, 'danger');
+    }
+  }
+
+  async function addStaff(host) {
+    const role = $('staffRole').value;
+    const name = $('staffName').value.trim();
+    const phone = $('staffPhone').value.trim();
+    const email = $('staffEmail').value.trim();
+    const password = $('staffPassword').value;
+    const country = $('staffCountry').value.trim() || 'Jordan';
+    const status = $('staffStatus');
+
+    if (!name || !password) {
+      toast('Name and password are required.', 'warning');
+      return;
+    }
+    if (password.length < 8) {
+      toast('Use a password of at least 8 characters.', 'warning');
+      return;
+    }
+    if (role === 'admin' && !isSuperAdmin()) {
+      toast('Only a super admin can create administrator accounts.', 'warning');
+      return;
+    }
+
+    const roleLabel = role === 'admin' ? 'ADMINISTRATOR' : 'customer service';
+    if (!confirm(
+      `Create a ${roleLabel} account for "${name}"?\n\n` +
+      `Phone: ${phone || '—'}\nEmail: ${email || '—'}\n\n` +
+      (role === 'admin'
+        ? 'Administrators can see and change platform data.'
+        : 'Customer service staff can view operational data.')
+    )) return;
+
+    busy($('staffAdd'), true, 'Creating…');
+    status.textContent = '';
+    try {
+      await api('/Admin/Staff/add.php', {
+        params: { name, phone, email, password, role, country },
+      });
+      status.textContent = `Created ${roleLabel} account for ${name}`;
+      toast('Staff account created.', 'success');
+      ['staffName', 'staffPhone', 'staffEmail', 'staffPassword'].forEach((id) => { $(id).value = ''; });
+      loadStaffPending(host);
+    } catch (err) {
+      if (!handleApiError(err, 'staff-add')) toast(`Could not create account: ${err.message}`, 'danger');
+    } finally {
+      busy($('staffAdd'), false, 'Create account');
+    }
+  }
+
   // ── Route approvals ──────────────────────────────────────────────────────
   // transit/route/approve.php accepts approve | suspend | reject and refuses a
   // no-op transition, so each decision is confirmed against the route's stops.