create-bus-project 1.0.0

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

@@ -0,0 +1,142 @@
+import React from "react";
+import { useEffect, useState } from "react";
+import { API_BASE_URL } from "../api.js";
+
+export default function Schedules() {
+  const [schedules, setSchedules] = useState([]);
+  const [buses, setBuses] = useState([]);
+
+  const [form, setForm] = useState({
+    busid: "",
+    routename: "",
+    departurepoint: "",
+    destination: "",
+    departuretime: "",
+    estimatedarrivaltime: "",
+    ticketprice: "",
+    scheduleStatus: "active"
+  });
+
+  const handleChange = (e) => {
+    setForm({
+      ...form,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  const fetchSchedules = async () => {
+    const res = await fetch(`${API_BASE_URL}/api/schedules`);
+    const data = await res.json();
+    setSchedules(data);
+  };
+
+  const fetchBuses = async () => {
+    const res = await fetch(`${API_BASE_URL}/api/buses`);
+    const data = await res.json();
+    setBuses(data);
+  };
+
+  useEffect(() => {
+    fetchSchedules();
+    fetchBuses();
+  }, []);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    await fetch(`${API_BASE_URL}/api/schedules`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(form)
+    });
+
+    setForm({
+      busid: "",
+      routename: "",
+      departurepoint: "",
+      destination: "",
+      departuretime: "",
+      estimatedarrivaltime: "",
+      ticketprice: "",
+      scheduleStatus: "active"
+    });
+
+    fetchSchedules();
+  };
+
+  const handleDelete = async (id) => {
+    await fetch(`${API_BASE_URL}/api/schedules/${id}`, {
+      method: "DELETE"
+    });
+
+    fetchSchedules();
+  };
+
+  return (
+    <div>
+      <div className="card">
+        <h1>Schedules</h1>
+
+        <form className="form-grid" onSubmit={handleSubmit}>
+          <select name="busid" value={form.busid} onChange={handleChange}>
+            <option value="">Select Bus</option>
+            {buses.map((bus) => (
+              <option key={bus.busid} value={bus.busid}>
+                {bus.platenumber} - {bus.bustype}
+              </option>
+            ))}
+          </select>
+
+          <input name="routename" placeholder="Route Name" value={form.routename} onChange={handleChange} />
+          <input name="departurepoint" placeholder="Departure Point" value={form.departurepoint} onChange={handleChange} />
+          <input name="destination" placeholder="Destination" value={form.destination} onChange={handleChange} />
+          <input name="departuretime" type="datetime-local" value={form.departuretime} onChange={handleChange} />
+          <input name="estimatedarrivaltime" type="datetime-local" value={form.estimatedarrivaltime} onChange={handleChange} />
+          <input name="ticketprice" placeholder="Ticket Price" value={form.ticketprice} onChange={handleChange} />
+
+          <select name="scheduleStatus" value={form.scheduleStatus} onChange={handleChange}>
+            <option value="active">Active</option>
+            <option value="cancelled">Cancelled</option>
+            <option value="completed">Completed</option>
+          </select>
+
+          <button type="submit">Add Schedule</button>
+        </form>
+      </div>
+
+      <table>
+        <thead>
+          <tr>
+            <th>Bus</th>
+            <th>Route</th>
+            <th>From</th>
+            <th>To</th>
+            <th>Price</th>
+            <th>Status</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {schedules.map((schedule) => (
+            <tr key={schedule.scheduleid}>
+              <td>{schedule.platenumber}</td>
+              <td>{schedule.routename}</td>
+              <td>{schedule.departurepoint}</td>
+              <td>{schedule.destination}</td>
+              <td>{schedule.ticketprice}</td>
+              <td>{schedule.scheduleStatus}</td>
+              <td>
+                <button className="delete" onClick={() => handleDelete(schedule.scheduleid)}>
+                  Delete
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

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

@@ -0,0 +1,105 @@
+import React from "react";
+import { useEffect, useState } from "react";
+import { API_BASE_URL } from "../api.js";
+
+export default function Users() {
+  const [users, setUsers] = useState([]);
+
+  const [form, setForm] = useState({
+    username: "",
+    password: "",
+    userRole: "passenger"
+  });
+
+  const handleChange = (e) => {
+    setForm({
+      ...form,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  const fetchUsers = async () => {
+    const res = await fetch(`${API_BASE_URL}/api/users`);
+    const data = await res.json();
+    setUsers(data);
+  };
+
+  useEffect(() => {
+    fetchUsers();
+  }, []);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    await fetch(`${API_BASE_URL}/api/users`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(form)
+    });
+
+    setForm({
+      username: "",
+      password: "",
+      userRole: "passenger"
+    });
+
+    fetchUsers();
+  };
+
+  const handleDelete = async (id) => {
+    await fetch(`${API_BASE_URL}/api/users/${id}`, {
+      method: "DELETE"
+    });
+
+    fetchUsers();
+  };
+
+  return (
+    <div>
+      <div className="card">
+        <h1>Users</h1>
+
+        <form className="form-grid" onSubmit={handleSubmit}>
+          <input name="username" placeholder="Username" value={form.username} onChange={handleChange} />
+          <input name="password" placeholder="Password" value={form.password} onChange={handleChange} />
+
+          <select name="userRole" value={form.userRole} onChange={handleChange}>
+            <option value="passenger">Passenger</option>
+            <option value="manager">Manager</option>
+            <option value="driver">Driver</option>
+          </select>
+
+          <button type="submit">Add User</button>
+        </form>
+      </div>
+
+      <table>
+        <thead>
+          <tr>
+            
+            <th>Username</th>
+            <th>Role</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {users.map((user) => (
+            <tr key={user.userid}>
+              
+              <td>{user.username}</td>
+              <td><span className="badge">{user.userRole}</span></td>
+              <td>
+                <button className="delete" onClick={() => handleDelete(user.userid)}>
+                  Delete
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/template/frontend/src/style.css

@@ -0,0 +1,236 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial, sans-serif;
+  background: white;
+  color: black;
+}
+
+.login-page,
+.center-page {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  background: #064e3b;
+  padding: 20px;
+}
+
+.login-card {
+  width: 100%;
+  max-width: 430px;
+  background: white;
+  color: black;
+  padding: 32px;
+  border-radius: 24px;
+  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
+}
+
+.login-card h1 {
+  margin: 0 0 8px;
+}
+
+.login-card label {
+  display: block;
+  margin-top: 16px;
+  margin-bottom: 6px;
+  font-weight: bold;
+}
+
+.role-switch {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  background: #ecfdf5;
+  padding: 8px;
+  border-radius: 14px;
+  margin: 22px 0;
+}
+
+.role-switch button {
+  background: transparent;
+  color: #064e3b;
+}
+
+.role-switch .active-role {
+  background: #064e3b;
+  color: white;
+}
+
+.full-btn {
+  width: 100%;
+  margin-top: 20px;
+}
+
+.hint,
+.muted {
+  color: #6b7280;
+}
+
+.hint {
+  margin-top: 18px;
+  line-height: 1.7;
+  font-size: 14px;
+}
+
+.topbar {
+  background: #064e3b;
+  color: white;
+  padding: 18px 35px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.topbar h2,
+.topbar p {
+  margin: 0;
+}
+
+nav {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+button {
+  border: none;
+  background: #064e3b;
+  color: white;
+  padding: 10px 14px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+nav button {
+  background: white;
+  color: black;
+}
+
+button:hover {
+  opacity: 0.85;
+}
+
+.container {
+  padding: 30px;
+}
+
+.card {
+  background: white;
+  color: black;
+  padding: 24px;
+  border-radius: 16px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
+  margin-bottom: 24px;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+}
+
+.mt {
+  margin-top: 20px;
+}
+
+input, select {
+  padding: 12px;
+  border: 1px solid #ddd;
+  border-radius: 9px;
+  width: 100%;
+  color: black;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  background: white;
+  color: black;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+th {
+  background: #064e3b;
+  color: white;
+}
+
+th, td {
+  padding: 12px;
+  border-bottom: 1px solid #eee;
+  text-align: left;
+}
+
+.delete {
+  background: #065f46;
+}
+
+.badge {
+  padding: 5px 10px;
+  border-radius: 20px;
+  background: #d1fae5;
+  color: #064e3b;
+}
+
+.seat-grid {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  gap: 10px;
+  margin-top: 18px;
+}
+
+.seat {
+  background: #ecfdf5;
+  color: #064e3b;
+}
+
+.seat.selected {
+  background: #064e3b;
+  color: white;
+}
+
+.seat.booked {
+  background: #065f46;
+  color: white;
+}
+
+@media (max-width: 850px) {
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .topbar {
+    display: block;
+  }
+
+  .seat-grid {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+.switch-auth {
+  margin-top: 18px;
+  text-align: center;
+}
+
+.switch-auth p {
+  margin: 0;
+  color: #4b5563;
+}
+
+.switch-auth button {
+  margin-left: 8px;
+  background: transparent;
+  color: #064e3b;
+  font-weight: bold;
+  padding: 4px 8px;
+}

package/template/frontend/vite.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: __FRONTEND_PORT__,
+    host: true
+  }
+});