create-steve-rogers 1.0.0 → 1.0.2

package/apps/SIMS/frontend/src/pages/DashboardPage.jsx

@@ -0,0 +1,179 @@
+import { useEffect, useMemo, useState } from "react";
+import { getSpareParts } from "../api/sparePartsApi";
+import { getStockIn } from "../api/stockInApi";
+import { getStockOut } from "../api/stockOutApi";
+
+const money = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  maximumFractionDigits: 2,
+});
+
+const number = new Intl.NumberFormat("en-US");
+
+function DashboardPage() {
+  const [parts, setParts] = useState([]);
+  const [stockInRows, setStockInRows] = useState([]);
+  const [stockOutRows, setStockOutRows] = useState([]);
+  const [message, setMessage] = useState("");
+
+  useEffect(() => {
+    Promise.all([getSpareParts(), getStockIn(), getStockOut()])
+      .then(([partsRes, inRes, outRes]) => {
+        setParts(partsRes.data);
+        setStockInRows(inRes.data);
+        setStockOutRows(outRes.data);
+      })
+      .catch(() => setMessage("Dashboard data failed to load"));
+  }, []);
+
+  const summary = useMemo(() => {
+    const totalQuantity = parts.reduce((sum, item) => sum + Number(item.quantity || 0), 0);
+    const totalValue = parts.reduce((sum, item) => sum + Number(item.totalPrice || 0), 0);
+    const totalIn = stockInRows.reduce((sum, item) => sum + Number(item.stockInQuantity || 0), 0);
+    const totalOut = stockOutRows.reduce((sum, item) => sum + Number(item.stockOutQuantity || 0), 0);
+
+    return {
+      totalParts: parts.length,
+      totalQuantity,
+      totalValue,
+      totalIn,
+      totalOut,
+    };
+  }, [parts, stockInRows, stockOutRows]);
+
+  const lowStock = useMemo(
+    () =>
+      [...parts]
+        .sort((a, b) => Number(a.quantity || 0) - Number(b.quantity || 0))
+        .slice(0, 5),
+    [parts],
+  );
+
+  const categoryRows = useMemo(() => {
+    const groups = new Map();
+    parts.forEach((part) => {
+      const category = part.category || "Uncategorised";
+      const current = groups.get(category) || { category, count: 0, quantity: 0, value: 0 };
+      current.count += 1;
+      current.quantity += Number(part.quantity || 0);
+      current.value += Number(part.totalPrice || 0);
+      groups.set(category, current);
+    });
+    return [...groups.values()].sort((a, b) => b.value - a.value).slice(0, 6);
+  }, [parts]);
+
+  const recentStockOut = useMemo(
+    () =>
+      [...stockOutRows]
+        .sort((a, b) => new Date(b.stockOutDate || 0) - new Date(a.stockOutDate || 0))
+        .slice(0, 6),
+    [stockOutRows],
+  );
+
+  return (
+    <div className="dashboard-page">
+      <div className="dashboard-hero">
+        <div>
+          <p className="dashboard-kicker">Live overview</p>
+          <h1>Inventory dashboard</h1>
+        </div>
+        <div className="dashboard-hero-total">
+          <span>Total value</span>
+          <strong>{money.format(summary.totalValue)}</strong>
+        </div>
+      </div>
+
+      {message && <p className="dashboard-message">{message}</p>}
+
+      <div className="dashboard-stats">
+        <article>
+          <span>Parts</span>
+          <strong>{number.format(summary.totalParts)}</strong>
+        </article>
+        <article>
+          <span>Stored units</span>
+          <strong>{number.format(summary.totalQuantity)}</strong>
+        </article>
+        <article>
+          <span>Stock in units</span>
+          <strong>{number.format(summary.totalIn)}</strong>
+        </article>
+        <article>
+          <span>Stock out units</span>
+          <strong>{number.format(summary.totalOut)}</strong>
+        </article>
+      </div>
+
+      <div className="dashboard-grid">
+        <section className="dashboard-panel dashboard-panel-wide">
+          <h2>Category value</h2>
+          <div className="dashboard-bars">
+            {categoryRows.map((row) => {
+              const percent = summary.totalValue ? Math.max((row.value / summary.totalValue) * 100, 5) : 0;
+              return (
+                <div key={row.category} className="dashboard-bar-row">
+                  <div>
+                    <strong>{row.category}</strong>
+                    <span>
+                      {row.count} part{row.count === 1 ? "" : "s"} / {number.format(row.quantity)} units
+                    </span>
+                  </div>
+                  <div className="dashboard-bar-track" aria-label={`${row.category} value`}>
+                    <span style={{ width: `${percent}%` }} />
+                  </div>
+                  <em>{money.format(row.value)}</em>
+                </div>
+              );
+            })}
+          </div>
+        </section>
+
+        <section className="dashboard-panel">
+          <h2>Lowest stock</h2>
+          <div className="dashboard-list">
+            {lowStock.map((part) => (
+              <div key={part._id} className="dashboard-list-item">
+                <span>
+                  <strong>{part.name}</strong>
+                  <small>{part.category}</small>
+                </span>
+                <em>{number.format(Number(part.quantity || 0))}</em>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section className="dashboard-panel dashboard-panel-wide">
+          <h2>Recent stock out</h2>
+          <div className="overflow-x-auto">
+            <table className="w-full min-w-[560px] text-sm">
+              <thead>
+                <tr>
+                  <th className="p-2 text-left">Part</th>
+                  <th className="p-2 text-right">Qty</th>
+                  <th className="p-2 text-right">Total</th>
+                  <th className="p-2 text-left">Date</th>
+                </tr>
+              </thead>
+              <tbody>
+                {recentStockOut.map((row) => (
+                  <tr key={row._id}>
+                    <td className="p-2">{row.sparePart?.name || ""}</td>
+                    <td className="p-2 text-right">{row.stockOutQuantity}</td>
+                    <td className="p-2 text-right">{money.format(Number(row.stockOutTotalPrice || 0))}</td>
+                    <td className="p-2">
+                      {row.stockOutDate ? new Date(row.stockOutDate).toLocaleDateString() : ""}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+export default DashboardPage;

package/apps/SIMS/frontend/src/pages/LoginPage.jsx

@@ -0,0 +1,75 @@
+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("/dashboard");
+    } catch (err) {
+      setError(err.response?.data?.message || "Login failed");
+    }
+  };
+
+  return (
+    <div className="auth-screen">
+      <div className="auth-intro">
+        <p>SIMS</p>
+        <h2>Parts, stock flow, and daily reports in one control room.</h2>
+      </div>
+      <div className="auth-panel">
+        <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="/reset-password" className="block text-amber-800 hover:underline">
+            Reset password
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default LoginPage;

package/apps/SIMS/frontend/src/pages/RegisterPage.jsx

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { registerUser } from "../api/authApi";
+import { strongPasswordError } from "../utils/passwordPolicy";
+
+function RegisterPage() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [msg, setMsg] = useState("");
+  const [error, setError] = useState("");
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setError("");
+    setMsg("");
+    const u = username.trim();
+    if (u.length < 3) {
+      setError("Username must be at least 3 characters");
+      return;
+    }
+    const pErr = strongPasswordError(password);
+    if (pErr) {
+      setError(pErr);
+      return;
+    }
+    try {
+      const r = await registerUser({ username: u, password });
+      setMsg(r.data.message);
+      setPassword("");
+    } catch (err) {
+      setError(err.response?.data?.message || "Registration failed");
+    }
+  };
+
+  return (
+    <div className="auth-screen">
+      <div className="auth-intro">
+        <p>New operator</p>
+        <h2>Create access for the stock workspace.</h2>
+      </div>
+      <div className="auth-panel">
+        <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">
+          <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)}
+            minLength={8}
+            required
+          />
+          <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/apps/SIMS/frontend/src/pages/ReportsPage.jsx

@@ -0,0 +1,108 @@
+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 [message, setMessage] = useState("");
+
+  const run = async () => {
+    setMessage("");
+    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 data for this day");
+    } catch {
+      setMessage("Report failed");
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-wrap items-end gap-2">
+        <div>
+          <label className="text-sm text-slate-600">Date</label>
+          <input
+            type="date"
+            className="block rounded border px-2 py-2"
+            value={date}
+            onChange={(e) => setDate(e.target.value)}
+          />
+        </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/apps/SIMS/frontend/src/pages/ResetPasswordPage.jsx

@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { recoverPassword } from "../api/authApi";
+import { strongPasswordError } from "../utils/passwordPolicy";
+
+function ResetPasswordPage() {
+  const [username, setUsername] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [msg, setMsg] = useState("");
+  const [error, setError] = useState("");
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setError("");
+    setMsg("");
+    const u = username.trim();
+    if (u.length < 3) {
+      setError("Username must be at least 3 characters");
+      return;
+    }
+    const pErr = strongPasswordError(newPassword);
+    if (pErr) {
+      setError(pErr);
+      return;
+    }
+    try {
+      const r = await recoverPassword({ username: u, newPassword });
+      setMsg(r.data.message);
+      setNewPassword("");
+    } catch (err) {
+      setError(err.response?.data?.message || "Reset failed");
+    }
+  };
+
+  return (
+    <div className="auth-screen">
+      <div className="auth-intro">
+        <p>Recovery</p>
+        <h2>Reset credentials and get back to the floor.</h2>
+      </div>
+      <div className="auth-panel">
+        <h1 className="text-2xl font-bold text-amber-900">Reset password</h1>
+        {error && <div className="mb-2 text-sm text-red-700">{error}</div>}
+        {msg && <div className="mb-2 text-sm text-green-800">{msg}</div>}
+        <form onSubmit={submit} 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="New password (strong)"
+            value={newPassword}
+            onChange={(e) => setNewPassword(e.target.value)}
+            minLength={8}
+            required
+          />
+          <button type="submit" className="w-full rounded bg-amber-600 py-2 text-white hover:bg-amber-700">
+            Update 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 ResetPasswordPage;

package/apps/SIMS/frontend/src/pages/SparePartPage.jsx

@@ -0,0 +1,128 @@
+import { useEffect, useState } from "react";
+import { getSpareParts, createSparePart } from "../api/sparePartsApi";
+
+const initial = { name: "", category: "", quantity: "", unitPrice: "" };
+
+function SparePartPage() {
+  const [form, setForm] = useState(initial);
+  const [rows, setRows] = useState([]);
+  const [message, setMessage] = useState("");
+
+  const load = () =>
+    getSpareParts()
+      .then((r) => setRows(r.data))
+      .catch(() => setMessage("Failed to load parts"));
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const onChange = (e) => setForm((f) => ({ ...f, [e.target.name]: e.target.value }));
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    setMessage("");
+    const q = Number(form.quantity);
+    const u = Number(form.unitPrice);
+    if (Number.isNaN(q) || q < 0 || Number.isNaN(u) || u < 0) {
+      setMessage("Invalid numbers");
+      return;
+    }
+    try {
+      await createSparePart({
+        name: form.name.trim(),
+        category: form.category.trim(),
+        quantity: q,
+        unitPrice: u,
+      });
+      setForm(initial);
+      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="w-full rounded border px-3 py-2"
+            placeholder="Name"
+            value={form.name}
+            onChange={onChange}
+            required
+          />
+          <input
+            name="category"
+            className="w-full rounded border px-3 py-2"
+            placeholder="Category"
+            value={form.category}
+            onChange={onChange}
+            required
+          />
+          <input
+            type="number"
+            name="quantity"
+            className="w-full rounded border px-3 py-2"
+            placeholder="Quantity"
+            min="0"
+            value={form.quantity}
+            onChange={onChange}
+            required
+          />
+          <input
+            type="number"
+            name="unitPrice"
+            className="w-full rounded border px-3 py-2"
+            placeholder="Unit price"
+            min="0"
+            step="0.01"
+            value={form.unitPrice}
+            onChange={onChange}
+            required
+          />
+          <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;