create-expresss 1.0.0

package/template/srms/Sangano_Ineza_Davina_National_Practical_Exam_2026/frontend-project/src/pages/Customer.jsx

@@ -0,0 +1,159 @@
+import { useState, useEffect } from 'react';
+import API from '../api/axios';
+
+const initialForm = {
+  customerNumber: '',
+  firstName: '',
+  lastName: '',
+  telephone: '',
+  address: '',
+};
+
+export default function Customer() {
+  const [form, setForm] = useState(initialForm);
+  const [customers, setCustomers] = useState([]);
+  const [message, setMessage] = useState({ type: '', text: '' });
+  const [loading, setLoading] = useState(false);
+
+  const fetchCustomers = async () => {
+    try {
+      const { data } = await API.get('/customers');
+      setCustomers(data);
+    } catch {
+      setMessage({ type: 'error', text: 'Failed to load customers.' });
+    }
+  };
+
+  useEffect(() => {
+    fetchCustomers();
+  }, []);
+
+  const handleChange = (e) => {
+    setForm({ ...form, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setMessage({ type: '', text: '' });
+
+    try {
+      await API.post('/customers', form);
+      setMessage({ type: 'success', text: 'Customer added successfully!' });
+      setForm(initialForm);
+      fetchCustomers();
+    } catch (err) {
+      setMessage({
+        type: 'error',
+        text: err.response?.data?.message || 'Failed to add customer.',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold text-slate-800">Customer Management</h2>
+        <p className="text-slate-500">Add new customer records (Insert operation)</p>
+      </div>
+
+      {message.text && (
+        <div
+          className={`rounded-lg px-4 py-3 text-sm ${
+            message.type === 'success'
+              ? 'bg-green-50 text-green-700'
+              : 'bg-red-50 text-red-600'
+          }`}
+        >
+          {message.text}
+        </div>
+      )}
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <form onSubmit={handleSubmit} className="rounded-xl bg-white p-6 shadow-md">
+          <h3 className="mb-4 text-lg font-semibold text-slate-700">Add Customer</h3>
+          <div className="grid gap-4 sm:grid-cols-2">
+            {[
+              { name: 'customerNumber', label: 'Customer Number', placeholder: 'C001' },
+              { name: 'firstName', label: 'First Name', placeholder: 'Jean' },
+              { name: 'lastName', label: 'Last Name', placeholder: 'Mukiza' },
+              { name: 'telephone', label: 'Telephone', placeholder: '0781234567' },
+            ].map((field) => (
+              <div key={field.name}>
+                <label className="mb-1 block text-sm font-medium text-slate-600">
+                  {field.label}
+                </label>
+                <input
+                  name={field.name}
+                  value={form[field.name]}
+                  onChange={handleChange}
+                  required
+                  placeholder={field.placeholder}
+                  className="w-full rounded-lg border border-slate-300 px-3 py-2 focus:border-violet-500 focus:outline-none focus:ring-2 focus:ring-violet-200"
+                />
+              </div>
+            ))}
+            <div className="sm:col-span-2">
+              <label className="mb-1 block text-sm font-medium text-slate-600">Address</label>
+              <input
+                name="address"
+                value={form.address}
+                onChange={handleChange}
+                required
+                placeholder="Huye, Southern Province"
+                className="w-full rounded-lg border border-slate-300 px-3 py-2 focus:border-violet-500 focus:outline-none focus:ring-2 focus:ring-violet-200"
+              />
+            </div>
+          </div>
+          <button
+            type="submit"
+            disabled={loading}
+            className="mt-5 w-full rounded-lg bg-indigo-700 py-2.5 font-medium text-white hover:bg-indigo-800 disabled:opacity-60 sm:w-auto sm:px-8"
+          >
+            {loading ? 'Saving...' : 'Add Customer'}
+          </button>
+        </form>
+
+        <div className="rounded-xl bg-white p-6 shadow-md">
+          <h3 className="mb-4 text-lg font-semibold text-slate-700">
+            Registered Customers ({customers.length})
+          </h3>
+          <div className="max-h-96 overflow-auto">
+            <table className="w-full text-left text-sm">
+              <thead className="sticky top-0 bg-slate-50">
+                <tr>
+                  <th className="px-3 py-2 font-semibold text-slate-600">No.</th>
+                  <th className="px-3 py-2 font-semibold text-slate-600">Name</th>
+                  <th className="px-3 py-2 font-semibold text-slate-600">Phone</th>
+                  <th className="px-3 py-2 font-semibold text-slate-600">Address</th>
+                </tr>
+              </thead>
+              <tbody>
+                {customers.map((c) => (
+                  <tr key={c.customerNumber} className="border-t border-slate-100">
+                    <td className="px-3 py-2">{c.customerNumber}</td>
+                    <td className="px-3 py-2">
+                      {c.firstName} {c.lastName}
+                    </td>
+                    <td className="px-3 py-2">{c.telephone}</td>
+                    <td className="px-3 py-2">{c.address}</td>
+                  </tr>
+                ))}
+                {customers.length === 0 && (
+                  <tr>
+                    <td colSpan="3" className="px-3 py-6 text-center text-slate-400">
+                      No customers yet
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/template/srms/Sangano_Ineza_Davina_National_Practical_Exam_2026/frontend-project/src/pages/Login.jsx

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+export default function Login() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  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(username, password);
+      navigate('/customers');
+    } catch (err) {
+      setError(err.response?.data?.message || 'Login failed. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-blue-800 to-blue-600 px-4">
+      <div className="w-full max-w-md rounded-2xl bg-white p-8 shadow-2xl">
+        <div className="mb-8 text-center">
+          <h1 className="text-2xl font-bold text-blue-800">SalesPro Ltd</h1>
+          <p className="mt-1 text-slate-500">Sales Record Management System</p>
+          <p className="mt-2 text-xs text-slate-400">Huye District, Southern Province, Rwanda</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-5">
+          {error && (
+            <div className="rounded-lg bg-red-50 px-4 py-3 text-sm text-red-600">{error}</div>
+          )}
+
+          <div>
+            <label htmlFor="username" className="mb-1 block text-sm font-medium text-slate-700">
+              Username
+            </label>
+            <input
+              id="username"
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              required
+              className="w-full rounded-lg border border-slate-300 px-4 py-2.5 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
+              placeholder="Enter username"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="password" className="mb-1 block text-sm font-medium text-slate-700">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              className="w-full rounded-lg border border-slate-300 px-4 py-2.5 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
+              placeholder="Enter password"
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full rounded-lg bg-blue-700 py-3 font-semibold text-white transition hover:bg-blue-800 disabled:opacity-60"
+          >
+            {loading ? 'Signing in...' : 'Login'}
+          </button>
+        </form>
+
+        <p className="mt-6 text-center text-sm text-slate-500">
+          Don&apos;t have an account?{' '}
+          <Link to="/signup" className="font-medium text-blue-700 hover:underline">
+            Sign Up
+          </Link>
+        </p>
+
+        <p className="mt-3 text-center text-xs text-slate-400">
+          Default: admin / admin123
+        </p>
+      </div>
+    </div>
+  );
+}

package/template/srms/Sangano_Ineza_Davina_National_Practical_Exam_2026/frontend-project/src/pages/Product.jsx

@@ -0,0 +1,152 @@
+import { useState, useEffect } from 'react';
+import API from '../api/axios';
+
+const initialForm = {
+  productCode: '',
+  productName: '',
+  quantitySold: '',
+  unitPrice: '',
+};
+
+export default function Product() {
+  const [form, setForm] = useState(initialForm);
+  const [products, setProducts] = useState([]);
+  const [message, setMessage] = useState({ type: '', text: '' });
+  const [loading, setLoading] = useState(false);
+
+  const fetchProducts = async () => {
+    try {
+      const { data } = await API.get('/products');
+      setProducts(data);
+    } catch {
+      setMessage({ type: 'error', text: 'Failed to load products.' });
+    }
+  };
+
+  useEffect(() => {
+    fetchProducts();
+  }, []);
+
+  const handleChange = (e) => {
+    setForm({ ...form, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setMessage({ type: '', text: '' });
+
+    try {
+      await API.post('/products', {
+        ...form,
+        quantitySold: parseInt(form.quantitySold, 10) || 0,
+        unitPrice: parseFloat(form.unitPrice),
+      });
+      setMessage({ type: 'success', text: 'Product added successfully!' });
+      setForm(initialForm);
+      fetchProducts();
+    } catch (err) {
+      setMessage({
+        type: 'error',
+        text: err.response?.data?.message || 'Failed to add product.',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold text-slate-800">Product Management</h2>
+        <p className="text-slate-500">Add new product records (Insert operation)</p>
+      </div>
+
+      {message.text && (
+        <div
+          className={`rounded-lg px-4 py-3 text-sm ${
+            message.type === 'success'
+              ? 'bg-green-50 text-green-700'
+              : 'bg-red-50 text-red-600'
+          }`}
+        >
+          {message.text}
+        </div>
+      )}
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <form onSubmit={handleSubmit} className="rounded-xl bg-white p-6 shadow-md">
+          <h3 className="mb-4 text-lg font-semibold text-slate-700">Add Product</h3>
+          <div className="grid gap-4 sm:grid-cols-2">
+            {[
+              { name: 'productCode', label: 'Product Code', placeholder: 'P001', type: 'text' },
+              { name: 'productName', label: 'Product Name', placeholder: 'Laptop HP', type: 'text' },
+              { name: 'quantitySold', label: 'Quantity Sold', placeholder: '0', type: 'number' },
+              { name: 'unitPrice', label: 'Unit Price (RWF)', placeholder: '500000', type: 'number' },
+            ].map((field) => (
+              <div key={field.name}>
+                <label className="mb-1 block text-sm font-medium text-slate-600">
+                  {field.label}
+                </label>
+                <input
+                  name={field.name}
+                  type={field.type}
+                  value={form[field.name]}
+                  onChange={handleChange}
+                  required
+                  min={field.type === 'number' ? 0 : undefined}
+                  step={field.name === 'unitPrice' ? '0.01' : '1'}
+                  placeholder={field.placeholder}
+                  className="w-full rounded-lg border border-slate-300 px-3 py-2 focus:border-violet-500 focus:outline-none focus:ring-2 focus:ring-violet-200"
+                />
+              </div>
+            ))}
+          </div>
+          <button
+            type="submit"
+            disabled={loading}
+            className="mt-5 w-full rounded-lg bg-indigo-700 py-2.5 font-medium text-white hover:bg-indigo-800 disabled:opacity-60 sm:w-auto sm:px-8"
+          >
+            {loading ? 'Saving...' : 'Add Product'}
+          </button>
+        </form>
+
+        <div className="rounded-xl bg-white p-6 shadow-md">
+          <h3 className="mb-4 text-lg font-semibold text-slate-700">
+            Product Catalog ({products.length})
+          </h3>
+          <div className="max-h-96 overflow-auto">
+            <table className="w-full text-left text-sm">
+              <thead className="sticky top-0 bg-slate-50">
+                <tr>
+                  <th className="px-3 py-2 font-semibold text-slate-600">Code</th>
+                  <th className="px-3 py-2 font-semibold text-slate-600">Name</th>
+                  <th className="px-3 py-2 font-semibold text-slate-600">Qty</th>
+                  <th className="px-3 py-2 font-semibold text-slate-600">Price</th>
+                </tr>
+              </thead>
+              <tbody>
+                {products.map((p) => (
+                  <tr key={p.productCode} className="border-t border-slate-100">
+                    <td className="px-3 py-2">{p.productCode}</td>
+                    <td className="px-3 py-2">{p.productName}</td>
+                    <td className="px-3 py-2">{p.quantitySold}</td>
+                    <td className="px-3 py-2">{Number(p.unitPrice).toLocaleString()} RWF</td>
+                  </tr>
+                ))}
+                {products.length === 0 && (
+                  <tr>
+                    <td colSpan="4" className="px-3 py-6 text-center text-slate-400">
+                      No products yet
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/template/srms/Sangano_Ineza_Davina_National_Practical_Exam_2026/frontend-project/src/pages/Reports.jsx

@@ -0,0 +1,177 @@
+import { useState } from 'react';
+import API from '../api/axios';
+
+const periods = [
+  { key: 'daily', label: 'Daily Report' },
+  { key: 'weekly', label: 'Weekly Report' },
+  { key: 'monthly', label: 'Monthly Report' },
+];
+
+export default function Reports() {
+  const [activePeriod, setActivePeriod] = useState('daily');
+  const [report, setReport] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const generateReport = async (period) => {
+    setActivePeriod(period);
+    setLoading(true);
+    setError('');
+
+    try {
+      const { data } = await API.get(`/reports/${period}`);
+      setReport(data);
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to generate report.');
+      setReport(null);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold text-slate-800">Sales Reports</h2>
+        <p className="text-slate-500">Generate daily, weekly and monthly reports</p>
+      </div>
+
+      <div className="flex flex-wrap gap-3">
+        {periods.map((p) => (
+          <button
+            key={p.key}
+            type="button"
+            onClick={() => generateReport(p.key)}
+            disabled={loading}
+            className={`rounded-lg px-5 py-2.5 font-medium transition ${
+              activePeriod === p.key && report
+                ? 'bg-blue-700 text-white'
+                : 'bg-white text-slate-700 shadow hover:bg-blue-50'
+            } disabled:opacity-60`}
+          >
+            {p.label}
+          </button>
+        ))}
+      </div>
+
+      {loading && (
+        <div className="rounded-xl bg-white p-8 text-center shadow-md">
+          <p className="text-slate-500">Generating report...</p>
+        </div>
+      )}
+
+      {error && (
+        <div className="rounded-lg bg-red-50 px-4 py-3 text-sm text-red-600">{error}</div>
+      )}
+
+      {report && !loading && (
+        <div className="space-y-6">
+          <div className="rounded-xl bg-white p-6 shadow-md">
+            <h3 className="text-lg font-semibold capitalize text-slate-800">
+              {report.period} Report Summary
+            </h3>
+            <p className="text-sm text-slate-500">
+              Period: {report.dateRange.startDate} to {report.dateRange.endDate}
+            </p>
+            <div className="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+              {[
+                { label: 'New Customers', value: report.summary.customers },
+                { label: 'New Products', value: report.summary.products },
+                { label: 'Total Sales', value: report.summary.totalSales },
+                {
+                  label: 'Total Revenue',
+                  value: `${Number(report.summary.totalRevenue).toLocaleString()} RWF`,
+                },
+              ].map((item) => (
+                <div key={item.label} className="rounded-lg bg-blue-50 p-4">
+                  <p className="text-sm text-blue-600">{item.label}</p>
+                  <p className="text-2xl font-bold text-blue-900">{item.value}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <ReportTable
+            title={`Customers (${report.customers.length})`}
+            headers={['No.', 'First Name', 'Last Name', 'Telephone', 'Address']}
+            rows={report.customers.map((c) => [
+              c.customerNumber,
+              c.firstName,
+              c.lastName,
+              c.telephone,
+              c.address,
+            ])}
+          />
+
+          <ReportTable
+            title={`Products (${report.products.length})`}
+            headers={['Code', 'Name', 'Qty Sold', 'Unit Price']}
+            rows={report.products.map((p) => [
+              p.productCode,
+              p.productName,
+              p.quantitySold,
+              `${Number(p.unitPrice).toLocaleString()} RWF`,
+            ])}
+          />
+
+          <ReportTable
+            title={`Sales Transactions (${report.sales.length})`}
+            headers={['Invoice', 'Date', 'Customer', 'Product', 'Qty', 'Payment', 'Amount']}
+            rows={report.sales.map((s) => [
+              s.invoiceNumber,
+              s.salesDate.split('T')[0],
+              `${s.firstName} ${s.lastName}`,
+              s.productName,
+              s.quantity,
+              s.paymentMethod,
+              `${Number(s.totalAmountPaid).toLocaleString()} RWF`,
+            ])}
+          />
+        </div>
+      )}
+
+      {!report && !loading && !error && (
+        <div className="rounded-xl bg-white p-8 text-center shadow-md">
+          <p className="text-slate-500">Select a report period to generate results</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ReportTable({ title, headers, rows }) {
+  return (
+    <div className="overflow-x-auto rounded-xl bg-white p-6 shadow-md">
+      <h3 className="mb-4 text-lg font-semibold text-slate-700">{title}</h3>
+      <table className="w-full min-w-500px text-left text-sm">
+        <thead>
+          <tr className="border-b border-slate-200 bg-slate-50">
+            {headers.map((h) => (
+              <th key={h} className="px-3 py-2 font-semibold text-slate-600">
+                {h}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, i) => (
+            <tr key={i} className="border-t border-slate-100">
+              {row.map((cell, j) => (
+                <td key={j} className="px-3 py-2">
+                  {cell}
+                </td>
+              ))}
+            </tr>
+          ))}
+          {rows.length === 0 && (
+            <tr>
+              <td colSpan={headers.length} className="px-3 py-6 text-center text-slate-400">
+                No records for this period
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}