create-myexam-app 1.0.21 → 1.0.22

package/projects/SRMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026(/frontend-project/src/pages/Products.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+
+var emptyProduct = { productCode: '', productName: '', quantitySold: '', unitPrice: '' };
+
+function Products(props) {
+  var productsState = useState([]);
+  var products = productsState[0];
+  var setProducts = productsState[1];
+  var formState = useState(emptyProduct);
+  var form = formState[0];
+  var setForm = formState[1];
+
+  var token = props.session ? props.session.token : '';
+  var headers = { Authorization: 'Bearer ' + token };
+
+  function load() {
+    axios.get(props.API + '/products', { headers: headers })
+      .then(function(res) {
+        setProducts(res.data);
+      })
+      .catch(function() {});
+  }
+
+  useEffect(function() { load(); }, []);
+
+  function submit() {
+    if (!form.productCode || !form.productName || !form.quantitySold || !form.unitPrice) {
+      props.setNotice('All fields are required');
+      return;
+    }
+    axios.post(props.API + '/products', {
+      productCode: form.productCode,
+      productName: form.productName,
+      quantitySold: Number(form.quantitySold),
+      unitPrice: Number(form.unitPrice)
+    }, { headers: headers })
+      .then(function() {
+        setForm(emptyProduct);
+        return load();
+      })
+      .then(function() {
+        props.setNotice('Product saved successfully');
+      })
+      .catch(function(err) {
+        var msg = 'Could not save';
+        if (err.response && err.response.data) {
+          msg = err.response.data.message || err.response.data.error || msg;
+        }
+        props.setNotice(msg);
+      });
+  }
+
+  return (
+    <main className="page">
+      <div className="page-title"><h2>Products</h2><p>Manage product records.</p></div>
+      <section className="form-grid four">
+        <input placeholder="Product Code" value={form.productCode} onChange={function(e) { setForm({ productCode: e.target.value, productName: form.productName, quantitySold: form.quantitySold, unitPrice: form.unitPrice }); }} />
+        <input placeholder="Product Name" value={form.productName} onChange={function(e) { setForm({ productCode: form.productCode, productName: e.target.value, quantitySold: form.quantitySold, unitPrice: form.unitPrice }); }} />
+        <input type="number" placeholder="Quantity Sold" value={form.quantitySold} onChange={function(e) { setForm({ productCode: form.productCode, productName: form.productName, quantitySold: e.target.value, unitPrice: form.unitPrice }); }} />
+        <input type="number" placeholder="Unit Price" value={form.unitPrice} onChange={function(e) { setForm({ productCode: form.productCode, productName: form.productName, quantitySold: form.quantitySold, unitPrice: e.target.value }); }} />
+        <button onClick={submit}>Submit Data</button>
+      </section>
+      <div className="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>Code</th><th>Name</th><th>Quantity Sold</th><th>Unit Price</th><th>Total</th>
+            </tr>
+          </thead>
+          <tbody>
+            {products.length === 0 ? (
+              <tr><td colSpan="5" style={{ textAlign: 'center', color: '#94a3b8', padding: 20 }}>No products found</td></tr>
+            ) : products.map(function(p) {
+              return (
+                <tr key={p._id}>
+                  <td>{p.productCode}</td><td>{p.productName}</td>
+                  <td>{p.quantitySold}</td><td>{p.unitPrice.toLocaleString()} FRW</td>
+                  <td>{(p.quantitySold * p.unitPrice).toLocaleString()} FRW</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </main>
+  );
+}
+
+export default Products;

package/projects/SRMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026(/frontend-project/src/pages/Register.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import axios from 'axios';
+
+var API = 'http://localhost:5000/api';
+
+function Register(props) {
+  var navigate = useNavigate();
+  var formState = useState({ username: '', password: '', confirmPassword: '' });
+  var form = formState[0];
+  var setForm = formState[1];
+  var errorState = useState('');
+  var error = errorState[0];
+  var setError = errorState[1];
+
+  function submit(e) {
+    e.preventDefault();
+    setError('');
+    if (!form.username || !form.password) {
+      setError('All fields are required');
+      return;
+    }
+    if (form.password !== form.confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+    if (form.password.length < 4) {
+      setError('Password must be at least 4 characters');
+      return;
+    }
+    axios.post(API + '/auth/register', {
+      username: form.username,
+      password: form.password
+    })
+      .then(function(res) {
+        props.onLogin(res.data);
+        navigate('/dashboard');
+      })
+      .catch(function(err) {
+        var msg = 'Registration failed';
+        if (err.response && err.response.data && err.response.data.message) {
+          msg = err.response.data.message;
+        }
+        setError(msg);
+      });
+  }
+
+  return (
+    <main className="auth-page">
+      <section className="auth-card">
+        <h1>Create Account</h1>
+        <form onSubmit={submit} className="auth-form">
+          {error && <p className="form-error">{error}</p>}
+          <input
+            placeholder="Username"
+            value={form.username}
+            onChange={function(e) { setForm({ username: e.target.value, password: form.password, confirmPassword: form.confirmPassword }); }}
+          />
+          <input
+            type="password"
+            placeholder="Password"
+            value={form.password}
+            onChange={function(e) { setForm({ username: form.username, password: e.target.value, confirmPassword: form.confirmPassword }); }}
+          />
+          <input
+            type="password"
+            placeholder="Confirm Password"
+            value={form.confirmPassword}
+            onChange={function(e) { setForm({ username: form.username, password: form.password, confirmPassword: e.target.value }); }}
+          />
+          <button type="submit">Register</button>
+          <div className="auth-links">
+            <Link to="/login">Back to Login</Link>
+          </div>
+        </form>
+      </section>
+    </main>
+  );
+}
+
+export default Register;

package/projects/SRMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026(/frontend-project/src/pages/Reports.jsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { useState } from 'react';
+import axios from 'axios';
+
+function Reports(props) {
+  var typeState = useState('daily');
+  var reportType = typeState[0];
+  var setReportType = typeState[1];
+  var dataState = useState(null);
+  var reportData = dataState[0];
+  var setReportData = dataState[1];
+  var loadingState = useState(false);
+  var loading = loadingState[0];
+  var setLoading = loadingState[1];
+
+  var now = new Date();
+  var dateStr = now.getFullYear() + '-' + (now.getMonth() + 1 < 10 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1) + '-' + (now.getDate() < 10 ? '0' + now.getDate() : now.getDate());
+  var monthStr = now.getFullYear() + '-' + (now.getMonth() + 1 < 10 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1);
+
+  var dateInputState = useState(dateStr);
+  var dateInput = dateInputState[0];
+  var setDateInput = dateInputState[1];
+  var monthInputState = useState(monthStr);
+  var monthInput = monthInputState[0];
+  var setMonthInput = monthInputState[1];
+
+  var token = props.session ? props.session.token : '';
+  var headers = { Authorization: 'Bearer ' + token };
+
+  function fetchReport() {
+    setLoading(true);
+    setReportData(null);
+
+    var url;
+    var params;
+    if (reportType === 'daily') {
+      url = props.API + '/reports/daily';
+      params = { date: dateInput };
+    } else if (reportType === 'weekly') {
+      url = props.API + '/reports/weekly';
+      params = { date: dateInput };
+    } else {
+      url = props.API + '/reports/monthly';
+      var parts = monthInput.split('-');
+      params = { year: parts[0], month: parts[1] };
+    }
+
+    axios.get(url, { headers: headers, params: params })
+      .then(function(res) {
+        setReportData(res.data);
+      })
+      .catch(function(err) {
+        console.error('Report error:', err);
+      })
+      .then(function() {
+        setLoading(false);
+      });
+  }
+
+  function dateText(d) {
+    return d ? new Date(d).toLocaleDateString() : '-';
+  }
+
+  var types = [
+    { key: 'daily', label: 'Daily' },
+    { key: 'weekly', label: 'Weekly' },
+    { key: 'monthly', label: 'Monthly' },
+  ];
+
+  return (
+    <main className="page">
+      <div className="page-title"><h2>Reports</h2><p>Generate sales reports.</p></div>
+
+      <section className="report-filters">
+        {types.map(function(t) {
+          return React.createElement('button', {
+            key: t.key,
+            onClick: function() { setReportType(t.key); },
+            style: {
+              background: reportType === t.key ? '#1E3A8A' : '#e2e8f0',
+              color: reportType === t.key ? 'white' : '#475569'
+            }
+          }, t.label);
+        })}
+        {(reportType === 'daily' || reportType === 'weekly') ? React.createElement('input', { type: 'date', value: dateInput, onChange: function(e) { setDateInput(e.target.value); } }) : null}
+        {reportType === 'monthly' ? React.createElement('input', { type: 'month', value: monthInput, onChange: function(e) { setMonthInput(e.target.value); } }) : null}
+        <button onClick={fetchReport} disabled={loading}>{loading ? 'Generating...' : 'Generate Report'}</button>
+        {reportData ? React.createElement('button', { className: 'no-print', onClick: function() { window.print(); } }, '🖨️ Print') : null}
+      </section>
+
+      {reportData ? (
+        <div>
+          <section className="report-summary">
+            <div className="report-stat">
+              <span>Total Transactions</span>
+              <strong>{reportData.totalTransactions}</strong>
+            </div>
+            <div className="report-stat">
+              <span>Total Revenue</span>
+              <strong>{reportData.totalRevenue.toLocaleString()} FRW</strong>
+            </div>
+            <div className="report-stat">
+              <span>Average per Sale</span>
+              <strong>{reportData.totalTransactions > 0 ? (reportData.totalRevenue / reportData.totalTransactions).toLocaleString() : '0'} FRW</strong>
+            </div>
+          </section>
+
+          <div className="table-wrap">
+            <table>
+              <thead>
+                <tr>
+                  <th>Invoice</th><th>Date</th><th>Customer</th><th>Payment</th><th>Amount</th>
+                </tr>
+              </thead>
+              <tbody>
+                {reportData.sales.length === 0 ? (
+                  <tr><td colSpan="5" style={{ textAlign: 'center', color: '#94a3b8', padding: 20 }}>No sales found</td></tr>
+                ) : reportData.sales.map(function(s) {
+                  return (
+                    <tr key={s._id}>
+                      <td>{s.invoiceNumber}</td>
+                      <td>{dateText(s.salesDate)}</td>
+                      <td>{s.customer ? s.customer.firstName + ' ' + s.customer.lastName : 'N/A'}</td>
+                      <td>{s.paymentMethod}</td>
+                      <td>{s.totalAmountPaid.toLocaleString()} FRW</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      ) : null}
+    </main>
+  );
+}
+
+export default Reports;

package/projects/SRMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026(/frontend-project/src/pages/Sales.jsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+
+var emptySale = { invoiceNumber: '', salesDate: '', paymentMethod: 'Cash', totalAmountPaid: '', customer: '' };
+
+function Sales(props) {
+  var salesState = useState([]);
+  var sales = salesState[0];
+  var setSales = salesState[1];
+  var customersState = useState([]);
+  var customers = customersState[0];
+  var setCustomers = customersState[1];
+  var formState = useState(emptySale);
+  var form = formState[0];
+  var setForm = formState[1];
+  var editIdState = useState('');
+  var editId = editIdState[0];
+  var setEditId = editIdState[1];
+
+  var token = props.session ? props.session.token : '';
+  var headers = { Authorization: 'Bearer ' + token };
+
+  function load() {
+    Promise.all([
+      axios.get(props.API + '/sales', { headers: headers }),
+      axios.get(props.API + '/customers', { headers: headers })
+    ])
+      .then(function(results) {
+        setSales(results[0].data);
+        setCustomers(results[1].data);
+      })
+      .catch(function() {});
+  }
+
+  useEffect(function() { load(); }, []);
+
+  function submit() {
+    if (!form.invoiceNumber || !form.salesDate || !form.paymentMethod || !form.totalAmountPaid || !form.customer) {
+      props.setNotice('All fields are required');
+      return;
+    }
+    var payload = {
+      invoiceNumber: form.invoiceNumber,
+      salesDate: form.salesDate,
+      paymentMethod: form.paymentMethod,
+      totalAmountPaid: Number(form.totalAmountPaid),
+      customer: form.customer
+    };
+
+    var request;
+    if (editId) {
+      request = axios.put(props.API + '/sales/' + editId, payload, { headers: headers });
+    } else {
+      request = axios.post(props.API + '/sales', payload, { headers: headers });
+    }
+
+    request
+      .then(function() {
+        setForm(emptySale);
+        setEditId('');
+        props.setNotice(editId ? 'Sale updated successfully' : 'Sale created successfully');
+        return load();
+      })
+      .catch(function(err) {
+        var msg = 'Operation failed';
+        if (err.response && err.response.data) {
+          msg = err.response.data.message || err.response.data.error || msg;
+        }
+        props.setNotice(msg);
+      });
+  }
+
+  function edit(sale) {
+    setEditId(sale._id);
+    setForm({
+      invoiceNumber: sale.invoiceNumber,
+      salesDate: sale.salesDate ? sale.salesDate.slice(0, 10) : '',
+      paymentMethod: sale.paymentMethod,
+      totalAmountPaid: String(sale.totalAmountPaid),
+      customer: sale.customer ? sale.customer._id : ''
+    });
+  }
+
+  function remove(id) {
+    if (!confirm('Delete this sale?')) return;
+    axios.delete(props.API + '/sales/' + id, { headers: headers })
+      .then(function() {
+        return load();
+      })
+      .then(function() {
+        props.setNotice('Sale deleted successfully');
+      })
+      .catch(function(err) {
+        props.setNotice(err.response && err.response.data ? err.response.data.message : 'Could not delete');
+      });
+  }
+
+  function dateText(d) {
+    return d ? new Date(d).toLocaleDateString() : '-';
+  }
+
+  return (
+    <main className="page">
+      <div className="page-title"><h2>Sales</h2><p>{editId ? 'Edit' : 'Add'} sale record.</p></div>
+      <section className="form-grid four">
+        <input placeholder="Invoice Number" value={form.invoiceNumber} onChange={function(e) { setForm({ invoiceNumber: e.target.value, salesDate: form.salesDate, paymentMethod: form.paymentMethod, totalAmountPaid: form.totalAmountPaid, customer: form.customer }); }} />
+        <input type="date" value={form.salesDate} onChange={function(e) { setForm({ invoiceNumber: form.invoiceNumber, salesDate: e.target.value, paymentMethod: form.paymentMethod, totalAmountPaid: form.totalAmountPaid, customer: form.customer }); }} />
+        <select value={form.paymentMethod} onChange={function(e) { setForm({ invoiceNumber: form.invoiceNumber, salesDate: form.salesDate, paymentMethod: e.target.value, totalAmountPaid: form.totalAmountPaid, customer: form.customer }); }}>
+          <option>Cash</option><option>Credit Card</option><option>Mobile Money</option><option>Bank Transfer</option>
+        </select>
+        <input type="number" placeholder="Total Amount" value={form.totalAmountPaid} onChange={function(e) { setForm({ invoiceNumber: form.invoiceNumber, salesDate: form.salesDate, paymentMethod: form.paymentMethod, totalAmountPaid: e.target.value, customer: form.customer }); }} />
+        <select value={form.customer} onChange={function(e) { setForm({ invoiceNumber: form.invoiceNumber, salesDate: form.salesDate, paymentMethod: form.paymentMethod, totalAmountPaid: form.totalAmountPaid, customer: e.target.value }); }}>
+          <option value="">Select Customer</option>
+          {customers.map(function(c) { return React.createElement('option', { key: c._id, value: c._id }, c.firstName + ' ' + c.lastName + ' (' + c.customerNumber + ')'); })}
+        </select>
+        <button onClick={submit}>{editId ? 'Update' : 'Submit Data'}</button>
+        {editId ? React.createElement('button', { className: 'danger', onClick: function() { setForm(emptySale); setEditId(''); } }, 'Cancel') : null}
+      </section>
+      <div className="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>Invoice</th><th>Date</th><th>Customer</th><th>Payment</th><th>Amount</th><th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {sales.length === 0 ? (
+              <tr><td colSpan="6" style={{ textAlign: 'center', color: '#94a3b8', padding: 20 }}>No sales found</td></tr>
+            ) : sales.map(function(s) {
+              return (
+                <tr key={s._id}>
+                  <td>{s.invoiceNumber}</td>
+                  <td>{dateText(s.salesDate)}</td>
+                  <td>{s.customer ? s.customer.firstName + ' ' + s.customer.lastName : 'N/A'}</td>
+                  <td>{s.paymentMethod}</td>
+                  <td>{s.totalAmountPaid.toLocaleString()} FRW</td>
+                  <td>
+                    <div className="actions">
+                      <button onClick={function() { edit(s); }}>Edit</button>
+                      <button className="danger" onClick={function() { remove(s._id); }}>Delete</button>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </main>
+  );
+}
+
+export default Sales;

package/projects/SRMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026(/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,
+  },
+})