create-ishvexa-app 1.0.0

package/templates/scms-app/frontend/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.3.0",
+    "axios": "^1.16.1",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-router-dom": "^7.15.1",
+    "tailwindcss": "^4.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.1",
+    "vite": "^8.0.12"
+  }
+}

package/templates/scms-app/frontend/src/App.jsx

@@ -0,0 +1,31 @@
+import { Navigate, Route, Routes } from "react-router-dom";
+import { useAuth } from "./context/AuthContext.jsx";
+import AppLayout from "./components/AppLayout.jsx";
+import LoginPage from "./pages/LoginPage.jsx";
+import ForgotPassword from "./pages/ForgotPassword.jsx";
+import SuppliersPage from "./pages/SuppliersPage.jsx";
+import ShipmentsPage from "./pages/ShipmentsPage.jsx";
+import DeliveriesPage from "./pages/DeliveriesPage.jsx";
+import ReportsPage from "./pages/ReportsPage.jsx";
+
+function PrivateRoute({ children }) {
+  const { isAuthenticated, loading } = useAuth();
+  if (loading) return null;
+  return isAuthenticated ? children : <Navigate to="/login" replace />;
+}
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginPage />} />
+      <Route path="/forgot-password" element={<ForgotPassword />} />
+      <Route path="/" element={<PrivateRoute><AppLayout /></PrivateRoute>}>
+        <Route index element={<SuppliersPage />} />
+        <Route path="shipments" element={<ShipmentsPage />} />
+        <Route path="deliveries" element={<DeliveriesPage />} />
+        <Route path="reports" element={<ReportsPage />} />
+      </Route>
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}

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

@@ -0,0 +1,11 @@
+import axios from "axios";
+
+const api = axios.create({ baseURL: "http://localhost:5555/api" });
+
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem("scms_token");
+  if (token) config.headers.Authorization = `Bearer ${token}`;
+  return config;
+});
+
+export default api;

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

@@ -0,0 +1,49 @@
+import { NavLink, Outlet } from "react-router-dom";
+import { useAuth } from "../context/AuthContext.jsx";
+
+const links = [
+  { to: "/", label: "Supplier" },
+  { to: "/shipments", label: "Shipment" },
+  { to: "/deliveries", label: "Delivery" },
+  { to: "/reports", label: "Reports" },
+];
+
+export default function AppLayout() {
+  const { logout } = useAuth();
+  return (
+    <div className="min-h-screen bg-surface text-ink md:grid md:grid-cols-[260px_1fr]">
+      <aside className="bg-sidebar text-sidebar-text md:min-h-screen border-b-4 border-accent md:border-b-0 md:border-r-4">
+        <div className="px-5 py-6 border-b border-white/10">
+          <p className="text-xs uppercase tracking-widest text-accent">Supply Chain Management System</p>
+          <h1 className="text-xl font-bold mt-1">SCMS</h1>
+        </div>
+        <nav className="p-4 space-y-2">
+          {links.map((link) => (
+            <NavLink
+              key={link.to}
+              to={link.to}
+              end={link.to === "/"}
+              className={({ isActive }) =>
+                `block rounded-lg px-4 py-2.5 text-sm font-medium transition ${isActive ? "bg-accent text-accent-text shadow" : "hover:bg-white/10"}`
+              }
+            >
+              {link.label}
+            </NavLink>
+          ))}
+        </nav>
+        <div className="p-4">
+          <button
+            type="button"
+            onClick={logout}
+            className="w-full rounded-lg border border-red-400 px-4 py-2 text-sm font-semibold text-red-200 hover:bg-red-500/20"
+          >
+            Logout
+          </button>
+        </div>
+      </aside>
+      <main className="p-6 md:p-10">
+        <Outlet />
+      </main>
+    </div>
+  );
+}

package/templates/scms-app/frontend/src/context/AuthContext.jsx

@@ -0,0 +1,41 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+const AuthContext = createContext(null);
+
+export function AuthProvider({ children }) {
+  const [user, setUser] = useState(null);
+  const [token, setToken] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const savedUser = localStorage.getItem("scms_user");
+    const savedToken = localStorage.getItem("scms_token");
+    if (savedUser && savedToken) {
+      setUser(JSON.parse(savedUser));
+      setToken(savedToken);
+    }
+    setLoading(false);
+  }, []);
+
+  const login = (userData, authToken) => {
+    setUser(userData);
+    setToken(authToken);
+    localStorage.setItem("scms_user", JSON.stringify(userData));
+    localStorage.setItem("scms_token", authToken);
+  };
+
+  const logout = () => {
+    setUser(null);
+    setToken(null);
+    localStorage.removeItem("scms_user");
+    localStorage.removeItem("scms_token");
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, token, login, logout, loading, isAuthenticated: !!token }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export const useAuth = () => useContext(AuthContext);

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

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@theme { --color-surface: #eff6ff; --color-card: #ffffff; --color-ink: #1e3a8a; --color-muted: #2563eb; --color-line: #bfdbfe; --color-sidebar: #1d4ed8; --color-sidebar-text: #eff6ff; --color-accent: #60a5fa; --color-accent-text: #1e3a8a; }

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

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

package/templates/scms-app/frontend/src/pages/DeliveriesPage.jsx

@@ -0,0 +1,265 @@
+import { useEffect, useState } from "react";
+import api from "../api/client.js";
+
+const DELIVERY_STATUSES = ["Pending", "Delivered", "Failed"];
+
+const emptyForm = {
+  deliveryCode: "",
+  deliveryDate: "",
+  quantityDelivered: "",
+  deliveryStatus: "",
+  shipmentNumber: "",
+};
+
+const validateDelivery = (form, shipments) => {
+  const errors = {};
+  if (!form.deliveryCode.trim()) errors.deliveryCode = "Delivery code is required.";
+  if (!form.deliveryDate) errors.deliveryDate = "Delivery date is required.";
+  if (form.quantityDelivered === "" || Number.isNaN(Number(form.quantityDelivered))) {
+    errors.quantityDelivered = "Quantity delivered is required.";
+  } else if (Number(form.quantityDelivered) < 0) {
+    errors.quantityDelivered = "Quantity cannot be negative.";
+  }
+  if (!form.deliveryStatus) errors.deliveryStatus = "Select delivery status.";
+  else if (!DELIVERY_STATUSES.includes(form.deliveryStatus)) {
+    errors.deliveryStatus = "Select a valid status from the list.";
+  }
+  if (!form.shipmentNumber) errors.shipmentNumber = "Select a shipment from the list.";
+  else if (!shipments.some((s) => s.shipment_number === form.shipmentNumber)) {
+    errors.shipmentNumber = "Selected shipment is not valid.";
+  }
+  return errors;
+};
+
+const formatDateTimeLocal = (value) => {
+  if (!value) return "";
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return String(value).slice(0, 16);
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+};
+
+export default function DeliveriesPage() {
+  const [form, setForm] = useState(emptyForm);
+  const [shipments, setShipments] = useState([]);
+  const [rows, setRows] = useState([]);
+  const [editId, setEditId] = useState(null);
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [error, setError] = useState("");
+  const [message, setMessage] = useState("");
+
+  const loadDeliveries = async () => {
+    try {
+      const { data } = await api.get("/deliveries");
+      setRows(data);
+    } catch {
+      setError("Failed to load delivery records.");
+    }
+  };
+
+  const loadShipments = async () => {
+    try {
+      const { data } = await api.get("/shipments");
+      setShipments(data);
+    } catch {
+      setError("Failed to load shipments.");
+    }
+  };
+
+  useEffect(() => {
+    loadDeliveries();
+    loadShipments();
+  }, []);
+
+  const setField = (key, value) => {
+    setForm((prev) => ({ ...prev, [key]: value }));
+    setFieldErrors((prev) => ({ ...prev, [key]: "" }));
+  };
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setError("");
+    setMessage("");
+    const errors = validateDelivery(form, shipments);
+    if (Object.keys(errors).length) {
+      setFieldErrors(errors);
+      return;
+    }
+    try {
+      if (editId) {
+        await api.put(`/deliveries/${editId}`, form);
+        setMessage("Delivery updated.");
+      } else {
+        await api.post("/deliveries", form);
+        setMessage("Delivery added.");
+      }
+      setForm(emptyForm);
+      setFieldErrors({});
+      setEditId(null);
+      loadDeliveries();
+    } catch (err) {
+      setError(err.response?.data?.message || "Operation failed.");
+    }
+  };
+
+  const startEdit = (row) => {
+    setEditId(row.delivery_code);
+    setFieldErrors({});
+    setForm({
+      deliveryCode: row.delivery_code ?? "",
+      deliveryDate: formatDateTimeLocal(row.delivery_date),
+      quantityDelivered: String(row.quantity_delivered ?? ""),
+      deliveryStatus: row.delivery_status ?? "",
+      shipmentNumber: row.shipment_number ?? "",
+    });
+  };
+
+  const remove = async (id) => {
+    if (!window.confirm("Delete this record?")) return;
+    try {
+      await api.delete(`/deliveries/${id}`);
+      loadDeliveries();
+    } catch {
+      setError("Delete failed.");
+    }
+  };
+
+  const shipmentLabel = (number) => {
+    const s = shipments.find((x) => x.shipment_number === number);
+    return s ? `${s.shipment_number} — ${s.destination}` : number;
+  };
+
+  const inputClass = (key) =>
+    `mt-1 w-full rounded-lg border px-3 py-2 ${fieldErrors[key] ? "border-red-500" : "border-line"}`;
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold text-ink">Deliveries</h2>
+        <p className="text-muted text-sm">Manage deliveries — select shipment and status from the list</p>
+      </div>
+      {shipments.length === 0 && (
+        <p className="text-amber-700 text-sm bg-amber-50 border border-amber-200 rounded-lg px-4 py-3">
+          Add at least one shipment before recording deliveries.
+        </p>
+      )}
+      <form onSubmit={submit} className="bg-card rounded-xl border border-line p-6 grid gap-4 md:grid-cols-2">
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Delivery Code</span>
+          <input
+            className={inputClass("deliveryCode")}
+            value={form.deliveryCode}
+            onChange={(e) => setField("deliveryCode", e.target.value)}
+            disabled={!!editId}
+          />
+          {fieldErrors.deliveryCode && <p className="text-red-600 text-xs mt-1">{fieldErrors.deliveryCode}</p>}
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Delivery Date</span>
+          <input
+            type="datetime-local"
+            className={inputClass("deliveryDate")}
+            value={form.deliveryDate}
+            onChange={(e) => setField("deliveryDate", e.target.value)}
+          />
+          {fieldErrors.deliveryDate && <p className="text-red-600 text-xs mt-1">{fieldErrors.deliveryDate}</p>}
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Quantity Delivered</span>
+          <input
+            type="number"
+            min="0"
+            className={inputClass("quantityDelivered")}
+            value={form.quantityDelivered}
+            onChange={(e) => setField("quantityDelivered", e.target.value)}
+          />
+          {fieldErrors.quantityDelivered && <p className="text-red-600 text-xs mt-1">{fieldErrors.quantityDelivered}</p>}
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Delivery Status</span>
+          <select
+            className={inputClass("deliveryStatus")}
+            value={form.deliveryStatus}
+            onChange={(e) => setField("deliveryStatus", e.target.value)}
+          >
+            <option value="">Select status</option>
+            {DELIVERY_STATUSES.map((s) => (
+              <option key={s} value={s}>{s}</option>
+            ))}
+          </select>
+          {fieldErrors.deliveryStatus && <p className="text-red-600 text-xs mt-1">{fieldErrors.deliveryStatus}</p>}
+        </label>
+        <label className="block text-sm md:col-span-2">
+          <span className="font-medium text-ink">Shipment</span>
+          <select
+            className={inputClass("shipmentNumber")}
+            value={form.shipmentNumber}
+            onChange={(e) => setField("shipmentNumber", e.target.value)}
+            disabled={shipments.length === 0}
+          >
+            <option value="">Select shipment</option>
+            {shipments.map((s) => (
+              <option key={s.shipment_number} value={s.shipment_number}>
+                {s.shipment_number} — {s.destination} ({s.shipment_status})
+              </option>
+            ))}
+          </select>
+          {fieldErrors.shipmentNumber && <p className="text-red-600 text-xs mt-1">{fieldErrors.shipmentNumber}</p>}
+        </label>
+        <div className="md:col-span-2 flex flex-wrap gap-3 items-center">
+          <button
+            type="submit"
+            disabled={shipments.length === 0}
+            className="rounded-lg bg-accent text-accent-text px-5 py-2 font-semibold disabled:opacity-50"
+          >
+            {editId ? "Update" : "Add"}
+          </button>
+          {editId && (
+            <button
+              type="button"
+              onClick={() => {
+                setEditId(null);
+                setFieldErrors({});
+                setForm(emptyForm);
+              }}
+              className="rounded-lg border border-line px-5 py-2"
+            >
+              Cancel
+            </button>
+          )}
+          {message && <span className="text-sm text-green-600">{message}</span>}
+          {error && <span className="text-sm text-red-600">{error}</span>}
+        </div>
+      </form>
+      <div className="bg-card rounded-xl border border-line overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead className="bg-surface">
+            <tr>
+              <th className="px-4 py-3 text-left">Code</th>
+              <th className="px-4 py-3 text-left">Date</th>
+              <th className="px-4 py-3 text-left">Qty</th>
+              <th className="px-4 py-3 text-left">Status</th>
+              <th className="px-4 py-3 text-left">Shipment</th>
+              <th className="px-4 py-3">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <tr key={row.delivery_code} className="border-t border-line">
+                <td className="px-4 py-3">{row.delivery_code}</td>
+                <td className="px-4 py-3">{String(row.delivery_date ?? "").slice(0, 16)}</td>
+                <td className="px-4 py-3">{row.quantity_delivered}</td>
+                <td className="px-4 py-3">{row.delivery_status}</td>
+                <td className="px-4 py-3">{shipmentLabel(row.shipment_number)}</td>
+                <td className="px-4 py-3 space-x-2">
+                  <button type="button" onClick={() => startEdit(row)} className="text-accent font-medium">Edit</button>
+                  <button type="button" onClick={() => remove(row.delivery_code)} className="text-red-600 font-medium">Delete</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,103 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import api from "../api/client.js";
+
+export default 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.";
+    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 { data } = await api.post("/auth/forgot-password", {
+        email: form.email.trim(),
+        newPassword: form.newPassword,
+        confirmPassword: form.confirmPassword,
+      });
+      setMessage(data.message || "Password reset successfully.");
+      setTimeout(() => navigate("/login", { replace: true }), 2000);
+    } catch (err) {
+      setError(err.response?.data?.message || "Request failed.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-surface px-4">
+      <form onSubmit={submit} className="w-full max-w-md bg-card rounded-2xl shadow-xl p-8 border border-line">
+        <div className="w-12 h-1 bg-accent rounded mb-4" />
+        <h1 className="text-2xl font-bold text-ink">Reset Password</h1>
+        <p className="text-muted text-sm mt-1">Enter your email and new password</p>
+        <div className="mt-6 space-y-3">
+          <div>
+            <input
+              className="w-full rounded-lg border border-line px-3 py-2.5"
+              type="email"
+              placeholder="Email"
+              value={form.email}
+              onChange={(e) => setForm({ ...form, email: e.target.value })}
+            />
+            {fieldErrors.email && <p className="mt-1 text-sm text-red-600">{fieldErrors.email}</p>}
+          </div>
+          <div>
+            <input
+              className="w-full rounded-lg border border-line px-3 py-2.5"
+              type="password"
+              placeholder="New password"
+              value={form.newPassword}
+              onChange={(e) => setForm({ ...form, newPassword: e.target.value })}
+            />
+            {fieldErrors.newPassword && <p className="mt-1 text-sm text-red-600">{fieldErrors.newPassword}</p>}
+          </div>
+          <div>
+            <input
+              className="w-full rounded-lg border border-line px-3 py-2.5"
+              type="password"
+              placeholder="Confirm password"
+              value={form.confirmPassword}
+              onChange={(e) => setForm({ ...form, confirmPassword: e.target.value })}
+            />
+            {fieldErrors.confirmPassword && (
+              <p className="mt-1 text-sm text-red-600">{fieldErrors.confirmPassword}</p>
+            )}
+          </div>
+        </div>
+        {message && <p className="mt-3 text-sm text-green-600">{message}</p>}
+        {error && <p className="mt-3 text-sm text-red-600">{error}</p>}
+        <button
+          type="submit"
+          disabled={loading}
+          className="mt-5 w-full rounded-lg bg-accent text-accent-text py-2.5 font-semibold disabled:opacity-60"
+        >
+          {loading ? "Please wait…" : "Reset Password"}
+        </button>
+        <Link to="/login" className="mt-3 block w-full text-center text-sm text-muted underline">
+          Back to login
+        </Link>
+      </form>
+    </div>
+  );
+}

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

@@ -0,0 +1,105 @@
+import { useState } from "react";
+import { Link, Navigate } from "react-router-dom";
+import api from "../api/client.js";
+import { useAuth } from "../context/AuthContext.jsx";
+
+export default function LoginPage() {
+  const { login, isAuthenticated, loading } = useAuth();
+  const [mode, setMode] = useState("login");
+  const [form, setForm] = useState({ username: "", email: "", password: "" });
+  const [error, setError] = useState("");
+  const [message, setMessage] = useState("");
+
+  if (loading) return null;
+  if (isAuthenticated) return <Navigate to="/" replace />;
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setError("");
+    setMessage("");
+    if (mode === "register") {
+      if (!form.username.trim() || !form.email.trim() || !form.password) {
+        setError("Username, email and password are required.");
+        return;
+      }
+    } else if (!form.username.trim() || !form.password) {
+      setError("Username and password are required.");
+      return;
+    }
+    try {
+      if (mode === "register") {
+        await api.post("/auth/register", {
+          username: form.username,
+          email: form.email,
+          password: form.password,
+        });
+        setMessage("Account created. Please login.");
+        setMode("login");
+        setForm({ username: form.username, email: "", password: "" });
+        return;
+      }
+      const { data } = await api.post("/auth/login", {
+        username: form.username,
+        password: form.password,
+      });
+      login(data.user, data.token);
+    } catch (err) {
+      setError(err.response?.data?.message || "Request failed.");
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-surface px-4">
+      <form onSubmit={submit} className="w-full max-w-md bg-card rounded-2xl shadow-xl p-8 border border-line">
+        <div className="w-12 h-1 bg-accent rounded mb-4" />
+        <h1 className="text-2xl font-bold text-ink">Supply Chain Management System</h1>
+        <p className="text-muted text-sm mt-1">SCMS</p>
+        <div className="mt-6 space-y-3">
+          <input
+            className="w-full rounded-lg border border-line px-3 py-2.5"
+            placeholder="Username"
+            value={form.username}
+            onChange={(e) => setForm({ ...form, username: e.target.value })}
+          />
+          {mode === "register" && (
+            <input
+              className="w-full rounded-lg border border-line px-3 py-2.5"
+              type="email"
+              placeholder="Email"
+              value={form.email}
+              onChange={(e) => setForm({ ...form, email: e.target.value })}
+            />
+          )}
+          <input
+            className="w-full rounded-lg border border-line px-3 py-2.5"
+            type="password"
+            placeholder="Password"
+            value={form.password}
+            onChange={(e) => setForm({ ...form, password: e.target.value })}
+          />
+        </div>
+        {message && <p className="mt-3 text-sm text-green-600">{message}</p>}
+        {error && <p className="mt-3 text-sm text-red-600">{error}</p>}
+        <button type="submit" className="mt-5 w-full rounded-lg bg-accent text-accent-text py-2.5 font-semibold">
+          {mode === "login" ? "Sign In" : "Register"}
+        </button>
+        {mode === "login" && (
+          <Link to="/forgot-password" className="mt-3 block w-full text-center text-sm text-muted underline">
+            Forgot Password?
+          </Link>
+        )}
+        <button
+          type="button"
+          onClick={() => {
+            setMode(mode === "login" ? "register" : "login");
+            setError("");
+            setForm({ username: form.username, email: "", password: "" });
+          }}
+          className="mt-3 w-full text-sm text-muted underline"
+        >
+          {mode === "login" ? "Create account" : "Back to login"}
+        </button>
+      </form>
+    </div>
+  );
+}