create-myexam-app 1.0.21 → 1.0.22

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

@@ -0,0 +1,23 @@
+{
+  "name": "epms-frontend",
+  "version": "1.0.0",
+  "description": "Employee Payroll Management System frontend for TVET National Practical Examination 2026",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "axios": "^1.7.9",
+    "vite": "^6.0.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.1.1",
+    "tailwindcss": "^3.4.17",
+    "postcss": "^8.4.49",
+    "autoprefixer": "^10.4.20"
+  },
+  "devDependencies": {}
+}

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

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

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

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import { Navigate, Route, Routes } from "react-router-dom";
+import DashboardPage from "./pages/DashboardPage";
+import LoginPage from "./pages/LoginPage";
+import RegisterPage from "./pages/RegisterPage";
+import RecoverPasswordPage from "./pages/RecoverPasswordPage";
+import EmployeePage from "./pages/EmployeePage";
+import PayrollPage from "./pages/PayrollPage";
+import ReportsPage from "./pages/ReportsPage";
+import ProtectedRoute from "./components/ProtectedRoute";
+
+const App = () => {
+  const [user, setUser] = useState(null);
+
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginPage setUser={setUser} />} />
+      <Route path="/register" element={<RegisterPage setUser={setUser} />} />
+      <Route path="/recover-password" element={<RecoverPasswordPage />} />
+      <Route
+        path="/"
+        element={
+          <ProtectedRoute user={user} setUser={setUser}>
+            <DashboardPage user={user} setUser={setUser} />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/employees"
+        element={
+          <ProtectedRoute user={user} setUser={setUser}>
+            <EmployeePage user={user} setUser={setUser} />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/payrolls"
+        element={
+          <ProtectedRoute user={user} setUser={setUser}>
+            <PayrollPage user={user} setUser={setUser} />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/reports"
+        element={
+          <ProtectedRoute user={user} setUser={setUser}>
+            <ReportsPage user={user} setUser={setUser} />
+          </ProtectedRoute>
+        }
+      />
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+};
+
+export default App;

package/projects/EPMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/api/apiClient.js

@@ -0,0 +1,16 @@
+import axios from "axios";
+
+const apiClient = axios.create({
+  baseURL: "http://localhost:5000/api",
+  withCredentials: true
+});
+
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    const message = error.response?.data?.message || error.response?.data?.error || "Request failed";
+    return Promise.reject(new Error(message));
+  }
+);
+
+export default apiClient;

package/projects/EPMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/api/authApi.js

@@ -0,0 +1,26 @@
+import apiClient from "./apiClient";
+
+export const registerUser = async (data) => {
+  const response = await apiClient.post("/auth/register", data);
+  return response.data;
+};
+
+export const loginUser = async (data) => {
+  const response = await apiClient.post("/auth/login", data);
+  return response.data;
+};
+
+export const logoutUser = async () => {
+  const response = await apiClient.post("/auth/logout");
+  return response.data;
+};
+
+export const getSession = async () => {
+  const response = await apiClient.get("/auth/session");
+  return response.data;
+};
+
+export const recoverPassword = async (data) => {
+  const response = await apiClient.post("/auth/recover-password", data);
+  return response.data;
+};

package/projects/EPMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/api/employeeApi.js

@@ -0,0 +1,26 @@
+import apiClient from "./apiClient";
+
+export const createEmployee = async (data) => {
+  const response = await apiClient.post("/employees", data);
+  return response.data;
+};
+
+export const getEmployees = async () => {
+  const response = await apiClient.get("/employees");
+  return response.data;
+};
+
+export const getEmployee = async (id) => {
+  const response = await apiClient.get(`/employees/${id}`);
+  return response.data;
+};
+
+export const updateEmployee = async (id, data) => {
+  const response = await apiClient.put(`/employees/${id}`, data);
+  return response.data;
+};
+
+export const deleteEmployee = async (id) => {
+  const response = await apiClient.delete(`/employees/${id}`);
+  return response.data;
+};

package/projects/EPMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/api/payrollApi.js

@@ -0,0 +1,26 @@
+import apiClient from "./apiClient";
+
+export const createPayroll = async (data) => {
+  const response = await apiClient.post("/payrolls", data);
+  return response.data;
+};
+
+export const getPayrolls = async (params) => {
+  const response = await apiClient.get("/payrolls", { params });
+  return response.data;
+};
+
+export const getPayroll = async (id) => {
+  const response = await apiClient.get(`/payrolls/${id}`);
+  return response.data;
+};
+
+export const updatePayroll = async (id, data) => {
+  const response = await apiClient.put(`/payrolls/${id}`, data);
+  return response.data;
+};
+
+export const deletePayroll = async (id) => {
+  const response = await apiClient.delete(`/payrolls/${id}`);
+  return response.data;
+};

package/projects/EPMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/api/reportApi.js

@@ -0,0 +1,6 @@
+import apiClient from "./apiClient";
+
+export const getReports = async (month, year) => {
+  const response = await apiClient.get(`/reports?month=${month}&year=${year}`);
+  return response.data;
+};

package/projects/EPMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/components/Header.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+const Header = ({ title, user }) => {
+  return (
+    <header className="no-print mb-6 flex flex-col gap-2 border-b border-primary pb-4 md:flex-row md:items-center md:justify-between">
+      <div>
+        <h2 className="text-2xl font-bold text-primary">{title}</h2>
+        <p className="text-sm text-primary">Employee Payroll Management System</p>
+      </div>
+      <div className="rounded-md border border-primary px-4 py-2 text-sm font-semibold">
+        {user?.username || "Administrator"}
+      </div>
+    </header>
+  );
+};
+
+export default Header;

package/projects/EPMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/components/Layout.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import Sidebar from "./Sidebar";
+import Header from "./Header";
+
+const Layout = ({ title, user, setUser, children }) => {
+  return (
+    <div className="min-h-screen bg-secondary text-primary md:flex">
+      <Sidebar setUser={setUser} />
+      <main className="w-full p-4 md:p-6">
+        <Header title={title} user={user} />
+        {children}
+      </main>
+    </div>
+  );
+};
+
+export default Layout;

package/projects/EPMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/components/Message.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+const Message = ({ message, type }) => {
+  if (!message) {
+    return null;
+  }
+
+  return (
+    <div className={`mb-4 rounded-md border border-primary p-3 text-sm ${type === "error" ? "bg-secondary text-primary" : "bg-primary text-secondary"}`}>
+      {message}
+    </div>
+  );
+};
+
+export default Message;

package/projects/EPMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/components/ProtectedRoute.jsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from "react";
+import { Navigate } from "react-router-dom";
+import { getSession } from "../api/authApi";
+
+const ProtectedRoute = ({ user, setUser, children }) => {
+  const [loading, setLoading] = useState(true);
+  const [allowed, setAllowed] = useState(false);
+
+  useEffect(() => {
+    const validateSession = async () => {
+      try {
+        if (user) {
+          setAllowed(true);
+          return;
+        }
+
+        const data = await getSession();
+        setUser(data.user);
+        setAllowed(true);
+      } catch (error) {
+        setAllowed(false);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    validateSession();
+  }, [user, setUser]);
+
+  if (loading) {
+    return <div className="min-h-screen bg-secondary p-6 text-primary">Loading...</div>;
+  }
+
+  if (!allowed) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return children;
+};
+
+export default ProtectedRoute;

package/projects/EPMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/components/Sidebar.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { NavLink, useNavigate } from "react-router-dom";
+import { logoutUser } from "../api/authApi";
+
+const Sidebar = ({ setUser }) => {
+  const navigate = useNavigate();
+
+  const linkClass = ({ isActive }) =>
+    `block rounded-md px-4 py-3 text-sm font-semibold ${
+      isActive ? "bg-secondary text-primary" : "text-secondary"
+    }`;
+
+  const handleLogout = async () => {
+    await logoutUser();
+    setUser(null);
+    navigate("/login");
+  };
+
+  return (
+    <aside className="no-print w-full bg-primary p-4 text-secondary md:min-h-screen md:w-64">
+      <h1 className="mb-6 text-xl font-bold">EPMS</h1>
+      <nav className="grid gap-2">
+        <NavLink to="/" className={linkClass}>Dashboard</NavLink>
+        <NavLink to="/employees" className={linkClass}>Employees</NavLink>
+        <NavLink to="/payrolls" className={linkClass}>Payroll</NavLink>
+        <NavLink to="/reports" className={linkClass}>Reports</NavLink>
+        <button
+          onClick={handleLogout}
+          className="mt-4 rounded-md border border-secondary px-4 py-3 text-left text-sm font-semibold text-secondary"
+        >
+          Logout
+        </button>
+      </nav>
+    </aside>
+  );
+};
+
+export default Sidebar;

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

@@ -0,0 +1,30 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: #F8FAFC;
+  color: #1E3A8A;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+input,
+select,
+button {
+  font: inherit;
+}
+
+@media print {
+  .no-print {
+    display: none !important;
+  }
+
+  body {
+    background: #F8FAFC;
+  }
+}

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

@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App.jsx";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

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

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from "react";
+import { getEmployees } from "../api/employeeApi";
+import { getPayrolls } from "../api/payrollApi";
+import Layout from "../components/Layout";
+
+const DashboardPage = ({ user, setUser }) => {
+  const [summary, setSummary] = useState({
+    employees: 0,
+    payrollRecords: 0,
+    totalPayrollAmount: 0,
+    departments: 0
+  });
+
+  useEffect(() => {
+    const loadSummary = async () => {
+      const [employees, payrolls] = await Promise.all([
+        getEmployees(),
+        getPayrolls()
+      ]);
+
+      const departments = new Set(employees.map((emp) => emp.department)).size;
+      const totalPayrollAmount = payrolls.reduce((sum, p) => sum + p.netPay, 0);
+
+      setSummary({
+        employees: employees.length,
+        payrollRecords: payrolls.length,
+        totalPayrollAmount,
+        departments
+      });
+    };
+
+    loadSummary();
+  }, []);
+
+  const cards = [
+    { label: "Employees", value: summary.employees },
+    { label: "Departments", value: summary.departments },
+    { label: "Payroll Records", value: summary.payrollRecords },
+    { label: "Total Payroll", value: `${summary.totalPayrollAmount.toLocaleString()} FRW` }
+  ];
+
+  return (
+    <Layout title="Dashboard" user={user} setUser={setUser}>
+      <section className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {cards.map((card) => (
+          <div key={card.label} className="rounded-md border border-primary p-5">
+            <p className="text-sm font-semibold">{card.label}</p>
+            <p className="mt-3 text-3xl font-bold">{card.value}</p>
+          </div>
+        ))}
+      </section>
+
+      <section className="mt-6 rounded-md border border-primary p-5">
+        <h3 className="mb-2 text-lg font-bold">Employee Payroll Management System</h3>
+        <p className="text-sm leading-6">
+          This system manages employee records, processes monthly payroll and generates payroll reports
+          for the organisation.
+        </p>
+      </section>
+    </Layout>
+  );
+};
+
+export default DashboardPage;

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

@@ -0,0 +1,166 @@
+import React, { useEffect, useState } from "react";
+import { createEmployee, getEmployees, updateEmployee, deleteEmployee } from "../api/employeeApi";
+import Layout from "../components/Layout";
+import Message from "../components/Message";
+
+const initialForm = {
+  employeeCode: "",
+  firstName: "",
+  lastName: "",
+  department: "",
+  position: "",
+  baseSalary: "",
+  hireDate: "",
+  email: "",
+  phone: ""
+};
+
+const EmployeePage = ({ user, setUser }) => {
+  const [formData, setFormData] = useState(initialForm);
+  const [employees, setEmployees] = useState([]);
+  const [editingId, setEditingId] = useState(null);
+  const [message, setMessage] = useState("");
+  const [messageType, setMessageType] = useState("");
+
+  const loadEmployees = async () => {
+    const data = await getEmployees();
+    setEmployees(data);
+  };
+
+  useEffect(() => {
+    loadEmployees();
+  }, []);
+
+  const handleChange = (event) => {
+    setFormData({ ...formData, [event.target.name]: event.target.value });
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    if (!formData.employeeCode || !formData.firstName || !formData.lastName || !formData.department || !formData.position || !formData.baseSalary || !formData.hireDate) {
+      setMessageType("error");
+      setMessage("All required fields must be filled");
+      return;
+    }
+
+    try {
+      if (editingId) {
+        const data = await updateEmployee(editingId, formData);
+        setMessageType("success");
+        setMessage(data.message);
+        setEditingId(null);
+      } else {
+        const data = await createEmployee(formData);
+        setMessageType("success");
+        setMessage(data.message);
+      }
+      setFormData(initialForm);
+      loadEmployees();
+    } catch (error) {
+      setMessageType("error");
+      setMessage(error.message);
+    }
+  };
+
+  const handleEdit = (employee) => {
+    setEditingId(employee._id);
+    setFormData({
+      employeeCode: employee.employeeCode,
+      firstName: employee.firstName,
+      lastName: employee.lastName,
+      department: employee.department,
+      position: employee.position,
+      baseSalary: employee.baseSalary,
+      hireDate: employee.hireDate?.slice(0, 10),
+      email: employee.email || "",
+      phone: employee.phone || ""
+    });
+  };
+
+  const handleCancelEdit = () => {
+    setEditingId(null);
+    setFormData(initialForm);
+  };
+
+  const handleDelete = async (id) => {
+    if (!window.confirm("Delete this employee?")) return;
+
+    try {
+      const data = await deleteEmployee(id);
+      setMessageType("success");
+      setMessage(data.message);
+      loadEmployees();
+    } catch (error) {
+      setMessageType("error");
+      setMessage(error.message);
+    }
+  };
+
+  return (
+    <Layout title="Employees" 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">
+          <input name="employeeCode" placeholder="Employee Code *" value={formData.employeeCode} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <input name="firstName" placeholder="First Name *" value={formData.firstName} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <input name="lastName" placeholder="Last Name *" value={formData.lastName} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <input name="department" placeholder="Department *" value={formData.department} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <input name="position" placeholder="Position *" value={formData.position} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <input name="baseSalary" type="number" min="0" placeholder="Base Salary *" value={formData.baseSalary} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <input name="hireDate" type="date" value={formData.hireDate} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <input name="email" placeholder="Email" value={formData.email} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <input name="phone" placeholder="Phone" value={formData.phone} onChange={handleChange} className="rounded-md border border-primary bg-secondary 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 Employee" : "Save Employee"}
+          </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-[800px] border border-primary text-left text-sm">
+          <thead className="bg-primary text-secondary">
+            <tr>
+              <th className="p-3">Code</th>
+              <th className="p-3">Name</th>
+              <th className="p-3">Department</th>
+              <th className="p-3">Position</th>
+              <th className="p-3">Base Salary</th>
+              <th className="p-3">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {employees.length === 0 ? (
+              <tr className="border-t border-primary">
+                <td colSpan="6" className="p-3 text-center">No employees recorded</td>
+              </tr>
+            ) : (
+              employees.map((employee) => (
+                <tr key={employee._id} className="border-t border-primary">
+                  <td className="p-3">{employee.employeeCode}</td>
+                  <td className="p-3">{employee.firstName} {employee.lastName}</td>
+                  <td className="p-3">{employee.department}</td>
+                  <td className="p-3">{employee.position}</td>
+                  <td className="p-3">{Number(employee.baseSalary).toLocaleString()} FRW</td>
+                  <td className="p-3">
+                    <button onClick={() => handleEdit(employee)} className="mr-2 font-semibold text-primary">Edit</button>
+                    <button onClick={() => handleDelete(employee._id)} className="font-semibold text-red-600">Delete</button>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </Layout>
+  );
+};
+
+export default EmployeePage;