ostroner 1.0.0

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

@@ -0,0 +1,78 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import toast from "react-hot-toast";
+import { useAuth } from "../context/AuthContext";
+import api from "../services/api";
+
+export function MyBookings() {
+  const [bookings, setBookings] = useState([]);
+  const { user } = useAuth();
+
+  useEffect(() => {
+    async function loadMyBookings() {
+      if (!user?.userid) return;
+
+      try {
+        const response = await api.get("/bookings");
+        const allBookings = response.data?.data || [];
+        setBookings(allBookings.filter((booking) => booking.userid === user.userid));
+      } catch (error) {
+        toast.error(error.response?.data?.message || "Failed to load bookings");
+      }
+    }
+
+    loadMyBookings();
+  }, [user]);
+
+  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">My bookings</h1>
+        <p className="mt-2 text-sm text-gray-500">Your reserved seats and trip information.</p>
+        <Link to="/" className="mt-4 inline-block text-sm font-semibold text-gray-900 underline">
+          Browse trips
+        </Link>
+      </section>
+
+      {bookings.length === 0 ? (
+        <div className="rounded-2xl border border-gray-200 bg-white p-5 text-sm text-gray-500 shadow-sm">You have no bookings yet.</div>
+      ) : (
+        <div className="grid gap-4">
+          {bookings.map((booking) => (
+            <article key={booking.bookingid} className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
+              <div className="flex flex-wrap justify-between gap-4">
+                <div>
+                  <h2 className="text-lg font-bold text-gray-950">{booking.Schedule?.routename || "Trip"}</h2>
+                  <p className="mt-1 text-sm text-gray-500">
+                    {booking.Schedule?.departurepoint || "-"} - {booking.Schedule?.destination || "-"}
+                  </p>
+                </div>
+                <span className="rounded-full border border-gray-300 px-3 py-1 text-xs font-semibold capitalize text-gray-600">
+                  {booking.paymentstatus}
+                </span>
+              </div>
+              <dl className="mt-5 grid gap-3 text-sm sm:grid-cols-3">
+                <div>
+                  <dt className="text-gray-500">Passenger</dt>
+                  <dd className="font-semibold text-gray-950">{booking.passengername}</dd>
+                </div>
+                <div>
+                  <dt className="text-gray-500">Seat</dt>
+                  <dd className="font-semibold text-gray-950">{booking.seatnumber}</dd>
+                </div>
+                <div>
+                  <dt className="text-gray-500">Departure</dt>
+                  <dd className="font-semibold text-gray-950">
+                    {booking.Schedule?.departuretime
+                      ? new Date(booking.Schedule.departuretime).toLocaleString()
+                      : "N/A"}
+                  </dd>
+                </div>
+              </dl>
+            </article>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,67 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import toast from "react-hot-toast";
+import { useAuth } from "../context/AuthContext";
+import { Button } from "../components/Button";
+import { Input, Select } from "../components/Input";
+
+export function Register() {
+  const [form, setForm] = useState({ username: "", password: "", userrole: "customer" });
+  const { register } = useAuth();
+  const navigate = useNavigate();
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+    try {
+      await register(form);
+      toast.success("Account created. Please login.");
+      navigate("/login");
+    } catch (error) {
+      toast.error(error.response?.data?.message || "Registration 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"
+      >
+        <h1 className="text-2xl font-bold text-gray-950">Create account</h1>
+        <p className="mt-1 text-sm text-gray-500">Choose a role for testing the system.</p>
+
+        <div className="mt-6 grid gap-4">
+          <Input
+            label="Username"
+            value={form.username}
+            onChange={(event) => setForm({ ...form, username: event.target.value })}
+            required
+          />
+          <Input
+            label="Password"
+            type="password"
+            value={form.password}
+            onChange={(event) => setForm({ ...form, password: event.target.value })}
+            required
+          />
+          <Select
+            label="Role"
+            value={form.userrole}
+            onChange={(event) => setForm({ ...form, userrole: event.target.value })}
+          >
+            <option value="customer">Customer</option>
+            <option value="manager">Manager</option>
+          </Select>
+          <Button type="submit" className="w-full">Create account</Button>
+        </div>
+
+        <p className="mt-6 text-center text-sm text-gray-500">
+          Already have an account?{" "}
+          <Link className="font-semibold text-gray-950 underline" to="/login">
+            Login
+          </Link>
+        </p>
+      </form>
+    </main>
+  );
+}

package/templates/y-bus/frontend/src/services/api.js

@@ -0,0 +1,8 @@
+import axios from "axios";
+
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL || "http://localhost:5000/api",
+  withCredentials: true,
+});
+
+export default api;

package/templates/y-bus/frontend/src/services/authService.js

@@ -0,0 +1,33 @@
+import api from "./api";
+
+export const registerUser = async (payload) => {
+  const response = await api.post("/users", payload);
+  return response.data;
+};
+
+export const loginUser = async (payload) => {
+  try {
+    const response = await api.post("/auth/login", payload);
+    return response.data;
+  } catch (error) {
+    if (error.response?.status === 404 || error.response?.status === 405) {
+      const usersResponse = await api.get("/users");
+      const users = usersResponse.data?.data || [];
+      const matchedUser = users.find(
+        (user) =>
+          user.username === payload.username &&
+          user.password === payload.password
+      );
+
+      if (!matchedUser) {
+        const fallbackError = new Error("Invalid credentials");
+        fallbackError.response = { data: { message: "Invalid credentials" } };
+        throw fallbackError;
+      }
+
+      return { data: matchedUser };
+    }
+
+    throw error;
+  }
+};

package/templates/y-bus/frontend/vite.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})