npms-exam-kit 1.0.0

package/projects/CRPMS-main/frontend-project/src/pages/Bill.jsx

@@ -0,0 +1,227 @@
+import { useState, useEffect, useRef } from 'react';
+import api from '../api/axios';
+
+export default function Bill({ paymentId, onClose }) {
+  const [bill, setBill] = useState(null);
+  const [error, setError] = useState('');
+  const [exporting, setExporting] = useState(false);
+  const printRef = useRef();
+
+  useEffect(() => {
+    api.get(`/payments/${paymentId}/bill`)
+      .then(r => setBill(r.data))
+      .catch(() => setError('Failed to load bill.'));
+  }, [paymentId]);
+
+  const handlePrint = () => window.print();
+
+  const handleExportPDF = async () => {
+    if (!bill || exporting) return;
+    setExporting(true);
+    try {
+      const { jsPDF } = await import('jspdf');
+      const doc = new jsPDF({ unit: 'mm', format: 'a4', orientation: 'portrait' });
+      const pageW = 190;
+      let y = 20;
+
+      const center = (text, size = 14, style = 'bold') => {
+        doc.setFontSize(size);
+        doc.setFont('helvetica', style);
+        const tw = doc.getTextWidth(text);
+        doc.text(text, (210 - tw) / 2, y);
+        y += size * 0.4;
+      };
+      const line = (text, size = 10, style = 'normal', x = 15) => {
+        doc.setFontSize(size);
+        doc.setFont('helvetica', style);
+        doc.text(text, x, y);
+        y += size * 0.45;
+      };
+      const row = (l, r, size = 10) => {
+        doc.setFontSize(size);
+        doc.setFont('helvetica', 'normal');
+        doc.text(l, 15, y);
+        doc.text(r, 200 - doc.getTextWidth(r), y);
+        y += size * 0.45;
+      };
+
+      center('SmartPark Garage', 18, 'bold');
+      center('Rubavu District, Western Province, Rwanda', 9, 'normal');
+      center('PAYMENT RECEIPT', 14, 'bold');
+      center(`Bill #${bill.PaymentNumber}`, 9, 'normal');
+      y += 4;
+      doc.line(15, y, 195, y);
+      y += 6;
+
+      doc.setFontSize(9);
+      doc.setFont('helvetica', 'bold');
+      doc.text('BILLED TO:', 15, y);
+      doc.setFont('helvetica', 'normal');
+      y += 5;
+      line(`Driver Phone: ${bill.DriverPhone}`, 10, 'normal', 15);
+      line(`Plate: ${bill.PlateNumber}`, 10, 'bold', 15);
+      line(`${bill.type} - ${bill.Model} (${bill.ManufacturingYear})`, 10, 'normal', 15);
+      y += 2;
+
+      doc.setFont('helvetica', 'bold');
+      doc.text('PAYMENT DETAILS:', 200 - doc.getTextWidth('PAYMENT DETAILS:'), y - 5);
+      doc.setFont('helvetica', 'normal');
+      row('Payment #:', `${bill.PaymentNumber}`, 10);
+      row('Service Date:', bill.ServiceDate?.split('T')[0] || '', 10);
+      row('Payment Date:', bill.PaymentDate?.split('T')[0] || '', 10);
+      y += 2;
+      doc.line(15, y, 195, y);
+      y += 6;
+
+      doc.setFontSize(10);
+      doc.setFont('helvetica', 'bold');
+      doc.text('Service Description', 15, y);
+      doc.text('Price (Rwf)', 200 - doc.getTextWidth('Price (Rwf)'), y);
+      y += 5;
+      doc.line(15, y, 195, y);
+      y += 3;
+      doc.setFont('helvetica', 'normal');
+      line(bill.ServiceName, 10, 'normal', 15);
+      doc.text(Number(bill.ServicePrice).toLocaleString(), 200 - doc.getTextWidth(Number(bill.ServicePrice).toLocaleString()), y - 10 + 10 * 0.45);
+      y += 2;
+      doc.line(15, y, 195, y);
+      y += 4;
+      doc.setFont('helvetica', 'bold');
+      doc.setFontSize(12);
+      doc.text('TOTAL AMOUNT PAID', 15, y);
+      const totalStr = `${Number(bill.AmountPaid).toLocaleString()} Rwf`;
+      doc.setTextColor(22, 163, 74);
+      doc.text(totalStr, 200 - doc.getTextWidth(totalStr), y);
+      doc.setTextColor(0, 0, 0);
+      y += 10;
+      doc.line(15, y, 195, y);
+      y += 6;
+
+      doc.setFontSize(10);
+      doc.setFont('helvetica', 'bold');
+      doc.text('Mechanic:', 15, y);
+      doc.setFont('helvetica', 'normal');
+      line(bill.MechanicName, 10, 'normal', 15);
+      y += 2;
+      doc.setFont('helvetica', 'bold');
+      doc.text('Received By:', 200 - doc.getTextWidth('Received By:'), y - 10);
+      doc.setTextColor(30, 64, 175);
+      doc.setFont('helvetica', 'bold');
+      doc.text(bill.ReceivedBy, 200 - doc.getTextWidth(bill.ReceivedBy), y - 5);
+      doc.setTextColor(0, 0, 0);
+      y += 10;
+      doc.line(140, y, 195, y);
+      y += 3;
+      doc.setFontSize(8);
+      doc.setTextColor(156, 163, 175);
+      doc.text('Authorized Signature', 200 - doc.getTextWidth('Authorized Signature'), y);
+
+      y = 275;
+      doc.setFontSize(8);
+      doc.setTextColor(156, 163, 175);
+      center('Thank you for choosing SmartPark Garage!', 9, 'normal');
+      center(`Record #${bill.RecordNumber}`, 8, 'normal');
+
+      doc.save(`SmartPark_Bill_${bill.PaymentNumber}.pdf`);
+    } catch (err) {
+      console.error('PDF export failed:', err);
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  if (error) return (
+    <div className="max-w-2xl mx-auto px-4 py-16 text-center">
+      <p className="text-red-600 mb-4">{error}</p>
+      <button onClick={onClose} className="text-blue-600 underline">Go back</button>
+    </div>
+  );
+
+  if (!bill) return (
+    <div className="flex items-center justify-center min-h-64">
+      <p className="text-gray-400">Loading bill...</p>
+    </div>
+  );
+
+  const fmt = n => Number(n).toLocaleString();
+
+  return (
+    <div className="max-w-2xl mx-auto px-4 py-8">
+      <div className="no-print flex gap-3 mb-6">
+        <button onClick={onClose} className="text-gray-600 hover:text-gray-800 border border-gray-300 rounded-lg px-4 py-2 text-sm cursor-pointer">
+          ← Back
+        </button>
+        <button onClick={handlePrint} className="bg-blue-700 hover:bg-blue-800 text-white rounded-lg px-4 py-2 text-sm font-medium cursor-pointer">
+          Print Bill
+        </button>
+        <button onClick={handleExportPDF} disabled={exporting} className="bg-green-700 hover:bg-green-800 disabled:opacity-60 text-white rounded-lg px-4 py-2 text-sm font-medium cursor-pointer">
+          {exporting ? 'Generating PDF...' : 'Export as PDF'}
+        </button>
+      </div>
+
+      <div ref={printRef} className="bg-white rounded-xl shadow-lg p-8 border border-gray-200">
+        <div className="text-center border-b pb-6 mb-6">
+          <h1 className="text-3xl font-bold text-blue-800">SmartPark Garage</h1>
+          <p className="text-gray-500 text-sm mt-1">Rubavu District, Western Province, Rwanda</p>
+          <h2 className="text-xl font-semibold text-gray-700 mt-4">PAYMENT RECEIPT</h2>
+          <p className="text-gray-400 text-sm">Bill #{bill.PaymentNumber}</p>
+        </div>
+
+        <div className="grid grid-cols-2 gap-6 mb-6 text-sm">
+          <div>
+            <p className="text-gray-500 font-medium mb-2">BILLED TO:</p>
+            <p className="font-medium">{bill.DriverPhone}</p>
+            <p className="text-gray-600">Plate: <span className="font-mono font-bold">{bill.PlateNumber}</span></p>
+            <p className="text-gray-600">{bill.type} - {bill.Model} ({bill.ManufacturingYear})</p>
+          </div>
+          <div className="text-right">
+            <p className="text-gray-500 font-medium mb-2">PAYMENT DETAILS:</p>
+            <p className="text-gray-600">Payment #: <span className="font-medium">{bill.PaymentNumber}</span></p>
+            <p className="text-gray-600">Service Date: <span className="font-medium">{bill.ServiceDate?.split('T')[0]}</span></p>
+            <p className="text-gray-600">Payment Date: <span className="font-medium">{bill.PaymentDate?.split('T')[0]}</span></p>
+          </div>
+        </div>
+
+        <table className="w-full text-sm mb-6">
+          <thead>
+            <tr className="bg-blue-50">
+              <th className="text-left px-4 py-3 font-semibold text-blue-800">Service Description</th>
+              <th className="text-right px-4 py-3 font-semibold text-blue-800">Price (Rwf)</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className="border-b">
+              <td className="px-4 py-4">{bill.ServiceName}</td>
+              <td className="px-4 py-4 text-right">{fmt(bill.ServicePrice)}</td>
+            </tr>
+          </tbody>
+          <tfoot>
+            <tr className="bg-gray-50">
+              <td className="px-4 py-3 font-bold text-gray-800">TOTAL AMOUNT PAID</td>
+              <td className="px-4 py-3 text-right font-bold text-green-700 text-lg">{fmt(bill.AmountPaid)} Rwf</td>
+            </tr>
+          </tfoot>
+        </table>
+
+        <div className="border-t pt-6 grid grid-cols-2 gap-6 text-sm">
+          <div>
+            <p className="text-gray-500 font-medium">Mechanic:</p>
+            <p className="font-medium mt-1">{bill.MechanicName}</p>
+          </div>
+          <div className="text-right">
+            <p className="text-gray-500 font-medium">Received By:</p>
+            <p className="font-bold mt-1 text-blue-700">{bill.ReceivedBy}</p>
+            <div className="mt-4 border-t border-gray-300 pt-2">
+              <p className="text-gray-400 text-xs">Authorized Signature</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="text-center mt-8 text-xs text-gray-400">
+          <p>Thank you for choosing SmartPark Garage!</p>
+          <p>Record #{bill.RecordNumber}</p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/projects/CRPMS-main/frontend-project/src/pages/Cars.jsx

@@ -0,0 +1,112 @@
+import { useState, useEffect } from 'react';
+import api from '../api/axios';
+
+const EMPTY = { PlateNumber: '', type: '', Model: '', ManufacturingYear: '', DriverPhone: '', MechanicName: '' };
+
+export default function Cars() {
+  const [form, setForm] = useState(EMPTY);
+  const [cars, setCars] = useState([]);
+  const [msg, setMsg] = useState({ text: '', type: '' });
+  const [loading, setLoading] = useState(false);
+
+  const fetchCars = () => api.get('/cars').then(r => setCars(r.data)).catch(() => {});
+
+  useEffect(() => { fetchCars(); }, []);
+
+  const flash = (text, type = 'success') => {
+    setMsg({ text, type });
+    setTimeout(() => setMsg({ text: '', type: '' }), 4000);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      await api.post('/cars', form);
+      flash('Car recorded successfully.');
+      setForm(EMPTY);
+      fetchCars();
+    } catch (err) {
+      flash(err.response?.data?.error || 'Failed to add car.', 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-8">
+      <h2 className="text-2xl font-bold text-blue-800 mb-6">Register Car</h2>
+
+      {msg.text && (
+        <div className={`mb-4 px-4 py-3 rounded-lg text-sm ${msg.type === 'error' ? 'bg-red-50 border border-red-300 text-red-700' : 'bg-green-50 border border-green-300 text-green-700'}`}>
+          {msg.text}
+        </div>
+      )}
+
+      <div className="bg-white rounded-xl shadow p-6 mb-8">
+        <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {[
+            { key: 'PlateNumber', label: 'Plate Number', placeholder: 'e.g. RAB 123 A' },
+            { key: 'type', label: 'Type', placeholder: 'e.g. Sedan, SUV' },
+            { key: 'Model', label: 'Model', placeholder: 'e.g. Toyota Corolla' },
+            { key: 'ManufacturingYear', label: 'Manufacturing Year', placeholder: 'e.g. 2020', type: 'number' },
+            { key: 'DriverPhone', label: 'Driver Phone', placeholder: 'e.g. 0788000000' },
+            { key: 'MechanicName', label: 'Mechanic Name', placeholder: 'e.g. Jean Pierre' },
+          ].map(f => (
+            <div key={f.key}>
+              <label className="block text-sm font-medium text-gray-700 mb-1">{f.label}</label>
+              <input
+                type={f.type || 'text'}
+                value={form[f.key]}
+                onChange={e => setForm({ ...form, [f.key]: e.target.value })}
+                placeholder={f.placeholder}
+                className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                required
+              />
+            </div>
+          ))}
+          <div className="md:col-span-2 lg:col-span-3 flex justify-end">
+            <button
+              type="submit"
+              disabled={loading}
+              className="bg-blue-700 hover:bg-blue-800 disabled:bg-blue-400 text-white font-semibold px-6 py-2 rounded-lg transition-colors"
+            >
+              {loading ? 'Saving...' : 'Register Car'}
+            </button>
+          </div>
+        </form>
+      </div>
+
+      <div className="bg-white rounded-xl shadow overflow-hidden">
+        <div className="px-6 py-4 border-b border-gray-100">
+          <h3 className="font-semibold text-gray-800">Registered Cars ({cars.length})</h3>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead className="bg-gray-50">
+              <tr>
+                {['Plate Number', 'Type', 'Model', 'Year', 'Driver Phone', 'Mechanic'].map(h => (
+                  <th key={h} className="text-left px-4 py-3 font-medium text-gray-600">{h}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100">
+              {cars.length === 0 ? (
+                <tr><td colSpan={6} className="text-center py-8 text-gray-400">No cars registered yet.</td></tr>
+              ) : cars.map(c => (
+                <tr key={c.PlateNumber} className="hover:bg-gray-50">
+                  <td className="px-4 py-3 font-mono font-medium text-blue-700">{c.PlateNumber}</td>
+                  <td className="px-4 py-3">{c.type}</td>
+                  <td className="px-4 py-3">{c.Model}</td>
+                  <td className="px-4 py-3">{c.ManufacturingYear}</td>
+                  <td className="px-4 py-3">{c.DriverPhone}</td>
+                  <td className="px-4 py-3">{c.MechanicName}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

package/projects/CRPMS-main/frontend-project/src/pages/Login.jsx

@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+export default function Login() {
+  const [form, setForm] = useState({ username: '', password: '' });
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { login } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    try {
+      await login(form.username, form.password);
+      navigate('/cars');
+    } catch (err) {
+      setError(err.response?.data?.error || 'Login failed. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-900 to-blue-700 flex items-center justify-center p-4">
+      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md p-8">
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold text-blue-800">SmartPark</h1>
+          <p className="text-gray-500 mt-1">Car Repair Payment Management System</p>
+        </div>
+
+        {error && (
+          <div className="bg-red-50 border border-red-300 text-red-700 rounded-lg px-4 py-3 mb-4 text-sm">
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-5">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Username</label>
+            <input
+              type="text"
+              value={form.username}
+              onChange={e => setForm({ ...form, username: e.target.value })}
+              className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="Enter username"
+              required
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
+            <input
+              type="password"
+              value={form.password}
+              onChange={e => setForm({ ...form, password: e.target.value })}
+              className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="Enter password"
+              required
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full bg-blue-700 hover:bg-blue-800 disabled:bg-blue-400 text-white font-semibold py-2.5 rounded-lg transition-colors"
+          >
+            {loading ? 'Signing in...' : 'Sign In'}
+          </button>
+        </form>
+
+        <p className="text-center text-xs text-gray-400 mt-6">
+          Default credentials: admin / Admin@1234
+        </p>
+      </div>
+    </div>
+  );
+}

package/projects/CRPMS-main/frontend-project/src/pages/Payments.jsx

@@ -0,0 +1,153 @@
+import { useState, useEffect } from 'react';
+import api from '../api/axios';
+import Bill from './Bill';
+
+const EMPTY = { AmountPaid: '', PaymentDate: '', RecordNumber: '' };
+
+export default function Payments() {
+  const [form, setForm] = useState(EMPTY);
+  const [payments, setPayments] = useState([]);
+  const [records, setRecords] = useState([]);
+  const [msg, setMsg] = useState({ text: '', type: '' });
+  const [loading, setLoading] = useState(false);
+  const [billId, setBillId] = useState(null);
+
+  const fetchAll = () => {
+    api.get('/payments').then(r => setPayments(r.data)).catch(() => {});
+    api.get('/service-records').then(r => setRecords(r.data)).catch(() => {});
+  };
+
+  useEffect(() => { fetchAll(); }, []);
+
+  const flash = (text, type = 'success') => {
+    setMsg({ text, type });
+    setTimeout(() => setMsg({ text: '', type: '' }), 4000);
+  };
+
+  const handleRecordChange = (e) => {
+    const rec = records.find(r => r.RecordNumber == e.target.value);
+    setForm({ ...form, RecordNumber: e.target.value, AmountPaid: rec ? rec.ServicePrice : '' });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      const res = await api.post('/payments', form);
+      flash('Payment recorded successfully.');
+      setBillId(res.data.PaymentNumber);
+      setForm(EMPTY);
+      fetchAll();
+    } catch (err) {
+      flash(err.response?.data?.error || 'Failed to record payment.', 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fmt = n => Number(n).toLocaleString() + ' Rwf';
+
+  if (billId) {
+    return <Bill paymentId={billId} onClose={() => setBillId(null)} />;
+  }
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-8">
+      <h2 className="text-2xl font-bold text-blue-800 mb-6">Record Payment</h2>
+
+      {msg.text && (
+        <div className={`mb-4 px-4 py-3 rounded-lg text-sm ${msg.type === 'error' ? 'bg-red-50 border border-red-300 text-red-700' : 'bg-green-50 border border-green-300 text-green-700'}`}>
+          {msg.text}
+        </div>
+      )}
+
+      <div className="bg-white rounded-xl shadow p-6 mb-8">
+        <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Service Record</label>
+            <select
+              value={form.RecordNumber}
+              onChange={handleRecordChange}
+              className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+              required
+            >
+              <option value="">-- Select Record --</option>
+              {records.map(r => (
+                <option key={r.RecordNumber} value={r.RecordNumber}>
+                  #{r.RecordNumber} - {r.PlateNumber} ({r.ServiceName})
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Amount Paid (Rwf)</label>
+            <input
+              type="number"
+              value={form.AmountPaid}
+              onChange={e => setForm({ ...form, AmountPaid: e.target.value })}
+              placeholder="Amount in Rwf"
+              min="0"
+              className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+              required
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Payment Date</label>
+            <input
+              type="date"
+              value={form.PaymentDate}
+              onChange={e => setForm({ ...form, PaymentDate: e.target.value })}
+              className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+              required
+            />
+          </div>
+          <div className="md:col-span-3 flex justify-end">
+            <button
+              type="submit"
+              disabled={loading}
+              className="bg-blue-700 hover:bg-blue-800 disabled:bg-blue-400 text-white font-semibold px-6 py-2 rounded-lg transition-colors"
+            >
+              {loading ? 'Saving...' : 'Record Payment'}
+            </button>
+          </div>
+        </form>
+      </div>
+
+      <div className="bg-white rounded-xl shadow overflow-hidden">
+        <div className="px-6 py-4 border-b border-gray-100">
+          <h3 className="font-semibold text-gray-800">Payment History ({payments.length})</h3>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead className="bg-gray-50">
+              <tr>
+                {['Pay#', 'Date', 'Plate', 'Service', 'Amount', 'Received By', 'Bill'].map(h => (
+                  <th key={h} className="text-left px-4 py-3 font-medium text-gray-600">{h}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100">
+              {payments.length === 0 ? (
+                <tr><td colSpan={7} className="text-center py-8 text-gray-400">No payments recorded yet.</td></tr>
+              ) : payments.map(p => (
+                <tr key={p.PaymentNumber} className="hover:bg-gray-50">
+                  <td className="px-4 py-3 font-medium">{p.PaymentNumber}</td>
+                  <td className="px-4 py-3">{p.PaymentDate?.split('T')[0]}</td>
+                  <td className="px-4 py-3 font-mono text-blue-700">{p.PlateNumber}</td>
+                  <td className="px-4 py-3">{p.ServiceName}</td>
+                  <td className="px-4 py-3 font-semibold text-green-700">{fmt(p.AmountPaid)}</td>
+                  <td className="px-4 py-3">{p.ReceivedBy}</td>
+                  <td className="px-4 py-3">
+                    <button onClick={() => setBillId(p.PaymentNumber)} className="text-blue-600 hover:text-blue-800 text-xs font-medium underline">
+                      View Bill
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}