create-myexam-app 1.0.21 → 1.0.22

package/projects/SRMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026(/frontend-project/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "srm-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.6.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.0",
+    "vite": "^5.0.4"
+  }
+}

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import { useEffect, useState } from 'react';
+import { BrowserRouter, Link, Navigate, NavLink, Route, Routes, useNavigate } from 'react-router-dom';
+import axios from 'axios';
+import Login from './pages/Login';
+import Register from './pages/Register';
+import Dashboard from './pages/Dashboard';
+import Customers from './pages/Customers';
+import Products from './pages/Products';
+import Sales from './pages/Sales';
+import Reports from './pages/Reports';
+
+var API = 'http://localhost:5000/api';
+
+function App() {
+  var sessionState = useState(function() {
+    var stored = localStorage.getItem('srmsSession');
+    return stored ? JSON.parse(stored) : null;
+  });
+  var session = sessionState[0];
+  var setSession = sessionState[1];
+  var noticeState = useState('');
+  var notice = noticeState[0];
+  var setNotice = noticeState[1];
+
+  function saveSession(data) {
+    localStorage.setItem('srmsSession', JSON.stringify(data));
+    setSession(data);
+  }
+
+  function logout() {
+    localStorage.removeItem('srmsSession');
+    setSession(null);
+  }
+
+  return React.createElement('div', null,
+    session && React.createElement(TopNav, { user: session.user, onLogout: logout }),
+    notice && React.createElement('div', { className: 'notice', onClick: function() { setNotice(''); } }, notice),
+    React.createElement(Routes, null,
+      React.createElement(Route, { path: '/', element: session ? React.createElement(Navigate, { to: '/dashboard' }) : React.createElement(Login, { onLogin: saveSession }) }),
+      React.createElement(Route, { path: '/login', element: React.createElement(Login, { onLogin: saveSession }) }),
+      React.createElement(Route, { path: '/register', element: React.createElement(Register, { onLogin: saveSession }) }),
+      React.createElement(Route, { path: '/dashboard', element: React.createElement(Protected, { session: session }, React.createElement(Dashboard, { API: API })) }),
+      React.createElement(Route, { path: '/customers', element: React.createElement(Protected, { session: session }, React.createElement(Customers, { API: API, session: session, setNotice: setNotice })) }),
+      React.createElement(Route, { path: '/products', element: React.createElement(Protected, { session: session }, React.createElement(Products, { API: API, session: session, setNotice: setNotice })) }),
+      React.createElement(Route, { path: '/sales', element: React.createElement(Protected, { session: session }, React.createElement(Sales, { API: API, session: session, setNotice: setNotice })) }),
+      React.createElement(Route, { path: '/reports', element: React.createElement(Protected, { session: session }, React.createElement(Reports, { API: API, session: session, setNotice: setNotice })) }),
+      React.createElement(Route, { path: '*', element: React.createElement(Navigate, { to: session ? '/dashboard' : '/login' }) })
+    )
+  );
+}
+
+function Protected(props) {
+  return props.session ? props.children : React.createElement(Navigate, { to: '/login' });
+}
+
+function TopNav(props) {
+  return React.createElement('header', { className: 'top-nav no-print' },
+    React.createElement('div', null,
+      React.createElement('h1', null, 'SRMS'),
+      React.createElement('p', null, 'Sales Record Management System')
+    ),
+    React.createElement('nav', null,
+      React.createElement(NavLink, { to: '/dashboard' }, 'Dashboard'),
+      React.createElement(NavLink, { to: '/customers' }, 'Customers'),
+      React.createElement(NavLink, { to: '/products' }, 'Products'),
+      React.createElement(NavLink, { to: '/sales' }, 'Sales'),
+      React.createElement(NavLink, { to: '/reports' }, 'Reports')
+    ),
+    React.createElement('div', { className: 'profile' },
+      React.createElement('span', null, props.user ? props.user.username : ''),
+      React.createElement('button', { onClick: props.onLogout }, 'Logout')
+    )
+  );
+}
+
+export default App;

package/projects/SRMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026(/frontend-project/src/index.css

@@ -0,0 +1,333 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: #F8FAFC;
+  color: #1e293b;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 14px;
+}
+
+button, input, select {
+  font: inherit;
+}
+
+button {
+  background: #1E3A8A;
+  border: 0;
+  border-radius: 4px;
+  color: white;
+  cursor: pointer;
+  padding: 8px 11px;
+  transition: background 0.2s;
+}
+
+button:hover {
+  background: #1a3378;
+}
+
+.danger {
+  background: #dc2626;
+}
+
+.danger:hover {
+  background: #b91c1c;
+}
+
+@media print {
+  .no-print { display: none !important; }
+}
+
+.top-nav {
+  align-items: center;
+  background: white;
+  border-bottom: 1px solid #e2e8f0;
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  padding: 10px 18px;
+}
+
+.top-nav h1, .top-nav p {
+  margin: 0;
+}
+
+.top-nav h1 {
+  font-size: 18px;
+  color: #1E3A8A;
+}
+
+.top-nav p {
+  color: #64748b;
+  font-size: 12px;
+}
+
+.top-nav nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  justify-content: center;
+}
+
+.top-nav a {
+  border-radius: 4px;
+  color: #475569;
+  font-size: 13px;
+  padding: 7px 8px;
+  text-decoration: none;
+}
+
+.top-nav a.active, .top-nav a:hover {
+  background: #e8edf5;
+  color: #1E3A8A;
+}
+
+.profile {
+  align-items: center;
+  display: flex;
+  font-size: 13px;
+  gap: 8px;
+  white-space: nowrap;
+}
+
+.notice {
+  background: #1E3A8A;
+  border-radius: 4px;
+  color: white;
+  cursor: pointer;
+  margin: 10px auto 0;
+  max-width: 1100px;
+  padding: 9px 12px;
+}
+
+.page {
+  margin: 0 auto;
+  max-width: 1100px;
+  padding: 16px;
+}
+
+.page-title {
+  margin-bottom: 10px;
+}
+
+.page-title h2 {
+  font-size: 20px;
+  margin: 0;
+  color: #1e293b;
+}
+
+.page-title p {
+  color: #64748b;
+  font-size: 13px;
+  margin: 3px 0 0;
+}
+
+.cards-grid {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.card {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  padding: 12px;
+}
+
+.card span {
+  color: #64748b;
+  display: block;
+  font-size: 13px;
+}
+
+.card strong {
+  display: block;
+  font-size: 22px;
+  margin-top: 6px;
+  color: #1e293b;
+}
+
+.form-grid {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(5, 1fr) auto;
+  margin-bottom: 10px;
+  padding: 10px;
+}
+
+.form-grid.three {
+  grid-template-columns: repeat(3, 1fr) auto;
+}
+
+.form-grid.four {
+  grid-template-columns: repeat(4, 1fr) auto;
+}
+
+input, select {
+  border: 1px solid #cbd5e1;
+  border-radius: 4px;
+  min-width: 0;
+  padding: 8px;
+}
+
+input:focus, select:focus {
+  border-color: #1E3A8A;
+  outline: 1px solid #c5d1e8;
+}
+
+.table-wrap {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  overflow-x: auto;
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+th, td {
+  border-bottom: 1px solid #e2e8f0;
+  padding: 8px 9px;
+  text-align: left;
+  white-space: nowrap;
+}
+
+th {
+  background: #f1f5f9;
+  color: #475569;
+  font-size: 13px;
+}
+
+tr:hover {
+  background: #f8fafc;
+}
+
+.actions {
+  display: flex;
+  gap: 5px;
+}
+
+.actions button {
+  padding: 5px 8px;
+}
+
+.auth-page {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 15px;
+}
+
+.auth-card {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  max-width: 340px;
+  padding: 20px;
+  width: 100%;
+}
+
+.auth-card h1 {
+  font-size: 20px;
+  margin: 0 0 14px;
+  text-align: center;
+  color: #1E3A8A;
+}
+
+.auth-form {
+  display: grid;
+  gap: 9px;
+}
+
+.auth-links {
+  display: flex;
+  justify-content: center;
+  margin-top: 2px;
+}
+
+.auth-links a {
+  color: #1E3A8A;
+  text-decoration: none;
+}
+
+.auth-links a:hover {
+  text-decoration: underline;
+}
+
+.form-error {
+  background: #fef2f2;
+  border-radius: 4px;
+  color: #dc2626;
+  margin: 0;
+  padding: 8px;
+}
+
+.report-filters {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  padding: 14px;
+  margin-bottom: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: flex-end;
+}
+
+.report-summary {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(3, 1fr);
+  margin-bottom: 16px;
+}
+
+.report-stat {
+  background: #e8edf5;
+  border-radius: 4px;
+  padding: 12px;
+}
+
+.report-stat span {
+  color: #1E3A8A;
+  font-size: 13px;
+  display: block;
+}
+
+.report-stat strong {
+  display: block;
+  font-size: 20px;
+  margin-top: 4px;
+  color: #1E3A8A;
+}
+
+@media (max-width: 950px) {
+  .top-nav {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .cards-grid, .form-grid, .form-grid.three, .form-grid.four {
+    grid-template-columns: 1fr 1fr;
+  }
+  .report-summary {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 620px) {
+  .page { padding: 12px; }
+  .cards-grid, .form-grid, .form-grid.three, .form-grid.four {
+    grid-template-columns: 1fr;
+  }
+  .report-summary {
+    grid-template-columns: 1fr;
+  }
+}

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

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  React.createElement(React.StrictMode, null,
+    React.createElement(App, null)
+  )
+)

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+
+var emptyCustomer = { customerNumber: '', firstName: '', lastName: '', telephone: '', address: '' };
+
+function Customers(props) {
+  var customersState = useState([]);
+  var customers = customersState[0];
+  var setCustomers = customersState[1];
+  var formState = useState(emptyCustomer);
+  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 + '/customers', { headers: headers })
+      .then(function(res) {
+        setCustomers(res.data);
+      })
+      .catch(function() {});
+  }
+
+  useEffect(function() { load(); }, []);
+
+  function submit() {
+    if (!form.customerNumber || !form.firstName || !form.lastName || !form.telephone || !form.address) {
+      props.setNotice('All fields are required');
+      return;
+    }
+    axios.post(props.API + '/customers', form, { headers: headers })
+      .then(function() {
+        setForm(emptyCustomer);
+        return load();
+      })
+      .then(function() {
+        props.setNotice('Customer 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>Customers</h2><p>Manage customer records.</p></div>
+      <section className="form-grid">
+        <input placeholder="Customer Number" value={form.customerNumber} onChange={function(e) { setForm({ customerNumber: e.target.value, firstName: form.firstName, lastName: form.lastName, telephone: form.telephone, address: form.address }); }} />
+        <input placeholder="First Name" value={form.firstName} onChange={function(e) { setForm({ customerNumber: form.customerNumber, firstName: e.target.value, lastName: form.lastName, telephone: form.telephone, address: form.address }); }} />
+        <input placeholder="Last Name" value={form.lastName} onChange={function(e) { setForm({ customerNumber: form.customerNumber, firstName: form.firstName, lastName: e.target.value, telephone: form.telephone, address: form.address }); }} />
+        <input placeholder="Telephone" value={form.telephone} onChange={function(e) { setForm({ customerNumber: form.customerNumber, firstName: form.firstName, lastName: form.lastName, telephone: e.target.value, address: form.address }); }} />
+        <input placeholder="Address" value={form.address} onChange={function(e) { setForm({ customerNumber: form.customerNumber, firstName: form.firstName, lastName: form.lastName, telephone: form.telephone, address: e.target.value }); }} />
+        <button onClick={submit}>Submit Data</button>
+      </section>
+      <div className="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>Number</th><th>First Name</th><th>Last Name</th><th>Telephone</th><th>Address</th>
+            </tr>
+          </thead>
+          <tbody>
+            {customers.length === 0 ? (
+              <tr><td colSpan="5" style={{ textAlign: 'center', color: '#94a3b8', padding: 20 }}>No customers found</td></tr>
+            ) : customers.map(function(c) {
+              return (
+                <tr key={c._id}>
+                  <td>{c.customerNumber}</td><td>{c.firstName}</td><td>{c.lastName}</td><td>{c.telephone}</td><td>{c.address}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </main>
+  );
+}
+
+export default Customers;

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+
+function Dashboard(props) {
+  var statsState = useState({ customers: 0, products: 0, sales: 0, revenue: 0 });
+  var stats = statsState[0];
+  var setStats = statsState[1];
+  var loadingState = useState(true);
+  var loading = loadingState[0];
+  var setLoading = loadingState[1];
+
+  var sessionData = JSON.parse(localStorage.getItem('srmsSession') || '{}');
+  var token = sessionData.token || '';
+  var headers = { Authorization: 'Bearer ' + token };
+
+  useEffect(function() {
+    axios.get(props.API + '/customers', { headers: headers })
+      .then(function(custRes) {
+        return Promise.all([
+          Promise.resolve(custRes),
+          axios.get(props.API + '/products', { headers: headers }),
+          axios.get(props.API + '/sales', { headers: headers })
+        ]);
+      })
+      .then(function(results) {
+        var sales = results[2].data;
+        var totalRevenue = 0;
+        for (var i = 0; i < sales.length; i++) {
+          totalRevenue += sales[i].totalAmountPaid || 0;
+        }
+        setStats({
+          customers: results[0].data.length,
+          products: results[1].data.length,
+          sales: sales.length,
+          revenue: totalRevenue
+        });
+      })
+      .catch(function(err) {
+        console.error('Dashboard fetch error:', err);
+      })
+      .then(function() {
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) {
+    return React.createElement('main', { className: 'page' },
+      React.createElement('p', null, 'Loading dashboard...')
+    );
+  }
+
+  return (
+    <main className="page">
+      <div className="page-title">
+        <h2>Dashboard</h2>
+        <p>Overview of the Sales Record Management System.</p>
+      </div>
+      <section className="cards-grid">
+        <article className="card"><span>Total Customers</span><strong>{stats.customers}</strong></article>
+        <article className="card"><span>Total Products</span><strong>{stats.products}</strong></article>
+        <article className="card"><span>Total Sales</span><strong>{stats.sales}</strong></article>
+        <article className="card"><span>Total Revenue</span><strong>{stats.revenue.toLocaleString()} FRW</strong></article>
+      </section>
+      <div style={{ marginTop: 16 }}>
+        <Link to="/customers"><button style={{ marginRight: 8 }}>Add Customer</button></Link>
+        <Link to="/products"><button style={{ marginRight: 8 }}>Add Product</button></Link>
+        <Link to="/sales"><button>New Sale</button></Link>
+      </div>
+    </main>
+  );
+}
+
+export default Dashboard;

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

@@ -0,0 +1,65 @@
+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 Login(props) {
+  var navigate = useNavigate();
+  var formState = useState({ username: '', password: '' });
+  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;
+    }
+    axios.post(API + '/auth/login', form)
+      .then(function(res) {
+        props.onLogin(res.data);
+        navigate('/dashboard');
+      })
+      .catch(function(err) {
+        var msg = 'Login 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>SRMS Login</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 }); }}
+          />
+          <input
+            type="password"
+            placeholder="Password"
+            value={form.password}
+            onChange={function(e) { setForm({ username: form.username, password: e.target.value }); }}
+          />
+          <button type="submit">Login</button>
+          <div className="auth-links">
+            <Link to="/register">Create Account</Link>
+          </div>
+        </form>
+      </section>
+    </main>
+  );
+}
+
+export default Login;