create-sales 1.0.0

package/frontend-project/src/components/common/Navbar.tsx

@@ -0,0 +1,124 @@
+import { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { useAuth } from '../../context/AuthContext';
+
+const Navbar = () => {
+  const { user, logout } = useAuth();
+  const location = useLocation();
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const isActive = (path: string) =>
+    location.pathname === path
+      ? 'bg-yellow-400 text-gray-900 font-semibold'
+      : 'text-gray-100 hover:bg-yellow-400 hover:text-gray-900';
+
+  const handleLogout = async () => {
+    await logout();
+  };
+
+  return (
+    <nav className="bg-gray-900 shadow-lg sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo */}
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-yellow-400 rounded-full flex items-center justify-center">
+              <span className="text-gray-900 font-bold text-lg">Y</span>
+            </div>
+            <div>
+              <p className="text-yellow-400 font-bold text-lg leading-none">Y-Bus</p>
+              <p className="text-gray-400 text-xs">Reservation System</p>
+            </div>
+          </div>
+
+          {/* Desktop Nav */}
+          <div className="hidden md:flex items-center gap-1">
+            <Link to="/dashboard" className={`px-4 py-2 rounded-md text-sm transition-colors ${isActive('/dashboard')}`}>
+              Dashboard
+            </Link>
+            <Link to="/buses" className={`px-4 py-2 rounded-md text-sm transition-colors ${isActive('/buses')}`}>
+              Buses
+            </Link>
+            <Link to="/schedules" className={`px-4 py-2 rounded-md text-sm transition-colors ${isActive('/schedules')}`}>
+              Schedules
+            </Link>
+            <Link to="/bookings" className={`px-4 py-2 rounded-md text-sm transition-colors ${isActive('/bookings')}`}>
+              Bookings
+            </Link>
+            <Link to="/report" className={`px-4 py-2 rounded-md text-sm transition-colors ${isActive('/report')}`}>
+              Report
+            </Link>
+            {user?.UserRole === 'admin' && (
+              <Link to="/users" className={`px-4 py-2 rounded-md text-sm transition-colors ${isActive('/users')}`}>
+                Users
+              </Link>
+            )}
+          </div>
+
+          {/* User Info */}
+          <div className="hidden md:flex items-center gap-3">
+            <div className="text-right">
+              <p className="text-gray-100 text-sm font-medium">{user?.UserName}</p>
+              <p className="text-yellow-400 text-xs capitalize">{user?.UserRole}</p>
+            </div>
+            <button
+              onClick={handleLogout}
+              className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm transition-colors"
+            >
+              Logout
+            </button>
+          </div>
+
+          {/* Mobile menu button */}
+          <button
+            className="md:hidden text-gray-100"
+            onClick={() => setMenuOpen(!menuOpen)}
+          >
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              {menuOpen
+                ? <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                : <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />}
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile menu */}
+      {menuOpen && (
+        <div className="md:hidden bg-gray-800 px-4 pb-4 space-y-1">
+          {[
+            { to: '/dashboard', label: 'Dashboard' },
+            { to: '/buses', label: 'Buses' },
+            { to: '/schedules', label: 'Schedules' },
+            { to: '/bookings', label: 'Bookings' },
+            { to: '/report', label: 'Report' },
+            ...(user?.UserRole === 'admin' ? [{ to: '/users', label: 'Users' }] : []),
+          ].map(({ to, label }) => (
+            <Link
+              key={to}
+              to={to}
+              className={`block px-4 py-2 rounded-md text-sm transition-colors ${isActive(to)}`}
+              onClick={() => setMenuOpen(false)}
+            >
+              {label}
+            </Link>
+          ))}
+          <div className="pt-2 border-t border-gray-700 flex items-center justify-between">
+            <div>
+              <p className="text-gray-100 text-sm">{user?.UserName}</p>
+              <p className="text-yellow-400 text-xs capitalize">{user?.UserRole}</p>
+            </div>
+            <button
+              onClick={handleLogout}
+              className="bg-red-600 hover:bg-red-700 text-white px-3 py-1.5 rounded-md text-sm"
+            >
+              Logout
+            </button>
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+};
+
+export default Navbar;

package/frontend-project/src/components/common/ProtectedRoute.tsx

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../../context/AuthContext';
+
+interface ProtectedRouteProps {
+  children: ReactNode;
+  adminOnly?: boolean;
+}
+
+const ProtectedRoute = ({ children, adminOnly = false }: ProtectedRouteProps) => {
+  const { user, loading } = useAuth();
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="text-center">
+          <div className="w-12 h-12 border-4 border-yellow-400 border-t-transparent rounded-full animate-spin mx-auto" />
+          <p className="text-gray-500 mt-3 text-sm">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!user) return <Navigate to="/login" replace />;
+  if (adminOnly && user.UserRole !== 'admin') return <Navigate to="/dashboard" replace />;
+
+  return <>{children}</>;
+};
+
+export default ProtectedRoute;

package/frontend-project/src/components/common/StatCard.tsx

@@ -0,0 +1,24 @@
+interface StatCardProps {
+  title: string;
+  value: string | number;
+  icon: string;
+  color: string;
+  subtitle?: string;
+}
+
+const StatCard = ({ title, value, icon, color, subtitle }: StatCardProps) => {
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex items-center gap-4 hover:shadow-md transition-shadow">
+      <div className={`w-14 h-14 rounded-xl flex items-center justify-center text-2xl ${color}`}>
+        {icon}
+      </div>
+      <div>
+        <p className="text-gray-500 text-sm font-medium">{title}</p>
+        <p className="text-3xl font-bold text-gray-800">{value}</p>
+        {subtitle && <p className="text-xs text-gray-400 mt-1">{subtitle}</p>}
+      </div>
+    </div>
+  );
+};
+
+export default StatCard;

package/frontend-project/src/components/common/Table.tsx

@@ -0,0 +1,67 @@
+import { ReactNode } from 'react';
+
+interface Column<T> {
+  key: string;
+  label: string;
+  render?: (item: T) => ReactNode;
+}
+
+interface TableProps<T> {
+  columns: Column<T>[];
+  data: T[];
+  keyExtractor: (item: T) => string | number;
+  loading?: boolean;
+  emptyMessage?: string;
+}
+
+function Table<T>({ columns, data, keyExtractor, loading, emptyMessage = 'No data found' }: TableProps<T>) {
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="w-10 h-10 border-4 border-yellow-400 border-t-transparent rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-x-auto rounded-xl border border-gray-200 shadow-sm">
+      <table className="min-w-full divide-y divide-gray-200">
+        <thead className="bg-gray-900">
+          <tr>
+            {columns.map((col) => (
+              <th
+                key={col.key}
+                className="px-4 py-3 text-left text-xs font-semibold text-yellow-400 uppercase tracking-wider"
+              >
+                {col.label}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="bg-white divide-y divide-gray-100">
+          {data.length === 0 ? (
+            <tr>
+              <td colSpan={columns.length} className="px-4 py-8 text-center text-gray-400 text-sm">
+                {emptyMessage}
+              </td>
+            </tr>
+          ) : (
+            data.map((item) => (
+              <tr key={keyExtractor(item)} className="hover:bg-yellow-50 transition-colors">
+                {columns.map((col) => (
+                  <td key={col.key} className="px-4 py-3 text-sm text-gray-700 whitespace-nowrap">
+                    {col.render
+                      ? col.render(item)
+                      : String((item as Record<string, unknown>)[col.key] ?? '')}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default Table;

package/frontend-project/src/context/AuthContext.tsx

@@ -0,0 +1,41 @@
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { User, AuthContextType } from '../types';
+import { login as apiLogin, logout as apiLogout, getSession } from '../api/auth';
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider = ({ children }: { children: ReactNode }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const checkSession = async () => {
+      const sessionUser = await getSession();
+      setUser(sessionUser);
+      setLoading(false);
+    };
+    checkSession();
+  }, []);
+
+  const login = async (username: string, password: string) => {
+    const loggedUser = await apiLogin(username, password);
+    setUser(loggedUser);
+  };
+
+  const logout = async () => {
+    await apiLogout();
+    setUser(null);
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, login, logout, loading }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = (): AuthContextType => {
+  const context = useContext(AuthContext);
+  if (!context) throw new Error('useAuth must be used within AuthProvider');
+  return context;
+};

package/frontend-project/src/index.css

@@ -0,0 +1,43 @@
+@import "tailwindcss";
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: #f1f5f9;
+}
+::-webkit-scrollbar-thumb {
+  background: #94a3b8;
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #64748b;
+}
+
+/* Print styles */
+@media print {
+  nav, .print\:hidden {
+    display: none !important;
+  }
+  body {
+    background: white;
+  }
+  .print\:block {
+    display: block !important;
+  }
+}
+
+/* Smooth transitions */
+* {
+  transition-property: color, background-color, border-color, box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+/* Focus ring */
+*:focus-visible {
+  outline: 2px solid #facc15;
+  outline-offset: 2px;
+}

package/frontend-project/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/frontend-project/src/pages/Bookings.tsx

@@ -0,0 +1,295 @@
+import { useState, useEffect } from 'react';
+import { getBookings, createBooking, updateBooking, deleteBooking } from '../api/bookings';
+import { getSchedules } from '../api/schedules';
+import { Booking, Schedule } from '../types';
+import Table from '../components/common/Table';
+import Modal from '../components/common/Modal';
+import { useAuth } from '../context/AuthContext';
+
+const defaultForm = {
+  ScheduleID: 0,
+  UserID: 0,
+  PassengerName: '',
+  PassengerGender: 'Male' as 'Male' | 'Female' | 'Other',
+  PassengerPhone: '',
+  SeatNumber: '',
+  PaymentStatus: 'Pending' as 'Pending' | 'Paid' | 'Cancelled',
+  BookingDate: new Date().toISOString().split('T')[0],
+};
+
+const Bookings = () => {
+  const { user } = useAuth();
+  const [bookings, setBookings] = useState<Booking[]>([]);
+  const [schedules, setSchedules] = useState<Schedule[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  const [viewModalOpen, setViewModalOpen] = useState(false);
+  const [editBooking, setEditBooking] = useState<Booking | null>(null);
+  const [viewBooking, setViewBooking] = useState<Booking | null>(null);
+  const [deleteId, setDeleteId] = useState<number | null>(null);
+  const [form, setForm] = useState(defaultForm);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+  const [search, setSearch] = useState('');
+  const [paymentFilter, setPaymentFilter] = useState('All');
+
+  const fetchData = async () => {
+    setLoading(true);
+    try {
+      const [b, s] = await Promise.all([getBookings(), getSchedules()]);
+      setBookings(b);
+      setSchedules(s.filter((sc) => sc.ScheduleStatus === 'Active'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { fetchData(); }, []);
+
+  const openAdd = () => {
+    setEditBooking(null);
+    setForm({ ...defaultForm, ScheduleID: schedules[0]?.ScheduleID || 0, UserID: user?.UserID || 0 });
+    setError('');
+    setModalOpen(true);
+  };
+
+  const openEdit = (b: Booking) => {
+    setEditBooking(b);
+    setForm({
+      ScheduleID: b.ScheduleID,
+      UserID: b.UserID,
+      PassengerName: b.PassengerName,
+      PassengerGender: b.PassengerGender,
+      PassengerPhone: b.PassengerPhone,
+      SeatNumber: b.SeatNumber,
+      PaymentStatus: b.PaymentStatus,
+      BookingDate: b.BookingDate?.split('T')[0] || new Date().toISOString().split('T')[0],
+    });
+    setError('');
+    setModalOpen(true);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaving(true);
+    setError('');
+    try {
+      if (editBooking) {
+        await updateBooking(editBooking.BookingID, form);
+      } else {
+        await createBooking({ ...form, UserID: user?.UserID || 0 });
+      }
+      setModalOpen(false);
+      fetchData();
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'An error occurred');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deleteId) return;
+    try {
+      await deleteBooking(deleteId);
+      setDeleteModalOpen(false);
+      fetchData();
+    } catch (err: unknown) {
+      alert(err instanceof Error ? err.message : 'Delete failed');
+    }
+  };
+
+  const filtered = bookings.filter((b) => {
+    const matchSearch =
+      b.PassengerName.toLowerCase().includes(search.toLowerCase()) ||
+      (b.RouteName || '').toLowerCase().includes(search.toLowerCase()) ||
+      b.SeatNumber.toLowerCase().includes(search.toLowerCase()) ||
+      b.PassengerPhone.includes(search);
+    const matchPayment = paymentFilter === 'All' || b.PaymentStatus === paymentFilter;
+    return matchSearch && matchPayment;
+  });
+
+  const columns = [
+    { key: 'BookingID', label: '#' },
+    { key: 'PassengerName', label: 'Passenger' },
+    { key: 'PassengerGender', label: 'Gender' },
+    { key: 'PassengerPhone', label: 'Phone' },
+    { key: 'RouteName', label: 'Route' },
+    { key: 'SeatNumber', label: 'Seat' },
+    { key: 'PaymentStatus', label: 'Payment', render: (b: Booking) => (
+      <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+        b.PaymentStatus === 'Paid' ? 'bg-green-100 text-green-700'
+        : b.PaymentStatus === 'Cancelled' ? 'bg-red-100 text-red-700'
+        : 'bg-yellow-100 text-yellow-700'
+      }`}>{b.PaymentStatus}</span>
+    )},
+    { key: 'BookingDate', label: 'Date', render: (b: Booking) =>
+      b.BookingDate ? new Date(b.BookingDate).toLocaleDateString('en-RW') : 'N/A'
+    },
+    {
+      key: 'actions', label: 'Actions',
+      render: (b: Booking) => (
+        <div className="flex gap-2">
+          <button onClick={() => { setViewBooking(b); setViewModalOpen(true); }} className="bg-gray-50 hover:bg-gray-100 text-gray-700 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors">View</button>
+          <button onClick={() => openEdit(b)} className="bg-blue-50 hover:bg-blue-100 text-blue-700 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors">Edit</button>
+          <button onClick={() => { setDeleteId(b.BookingID); setDeleteModalOpen(true); }} className="bg-red-50 hover:bg-red-100 text-red-700 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors">Delete</button>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div className="space-y-5">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-800">Passenger Bookings</h1>
+          <p className="text-gray-500 text-sm mt-1">Register and manage passenger reservations</p>
+        </div>
+        <button onClick={openAdd} className="bg-gray-900 hover:bg-gray-700 text-yellow-400 px-5 py-2.5 rounded-xl text-sm font-semibold transition-colors shadow-sm">
+          + New Booking
+        </button>
+      </div>
+
+      <div className="flex flex-col sm:flex-row gap-3">
+        <input
+          type="text"
+          placeholder="Search by passenger, route, seat, or phone..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="flex-1 border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-400"
+        />
+        <div className="flex gap-2">
+          {['All', 'Pending', 'Paid', 'Cancelled'].map((s) => (
+            <button
+              key={s}
+              onClick={() => setPaymentFilter(s)}
+              className={`px-3 py-2 rounded-lg text-xs font-medium transition-colors ${
+                paymentFilter === s ? 'bg-gray-900 text-yellow-400' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+              }`}
+            >
+              {s}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <Table columns={columns} data={filtered} keyExtractor={(b) => b.BookingID} loading={loading} emptyMessage="No bookings found." />
+
+      {/* View Modal */}
+      <Modal isOpen={viewModalOpen} onClose={() => setViewModalOpen(false)} title="Booking Details" size="md">
+        {viewBooking && (
+          <div className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              {[
+                { label: 'Booking ID', value: `#${viewBooking.BookingID}` },
+                { label: 'Booking Date', value: viewBooking.BookingDate ? new Date(viewBooking.BookingDate).toLocaleDateString() : 'N/A' },
+                { label: 'Passenger Name', value: viewBooking.PassengerName },
+                { label: 'Gender', value: viewBooking.PassengerGender },
+                { label: 'Phone', value: viewBooking.PassengerPhone },
+                { label: 'Seat Number', value: viewBooking.SeatNumber },
+                { label: 'Route', value: viewBooking.RouteName || 'N/A' },
+                { label: 'Departure', value: viewBooking.DeparturePoint || 'N/A' },
+                { label: 'Destination', value: viewBooking.Destination || 'N/A' },
+                { label: 'Bus Plate', value: viewBooking.PlateNumber || 'N/A' },
+                { label: 'Ticket Price', value: viewBooking.TicketPrice ? `${Number(viewBooking.TicketPrice).toLocaleString()} RWF` : 'N/A' },
+                { label: 'Booked By', value: viewBooking.UserName || 'N/A' },
+              ].map(({ label, value }) => (
+                <div key={label}>
+                  <p className="text-xs text-gray-400 font-medium">{label}</p>
+                  <p className="text-sm text-gray-800 font-semibold mt-0.5">{value}</p>
+                </div>
+              ))}
+            </div>
+            <div>
+              <p className="text-xs text-gray-400 font-medium">Payment Status</p>
+              <span className={`mt-1 inline-block px-3 py-1 rounded-full text-sm font-medium ${
+                viewBooking.PaymentStatus === 'Paid' ? 'bg-green-100 text-green-700'
+                : viewBooking.PaymentStatus === 'Cancelled' ? 'bg-red-100 text-red-700'
+                : 'bg-yellow-100 text-yellow-700'
+              }`}>{viewBooking.PaymentStatus}</span>
+            </div>
+          </div>
+        )}
+      </Modal>
+
+      {/* Add/Edit Modal */}
+      <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} title={editBooking ? 'Edit Booking' : 'New Passenger Booking'} size="lg">
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {error && <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">{error}</div>}
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div className="sm:col-span-2">
+              <label className="block text-sm font-medium text-gray-700 mb-1.5">Schedule (Route) *</label>
+              <select required value={form.ScheduleID} onChange={(e) => setForm({ ...form, ScheduleID: parseInt(e.target.value) })}
+                className="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-400">
+                <option value={0}>Select Schedule</option>
+                {schedules.map((s) => (
+                  <option key={s.ScheduleID} value={s.ScheduleID}>
+                    {s.RouteName} — {s.DeparturePoint} → {s.Destination} ({s.PlateNumber})
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1.5">Passenger Name *</label>
+              <input required type="text" value={form.PassengerName} onChange={(e) => setForm({ ...form, PassengerName: e.target.value })}
+                className="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                placeholder="Full name" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1.5">Gender *</label>
+              <select value={form.PassengerGender} onChange={(e) => setForm({ ...form, PassengerGender: e.target.value as 'Male' | 'Female' | 'Other' })}
+                className="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-400">
+                <option value="Male">Male</option>
+                <option value="Female">Female</option>
+                <option value="Other">Other</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1.5">Phone Number *</label>
+              <input required type="tel" value={form.PassengerPhone} onChange={(e) => setForm({ ...form, PassengerPhone: e.target.value })}
+                className="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                placeholder="+250..." />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1.5">Seat Number *</label>
+              <input required type="text" value={form.SeatNumber} onChange={(e) => setForm({ ...form, SeatNumber: e.target.value.toUpperCase() })}
+                className="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                placeholder="e.g. A1, B3" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1.5">Payment Status *</label>
+              <select value={form.PaymentStatus} onChange={(e) => setForm({ ...form, PaymentStatus: e.target.value as 'Pending' | 'Paid' | 'Cancelled' })}
+                className="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-400">
+                <option value="Pending">Pending</option>
+                <option value="Paid">Paid</option>
+                <option value="Cancelled">Cancelled</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1.5">Booking Date *</label>
+              <input required type="date" value={form.BookingDate} onChange={(e) => setForm({ ...form, BookingDate: e.target.value })}
+                className="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-400" />
+            </div>
+          </div>
+          <div className="flex gap-3 pt-2">
+            <button type="button" onClick={() => setModalOpen(false)} className="flex-1 border border-gray-200 text-gray-700 py-2.5 rounded-lg text-sm hover:bg-gray-50">Cancel</button>
+            <button type="submit" disabled={saving} className="flex-1 bg-gray-900 text-yellow-400 py-2.5 rounded-lg text-sm font-semibold hover:bg-gray-700 disabled:opacity-50">
+              {saving ? 'Saving...' : editBooking ? 'Update Booking' : 'Create Booking'}
+            </button>
+          </div>
+        </form>
+      </Modal>
+
+      <Modal isOpen={deleteModalOpen} onClose={() => setDeleteModalOpen(false)} title="Confirm Delete" size="sm">
+        <p className="text-gray-600 text-sm mb-4">Are you sure you want to delete this booking?</p>
+        <div className="flex gap-3">
+          <button onClick={() => setDeleteModalOpen(false)} className="flex-1 border border-gray-200 text-gray-700 py-2.5 rounded-lg text-sm hover:bg-gray-50">Cancel</button>
+          <button onClick={handleDelete} className="flex-1 bg-red-600 text-white py-2.5 rounded-lg text-sm font-semibold hover:bg-red-700">Delete</button>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default Bookings;