create-myexam-app 1.0.21 → 1.0.22

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

@@ -0,0 +1,23 @@
+{
+  "name": "scms-frontend-project",
+  "version": "1.0.0",
+  "description": "Supply Chain Management System frontend for TVET National Practical Examination",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.6.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.18",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "vite": "^5.1.6"
+  }
+}

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

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

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

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from "react";
+import { Navigate, Route, Routes } from "react-router-dom";
+import { getSessionUser } from "./api/userApi";
+import Layout from "./components/Layout";
+import Dashboard from "./pages/Dashboard";
+import Login from "./pages/Login";
+import Supplier from "./pages/Supplier";
+import Shipment from "./pages/Shipment";
+import Delivery from "./pages/Delivery";
+import Reports from "./pages/Reports";
+import Logout from "./pages/Logout";
+
+function ProtectedRoute(props) {
+  if (!props.user) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return props.children;
+}
+
+function App() {
+  var userState = useState(null);
+  var user = userState[0];
+  var setUser = userState[1];
+  var checkingSessionState = useState(true);
+  var checkingSession = checkingSessionState[0];
+  var setCheckingSession = checkingSessionState[1];
+
+  useEffect(function () {
+    getSessionUser()
+      .then(function (response) {
+        setUser(response.data.user);
+      })
+      .catch(function () {
+        setUser(null);
+      })
+      .finally(function () {
+        setCheckingSession(false);
+      });
+  }, []);
+
+  if (checkingSession) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-slate-50 text-blue-900">
+        Loading SCMS...
+      </div>
+    );
+  }
+
+  return (
+    <Routes>
+      <Route path="/login" element={<Login setUser={setUser} />} />
+      <Route
+        path="/"
+        element={
+          <ProtectedRoute user={user}>
+            <Layout user={user} />
+          </ProtectedRoute>
+        }
+      >
+        <Route index element={<Dashboard />} />
+        <Route path="suppliers" element={<Supplier />} />
+        <Route path="shipments" element={<Shipment />} />
+        <Route path="deliveries" element={<Delivery />} />
+        <Route path="reports" element={<Reports />} />
+        <Route path="logout" element={<Logout setUser={setUser} />} />
+      </Route>
+    </Routes>
+  );
+}
+
+export default App;

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

@@ -0,0 +1,14 @@
+import axios from "axios";
+
+var baseURL = "http://localhost:5000/api";
+
+if (import.meta.env && import.meta.env.VITE_API_URL) {
+  baseURL = import.meta.env.VITE_API_URL;
+}
+
+var apiClient = axios.create({
+  baseURL: baseURL,
+  withCredentials: true,
+});
+
+export default apiClient;

package/projects/SCMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/api/deliveryApi.js

@@ -0,0 +1,17 @@
+import apiClient from "./apiClient";
+
+export function createDelivery(deliveryData) {
+  return apiClient.post("/deliveries", deliveryData);
+}
+
+export function getDeliveries() {
+  return apiClient.get("/deliveries");
+}
+
+export function updateDelivery(id, deliveryData) {
+  return apiClient.put("/deliveries/" + id, deliveryData);
+}
+
+export function deleteDelivery(id) {
+  return apiClient.delete("/deliveries/" + id);
+}

package/projects/SCMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/api/shipmentApi.js

@@ -0,0 +1,17 @@
+import apiClient from "./apiClient";
+
+export function createShipment(shipmentData) {
+  return apiClient.post("/shipments", shipmentData);
+}
+
+export function getShipments() {
+  return apiClient.get("/shipments");
+}
+
+export function updateShipment(id, shipmentData) {
+  return apiClient.put("/shipments/" + id, shipmentData);
+}
+
+export function deleteShipment(id) {
+  return apiClient.delete("/shipments/" + id);
+}

package/projects/SCMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/api/supplierApi.js

@@ -0,0 +1,9 @@
+import apiClient from "./apiClient";
+
+export function createSupplier(supplierData) {
+  return apiClient.post("/suppliers", supplierData);
+}
+
+export function getSuppliers() {
+  return apiClient.get("/suppliers");
+}

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

@@ -0,0 +1,21 @@
+import apiClient from "./apiClient";
+
+export function registerUser(userData) {
+  return apiClient.post("/users/register", userData);
+}
+
+export function loginUser(userData) {
+  return apiClient.post("/users/login", userData);
+}
+
+export function recoverPassword(userData) {
+  return apiClient.post("/users/recover-password", userData);
+}
+
+export function logoutUser() {
+  return apiClient.post("/users/logout");
+}
+
+export function getSessionUser() {
+  return apiClient.get("/users/session");
+}

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+import Sidebar from "./Sidebar";
+
+function Layout(props) {
+  return (
+    <div className="min-h-screen bg-slate-50 text-blue-900 md:flex">
+      <Sidebar user={props.user} />
+      <main className="flex-1 p-4 md:p-6">
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+export default Layout;

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

@@ -0,0 +1,15 @@
+import React from "react";
+
+function Message(props) {
+  if (!props.text) {
+    return null;
+  }
+
+  return (
+    <div className={"mb-4 rounded-md border p-3 text-sm " + (props.type === "error" ? "border-blue-900 bg-slate-100" : "border-blue-800 bg-slate-100")}>
+      {props.text}
+    </div>
+  );
+}
+
+export default Message;

package/projects/SCMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/components/PageHeader.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+function PageHeader(props) {
+  return (
+    <div className="mb-5">
+      <h2 className="text-2xl font-bold text-blue-900">{props.title}</h2>
+      <p className="mt-1 text-sm text-blue-800">{props.subtitle}</p>
+    </div>
+  );
+}
+
+export default PageHeader;

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

@@ -0,0 +1,40 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+var menuItems = [
+  { path: "/", label: "Dashboard" },
+  { path: "/suppliers", label: "Supplier" },
+  { path: "/shipments", label: "Shipment" },
+  { path: "/deliveries", label: "Delivery" },
+  { path: "/reports", label: "Reports" },
+  { path: "/logout", label: "Logout" },
+];
+
+function Sidebar(props) {
+  function linkClass(linkProps) {
+    return "block rounded-md px-4 py-3 text-sm font-semibold " +
+      (linkProps.isActive ? "bg-slate-50 text-blue-900" : "text-slate-50 hover:bg-blue-800");
+  }
+
+  return (
+    <aside className="no-print bg-blue-900 p-4 text-slate-50 md:min-h-screen md:w-64">
+      <div className="mb-6 border-b border-blue-800 pb-4">
+        <h1 className="text-xl font-bold">SCMS</h1>
+        <p className="mt-1 text-sm text-slate-100">SupplyNet Ltd</p>
+        <p className="mt-3 text-xs text-slate-100">User: {props.user ? props.user.username : ""}</p>
+      </div>
+
+      <nav className="grid gap-2">
+        {menuItems.map(function (item) {
+          return (
+          <NavLink key={item.path} to={item.path} end={item.path === "/"} className={linkClass}>
+            {item.label}
+          </NavLink>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+}
+
+export default Sidebar;

package/projects/SCMS(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";
+import "./styles.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

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

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from "react";
+import { getSuppliers } from "../api/supplierApi";
+import { getShipments } from "../api/shipmentApi";
+import { getDeliveries } from "../api/deliveryApi";
+import PageHeader from "../components/PageHeader";
+
+function Dashboard() {
+  var countState = useState({ suppliers: 0, shipments: 0, deliveries: 0 });
+  var counts = countState[0];
+  var setCounts = countState[1];
+
+  useEffect(function () {
+    function loadDashboard() {
+      Promise.all([
+        getSuppliers(),
+        getShipments(),
+        getDeliveries(),
+      ])
+      .then(function (responses) {
+        setCounts({
+          suppliers: responses[0].data.length,
+          shipments: responses[1].data.length,
+          deliveries: responses[2].data.length,
+        });
+      });
+    }
+
+    loadDashboard();
+  }, []);
+
+  var cards = [
+    { title: "Suppliers", value: counts.suppliers },
+    { title: "Shipments", value: counts.shipments },
+    { title: "Deliveries", value: counts.deliveries },
+  ];
+
+  return (
+    <div>
+      <PageHeader title="Dashboard" subtitle="Summary of supply chain records" />
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {cards.map(function (card) {
+          return (
+          <div key={card.title} className="rounded-md border border-slate-200 bg-white p-5">
+            <p className="text-sm font-semibold text-blue-800">{card.title}</p>
+            <p className="mt-3 text-3xl font-bold">{card.value}</p>
+          </div>
+          );
+        })}
+      </div>
+
+      <section className="mt-6 rounded-md border border-slate-200 bg-white p-5">
+        <h3 className="font-bold">System Purpose</h3>
+        <p className="mt-2 text-sm leading-6 text-blue-800">
+          This system helps SupplyNet Ltd manage suppliers, shipments, deliveries, and printable reports using a simple MERN stack application.
+        </p>
+      </section>
+    </div>
+  );
+}
+
+export default Dashboard;

package/projects/SCMS(Ely)/KALIWABO_SHEMA_ELYSEE_National_Practical_Examination_2026/frontend-project/src/pages/Delivery.jsx

@@ -0,0 +1,212 @@
+import React, { useEffect, useState } from "react";
+import { createDelivery, deleteDelivery, getDeliveries, updateDelivery } from "../api/deliveryApi";
+import { getShipments } from "../api/shipmentApi";
+import Message from "../components/Message";
+import PageHeader from "../components/PageHeader";
+
+var emptyDelivery = {
+  shipment: "",
+  deliveryCode: "",
+  deliveryDate: "",
+  quantityDelivered: "",
+  deliveryStatus: "",
+};
+
+var deliveryStatuses = ["Pending", "Partial", "Completed", "Returned"];
+
+function formatDateForInput(dateValue) {
+  if (!dateValue) return "";
+  return new Date(dateValue).toISOString().split("T")[0];
+}
+
+function Delivery() {
+  var formState = useState(emptyDelivery);
+  var formData = formState[0];
+  var setFormData = formState[1];
+  var shipmentState = useState([]);
+  var shipments = shipmentState[0];
+  var setShipments = shipmentState[1];
+  var deliveryState = useState([]);
+  var deliveries = deliveryState[0];
+  var setDeliveries = deliveryState[1];
+  var editingState = useState("");
+  var editingId = editingState[0];
+  var setEditingId = editingState[1];
+  var messageState = useState("");
+  var message = messageState[0];
+  var setMessage = messageState[1];
+  var messageTypeState = useState("");
+  var messageType = messageTypeState[0];
+  var setMessageType = messageTypeState[1];
+
+  function loadData() {
+    return Promise.all([getShipments(), getDeliveries()])
+      .then(function (responses) {
+        setShipments(responses[0].data);
+        setDeliveries(responses[1].data);
+      });
+  }
+
+  useEffect(function () {
+    loadData().catch(function () {});
+  }, []);
+
+  function handleChange(event) {
+    var newFormData = Object.assign({}, formData);
+    newFormData[event.target.name] = event.target.value;
+    setFormData(newFormData);
+  }
+
+  function clearForm() {
+    setFormData(emptyDelivery);
+    setEditingId("");
+  }
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    setMessage("");
+
+    var request = editingId ? updateDelivery(editingId, formData) : createDelivery(formData);
+
+    request
+      .then(function (response) {
+      setMessageType("success");
+      setMessage(response.data.message);
+      clearForm();
+      loadData();
+      })
+      .catch(function (error) {
+        setMessageType("error");
+        setMessage(error.response && error.response.data ? error.response.data.message : "Failed to save delivery");
+      });
+  }
+
+  function handleEdit(delivery) {
+    setEditingId(delivery._id);
+    setFormData({
+      shipment: delivery.shipment && delivery.shipment._id ? delivery.shipment._id : delivery.shipment,
+      deliveryCode: delivery.deliveryCode,
+      deliveryDate: formatDateForInput(delivery.deliveryDate),
+      quantityDelivered: delivery.quantityDelivered,
+      deliveryStatus: delivery.deliveryStatus,
+    });
+  }
+
+  function handleDelete(id) {
+    if (!confirm("Delete this delivery?")) return;
+
+    deleteDelivery(id)
+      .then(function (response) {
+      setMessageType("success");
+      setMessage(response.data.message);
+      loadData();
+      })
+      .catch(function (error) {
+        setMessageType("error");
+        setMessage(error.response && error.response.data ? error.response.data.message : "Failed to delete delivery");
+      });
+  }
+
+  return (
+    <div>
+      <PageHeader title="Delivery" subtitle="Insert, get, update, and delete delivery records" />
+
+      <form onSubmit={handleSubmit} className="mb-6 rounded-md border border-slate-200 bg-white p-4">
+        <Message type={messageType} text={message} />
+        <div className="grid gap-4 md:grid-cols-2">
+          <div>
+            <label className="mb-2 block text-sm font-semibold">Shipment</label>
+            <select className="w-full rounded-md border border-slate-200 bg-slate-50 px-3 py-2 outline-blue-900" name="shipment" value={formData.shipment} onChange={handleChange} required>
+              <option value="">Select shipment</option>
+              {shipments.map(function (shipment) {
+                return (
+                <option key={shipment._id} value={shipment._id}>
+                  {shipment.shipmentNumber} - {shipment.destination}
+                </option>
+                );
+              })}
+            </select>
+          </div>
+
+          <div>
+            <label className="mb-2 block text-sm font-semibold">Delivery Code</label>
+            <input className="w-full rounded-md border border-slate-200 bg-slate-50 px-3 py-2 outline-blue-900" name="deliveryCode" value={formData.deliveryCode} onChange={handleChange} required />
+          </div>
+
+          <div>
+            <label className="mb-2 block text-sm font-semibold">Delivery Date</label>
+            <input className="w-full rounded-md border border-slate-200 bg-slate-50 px-3 py-2 outline-blue-900" name="deliveryDate" type="date" value={formData.deliveryDate} onChange={handleChange} required />
+          </div>
+
+          <div>
+            <label className="mb-2 block text-sm font-semibold">Quantity Delivered</label>
+            <input className="w-full rounded-md border border-slate-200 bg-slate-50 px-3 py-2 outline-blue-900" name="quantityDelivered" type="number" min="1" value={formData.quantityDelivered} onChange={handleChange} required />
+          </div>
+
+          <div className="md:col-span-2">
+            <label className="mb-2 block text-sm font-semibold">Delivery Status</label>
+            <select className="w-full rounded-md border border-slate-200 bg-slate-50 px-3 py-2 outline-blue-900" name="deliveryStatus" value={formData.deliveryStatus} onChange={handleChange} required>
+              <option value="">Select status</option>
+              {deliveryStatuses.map(function (status) {
+                return (
+                <option key={status} value={status}>
+                  {status}
+                </option>
+                );
+              })}
+            </select>
+          </div>
+        </div>
+
+        <div className="mt-4 flex flex-wrap gap-2">
+          <button className="rounded-md bg-blue-900 px-5 py-2 font-semibold text-slate-50">
+            {editingId ? "Update Delivery" : "Insert Delivery"}
+          </button>
+          {editingId && (
+            <button type="button" onClick={clearForm} className="rounded-md border border-blue-900 px-5 py-2 font-semibold">
+              Cancel
+            </button>
+          )}
+        </div>
+      </form>
+
+      <div className="overflow-x-auto rounded-md border border-slate-200 bg-white">
+        <table className="w-full min-w-[900px] text-left text-sm">
+          <thead className="bg-blue-900 text-slate-50">
+            <tr>
+              <th className="p-3">Delivery Code</th>
+              <th className="p-3">Shipment</th>
+              <th className="p-3">Date</th>
+              <th className="p-3">Quantity</th>
+              <th className="p-3">Status</th>
+              <th className="p-3">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {deliveries.map(function (delivery) {
+              return (
+              <tr key={delivery._id} className="border-t border-slate-200">
+                <td className="p-3">{delivery.deliveryCode}</td>
+                <td className="p-3">{delivery.shipment ? delivery.shipment.shipmentNumber : ""}</td>
+                <td className="p-3">{formatDateForInput(delivery.deliveryDate)}</td>
+                <td className="p-3">{delivery.quantityDelivered}</td>
+                <td className="p-3">{delivery.deliveryStatus}</td>
+                <td className="p-3">
+                  <button onClick={function () { handleEdit(delivery); }} className="mr-2 rounded-md border border-blue-900 px-3 py-1 font-semibold">
+                    Edit
+                  </button>
+                  <button onClick={function () { handleDelete(delivery._id); }} className="rounded-md bg-blue-900 px-3 py-1 font-semibold text-slate-50">
+                    Delete
+                  </button>
+                </td>
+              </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default Delivery;