create-ishvexa-app 1.0.0

package/templates/srms-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/srms-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 CustomersPage from "./pages/CustomersPage.jsx";
+import ProductsPage from "./pages/ProductsPage.jsx";
+import SalesPage from "./pages/SalesPage.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={<CustomersPage />} />
+        <Route path="products" element={<ProductsPage />} />
+        <Route path="sales" element={<SalesPage />} />
+        <Route path="reports" element={<ReportsPage />} />
+      </Route>
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}

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

package/templates/srms-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":"Customer"},{"to":"/products","label":"Product"},{"to":"/sales","label":"Sales"},{"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">SRMS</p>
+          <h1 className="text-xl font-bold mt-1">Sales Record Management System</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/srms-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("srms_user");
+    const savedToken = localStorage.getItem("srms_token");
+    if (savedUser && savedToken) {
+      setUser(JSON.parse(savedUser));
+      setToken(savedToken);
+    }
+    setLoading(false);
+  }, []);
+
+  const login = (userData, authToken) => {
+    setUser(userData);
+    setToken(authToken);
+    localStorage.setItem("srms_user", JSON.stringify(userData));
+    localStorage.setItem("srms_token", authToken);
+  };
+
+  const logout = () => {
+    setUser(null);
+    setToken(null);
+    localStorage.removeItem("srms_user");
+    localStorage.removeItem("srms_token");
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, token, login, logout, loading, isAuthenticated: !!token }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export const useAuth = () => useContext(AuthContext);

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

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@theme { --color-surface: #fff7ed; --color-card: #ffffff; --color-ink: #7c2d12; --color-muted: #c2410c; --color-line: #fed7aa; --color-sidebar: #9a3412; --color-sidebar-text: #fff7ed; --color-accent: #fb923c; --color-accent-text: #431407; }

package/templates/srms-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/srms-app/frontend/src/pages/CustomersPage.jsx

@@ -0,0 +1,160 @@
+import { useEffect, useState } from "react";
+import api from "../api/client.js";
+
+const emptyForm = {
+  customerNumber: "",
+  firstName: "",
+  lastName: "",
+  telephone: "",
+  address: "",
+};
+
+const validateCustomer = (form) => {
+  const errors = {};
+  if (!form.customerNumber.trim()) errors.customerNumber = "Customer number is required.";
+  if (!form.firstName.trim()) errors.firstName = "First name is required.";
+  if (!form.lastName.trim()) errors.lastName = "Last name is required.";
+  if (!form.telephone.trim()) errors.telephone = "Telephone is required.";
+  else if (!/^[0-9+\-\s]{7,15}$/.test(form.telephone.trim())) {
+    errors.telephone = "Enter a valid phone number (7–15 digits).";
+  }
+  if (!form.address.trim()) errors.address = "Address is required.";
+  return errors;
+};
+
+export default function CustomersPage() {
+  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("/customers");
+      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 = validateCustomer(form);
+    if (Object.keys(errors).length) {
+      setFieldErrors(errors);
+      return;
+    }
+    setLoading(true);
+    try {
+      await api.post("/customers", form);
+      setMessage("Customer 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">Customers</h2>
+        <p className="text-muted text-sm">Add new customer records</p>
+      </div>
+      <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">Customer Number</span>
+          <input
+            className={inputClass("customerNumber")}
+            value={form.customerNumber}
+            onChange={(e) => setField("customerNumber", e.target.value)}
+          />
+          {fieldErrors.customerNumber && <p className="text-red-600 text-xs mt-1">{fieldErrors.customerNumber}</p>}
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">First Name</span>
+          <input
+            className={inputClass("firstName")}
+            value={form.firstName}
+            onChange={(e) => setField("firstName", e.target.value)}
+          />
+          {fieldErrors.firstName && <p className="text-red-600 text-xs mt-1">{fieldErrors.firstName}</p>}
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Last Name</span>
+          <input
+            className={inputClass("lastName")}
+            value={form.lastName}
+            onChange={(e) => setField("lastName", e.target.value)}
+          />
+          {fieldErrors.lastName && <p className="text-red-600 text-xs mt-1">{fieldErrors.lastName}</p>}
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Telephone</span>
+          <input
+            className={inputClass("telephone")}
+            value={form.telephone}
+            onChange={(e) => setField("telephone", e.target.value)}
+            placeholder="e.g. 0788123456"
+          />
+          {fieldErrors.telephone && <p className="text-red-600 text-xs mt-1">{fieldErrors.telephone}</p>}
+        </label>
+        <label className="block text-sm md:col-span-2">
+          <span className="font-medium text-ink">Address</span>
+          <input
+            className={inputClass("address")}
+            value={form.address}
+            onChange={(e) => setField("address", e.target.value)}
+          />
+          {fieldErrors.address && <p className="text-red-600 text-xs mt-1">{fieldErrors.address}</p>}
+        </label>
+        <div className="md:col-span-2 flex 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 Customer"}</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>
+              <th className="px-4 py-3">Customer Number</th>
+              <th className="px-4 py-3">First Name</th>
+              <th className="px-4 py-3">Last Name</th>
+              <th className="px-4 py-3">Telephone</th>
+              <th className="px-4 py-3">Address</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <tr key={row.customer_number} className="border-t border-line">
+                <td className="px-4 py-3">{row.customer_number}</td>
+                <td className="px-4 py-3">{row.first_name}</td>
+                <td className="px-4 py-3">{row.last_name}</td>
+                <td className="px-4 py-3">{row.telephone}</td>
+                <td className="px-4 py-3">{String(row.address ?? "").slice(0, 40)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

package/templates/srms-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/srms-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">Sales Record Management System</h1>
+        <p className="text-muted text-sm mt-1">SRMS</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>
+  );
+}