create-bus-project 1.0.0

package/template/frontend/src/pages/Login.jsx

@@ -0,0 +1,141 @@
+import React from "react";
+import  { useState } from "react";
+import { API_BASE_URL } from "../api.js";
+
+export default function Login({ setUser }) {
+  const [isRegister, setIsRegister] = useState(false);
+
+  const [form, setForm] = useState({
+    username: "",
+    password: "",
+    userRole: "passenger"
+  });
+
+  const handleChange = (e) => {
+    setForm({
+      ...form,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  const handleRole = (role) => {
+    setForm({
+      ...form,
+      userRole: role
+    });
+  };
+
+  const resetForm = () => {
+    setForm({
+      username: "",
+      password: "",
+      userRole: "passenger"
+    });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    const endpoint = isRegister ? "register" : "login";
+
+    const res = await fetch(`${API_BASE_URL}/api/auth/${endpoint}`, {
+      method: "POST",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(form)
+    });
+
+    const data = await res.json();
+
+    if (!res.ok) {
+      alert(data.message || "Something went wrong`);
+      return;
+    }
+
+    if (isRegister) {
+      alert(data.message);
+      setIsRegister(false);
+      resetForm();
+      return;
+    }
+
+    setUser(data.user);
+  };
+
+  return (
+    <section className="login-page">
+      <div className="login-card">
+        <h1>Y Bus Booking</h1>
+
+        <p className="muted">
+          {isRegister ? "Create your account" : "Login to continue"}
+        </p>
+
+        <div className="role-switch">
+          <button
+            type="button"
+            className={form.userRole === "passenger" ? "active-role" : ""}
+            onClick={() => handleRole("passenger")}
+          >
+            Passenger
+          </button>
+
+          <button
+            type="button"
+            className={form.userRole === "manager" ? "active-role" : ""}
+            onClick={() => handleRole("manager")}
+          >
+            Manager
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <label>Username</label>
+          <input
+            name="username"
+            placeholder="Enter username"
+            value={form.username}
+            onChange={handleChange}
+          />
+
+          <label>Password</label>
+          <input
+            name="password"
+            type="password"
+            placeholder="Enter password"
+            value={form.password}
+            onChange={handleChange}
+          />
+
+          <button className="full-btn" type="submit">
+            {isRegister
+              ? `Register as ${form.userRole}`
+              : `Login as ${form.userRole}`}
+          </button>
+        </form>
+
+        <div className="switch-auth">
+          {isRegister ? (
+            <p>
+              Already have an account?
+              <button type="button" onClick={() => setIsRegister(false)}>
+                Login
+              </button>
+            </p>
+          ) : (
+            <p>
+              No account?
+              <button type="button" onClick={() => setIsRegister(true)}>
+                Register
+              </button>
+            </p>
+          )}
+        </div>
+
+        
+      </div>
+    </section>
+  );
+}

package/template/frontend/src/pages/ManagerDashboard.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { useState } from "react";
+import Users from "./Users.jsx";
+import Buses from "./Buses.jsx";
+import Schedules from "./Schedules.jsx";
+import Bookings from "./Bookings.jsx";
+import Report from "./Report.jsx";
+
+export default function ManagerDashboard({ user, logout }) {
+  const [page, setPage] = useState("users");
+
+  return (
+    <div>
+      <header className="topbar">
+        <div>
+          <h2>Manager Dashboard</h2>
+          <p>Welcome, {user.username}</p>
+        </div>
+
+        <nav>
+          <button onClick={() => setPage("users")}>Users</button>
+          <button onClick={() => setPage("buses")}>Buses</button>
+          <button onClick={() => setPage("schedules")}>Schedules</button>
+          <button onClick={() => setPage("bookings")}>Bookings</button>
+          <button onClick={() => setPage("report")}>Report</button>
+          <button onClick={logout}>Logout</button>
+        </nav>
+      </header>
+
+      <main className="container">
+        {page === "users" && <Users />}
+        {page === "buses" && <Buses />}
+        {page === "schedules" && <Schedules />}
+        {page === "bookings" && <Bookings />}
+        {page === "report" && <Report />}
+      </main>
+    </div>
+  );
+}

package/template/frontend/src/pages/PassengerDashboard.jsx

@@ -0,0 +1,248 @@
+import React from "react";
+import { useEffect, useState } from "react";
+import { API_BASE_URL } from "../api.js";
+
+export default function PassengerDashboard({ user, logout }) {
+  const [schedules, setSchedules] = useState([]);
+  const [myTickets, setMyTickets] = useState([]);
+  const [selectedSchedule, setSelectedSchedule] = useState(null);
+  const [bookedSeats, setBookedSeats] = useState([]);
+
+  const [form, setForm] = useState({
+    passengername: user.username,
+    passengergender: "Female",
+    passengerphone: "",
+    seatnumber: "",
+    paymentstatus: "pending"
+  });
+
+  const fetchSchedules = async () => {
+    const res = await fetch(`${API_BASE_URL}/api/schedules`);
+    const data = await res.json();
+    setSchedules(data.filter((item) => item.scheduleStatus === "active"));
+  };
+
+  const fetchMyTickets = async () => {
+    const res = await fetch(`${API_BASE_URL}/api/bookings/my/${user.userid}`);
+    const data = await res.json();
+    setMyTickets(data);
+  };
+
+  const fetchBookedSeats = async (scheduleid) => {
+    const res = await fetch(`${API_BASE_URL}/api/bookings/seats/${scheduleid}`);
+    const data = await res.json();
+    setBookedSeats(data);
+  };
+
+  useEffect(() => {
+    fetchSchedules();
+    fetchMyTickets();
+  }, []);
+
+  const chooseSchedule = (schedule) => {
+    setSelectedSchedule(schedule);
+    setForm({
+      ...form,
+      seatnumber: ""
+    });
+    fetchBookedSeats(schedule.scheduleid);
+  };
+
+  const handleChange = (e) => {
+    setForm({
+      ...form,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  const bookTicket = async (e) => {
+    e.preventDefault();
+
+    if (!selectedSchedule) {
+      alert("Please choose a schedule first`);
+      return;
+    }
+
+    const res = await fetch(`${API_BASE_URL}/api/bookings`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        scheduleid: selectedSchedule.scheduleid,
+        userid: user.userid,
+        ...form
+      })
+    });
+
+    const data = await res.json();
+
+    if (!res.ok) {
+      alert(data.message || data.sqlMessage || "Booking failed`);
+      return;
+    }
+
+    alert("Ticket booked successfully`);
+
+    setForm({
+      passengername: user.username,
+      passengergender: "Female",
+      passengerphone: "",
+      seatnumber: "",
+      paymentstatus: "pending"
+    });
+
+    fetchMyTickets();
+    fetchBookedSeats(selectedSchedule.scheduleid);
+  };
+
+  const totalSeats = Number(selectedSchedule?.totalseats || 0);
+  const seats = Array.from({ length: totalSeats }, (_, i) => String(i + 1));
+
+  return (
+    <div>
+      <header className="topbar">
+        <div>
+          <h2>Passenger Dashboard</h2>
+          <p>Welcome, {user.username}</p>
+        </div>
+
+        <nav>
+          <button onClick={logout}>Logout</button>
+        </nav>
+      </header>
+
+      <main className="container">
+        <section className="card">
+          <h1>Available Schedules</h1>
+
+          <table>
+            <thead>
+              <tr>
+                <th>Route</th>
+                <th>From</th>
+                <th>To</th>
+                <th>Bus</th>
+                <th>Seats</th>
+                <th>Price</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              {schedules.map((schedule) => (
+                <tr key={schedule.scheduleid}>
+                  <td>{schedule.routename}</td>
+                  <td>{schedule.departurepoint}</td>
+                  <td>{schedule.destination}</td>
+                  <td>{schedule.platenumber}</td>
+                  <td>{schedule.totalseats}</td>
+                  <td>{schedule.ticketprice}</td>
+                  <td>
+                    <button onClick={() => chooseSchedule(schedule)}>
+                      Book
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </section>
+
+        {selectedSchedule && (
+          <section className="card">
+            <h2>Book Ticket: {selectedSchedule.routename}</h2>
+            <p className="muted">
+              Choose one available seat. Red seats are already booked.
+            </p>
+
+            <div className="seat-grid">
+              {seats.map((seat) => {
+                const booked = bookedSeats.includes(seat);
+                const selected = form.seatnumber === seat;
+
+                return (
+                  <button
+                    type="button"
+                    key={seat}
+                    disabled={booked}
+                    className={booked ? "seat booked" : selected ? "seat selected" : "seat"}
+                    onClick={() => setForm({ ...form, seatnumber: seat })}
+                  >
+                    {seat}
+                  </button>
+                );
+              })}
+            </div>
+
+            <form className="form-grid mt" onSubmit={bookTicket}>
+              <input
+                name="passengername"
+                placeholder="Passenger Name"
+                value={form.passengername}
+                onChange={handleChange}
+              />
+
+              <select
+                name="passengergender"
+                value={form.passengergender}
+                onChange={handleChange}
+              >
+                <option value="Female">Female</option>
+                <option value="Male">Male</option>
+              </select>
+
+              <input
+                name="passengerphone"
+                placeholder="Phone Number"
+                value={form.passengerphone}
+                onChange={handleChange}
+              />
+
+              <input
+                name="seatnumber"
+                placeholder="Selected Seat"
+                value={form.seatnumber}
+                readOnly
+              />
+
+              <button type="submit">Confirm Booking</button>
+            </form>
+          </section>
+        )}
+
+        <section className="card">
+          <h1>My Tickets</h1>
+
+          <table>
+            <thead>
+              <tr>
+                <th>Route</th>
+                <th>From</th>
+                <th>To</th>
+                <th>Passenger</th>
+                <th>Seat</th>
+                <th>Payment</th>
+                <th>Date</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              {myTickets.map((ticket) => (
+                <tr key={ticket.bookingid}>
+                  <td>{ticket.routename}</td>
+                  <td>{ticket.departurepoint}</td>
+                  <td>{ticket.destination}</td>
+                  <td>{ticket.passengername}</td>
+                  <td>{ticket.seatnumber}</td>
+                  <td>{ticket.paymentstatus}</td>
+                  <td>{ticket.bookingdate}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </section>
+      </main>
+    </div>
+  );
+}

package/template/frontend/src/pages/Report.jsx

@@ -0,0 +1,158 @@
+import React from "react";
+import { useEffect, useState } from "react";
+
+import jsPDF from "jspdf";
+import autoTable from "jspdf-autotable";
+import { API_BASE_URL } from "../api.js";
+
+export default function Report() {
+
+  const [report, setReport] = useState([]);
+  const [filter, setFilter] = useState("");
+
+  const fetchReport = async () => {
+
+    const res = await fetch(
+      `${API_BASE_URL}/api/bookings/report`
+    );
+
+    const data = await res.json();
+
+    setReport(data);
+  };
+
+  useEffect(() => {
+    fetchReport();
+  }, []);
+
+  const filteredReport = report.filter((item) =>
+    item.routename
+      .toLowerCase()
+      .includes(filter.toLowerCase())
+  );
+
+  const exportPDF = () => {
+
+    const doc = new jsPDF();
+
+    doc.setFontSize(18);
+
+    doc.text(
+      "Booked Passengers Report",
+      14,
+      20
+    );
+
+    const tableColumn = [
+      "Schedule ID",
+      "Route",
+      "From",
+      "To",
+      "Passenger",
+      "Gender",
+      "Phone",
+      "Seat",
+      "Payment"
+    ];
+
+    const tableRows = [];
+
+    filteredReport.forEach((item) => {
+
+      const rowData = [
+
+        item.scheduleid,
+        item.routename,
+        item.departurepoint,
+        item.destination,
+        item.passengername,
+        item.passengergender,
+        item.passengerphone,
+        item.seatnumber,
+        item.paymentstatus
+
+      ];
+
+      tableRows.push(rowData);
+    });
+
+    autoTable(doc, {
+
+      head: [tableColumn],
+
+      body: tableRows,
+
+      startY: 30
+
+    });
+
+    doc.save("Booked_Passengers_Report.pdf");
+  };
+
+  return (
+    <div>
+
+      <div className="card">
+
+        <h1>
+          Booked Passengers Report
+        </h1>
+
+        <input
+          placeholder="Filter by route name"
+          value={filter}
+          onChange={(e) =>
+            setFilter(e.target.value)
+          }
+        />
+
+        <br /><br />
+
+        <button onClick={exportPDF}>
+          Export as PDF
+        </button>
+
+      </div>
+
+      <table>
+
+        <thead>
+
+          <tr>
+           
+            <th>Route</th>
+            <th>From</th>
+            <th>To</th>
+            <th>Passenger</th>
+            <th>Gender</th>
+            <th>Phone</th>
+            <th>Seat</th>
+            <th>Payment</th>
+          </tr>
+
+        </thead>
+
+        <tbody>
+
+          {filteredReport.map((item, index) => (
+
+            <tr key={index}>
+              <td>{item.routename}</td>
+              <td>{item.departurepoint}</td>
+              <td>{item.destination}</td>
+              <td>{item.passengername}</td>
+              <td>{item.passengergender}</td>
+              <td>{item.passengerphone}</td>
+              <td>{item.seatnumber}</td>
+              <td>{item.paymentstatus}</td>
+            </tr>
+
+          ))}
+
+        </tbody>
+
+      </table>
+
+    </div>
+  );
+}