format20 1.0.0

package/frontend/src/App.jsx

@@ -0,0 +1,619 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+axios.defaults.withCredentials = true;
+const API_URL = 'http://localhost:5000/api';
+
+export default function App() {
+  // Session Hooks Matrix
+  const [user, setUser] = useState(null);
+  const [authForm, setAuthForm] = useState({ username: '', password: '' });
+  const [isRegistering, setIsRegistering] = useState(false);
+  const [registerForm, setRegisterForm] = useState({ username: '', password: '', role: 'Staff' });
+  
+  const [activeTab, setActiveTab] = useState('dashboard'); 
+  const [searchQuery, setSearchQuery] = useState('');
+  const [loading, setLoading] = useState(true);
+
+  // Core States
+  const [customers, setCustomers] = useState([]);
+  const [vehicles, setVehicles] = useState([]);
+  const [rentals, setRentals] = useState([]);
+  const [reportData, setReportData] = useState([]);
+
+  // Dashboard Aggregates State
+  const [dashboardMetrics, setDashboardMetrics] = useState({
+    totalRevenue: 0, activeRentals: 0, totalCustomers: 0, fleetAvailabilityRate: 0, totalFleetCount: 0,
+    recentOperations: [], criticalAlerts: []
+  });
+
+  // Controlled Forms
+  const [customerForm, setCustomerForm] = useState({ id: '', Full_Name: '', National_ID: '', Phone: '', Email: '', Address: '' });
+  const [vehicleForm, setVehicleForm] = useState({ id: '', Plate_Number: '', Brand: '', Model: '', Year: '', Vehicle_Type: '', Purchase_Price: '', Status: 'Available' });
+  const [rentalForm, setRentalForm] = useState({ id: '', Customer_Id: '', Vehicle_Id: '', Reservation_Date: '', Date_Start: '', Date_End: '', Days_Reservation: '', Status: 'Pending', Rental_Date_Return: '', Rental_Fee: '', Rental_Status: 'Reserved' });
+
+  useEffect(() => {
+    checkSession();
+  }, []);
+
+  useEffect(() => {
+    if (user) fetchData();
+  }, [user, activeTab]);
+
+  const checkSession = async () => {
+    try {
+      const res = await axios.get(`${API_URL}/auth/session`);
+      if (res.data.loggedIn) setUser(res.data.user);
+    } catch (err) { 
+      console.error("No active session terminal found."); 
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    try {
+      const res = await axios.post(`${API_URL}/auth/login`, authForm);
+      setUser(res.data.user);
+    } catch (err) { alert(err.response?.data?.error || 'Login Error'); }
+  };
+
+  const handleRegister = async (e) => {
+    e.preventDefault();
+    try {
+      const res = await axios.post(`${API_URL}/auth/register`, registerForm);
+      alert(res.data.message);
+      setIsRegistering(false);
+    } catch (err) { alert(err.response?.data?.error || 'Registration failed'); }
+  };
+
+  const handleLogout = async () => {
+    try {
+      await axios.post(`${API_URL}/auth/logout`);
+      setUser(null);
+      setActiveTab('dashboard');
+    } catch (err) { console.error(err); }
+  };
+
+  const fetchData = async () => {
+    try {
+      const cRes = await axios.get(`${API_URL}/customers`); setCustomers(cRes.data);
+      const vRes = await axios.get(`${API_URL}/vehicles`); setVehicles(vRes.data);
+      const rRes = await axios.get(`${API_URL}/rentals`); setRentals(rRes.data);
+      const repRes = await axios.get(`${API_URL}/reports/comprehensive`); setReportData(repRes.data);
+      
+      const dashRes = await axios.get(`${API_URL}/dashboard/metrics`);
+      setDashboardMetrics(dashRes.data);
+    } catch (err) { console.error(err); }
+  };
+
+  const handleExportSystemState = () => {
+    const jsonString = `data:text/json;charset=utf-8,${encodeURIComponent(
+      JSON.stringify({ customers, vehicles, rentals, timestamp: new Date().toISOString() })
+    )}`;
+    const dlAnchor = document.createElement('a');
+    dlAnchor.setAttribute("href", jsonString);
+    dlAnchor.setAttribute("download", `VRS_State_Backup_${getTodayMaxLimit()}.json`);
+    document.body.appendChild(dlAnchor);
+    dlAnchor.click();
+    dlAnchor.remove();
+  };
+
+  const saveCustomer = async (e) => {
+    e.preventDefault();
+    try {
+      if (customerForm.id) {
+        await axios.put(`${API_URL}/customers/${customerForm.id}`, customerForm);
+      } else {
+        await axios.post(`${API_URL}/customers`, customerForm);
+      }
+      setCustomerForm({ id: '', Full_Name: '', National_ID: '', Phone: '', Email: '', Address: '' });
+      fetchData();
+    } catch (err) { alert(err.response?.data?.error || 'Validation error saving entry.'); }
+  };
+
+  const saveVehicle = async (e) => {
+    e.preventDefault();
+    try {
+      if (vehicleForm.id) {
+        await axios.put(`${API_URL}/vehicles/${vehicleForm.id}`, vehicleForm);
+      } else {
+        await axios.post(`${API_URL}/vehicles`, vehicleForm);
+      }
+      setVehicleForm({ id: '', Plate_Number: '', Brand: '', Model: '', Year: '', Vehicle_Type: '', Purchase_Price: '', Status: 'Available' });
+      fetchData();
+    } catch (err) { alert('Failed to save vehicle parameters.'); }
+  };
+
+  const saveRental = async (e) => {
+    e.preventDefault();
+    try {
+      const payload = { ...rentalForm, User_Id: user.id };
+      if (rentalForm.id) {
+        await axios.put(`${API_URL}/rentals/${rentalForm.id}`, payload);
+      } else {
+        await axios.post(`${API_URL}/rentals`, payload);
+      }
+      setRentalForm({ id: '', Customer_Id: '', Vehicle_Id: '', Reservation_Date: '', Date_Start: '', Date_End: '', Days_Reservation: '', Status: 'Pending', Rental_Date_Return: '', Rental_Fee: '', Rental_Status: 'Reserved' });
+      fetchData();
+    } catch (err) { alert(err.response?.data?.error || 'Reservation process aborted.'); }
+  };
+
+  const getTodayMaxLimit = () => new Date().toISOString().split('T')[0];
+
+  if (loading) return <div className="min-h-screen flex items-center justify-center bg-slate-950 text-white font-mono">Verifying Core Structures...</div>;
+
+  if (!user) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-950 px-4">
+        {!isRegistering ? (
+          <form onSubmit={handleLogin} className="bg-slate-900 p-8 rounded-xl shadow-2xl max-w-md w-full border border-slate-800">
+            <h2 className="text-3xl font-black text-white text-center tracking-tight mb-2">SwiftWheels</h2>
+            <span className="text-[10px] bg-emerald-950 text-emerald-400 font-bold px-3 py-1 rounded-full border border-emerald-800 uppercase tracking-widest block mx-auto w-fit mb-6">VRS System Portal</span>
+            <div className="space-y-4">
+              <div>
+                <label className="block text-slate-400 text-xs font-bold uppercase mb-2">Username</label>
+                <input type="text" className="w-full p-3 rounded bg-slate-800 text-white border border-slate-700 focus:outline-none focus:border-emerald-500 font-mono" value={authForm.username} onChange={e => setAuthForm({...authForm, username: e.target.value})} required />
+              </div>
+              <div>
+                <label className="block text-slate-400 text-xs font-bold uppercase mb-2">Password</label>
+                <input type="password" className="w-full p-3 rounded bg-slate-800 text-white border border-slate-700 focus:outline-none focus:border-emerald-500 font-mono" value={authForm.password} onChange={e => setAuthForm({...authForm, password: e.target.value})} required />
+              </div>
+              <button type="submit" className="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold py-3.5 rounded-lg shadow-lg transition">Log In Terminal</button>
+              <div className="text-center pt-2">
+                <button type="button" onClick={() => setIsRegistering(true)} className="text-xs text-slate-400 hover:text-emerald-400 underline">Register Terminal Connection</button>
+              </div>
+            </div>
+          </form>
+        ) : (
+          <form onSubmit={handleRegister} className="bg-slate-900 p-8 rounded-xl shadow-2xl max-w-md w-full border border-slate-800">
+            <h2 className="text-3xl font-black text-white text-center tracking-tight mb-6">Register Operator</h2>
+            <div className="space-y-4">
+              <div>
+                <label className="block text-slate-400 text-xs font-bold uppercase mb-2">Desired Username</label>
+                <input type="text" className="w-full p-3 rounded bg-slate-800 text-white border border-slate-700 focus:outline-none focus:border-blue-500 font-mono" value={registerForm.username} onChange={e => setRegisterForm({...registerForm, username: e.target.value})} required />
+              </div>
+              <div>
+                <label className="block text-slate-400 text-xs font-bold uppercase mb-2">Password</label>
+                <input type="password" className="w-full p-3 rounded bg-slate-800 text-white border border-slate-700 focus:outline-none focus:border-blue-500 font-mono" value={registerForm.password} onChange={e => setRegisterForm({...registerForm, password: e.target.value})} required />
+              </div>
+              <div>
+                <label className="block text-slate-400 text-xs font-bold uppercase mb-2">Role Authority</label>
+                <select className="w-full p-3 rounded bg-slate-800 text-white border border-slate-700 font-sans font-semibold" value={registerForm.role} onChange={e => setRegisterForm({...registerForm, role: e.target.value})}>
+                  <option value="Staff">Standard Staff Operator</option>
+                  <option value="Manager">Operations Manager</option>
+                  <option value="Admin">System Administrator</option>
+                </select>
+              </div>
+              <button type="submit" className="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold py-3.5 rounded-lg transition">Create Account</button>
+              <div className="text-center pt-2">
+                <button type="button" onClick={() => setIsRegistering(false)} className="text-xs text-slate-400 hover:text-blue-400 underline">Return to Login</button>
+              </div>
+            </div>
+          </form>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-slate-50 flex flex-col font-sans print:bg-white text-slate-900">
+      <header className="bg-slate-900 text-white shadow-md px-6 py-4 flex flex-wrap justify-between items-center gap-4 print:hidden">
+        <div>
+          <h1 className="text-2xl font-black tracking-tight">SwiftWheels Enterprise</h1>
+          <p className="text-xs text-slate-400">Rubavu City Fleet &amp; Reservation Management Subsystem (VRS)</p>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="text-right">
+            <span className="block text-xs text-slate-400">Operator Instance</span>
+            <span className="text-sm font-bold text-emerald-400 font-mono">{user.username} ({user.role})</span>
+          </div>
+          <button onClick={handleLogout} className="bg-rose-600 hover:bg-rose-500 px-4 py-2 rounded-lg text-xs font-bold uppercase tracking-wide transition shadow-md">Disconnect</button>
+        </div>
+      </header>
+
+      <div className="bg-white border-b border-slate-200 px-6 py-2.5 flex flex-wrap gap-2 justify-between items-center print:hidden shadow-sm">
+        <div className="flex flex-wrap gap-2">
+          {['dashboard', 'customers', 'vehicles', 'transactions', 'reports'].map((tab) => (
+            <button key={tab} onClick={() => { setActiveTab(tab); setSearchQuery(''); }} className={`px-4 py-2 capitalize font-bold text-xs tracking-wider rounded-lg border transition duration-150 ${activeTab === tab ? 'bg-slate-900 text-white border-slate-950 shadow-sm' : 'text-slate-600 bg-slate-50 hover:bg-slate-100 border-slate-200'}`}>
+              {tab === 'transactions' ? 'Reservations & Rental Logs' : tab === 'dashboard' ? 'Analytics Dashboard' : tab}
+            </button>
+          ))}
+        </div>
+        <button onClick={handleExportSystemState} className="bg-blue-50 border border-blue-200 hover:bg-blue-100 text-blue-700 font-extrabold px-3 py-1.5 rounded-lg text-xs uppercase tracking-wider transition">
+          Export System State
+        </button>
+      </div>
+
+      <main className="flex-1 p-6 max-w-7xl w-full mx-auto print:p-0">
+        {activeTab !== 'reports' && activeTab !== 'dashboard' && (
+          <div className="mb-6 print:hidden">
+            <input type="text" placeholder={`Global scan across active ${activeTab}...`} className="max-w-md w-full p-3 border border-slate-300 bg-white text-slate-900 rounded-xl shadow-sm text-sm focus:outline-none focus:ring-2 focus:ring-slate-900" value={searchQuery} onChange={e => setSearchQuery(e.target.value)} />
+          </div>
+        )}
+
+        {/* --- TAB 0: ADVANCED OPERATIONS ANALYTICS DASHBOARD --- */}
+        {activeTab === 'dashboard' && (
+          <div className="space-y-6">
+            <div className="border-b pb-2">
+              <h2 className="text-xl font-black text-slate-900 uppercase">System Analytics Control Desk</h2>
+              <p className="text-xs text-slate-500 font-mono">Real-time aggregate tracking metrics derived from the live server backend matrix</p>
+            </div>
+
+            {/* Metrics Dashboard Layout */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+              <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
+                <span className="text-[10px] uppercase text-slate-400 font-black tracking-wider block">Gross System Revenue</span>
+                <span className="text-2xl font-black text-slate-900 block mt-1 font-mono">{Number(dashboardMetrics.totalRevenue).toLocaleString()} RWF</span>
+                <span className="text-xs text-emerald-600 font-bold block mt-2">↑ Active Billings Accumulated</span>
+              </div>
+              <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
+                <span className="text-[10px] uppercase text-slate-400 font-black tracking-wider block">Active Fleet Deployments</span>
+                <span className="text-2xl font-black text-slate-900 block mt-1 font-mono">{dashboardMetrics.activeRentals} / {dashboardMetrics.totalFleetCount}</span>
+                <span className="text-xs text-slate-500 block mt-2">Units currently in transit</span>
+              </div>
+              <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
+                <span className="text-[10px] uppercase text-slate-400 font-black tracking-wider block">Fleet Availability Ratio</span>
+                <span className="text-2xl font-black text-slate-900 block mt-1 font-mono">{dashboardMetrics.fleetAvailabilityRate}%</span>
+                <div className="w-full bg-slate-100 h-1.5 rounded-full mt-3 overflow-hidden">
+                  <div className="bg-emerald-500 h-full" style={{ width: `${dashboardMetrics.fleetAvailabilityRate}%` }}></div>
+                </div>
+              </div>
+              <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
+                <span className="text-[10px] uppercase text-slate-400 font-black tracking-wider block">Client Master Profiles</span>
+                <span className="text-2xl font-black text-slate-900 block mt-1 font-mono">{dashboardMetrics.totalCustomers} Files</span>
+                <span className="text-xs text-indigo-600 font-bold block mt-2">Verified Registrations</span>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+              {/* Previous System Operations Audit Stream */}
+              <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm lg:col-span-2">
+                <h3 className="text-xs uppercase text-slate-400 font-black tracking-wider mb-4">Chronological Stream of Previous Operations</h3>
+                <div className="divide-y divide-slate-100 font-sans">
+                  {dashboardMetrics.recentOperations.length === 0 ? (
+                    <p className="text-xs text-slate-400 py-4 italic">No recent system mutations registered.</p>
+                  ) : (
+                    dashboardMetrics.recentOperations.map((log) => (
+                      <div key={log.id} className="py-3 flex justify-between items-center gap-2">
+                        <div>
+                          <span className="text-sm font-bold text-slate-900 block">{log.Full_Name}</span>
+                          <span className="text-xs text-slate-500 font-mono">Vehicle Plate Assigned: <span className="font-bold text-slate-700">{log.Plate_Number}</span></span>
+                        </div>
+                        <div className="text-right">
+                          <span className="font-mono text-xs font-bold block text-slate-900">{Number(log.Rental_Fee).toLocaleString()} RWF</span>
+                          <span className={`inline-block text-[9px] font-black uppercase px-2 py-0.5 rounded ${log.Rental_Status === 'Active' ? 'bg-amber-100 text-amber-800' : 'bg-emerald-100 text-emerald-800'}`}>{log.Rental_Status}</span>
+                        </div>
+                      </div>
+                    ))
+                  )}
+                </div>
+              </div>
+
+              {/* Critical Structural Timeline Alerts */}
+              <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
+                <h3 className="text-xs uppercase text-rose-500 font-black tracking-wider mb-4">Critical System Overdue Alerts</h3>
+                <div className="space-y-3">
+                  {dashboardMetrics.criticalAlerts.length === 0 ? (
+                    <div className="p-4 bg-slate-50 border border-slate-100 rounded-lg text-center">
+                      <span className="text-xs font-semibold text-slate-500 block">✓ Zero Overdue Deadlocks</span>
+                      <p className="text-[10px] text-slate-400 mt-0.5">All tracked assets conform to contract timeline sheets.</p>
+                    </div>
+                  ) : (
+                    dashboardMetrics.criticalAlerts.map((alertItem) => (
+                      <div key={alertItem.id} className="p-3 bg-rose-50 border border-rose-100 rounded-lg text-xs font-medium">
+                        <span className="text-rose-900 font-bold block uppercase tracking-tight">Lease Duration Violation</span>
+                        <p className="text-rose-700 mt-1">Client <span className="font-bold">{alertItem.Full_Name}</span> holds asset <span className="font-mono font-bold bg-white px-1 border border-rose-200">{alertItem.Plate_Number}</span> past contract bounds.</p>
+                        <span className="text-[10px] text-rose-400 font-mono block mt-1.5">Expected: {new Date(alertItem.Date_End).toLocaleDateString('en-GB')}</span>
+                      </div>
+                    ))
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* --- TAB 1: CUSTOMERS ENGINE WORKSPACE --- */}
+        {activeTab === 'customers' && (
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <form onSubmit={saveCustomer} className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 h-fit space-y-4">
+              <div className="border-b pb-2">
+                <h3 className="text-md font-extrabold text-slate-900 tracking-tight">{customerForm.id ? 'Modify Data Profile' : 'Register Customer Profile'}</h3>
+                <p className="text-xs text-slate-400">Strict Rwandan criteria constraints applied natively</p>
+              </div>
+              <div className="space-y-3 text-sm">
+                <input type="text" placeholder="Full Name" className="w-full p-2.5 border border-slate-200 rounded-lg focus:ring-1 focus:ring-slate-900" value={customerForm.Full_Name} onChange={e => setCustomerForm({...customerForm, Full_Name: e.target.value})} required />
+                
+                {/* 16-Digit Validation Pattern Rule */}
+                <input 
+                  type="text" 
+                  placeholder="National ID (16 Digits)" 
+                  className="w-full p-2.5 border border-slate-200 rounded-lg font-mono focus:ring-1 focus:ring-slate-900" 
+                  maxLength="16" 
+                  pattern="1\d{15}" 
+                  title="Rwandan National ID must be exactly 16 digits starting with 1" 
+                  value={customerForm.National_ID} 
+                  onChange={e => setCustomerForm({...customerForm, National_ID: e.target.value.replace(/\D/g, '')})} 
+                  required 
+                />
+
+                {/* 10-Digit Phone Validation Rule */}
+                <input 
+                  type="text" 
+                  placeholder="Primary Phone (e.g., 0788000000)" 
+                  className="w-full p-2.5 border border-slate-200 rounded-lg font-mono focus:ring-1 focus:ring-slate-900" 
+                  maxLength="10" 
+                  pattern="07[2389]\d{7}" 
+                  title="Phone must be a valid 10-digit Rwandan format starting with 072, 073, 078, or 079" 
+                  value={customerForm.Phone} 
+                  onChange={e => setCustomerForm({...customerForm, Phone: e.target.value.replace(/\D/g, '')})} 
+                  required 
+                />
+
+                <input type="email" placeholder="Email Address (Optional)" className="w-full p-2.5 border border-slate-200 rounded-lg focus:ring-1 focus:ring-slate-900" value={customerForm.Email} onChange={e => setCustomerForm({...customerForm, Email: e.target.value})} />
+                <textarea placeholder="Physical Address Logistics" className="w-full p-2.5 border border-slate-200 rounded-lg text-xs focus:ring-1 focus:ring-slate-900" rows="2" value={customerForm.Address} onChange={e => setCustomerForm({...customerForm, Address: e.target.value})}></textarea>
+                <div className="flex gap-2 pt-2">
+                  <button type="submit" className="flex-1 bg-emerald-600 text-white py-2.5 rounded-lg font-bold hover:bg-emerald-500 shadow-sm transition">Commit Record</button>
+                  {customerForm.id && <button type="button" className="bg-slate-200 text-slate-700 px-3 rounded-lg text-xs font-semibold" onClick={() => setCustomerForm({id:'',Full_Name:'',National_ID:'',Phone:'',Email:'',Address:''})}>Reset</button>}
+                </div>
+              </div>
+            </form>
+            <div className="lg:col-span-2 bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+              <table className="w-full text-left border-collapse">
+                <thead>
+                  <tr className="bg-slate-900 text-white text-xs font-bold uppercase tracking-wider">
+                    <th className="p-4">Customer Profiling</th><th className="p-4">National ID Code</th><th className="p-4">Phone Identity</th><th className="p-4 text-center">Actions</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-100 text-sm text-slate-600">
+                  {customers.filter(c => c.Full_Name.toLowerCase().includes(searchQuery.toLowerCase()) || c.National_ID.includes(searchQuery)).map(c => (
+                    <tr key={c.id} className="hover:bg-slate-50 transition">
+                      <td className="p-4 font-bold text-slate-900">{c.Full_Name}</td><td className="p-4 font-mono text-xs">{c.National_ID}</td><td className="p-4 font-mono text-xs">{c.Phone}</td>
+                      <td className="p-4 space-x-3 text-center text-xs font-bold">
+                        <button className="text-indigo-600 hover:text-indigo-900 uppercase" onClick={() => setCustomerForm(c)}>Edit</button>
+                        <button className="text-rose-600 hover:text-rose-900 uppercase" onClick={async () => { if(confirm('Purge client row?')) { await axios.delete(`${API_URL}/customers/${c.id}`); fetchData(); } }}>Delete</button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+
+        {/* --- TAB 2: VEHICLE FLEET MANAGEMENT STAGE --- */}
+        {activeTab === 'vehicles' && (
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <form onSubmit={saveVehicle} className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 h-fit space-y-4">
+              <div className="border-b pb-2">
+                <h3 className="text-md font-extrabold text-slate-900 tracking-tight">{vehicleForm.id ? 'Modify Fleet Inventory Row' : 'Introduce Fleet Asset Line'}</h3>
+              </div>
+              <div className="space-y-3 text-sm">
+                <input type="text" placeholder="Registration Plate Number" className="w-full p-2.5 border border-slate-200 rounded-lg focus:ring-1 focus:ring-slate-900 font-mono uppercase" value={vehicleForm.Plate_Number} onChange={e => setVehicleForm({...vehicleForm, Plate_Number: e.target.value})} required />
+                <input type="text" placeholder="Brand Manufacturer" className="w-full p-2.5 border border-slate-200 rounded-lg focus:ring-1 focus:ring-slate-900" value={vehicleForm.Brand} onChange={e => setVehicleForm({...vehicleForm, Brand: e.target.value})} required />
+                <input type="text" placeholder="Model Designation Variant" className="w-full p-2.5 border border-slate-200 rounded-lg focus:ring-1 focus:ring-slate-900" value={vehicleForm.Model} onChange={e => setVehicleForm({...vehicleForm, Model: e.target.value})} required />
+                <input type="number" placeholder="Production/Release Year" className="w-full p-2.5 border border-slate-200 rounded-lg focus:ring-1 focus:ring-slate-900 font-mono" value={vehicleForm.Year} onChange={e => setVehicleForm({...vehicleForm, Year: e.target.value})} required />
+                <input type="text" placeholder="Vehicle Classification" className="w-full p-2.5 border border-slate-200 rounded-lg focus:ring-1 focus:ring-slate-900" value={vehicleForm.Vehicle_Type} onChange={e => setVehicleForm({...vehicleForm, Vehicle_Type: e.target.value})} required />
+                <input type="number" placeholder="Purchase Cost (RWF)" className="w-full p-2.5 border border-slate-200 rounded-lg focus:ring-1 focus:ring-slate-900 font-mono" value={vehicleForm.Purchase_Price} onChange={e => setVehicleForm({...vehicleForm, Purchase_Price: e.target.value})} required />
+                <select className="w-full p-2.5 border border-slate-200 rounded-lg bg-white font-semibold" value={vehicleForm.Status} onChange={e => setVehicleForm({...vehicleForm, Status: e.target.value})}>
+                  <option value="Available">Available for Lease</option><option value="Reserved">Status Blocked: Reserved</option><option value="Rented">Active Lease: Rented Out</option><option value="Maintenance">Maintenance Block</option>
+                </select>
+                <div className="flex gap-2 pt-2">
+                  <button type="submit" className="flex-1 bg-emerald-600 text-white py-2.5 rounded-lg font-bold hover:bg-emerald-500 transition">Commit Fleet Asset</button>
+                  {vehicleForm.id && <button type="button" className="bg-slate-200 text-slate-700 px-3 rounded-lg text-xs font-semibold" onClick={() => setVehicleForm({id:'',Plate_Number:'',Brand:'',Model:'',Year:'',Vehicle_Type:'',Purchase_Price:'',Status:'Available'})}>Cancel</button>}
+                </div>
+              </div>
+            </form>
+            <div className="lg:col-span-2 bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+              <table className="w-full text-left border-collapse">
+                <thead>
+                  <tr className="bg-slate-900 text-white text-xs font-bold uppercase tracking-wider">
+                    <th className="p-4">Plate Code</th><th className="p-4">Car Details Matrix</th><th className="p-4">Status</th><th className="p-4 text-center">Action Framework</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-100 text-sm text-slate-600">
+                  {vehicles.filter(v => v.Plate_Number.toLowerCase().includes(searchQuery.toLowerCase()) || v.Brand.toLowerCase().includes(searchQuery.toLowerCase())).map(v => (
+                    <tr key={v.id} className="hover:bg-slate-50 transition">
+                      <td className="p-4 font-mono font-black text-slate-900 tracking-wider bg-slate-50">{v.Plate_Number}</td><td className="p-4 font-medium text-slate-800">{v.Brand} {v.Model} ({v.Year}) <span className="text-xs text-slate-400 block italic">{v.Vehicle_Type} - Valued: {Number(v.Purchase_Price).toLocaleString()} RWF</span></td>
+                      <td className="p-4"><span className={`px-2.5 py-1 rounded-md text-xs font-bold uppercase ${v.Status === 'Available' ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800'}`}>{v.Status}</span></td>
+                      <td className="p-4 space-x-3 text-center text-xs font-bold">
+                        <button className="text-indigo-600 hover:text-indigo-900 uppercase" onClick={() => setVehicleForm(v)}>Edit</button>
+                        <button className="text-rose-600 hover:text-rose-900 uppercase" onClick={async () => { if(confirm('Scrub vehicle?')) { await axios.delete(`${API_URL}/vehicles/${v.id}`); fetchData(); } }}>Delete</button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+
+        {/* --- TAB 3: RESERVATIONS AND TRANSACTION BOUNDS --- */}
+        {activeTab === 'transactions' && (
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <form onSubmit={saveRental} className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 h-fit space-y-4">
+              <div className="border-b pb-2">
+                <h3 className="text-md font-extrabold text-slate-900 tracking-tight">{rentalForm.id ? 'Adjust Transaction Parameters' : 'Authorize Booking Ticket'}</h3>
+                <p className="text-xs text-slate-400">Future calendar configurations are blocked dynamically</p>
+              </div>
+              <div className="space-y-3 text-sm">
+                <div>
+                  <label className="text-[10px] uppercase font-extrabold text-slate-400 block mb-1">Target Customer Profile</label>
+                  <select className="w-full p-2.5 border border-slate-200 rounded-lg bg-white" value={rentalForm.Customer_Id} onChange={e => setRentalForm({...rentalForm, Customer_Id: e.target.value})} required>
+                    <option value="">Select Target Client Profile</option>
+                    {customers.map(c => <option key={c.id} value={c.id}>{c.Full_Name} ({c.National_ID})</option>)}
+                  </select>
+                </div>
+                <div>
+                  <label className="text-[10px] uppercase font-extrabold text-slate-400 block mb-1">Lease Vehicle Allocation</label>
+                  <select className="w-full p-2.5 border border-slate-200 rounded-lg bg-white" value={rentalForm.Vehicle_Id} onChange={e => setRentalForm({...rentalForm, Vehicle_Id: e.target.value})} required>
+                    <option value="">Assign Vehicle Fleet Asset</option>
+                    {vehicles.map(v => <option key={v.id} value={v.id}>{v.Plate_Number} - {v.Brand} {v.Model}</option>)}
+                  </select>
+                </div>
+                
+                {/* Dynamically Clamped Inputs via max={} Property */}
+                <div className="grid grid-cols-1 gap-2">
+                  <div>
+                    <label className="text-[10px] font-bold text-slate-500 uppercase">Reservation Logging Date</label>
+                    <input 
+                      type="date" 
+                      className="w-full p-2 border border-slate-200 rounded-lg font-mono text-xs shadow-sm" 
+                      max={getTodayMaxLimit()} 
+                      value={rentalForm.Reservation_Date} 
+                      onChange={e => setRentalForm({...rentalForm, Reservation_Date: e.target.value})} 
+                      required 
+                    />
+                  </div>
+                  <div>
+                    <label className="text-[10px] font-bold text-slate-500 uppercase">Lease Start Date</label>
+                    <input 
+                      type="date" 
+                      className="w-full p-2 border border-slate-200 rounded-lg font-mono text-xs shadow-sm" 
+                      max={getTodayMaxLimit()} 
+                      value={rentalForm.Date_Start} 
+                      onChange={e => setRentalForm({...rentalForm, Date_Start: e.target.value})} 
+                      required 
+                    />
+                  </div>
+                  <div>
+                    <label className="text-[10px] font-bold text-slate-500 uppercase">Lease Scheduled End Date</label>
+                    <input type="date" className="w-full p-2 border border-slate-200 rounded-lg font-mono text-xs shadow-sm" value={rentalForm.Date_End} onChange={e => setRentalForm({...rentalForm, Date_End: e.target.value})} required />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-2">
+                  <div>
+                    <label className="text-[10px] font-bold text-slate-500 uppercase">Days Count</label>
+                    <input type="number" className="w-full p-2 border border-slate-200 rounded-lg font-mono" value={rentalForm.Days_Reservation} onChange={e => setRentalForm({...rentalForm, Days_Reservation: e.target.value})} required />
+                  </div>
+                  <div>
+                    <label className="text-[10px] font-bold text-slate-500 uppercase">Invoice Fee (RWF)</label>
+                    <input type="number" className="w-full p-2 border border-slate-200 rounded-lg font-mono" value={rentalForm.Rental_Fee} onChange={e => setRentalForm({...rentalForm, Rental_Fee: e.target.value})} required />
+                  </div>
+                </div>
+                <div className="grid grid-cols-2 gap-2">
+                  <div>
+                    <label className="text-[10px] font-bold text-slate-500 uppercase">Booking Base Status</label>
+                    <select className="w-full p-2 text-xs border border-slate-200 bg-white font-semibold rounded-lg" value={rentalForm.Status} onChange={e => setRentalForm({...rentalForm, Status: e.target.value})}>
+                      <option value="Pending">Pending</option><option value="Confirmed">Confirmed</option><option value="Cancelled">Cancelled</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="text-[10px] font-bold text-slate-500 uppercase">Lease Status</label>
+                    <select className="w-full p-2 text-xs border border-slate-200 bg-white font-semibold rounded-lg" value={rentalForm.Rental_Status} onChange={e => setRentalForm({...rentalForm, Rental_Status: e.target.value})}>
+                      <option value="Reserved">Reserved</option><option value="Active">Active (Checked-Out)</option><option value="Returned">Returned</option><option value="Overdue">Overdue</option>
+                    </select>
+                  </div>
+                </div>
+                <div>
+                  <label className="text-[10px] font-bold text-slate-500 uppercase block mb-1">Actual Physical Return Date</label>
+                  <input type="date" className="w-full p-2 border border-slate-200 rounded-lg font-mono text-xs" value={rentalForm.Rental_Date_Return} onChange={e => setRentalForm({...rentalForm, Rental_Date_Return: e.target.value})} />
+                </div>
+                <div className="flex gap-2 pt-2">
+                  <button type="submit" className="flex-1 bg-emerald-600 text-white py-2.5 rounded-lg font-bold hover:bg-emerald-500 transition">Post Transaction Logs</button>
+                  {rentalForm.id && <button type="button" className="bg-slate-200 text-slate-700 px-3 rounded-lg text-xs font-semibold" onClick={() => setRentalForm({id:'',Customer_Id:'',Vehicle_Id:'',Reservation_Date:'',Date_Start:'',Date_End:'',Days_Reservation:'',Status:'Pending',Rental_Date_Return:'',Rental_Fee:'',Rental_Status:'Reserved'})}>Clear</button>}
+                </div>
+              </div>
+            </form>
+            <div className="lg:col-span-2 bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+              <table className="w-full text-left border-collapse">
+                <thead>
+                  <tr className="bg-slate-900 text-white text-xs font-bold uppercase tracking-wider">
+                    <th className="p-4">Customer</th><th className="p-4">Vehicle Assigned</th><th className="p-4">Lease Fee</th><th className="p-4 text-center">Actions</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-100 text-sm text-slate-600">
+                  {rentals.map(r => (
+                    <tr key={r.id} className="hover:bg-slate-50 transition">
+                      <td className="p-4 font-bold text-slate-900">{r.Customer_Name}</td>
+                      <td className="p-4 font-mono font-bold text-xs text-slate-700 bg-slate-50">{r.Plate_Number} <span className="text-[10px] font-sans font-medium text-slate-400 block">{r.Brand} {r.Model}</span></td>
+                      <td className="p-4 font-bold text-slate-900 font-mono text-xs">{Number(r.Rental_Fee).toLocaleString()} RWF</td>
+                      <td className="p-4 space-x-3 text-center text-xs font-bold">
+                        <button className="text-indigo-600 hover:text-indigo-900 uppercase" onClick={() => {
+                          const formatStr = (d) => d ? d.split('T')[0] : '';
+                          setRentalForm({
+                            ...r,
+                            Reservation_Date: formatStr(r.Reservation_Date),
+                            Date_Start: formatStr(r.Date_Start),
+                            Date_End: formatStr(r.Date_End),
+                            Rental_Date_Return: formatStr(r.Rental_Date_Return)
+                          });
+                        }}>Modify</button>
+                        <button className="text-rose-600 hover:text-rose-900 uppercase" onClick={async () => { if(confirm('Scrub log item?')) { await axios.delete(`${API_URL}/rentals/${r.id}`); fetchData(); } }}>Delete</button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+
+        {/* --- TAB 4: COMPREHENSIVE REVERSIBLE AUDITING SHEET --- */}
+        {activeTab === 'reports' && (
+          <div className="bg-white p-6 rounded-xl shadow-md border border-slate-200">
+            <div className="flex flex-wrap justify-between items-center mb-6 gap-4 border-b pb-4 print:mb-2 print:pb-2">
+              <div>
+                <h2 className="text-xl font-black text-slate-900 uppercase tracking-tight">Customer Vehicle Reservation-Rental Report</h2>
+                <p className="text-xs text-slate-500 font-mono">SwiftWheels Enterprise Cross-Join Mapping Audit File</p>
+              </div>
+              <button onClick={() => window.print()} className="bg-slate-900 text-white font-extrabold py-2.5 px-5 rounded-lg shadow-sm text-xs uppercase tracking-wider print:hidden">Print System Report Document</button>
+            </div>
+            <div className="overflow-x-auto">
+              <table className="w-full text-left border-collapse text-xs print:text-[9px]">
+                <thead>
+                  <tr className="bg-slate-900 text-white font-bold uppercase text-[10px] print:text-[8px]">
+                    <th className="p-2 border border-slate-700">Customer Details</th>
+                    <th className="p-2 border border-slate-700">Vehicle Metadata</th>
+                    <th className="p-2 border border-slate-700">Booking Specs</th>
+                    <th className="p-2 border border-slate-700">Financial Logistics</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-300 bg-white">
+                  {reportData.map((row, idx) => (
+                    <tr key={idx} className="font-medium border">
+                      <td className="p-2 border border-slate-200">
+                        <div className="font-extrabold text-slate-900 text-sm">{row.Full_Name}</div>
+                        <div className="font-mono text-slate-500">ID: {row.National_ID}</div>
+                        <div className="font-mono text-slate-500">Tel: {row.Phone}</div>
+                      </td>
+                      <td className="p-2 border border-slate-200 bg-slate-50">
+                        <div className="font-mono font-black text-slate-900 tracking-wider">{row.Plate_Number}</div>
+                        <div className="font-bold text-slate-700">{row.Brand} — {row.Model}</div>
+                      </td>
+                      <td className="p-2 border border-slate-200">
+                        <div className="font-mono">Logged: {new Date(row.Reservation_Date).toLocaleDateString('en-GB')}</div>
+                      </td>
+                      <td className="p-2 border border-slate-200">
+                        <div className="font-medium text-slate-700">Timeline: <span className="font-mono font-bold text-slate-900">{new Date(row.Date_Start).toLocaleDateString('en-GB')}</span> to <span className="font-mono font-bold text-slate-900">{new Date(row.Date_End).toLocaleDateString('en-GB')}</span></div>
+                        <div className="mt-1 flex items-center justify-between">
+                          <span>Status: <span className="font-black text-slate-900 uppercase">{row.Rental_Status}</span></span>
+                          <span className="font-mono font-black text-emerald-700 text-sm">{Number(row.Rental_Fee).toLocaleString()} RWF</span>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            
+            {/* National Exam Documentation Identity Stamp Section */}
+            <div className="hidden print:flex flex-wrap justify-between items-center mt-12 pt-6 border-t border-dashed border-slate-400 text-[10px] font-mono text-slate-500">
+              <div>
+                <p>System Analyst Signature Stamp: _______________________</p>
+                <p className="mt-1">SwiftWheels Enterprise Authorized Operations Ledger (Rubavu City)</p>
+              </div>
+              <div className="text-right">
+                <p>Document ID Code: VRS-COMP-REPORT-2026</p>
+                <p className="mt-1 font-bold text-slate-900">Developer Candidate Name Signoff: NIYONKURU SENGA AMANI</p>
+              </div>
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}