create-myexam-app 1.0.21 → 1.0.22

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

@@ -0,0 +1,23 @@
+{
+  "name": "stockhub-sms-frontend",
+  "version": "1.0.0",
+  "description": "Stock 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/SHMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/postcss.config.js

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

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

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import { Navigate, Route, Routes } from "react-router-dom";
+import DashboardPage from "./pages/DashboardPage";
+import LoginPage from "./pages/LoginPage";
+import ProductPage from "./pages/ProductPage";
+import ProtectedRoute from "./components/ProtectedRoute";
+import RecoverPasswordPage from "./pages/RecoverPasswordPage";
+import RegisterPage from "./pages/RegisterPage";
+import ReportsPage from "./pages/ReportsPage";
+import TransactionPage from "./pages/TransactionPage";
+import WarehousePage from "./pages/WarehousePage";
+
+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="/products"
+        element={
+          <ProtectedRoute user={user} setUser={setUser}>
+            <ProductPage user={user} setUser={setUser} />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/warehouses"
+        element={
+          <ProtectedRoute user={user} setUser={setUser}>
+            <WarehousePage user={user} setUser={setUser} />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/transactions"
+        element={
+          <ProtectedRoute user={user} setUser={setUser}>
+            <TransactionPage 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/SHMS(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/SHMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/api/productApi.js

@@ -0,0 +1,11 @@
+import apiClient from "./apiClient";
+
+export const createProduct = async (data) => {
+  const response = await apiClient.post("/products", data);
+  return response.data;
+};
+
+export const getProducts = async () => {
+  const response = await apiClient.get("/products");
+  return response.data;
+};

package/projects/SHMS(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 (period) => {
+  const response = await apiClient.get(`/reports?period=${period}`);
+  return response.data;
+};

package/projects/SHMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/api/transactionApi.js

@@ -0,0 +1,21 @@
+import apiClient from "./apiClient";
+
+export const createTransaction = async (data) => {
+  const response = await apiClient.post("/transactions", data);
+  return response.data;
+};
+
+export const getTransactions = async () => {
+  const response = await apiClient.get("/transactions");
+  return response.data;
+};
+
+export const updateTransaction = async (id, data) => {
+  const response = await apiClient.put(`/transactions/${id}`, data);
+  return response.data;
+};
+
+export const deleteTransaction = async (id) => {
+  const response = await apiClient.delete(`/transactions/${id}`);
+  return response.data;
+};

package/projects/SHMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/api/userApi.js

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

package/projects/SHMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/api/warehouseApi.js

@@ -0,0 +1,11 @@
+import apiClient from "./apiClient";
+
+export const createWarehouse = async (data) => {
+  const response = await apiClient.post("/warehouses", data);
+  return response.data;
+};
+
+export const getWarehouses = async () => {
+  const response = await apiClient.get("/warehouses");
+  return response.data;
+};

package/projects/SHMS(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">Stock Management System</p>
+      </div>
+      <div className="rounded-md border border-primary px-4 py-2 text-sm font-semibold">
+        {user?.username || "Store Manager"}
+      </div>
+    </header>
+  );
+};
+
+export default Header;

package/projects/SHMS(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/SHMS(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/SHMS(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/userApi";
+
+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/SHMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/components/Sidebar.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { NavLink, useNavigate } from "react-router-dom";
+import { logoutUser } from "../api/userApi";
+
+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">StockHub SMS</h1>
+      <nav className="grid gap-2">
+        <NavLink to="/" className={linkClass}>Dashboard</NavLink>
+        <NavLink to="/products" className={linkClass}>Product</NavLink>
+        <NavLink to="/warehouses" className={linkClass}>Warehouse</NavLink>
+        <NavLink to="/transactions" className={linkClass}>Transactions</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/SHMS(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/SHMS(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/SHMS(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 { getProducts } from "../api/productApi";
+import { getWarehouses } from "../api/warehouseApi";
+import { getTransactions } from "../api/transactionApi";
+import Layout from "../components/Layout";
+
+const DashboardPage = ({ user, setUser }) => {
+  const [summary, setSummary] = useState({
+    products: 0,
+    warehouses: 0,
+    transactions: 0,
+    availableUnits: 0
+  });
+
+  useEffect(() => {
+    const loadSummary = async () => {
+      const [products, warehouses, transactions] = await Promise.all([
+        getProducts(),
+        getWarehouses(),
+        getTransactions()
+      ]);
+
+      const availableUnits = products.reduce((total, product) => total + Number(product.quantityInStock || 0), 0);
+      setSummary({
+        products: products.length,
+        warehouses: warehouses.length,
+        transactions: transactions.length,
+        availableUnits
+      });
+    };
+
+    loadSummary();
+  }, []);
+
+  const cards = [
+    { label: "Products", value: summary.products },
+    { label: "Warehouses", value: summary.warehouses },
+    { label: "Transactions", value: summary.transactions },
+    { label: "Available Units", value: summary.availableUnits }
+  ];
+
+  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">StockHub Ltd</h3>
+        <p className="text-sm leading-6">
+          This system records product details, warehouse information and stock movement transactions for daily,
+          weekly and monthly stock reports.
+        </p>
+      </section>
+    </Layout>
+  );
+};
+
+export default DashboardPage;

package/projects/SHMS(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/userApi";
+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">StockHub SMS Login</h1>
+        <p className="mb-6 text-sm">Store manager account access</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/SHMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/pages/ProductPage.jsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from "react";
+import { createProduct, getProducts } from "../api/productApi";
+import Layout from "../components/Layout";
+import Message from "../components/Message";
+
+const ProductPage = ({ user, setUser }) => {
+  const initialForm = {
+    productCode: "",
+    productName: "",
+    category: "",
+    quantityInStock: "",
+    unitPrice: "",
+    supplierName: "",
+    dateReceived: ""
+  };
+  const [formData, setFormData] = useState(initialForm);
+  const [products, setProducts] = useState([]);
+  const [message, setMessage] = useState("");
+  const [messageType, setMessageType] = useState("");
+
+  const loadProducts = async () => {
+    const data = await getProducts();
+    setProducts(data);
+  };
+
+  useEffect(() => {
+    loadProducts();
+  }, []);
+
+  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 product fields are required");
+      return;
+    }
+
+    try {
+      const data = await createProduct(formData);
+      setMessageType("success");
+      setMessage(data.message);
+      setFormData(initialForm);
+      loadProducts();
+    } catch (error) {
+      setMessageType("error");
+      setMessage(error.message);
+    }
+  };
+
+  return (
+    <Layout title="Product" 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="productCode" placeholder="Product Code" value={formData.productCode} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <input name="productName" placeholder="Product Name" value={formData.productName} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <input name="category" placeholder="Category" value={formData.category} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <input name="quantityInStock" type="number" min="0" placeholder="Quantity In Stock" value={formData.quantityInStock} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <input name="unitPrice" type="number" min="0" placeholder="Unit Price" value={formData.unitPrice} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <input name="supplierName" placeholder="Supplier Name" value={formData.supplierName} onChange={handleChange} className="rounded-md border border-primary bg-secondary p-3 outline-none" />
+          <input name="dateReceived" type="date" value={formData.dateReceived} 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 Product</button>
+      </form>
+
+      <div className="mt-6 overflow-x-auto">
+        <table className="w-full min-w-[720px] 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">Category</th>
+              <th className="p-3">Stock</th>
+              <th className="p-3">Unit Price</th>
+              <th className="p-3">Supplier</th>
+            </tr>
+          </thead>
+          <tbody>
+            {products.length === 0 ? (
+              <tr className="border-t border-primary">
+                <td colSpan="6" className="p-3 text-center">No products recorded</td>
+              </tr>
+            ) : (
+              products.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">{product.supplierName}</td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </Layout>
+  );
+};
+
+export default ProductPage;