create-ishvexa-app 1.0.0

package/templates/sims-app/frontend/src/api/authApi.js

@@ -0,0 +1,7 @@
+import api from "./client";
+
+export const registerUser = (payload) => api.post("/auth/register", payload);
+export const loginUser = (payload) => api.post("/auth/login", payload);
+export const forgotPassword = (payload) => api.post("/auth/forgot-password", payload);
+export const logoutUser = () => api.post("/auth/logout");
+export const fetchCurrentUser = () => api.get("/auth/me");

package/templates/sims-app/frontend/src/api/client.js

@@ -0,0 +1,8 @@
+import axios from "axios";
+
+const api = axios.create({
+  baseURL: "http://localhost:5001/api",
+  withCredentials: true,
+});
+
+export default api;

package/templates/sims-app/frontend/src/api/simsReportApi.js

@@ -0,0 +1,5 @@
+import api from "./client";
+
+export const getDailyStockStatus = (date) =>
+  api.get("/reports/daily-stock-status", { params: { date } });
+export const getDailyStockOut = (date) => api.get("/reports/daily-stockout", { params: { date } });

package/templates/sims-app/frontend/src/api/sparePartsApi.js

@@ -0,0 +1,4 @@
+import api from "./client";
+
+export const getSpareParts = () => api.get("/spare-parts");
+export const createSparePart = (payload) => api.post("/spare-parts", payload);

package/templates/sims-app/frontend/src/api/stockInApi.js

@@ -0,0 +1,4 @@
+import api from "./client";
+
+export const getStockIn = () => api.get("/stock-in");
+export const createStockIn = (payload) => api.post("/stock-in", payload);

package/templates/sims-app/frontend/src/api/stockOutApi.js

@@ -0,0 +1,6 @@
+import api from "./client";
+
+export const getStockOut = () => api.get("/stock-out");
+export const createStockOut = (payload) => api.post("/stock-out", payload);
+export const updateStockOut = (id, payload) => api.put(`/stock-out/${id}`, payload);
+export const deleteStockOut = (id) => api.delete(`/stock-out/${id}`);

package/templates/sims-app/frontend/src/api/usersApi.js

@@ -0,0 +1,3 @@
+import { loginUser, registerUser, recoverPassword, fetchCurrentUser, logoutUser } from "./authApi";
+
+export { loginUser, registerUser, recoverPassword, fetchCurrentUser, logoutUser };

package/templates/sims-app/frontend/src/components/AppLayout.jsx

@@ -0,0 +1,47 @@
+import { Link, NavLink, Outlet } from "react-router-dom";
+
+function AppLayout({ onLogout, username }) {
+  const linkClass = ({ isActive }) =>
+    `rounded-md px-3 py-2 text-sm font-medium transition ${
+      isActive ? "bg-emerald-800 text-white" : "text-emerald-900 hover:bg-emerald-100"
+    }`;
+
+  return (
+    <div className="min-h-screen bg-slate-100">
+      <header className="bg-white shadow-sm">
+        <div className="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-3 px-4 py-4">
+          <Link to="/spare-part" className="text-lg font-bold text-emerald-900">
+            SIMS — Stock Inventory
+          </Link>
+          <div className="text-sm text-slate-600">User: {username}</div>
+        </div>
+        <nav className="mx-auto flex max-w-6xl flex-wrap gap-2 px-4 pb-4">
+          <NavLink to="/spare-part" className={linkClass}>
+            Spare Part
+          </NavLink>
+          <NavLink to="/stock-in" className={linkClass}>
+            Stock In
+          </NavLink>
+          <NavLink to="/stock-out" className={linkClass}>
+            Stock Out
+          </NavLink>
+          <NavLink to="/reports" className={linkClass}>
+            Reports
+          </NavLink>
+          <button
+            type="button"
+            onClick={onLogout}
+            className="ml-auto rounded-md bg-red-600 px-3 py-2 text-sm font-medium text-white hover:bg-red-700"
+          >
+            Logout
+          </button>
+        </nav>
+      </header>
+      <main className="mx-auto max-w-6xl p-4">
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+export default AppLayout;

package/templates/sims-app/frontend/src/index.css

@@ -0,0 +1,7 @@
+@import "tailwindcss";
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: #f0f4f0;
+}

package/templates/sims-app/frontend/src/main.jsx

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

package/templates/sims-app/frontend/src/pages/ForgotPassword.jsx

@@ -0,0 +1,111 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { forgotPassword } from "../api/authApi";
+import { strongPasswordError } from "../utils/passwordPolicy";
+
+function ForgotPassword() {
+  const navigate = useNavigate();
+  const [form, setForm] = useState({ email: "", newPassword: "", confirmPassword: "" });
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [error, setError] = useState("");
+  const [message, setMessage] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const validate = () => {
+    const err = {};
+    const email = form.email.trim();
+    if (!email) err.email = "Email is required.";
+    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) err.email = "Enter a valid email address.";
+    if (!form.newPassword) err.newPassword = "New password is required.";
+    else {
+      const pwdErr = strongPasswordError(form.newPassword);
+      if (pwdErr) err.newPassword = pwdErr;
+    }
+    if (!form.confirmPassword) err.confirmPassword = "Confirm password is required.";
+    else if (form.newPassword && form.newPassword !== form.confirmPassword) {
+      err.confirmPassword = "Passwords must match.";
+    }
+    setFieldErrors(err);
+    return Object.keys(err).length === 0;
+  };
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setError("");
+    setMessage("");
+    if (!validate()) return;
+    setLoading(true);
+    try {
+      const r = await forgotPassword({
+        email: form.email.trim(),
+        newPassword: form.newPassword,
+        confirmPassword: form.confirmPassword,
+      });
+      setMessage(r.data.message || "Password reset successfully.");
+      setTimeout(() => navigate("/login", { replace: true }), 2000);
+    } catch (err) {
+      setError(err.response?.data?.message || "Reset failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <div className="w-full max-w-md rounded-xl border border-amber-200 bg-white p-6 shadow-lg">
+        <h1 className="text-2xl font-bold text-amber-900">Forgot password</h1>
+        <p className="mb-4 text-sm text-slate-600">Enter your email and a new password</p>
+        {error && <div className="mb-2 text-sm text-red-700">{error}</div>}
+        {message && <div className="mb-2 text-sm text-green-800">{message}</div>}
+        <form onSubmit={submit} className="space-y-3">
+          <div>
+            <input
+              type="email"
+              className="w-full rounded border px-3 py-2"
+              placeholder="Email"
+              value={form.email}
+              onChange={(e) => setForm({ ...form, email: e.target.value })}
+            />
+            {fieldErrors.email && <p className="mt-1 text-xs text-red-600">{fieldErrors.email}</p>}
+          </div>
+          <div>
+            <input
+              type="password"
+              className="w-full rounded border px-3 py-2"
+              placeholder="New password (strong)"
+              value={form.newPassword}
+              onChange={(e) => setForm({ ...form, newPassword: e.target.value })}
+            />
+            {fieldErrors.newPassword && (
+              <p className="mt-1 text-xs text-red-600">{fieldErrors.newPassword}</p>
+            )}
+          </div>
+          <div>
+            <input
+              type="password"
+              className="w-full rounded border px-3 py-2"
+              placeholder="Confirm password"
+              value={form.confirmPassword}
+              onChange={(e) => setForm({ ...form, confirmPassword: e.target.value })}
+            />
+            {fieldErrors.confirmPassword && (
+              <p className="mt-1 text-xs text-red-600">{fieldErrors.confirmPassword}</p>
+            )}
+          </div>
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full rounded bg-amber-600 py-2 text-white hover:bg-amber-700 disabled:opacity-60"
+          >
+            {loading ? "Please wait…" : "Reset password"}
+          </button>
+        </form>
+        <Link to="/login" className="mt-3 inline-block text-sm text-blue-700 hover:underline">
+          Back to login
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default ForgotPassword;

package/templates/sims-app/frontend/src/pages/LoginPage.jsx

@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { loginUser } from "../api/authApi";
+
+function LoginPage({ onLoginSuccess }) {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const navigate = useNavigate();
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    setError("");
+    const u = username.trim();
+    if (u.length < 3) {
+      setError("Username must be at least 3 characters");
+      return;
+    }
+    try {
+      const r = await loginUser({ username: u, password });
+      onLoginSuccess(r.data.username);
+      navigate("/spare-part");
+    } catch (err) {
+      setError(err.response?.data?.message || "Login failed");
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <div className="w-full max-w-md rounded-xl border border-emerald-200 bg-white p-6 shadow-lg">
+        <h1 className="text-2xl font-bold text-emerald-900">SIMS Login</h1>
+        <p className="mb-4 text-slate-600">Stock Inventory Management System</p>
+        {error && <div className="mb-3 rounded bg-red-50 px-3 py-2 text-sm text-red-700">{error}</div>}
+        <form onSubmit={handleLogin} className="space-y-3">
+          <input
+            className="w-full rounded border px-3 py-2"
+            placeholder="Username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            minLength={3}
+            required
+          />
+          <input
+            type="password"
+            className="w-full rounded border px-3 py-2"
+            placeholder="Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <button
+            type="submit"
+            className="w-full rounded bg-emerald-700 py-2 font-medium text-white hover:bg-emerald-800"
+          >
+            Login
+          </button>
+        </form>
+        <div className="mt-4 space-y-1 text-sm">
+          <Link to="/register" className="block text-emerald-800 hover:underline">
+            Create account
+          </Link>
+          <Link to="/forgot-password" className="block text-amber-800 hover:underline">
+            Forgot password
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default LoginPage;

package/templates/sims-app/frontend/src/pages/RegisterPage.jsx

@@ -0,0 +1,99 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { registerUser } from "../api/authApi";
+import { strongPasswordError } from "../utils/passwordPolicy";
+
+function RegisterPage() {
+  const [form, setForm] = useState({ username: "", email: "", password: "" });
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [msg, setMsg] = useState("");
+  const [error, setError] = useState("");
+
+  const validate = () => {
+    const err = {};
+    const u = form.username.trim();
+    if (u.length < 3) err.username = "Username must be at least 3 characters";
+    const email = form.email.trim();
+    if (!email) err.email = "Email is required.";
+    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) err.email = "Enter a valid email address.";
+    const pErr = strongPasswordError(form.password);
+    if (pErr) err.password = pErr;
+    setFieldErrors(err);
+    return Object.keys(err).length === 0;
+  };
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setError("");
+    setMsg("");
+    if (!validate()) return;
+    try {
+      const r = await registerUser({
+        username: form.username.trim(),
+        email: form.email.trim(),
+        password: form.password,
+      });
+      setMsg(r.data.message);
+      setForm({ username: form.username, email: "", password: "" });
+    } catch (err) {
+      setError(err.response?.data?.message || "Registration failed");
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <div className="w-full max-w-md rounded-xl border border-emerald-200 bg-white p-6 shadow-lg">
+        <h1 className="text-2xl font-bold text-emerald-900">Register</h1>
+        <p className="mb-2 text-sm text-slate-500">
+          Strong password: 8+ chars, uppercase, lowercase, number
+        </p>
+        {error && <div className="mb-2 rounded bg-red-50 px-3 py-2 text-sm text-red-700">{error}</div>}
+        {msg && <div className="mb-2 rounded bg-green-50 px-3 py-2 text-sm text-green-800">{msg}</div>}
+        <form onSubmit={submit} className="space-y-3">
+          <div>
+            <input
+              className="w-full rounded border px-3 py-2"
+              placeholder="Username"
+              value={form.username}
+              onChange={(e) => setForm({ ...form, username: e.target.value })}
+              minLength={3}
+              required
+            />
+            {fieldErrors.username && <p className="mt-1 text-xs text-red-600">{fieldErrors.username}</p>}
+          </div>
+          <div>
+            <input
+              type="email"
+              className="w-full rounded border px-3 py-2"
+              placeholder="Email"
+              value={form.email}
+              onChange={(e) => setForm({ ...form, email: e.target.value })}
+              required
+            />
+            {fieldErrors.email && <p className="mt-1 text-xs text-red-600">{fieldErrors.email}</p>}
+          </div>
+          <div>
+            <input
+              type="password"
+              className="w-full rounded border px-3 py-2"
+              placeholder="Password"
+              value={form.password}
+              onChange={(e) => setForm({ ...form, password: e.target.value })}
+              minLength={8}
+              required
+            />
+            {fieldErrors.password && <p className="mt-1 text-xs text-red-600">{fieldErrors.password}</p>}
+          </div>
+          <button type="submit" className="w-full rounded bg-emerald-600 py-2 text-white hover:bg-emerald-700">
+            Register
+          </button>
+        </form>
+        <Link to="/login" className="mt-3 inline-block text-sm text-blue-700 hover:underline">
+          Back to login
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default RegisterPage;

package/templates/sims-app/frontend/src/pages/ReportsPage.jsx

@@ -0,0 +1,120 @@
+import { useState } from "react";
+import { getDailyStockOut, getDailyStockStatus } from "../api/simsReportApi";
+
+function ReportsPage() {
+  const [date, setDate] = useState(() => new Date().toISOString().slice(0, 10));
+  const [statusRows, setStatusRows] = useState([]);
+  const [outRows, setOutRows] = useState([]);
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [message, setMessage] = useState("");
+
+  const run = async () => {
+    setMessage("");
+    if (!date) {
+      setFieldErrors({ date: "Please select a date to generate the report." });
+      return;
+    }
+    setFieldErrors({});
+    try {
+      const [a, b] = await Promise.all([getDailyStockStatus(date), getDailyStockOut(date)]);
+      setStatusRows(a.data);
+      setOutRows(b.data);
+      if (!a.data.length && !b.data.length) {
+        setMessage("No stock data found for the selected date.");
+      }
+    } catch {
+      setMessage("Report failed. Check your connection and try again.");
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-wrap items-end gap-2">
+        <div>
+          <label className="text-sm text-slate-600">Report date</label>
+          <input
+            type="date"
+            className={`block rounded border px-2 py-2 ${fieldErrors.date ? "border-red-500" : ""}`}
+            value={date}
+            onChange={(e) => {
+              setDate(e.target.value);
+              setFieldErrors({});
+            }}
+          />
+          {fieldErrors.date && <p className="mt-1 text-xs text-red-600">{fieldErrors.date}</p>}
+        </div>
+        <button
+          type="button"
+          className="rounded bg-emerald-800 px-4 py-2 text-white hover:bg-emerald-900"
+          onClick={run}
+        >
+          Generate
+        </button>
+      </div>
+      {message && <p className="text-sm text-slate-500">{message}</p>}
+
+      <section className="rounded-lg border border-emerald-200 bg-white p-4 shadow">
+        <h2 className="mb-3 text-lg font-semibold text-emerald-900">Daily stock status</h2>
+        <p className="mb-2 text-sm text-slate-500">Spare name, stored, stock in / out (day), remaining (current stock)</p>
+        <div className="overflow-x-auto">
+          <table className="w-full min-w-[720px] text-sm">
+            <thead>
+              <tr className="bg-slate-100">
+                <th className="p-2 text-left">Spare name</th>
+                <th className="p-2 text-left">Category</th>
+                <th className="p-2 text-right">Stored qty (current)</th>
+                <th className="p-2 text-right">Stock in (day)</th>
+                <th className="p-2 text-right">Stock out (day)</th>
+                <th className="p-2 text-right">Remaining (current)</th>
+              </tr>
+            </thead>
+            <tbody>
+              {statusRows.map((r) => (
+                <tr key={r.spareName + r.category} className="border-b">
+                  <td className="p-2">{r.spareName}</td>
+                  <td className="p-2">{r.category}</td>
+                  <td className="p-2 text-right">{r.storedQuantity}</td>
+                  <td className="p-2 text-right">{r.stockInQuantity}</td>
+                  <td className="p-2 text-right">{r.stockOutQuantity}</td>
+                  <td className="p-2 text-right">{r.remainingQuantity}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <section className="rounded-lg border border-blue-200 bg-white p-4 shadow">
+        <h2 className="mb-3 text-lg font-semibold text-blue-900">Daily stock out report</h2>
+        <div className="overflow-x-auto">
+          <table className="w-full min-w-[600px] text-sm">
+            <thead>
+              <tr className="bg-slate-100">
+                <th className="p-2 text-left">Spare</th>
+                <th className="p-2 text-right">Qty out</th>
+                <th className="p-2 text-right">Unit</th>
+                <th className="p-2 text-right">Total</th>
+                <th className="p-2 text-left">Date</th>
+              </tr>
+            </thead>
+            <tbody>
+              {outRows.map((r) => (
+                <tr key={r.id} className="border-b">
+                  <td className="p-2">{r.spareName}</td>
+                  <td className="p-2 text-right">{r.stockOutQuantity}</td>
+                  <td className="p-2 text-right">{r.stockOutUnitPrice}</td>
+                  <td className="p-2 text-right">{r.stockOutTotalPrice}</td>
+                  <td className="p-2">
+                    {r.stockOutDate ? new Date(r.stockOutDate).toLocaleString() : ""}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export default ReportsPage;

package/templates/sims-app/frontend/src/pages/SparePartPage.jsx

@@ -0,0 +1,148 @@
+import { useEffect, useState } from "react";
+import { getSpareParts, createSparePart } from "../api/sparePartsApi";
+
+const initial = { name: "", category: "", quantity: "", unitPrice: "" };
+
+const validateSparePart = (form) => {
+  const errors = {};
+  if (!form.name.trim()) errors.name = "Name is required.";
+  if (!form.category.trim()) errors.category = "Category is required.";
+  if (form.quantity === "" || Number.isNaN(Number(form.quantity)) || Number(form.quantity) < 0) {
+    errors.quantity = "Quantity must be 0 or greater.";
+  }
+  if (form.unitPrice === "" || Number.isNaN(Number(form.unitPrice)) || Number(form.unitPrice) < 0) {
+    errors.unitPrice = "Unit price must be 0 or greater.";
+  }
+  return errors;
+};
+
+function SparePartPage() {
+  const [form, setForm] = useState(initial);
+  const [rows, setRows] = useState([]);
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [message, setMessage] = useState("");
+
+  const load = () =>
+    getSpareParts()
+      .then((r) => setRows(r.data))
+      .catch(() => setMessage("Failed to load parts"));
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const setField = (name, value) => {
+    setForm((f) => ({ ...f, [name]: value }));
+    setFieldErrors((prev) => ({ ...prev, [name]: "" }));
+  };
+
+  const inputClass = (key) =>
+    `w-full rounded border px-3 py-2 ${fieldErrors[key] ? "border-red-500" : ""}`;
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    setMessage("");
+    const errors = validateSparePart(form);
+    if (Object.keys(errors).length) {
+      setFieldErrors(errors);
+      return;
+    }
+    try {
+      await createSparePart({
+        name: form.name.trim(),
+        category: form.category.trim(),
+        quantity: Number(form.quantity),
+        unitPrice: Number(form.unitPrice),
+      });
+      setForm(initial);
+      setFieldErrors({});
+      setMessage("Saved");
+      load();
+    } catch (err) {
+      setMessage(err.response?.data?.message || "Failed to save");
+    }
+  };
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2">
+      <section className="rounded-lg border border-emerald-200 bg-white p-4 shadow">
+        <h2 className="mb-3 text-lg font-semibold text-emerald-900">Spare Part (insert only)</h2>
+        <form onSubmit={onSubmit} className="space-y-2">
+          <input
+            name="name"
+            className={inputClass("name")}
+            placeholder="Name"
+            value={form.name}
+            onChange={(e) => setField("name", e.target.value)}
+          />
+          {fieldErrors.name && <p className="text-xs text-red-600">{fieldErrors.name}</p>}
+          <input
+            name="category"
+            className={inputClass("category")}
+            placeholder="Category"
+            value={form.category}
+            onChange={(e) => setField("category", e.target.value)}
+          />
+          {fieldErrors.category && <p className="text-xs text-red-600">{fieldErrors.category}</p>}
+          <input
+            type="number"
+            name="quantity"
+            className={inputClass("quantity")}
+            placeholder="Quantity"
+            min="0"
+            value={form.quantity}
+            onChange={(e) => setField("quantity", e.target.value)}
+          />
+          {fieldErrors.quantity && <p className="text-xs text-red-600">{fieldErrors.quantity}</p>}
+          <input
+            type="number"
+            name="unitPrice"
+            className={inputClass("unitPrice")}
+            placeholder="Unit price"
+            min="0"
+            step="0.01"
+            value={form.unitPrice}
+            onChange={(e) => setField("unitPrice", e.target.value)}
+          />
+          {fieldErrors.unitPrice && <p className="text-xs text-red-600">{fieldErrors.unitPrice}</p>}
+          <button
+            type="submit"
+            className="w-full rounded bg-emerald-700 py-2 font-medium text-white hover:bg-emerald-800"
+          >
+            Save
+          </button>
+        </form>
+        {message && <p className="mt-2 text-sm text-slate-600">{message}</p>}
+      </section>
+      <section className="rounded-lg border border-slate-200 bg-white p-4 shadow">
+        <h2 className="mb-3 text-lg font-semibold">Parts list (read)</h2>
+        <div className="max-h-96 overflow-auto">
+          <table className="w-full text-left text-sm">
+            <thead className="sticky top-0 bg-slate-100">
+              <tr>
+                <th className="p-2">Name</th>
+                <th className="p-2">Category</th>
+                <th className="p-2">Qty</th>
+                <th className="p-2">Unit</th>
+                <th className="p-2">Total</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((p) => (
+                <tr key={p._id} className="border-b">
+                  <td className="p-2">{p.name}</td>
+                  <td className="p-2">{p.category}</td>
+                  <td className="p-2">{p.quantity}</td>
+                  <td className="p-2">{p.unitPrice}</td>
+                  <td className="p-2">{p.totalPrice}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export default SparePartPage;