create-myexam-app 1.0.21 → 1.0.23

package/projects/EPMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/pages/LoginPage.jsx

@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { loginUser } from "../api/authApi";
+import Message from "../components/Message";
+
+const LoginPage = ({ setUser }) => {
+  const navigate = useNavigate();
+  const [formData, setFormData] = useState({ username: "", password: "" });
+  const [message, setMessage] = useState("");
+  const [messageType, setMessageType] = useState("");
+
+  const handleChange = (event) => {
+    setFormData({ ...formData, [event.target.name]: event.target.value });
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    setMessage("");
+
+    if (!formData.username || !formData.password) {
+      setMessageType("error");
+      setMessage("All fields are required");
+      return;
+    }
+
+    try {
+      const data = await loginUser(formData);
+      setUser(data.user);
+      navigate("/");
+    } catch (error) {
+      setMessageType("error");
+      setMessage(error.message);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-secondary p-4 text-primary">
+      <form onSubmit={handleSubmit} className="w-full max-w-md rounded-md border border-primary p-6">
+        <h1 className="mb-2 text-2xl font-bold">EPMS Login</h1>
+        <p className="mb-6 text-sm">Employee Payroll Management System</p>
+        <Message message={message} type={messageType} />
+
+        <label className="mb-2 block text-sm font-semibold">Username</label>
+        <input
+          name="username"
+          value={formData.username}
+          onChange={handleChange}
+          className="mb-4 w-full rounded-md border border-primary bg-secondary p-3 outline-none"
+        />
+
+        <label className="mb-2 block text-sm font-semibold">Password</label>
+        <input
+          name="password"
+          type="password"
+          value={formData.password}
+          onChange={handleChange}
+          className="mb-4 w-full rounded-md border border-primary bg-secondary p-3 outline-none"
+        />
+
+        <button className="w-full rounded-md bg-primary px-4 py-3 font-semibold text-secondary">
+          Login
+        </button>
+
+        <div className="mt-4 flex flex-col gap-2 text-sm sm:flex-row sm:justify-between">
+          <Link to="/register" className="font-semibold">Create account</Link>
+          <Link to="/recover-password" className="font-semibold">Recover password</Link>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default LoginPage;

package/projects/EPMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/pages/PayrollPage.jsx

@@ -0,0 +1,198 @@
+import React, { useEffect, useState } from "react";
+import { createPayroll, getPayrolls, updatePayroll, deletePayroll } from "../api/payrollApi";
+import { getEmployees } from "../api/employeeApi";
+import Layout from "../components/Layout";
+import Message from "../components/Message";
+
+const initialForm = {
+  employee: "",
+  month: new Date().getMonth() + 1,
+  year: new Date().getFullYear(),
+  basicPay: "",
+  allowances: "0",
+  deductions: "0",
+  netPay: ""
+};
+
+const PayrollPage = ({ user, setUser }) => {
+  const [formData, setFormData] = useState(initialForm);
+  const [payrolls, setPayrolls] = useState([]);
+  const [employees, setEmployees] = useState([]);
+  const [editingId, setEditingId] = useState(null);
+  const [message, setMessage] = useState("");
+  const [messageType, setMessageType] = useState("");
+
+  const loadPayrolls = async () => {
+    const data = await getPayrolls();
+    setPayrolls(data);
+  };
+
+  const loadEmployees = async () => {
+    const data = await getEmployees();
+    setEmployees(data);
+  };
+
+  useEffect(() => {
+    loadPayrolls();
+    loadEmployees();
+  }, []);
+
+  useEffect(() => {
+    const basic = parseFloat(formData.basicPay) || 0;
+    const allowances = parseFloat(formData.allowances) || 0;
+    const deductions = parseFloat(formData.deductions) || 0;
+    setFormData((prev) => ({ ...prev, netPay: Math.max(0, basic + allowances - deductions) }));
+  }, [formData.basicPay, formData.allowances, formData.deductions]);
+
+  const handleChange = (event) => {
+    setFormData({ ...formData, [event.target.name]: event.target.value });
+  };
+
+  const handleEmployeeSelect = (event) => {
+    const empId = event.target.value;
+    const selected = employees.find((e) => e._id === empId);
+    setFormData({
+      ...formData,
+      employee: empId,
+      basicPay: selected ? selected.baseSalary : ""
+    });
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    if (!formData.employee || !formData.basicPay || formData.netPay === undefined) {
+      setMessageType("error");
+      setMessage("Employee, basic pay and net pay are required");
+      return;
+    }
+
+    try {
+      if (editingId) {
+        const data = await updatePayroll(editingId, formData);
+        setMessageType("success");
+        setMessage(data.message);
+        setEditingId(null);
+      } else {
+        const data = await createPayroll(formData);
+        setMessageType("success");
+        setMessage(data.message);
+      }
+      setFormData(initialForm);
+      loadPayrolls();
+    } catch (error) {
+      setMessageType("error");
+      setMessage(error.message);
+    }
+  };
+
+  const handleEdit = (payroll) => {
+    setEditingId(payroll._id);
+    setFormData({
+      employee: payroll.employee?._id || "",
+      month: payroll.month,
+      year: payroll.year,
+      basicPay: payroll.basicPay,
+      allowances: payroll.allowances,
+      deductions: payroll.deductions,
+      netPay: payroll.netPay
+    });
+  };
+
+  const handleCancelEdit = () => {
+    setEditingId(null);
+    setFormData(initialForm);
+  };
+
+  const handleDelete = async (id) => {
+    if (!window.confirm("Delete this payroll record?")) return;
+
+    try {
+      const data = await deletePayroll(id);
+      setMessageType("success");
+      setMessage(data.message);
+      loadPayrolls();
+    } catch (error) {
+      setMessageType("error");
+      setMessage(error.message);
+    }
+  };
+
+  const monthNames = ["", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+  return (
+    <Layout title="Payroll" user={user} setUser={setUser}>
+      <form onSubmit={handleSubmit} className="rounded-md border border-primary p-4">
+        <Message message={message} type={messageType} />
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          <select name="employee" value={formData.employee} onChange={handleEmployeeSelect} className="rounded-md border border-primary bg-secondary p-3 outline-none">
+            <option value="">Select Employee *</option>
+            {employees.map((emp) => (
+              <option key={emp._id} value={emp._id}>{emp.firstName} {emp.lastName} ({emp.employeeCode})</option>
+            ))}
+          </select>
+          <select name="month" value={formData.month} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none">
+            {monthNames.slice(1).map((name, idx) => (
+              <option key={idx + 1} value={idx + 1}>{name}</option>
+            ))}
+          </select>
+          <input name="year" type="number" min="2020" max="2030" placeholder="Year" value={formData.year} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <input name="basicPay" type="number" min="0" placeholder="Basic Pay *" value={formData.basicPay} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <input name="allowances" type="number" min="0" placeholder="Allowances" value={formData.allowances} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <input name="deductions" type="number" min="0" placeholder="Deductions" value={formData.deductions} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <input name="netPay" type="number" min="0" placeholder="Net Pay *" value={formData.netPay} readOnly className="rounded-md border border-primary bg-gray-100 p-3 outline-none" />
+        </div>
+        <div className="mt-4 flex gap-3">
+          <button className="rounded-md bg-primary px-5 py-3 font-semibold text-secondary">
+            {editingId ? "Update Payroll" : "Process Payroll"}
+          </button>
+          {editingId && (
+            <button type="button" onClick={handleCancelEdit} className="rounded-md border border-primary px-5 py-3 font-semibold">
+              Cancel
+            </button>
+          )}
+        </div>
+      </form>
+
+      <div className="mt-6 overflow-x-auto">
+        <table className="w-full min-w-[900px] border border-primary text-left text-sm">
+          <thead className="bg-primary text-secondary">
+            <tr>
+              <th className="p-3">Employee</th>
+              <th className="p-3">Period</th>
+              <th className="p-3">Basic Pay</th>
+              <th className="p-3">Allowances</th>
+              <th className="p-3">Deductions</th>
+              <th className="p-3">Net Pay</th>
+              <th className="p-3">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {payrolls.length === 0 ? (
+              <tr className="border-t border-primary">
+                <td colSpan="7" className="p-3 text-center">No payroll records found</td>
+              </tr>
+            ) : (
+              payrolls.map((payroll) => (
+                <tr key={payroll._id} className="border-t border-primary">
+                  <td className="p-3">{payroll.employee?.firstName} {payroll.employee?.lastName}</td>
+                  <td className="p-3">{monthNames[payroll.month]} {payroll.year}</td>
+                  <td className="p-3">{Number(payroll.basicPay).toLocaleString()} FRW</td>
+                  <td className="p-3">{Number(payroll.allowances).toLocaleString()} FRW</td>
+                  <td className="p-3">{Number(payroll.deductions).toLocaleString()} FRW</td>
+                  <td className="p-3 font-bold">{Number(payroll.netPay).toLocaleString()} FRW</td>
+                  <td className="p-3">
+                    <button onClick={() => handleEdit(payroll)} className="mr-2 font-semibold text-primary">Edit</button>
+                    <button onClick={() => handleDelete(payroll._id)} className="font-semibold text-red-600">Delete</button>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </Layout>
+  );
+};
+
+export default PayrollPage;

package/projects/EPMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/pages/RecoverPasswordPage.jsx

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { recoverPassword } from "../api/authApi";
+import Message from "../components/Message";
+
+const RecoverPasswordPage = () => {
+  const [formData, setFormData] = useState({ username: "", newPassword: "" });
+  const [message, setMessage] = useState("");
+  const [messageType, setMessageType] = useState("");
+
+  const handleChange = (event) => {
+    setFormData({ ...formData, [event.target.name]: event.target.value });
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    if (!formData.username || !formData.newPassword) {
+      setMessageType("error");
+      setMessage("All fields are required");
+      return;
+    }
+
+    try {
+      const data = await recoverPassword(formData);
+      setMessageType("success");
+      setMessage(data.message);
+      setFormData({ username: "", newPassword: "" });
+    } catch (error) {
+      setMessageType("error");
+      setMessage(error.message);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-secondary p-4 text-primary">
+      <form onSubmit={handleSubmit} className="w-full max-w-md rounded-md border border-primary p-6">
+        <h1 className="mb-2 text-2xl font-bold">Password Recovery</h1>
+        <p className="mb-6 text-sm">Set a new password for an existing username</p>
+        <Message message={message} type={messageType} />
+
+        <label className="mb-2 block text-sm font-semibold">Username</label>
+        <input
+          name="username"
+          value={formData.username}
+          onChange={handleChange}
+          className="mb-4 w-full rounded-md border border-primary bg-secondary p-3 outline-none"
+        />
+
+        <label className="mb-2 block text-sm font-semibold">New Password</label>
+        <input
+          name="newPassword"
+          type="password"
+          value={formData.newPassword}
+          onChange={handleChange}
+          className="mb-4 w-full rounded-md border border-primary bg-secondary p-3 outline-none"
+        />
+
+        <button className="w-full rounded-md bg-primary px-4 py-3 font-semibold text-secondary">
+          Change Password
+        </button>
+
+        <Link to="/login" className="mt-4 block text-sm font-semibold">Back to login</Link>
+      </form>
+    </div>
+  );
+};
+
+export default RecoverPasswordPage;

package/projects/EPMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/pages/RegisterPage.jsx

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { registerUser } from "../api/authApi";
+import Message from "../components/Message";
+
+const RegisterPage = ({ setUser }) => {
+  const navigate = useNavigate();
+  const [formData, setFormData] = useState({ username: "", password: "" });
+  const [message, setMessage] = useState("");
+  const [messageType, setMessageType] = useState("");
+
+  const handleChange = (event) => {
+    setFormData({ ...formData, [event.target.name]: event.target.value });
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    if (!formData.username || !formData.password) {
+      setMessageType("error");
+      setMessage("All fields are required");
+      return;
+    }
+
+    try {
+      const data = await registerUser(formData);
+      setUser(data.user);
+      navigate("/");
+    } catch (error) {
+      setMessageType("error");
+      setMessage(error.message);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-secondary p-4 text-primary">
+      <form onSubmit={handleSubmit} className="w-full max-w-md rounded-md border border-primary p-6">
+        <h1 className="mb-2 text-2xl font-bold">Create Account</h1>
+        <p className="mb-6 text-sm">Register the system administrator account</p>
+        <Message message={message} type={messageType} />
+
+        <label className="mb-2 block text-sm font-semibold">Username</label>
+        <input
+          name="username"
+          value={formData.username}
+          onChange={handleChange}
+          className="mb-4 w-full rounded-md border border-primary bg-secondary p-3 outline-none"
+        />
+
+        <label className="mb-2 block text-sm font-semibold">Password</label>
+        <input
+          name="password"
+          type="password"
+          value={formData.password}
+          onChange={handleChange}
+          className="mb-4 w-full rounded-md border border-primary bg-secondary p-3 outline-none"
+        />
+
+        <button className="w-full rounded-md bg-primary px-4 py-3 font-semibold text-secondary">
+          Register
+        </button>
+
+        <Link to="/login" className="mt-4 block text-sm font-semibold">Back to login</Link>
+      </form>
+    </div>
+  );
+};
+
+export default RegisterPage;

package/projects/EPMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/pages/ReportsPage.jsx

@@ -0,0 +1,113 @@
+import React, { useEffect, useState } from "react";
+import { getReports } from "../api/reportApi";
+import Layout from "../components/Layout";
+
+const ReportsPage = ({ user, setUser }) => {
+  const now = new Date();
+  const [month, setMonth] = useState(now.getMonth() + 1);
+  const [year, setYear] = useState(now.getFullYear());
+  const [report, setReport] = useState({
+    totalEmployees: 0,
+    totalPayrollAmount: 0,
+    totalAllowances: 0,
+    totalDeductions: 0,
+    payrollRecords: []
+  });
+
+  const monthNames = ["", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+  useEffect(() => {
+    const loadReport = async () => {
+      const data = await getReports(month, year);
+      setReport(data);
+    };
+
+    loadReport();
+  }, [month, year]);
+
+  return (
+    <Layout title="Reports" user={user} setUser={setUser}>
+      <div className="no-print mb-5 flex flex-col gap-3 rounded-md border border-primary p-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex gap-3">
+          <select value={month} onChange={(event) => setMonth(parseInt(event.target.value))} className="rounded-md border border-primary bg-secondary p-3 outline-none">
+            {monthNames.slice(1).map((name, idx) => (
+              <option key={idx + 1} value={idx + 1}>{name}</option>
+            ))}
+          </select>
+          <input type="number" min="2020" max="2030" value={year} onChange={(event) => setYear(parseInt(event.target.value))} className="w-24 rounded-md border border-primary bg-secondary p-3 outline-none" />
+        </div>
+        <button onClick={() => window.print()} className="rounded-md bg-primary px-5 py-3 font-semibold text-secondary">
+          Print Report
+        </button>
+      </div>
+
+      <h3 className="mb-4 text-xl font-bold">{monthNames[month]} {year} Payroll Report</h3>
+
+      <section className="mb-6 grid gap-4 md:grid-cols-4">
+        <div className="rounded-md border border-primary p-4">
+          <p className="text-sm font-semibold">Total Employees</p>
+          <p className="mt-2 text-2xl font-bold">{report.totalEmployees}</p>
+        </div>
+        <div className="rounded-md border border-primary p-4">
+          <p className="text-sm font-semibold">Payroll Records</p>
+          <p className="mt-2 text-2xl font-bold">{report.recordCount}</p>
+        </div>
+        <div className="rounded-md border border-primary p-4">
+          <p className="text-sm font-semibold">Total Allowances</p>
+          <p className="mt-2 text-2xl font-bold">{report.totalAllowances.toLocaleString()} FRW</p>
+        </div>
+        <div className="rounded-md border border-primary p-4">
+          <p className="text-sm font-semibold">Total Deductions</p>
+          <p className="mt-2 text-2xl font-bold">{report.totalDeductions.toLocaleString()} FRW</p>
+        </div>
+      </section>
+
+      <section className="mb-6 grid gap-4 md:grid-cols-2">
+        <div className="rounded-md border border-primary p-4">
+          <p className="text-sm font-semibold">Total Payroll Amount</p>
+          <p className="mt-2 text-3xl font-bold">{report.totalPayrollAmount.toLocaleString()} FRW</p>
+        </div>
+      </section>
+
+      <section>
+        <h3 className="mb-3 text-lg font-bold">Payroll Records</h3>
+        <div className="overflow-x-auto">
+          <table className="w-full min-w-[800px] border border-primary text-left text-sm">
+            <thead className="bg-primary text-secondary">
+              <tr>
+                <th className="p-3">Employee Code</th>
+                <th className="p-3">Name</th>
+                <th className="p-3">Department</th>
+                <th className="p-3">Basic Pay</th>
+                <th className="p-3">Allowances</th>
+                <th className="p-3">Deductions</th>
+                <th className="p-3">Net Pay</th>
+              </tr>
+            </thead>
+            <tbody>
+              {report.payrollRecords.length === 0 ? (
+                <tr className="border-t border-primary">
+                  <td colSpan="7" className="p-3 text-center">No payroll records for this period</td>
+                </tr>
+              ) : (
+                report.payrollRecords.map((record) => (
+                  <tr key={record._id} className="border-t border-primary">
+                    <td className="p-3">{record.employee?.employeeCode}</td>
+                    <td className="p-3">{record.employee?.firstName} {record.employee?.lastName}</td>
+                    <td className="p-3">{record.employee?.department}</td>
+                    <td className="p-3">{Number(record.basicPay).toLocaleString()} FRW</td>
+                    <td className="p-3">{Number(record.allowances).toLocaleString()} FRW</td>
+                    <td className="p-3">{Number(record.deductions).toLocaleString()} FRW</td>
+                    <td className="p-3 font-bold">{Number(record.netPay).toLocaleString()} FRW</td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </Layout>
+  );
+};
+
+export default ReportsPage;

package/projects/EPMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{js,jsx}"],
+  theme: {
+    extend: {
+      colors: {
+        primary: "#1E3A8A",
+        secondary: "#F8FAFC"
+      }
+    }
+  },
+  plugins: []
+};

package/projects/EPMS(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: 5174
+  }
+});

package/projects/SCMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/README.md

@@ -0,0 +1,106 @@
+# KALIWABO SHEMA ELYSEE National Practical Examination 2026
+
+## Project Title
+
+SUPPLY CHAIN MANAGEMENT SYSTEM (SCMS)
+
+## Company
+
+SupplyNet Ltd is located in Musanze District, Northern Province, Rwanda. The company manages suppliers, shipments, and deliveries. This system helps the company replace manual record keeping with a digital web application.
+
+## Folder Structure
+
+```text
+KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/
+  backend-project/
+    config/
+    controllers/
+    middleware/
+    models/
+    routes/
+    server.js
+    package.json
+  frontend-project/
+    src/
+      api/
+      components/
+      pages/
+      App.jsx
+      main.jsx
+    package.json
+  REPORT/
+  README.md
+```
+
+## Technologies Used
+
+- React.js
+- React Router DOM
+- Axios
+- Tailwind CSS
+- Node.js
+- Express.js
+- MongoDB
+- Mongoose
+- bcryptjs
+- express-session
+
+## Backend Setup
+
+```bash
+cd backend-project
+npm install
+copy .env.example .env
+npm run dev
+```
+
+Backend URL:
+
+```text
+http://localhost:5000
+```
+
+## Frontend Setup
+
+```bash
+cd frontend-project
+npm install
+npm run dev
+```
+
+Frontend URL:
+
+```text
+http://localhost:5173
+```
+
+## MongoDB Database
+
+Database name:
+
+```text
+SCMS
+```
+
+Collections:
+
+- Users
+- Suppliers
+- Shipments
+- Deliveries
+
+## Main Features
+
+- User registration and login
+- Session-based authentication
+- Password recovery
+- Supplier insertion
+- Shipment insert, get, update, delete
+- Delivery insert, get, update, delete
+- Daily, weekly, and monthly printable reports
+- Responsive sidebar navigation
+
+## Examination Notes
+
+Supplier update and delete were not generated because the practical requirement says Supplier is INSERT ONLY. Supplier listing is included for table display, shipment selection, and reports.
+

package/projects/SCMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/REPORT/01_Introduction.md

@@ -0,0 +1,8 @@
+# 01. Introduction
+
+The Supply Chain Management System (SCMS) is a web-based application developed for SupplyNet Ltd, a company located in Musanze District, Northern Province, Rwanda.
+
+The company manages suppliers, shipments, and deliveries. Before this system, these activities were handled manually, which made record keeping slow and difficult to report.
+
+SCMS was developed using the MERN stack. It allows authenticated users to manage supply chain records and generate daily, weekly, and monthly reports.
+

package/projects/SCMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/REPORT/02_Problem_Statement.md

@@ -0,0 +1,12 @@
+# 02. Problem Statement
+
+SupplyNet Ltd currently uses a manual process to manage suppliers, shipments, and deliveries. This manual process causes the following problems:
+
+- Records may be lost or duplicated.
+- Searching for shipment and delivery information is slow.
+- Report preparation takes too much time.
+- Data relationships between suppliers, shipments, and deliveries are difficult to track manually.
+- Management cannot easily view current supply chain records.
+
+The proposed system solves these problems by providing a digital platform for storing, managing, and reporting supply chain information.
+