create-ishvexa-app 1.0.0

package/templates/stockhub-sms-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/stockhub-sms-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 ProductsPage from "./pages/ProductsPage.jsx";
+import WarehousesPage from "./pages/WarehousesPage.jsx";
+import TransactionsPage from "./pages/TransactionsPage.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={<ProductsPage />} />
+        <Route path="warehouses" element={<WarehousesPage />} />
+        <Route path="transactions" element={<TransactionsPage />} />
+        <Route path="reports" element={<ReportsPage />} />
+      </Route>
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}

package/templates/stockhub-sms-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("sms_token");
+  if (token) config.headers.Authorization = `Bearer ${token}`;
+  return config;
+});
+
+export default api;

package/templates/stockhub-sms-app/frontend/src/components/AppLayout.jsx

@@ -0,0 +1,40 @@
+import { NavLink, Outlet } from "react-router-dom";
+import { useAuth } from "../context/AuthContext.jsx";
+
+const links = [{"to":"/","label":"Products"},{"to":"/warehouses","label":"Warehouse"},{"to":"/transactions","label":"Transactions"},{"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">Stock Management System</p>
+          <h1 className="text-xl font-bold mt-1">SMS</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/stockhub-sms-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("sms_user");
+    const savedToken = localStorage.getItem("sms_token");
+    if (savedUser && savedToken) {
+      setUser(JSON.parse(savedUser));
+      setToken(savedToken);
+    }
+    setLoading(false);
+  }, []);
+
+  const login = (userData, authToken) => {
+    setUser(userData);
+    setToken(authToken);
+    localStorage.setItem("sms_user", JSON.stringify(userData));
+    localStorage.setItem("sms_token", authToken);
+  };
+
+  const logout = () => {
+    setUser(null);
+    setToken(null);
+    localStorage.removeItem("sms_user");
+    localStorage.removeItem("sms_token");
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, token, login, logout, loading, isAuthenticated: !!token }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export const useAuth = () => useContext(AuthContext);

package/templates/stockhub-sms-app/frontend/src/index.css

@@ -0,0 +1,13 @@
+@import "tailwindcss";
+
+@theme {
+  --color-surface: #ecfdf5;
+  --color-card: #ffffff;
+  --color-ink: #064e3b;
+  --color-muted: #047857;
+  --color-line: #a7f3d0;
+  --color-sidebar: #065f46;
+  --color-sidebar-text: #ecfdf5;
+  --color-accent: #34d399;
+  --color-accent-text: #064e3b;
+}

package/templates/stockhub-sms-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/stockhub-sms-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/stockhub-sms-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">Stock Management System</h1>
+        <p className="text-muted text-sm mt-1">SMS</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>
+  );
+}

package/templates/stockhub-sms-app/frontend/src/pages/ProductsPage.jsx

@@ -0,0 +1,132 @@
+import { useEffect, useState } from "react";
+import api from "../api/client.js";
+
+const fields = [
+  { key: "productCode", col: "product_code", label: "Product Code" },
+  { key: "productName", col: "product_name", label: "Product Name" },
+  { key: "category", col: "category", label: "Category" },
+  { key: "quantityInStock", col: "quantity_in_stock", label: "Quantity In Stock", type: "number" },
+  { key: "unitPrice", col: "unit_price", label: "Unit Price", type: "number" },
+  { key: "supplierName", col: "supplier_name", label: "Supplier Name" },
+  { key: "dateReceived", col: "date_received", label: "Date Received", type: "date" },
+];
+
+const emptyForm = fields.reduce((acc, f) => ({ ...acc, [f.key]: "" }), {});
+
+const validateProduct = (form) => {
+  const errors = {};
+  if (!form.productCode.trim()) errors.productCode = "Product code is required.";
+  else if (form.productCode.trim().length < 2) errors.productCode = "Code must be at least 2 characters.";
+  if (!form.productName.trim()) errors.productName = "Product name is required.";
+  if (!form.category.trim()) errors.category = "Category is required.";
+  if (form.quantityInStock === "" || form.quantityInStock === undefined) {
+    errors.quantityInStock = "Quantity in stock is required.";
+  } else if (Number(form.quantityInStock) < 0 || Number.isNaN(Number(form.quantityInStock))) {
+    errors.quantityInStock = "Enter a valid quantity (0 or greater).";
+  }
+  if (form.unitPrice === "" || form.unitPrice === undefined) {
+    errors.unitPrice = "Unit price is required.";
+  } else if (Number(form.unitPrice) <= 0 || Number.isNaN(Number(form.unitPrice))) {
+    errors.unitPrice = "Unit price must be greater than 0.";
+  }
+  if (!form.supplierName.trim()) errors.supplierName = "Supplier name is required.";
+  if (!form.dateReceived) errors.dateReceived = "Date received is required.";
+  return errors;
+};
+
+export default function ProductsPage() {
+  const [form, setForm] = useState(emptyForm);
+  const [rows, setRows] = useState([]);
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [error, setError] = useState("");
+  const [message, setMessage] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const load = async () => {
+    try {
+      const { data } = await api.get("/products");
+      setRows(data);
+    } catch {
+      setError("Failed to load records.");
+    }
+  };
+
+  useEffect(() => { load(); }, []);
+
+  const setField = (key, value) => {
+    setForm((prev) => ({ ...prev, [key]: value }));
+    setFieldErrors((prev) => ({ ...prev, [key]: "" }));
+  };
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setError("");
+    setMessage("");
+    const errors = validateProduct(form);
+    if (Object.keys(errors).length) {
+      setFieldErrors(errors);
+      return;
+    }
+    setLoading(true);
+    try {
+      await api.post("/products", form);
+      setMessage("Product added successfully.");
+      setForm(emptyForm);
+      setFieldErrors({});
+      load();
+    } catch (err) {
+      setError(err.response?.data?.message || "Failed to save.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  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">Products</h2>
+        <p className="text-muted text-sm">Add new product records</p>
+      </div>
+      <form onSubmit={submit} className="bg-card rounded-xl border border-line p-6 grid gap-4 md:grid-cols-2">
+        {fields.map((f) => (
+          <label key={f.key} className="block text-sm">
+            <span className="font-medium text-ink">{f.label}</span>
+            <input
+              type={f.type || "text"}
+              className={inputClass(f.key)}
+              value={form[f.key]}
+              onChange={(e) =>
+                setField(f.key, f.key === "productCode" ? e.target.value.toUpperCase() : e.target.value)
+              }
+            />
+            {fieldErrors[f.key] && <p className="text-red-600 text-xs mt-1">{fieldErrors[f.key]}</p>}
+          </label>
+        ))}
+        <div className="md:col-span-2 flex flex-wrap gap-3 items-center">
+          <button type="submit" disabled={loading} className="rounded-lg bg-accent text-accent-text px-5 py-2 font-semibold">
+            {loading ? "Saving..." : "Add Product"}
+          </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 text-left">
+            <tr>{fields.map((f) => <th key={f.key} className="px-4 py-3">{f.label}</th>)}</tr>
+          </thead>
+          <tbody>
+            {rows.map((row, i) => (
+              <tr key={i} className="border-t border-line">
+                {fields.map((f) => <td key={f.key} className="px-4 py-3">{String(row[f.col] ?? "").slice(0, 40)}</td>)}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}