create-myexam-app 1.0.21 → 1.0.22

package/projects/SHMS(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/userApi";
+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/SHMS(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/userApi";
+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 store manager user 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/SHMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/pages/ReportsPage.jsx

@@ -0,0 +1,152 @@
+import React, { useEffect, useState } from "react";
+import { getReports } from "../api/reportApi";
+import Layout from "../components/Layout";
+
+const ReportsPage = ({ user, setUser }) => {
+  const [period, setPeriod] = useState("daily");
+  const [report, setReport] = useState({
+    availableStock: [],
+    stockIn: [],
+    stockOut: []
+  });
+
+  const totalStockValue = report.availableStock.reduce(
+    (total, product) => total + Number(product.quantityInStock || 0) * Number(product.unitPrice || 0),
+    0
+  );
+  const totalStockIn = report.stockIn.reduce((total, item) => total + Number(item.quantityMoved || 0), 0);
+  const totalStockOut = report.stockOut.reduce((total, item) => total + Number(item.quantityMoved || 0), 0);
+
+  useEffect(() => {
+    const loadReport = async () => {
+      const data = await getReports(period);
+      setReport(data);
+    };
+
+    loadReport();
+  }, [period]);
+
+  const renderTransactionRows = (transactions) => {
+    if (!transactions.length) {
+      return (
+        <tr>
+          <td colSpan="5" className="p-3 text-center">No records found</td>
+        </tr>
+      );
+    }
+
+    return transactions.map((transaction) => (
+      <tr key={transaction._id} className="border-t border-primary">
+        <td className="p-3">{transaction.transactionDate?.slice(0, 10)}</td>
+        <td className="p-3">{transaction.product?.productName}</td>
+        <td className="p-3">{transaction.warehouse?.warehouseName}</td>
+        <td className="p-3">{transaction.quantityMoved}</td>
+        <td className="p-3">{transaction.transactionType}</td>
+      </tr>
+    ));
+  };
+
+  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">
+        <select value={period} onChange={(event) => setPeriod(event.target.value)} className="rounded-md border border-primary bg-secondary p-3 outline-none">
+          <option value="daily">Daily Report</option>
+          <option value="weekly">Weekly Report</option>
+          <option value="monthly">Monthly Report</option>
+        </select>
+        <button onClick={() => window.print()} className="rounded-md bg-primary px-5 py-3 font-semibold text-secondary">
+          Print Report
+        </button>
+      </div>
+
+      <section className="mb-6 grid gap-4 md:grid-cols-3">
+        <div className="rounded-md border border-primary p-4">
+          <p className="text-sm font-semibold">Available Stock Value</p>
+          <p className="mt-2 text-2xl font-bold">{totalStockValue.toLocaleString()} FRW</p>
+        </div>
+        <div className="rounded-md border border-primary p-4">
+          <p className="text-sm font-semibold">Stock In Quantity</p>
+          <p className="mt-2 text-2xl font-bold">{totalStockIn}</p>
+        </div>
+        <div className="rounded-md border border-primary p-4">
+          <p className="text-sm font-semibold">Stock Out Quantity</p>
+          <p className="mt-2 text-2xl font-bold">{totalStockOut}</p>
+        </div>
+      </section>
+
+      <section className="mb-6">
+        <h3 className="mb-3 text-lg font-bold">Available Stock</h3>
+        <div className="overflow-x-auto">
+          <table className="w-full min-w-[760px] border border-primary text-left text-sm">
+            <thead className="bg-primary text-secondary">
+              <tr>
+                <th className="p-3">Code</th>
+                <th className="p-3">Product</th>
+                <th className="p-3">Category</th>
+                <th className="p-3">Quantity</th>
+                <th className="p-3">Unit Price</th>
+                <th className="p-3">Stock Value</th>
+              </tr>
+            </thead>
+            <tbody>
+              {report.availableStock.length === 0 ? (
+                <tr className="border-t border-primary">
+                  <td colSpan="6" className="p-3 text-center">No products recorded</td>
+                </tr>
+              ) : (
+                report.availableStock.map((product) => (
+                  <tr key={product._id} className="border-t border-primary">
+                    <td className="p-3">{product.productCode}</td>
+                    <td className="p-3">{product.productName}</td>
+                    <td className="p-3">{product.category}</td>
+                    <td className="p-3">{product.quantityInStock}</td>
+                    <td className="p-3">{product.unitPrice}</td>
+                    <td className="p-3">{Number(product.quantityInStock) * Number(product.unitPrice)}</td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <section className="mb-6">
+        <h3 className="mb-3 text-lg font-bold">Stock In</h3>
+        <div className="overflow-x-auto">
+          <table className="w-full min-w-[760px] border border-primary text-left text-sm">
+            <thead className="bg-primary text-secondary">
+              <tr>
+                <th className="p-3">Date</th>
+                <th className="p-3">Product</th>
+                <th className="p-3">Warehouse</th>
+                <th className="p-3">Quantity</th>
+                <th className="p-3">Type</th>
+              </tr>
+            </thead>
+            <tbody>{renderTransactionRows(report.stockIn)}</tbody>
+          </table>
+        </div>
+      </section>
+
+      <section>
+        <h3 className="mb-3 text-lg font-bold">Stock Out</h3>
+        <div className="overflow-x-auto">
+          <table className="w-full min-w-[760px] border border-primary text-left text-sm">
+            <thead className="bg-primary text-secondary">
+              <tr>
+                <th className="p-3">Date</th>
+                <th className="p-3">Product</th>
+                <th className="p-3">Warehouse</th>
+                <th className="p-3">Quantity</th>
+                <th className="p-3">Type</th>
+              </tr>
+            </thead>
+            <tbody>{renderTransactionRows(report.stockOut)}</tbody>
+          </table>
+        </div>
+      </section>
+    </Layout>
+  );
+};
+
+export default ReportsPage;

package/projects/SHMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/pages/TransactionPage.jsx

@@ -0,0 +1,195 @@
+import React, { useEffect, useState } from "react";
+import { getProducts } from "../api/productApi";
+import { getWarehouses } from "../api/warehouseApi";
+import {
+  createTransaction,
+  deleteTransaction,
+  getTransactions,
+  updateTransaction
+} from "../api/transactionApi";
+import Layout from "../components/Layout";
+import Message from "../components/Message";
+
+const TransactionPage = ({ user, setUser }) => {
+  const initialForm = {
+    product: "",
+    warehouse: "",
+    transactionDate: "",
+    quantityMoved: "",
+    transactionType: "Stock In"
+  };
+  const [formData, setFormData] = useState(initialForm);
+  const [products, setProducts] = useState([]);
+  const [warehouses, setWarehouses] = useState([]);
+  const [transactions, setTransactions] = useState([]);
+  const [editingId, setEditingId] = useState("");
+  const [message, setMessage] = useState("");
+  const [messageType, setMessageType] = useState("");
+
+  const loadData = async () => {
+    const [productData, warehouseData, transactionData] = await Promise.all([
+      getProducts(),
+      getWarehouses(),
+      getTransactions()
+    ]);
+
+    setProducts(productData);
+    setWarehouses(warehouseData);
+    setTransactions(transactionData);
+  };
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const handleChange = (event) => {
+    setFormData({ ...formData, [event.target.name]: event.target.value });
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    if (Object.values(formData).some((value) => value === "")) {
+      setMessageType("error");
+      setMessage("All transaction fields are required");
+      return;
+    }
+
+    try {
+      const data = editingId
+        ? await updateTransaction(editingId, formData)
+        : await createTransaction(formData);
+
+      setMessageType("success");
+      setMessage(data.message);
+      setFormData(initialForm);
+      setEditingId("");
+      loadData();
+    } catch (error) {
+      setMessageType("error");
+      setMessage(error.message);
+    }
+  };
+
+  const startEdit = (transaction) => {
+    setEditingId(transaction._id);
+    setFormData({
+      product: transaction.product?._id || "",
+      warehouse: transaction.warehouse?._id || "",
+      transactionDate: transaction.transactionDate?.slice(0, 10) || "",
+      quantityMoved: transaction.quantityMoved,
+      transactionType: transaction.transactionType
+    });
+    setMessage("");
+  };
+
+  const cancelEdit = () => {
+    setEditingId("");
+    setFormData(initialForm);
+  };
+
+  const handleDelete = async (id) => {
+    const confirmed = window.confirm("Delete this transaction?");
+
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      const data = await deleteTransaction(id);
+      setMessageType("success");
+      setMessage(data.message);
+      loadData();
+    } catch (error) {
+      setMessageType("error");
+      setMessage(error.message);
+    }
+  };
+
+  return (
+    <Layout title="Transactions" 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-5">
+          <select name="product" value={formData.product} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none">
+            <option value="">Select Product</option>
+            {products.map((product) => (
+              <option key={product._id} value={product._id}>
+                {product.productCode} - {product.productName}
+              </option>
+            ))}
+          </select>
+
+          <select name="warehouse" value={formData.warehouse} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none">
+            <option value="">Select Warehouse</option>
+            {warehouses.map((warehouse) => (
+              <option key={warehouse._id} value={warehouse._id}>
+                {warehouse.warehouseCode} - {warehouse.warehouseName}
+              </option>
+            ))}
+          </select>
+
+          <input name="transactionDate" type="date" value={formData.transactionDate} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <input name="quantityMoved" type="number" min="1" placeholder="Quantity Moved" value={formData.quantityMoved} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <select name="transactionType" value={formData.transactionType} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none">
+            <option value="Stock In">Stock In</option>
+            <option value="Stock Out">Stock Out</option>
+          </select>
+        </div>
+
+        <div className="mt-4 flex flex-col gap-3 sm:flex-row">
+          <button className="rounded-md bg-primary px-5 py-3 font-semibold text-secondary">
+            {editingId ? "Update Transaction" : "Save Transaction"}
+          </button>
+          {editingId && (
+            <button type="button" onClick={cancelEdit} 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">Date</th>
+              <th className="p-3">Product</th>
+              <th className="p-3">Warehouse</th>
+              <th className="p-3">Quantity</th>
+              <th className="p-3">Type</th>
+              <th className="p-3">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {transactions.length === 0 ? (
+              <tr className="border-t border-primary">
+                <td colSpan="6" className="p-3 text-center">No transactions recorded</td>
+              </tr>
+            ) : (
+              transactions.map((transaction) => (
+                <tr key={transaction._id} className="border-t border-primary">
+                  <td className="p-3">{transaction.transactionDate?.slice(0, 10)}</td>
+                  <td className="p-3">{transaction.product?.productName}</td>
+                  <td className="p-3">{transaction.warehouse?.warehouseName}</td>
+                  <td className="p-3">{transaction.quantityMoved}</td>
+                  <td className="p-3">{transaction.transactionType}</td>
+                  <td className="flex gap-2 p-3">
+                    <button onClick={() => startEdit(transaction)} className="rounded-md border border-primary px-3 py-2 font-semibold">
+                      Edit
+                    </button>
+                    <button onClick={() => handleDelete(transaction._id)} className="rounded-md bg-primary px-3 py-2 font-semibold text-secondary">
+                      Delete
+                    </button>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </Layout>
+  );
+};
+
+export default TransactionPage;

package/projects/SHMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/pages/WarehousePage.jsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from "react";
+import { createWarehouse, getWarehouses } from "../api/warehouseApi";
+import Layout from "../components/Layout";
+import Message from "../components/Message";
+
+const WarehousePage = ({ user, setUser }) => {
+  const initialForm = {
+    warehouseCode: "",
+    warehouseName: "",
+    warehouseLocation: ""
+  };
+  const [formData, setFormData] = useState(initialForm);
+  const [warehouses, setWarehouses] = useState([]);
+  const [message, setMessage] = useState("");
+  const [messageType, setMessageType] = useState("");
+
+  const loadWarehouses = async () => {
+    const data = await getWarehouses();
+    setWarehouses(data);
+  };
+
+  useEffect(() => {
+    loadWarehouses();
+  }, []);
+
+  const handleChange = (event) => {
+    setFormData({ ...formData, [event.target.name]: event.target.value });
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    if (Object.values(formData).some((value) => value === "")) {
+      setMessageType("error");
+      setMessage("All warehouse fields are required");
+      return;
+    }
+
+    try {
+      const data = await createWarehouse(formData);
+      setMessageType("success");
+      setMessage(data.message);
+      setFormData(initialForm);
+      loadWarehouses();
+    } catch (error) {
+      setMessageType("error");
+      setMessage(error.message);
+    }
+  };
+
+  return (
+    <Layout title="Warehouse" 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-3">
+          <input name="warehouseCode" placeholder="Warehouse Code" value={formData.warehouseCode} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <input name="warehouseName" placeholder="Warehouse Name" value={formData.warehouseName} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <input name="warehouseLocation" placeholder="Warehouse Location" value={formData.warehouseLocation} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+        </div>
+        <button className="mt-4 rounded-md bg-primary px-5 py-3 font-semibold text-secondary">Save Warehouse</button>
+      </form>
+
+      <div className="mt-6 overflow-x-auto">
+        <table className="w-full min-w-[560px] 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">Location</th>
+            </tr>
+          </thead>
+          <tbody>
+            {warehouses.length === 0 ? (
+              <tr className="border-t border-primary">
+                <td colSpan="3" className="p-3 text-center">No warehouses recorded</td>
+              </tr>
+            ) : (
+              warehouses.map((warehouse) => (
+                <tr key={warehouse._id} className="border-t border-primary">
+                  <td className="p-3">{warehouse.warehouseCode}</td>
+                  <td className="p-3">{warehouse.warehouseName}</td>
+                  <td className="p-3">{warehouse.warehouseLocation}</td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </Layout>
+  );
+};
+
+export default WarehousePage;

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