ostroner 1.0.0

package/templates/y-bus/frontend/src/pages/Login.jsx

@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import toast from "react-hot-toast";
+import { Eye, EyeOff, Ticket } from "lucide-react";
+import { useAuth } from "../context/AuthContext";
+import { Button } from "../components/Button";
+import { Input } from "../components/Input";
+
+function getHomePathByRole(role) {
+  return role === "manager" ? "/manager" : "/";
+}
+
+export function Login() {
+  const [form, setForm] = useState({ username: "", password: "" });
+  const [showPassword, setShowPassword] = useState(false);
+  const { login } = useAuth();
+  const navigate = useNavigate();
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+    try {
+      const user = await login(form);
+      toast.success("Login successful");
+      navigate(getHomePathByRole(user.userrole));
+    } catch (error) {
+      toast.error(error.response?.data?.message || "Login failed");
+    }
+  }
+
+  return (
+    <main className="grid min-h-screen place-items-center bg-gray-100 p-4">
+      <form
+        onSubmit={handleSubmit}
+        className="w-full max-w-md rounded-2xl border border-gray-200 bg-white p-6 shadow-sm"
+      >
+        <div className="mb-8 flex items-center gap-3">
+          <div className="grid h-12 w-12 place-items-center rounded-xl border border-gray-300">
+            <Ticket size={22} />
+          </div>
+          <div>
+            <h1 className="text-xl font-bold text-gray-950">Y-BUS</h1>
+            <p className="text-sm text-gray-500">Sign in to continue</p>
+          </div>
+        </div>
+
+        <div className="grid gap-4">
+          <Input
+            label="Username"
+            value={form.username}
+            onChange={(event) => setForm({ ...form, username: event.target.value })}
+            required
+          />
+          <div className="relative">
+            <Input
+              label="Password"
+              type={showPassword ? "text" : "password"}
+              value={form.password}
+              onChange={(event) => setForm({ ...form, password: event.target.value })}
+              required
+            />
+            <button
+              type="button"
+              className="absolute bottom-3 right-3 text-gray-500 hover:text-gray-950"
+              onClick={() => setShowPassword((value) => !value)}
+            >
+              {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+            </button>
+          </div>
+          <Button type="submit" className="w-full">Login</Button>
+        </div>
+
+        <p className="mt-6 text-center text-sm text-gray-500">
+          No account?{" "}
+          <Link className="font-semibold text-gray-950 underline" to="/register">
+            Create one
+          </Link>
+        </p>
+      </form>
+    </main>
+  );
+}

package/templates/y-bus/frontend/src/pages/ManagerBuses.jsx

@@ -0,0 +1,140 @@
+import { useEffect, useState } from "react";
+import toast from "react-hot-toast";
+import { Button } from "../components/Button";
+import { Input } from "../components/Input";
+import api from "../services/api";
+
+const emptyForm = { platenumber: "", totalseats: "", bustype: "" };
+
+export function ManagerBuses() {
+  const [buses, setBuses] = useState([]);
+  const [form, setForm] = useState(emptyForm);
+  const [editingId, setEditingId] = useState(null);
+
+  async function loadBuses() {
+    const response = await api.get("/buses");
+    setBuses(response.data.data || []);
+  }
+
+  useEffect(() => {
+    loadBuses().catch(() => toast.error("Failed to load buses"));
+  }, []);
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+    try {
+      const payload = { ...form, totalseats: Number(form.totalseats) };
+      if (editingId) await api.put(`/buses/${editingId}`, payload);
+      else await api.post("/buses", payload);
+
+      toast.success(editingId ? "Bus updated" : "Bus created");
+      setForm(emptyForm);
+      setEditingId(null);
+      await loadBuses();
+    } catch (error) {
+      toast.error(error.response?.data?.message || "Saving bus failed");
+    }
+  }
+
+  async function deleteBus(id) {
+    if (!confirm("Delete this bus?")) return;
+    try {
+      await api.delete(`/buses/${id}`);
+      toast.success("Bus deleted");
+      await loadBuses();
+    } catch (error) {
+      toast.error(error.response?.data?.message || "Delete failed");
+    }
+  }
+
+  function editBus(bus) {
+    setEditingId(bus.busid);
+    setForm({
+      platenumber: bus.platenumber,
+      totalseats: bus.totalseats,
+      bustype: bus.bustype,
+    });
+  }
+
+  return (
+    <div className="grid gap-6 xl:grid-cols-[360px_1fr]">
+      <form onSubmit={handleSubmit} className="h-fit rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
+        <h1 className="text-2xl font-bold text-gray-950">{editingId ? "Edit bus" : "Create bus"}</h1>
+        <div className="mt-5 grid gap-4">
+          <Input
+            label="Plate number"
+            value={form.platenumber}
+            onChange={(event) => setForm({ ...form, platenumber: event.target.value })}
+            required
+          />
+          <Input
+            label="Total seats"
+            type="number"
+            min="1"
+            value={form.totalseats}
+            onChange={(event) => setForm({ ...form, totalseats: event.target.value })}
+            required
+          />
+          <Input
+            label="Bus type"
+            value={form.bustype}
+            onChange={(event) => setForm({ ...form, bustype: event.target.value })}
+            required
+          />
+          <Button type="submit">{editingId ? "Update bus" : "Save bus"}</Button>
+          {editingId ? (
+            <Button
+              type="button"
+              variant="light"
+              onClick={() => {
+                setEditingId(null);
+                setForm(emptyForm);
+              }}
+            >
+              Cancel edit
+            </Button>
+          ) : null}
+        </div>
+      </form>
+
+      <section className="space-y-4">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-950">Buses</h1>
+          <p className="mt-1 text-sm text-gray-500">Manage fleet records used when creating schedules.</p>
+        </div>
+        <div className="overflow-x-auto rounded-2xl border border-gray-200 bg-white">
+          <table className="min-w-full text-left text-sm">
+            <thead className="bg-gray-50 text-xs uppercase tracking-wide text-gray-600">
+              <tr>
+                <th className="px-4 py-3 font-semibold">Plate</th>
+                <th className="px-4 py-3 font-semibold">Seats</th>
+                <th className="px-4 py-3 font-semibold">Type</th>
+                <th className="px-4 py-3 font-semibold">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {buses.map((bus) => (
+                <tr key={bus.busid}>
+                  <td className="border-b border-gray-100 px-4 py-3 align-top font-semibold text-gray-950">{bus.platenumber}</td>
+                  <td className="border-b border-gray-100 px-4 py-3 align-top">{bus.totalseats}</td>
+                  <td className="border-b border-gray-100 px-4 py-3 align-top">{bus.bustype}</td>
+                  <td className="border-b border-gray-100 px-4 py-3 align-top">
+                    <div className="flex flex-wrap gap-2">
+                      <Button variant="light" onClick={() => editBus(bus)}>Edit</Button>
+                      <Button variant="light" onClick={() => deleteBus(bus.busid)}>Delete</Button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+              {buses.length === 0 ? (
+                <tr>
+                  <td colSpan="4" className="border-b border-gray-100 px-4 py-3 text-center text-gray-500">No buses found.</td>
+                </tr>
+              ) : null}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  );
+}

package/templates/y-bus/frontend/src/pages/ManagerDashboard.jsx

@@ -0,0 +1,108 @@
+import { useEffect, useMemo, useState } from "react";
+import toast from "react-hot-toast";
+import api from "../services/api";
+
+export function ManagerDashboard() {
+  const [buses, setBuses] = useState([]);
+  const [schedules, setSchedules] = useState([]);
+  const [bookings, setBookings] = useState([]);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const [busResponse, scheduleResponse, bookingResponse] = await Promise.all([
+          api.get("/buses"),
+          api.get("/schedules"),
+          api.get("/bookings"),
+        ]);
+        setBuses(busResponse.data.data || []);
+        setSchedules(scheduleResponse.data.data || []);
+        setBookings(bookingResponse.data.data || []);
+      } catch (error) {
+        toast.error(error.response?.data?.message || "Failed to load dashboard");
+      }
+    }
+
+    load();
+  }, []);
+
+  const stats = useMemo(() => {
+    const active = schedules.filter((schedule) => schedule.schedulestatus === "active").length;
+    const revenue = bookings.reduce((sum, booking) => {
+      const price = Number(booking.Schedule?.ticketprice || 0);
+      return sum + price;
+    }, 0);
+    return { active, bookings: bookings.length, revenue };
+  }, [schedules, bookings]);
+
+  const frw = (amount) => `FRW ${Number(amount || 0).toLocaleString()}`;
+
+  const cards = [
+    { label: "Buses", value: buses.length },
+    { label: "Active schedules", value: stats.active },
+    { label: "Bookings", value: stats.bookings },
+    { label: "Revenue", value: frw(stats.revenue) },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <section className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
+        <h1 className="text-2xl font-bold text-gray-950">Manager overview</h1>
+        <p className="mt-2 text-sm text-gray-500">
+          Quick view of fleet, schedules, bookings, and revenue.
+        </p>
+      </section>
+
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        {cards.map((card) => (
+          <div key={card.label} className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
+            <p className="text-sm font-medium text-gray-500">{card.label}</p>
+            <p className="mt-3 text-2xl font-bold text-gray-950">{card.value}</p>
+          </div>
+        ))}
+      </div>
+
+      <section className="space-y-4">
+        <div>
+          <h2 className="text-lg font-bold text-gray-950">Upcoming active schedules</h2>
+          <p className="mt-1 text-sm text-gray-500">Newest operational trips customers can book.</p>
+        </div>
+        <div className="overflow-x-auto rounded-2xl border border-gray-200 bg-white">
+          <table className="min-w-full text-left text-sm">
+            <thead className="bg-gray-50 text-xs uppercase tracking-wide text-gray-600">
+              <tr>
+                <th className="px-4 py-3 font-semibold">Route</th>
+                <th className="px-4 py-3 font-semibold">Bus</th>
+                <th className="px-4 py-3 font-semibold">Departure</th>
+                <th className="px-4 py-3 font-semibold">Price</th>
+              </tr>
+            </thead>
+            <tbody>
+              {schedules
+                .filter((schedule) => schedule.schedulestatus === "active")
+                .slice(0, 8)
+                .map((schedule) => (
+                  <tr key={schedule.scheduleid}>
+                    <td className="border-b border-gray-100 px-4 py-3 align-top">
+                      <p className="font-semibold text-gray-950">{schedule.routename}</p>
+                      <p className="text-xs text-gray-500">
+                        {schedule.departurepoint} - {schedule.destination}
+                      </p>
+                    </td>
+                    <td className="border-b border-gray-100 px-4 py-3 align-top">{schedule.Bus?.platenumber || "N/A"}</td>
+                    <td className="border-b border-gray-100 px-4 py-3 align-top">{new Date(schedule.departuretime).toLocaleString()}</td>
+                    <td className="border-b border-gray-100 px-4 py-3 align-top">{frw(schedule.ticketprice)}</td>
+                  </tr>
+                ))}
+              {schedules.filter((schedule) => schedule.schedulestatus === "active").length === 0 ? (
+                <tr>
+                  <td colSpan="4" className="border-b border-gray-100 px-4 py-3 text-center text-gray-500">No active schedules.</td>
+                </tr>
+              ) : null}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  );
+}

package/templates/y-bus/frontend/src/pages/ManagerReport.jsx

@@ -0,0 +1,89 @@
+import { useEffect, useMemo, useState } from "react";
+import toast from "react-hot-toast";
+import api from "../services/api";
+
+export function ManagerReport() {
+  const [bookings, setBookings] = useState([]);
+  const [filter, setFilter] = useState("");
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const response = await api.get("/bookings");
+        setBookings(response.data.data || []);
+      } catch (error) {
+        toast.error(error.response?.data?.message || "Failed to load report");
+      }
+    }
+    load();
+  }, []);
+
+  const filteredBookings = useMemo(() => {
+    const keyword = filter.trim().toLowerCase();
+    if (!keyword) return bookings;
+
+    return bookings.filter((booking) => {
+      const text = [
+        booking.Schedule?.routename,
+        booking.Schedule?.departurepoint,
+        booking.Schedule?.destination,
+        booking.User?.username,
+      ]
+        .join(" ")
+        .toLowerCase();
+      return text.includes(keyword);
+    });
+  }, [bookings, filter]);
+
+  return (
+    <div className="space-y-6">
+      <section className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
+        <h1 className="text-2xl font-bold text-gray-950">Booking report</h1>
+        <p className="mt-2 text-sm text-gray-500">View passenger bookings.</p>
+        <input
+          className="mt-5 h-11 w-full max-w-md rounded-xl border border-gray-300 bg-white px-3 outline-none focus:border-gray-950 focus:ring-2 focus:ring-gray-200"
+          placeholder="Search by route, location, or user"
+          value={filter}
+          onChange={(event) => setFilter(event.target.value)}
+        />
+      </section>
+
+      <div className="overflow-x-auto rounded-2xl border border-gray-200 bg-white">
+        <table className="min-w-full text-left text-sm">
+          <thead className="bg-gray-50 text-xs uppercase tracking-wide text-gray-600">
+            <tr>
+              <th className="px-4 py-3 font-semibold">Route</th>
+              <th className="px-4 py-3 font-semibold">Passenger</th>
+              <th className="px-4 py-3 font-semibold">Seat</th>
+              <th className="px-4 py-3 font-semibold">Payment</th>
+              <th className="px-4 py-3 font-semibold">User</th>
+              <th className="px-4 py-3 font-semibold">Date</th>
+            </tr>
+          </thead>
+          <tbody>
+            {filteredBookings.map((booking) => (
+              <tr key={booking.bookingid}>
+                <td className="border-b border-gray-100 px-4 py-3 align-top">
+                  <p className="font-semibold text-gray-950">{booking.Schedule?.routename || "N/A"}</p>
+                  <p className="text-xs text-gray-500">
+                    {booking.Schedule?.departurepoint || "-"} - {booking.Schedule?.destination || "-"}
+                  </p>
+                </td>
+                <td className="border-b border-gray-100 px-4 py-3 align-top">{booking.passengername}</td>
+                <td className="border-b border-gray-100 px-4 py-3 align-top">{booking.seatnumber}</td>
+                <td className="border-b border-gray-100 px-4 py-3 align-top capitalize">{booking.paymentstatus}</td>
+                <td className="border-b border-gray-100 px-4 py-3 align-top">{booking.User?.username || "N/A"}</td>
+                <td className="border-b border-gray-100 px-4 py-3 align-top">{new Date(booking.bookingdate).toLocaleString()}</td>
+              </tr>
+            ))}
+            {filteredBookings.length === 0 ? (
+              <tr>
+                <td colSpan="6" className="border-b border-gray-100 px-4 py-3 text-center text-gray-500">No report data found.</td>
+              </tr>
+            ) : null}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

package/templates/y-bus/frontend/src/pages/ManagerSchedules.jsx

@@ -0,0 +1,233 @@
+import { useEffect, useMemo, useState } from "react";
+import toast from "react-hot-toast";
+import { Button } from "../components/Button";
+import { Input, Select } from "../components/Input";
+import api from "../services/api";
+
+const emptyForm = {
+  busid: "",
+  routename: "",
+  departurepoint: "",
+  destination: "",
+  departuretime: "",
+  estimatedarrivaltime: "",
+  ticketprice: "",
+  schedulestatus: "active",
+};
+
+function toDateTimeLocal(value) {
+  if (!value) return "";
+  return new Date(value).toISOString().slice(0, 16);
+}
+
+export function ManagerSchedules() {
+  const [schedules, setSchedules] = useState([]);
+  const [buses, setBuses] = useState([]);
+  const [form, setForm] = useState(emptyForm);
+  const [editingId, setEditingId] = useState(null);
+
+  const busNameById = useMemo(
+    () => Object.fromEntries(buses.map((bus) => [String(bus.busid), bus.platenumber])),
+    [buses]
+  );
+
+  const frw = (amount) => `FRW ${Number(amount || 0).toLocaleString()}`;
+
+  async function load() {
+    const [scheduleResponse, busResponse] = await Promise.all([
+      api.get("/schedules"),
+      api.get("/buses"),
+    ]);
+    setSchedules(scheduleResponse.data.data || []);
+    setBuses(busResponse.data.data || []);
+  }
+
+  useEffect(() => {
+    load().catch(() => toast.error("Failed to load schedules"));
+  }, []);
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+    try {
+      const payload = {
+        ...form,
+        busid: Number(form.busid),
+        ticketprice: Number(form.ticketprice),
+      };
+
+      if (editingId) await api.put(`/schedules/${editingId}`, payload);
+      else await api.post("/schedules", payload);
+
+      toast.success(editingId ? "Schedule updated" : "Schedule created");
+      setForm(emptyForm);
+      setEditingId(null);
+      await load();
+    } catch (error) {
+      toast.error(error.response?.data?.message || "Saving schedule failed");
+    }
+  }
+
+  async function deleteSchedule(id) {
+    if (!confirm("Delete this schedule?")) return;
+    try {
+      await api.delete(`/schedules/${id}`);
+      toast.success("Schedule deleted");
+      await load();
+    } catch (error) {
+      toast.error(error.response?.data?.message || "Delete failed");
+    }
+  }
+
+  function editSchedule(schedule) {
+    setEditingId(schedule.scheduleid);
+    setForm({
+      busid: String(schedule.busid),
+      routename: schedule.routename,
+      departurepoint: schedule.departurepoint,
+      destination: schedule.destination,
+      departuretime: toDateTimeLocal(schedule.departuretime),
+      estimatedarrivaltime: toDateTimeLocal(schedule.estimatedarrivaltime),
+      ticketprice: schedule.ticketprice,
+      schedulestatus: schedule.schedulestatus || "active",
+    });
+  }
+
+  return (
+    <div className="grid gap-6 2xl:grid-cols-[420px_1fr]">
+      <form onSubmit={handleSubmit} className="h-fit rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
+        <h1 className="text-2xl font-bold text-gray-950">{editingId ? "Edit schedule" : "Create schedule"}</h1>
+        <div className="mt-5 grid gap-4">
+          <Select
+            label="Bus"
+            value={form.busid}
+            onChange={(event) => setForm({ ...form, busid: event.target.value })}
+            required
+          >
+            <option value="">Select bus</option>
+            {buses.map((bus) => (
+              <option key={bus.busid} value={bus.busid}>
+                {bus.platenumber} - {bus.bustype}
+              </option>
+            ))}
+          </Select>
+          <Input
+            label="Route name"
+            value={form.routename}
+            onChange={(event) => setForm({ ...form, routename: event.target.value })}
+            required
+          />
+          <div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-1">
+            <Input
+              label="Departure point"
+              value={form.departurepoint}
+              onChange={(event) => setForm({ ...form, departurepoint: event.target.value })}
+              required
+            />
+            <Input
+              label="Destination"
+              value={form.destination}
+              onChange={(event) => setForm({ ...form, destination: event.target.value })}
+              required
+            />
+          </div>
+          <Input
+            label="Departure time"
+            type="datetime-local"
+            value={form.departuretime}
+            onChange={(event) => setForm({ ...form, departuretime: event.target.value })}
+            required
+          />
+          <Input
+            label="Estimated arrival time"
+            type="datetime-local"
+            value={form.estimatedarrivaltime}
+            onChange={(event) => setForm({ ...form, estimatedarrivaltime: event.target.value })}
+            required
+          />
+          <Input
+            label="Ticket price"
+            type="number"
+            min="0"
+            value={form.ticketprice}
+            onChange={(event) => setForm({ ...form, ticketprice: event.target.value })}
+            required
+          />
+          <Select
+            label="Status"
+            value={form.schedulestatus}
+            onChange={(event) => setForm({ ...form, schedulestatus: event.target.value })}
+          >
+            <option value="active">Active</option>
+            <option value="cancelled">Cancelled</option>
+            <option value="completed">Completed</option>
+          </Select>
+          <Button type="submit">{editingId ? "Update schedule" : "Save schedule"}</Button>
+          {editingId ? (
+            <Button
+              type="button"
+              variant="light"
+              onClick={() => {
+                setEditingId(null);
+                setForm(emptyForm);
+              }}
+            >
+              Cancel edit
+            </Button>
+          ) : null}
+        </div>
+      </form>
+
+      <section className="space-y-4">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-950">Schedules</h1>
+          <p className="mt-1 text-sm text-gray-500">Create and update bus routes and timings.</p>
+        </div>
+        <div className="overflow-x-auto rounded-2xl border border-gray-200 bg-white">
+          <table className="min-w-full text-left text-sm">
+            <thead className="bg-gray-50 text-xs uppercase tracking-wide text-gray-600">
+              <tr>
+                <th className="px-4 py-3 font-semibold">Route</th>
+                <th className="px-4 py-3 font-semibold">Bus</th>
+                <th className="px-4 py-3 font-semibold">Departure</th>
+                <th className="px-4 py-3 font-semibold">Price</th>
+                <th className="px-4 py-3 font-semibold">Status</th>
+                <th className="px-4 py-3 font-semibold">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {schedules.map((schedule) => (
+                <tr key={schedule.scheduleid}>
+                  <td className="border-b border-gray-100 px-4 py-3 align-top">
+                    <p className="font-semibold text-gray-950">{schedule.routename}</p>
+                    <p className="text-xs text-gray-500">
+                      {schedule.departurepoint} - {schedule.destination}
+                    </p>
+                  </td>
+                  <td className="border-b border-gray-100 px-4 py-3 align-top">{schedule.Bus?.platenumber || busNameById[String(schedule.busid)] || "N/A"}</td>
+                  <td className="border-b border-gray-100 px-4 py-3 align-top">{new Date(schedule.departuretime).toLocaleString()}</td>
+                  <td className="border-b border-gray-100 px-4 py-3 align-top">{frw(schedule.ticketprice)}</td>
+                  <td className="border-b border-gray-100 px-4 py-3 align-top">
+                    <span className="rounded-full border border-gray-300 px-2 py-1 text-xs capitalize">
+                      {schedule.schedulestatus}
+                    </span>
+                  </td>
+                  <td className="border-b border-gray-100 px-4 py-3 align-top">
+                    <div className="flex flex-wrap gap-2">
+                      <Button variant="light" onClick={() => editSchedule(schedule)}>Edit</Button>
+                      <Button variant="light" onClick={() => deleteSchedule(schedule.scheduleid)}>Delete</Button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+              {schedules.length === 0 ? (
+                <tr>
+                  <td colSpan="6" className="border-b border-gray-100 px-4 py-3 text-center text-gray-500">No schedules found.</td>
+                </tr>
+              ) : null}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  );
+}