create-myexam-app 1.0.21 → 1.0.22

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

@@ -0,0 +1,158 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { loginUser, recoverPassword, registerUser } from "../api/userApi";
+import Message from "../components/Message";
+
+var emptyForm = {
+  username: "",
+  password: "",
+  newPassword: "",
+};
+
+function Login(props) {
+  var formState = useState(emptyForm);
+  var formData = formState[0];
+  var setFormData = formState[1];
+  var modeState = useState("login");
+  var mode = modeState[0];
+  var setMode = modeState[1];
+  var messageState = useState("");
+  var message = messageState[0];
+  var setMessage = messageState[1];
+  var messageTypeState = useState("");
+  var messageType = messageTypeState[0];
+  var setMessageType = messageTypeState[1];
+  var navigate = useNavigate();
+
+  function handleChange(event) {
+    var newFormData = Object.assign({}, formData);
+    newFormData[event.target.name] = event.target.value;
+    setFormData(newFormData);
+  }
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    setMessage("");
+    var username = formData.username.trim();
+
+    if (mode === "register") {
+      registerUser({
+          username: username,
+          password: formData.password,
+        })
+        .then(function (response) {
+        props.setUser(response.data.user);
+        navigate("/");
+        })
+        .catch(function (error) {
+          setMessageType("error");
+          setMessage(error.response && error.response.data ? error.response.data.message : "Login request failed. Check that the backend server and MongoDB are running.");
+        });
+      return;
+    }
+
+    if (mode === "recover") {
+      recoverPassword({
+        username: username,
+        newPassword: formData.newPassword,
+      })
+        .then(function (response) {
+        setMessageType("success");
+        setMessage(response.data.message);
+        setMode("login");
+        })
+        .catch(function (error) {
+          setMessageType("error");
+          setMessage(error.response && error.response.data ? error.response.data.message : "Login request failed. Check that the backend server and MongoDB are running.");
+        });
+      return;
+    }
+
+    loginUser({
+      username: username,
+      password: formData.password,
+    })
+      .then(function (response) {
+        props.setUser(response.data.user);
+        navigate("/");
+      })
+      .catch(function (error) {
+        setMessageType("error");
+        setMessage(error.response && error.response.data ? error.response.data.message : "Login request failed. Check that the backend server and MongoDB are running.");
+      });
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-slate-50 p-4 text-blue-900">
+      <div className="w-full max-w-md rounded-md border border-slate-200 bg-white p-6">
+        <h1 className="text-2xl font-bold">SUPPLY CHAIN MANAGEMENT SYSTEM</h1>
+        <p className="mt-2 text-sm text-blue-800">SupplyNet Ltd - Musanze District</p>
+
+        <div className="mt-5 flex rounded-md border border-blue-900">
+          <button className={"flex-1 px-3 py-2 " + (mode === "login" ? "bg-blue-900 text-slate-50" : "bg-slate-50")} onClick={function () { setMode("login"); }}>
+            Login
+          </button>
+          <button className={"flex-1 px-3 py-2 " + (mode === "register" ? "bg-blue-900 text-slate-50" : "bg-slate-50")} onClick={function () { setMode("register"); }}>
+            Create User
+          </button>
+        </div>
+
+        <button className="mt-3 text-sm font-semibold text-blue-900" onClick={function () { setMode("recover"); }}>
+          Password Recovery
+        </button>
+
+        <form className="mt-5" onSubmit={handleSubmit}>
+          <Message type={messageType} text={message} />
+
+          <label className="mb-2 block text-sm font-semibold">Username</label>
+          <input
+            className="mb-4 w-full rounded-md border border-slate-200 bg-slate-50 px-3 py-2 outline-blue-900"
+            name="username"
+            value={formData.username}
+            onChange={handleChange}
+            required
+            autoComplete="username"
+          />
+
+          {mode !== "recover" && (
+            <>
+              <label className="mb-2 block text-sm font-semibold">Password</label>
+              <input
+                className="mb-4 w-full rounded-md border border-slate-200 bg-slate-50 px-3 py-2 outline-blue-900"
+                name="password"
+                type="password"
+                value={formData.password}
+                onChange={handleChange}
+                required
+                minLength="6"
+                autoComplete={mode === "register" ? "new-password" : "current-password"}
+              />
+            </>
+          )}
+
+          {mode === "recover" && (
+            <>
+              <label className="mb-2 block text-sm font-semibold">New Password</label>
+              <input
+                className="mb-4 w-full rounded-md border border-slate-200 bg-slate-50 px-3 py-2 outline-blue-900"
+                name="newPassword"
+                type="password"
+                value={formData.newPassword}
+                onChange={handleChange}
+                required
+                minLength="6"
+                autoComplete="new-password"
+              />
+            </>
+          )}
+
+          <button className="w-full rounded-md bg-blue-900 px-4 py-2 font-semibold text-slate-50">
+            {mode === "register" ? "Create User" : mode === "recover" ? "Recover Password" : "Login"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default Login;

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

@@ -0,0 +1,24 @@
+import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { logoutUser } from "../api/userApi";
+
+function Logout(props) {
+  var navigate = useNavigate();
+
+  useEffect(function () {
+    logoutUser()
+      .catch(function () {})
+      .finally(function () {
+        props.setUser(null);
+        navigate("/login");
+      });
+  }, [navigate, props.setUser]);
+
+  return (
+    <div className="rounded-md border border-slate-200 bg-white p-5">
+      Logging out...
+    </div>
+  );
+}
+
+export default Logout;

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

@@ -0,0 +1,221 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { getDeliveries } from "../api/deliveryApi";
+import { getShipments } from "../api/shipmentApi";
+import { getSuppliers } from "../api/supplierApi";
+import PageHeader from "../components/PageHeader";
+
+function formatDate(dateValue) {
+  if (!dateValue) return "";
+  return new Date(dateValue).toISOString().split("T")[0];
+}
+
+function getPeriodRange(period) {
+  var now = new Date();
+  var start = new Date(now);
+  var end = new Date(now);
+
+  start.setHours(0, 0, 0, 0);
+  end.setHours(23, 59, 59, 999);
+
+  if (period === "weekly") {
+    start.setDate(now.getDate() - now.getDay());
+  }
+
+  if (period === "monthly") {
+    start.setDate(1);
+  }
+
+  return { start: start, end: end };
+}
+
+function isInPeriod(dateValue, period) {
+  if (!dateValue) return false;
+  var date = new Date(dateValue);
+  var range = getPeriodRange(period);
+  return date >= range.start && date <= range.end;
+}
+
+function Reports() {
+  var periodState = useState("daily");
+  var period = periodState[0];
+  var setPeriod = periodState[1];
+  var reportTypeState = useState("suppliers");
+  var reportType = reportTypeState[0];
+  var setReportType = reportTypeState[1];
+  var supplierState = useState([]);
+  var suppliers = supplierState[0];
+  var setSuppliers = supplierState[1];
+  var shipmentState = useState([]);
+  var shipments = shipmentState[0];
+  var setShipments = shipmentState[1];
+  var deliveryState = useState([]);
+  var deliveries = deliveryState[0];
+  var setDeliveries = deliveryState[1];
+
+  useEffect(function () {
+    function loadReports() {
+      Promise.all([
+        getSuppliers(),
+        getShipments(),
+        getDeliveries(),
+      ])
+        .then(function (responses) {
+          setSuppliers(responses[0].data);
+          setShipments(responses[1].data);
+          setDeliveries(responses[2].data);
+        });
+    }
+
+    loadReports();
+  }, []);
+
+  var reportRows = useMemo(function () {
+    if (reportType === "suppliers") {
+      return suppliers.filter(function (supplier) {
+        return isInPeriod(supplier.createdAt, period);
+      });
+    }
+
+    if (reportType === "shipments") {
+      return shipments.filter(function (shipment) {
+        return isInPeriod(shipment.shipmentDate, period);
+      });
+    }
+
+    return deliveries.filter(function (delivery) {
+      return isInPeriod(delivery.deliveryDate, period);
+    });
+  }, [period, reportType, suppliers, shipments, deliveries]);
+
+  return (
+    <div className="print-area">
+      <div className="no-print">
+        <PageHeader title="Reports" subtitle="Daily, weekly, and monthly printable reports" />
+
+        <div className="mb-5 grid gap-3 rounded-md border border-slate-200 bg-white p-4 md:grid-cols-3">
+          <div>
+            <label className="mb-2 block text-sm font-semibold">Period</label>
+            <select className="w-full rounded-md border border-slate-200 bg-slate-50 px-3 py-2 outline-blue-900" value={period} onChange={function (event) { setPeriod(event.target.value); }}>
+              <option value="daily">Daily Report</option>
+              <option value="weekly">Weekly Report</option>
+              <option value="monthly">Monthly Report</option>
+            </select>
+          </div>
+
+          <div>
+            <label className="mb-2 block text-sm font-semibold">Records</label>
+            <select className="w-full rounded-md border border-slate-200 bg-slate-50 px-3 py-2 outline-blue-900" value={reportType} onChange={function (event) { setReportType(event.target.value); }}>
+              <option value="suppliers">Suppliers</option>
+              <option value="shipments">Shipments</option>
+              <option value="deliveries">Deliveries</option>
+            </select>
+          </div>
+
+          <div className="flex items-end">
+            <button onClick={function () { window.print(); }} className="w-full rounded-md bg-blue-900 px-5 py-2 font-semibold text-slate-50">
+              Print Report
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <section className="rounded-md border border-slate-200 bg-white p-4">
+        <div className="mb-4 text-center">
+          <h2 className="text-xl font-bold">SupplyNet Ltd</h2>
+          <p className="text-sm text-blue-800">Supply Chain Management System</p>
+          <p className="mt-2 text-sm font-semibold capitalize">
+            {period} {reportType} report
+          </p>
+          <p className="text-sm text-blue-800">Generated on {formatDate(new Date())}</p>
+        </div>
+
+        <div className="overflow-x-auto">
+          {reportType === "suppliers" && (
+            <table className="w-full min-w-[760px] text-left text-sm">
+              <thead className="bg-blue-900 text-slate-50">
+                <tr>
+                  <th className="p-3">Code</th>
+                  <th className="p-3">Name</th>
+                  <th className="p-3">Telephone</th>
+                  <th className="p-3">Address</th>
+                  <th className="p-3">Email</th>
+                </tr>
+              </thead>
+              <tbody>
+                {reportRows.map(function (supplier) {
+                  return (
+                  <tr key={supplier._id} className="border-t border-slate-200">
+                    <td className="p-3">{supplier.supplierCode}</td>
+                    <td className="p-3">{supplier.supplierName}</td>
+                    <td className="p-3">{supplier.telephone}</td>
+                    <td className="p-3">{supplier.address}</td>
+                    <td className="p-3">{supplier.email}</td>
+                  </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          )}
+
+          {reportType === "shipments" && (
+            <table className="w-full min-w-[820px] text-left text-sm">
+              <thead className="bg-blue-900 text-slate-50">
+                <tr>
+                  <th className="p-3">Shipment No</th>
+                  <th className="p-3">Date</th>
+                  <th className="p-3">Supplier</th>
+                  <th className="p-3">Destination</th>
+                  <th className="p-3">Status</th>
+                </tr>
+              </thead>
+              <tbody>
+                {reportRows.map(function (shipment) {
+                  return (
+                  <tr key={shipment._id} className="border-t border-slate-200">
+                    <td className="p-3">{shipment.shipmentNumber}</td>
+                    <td className="p-3">{formatDate(shipment.shipmentDate)}</td>
+                    <td className="p-3">{shipment.supplier ? shipment.supplier.supplierName : ""}</td>
+                    <td className="p-3">{shipment.destination}</td>
+                    <td className="p-3">{shipment.shipmentStatus}</td>
+                  </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          )}
+
+          {reportType === "deliveries" && (
+            <table className="w-full min-w-[820px] text-left text-sm">
+              <thead className="bg-blue-900 text-slate-50">
+                <tr>
+                  <th className="p-3">Delivery Code</th>
+                  <th className="p-3">Date</th>
+                  <th className="p-3">Shipment</th>
+                  <th className="p-3">Quantity</th>
+                  <th className="p-3">Status</th>
+                </tr>
+              </thead>
+              <tbody>
+                {reportRows.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">{formatDate(delivery.deliveryDate)}</td>
+                    <td className="p-3">{delivery.shipment ? delivery.shipment.shipmentNumber : ""}</td>
+                    <td className="p-3">{delivery.quantityDelivered}</td>
+                    <td className="p-3">{delivery.deliveryStatus}</td>
+                  </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          )}
+        </div>
+
+        {reportRows.length === 0 && <p className="mt-4 text-center text-sm font-semibold">No records found for this report.</p>}
+      </section>
+    </div>
+  );
+}
+
+export default Reports;

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

@@ -0,0 +1,212 @@
+import React, { useEffect, useState } from "react";
+import { getSuppliers } from "../api/supplierApi";
+import { createShipment, deleteShipment, getShipments, updateShipment } from "../api/shipmentApi";
+import Message from "../components/Message";
+import PageHeader from "../components/PageHeader";
+
+var emptyShipment = {
+  supplier: "",
+  shipmentNumber: "",
+  shipmentDate: "",
+  shipmentStatus: "",
+  destination: "",
+};
+
+var shipmentStatuses = ["Pending", "In Transit", "Delivered", "Cancelled"];
+
+function formatDateForInput(dateValue) {
+  if (!dateValue) return "";
+  return new Date(dateValue).toISOString().split("T")[0];
+}
+
+function Shipment() {
+  var formState = useState(emptyShipment);
+  var formData = formState[0];
+  var setFormData = formState[1];
+  var supplierState = useState([]);
+  var suppliers = supplierState[0];
+  var setSuppliers = supplierState[1];
+  var shipmentState = useState([]);
+  var shipments = shipmentState[0];
+  var setShipments = shipmentState[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([getSuppliers(), getShipments()])
+      .then(function (responses) {
+        setSuppliers(responses[0].data);
+        setShipments(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(emptyShipment);
+    setEditingId("");
+  }
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    setMessage("");
+
+    var request = editingId ? updateShipment(editingId, formData) : createShipment(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 shipment");
+      });
+  }
+
+  function handleEdit(shipment) {
+    setEditingId(shipment._id);
+    setFormData({
+      supplier: shipment.supplier && shipment.supplier._id ? shipment.supplier._id : shipment.supplier,
+      shipmentNumber: shipment.shipmentNumber,
+      shipmentDate: formatDateForInput(shipment.shipmentDate),
+      shipmentStatus: shipment.shipmentStatus,
+      destination: shipment.destination,
+    });
+  }
+
+  function handleDelete(id) {
+    if (!confirm("Delete this shipment?")) return;
+
+    deleteShipment(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 shipment");
+      });
+  }
+
+  return (
+    <div>
+      <PageHeader title="Shipment" subtitle="Insert, get, update, and delete shipment 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">Supplier</label>
+            <select className="w-full rounded-md border border-slate-200 bg-slate-50 px-3 py-2 outline-blue-900" name="supplier" value={formData.supplier} onChange={handleChange} required>
+              <option value="">Select supplier</option>
+              {suppliers.map(function (supplier) {
+                return (
+                <option key={supplier._id} value={supplier._id}>
+                  {supplier.supplierCode} - {supplier.supplierName}
+                </option>
+                );
+              })}
+            </select>
+          </div>
+
+          <div>
+            <label className="mb-2 block text-sm font-semibold">Shipment Number</label>
+            <input className="w-full rounded-md border border-slate-200 bg-slate-50 px-3 py-2 outline-blue-900" name="shipmentNumber" value={formData.shipmentNumber} onChange={handleChange} required />
+          </div>
+
+          <div>
+            <label className="mb-2 block text-sm font-semibold">Shipment Date</label>
+            <input className="w-full rounded-md border border-slate-200 bg-slate-50 px-3 py-2 outline-blue-900" name="shipmentDate" type="date" value={formData.shipmentDate} onChange={handleChange} required />
+          </div>
+
+          <div>
+            <label className="mb-2 block text-sm font-semibold">Shipment Status</label>
+            <select className="w-full rounded-md border border-slate-200 bg-slate-50 px-3 py-2 outline-blue-900" name="shipmentStatus" value={formData.shipmentStatus} onChange={handleChange} required>
+              <option value="">Select status</option>
+              {shipmentStatuses.map(function (status) {
+                return (
+                <option key={status} value={status}>
+                  {status}
+                </option>
+                );
+              })}
+            </select>
+          </div>
+
+          <div className="md:col-span-2">
+            <label className="mb-2 block text-sm font-semibold">Destination</label>
+            <input className="w-full rounded-md border border-slate-200 bg-slate-50 px-3 py-2 outline-blue-900" name="destination" value={formData.destination} onChange={handleChange} required />
+          </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 Shipment" : "Insert Shipment"}
+          </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">Shipment No</th>
+              <th className="p-3">Supplier</th>
+              <th className="p-3">Date</th>
+              <th className="p-3">Status</th>
+              <th className="p-3">Destination</th>
+              <th className="p-3">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {shipments.map(function (shipment) {
+              return (
+              <tr key={shipment._id} className="border-t border-slate-200">
+                <td className="p-3">{shipment.shipmentNumber}</td>
+                <td className="p-3">{shipment.supplier ? shipment.supplier.supplierName : ""}</td>
+                <td className="p-3">{formatDateForInput(shipment.shipmentDate)}</td>
+                <td className="p-3">{shipment.shipmentStatus}</td>
+                <td className="p-3">{shipment.destination}</td>
+                <td className="p-3">
+                  <button onClick={function () { handleEdit(shipment); }} className="mr-2 rounded-md border border-blue-900 px-3 py-1 font-semibold">
+                    Edit
+                  </button>
+                  <button onClick={function () { handleDelete(shipment._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 Shipment;