create-vrrsystem-app 1.0.0

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

@@ -0,0 +1,108 @@
+import { useState } from 'react';
+import api from '../services/api';
+import { toast } from 'react-toastify';
+import { FiDownload, FiPrinter, FiFile, FiFileText } from 'react-icons/fi';
+import { date, money, badge } from '../utils/format';
+import jsPDF from 'jspdf';
+import 'jspdf-autotable';
+import * as XLSX from 'xlsx';
+
+export default function Reports() {
+  const [period, setPeriod] = useState('monthly');
+  const [report, setReport] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const gen = async () => {
+    setLoading(true);
+    try { const { data } = await api.get('/reports', { params: { period } }); setReport(data); }
+    catch (err) { toast.error('Error generating report'); }
+    finally { setLoading(false); }
+  };
+
+  const cols = [
+    { k:'customerName', l:'Customer' }, { k:'nationalId', l:'NID' }, { k:'phone', l:'Phone' },
+    { k:'plateNumber', l:'Plate' }, { k:'brand', l:'Brand' }, { k:'model', l:'Model' },
+    { k:'year', l:'Year' }, { k:'vehicleType', l:'Type' },
+    { k:'reservationDate', l:'Reserved', fmt:date }, { k:'rentalDate', l:'Rented', fmt:date }, { k:'returnDate', l:'Returned', fmt:date },
+    { k:'reservationStatus', l:'Res. Status' }, { k:'rentalStatus', l:'Rental Status' }, { k:'rentalFee', l:'Fee', fmt:money }
+  ];
+
+  const exportPDF = () => {
+    const doc = new jsPDF('l', 'pt', 'a4');
+    doc.setFontSize(16); doc.text('SwiftWheels - VRS Report', 40, 40);
+    doc.setFontSize(10); doc.text(`Period: ${report.period} | ${new Date(report.from).toLocaleDateString()} → ${new Date(report.to).toLocaleDateString()}`, 40, 58);
+    doc.text(`Total Revenue: ${money(report.totalRevenue)} | Records: ${report.count}`, 40, 72);
+    doc.autoTable({
+      startY: 90,
+      head: [cols.map(c=>c.l)],
+      body: report.rows.map(r => cols.map(c => c.fmt ? c.fmt(r[c.k]) : (r[c.k] ?? '-'))),
+      styles: { fontSize: 7 }, headStyles: { fillColor: [30, 41, 59] }
+    });
+    doc.save(`VRS-Report-${report.period}-${Date.now()}.pdf`);
+  };
+  const exportExcel = () => {
+    const ws = XLSX.utils.json_to_sheet(report.rows);
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, 'Report');
+    XLSX.writeFile(wb, `VRS-Report-${report.period}-${Date.now()}.xlsx`);
+  };
+  const exportCSV = () => {
+    const head = cols.map(c=>c.l).join(',');
+    const body = report.rows.map(r => cols.map(c => JSON.stringify(c.fmt ? c.fmt(r[c.k]) : (r[c.k] ?? ''))).join(',')).join('\n');
+    const blob = new Blob([head+'\n'+body], { type:'text/csv' });
+    const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = `VRS-Report-${period}.csv`; a.click();
+  };
+  const print = () => window.print();
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-4">Reports</h1>
+      <div className="card flex flex-wrap items-end gap-3 mb-4">
+        <div><label className="text-sm block">Period</label>
+          <select className="input w-48" value={period} onChange={e=>setPeriod(e.target.value)}>
+            <option value="daily">Daily</option><option value="weekly">Weekly</option>
+            <option value="monthly">Monthly</option><option value="yearly">Yearly</option>
+            <option value="all">All Time</option>
+          </select>
+        </div>
+        <button className="btn-primary" onClick={gen} disabled={loading}>{loading?'Generating...':'Generate Report'}</button>
+        {report && (
+          <div className="flex gap-2 ml-auto">
+            <button className="btn-ghost" onClick={exportPDF}><FiFile/> PDF</button>
+            <button className="btn-ghost" onClick={exportExcel}><FiDownload/> Excel</button>
+            <button className="btn-ghost" onClick={exportCSV}><FiFileText/> CSV</button>
+            <button className="btn-ghost" onClick={print}><FiPrinter/> Print</button>
+          </div>
+        )}
+      </div>
+
+      {report && (
+        <div id="print-area">
+          <div className="card mb-4 print:shadow-none">
+            <div className="flex justify-between flex-wrap gap-3">
+              <div><h2 className="font-bold text-lg">SwiftWheels Enterprises</h2><p className="text-sm text-slate-500">Vehicle Rental & Reservation Report</p></div>
+              <div className="text-right text-sm">
+                <div>Period: <b>{report.period.toUpperCase()}</b></div>
+                <div>{new Date(report.from).toLocaleDateString()} → {new Date(report.to).toLocaleDateString()}</div>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mt-4">
+              <div className="p-3 rounded-lg bg-slate-100 dark:bg-slate-700"><div className="text-xs">Records</div><div className="text-xl font-bold">{report.count}</div></div>
+              <div className="p-3 rounded-lg bg-emerald-100 text-emerald-800"><div className="text-xs">Total Revenue</div><div className="text-xl font-bold">{money(report.totalRevenue)}</div></div>
+            </div>
+          </div>
+          <div className="overflow-x-auto card">
+            <table>
+              <thead><tr>{cols.map(c=><th key={c.k}>{c.l}</th>)}</tr></thead>
+              <tbody>{report.rows.map((r,i) => (
+                <tr key={i}>{cols.map(c => (
+                  <td key={c.k}>{c.k.includes('Status') ? <span className={`badge ${badge(r[c.k])}`}>{r[c.k]}</span> : (c.fmt ? c.fmt(r[c.k]) : (r[c.k] ?? '-'))}</td>
+                ))}</tr>
+              ))}{!report.rows.length && <tr><td colSpan={cols.length} className="text-center text-slate-400 py-8">No records</td></tr>}</tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,125 @@
+import { useEffect, useState } from 'react';
+import api from '../services/api';
+import { toast } from 'react-toastify';
+import { FiPlus, FiCheck, FiX, FiTrash2, FiSearch, FiTruck } from 'react-icons/fi';
+import Modal from '../components/Modal';
+import ConfirmDelete from '../components/ConfirmDelete';
+import { date, money, badge } from '../utils/format';
+import { useAuth } from '../context/AuthContext';
+
+const STATUS = ['PENDING','APPROVED','REJECTED','CANCELLED','COMPLETED'];
+
+export default function Reservations() {
+  const { has } = useAuth();
+  const [data, setData] = useState({ items: [], total: 0, pages: 1 });
+  const [search, setSearch] = useState('');
+  const [status, setStatus] = useState('');
+  const [page, setPage] = useState(1);
+  const [modal, setModal] = useState(false);
+  const [customers, setCustomers] = useState([]);
+  const [vehicles, setVehicles] = useState([]);
+  const [form, setForm] = useState({ customerId:'', vehicleId:'', startDate:'', endDate:'' });
+  const [del, setDel] = useState(null);
+
+  const load = async () => {
+    const { data } = await api.get('/reservations', { params: { search, status, page, limit: 10 } });
+    setData(data);
+  };
+  useEffect(() => { load(); }, [search, status, page]);
+
+  const openModal = async () => {
+    const [c, v] = await Promise.all([api.get('/customers', { params: { limit: 200 } }), api.get('/vehicles', { params: { status: 'AVAILABLE', limit: 200 } })]);
+    setCustomers(c.data.items); setVehicles(v.data.items);
+    setForm({ customerId: c.data.items[0]?._id || '', vehicleId: v.data.items[0]?._id || '', startDate: new Date().toISOString().slice(0,10), endDate: new Date(Date.now()+86400000*3).toISOString().slice(0,10) });
+    setModal(true);
+  };
+  const create = async (e) => {
+    e.preventDefault();
+    try { await api.post('/reservations', form); toast.success('Reservation created'); setModal(false); load(); }
+    catch (err) { toast.error(err.response?.data?.message || 'Error'); }
+  };
+  const action = async (id, type) => {
+    try { await api.patch(`/reservations/${id}/${type}`); toast.success(type.toUpperCase()); load(); }
+    catch (err) { toast.error(err.response?.data?.message || 'Error'); }
+  };
+  const remove = async () => {
+    try { await api.delete(`/reservations/${del._id}`); toast.success('Deleted'); setDel(null); load(); }
+    catch (err) { toast.error('Error'); }
+  };
+
+  return (
+    <div>
+      <div className="flex flex-wrap items-center justify-between gap-3 mb-4">
+        <h1 className="text-2xl font-bold">Reservations</h1>
+        <div className="flex gap-2">
+          <select className="input w-40" value={status} onChange={e=>{setPage(1);setStatus(e.target.value);}}>
+            <option value="">All Status</option>{STATUS.map(s=><option key={s}>{s}</option>)}
+          </select>
+          <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={openModal}><FiPlus/> New Reservation</button>}
+        </div>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table>
+          <thead><tr><th>Customer</th><th>Vehicle</th><th>Start</th><th>End</th><th>Fee</th><th>Status</th><th>Rental</th><th className="text-right">Actions</th></tr></thead>
+          <tbody>{data.items.map(r => (
+            <tr key={r._id}>
+              <td className="font-medium">{r.customerId?.fullName}</td>
+              <td><div className="font-mono">{r.vehicleId?.plateNumber}</div><div className="text-xs text-slate-500">{r.vehicleId?.brand} {r.vehicleId?.model}</div></td>
+              <td>{date(r.startDate)}</td><td>{date(r.endDate)}</td>
+              <td>{money(r.rentalFee)}</td>
+              <td><span className={`badge ${badge(r.reservationStatus)}`}>{r.reservationStatus}</span></td>
+              <td><span className={`badge ${badge(r.rentalStatus)}`}>{r.rentalStatus}</span></td>
+              <td className="text-right whitespace-nowrap">
+                {r.reservationStatus==='PENDING' && has('ADMIN','MANAGER') && (
+                  <>
+                    <button title="Approve" className="btn-ghost text-emerald-600" onClick={()=>action(r._id,'approve')}><FiCheck/></button>
+                    <button title="Reject" className="btn-ghost text-red-600" onClick={()=>action(r._id,'reject')}><FiX/></button>
+                  </>
+                )}
+                {r.reservationStatus==='APPROVED' && r.rentalStatus==='NOT_STARTED' && has('ADMIN','STAFF') && (
+                  <button title="Pickup" className="btn-ghost text-blue-600" onClick={()=>action(r._id,'pickup')}><FiTruck/></button>
+                )}
+                {has('ADMIN') && <button className="btn-ghost text-red-600" onClick={()=>setDel(r)}><FiTrash2/></button>}
+              </td>
+            </tr>
+          ))}{!data.items.length && <tr><td colSpan="8" className="text-center text-slate-400 py-8">No reservations</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="New Reservation">
+        <form onSubmit={create} className="grid grid-cols-2 gap-3">
+          <div className="col-span-2"><label className="text-sm">Customer</label>
+            <select className="input" value={form.customerId} onChange={e=>setForm({...form,customerId:e.target.value})} required>
+              {customers.map(c=><option key={c._id} value={c._id}>{c.fullName} — {c.nationalId}</option>)}
+            </select>
+          </div>
+          <div className="col-span-2"><label className="text-sm">Vehicle (available)</label>
+            <select className="input" value={form.vehicleId} onChange={e=>setForm({...form,vehicleId:e.target.value})} required>
+              {vehicles.map(v=><option key={v._id} value={v._id}>{v.plateNumber} — {v.brand} {v.model} (${v.dailyRate}/day)</option>)}
+            </select>
+          </div>
+          <div><label className="text-sm">Start Date</label><input type="date" className="input" value={form.startDate} onChange={e=>setForm({...form,startDate:e.target.value})} required/></div>
+          <div><label className="text-sm">End Date</label><input type="date" className="input" value={form.endDate} onChange={e=>setForm({...form,endDate: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">Create</button>
+          </div>
+        </form>
+      </Modal>
+      <ConfirmDelete open={!!del} onClose={()=>setDel(null)} onConfirm={remove} label={`reservation #${del?._id?.slice(-6)}`}/>
+    </div>
+  );
+}

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

@@ -0,0 +1,32 @@
+import { useTheme } from '../context/ThemeContext';
+import { useAuth } from '../context/AuthContext';
+
+export default function Settings() {
+  const { theme, toggle } = useTheme();
+  const { user } = useAuth();
+  return (
+    <div className="space-y-4">
+      <h1 className="text-2xl font-bold">Settings</h1>
+      <div className="card">
+        <h3 className="font-semibold mb-3">Profile</h3>
+        <div className="grid grid-cols-2 gap-3 text-sm">
+          <div><div className="text-slate-500">Username</div><div className="font-medium">{user?.username}</div></div>
+          <div><div className="text-slate-500">Full Name</div><div className="font-medium">{user?.fullName || '-'}</div></div>
+          <div><div className="text-slate-500">Email</div><div className="font-medium">{user?.email || '-'}</div></div>
+          <div><div className="text-slate-500">Role</div><div className="font-medium">{user?.role}</div></div>
+        </div>
+      </div>
+      <div className="card">
+        <h3 className="font-semibold mb-3">Appearance</h3>
+        <div className="flex items-center justify-between">
+          <div><div className="font-medium">Dark Mode</div><div className="text-sm text-slate-500">Toggle dark / light theme</div></div>
+          <button className="btn-primary" onClick={toggle}>{theme === 'dark' ? 'Switch to Light' : 'Switch to Dark'}</button>
+        </div>
+      </div>
+      <div className="card">
+        <h3 className="font-semibold mb-2">About</h3>
+        <p className="text-sm text-slate-500">SwiftWheels VRS v1.0.0 · Huye City, Rwanda</p>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react';
+import api from '../services/api';
+import { toast } from 'react-toastify';
+import { FiPlus, FiEdit2, FiTrash2 } from 'react-icons/fi';
+import Modal from '../components/Modal';
+import ConfirmDelete from '../components/ConfirmDelete';
+
+const empty = { username:'', password:'', fullName:'', email:'', role:'STAFF', active:true };
+
+export default function Users() {
+  const [items, setItems] = useState([]);
+  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('/users'); setItems(data); };
+  useEffect(() => { load(); }, []);
+
+  const open = (u) => { setEditing(u); setForm(u ? { ...u, password:'' } : empty); setModal(true); };
+  const save = async (e) => {
+    e.preventDefault();
+    try {
+      if (editing) await api.put(`/users/${editing._id}`, form);
+      else await api.post('/users', form);
+      toast.success('Saved'); setModal(false); load();
+    } catch (err) { toast.error(err.response?.data?.message || 'Error'); }
+  };
+  const remove = async () => {
+    try { await api.delete(`/users/${del._id}`); toast.success('Deleted'); setDel(null); load(); }
+    catch (err) { toast.error('Error'); }
+  };
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-2xl font-bold">System Users</h1>
+        <button className="btn-primary" onClick={()=>open(null)}><FiPlus/> Add User</button>
+      </div>
+      <div className="overflow-x-auto">
+        <table>
+          <thead><tr><th>Username</th><th>Full Name</th><th>Email</th><th>Role</th><th>Active</th><th className="text-right">Actions</th></tr></thead>
+          <tbody>{items.map(u => (
+            <tr key={u._id}>
+              <td className="font-medium">{u.username}</td><td>{u.fullName}</td><td>{u.email}</td>
+              <td><span className="badge bg-slate-200 text-slate-700">{u.role}</span></td>
+              <td>{u.active ? '✅' : '❌'}</td>
+              <td className="text-right">
+                <button className="btn-ghost" onClick={()=>open(u)}><FiEdit2/></button>
+                <button className="btn-ghost text-red-600" onClick={()=>setDel(u)}><FiTrash2/></button>
+              </td>
+            </tr>
+          ))}</tbody>
+        </table>
+      </div>
+
+      <Modal open={modal} onClose={()=>setModal(false)} title={editing ? 'Edit User' : 'New User'}>
+        <form onSubmit={save} className="grid grid-cols-2 gap-3">
+          <div><label className="text-sm">Username</label><input className="input" value={form.username} onChange={e=>setForm({...form,username:e.target.value})} required/></div>
+          <div><label className="text-sm">Password {editing && <span className="text-xs text-slate-400">(leave empty to keep)</span>}</label>
+            <input type="password" className="input" value={form.password} onChange={e=>setForm({...form,password:e.target.value})} {...(!editing?{required:true}:{})}/></div>
+          <div><label className="text-sm">Full Name</label><input className="input" value={form.fullName} onChange={e=>setForm({...form,fullName:e.target.value})}/></div>
+          <div><label className="text-sm">Email</label><input type="email" className="input" value={form.email} onChange={e=>setForm({...form,email:e.target.value})}/></div>
+          <div><label className="text-sm">Role</label>
+            <select className="input" value={form.role} onChange={e=>setForm({...form,role:e.target.value})}>
+              <option>ADMIN</option><option>MANAGER</option><option>STAFF</option>
+            </select></div>
+          <div className="flex items-end gap-2"><input type="checkbox" id="active" checked={form.active} onChange={e=>setForm({...form,active:e.target.checked})}/><label htmlFor="active">Active</label></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?.username}/>
+    </div>
+  );
+}

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

@@ -0,0 +1,110 @@
+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 { badge, money } from '../utils/format';
+import { useAuth } from '../context/AuthContext';
+
+const empty = { plateNumber:'', brand:'', model:'', year: new Date().getFullYear(), vehicleType:'Sedan', purchasePrice:0, dailyRate:50, status:'AVAILABLE' };
+const TYPES = ['Sedan','SUV','Hatchback','Pickup','Van','Bus','Truck','Coupe'];
+const STATUS = ['AVAILABLE','RESERVED','RENTED','MAINTENANCE'];
+
+export default function Vehicles() {
+  const { has } = useAuth();
+  const [data, setData] = useState({ items: [], total: 0, pages: 1 });
+  const [search, setSearch] = useState('');
+  const [status, setStatus] = 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('/vehicles', { params: { search, status, page, limit: 10 } });
+    setData(data);
+  };
+  useEffect(() => { load(); }, [search, status, page]);
+
+  const open = (v) => { setEditing(v); setForm(v || empty); setModal(true); };
+  const save = async (e) => {
+    e.preventDefault();
+    try {
+      const payload = { ...form, year: +form.year, purchasePrice: +form.purchasePrice, dailyRate: +form.dailyRate };
+      if (editing) await api.put(`/vehicles/${editing._id}`, payload);
+      else await api.post('/vehicles', payload);
+      toast.success('Saved'); setModal(false); load();
+    } catch (err) { toast.error(err.response?.data?.message || 'Error'); }
+  };
+  const remove = async () => {
+    try { await api.delete(`/vehicles/${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">Vehicles</h1>
+        <div className="flex gap-2">
+          <select className="input w-40" value={status} onChange={e=>{setPage(1);setStatus(e.target.value);}}>
+            <option value="">All Status</option>{STATUS.map(s=><option key={s}>{s}</option>)}
+          </select>
+          <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') && <button className="btn-primary" onClick={()=>open(null)}><FiPlus/> Add Vehicle</button>}
+        </div>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table>
+          <thead><tr><th>Plate</th><th>Brand</th><th>Model</th><th>Year</th><th>Type</th><th>Rate/Day</th><th>Status</th><th className="text-right">Actions</th></tr></thead>
+          <tbody>{data.items.map(v => (
+            <tr key={v._id}>
+              <td className="font-mono font-semibold">{v.plateNumber}</td>
+              <td>{v.brand}</td><td>{v.model}</td><td>{v.year}</td><td>{v.vehicleType}</td><td>{money(v.dailyRate)}</td>
+              <td><span className={`badge ${badge(v.status)}`}>{v.status}</span></td>
+              <td className="text-right">
+                {has('ADMIN') && <button className="btn-ghost" onClick={()=>open(v)}><FiEdit2/></button>}
+                {has('ADMIN') && <button className="btn-ghost text-red-600" onClick={()=>setDel(v)}><FiTrash2/></button>}
+              </td>
+            </tr>
+          ))}{!data.items.length && <tr><td colSpan="8" className="text-center text-slate-400 py-8">No vehicles</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 Vehicle' : 'New Vehicle'}>
+        <form onSubmit={save} className="grid grid-cols-2 gap-3">
+          <div><label className="text-sm">Plate Number</label><input className="input" value={form.plateNumber} onChange={e=>setForm({...form,plateNumber:e.target.value.toUpperCase()})} required/></div>
+          <div><label className="text-sm">Brand</label><input className="input" value={form.brand} onChange={e=>setForm({...form,brand:e.target.value})} required/></div>
+          <div><label className="text-sm">Model</label><input className="input" value={form.model} onChange={e=>setForm({...form,model:e.target.value})} required/></div>
+          <div><label className="text-sm">Year</label><input type="number" className="input" value={form.year} onChange={e=>setForm({...form,year:e.target.value})} required/></div>
+          <div><label className="text-sm">Type</label>
+            <select className="input" value={form.vehicleType} onChange={e=>setForm({...form,vehicleType:e.target.value})}>{TYPES.map(t=><option key={t}>{t}</option>)}</select>
+          </div>
+          <div><label className="text-sm">Status</label>
+            <select className="input" value={form.status} onChange={e=>setForm({...form,status:e.target.value})}>{STATUS.map(s=><option key={s}>{s}</option>)}</select>
+          </div>
+          <div><label className="text-sm">Purchase Price ($)</label><input type="number" className="input" value={form.purchasePrice} onChange={e=>setForm({...form,purchasePrice:e.target.value})} required/></div>
+          <div><label className="text-sm">Daily Rate ($)</label><input type="number" className="input" value={form.dailyRate} onChange={e=>setForm({...form,dailyRate: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?.plateNumber}/>
+    </div>
+  );
+}

package/templates/VehicleRentalReservationSystem/frontend-project/src/services/api.js

@@ -0,0 +1,16 @@
+import axios from 'axios';
+const api = axios.create({ baseURL: '/api' });
+api.interceptors.request.use((c) => {
+  const t = localStorage.getItem('accessToken');
+  if (t) c.headers.Authorization = `Bearer ${t}`;
+  return c;
+});
+api.interceptors.response.use(r => r, (err) => {
+  if (err.response?.status === 401) {
+    localStorage.removeItem('accessToken');
+    localStorage.removeItem('user');
+    if (!location.pathname.includes('/login')) location.href = '/login';
+  }
+  return Promise.reject(err);
+});
+export default api;

package/templates/VehicleRentalReservationSystem/frontend-project/src/utils/format.js

@@ -0,0 +1,20 @@
+export const money = (n) => `$${(n||0).toLocaleString(undefined, { maximumFractionDigits: 2 })}`;
+export const date = (d) => d ? new Date(d).toLocaleDateString() : '-';
+export const badge = (s) => {
+  const m = {
+    AVAILABLE: 'bg-emerald-100 text-emerald-700',
+    RESERVED: 'bg-amber-100 text-amber-700',
+    RENTED: 'bg-blue-100 text-blue-700',
+    MAINTENANCE: 'bg-slate-200 text-slate-700',
+    PENDING: 'bg-amber-100 text-amber-700',
+    APPROVED: 'bg-blue-100 text-blue-700',
+    REJECTED: 'bg-red-100 text-red-700',
+    CANCELLED: 'bg-slate-200 text-slate-700',
+    COMPLETED: 'bg-emerald-100 text-emerald-700',
+    ONGOING: 'bg-blue-100 text-blue-700',
+    RETURNED: 'bg-emerald-100 text-emerald-700',
+    LATE: 'bg-red-100 text-red-700',
+    NOT_STARTED: 'bg-slate-100 text-slate-700'
+  };
+  return m[s] || 'bg-slate-100 text-slate-700';
+};

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

@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html','./src/**/*.{js,jsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        primary: '#1E293B',
+        secondary: '#334155',
+        accent: '#2563EB',
+        bglight: '#F8FAFC',
+        bgdark: '#0F172A'
+      },
+      fontFamily: { sans: ['Inter','system-ui','sans-serif'] }
+    }
+  },
+  plugins: []
+};

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

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: { '/api': 'http://localhost:5000' }
+  }
+});