create-vrrsystem-app 1.0.0

package/templates/VehicleRentalReservationSystem/frontend-project/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "vrs-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.6.5",
+    "framer-motion": "^11.0.3",
+    "jspdf": "^2.5.1",
+    "jspdf-autotable": "^3.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.49.3",
+    "react-icons": "^5.0.1",
+    "react-router-dom": "^6.21.3",
+    "react-toastify": "^10.0.4",
+    "recharts": "^2.10.4",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
+    "vite": "^5.0.12"
+  }
+}

package/templates/VehicleRentalReservationSystem/frontend-project/postcss.config.js

@@ -0,0 +1 @@
+export default { plugins: { tailwindcss: {}, autoprefixer: {} } };

package/templates/VehicleRentalReservationSystem/frontend-project/src/App.jsx

@@ -0,0 +1,33 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import Login from './pages/Login';
+import Register from './pages/Register';
+import Dashboard from './pages/Dashboard';
+import Customers from './pages/Customers';
+import Vehicles from './pages/Vehicles';
+import Reservations from './pages/Reservations';
+import Rentals from './pages/Rentals';
+import Reports from './pages/Reports';
+import Users from './pages/Users';
+import Settings from './pages/Settings';
+import AppLayout from './layouts/AppLayout';
+import ProtectedRoute from './components/ProtectedRoute';
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/login" element={<Login />} />
+      <Route path="/register" element={<Register />} />
+      <Route element={<ProtectedRoute><AppLayout /></ProtectedRoute>}>
+        <Route path="/dashboard" element={<Dashboard />} />
+        <Route path="/customers" element={<Customers />} />
+        <Route path="/vehicles" element={<Vehicles />} />
+        <Route path="/reservations" element={<Reservations />} />
+        <Route path="/rentals" element={<Rentals />} />
+        <Route path="/reports" element={<Reports />} />
+        <Route path="/users" element={<ProtectedRoute roles={['ADMIN']}><Users /></ProtectedRoute>} />
+        <Route path="/settings" element={<Settings />} />
+      </Route>
+      <Route path="*" element={<Navigate to="/dashboard" replace />} />
+    </Routes>
+  );
+}

package/templates/VehicleRentalReservationSystem/frontend-project/src/components/ConfirmDelete.jsx

@@ -0,0 +1,12 @@
+import Modal from './Modal';
+export default function ConfirmDelete({ open, onClose, onConfirm, label }) {
+  return (
+    <Modal open={open} onClose={onClose} title="Confirm Delete">
+      <p className="mb-4">Are you sure you want to delete <b>{label}</b>?</p>
+      <div className="flex justify-end gap-2">
+        <button className="btn-ghost" onClick={onClose}>Cancel</button>
+        <button className="btn-danger" onClick={onConfirm}>Delete</button>
+      </div>
+    </Modal>
+  );
+}

package/templates/VehicleRentalReservationSystem/frontend-project/src/components/Modal.jsx

@@ -0,0 +1,22 @@
+import { FiX } from 'react-icons/fi';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export default function Modal({ open, onClose, title, children, width='max-w-lg' }) {
+  return (
+    <AnimatePresence>
+      {open && (
+        <motion.div initial={{opacity:0}} animate={{opacity:1}} exit={{opacity:0}}
+          className="fixed inset-0 z-50 bg-black/50 grid place-items-center p-4" onClick={onClose}>
+          <motion.div initial={{scale:0.95, y:10}} animate={{scale:1, y:0}} exit={{scale:0.95}}
+            className={`bg-white dark:bg-slate-800 rounded-2xl shadow-2xl w-full ${width}`} onClick={e=>e.stopPropagation()}>
+            <div className="flex items-center justify-between border-b border-slate-200 dark:border-slate-700 p-4">
+              <h3 className="font-semibold">{title}</h3>
+              <button onClick={onClose} className="btn-ghost"><FiX/></button>
+            </div>
+            <div className="p-5">{children}</div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

package/templates/VehicleRentalReservationSystem/frontend-project/src/components/ProtectedRoute.jsx

@@ -0,0 +1,9 @@
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+export default function ProtectedRoute({ children, roles }) {
+  const { user } = useAuth();
+  if (!user) return <Navigate to="/login" replace />;
+  if (roles && !roles.includes(user.role)) return <Navigate to="/dashboard" replace />;
+  return children;
+}

package/templates/VehicleRentalReservationSystem/frontend-project/src/components/Sidebar.jsx

@@ -0,0 +1,42 @@
+import { NavLink } from 'react-router-dom';
+import { FiHome, FiUsers, FiTruck, FiCalendar, FiKey, FiBarChart2, FiUser, FiSettings, FiLogOut } from 'react-icons/fi';
+import { useAuth } from '../context/AuthContext';
+
+const items = [
+  { to: '/dashboard', label: 'Dashboard', icon: FiHome },
+  { to: '/customers', label: 'Customers', icon: FiUsers },
+  { to: '/vehicles', label: 'Vehicles', icon: FiTruck },
+  { to: '/reservations', label: 'Reservations', icon: FiCalendar },
+  { to: '/rentals', label: 'Rentals', icon: FiKey },
+  { to: '/reports', label: 'Reports', icon: FiBarChart2 },
+  { to: '/users', label: 'Users', icon: FiUser, roles: ['ADMIN'] },
+  { to: '/settings', label: 'Settings', icon: FiSettings }
+];
+
+export default function Sidebar({ open }) {
+  const { user, logout } = useAuth();
+  return (
+    <aside className={`${open ? 'translate-x-0' : '-translate-x-full'} lg:translate-x-0 fixed lg:static z-30 top-0 left-0 h-full w-64 transition-transform`}>
+      <div className="h-full glass m-0 lg:m-3 lg:rounded-2xl p-5 flex flex-col">
+        <div className="flex items-center gap-3 mb-8 px-2">
+          <div className="w-10 h-10 rounded-xl bg-accent text-white grid place-items-center font-bold">SW</div>
+          <div>
+            <div className="font-bold text-primary dark:text-white">SwiftWheels</div>
+            <div className="text-xs text-slate-500">VRS · Huye</div>
+          </div>
+        </div>
+        <nav className="flex-1 space-y-1">
+          {items.filter(i => !i.roles || i.roles.includes(user?.role)).map(it => (
+            <NavLink key={it.to} to={it.to}
+              className={({isActive}) => `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition ${isActive ? 'bg-accent text-white shadow' : 'text-slate-600 dark:text-slate-300 hover:bg-slate-200/50 dark:hover:bg-slate-700/50'}`}>
+              <it.icon /> {it.label}
+            </NavLink>
+          ))}
+        </nav>
+        <button onClick={logout} className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20">
+          <FiLogOut /> Logout
+        </button>
+      </div>
+    </aside>
+  );
+}

package/templates/VehicleRentalReservationSystem/frontend-project/src/components/Topbar.jsx

@@ -0,0 +1,24 @@
+import { FiMenu, FiMoon, FiSun, FiBell } from 'react-icons/fi';
+import { useTheme } from '../context/ThemeContext';
+import { useAuth } from '../context/AuthContext';
+
+export default function Topbar({ onMenu }) {
+  const { theme, toggle } = useTheme();
+  const { user } = useAuth();
+  return (
+    <header className="glass m-3 mb-0 rounded-2xl px-5 py-3 flex items-center justify-between">
+      <div className="flex items-center gap-3">
+        <button className="lg:hidden btn-ghost" onClick={onMenu}><FiMenu /></button>
+        <div>
+          <div className="text-xs text-slate-500">Welcome back,</div>
+          <div className="font-semibold">{user?.fullName || user?.username}</div>
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <button className="btn-ghost" title="Notifications"><FiBell /></button>
+        <button className="btn-ghost" onClick={toggle} title="Toggle theme">{theme === 'dark' ? <FiSun/> : <FiMoon/>}</button>
+        <div className="w-9 h-9 rounded-full bg-gradient-to-br from-accent to-primary text-white grid place-items-center font-bold">{(user?.username||'U')[0].toUpperCase()}</div>
+      </div>
+    </header>
+  );
+}

package/templates/VehicleRentalReservationSystem/frontend-project/src/context/AuthContext.jsx

@@ -0,0 +1,30 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import api from '../services/api';
+
+const AuthContext = createContext();
+export const useAuth = () => useContext(AuthContext);
+
+export function AuthProvider({ children }) {
+  const [user, setUser] = useState(() => {
+    try { return JSON.parse(localStorage.getItem('user')); } catch { return null; }
+  });
+  const [loading, setLoading] = useState(false);
+
+  const login = async (username, password) => {
+    const { data } = await api.post('/auth/login', { username, password });
+    localStorage.setItem('accessToken', data.accessToken);
+    localStorage.setItem('refreshToken', data.refreshToken);
+    localStorage.setItem('user', JSON.stringify(data.user));
+    setUser(data.user);
+    return data.user;
+  };
+  const logout = () => {
+    localStorage.removeItem('accessToken');
+    localStorage.removeItem('refreshToken');
+    localStorage.removeItem('user');
+    setUser(null);
+  };
+  const has = (...roles) => user && roles.includes(user.role);
+
+  return <AuthContext.Provider value={{ user, login, logout, loading, has }}>{children}</AuthContext.Provider>;
+}

package/templates/VehicleRentalReservationSystem/frontend-project/src/context/ThemeContext.jsx

@@ -0,0 +1,13 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+const ThemeContext = createContext();
+export const useTheme = () => useContext(ThemeContext);
+
+export function ThemeProvider({ children }) {
+  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', theme === 'dark');
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+  const toggle = () => setTheme(t => t === 'dark' ? 'light' : 'dark');
+  return <ThemeContext.Provider value={{ theme, toggle }}>{children}</ThemeContext.Provider>;
+}

package/templates/VehicleRentalReservationSystem/frontend-project/src/index.css

@@ -0,0 +1,37 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html, body, #root { height: 100%; }
+body {
+  @apply font-sans bg-bglight text-slate-800 transition-colors;
+}
+.dark body { @apply bg-bgdark text-slate-100; }
+
+.glass {
+  @apply bg-white/70 backdrop-blur-xl border border-white/40 shadow-lg;
+}
+.dark .glass { @apply bg-slate-800/60 border-slate-700/50; }
+
+.card { @apply glass rounded-2xl p-5; }
+.input {
+  @apply w-full px-4 py-2.5 rounded-lg border border-slate-300 bg-white/80 text-sm
+         focus:outline-none focus:ring-2 focus:ring-accent transition;
+}
+.dark .input { @apply bg-slate-800 border-slate-700 text-slate-100; }
+.btn { @apply inline-flex items-center gap-2 px-4 py-2 rounded-lg font-medium text-sm transition; }
+.btn-primary { @apply btn bg-accent text-white hover:bg-blue-700 shadow; }
+.btn-ghost { @apply btn text-slate-600 hover:bg-slate-200/60; }
+.dark .btn-ghost { @apply text-slate-300 hover:bg-slate-700/60; }
+.btn-danger { @apply btn bg-red-600 text-white hover:bg-red-700; }
+.btn-success { @apply btn bg-emerald-600 text-white hover:bg-emerald-700; }
+
+table { @apply w-full text-sm; }
+thead th { @apply text-left font-semibold py-3 px-3 text-slate-500 uppercase tracking-wider text-xs border-b border-slate-200; }
+.dark thead th { @apply text-slate-400 border-slate-700; }
+tbody td { @apply py-3 px-3 border-b border-slate-100; }
+.dark tbody td { @apply border-slate-700/50; }
+tbody tr:hover { @apply bg-slate-50; }
+.dark tbody tr:hover { @apply bg-slate-700/30; }
+
+.badge { @apply inline-block px-2.5 py-1 rounded-full text-xs font-semibold; }

package/templates/VehicleRentalReservationSystem/frontend-project/src/layouts/AppLayout.jsx

@@ -0,0 +1,18 @@
+import { useState } from 'react';
+import { Outlet } from 'react-router-dom';
+import Sidebar from '../components/Sidebar';
+import Topbar from '../components/Topbar';
+
+export default function AppLayout() {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="min-h-screen flex">
+      <Sidebar open={open} />
+      {open && <div onClick={() => setOpen(false)} className="fixed inset-0 bg-black/40 z-20 lg:hidden" />}
+      <div className="flex-1 flex flex-col min-w-0">
+        <Topbar onMenu={() => setOpen(true)} />
+        <main className="flex-1 p-3 overflow-auto"><div className="glass rounded-2xl p-5 min-h-full"><Outlet /></div></main>
+      </div>
+    </div>
+  );
+}

package/templates/VehicleRentalReservationSystem/frontend-project/src/main.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import App from './App';
+import { AuthProvider } from './context/AuthContext';
+import { ThemeProvider } from './context/ThemeContext';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <ThemeProvider>
+    <AuthProvider>
+      <BrowserRouter>
+        <App />
+        <ToastContainer position="top-right" autoClose={2500} theme="colored" />
+      </BrowserRouter>
+    </AuthProvider>
+  </ThemeProvider>
+);

package/templates/VehicleRentalReservationSystem/frontend-project/src/pages/Customers.jsx

@@ -0,0 +1,95 @@
+import { useEffect, useState } from 'react';
+import api from '../services/api';
+import { toast } from 'react-toastify';
+import { FiPlus, FiEdit2, FiTrash2, FiSearch } from 'react-icons/fi';
+import Modal from '../components/Modal';
+import ConfirmDelete from '../components/ConfirmDelete';
+import { useAuth } from '../context/AuthContext';
+
+const empty = { fullName:'', nationalId:'', phone:'', email:'', address:'' };
+
+export default function Customers() {
+  const { has } = useAuth();
+  const [data, setData] = useState({ items: [], total: 0, pages: 1 });
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [modal, setModal] = useState(false);
+  const [form, setForm] = useState(empty);
+  const [editing, setEditing] = useState(null);
+  const [del, setDel] = useState(null);
+
+  const load = async () => {
+    const { data } = await api.get('/customers', { params: { search, page, limit: 10 } });
+    setData(data);
+  };
+  useEffect(() => { load(); }, [search, page]);
+
+  const open = (c) => { setEditing(c); setForm(c || empty); setModal(true); };
+  const save = async (e) => {
+    e.preventDefault();
+    try {
+      if (editing) await api.put(`/customers/${editing._id}`, form);
+      else await api.post('/customers', form);
+      toast.success('Saved'); setModal(false); load();
+    } catch (err) { toast.error(err.response?.data?.message || 'Error'); }
+  };
+  const remove = async () => {
+    try { await api.delete(`/customers/${del._id}`); toast.success('Deleted'); setDel(null); load(); }
+    catch (err) { toast.error('Cannot delete'); }
+  };
+
+  return (
+    <div>
+      <div className="flex flex-wrap items-center justify-between gap-3 mb-4">
+        <h1 className="text-2xl font-bold">Customers</h1>
+        <div className="flex gap-2">
+          <div className="relative"><FiSearch className="absolute left-3 top-3 text-slate-400"/>
+            <input className="input pl-10 w-64" placeholder="Search..." value={search} onChange={e=>{setPage(1);setSearch(e.target.value);}}/>
+          </div>
+          {has('ADMIN','STAFF') && <button className="btn-primary" onClick={()=>open(null)}><FiPlus/> Add Customer</button>}
+        </div>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table>
+          <thead><tr><th>Full Name</th><th>National ID</th><th>Phone</th><th>Email</th><th>Address</th><th className="text-right">Actions</th></tr></thead>
+          <tbody>{data.items.map(c => (
+            <tr key={c._id}>
+              <td className="font-medium">{c.fullName}</td>
+              <td>{c.nationalId}</td><td>{c.phone}</td><td>{c.email}</td><td>{c.address}</td>
+              <td className="text-right">
+                {has('ADMIN','STAFF') && <button className="btn-ghost" onClick={()=>open(c)}><FiEdit2/></button>}
+                {has('ADMIN') && <button className="btn-ghost text-red-600" onClick={()=>setDel(c)}><FiTrash2/></button>}
+              </td>
+            </tr>
+          ))}{!data.items.length && <tr><td colSpan="6" className="text-center text-slate-400 py-8">No customers</td></tr>}</tbody>
+        </table>
+      </div>
+
+      <div className="flex justify-between items-center mt-4 text-sm">
+        <div>Total: {data.total}</div>
+        <div className="flex gap-2">
+          <button disabled={page<=1} onClick={()=>setPage(p=>p-1)} className="btn-ghost disabled:opacity-30">Prev</button>
+          <div className="px-3 py-1.5">{page} / {data.pages}</div>
+          <button disabled={page>=data.pages} onClick={()=>setPage(p=>p+1)} className="btn-ghost disabled:opacity-30">Next</button>
+        </div>
+      </div>
+
+      <Modal open={modal} onClose={()=>setModal(false)} title={editing ? 'Edit Customer' : 'New Customer'}>
+        <form onSubmit={save} className="grid grid-cols-2 gap-3">
+          {[['fullName','Full Name'],['nationalId','National ID'],['phone','Phone'],['email','Email'],['address','Address']].map(([k,l]) => (
+            <div key={k} className={k==='address' ? 'col-span-2' : ''}>
+              <label className="text-sm">{l}</label>
+              <input className="input" value={form[k]} onChange={e=>setForm({...form,[k]:e.target.value})} required/>
+            </div>
+          ))}
+          <div className="col-span-2 flex justify-end gap-2 mt-2">
+            <button type="button" className="btn-ghost" onClick={()=>setModal(false)}>Cancel</button>
+            <button className="btn-primary">Save</button>
+          </div>
+        </form>
+      </Modal>
+      <ConfirmDelete open={!!del} onClose={()=>setDel(null)} onConfirm={remove} label={del?.fullName}/>
+    </div>
+  );
+}

package/templates/VehicleRentalReservationSystem/frontend-project/src/pages/Dashboard.jsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react';
+import api from '../services/api';
+import { FiTruck, FiUsers, FiCalendar, FiDollarSign } from 'react-icons/fi';
+import { LineChart, Line, BarChart, Bar, PieChart, Pie, Cell, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid, Legend } from 'recharts';
+import { money, date, badge } from '../utils/format';
+
+const COLORS = ['#2563EB','#1E293B','#10B981','#F59E0B','#EF4444','#8B5CF6','#06B6D4','#EC4899'];
+
+function Stat({ icon: Icon, label, value, color }) {
+  return (
+    <div className="card flex items-center gap-4">
+      <div className={`w-12 h-12 rounded-xl grid place-items-center ${color} text-white`}><Icon size={22}/></div>
+      <div><div className="text-xs text-slate-500 uppercase">{label}</div><div className="text-2xl font-bold">{value}</div></div>
+    </div>
+  );
+}
+
+export default function Dashboard() {
+  const [s, setS] = useState(null);
+  useEffect(() => { api.get('/dashboard').then(r => setS(r.data)); }, []);
+  if (!s) return <div className="text-center text-slate-500">Loading dashboard...</div>;
+
+  return (
+    <div className="space-y-5">
+      <h1 className="text-2xl font-bold">Dashboard</h1>
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        <Stat icon={FiTruck} label="Total Vehicles" value={s.totalVehicles} color="bg-accent"/>
+        <Stat icon={FiTruck} label="Available" value={s.available} color="bg-emerald-600"/>
+        <Stat icon={FiCalendar} label="Reserved" value={s.reserved} color="bg-amber-500"/>
+        <Stat icon={FiTruck} label="Rented" value={s.rented} color="bg-blue-600"/>
+        <Stat icon={FiUsers} label="Customers" value={s.customers} color="bg-primary"/>
+        <Stat icon={FiCalendar} label="Reservations" value={s.reservations} color="bg-secondary"/>
+        <Stat icon={FiDollarSign} label="Total Revenue" value={money(s.totalRevenue)} color="bg-emerald-700"/>
+        <Stat icon={FiDollarSign} label="Monthly Revenue" value={money(s.monthlyRevenue)} color="bg-blue-700"/>
+      </div>
+
+      <div className="grid lg:grid-cols-3 gap-4">
+        <div className="card lg:col-span-2">
+          <h3 className="font-semibold mb-3">Revenue — Last 6 Months</h3>
+          <ResponsiveContainer width="100%" height={280}>
+            <LineChart data={s.monthlyChart}>
+              <CartesianGrid strokeDasharray="3 3" opacity={0.3}/>
+              <XAxis dataKey="month"/><YAxis/><Tooltip/><Legend/>
+              <Line type="monotone" dataKey="revenue" stroke="#2563EB" strokeWidth={3}/>
+              <Line type="monotone" dataKey="count" stroke="#1E293B" strokeWidth={2}/>
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+        <div className="card">
+          <h3 className="font-semibold mb-3">Vehicle Types</h3>
+          <ResponsiveContainer width="100%" height={280}>
+            <PieChart>
+              <Pie data={s.vehicleTypes} dataKey="count" nameKey="type" outerRadius={90} label>
+                {s.vehicleTypes.map((_, i) => <Cell key={i} fill={COLORS[i % COLORS.length]}/>)}
+              </Pie>
+              <Tooltip/>
+            </PieChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+
+      <div className="grid lg:grid-cols-2 gap-4">
+        <div className="card">
+          <h3 className="font-semibold mb-3">Recent Reservations</h3>
+          <table><thead><tr><th>Customer</th><th>Vehicle</th><th>Status</th></tr></thead>
+            <tbody>{s.recentReservations.map(r => (
+              <tr key={r._id}><td>{r.customerId?.fullName}</td><td>{r.vehicleId?.plateNumber}</td>
+                <td><span className={`badge ${badge(r.reservationStatus)}`}>{r.reservationStatus}</span></td></tr>
+            ))}</tbody>
+          </table>
+        </div>
+        <div className="card">
+          <h3 className="font-semibold mb-3">Recent Rentals</h3>
+          <table><thead><tr><th>Customer</th><th>Vehicle</th><th>Date</th><th>Fee</th></tr></thead>
+            <tbody>{s.recentRentals.map(r => (
+              <tr key={r._id}><td>{r.customerId?.fullName}</td><td>{r.vehicleId?.plateNumber}</td>
+                <td>{date(r.rentalDate)}</td><td>{money(r.rentalFee)}</td></tr>
+            ))}</tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/VehicleRentalReservationSystem/frontend-project/src/pages/Login.jsx

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import { toast } from 'react-toastify';
+import { motion } from 'framer-motion';
+import { FiLock, FiUser } from 'react-icons/fi';
+
+export default function Login() {
+  const { login } = useAuth();
+  const nav = useNavigate();
+  const [form, setForm] = useState({ username: '', password: '' });
+  const [loading, setLoading] = useState(false);
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      await login(form.username, form.password);
+      toast.success('Welcome back!');
+      nav('/dashboard');
+    } catch (err) {
+      toast.error(err.response?.data?.message || 'Login failed');
+    } finally { setLoading(false); }
+  };
+
+  return (
+    <div className="min-h-screen grid lg:grid-cols-2 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-bgdark dark:to-slate-900">
+      <div className="hidden lg:flex items-center justify-center bg-gradient-to-br from-primary to-accent text-white p-12">
+        <div className="max-w-md">
+          <div className="text-5xl font-extrabold mb-4">SwiftWheels</div>
+          <div className="text-xl opacity-90 mb-6">Vehicle Rental & Reservation System</div>
+          <p className="opacity-80">Manage rentals, reservations, customers, and vehicles — securely and efficiently. Huye City, Rwanda.</p>
+        </div>
+      </div>
+      <div className="flex items-center justify-center p-6">
+        <motion.form initial={{ opacity:0, y:20 }} animate={{ opacity:1, y:0 }} onSubmit={submit} className="card w-full max-w-md">
+          <h1 className="text-2xl font-bold mb-1">Sign in</h1>
+          <p className="text-slate-500 text-sm mb-6">Access your VRS account</p>
+          <label className="text-sm font-medium">Username</label>
+          <div className="relative my-2"><FiUser className="absolute left-3 top-3 text-slate-400"/>
+            <input className="input pl-10" value={form.username} onChange={e=>setForm({...form, username:e.target.value})} required/>
+          </div>
+          <label className="text-sm font-medium">Password</label>
+          <div className="relative my-2"><FiLock className="absolute left-3 top-3 text-slate-400"/>
+            <input type="password" className="input pl-10" value={form.password} onChange={e=>setForm({...form, password:e.target.value})} required/>
+          </div>
+          <button disabled={loading} className="btn-primary w-full justify-center mt-4">{loading ? 'Signing in...' : 'Sign in'}</button>
+          <div className="mt-4 text-xs text-slate-500">Demo: admin/admin123 · manager/manager123 · staff/staff123</div>
+          <div className="mt-2 text-sm">No account? <Link to="/register" className="text-accent">Register</Link></div>
+        </motion.form>
+      </div>
+    </div>
+  );
+}

package/templates/VehicleRentalReservationSystem/frontend-project/src/pages/Register.jsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import api from '../services/api';
+import { useNavigate, Link } from 'react-router-dom';
+import { toast } from 'react-toastify';
+
+export default function Register() {
+  const nav = useNavigate();
+  const [form, setForm] = useState({ username: '', password: '', fullName: '', email: '', role: 'STAFF' });
+  const submit = async (e) => {
+    e.preventDefault();
+    try {
+      await api.post('/auth/register', form);
+      toast.success('Account created. Please login.');
+      nav('/login');
+    } catch (err) { toast.error(err.response?.data?.message || 'Register failed'); }
+  };
+  return (
+    <div className="min-h-screen grid place-items-center p-6 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-bgdark dark:to-slate-900">
+      <form onSubmit={submit} className="card w-full max-w-md">
+        <h1 className="text-2xl font-bold mb-4">Create account</h1>
+        {['fullName','username','email'].map(k => (
+          <div key={k} className="mb-3"><label className="text-sm capitalize">{k}</label>
+            <input className="input" value={form[k]} onChange={e=>setForm({...form,[k]:e.target.value})} required/></div>
+        ))}
+        <div className="mb-3"><label className="text-sm">Password</label>
+          <input type="password" className="input" value={form.password} onChange={e=>setForm({...form,password:e.target.value})} required/></div>
+        <div className="mb-3"><label className="text-sm">Role</label>
+          <select className="input" value={form.role} onChange={e=>setForm({...form,role:e.target.value})}>
+            <option>STAFF</option><option>MANAGER</option><option>ADMIN</option>
+          </select></div>
+        <button className="btn-primary w-full justify-center">Register</button>
+        <div className="mt-3 text-sm">Have an account? <Link to="/login" className="text-accent">Sign in</Link></div>
+      </form>
+    </div>
+  );
+}

package/templates/VehicleRentalReservationSystem/frontend-project/src/pages/Rentals.jsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react';
+import api from '../services/api';
+import { toast } from 'react-toastify';
+import { FiRotateCcw, FiSearch } from 'react-icons/fi';
+import { date, money, badge } from '../utils/format';
+import { useAuth } from '../context/AuthContext';
+
+export default function Rentals() {
+  const { has } = useAuth();
+  const [items, setItems] = useState([]);
+  const [search, setSearch] = useState('');
+
+  const load = async () => {
+    const { data } = await api.get('/reservations', { params: { limit: 200 } });
+    setItems(data.items.filter(r => r.rentalDate));
+  };
+  useEffect(() => { load(); }, []);
+
+  const ret = async (id) => {
+    try { await api.patch(`/reservations/${id}/return`); toast.success('Vehicle returned'); load(); }
+    catch (err) { toast.error(err.response?.data?.message || 'Error'); }
+  };
+
+  const filtered = items.filter(r => {
+    const s = search.toLowerCase();
+    return !s || (r.customerId?.fullName||'').toLowerCase().includes(s) || (r.vehicleId?.plateNumber||'').toLowerCase().includes(s);
+  });
+
+  return (
+    <div>
+      <div className="flex flex-wrap items-center justify-between gap-3 mb-4">
+        <h1 className="text-2xl font-bold">Rentals</h1>
+        <div className="relative"><FiSearch className="absolute left-3 top-3 text-slate-400"/>
+          <input className="input pl-10 w-64" placeholder="Search..." value={search} onChange={e=>setSearch(e.target.value)}/>
+        </div>
+      </div>
+      <div className="overflow-x-auto">
+        <table>
+          <thead><tr><th>Customer</th><th>Vehicle</th><th>Pickup</th><th>Expected Return</th><th>Returned</th><th>Status</th><th>Fee</th><th className="text-right">Actions</th></tr></thead>
+          <tbody>{filtered.map(r => (
+            <tr key={r._id}>
+              <td className="font-medium">{r.customerId?.fullName}</td>
+              <td className="font-mono">{r.vehicleId?.plateNumber}</td>
+              <td>{date(r.rentalDate)}</td><td>{date(r.endDate)}</td><td>{date(r.returnDate)}</td>
+              <td><span className={`badge ${badge(r.rentalStatus)}`}>{r.rentalStatus}</span></td>
+              <td>{money(r.rentalFee)}</td>
+              <td className="text-right">
+                {r.rentalStatus==='ONGOING' && has('ADMIN','STAFF') && (
+                  <button className="btn-success" onClick={()=>ret(r._id)}><FiRotateCcw/> Return</button>
+                )}
+              </td>
+            </tr>
+          ))}{!filtered.length && <tr><td colSpan="8" className="text-center text-slate-400 py-8">No rentals</td></tr>}</tbody>
+        </table>
+      </div>
+    </div>
+  );
+}