create-sales 1.0.0

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

@@ -0,0 +1,255 @@
+import { useState, useEffect } from 'react';
+import { getBuses, createBus, updateBus, deleteBus } from '../api/buses';
+import { Bus } from '../types';
+import Table from '../components/common/Table';
+import Modal from '../components/common/Modal';
+
+const busTypes = ['Standard', 'Express', 'Luxury', 'Mini'];
+
+const defaultForm: Omit<Bus, 'BusID'> = {
+  PlateNumber: '',
+  TotalSeats: 30,
+  BusType: 'Standard',
+};
+
+const Buses = () => {
+  const [buses, setBuses] = useState<Bus[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  const [editBus, setEditBus] = useState<Bus | null>(null);
+  const [deleteBusId, setDeleteBusId] = useState<number | null>(null);
+  const [form, setForm] = useState(defaultForm);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+  const [search, setSearch] = useState('');
+
+  const fetchBuses = async () => {
+    setLoading(true);
+    try {
+      const data = await getBuses();
+      setBuses(data);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { fetchBuses(); }, []);
+
+  const openAdd = () => {
+    setEditBus(null);
+    setForm(defaultForm);
+    setError('');
+    setModalOpen(true);
+  };
+
+  const openEdit = (bus: Bus) => {
+    setEditBus(bus);
+    setForm({ PlateNumber: bus.PlateNumber, TotalSeats: bus.TotalSeats, BusType: bus.BusType });
+    setError('');
+    setModalOpen(true);
+  };
+
+  const openDelete = (id: number) => {
+    setDeleteBusId(id);
+    setDeleteModalOpen(true);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaving(true);
+    setError('');
+    try {
+      if (editBus) {
+        await updateBus(editBus.BusID, form);
+      } else {
+        await createBus(form);
+      }
+      setModalOpen(false);
+      fetchBuses();
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'An error occurred');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deleteBusId) return;
+    try {
+      await deleteBus(deleteBusId);
+      setDeleteModalOpen(false);
+      fetchBuses();
+    } catch (err: unknown) {
+      alert(err instanceof Error ? err.message : 'Delete failed');
+    }
+  };
+
+  const filtered = buses.filter(
+    (b) =>
+      b.PlateNumber.toLowerCase().includes(search.toLowerCase()) ||
+      b.BusType.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const columns = [
+    { key: 'BusID', label: '#' },
+    { key: 'PlateNumber', label: 'Plate Number' },
+    { key: 'TotalSeats', label: 'Total Seats' },
+    { key: 'BusType', label: 'Bus Type', render: (bus: Bus) => (
+      <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+        bus.BusType === 'Luxury' ? 'bg-purple-100 text-purple-700'
+        : bus.BusType === 'Express' ? 'bg-blue-100 text-blue-700'
+        : bus.BusType === 'Mini' ? 'bg-orange-100 text-orange-700'
+        : 'bg-gray-100 text-gray-700'
+      }`}>{bus.BusType}</span>
+    )},
+    {
+      key: 'actions',
+      label: 'Actions',
+      render: (bus: Bus) => (
+        <div className="flex gap-2">
+          <button
+            onClick={() => openEdit(bus)}
+            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={() => openDelete(bus.BusID)}
+            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">
+      {/* Header */}
+      <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">Bus Fleet Management</h1>
+          <p className="text-gray-500 text-sm mt-1">Manage all buses in the Y-Bus fleet</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 flex items-center gap-2 transition-colors shadow-sm"
+        >
+          <span>+ Add New Bus</span>
+        </button>
+      </div>
+
+      {/* Search & Stats */}
+      <div className="flex flex-col sm:flex-row gap-3">
+        <input
+          type="text"
+          placeholder="Search by plate number or bus type..."
+          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-3">
+          {busTypes.map((type) => (
+            <span key={type} className="hidden sm:flex items-center gap-1 text-xs text-gray-500 bg-gray-50 px-3 py-1.5 rounded-full border">
+              {buses.filter(b => b.BusType === type).length} {type}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      <Table
+        columns={columns}
+        data={filtered}
+        keyExtractor={(bus) => bus.BusID}
+        loading={loading}
+        emptyMessage="No buses found. Add your first bus!"
+      />
+
+      {/* Add/Edit Modal */}
+      <Modal
+        isOpen={modalOpen}
+        onClose={() => setModalOpen(false)}
+        title={editBus ? 'Edit Bus' : 'Add New Bus'}
+      >
+        <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>
+            <label className="block text-sm font-medium text-gray-700 mb-1.5">Plate Number *</label>
+            <input
+              type="text"
+              required
+              value={form.PlateNumber}
+              onChange={(e) => setForm({ ...form, PlateNumber: 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. RAD 123 A"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1.5">Total Seats *</label>
+            <input
+              type="number"
+              required
+              min={1}
+              max={100}
+              value={form.TotalSeats}
+              onChange={(e) => setForm({ ...form, TotalSeats: 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"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1.5">Bus Type *</label>
+            <select
+              required
+              value={form.BusType}
+              onChange={(e) => setForm({ ...form, BusType: 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"
+            >
+              {busTypes.map((t) => <option key={t} value={t}>{t}</option>)}
+            </select>
+          </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 transition-colors"
+            >
+              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 transition-colors disabled:opacity-50"
+            >
+              {saving ? 'Saving...' : editBus ? 'Update Bus' : 'Add Bus'}
+            </button>
+          </div>
+        </form>
+      </Modal>
+
+      {/* Delete 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 bus? This action cannot be undone.</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 Buses;

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

@@ -0,0 +1,197 @@
+import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { getBuses } from '../api/buses';
+import { getSchedules } from '../api/schedules';
+import { getBookings } from '../api/bookings';
+import { getUsers } from '../api/users';
+import { useAuth } from '../context/AuthContext';
+import StatCard from '../components/common/StatCard';
+import { Bus, Schedule, Booking } from '../types';
+
+const Dashboard = () => {
+  const { user } = useAuth();
+  const [buses, setBuses] = useState<Bus[]>([]);
+  const [schedules, setSchedules] = useState<Schedule[]>([]);
+  const [bookings, setBookings] = useState<Booking[]>([]);
+  const [userCount, setUserCount] = useState(0);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [b, s, bk] = await Promise.all([getBuses(), getSchedules(), getBookings()]);
+        setBuses(b);
+        setSchedules(s);
+        setBookings(bk);
+        if (user?.UserRole === 'admin') {
+          const users = await getUsers();
+          setUserCount(users.length);
+        }
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, [user]);
+
+  const paidBookings = bookings.filter((b) => b.PaymentStatus === 'Paid');
+  const revenue = paidBookings.reduce((acc, b) => acc + (b.TicketPrice || 0), 0);
+  const activeSchedules = schedules.filter((s) => s.ScheduleStatus === 'Active');
+  const recentBookings = [...bookings]
+    .sort((a, b) => new Date(b.BookingDate).getTime() - new Date(a.BookingDate).getTime())
+    .slice(0, 5);
+
+  const quickActions = [
+    { to: '/buses', label: 'Manage Buses', icon: '🚌', color: 'bg-blue-500' },
+    { to: '/schedules', label: 'View Schedules', icon: '📅', color: 'bg-green-500' },
+    { to: '/bookings', label: 'New Booking', icon: '🎫', color: 'bg-yellow-500' },
+    { to: '/report', label: 'View Report', icon: '📊', color: 'bg-purple-500' },
+  ];
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <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">Loading dashboard...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="bg-gradient-to-r from-gray-900 to-gray-800 rounded-2xl p-6 text-white shadow-lg">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+          <div>
+            <h1 className="text-2xl font-bold">Welcome back, {user?.UserName}! 👋</h1>
+            <p className="text-gray-400 mt-1 text-sm">Here's what's happening with Y-Bus today.</p>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="bg-yellow-400/10 text-yellow-400 border border-yellow-400/30 px-3 py-1.5 rounded-full text-xs font-medium capitalize">
+              {user?.UserRole}
+            </span>
+            <span className="text-gray-400 text-xs">
+              {new Date().toLocaleDateString('en-RW', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard title="Total Buses" value={buses.length} icon="🚌" color="bg-blue-50 text-blue-600" subtitle="Fleet registered" />
+        <StatCard title="Active Schedules" value={activeSchedules.length} icon="📅" color="bg-green-50 text-green-600" subtitle={`${schedules.length} total`} />
+        <StatCard title="Total Bookings" value={bookings.length} icon="🎫" color="bg-yellow-50 text-yellow-600" subtitle={`${paidBookings.length} paid`} />
+        {user?.UserRole === 'admin'
+          ? <StatCard title="System Users" value={userCount} icon="👤" color="bg-purple-50 text-purple-600" subtitle="Registered agents" />
+          : <StatCard title="Revenue (RWF)" value={revenue.toLocaleString()} icon="💰" color="bg-emerald-50 text-emerald-600" subtitle="From paid bookings" />
+        }
+      </div>
+
+      {/* Quick Actions */}
+      <div>
+        <h2 className="text-lg font-semibold text-gray-800 mb-3">Quick Actions</h2>
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+          {quickActions.map(({ to, label, icon, color }) => (
+            <Link
+              key={to}
+              to={to}
+              className="bg-white border border-gray-100 rounded-xl p-4 flex flex-col items-center gap-3 hover:shadow-md hover:border-yellow-200 transition-all group"
+            >
+              <div className={`w-12 h-12 ${color} rounded-xl flex items-center justify-center text-2xl group-hover:scale-110 transition-transform`}>
+                {icon}
+              </div>
+              <span className="text-sm font-medium text-gray-700 text-center">{label}</span>
+            </Link>
+          ))}
+        </div>
+      </div>
+
+      {/* Recent Bookings */}
+      <div className="bg-white rounded-xl border border-gray-100 shadow-sm">
+        <div className="flex items-center justify-between p-5 border-b border-gray-100">
+          <h2 className="text-lg font-semibold text-gray-800">Recent Bookings</h2>
+          <Link to="/bookings" className="text-yellow-600 hover:text-yellow-700 text-sm font-medium">
+            View all →
+          </Link>
+        </div>
+        <div className="divide-y divide-gray-50">
+          {recentBookings.length === 0 ? (
+            <p className="text-center text-gray-400 text-sm py-8">No bookings found</p>
+          ) : (
+            recentBookings.map((booking) => (
+              <div key={booking.BookingID} className="px-5 py-4 flex items-center justify-between gap-4">
+                <div className="flex items-center gap-3">
+                  <div className="w-9 h-9 bg-gray-100 rounded-full flex items-center justify-center text-sm font-bold text-gray-600">
+                    {booking.PassengerName?.charAt(0) || 'P'}
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-gray-800">{booking.PassengerName}</p>
+                    <p className="text-xs text-gray-400">{booking.RouteName || 'N/A'} • Seat {booking.SeatNumber}</p>
+                  </div>
+                </div>
+                <div className="text-right">
+                  <span className={`text-xs px-2 py-1 rounded-full font-medium ${
+                    booking.PaymentStatus === 'Paid'
+                      ? 'bg-green-100 text-green-700'
+                      : booking.PaymentStatus === 'Cancelled'
+                      ? 'bg-red-100 text-red-700'
+                      : 'bg-yellow-100 text-yellow-700'
+                  }`}>
+                    {booking.PaymentStatus}
+                  </span>
+                  <p className="text-xs text-gray-400 mt-1">
+                    {new Date(booking.BookingDate).toLocaleDateString()}
+                  </p>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Schedule Overview */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
+          <h2 className="text-lg font-semibold text-gray-800 mb-4">Schedule Status</h2>
+          <div className="space-y-3">
+            {[
+              { label: 'Active', value: schedules.filter(s => s.ScheduleStatus === 'Active').length, color: 'bg-green-500' },
+              { label: 'Inactive', value: schedules.filter(s => s.ScheduleStatus === 'Inactive').length, color: 'bg-gray-400' },
+              { label: 'Cancelled', value: schedules.filter(s => s.ScheduleStatus === 'Cancelled').length, color: 'bg-red-500' },
+            ].map(({ label, value, color }) => (
+              <div key={label} className="flex items-center gap-3">
+                <div className={`w-3 h-3 ${color} rounded-full`} />
+                <span className="text-sm text-gray-600 flex-1">{label}</span>
+                <span className="font-semibold text-gray-800">{value}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
+          <h2 className="text-lg font-semibold text-gray-800 mb-4">Booking Status</h2>
+          <div className="space-y-3">
+            {[
+              { label: 'Paid', value: bookings.filter(b => b.PaymentStatus === 'Paid').length, color: 'bg-green-500' },
+              { label: 'Pending', value: bookings.filter(b => b.PaymentStatus === 'Pending').length, color: 'bg-yellow-500' },
+              { label: 'Cancelled', value: bookings.filter(b => b.PaymentStatus === 'Cancelled').length, color: 'bg-red-500' },
+            ].map(({ label, value, color }) => (
+              <div key={label} className="flex items-center gap-3">
+                <div className={`w-3 h-3 ${color} rounded-full`} />
+                <span className="text-sm text-gray-600 flex-1">{label}</span>
+                <span className="font-semibold text-gray-800">{value}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

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

@@ -0,0 +1,112 @@
+import { useState, FormEvent } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const Login = () => {
+  const { login } = useAuth();
+  const navigate = useNavigate();
+  const [form, setForm] = useState({ UserName: '', Password: '' });
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    try {
+      await login(form.UserName, form.Password);
+      navigate('/dashboard');
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Invalid credentials. Please try again.';
+      setError(message || 'Invalid credentials. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center px-4">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute -top-20 -left-20 w-96 h-96 bg-yellow-400/5 rounded-full blur-3xl" />
+        <div className="absolute -bottom-20 -right-20 w-96 h-96 bg-yellow-400/5 rounded-full blur-3xl" />
+      </div>
+
+      <div className="relative w-full max-w-md">
+        {/* Logo Section */}
+        <div className="text-center mb-8">
+          <div className="w-20 h-20 bg-yellow-400 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg shadow-yellow-400/30">
+            <span className="text-gray-900 font-black text-4xl">Y</span>
+          </div>
+          <h1 className="text-3xl font-bold text-white">Y-Bus System</h1>
+          <p className="text-gray-400 mt-1 text-sm">Kigali City Transport & Reservation</p>
+        </div>
+
+        {/* Card */}
+        <div className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-8 shadow-2xl">
+          <h2 className="text-xl font-semibold text-white mb-2">Welcome Back</h2>
+          <p className="text-gray-400 text-sm mb-6">Sign in to your account to continue</p>
+
+          {error && (
+            <div className="mb-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg flex items-center gap-2">
+              <span className="text-red-400 text-sm">⚠️ {error}</span>
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-1.5">Username</label>
+              <input
+                type="text"
+                required
+                value={form.UserName}
+                onChange={(e) => setForm({ ...form, UserName: e.target.value })}
+                className="w-full bg-white/10 border border-white/20 text-white placeholder-gray-500 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent transition-all"
+                placeholder="Enter your username"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-1.5">Password</label>
+              <input
+                type="password"
+                required
+                value={form.Password}
+                onChange={(e) => setForm({ ...form, Password: e.target.value })}
+                className="w-full bg-white/10 border border-white/20 text-white placeholder-gray-500 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent transition-all"
+                placeholder="Enter your password"
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full bg-yellow-400 hover:bg-yellow-300 disabled:bg-yellow-400/50 text-gray-900 font-semibold py-3 rounded-lg text-sm transition-all flex items-center justify-center gap-2 shadow-lg shadow-yellow-400/20"
+            >
+              {loading ? (
+                <>
+                  <div className="w-4 h-4 border-2 border-gray-900 border-t-transparent rounded-full animate-spin" />
+                  Signing in...
+                </>
+              ) : (
+                'Sign In'
+              )}
+            </button>
+          </form>
+
+          <div className="mt-6 pt-6 border-t border-white/10">
+            <p className="text-center text-xs text-gray-500">
+              Default: <span className="text-yellow-400">admin</span> / <span className="text-yellow-400">admin123</span>
+            </p>
+          </div>
+        </div>
+
+        <p className="text-center text-gray-600 text-xs mt-4">
+          © 2026 Y Company — Nyarugenge District, Kigali City
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Login;