waseel/dashboard/src/pages/Drivers.tsx

import { useCallback, useEffect, useState, type FormEvent } from "react";
import { api } from "../lib/api";

type Driver = {
  id: number;
  first_name: string;
  last_name: string;
  profile_image_url: string | null;
  car_image_url: string | null;
  car_seats: number;
  rating: string;
  service: string;
  online: boolean;
  car_model: string | null;
  total_rides: number;
  revenue: number;
};

const EMPTY = {
  first_name: "",
  last_name: "",
  profile_image_url: "",
  car_image_url: "",
  car_seats: 4,
  rating: 4.5,
};

export default function Drivers() {
  const [drivers, setDrivers] = useState<Driver[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [editing, setEditing] = useState<Driver | "new" | null>(null);

  const load = useCallback(async () => {
    try {
      const res = await api<{ data: Driver[] }>("/admin/drivers");
      setDrivers(res.data);
      setError(null);
    } catch (e) {
      setError((e as Error).message);
    }
  }, []);

  useEffect(() => {
    load();
  }, [load]);

  const remove = async (id: number) => {
    if (!confirm("Delete this driver?")) return;
    try {
      await api(`/admin/drivers/${id}`, { method: "DELETE" });
      await load();
    } catch (e) {
      setError((e as Error).message);
    }
  };

  return (
    <>
      <h2>Drivers & fleet</h2>
      <div className="toolbar">
        <button onClick={() => setEditing("new")}>Add driver</button>
      </div>
      {error && <div className="error">{error}</div>}
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Service</th>
            <th>Seats</th>
            <th>Rating</th>
            <th>Online</th>
            <th>Rides</th>
            <th>Revenue</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {drivers.map((d) => (
            <tr key={d.id}>
              <td>{d.id}</td>
              <td>
                {d.first_name} {d.last_name}
              </td>
              <td>
                <span className={`tag tag-${d.service}`}>{d.service}</span>
              </td>
              <td>{d.car_seats}</td>
              <td>{d.rating}</td>
              <td>{d.online ? "● online" : "○ off"}</td>
              <td>{d.total_rides}</td>
              <td>{d.revenue.toLocaleString()}</td>
              <td>
                <div className="row-actions">
                  <button className="secondary" onClick={() => setEditing(d)}>
                    Edit
                  </button>
                  <button className="danger" onClick={() => remove(d.id)}>
                    Delete
                  </button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      {editing && (
        <DriverForm
          initial={editing === "new" ? null : editing}
          onClose={() => setEditing(null)}
          onSaved={() => {
            setEditing(null);
            load();
          }}
        />
      )}
    </>
  );
}

function DriverForm({
  initial,
  onClose,
  onSaved,
}: {
  initial: Driver | null;
  onClose: () => void;
  onSaved: () => void;
}) {
  const [form, setForm] = useState(
    initial
      ? {
          first_name: initial.first_name,
          last_name: initial.last_name,
          profile_image_url: initial.profile_image_url ?? "",
          car_image_url: initial.car_image_url ?? "",
          car_seats: initial.car_seats,
          rating: Number(initial.rating),
        }
      : { ...EMPTY },
  );
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  const set = (key: keyof typeof form) => (e: { target: { value: string } }) =>
    setForm((f) => ({
      ...f,
      [key]:
        key === "car_seats" || key === "rating"
          ? Number(e.target.value)
          : e.target.value,
    }));

  const submit = async (e: FormEvent) => {
    e.preventDefault();
    setBusy(true);
    try {
      await api(initial ? `/admin/drivers/${initial.id}` : "/admin/drivers", {
        method: initial ? "PATCH" : "POST",
        body: JSON.stringify(form),
      });
      onSaved();
    } catch (err) {
      setError((err as Error).message);
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <form className="modal" onClick={(e) => e.stopPropagation()} onSubmit={submit}>
        <h3>{initial ? `Edit driver #${initial.id}` : "New driver"}</h3>
        <input placeholder="First name" value={form.first_name} onChange={set("first_name")} required />
        <input placeholder="Last name" value={form.last_name} onChange={set("last_name")} required />
        <input placeholder="Profile image URL" value={form.profile_image_url} onChange={set("profile_image_url")} />
        <input placeholder="Car image URL" value={form.car_image_url} onChange={set("car_image_url")} />
        <label>
          Seats{" "}
          <select value={form.car_seats} onChange={set("car_seats")}>
            {[2, 4, 6, 7].map((n) => (
              <option key={n} value={n}>
                {n}
              </option>
            ))}
          </select>
        </label>
        <input
          type="number"
          step="0.1"
          min="1"
          max="5"
          placeholder="Rating"
          value={form.rating}
          onChange={set("rating")}
        />
        {error && <div className="error">{error}</div>}
        <div className="row-actions">
          <button disabled={busy}>{busy ? "Saving…" : "Save"}</button>
          <button type="button" className="secondary" onClick={onClose}>
            Cancel
          </button>
        </div>
      </form>
    </div>
  );
}