create-ishvexa-app 1.0.0

package/templates/smartshop-app/frontend/src/pages/CustomersPage.jsx

@@ -0,0 +1,175 @@
+import { useEffect, useState } from "react";
+import FormCard from "../components/FormCard";
+import api from "../services/api";
+
+const empty = { fullName: "", phoneNumber: "", email: "", address: "" };
+
+const validateCustomer = (form) => {
+  const errors = {};
+  if (!form.fullName.trim()) errors.fullName = "Full name is required.";
+  if (!form.phoneNumber.trim()) errors.phoneNumber = "Phone number is required.";
+  else if (!/^[0-9+\-\s]{9,15}$/.test(form.phoneNumber.trim())) {
+    errors.phoneNumber = "Enter a valid phone number (9–15 digits).";
+  }
+  if (!form.email.trim()) errors.email = "Email is required.";
+  else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) {
+    errors.email = "Enter a valid email address.";
+  }
+  if (!form.address.trim()) errors.address = "Address is required.";
+  return errors;
+};
+
+function CustomersPage() {
+  const [customers, setCustomers] = useState([]);
+  const [form, setForm] = useState(empty);
+  const [search, setSearch] = useState("");
+  const [editId, setEditId] = useState(null);
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [formMessage, setFormMessage] = useState("");
+
+  const loadCustomers = () =>
+    api.get("/customers", { params: { q: search } }).then((res) => setCustomers(res.data));
+
+  useEffect(() => {
+    loadCustomers();
+  }, [search]);
+
+  const setField = (key, value) => {
+    setForm((prev) => ({ ...prev, [key]: value }));
+    setFieldErrors((prev) => ({ ...prev, [key]: "" }));
+  };
+
+  const inputClass = (key) =>
+    `w-full border bg-white p-2.5 text-brand-900 ${fieldErrors[key] ? "border-red-500" : "border-brand-100"}`;
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setFormMessage("");
+    const errors = validateCustomer(form);
+    if (Object.keys(errors).length) {
+      setFieldErrors(errors);
+      return;
+    }
+    try {
+      if (editId) await api.put(`/customers/${editId}`, form);
+      else await api.post("/customers", form);
+      setFormMessage(editId ? "Customer updated successfully." : "Customer saved successfully.");
+      setForm(empty);
+      setEditId(null);
+      setFieldErrors({});
+      loadCustomers();
+    } catch (error) {
+      setFormMessage(error.response?.data?.message || "Unable to save customer.");
+    }
+  };
+
+  return (
+    <div className="grid gap-6 lg:grid-cols-3">
+      <FormCard title={editId ? "Edit Customer" : "Add Customer"}>
+        <form onSubmit={submit} className="space-y-2">
+          <input
+            placeholder="Full Name"
+            value={form.fullName}
+            onChange={(e) => setField("fullName", e.target.value)}
+            className={inputClass("fullName")}
+          />
+          {fieldErrors.fullName && <p className="text-sm text-red-600">{fieldErrors.fullName}</p>}
+          <input
+            placeholder="Phone Number"
+            value={form.phoneNumber}
+            onChange={(e) => setField("phoneNumber", e.target.value)}
+            className={inputClass("phoneNumber")}
+          />
+          {fieldErrors.phoneNumber && <p className="text-sm text-red-600">{fieldErrors.phoneNumber}</p>}
+          <input
+            placeholder="Email"
+            value={form.email}
+            onChange={(e) => setField("email", e.target.value)}
+            className={inputClass("email")}
+          />
+          {fieldErrors.email && <p className="text-sm text-red-600">{fieldErrors.email}</p>}
+          <input
+            placeholder="Address"
+            value={form.address}
+            onChange={(e) => setField("address", e.target.value)}
+            className={inputClass("address")}
+          />
+          {fieldErrors.address && <p className="text-sm text-red-600">{fieldErrors.address}</p>}
+          {formMessage && <p className="text-sm text-brand-800">{formMessage}</p>}
+          <button className="w-full border border-brand-700 bg-brand-800 p-2.5 font-semibold text-white">
+            {editId ? "Update Customer" : "Save Customer"}
+          </button>
+        </form>
+      </FormCard>
+
+      <section className="border border-brand-100 bg-white p-5 shadow-sm lg:col-span-2 md:p-6">
+        <div className="mb-3 flex items-center justify-between gap-2">
+          <h2 className="border-l-4 border-accent-500 pl-3 text-lg font-semibold text-brand-900">
+            Customers
+          </h2>
+          <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search customer"
+            className="border border-brand-100 bg-white p-2 text-sm text-brand-900"
+          />
+        </div>
+        <div className="overflow-auto">
+          <table className="w-full text-sm text-brand-900">
+            <thead>
+              <tr className="text-left">
+                <th>Name</th>
+                <th>Phone</th>
+                <th>Email</th>
+                <th>Address</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {customers.map((c) => (
+                <tr key={c.customer_id} className="border-t border-brand-100">
+                  <td>{c.full_name}</td>
+                  <td>{c.phone_number}</td>
+                  <td>{c.email}</td>
+                  <td>{c.address}</td>
+                  <td className="space-x-2 py-2">
+                    <button
+                      onClick={() => {
+                        setEditId(c.customer_id);
+                        setForm({
+                          fullName: c.full_name,
+                          phoneNumber: c.phone_number,
+                          email: c.email,
+                          address: c.address,
+                        });
+                        setFieldErrors({});
+                      }}
+                      className="border border-brand-700 px-2 py-1 text-brand-900"
+                    >
+                      Edit
+                    </button>
+                    <button
+                      onClick={async () => {
+                        try {
+                          await api.delete(`/customers/${c.customer_id}`);
+                          loadCustomers();
+                        } catch (error) {
+                          alert(error.response?.data?.message || "Delete failed.");
+                        }
+                      }}
+                      className="border border-red-500 bg-red-500 px-2 py-1 text-white"
+                    >
+                      Delete
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export default CustomersPage;

package/templates/smartshop-app/frontend/src/pages/DashboardPage.jsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import StatCard from "../components/StatCard";
+import api from "../services/api";
+
+function DashboardPage() {
+  const [summary, setSummary] = useState({
+    total_products: 0,
+    total_customers: 0,
+    total_sales: 0,
+    total_revenue: 0,
+  });
+
+  useEffect(() => {
+    api.get("/reports/dashboard").then((res) => setSummary(res.data));
+  }, []);
+
+  return (
+    <div>
+      <h2 className="mb-4 text-2xl font-bold">Dashboard Summary</h2>
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <StatCard title="Total Products" value={summary.total_products} />
+        <StatCard title="Total Customers" value={summary.total_customers} />
+        <StatCard title="Total Sales" value={summary.total_sales} />
+        <StatCard title="Revenue" value={`RWF ${Number(summary.total_revenue).toFixed(2)}`} />
+      </div>
+    </div>
+  );
+}
+
+export default DashboardPage;

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

@@ -0,0 +1,102 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import api from "../services/api";
+
+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 errors = {};
+    const email = form.email.trim();
+    if (!email) errors.email = "Email is required.";
+    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) errors.email = "Enter a valid email address.";
+    if (!form.newPassword) errors.newPassword = "New password is required.";
+    else if (form.newPassword.length < 6) errors.newPassword = "Password must be at least 6 characters.";
+    if (!form.confirmPassword) errors.confirmPassword = "Confirm password is required.";
+    else if (form.newPassword && form.newPassword !== form.confirmPassword) {
+      errors.confirmPassword = "Passwords must match.";
+    }
+    setFieldErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const submit = async (event) => {
+    event.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="flex min-h-screen items-center justify-center bg-brand-50 px-4 py-8">
+      <form
+        onSubmit={submit}
+        className="w-full max-w-md border border-brand-100 bg-white p-6 text-brand-900 shadow-sm md:p-8"
+      >
+        <h1 className="border-l-4 border-accent-500 pl-3 text-2xl font-bold">Forgot Password</h1>
+        <p className="mt-1 pl-3 text-sm text-gray-600">Enter your email and new password</p>
+        <div className="mt-4 space-y-3">
+          <input
+            className="w-full border border-brand-100 p-2.5"
+            type="email"
+            placeholder="Email"
+            value={form.email}
+            onChange={(e) => setForm({ ...form, email: e.target.value })}
+          />
+          {fieldErrors.email && <p className="text-sm text-red-600">{fieldErrors.email}</p>}
+          <input
+            className="w-full border border-brand-100 p-2.5"
+            type="password"
+            placeholder="New password"
+            value={form.newPassword}
+            onChange={(e) => setForm({ ...form, newPassword: e.target.value })}
+          />
+          {fieldErrors.newPassword && <p className="text-sm text-red-600">{fieldErrors.newPassword}</p>}
+          <input
+            className="w-full border border-brand-100 p-2.5"
+            type="password"
+            placeholder="Confirm password"
+            value={form.confirmPassword}
+            onChange={(e) => setForm({ ...form, confirmPassword: e.target.value })}
+          />
+          {fieldErrors.confirmPassword && (
+            <p className="text-sm text-red-600">{fieldErrors.confirmPassword}</p>
+          )}
+        </div>
+        {message && <p className="mt-3 text-sm text-green-700">{message}</p>}
+        {error && <p className="mt-3 text-sm text-red-600">{error}</p>}
+        <button
+          type="submit"
+          disabled={loading}
+          className="mt-5 w-full border border-brand-800 bg-brand-800 px-4 py-2.5 font-semibold text-white disabled:opacity-60"
+        >
+          {loading ? "Please wait…" : "Reset Password"}
+        </button>
+        <Link to="/login" className="mt-3 block w-full text-center text-sm text-brand-800 underline">
+          Back to login
+        </Link>
+      </form>
+    </div>
+  );
+}
+
+export default ForgotPassword;

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

@@ -0,0 +1,142 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import api from "../services/api";
+
+function LoginPage() {
+  const [mode, setMode] = useState("login");
+  const [form, setForm] = useState({ username: "", email: "", password: "" });
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [error, setError] = useState("");
+  const [message, setMessage] = useState("");
+  const navigate = useNavigate();
+
+  const validate = () => {
+    const errors = {};
+    if (!form.username.trim()) errors.username = "Username is required.";
+    else if (form.username.trim().length < 3) {
+      errors.username = "Username must be at least 3 characters.";
+    }
+    if (mode === "register") {
+      if (!form.email.trim()) errors.email = "Email is required.";
+      else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) {
+        errors.email = "Enter a valid email address.";
+      }
+    }
+    if (!form.password) errors.password = "Password is required.";
+    else if (form.password.length < 6) {
+      errors.password = "Password must be at least 6 characters.";
+    }
+    setFieldErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const submit = async (event) => {
+    event.preventDefault();
+    setError("");
+    setMessage("");
+    if (!validate()) return;
+    try {
+      if (mode === "register") {
+        await api.post("/auth/register", {
+          username: form.username.trim(),
+          email: form.email.trim(),
+          password: form.password,
+        });
+        setMode("login");
+        setMessage("Registration successful. Please login.");
+        setForm({ username: form.username, email: "", password: "" });
+        return;
+      }
+
+      const { data } = await api.post("/auth/login", {
+        username: form.username.trim(),
+        password: form.password,
+      });
+      localStorage.setItem("smartshop_user", JSON.stringify(data.user));
+      localStorage.setItem("smartshop_token", data.token);
+      navigate("/");
+    } catch (err) {
+      setError(err.response?.data?.message || "Authentication failed");
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-brand-50 px-4 py-8">
+      <form
+        onSubmit={submit}
+        className="w-full max-w-md border border-brand-100 bg-white p-6 text-brand-900 shadow-sm md:p-8"
+      >
+        <h1 className="border-l-4 border-accent-500 pl-3 text-2xl font-bold">
+          Sales Management System
+        </h1>
+        <p className="mt-1 pl-3 text-sm text-gray-600">
+          SMS — {mode === "login" ? "Sign In" : "Create Account"}
+        </p>
+        <div className="mt-4 space-y-3">
+          <input
+            className="w-full border border-brand-100 p-2.5"
+            placeholder="Username"
+            value={form.username}
+            onChange={(e) => setForm({ ...form, username: e.target.value })}
+          />
+          {fieldErrors.username && (
+            <p className="text-sm text-red-600">{fieldErrors.username}</p>
+          )}
+          {mode === "register" && (
+            <>
+              <input
+                className="w-full border border-brand-100 p-2.5"
+                type="email"
+                placeholder="Email"
+                value={form.email}
+                onChange={(e) => setForm({ ...form, email: e.target.value })}
+              />
+              {fieldErrors.email && (
+                <p className="text-sm text-red-600">{fieldErrors.email}</p>
+              )}
+            </>
+          )}
+          <input
+            className="w-full border border-brand-100 p-2.5"
+            type="password"
+            placeholder="Password"
+            value={form.password}
+            onChange={(e) => setForm({ ...form, password: e.target.value })}
+          />
+          {fieldErrors.password && (
+            <p className="text-sm text-red-600">{fieldErrors.password}</p>
+          )}
+        </div>
+        {message && <p className="mt-3 text-sm text-green-700">{message}</p>}
+        {error && <p className="mt-3 text-sm text-red-600">{error}</p>}
+        <button
+          type="submit"
+          className="mt-5 w-full border border-brand-800 bg-brand-800 px-4 py-2.5 font-semibold text-white"
+        >
+          {mode === "login" ? "Sign In" : "Create Account"}
+        </button>
+        {mode === "login" && (
+          <Link to="/forgot-password" className="mt-3 block w-full text-center text-sm text-brand-800 underline">
+            Forgot Password?
+          </Link>
+        )}
+        <button
+          type="button"
+          onClick={() => {
+            setMode(mode === "login" ? "register" : "login");
+            setError("");
+            setMessage("");
+            setForm({ username: form.username, email: "", password: "" });
+          }}
+          className="mt-3 w-full border border-brand-800 px-4 py-2.5 font-semibold text-brand-800"
+        >
+          {mode === "login"
+            ? "Need an account? Register"
+            : "Already have an account? Login"}
+        </button>
+      </form>
+    </div>
+  );
+}
+
+export default LoginPage;

package/templates/smartshop-app/frontend/src/pages/ProductsPage.jsx

@@ -0,0 +1,165 @@
+import { useEffect, useState } from "react";
+import FormCard from "../components/FormCard";
+import api from "../services/api";
+
+const empty = { productName: "", category: "", quantity: "", price: "" };
+
+const validateProduct = (form) => {
+  const errors = {};
+  if (!form.productName.trim()) errors.productName = "Product 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.price || Number(form.price) <= 0) {
+    errors.price = "Price must be greater than 0.";
+  }
+  return errors;
+};
+
+function ProductsPage() {
+  const [products, setProducts] = useState([]);
+  const [form, setForm] = useState(empty);
+  const [editId, setEditId] = useState(null);
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [formMessage, setFormMessage] = useState("");
+
+  const loadProducts = () => api.get("/products").then((res) => setProducts(res.data));
+
+  useEffect(() => {
+    loadProducts();
+  }, []);
+
+  const setField = (key, value) => {
+    setForm((prev) => ({ ...prev, [key]: value }));
+    setFieldErrors((prev) => ({ ...prev, [key]: "" }));
+  };
+
+  const inputClass = (key) =>
+    `w-full border bg-white p-2.5 text-brand-900 ${fieldErrors[key] ? "border-red-500" : "border-brand-100"}`;
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setFormMessage("");
+    const errors = validateProduct(form);
+    if (Object.keys(errors).length) {
+      setFieldErrors(errors);
+      return;
+    }
+    try {
+      if (editId) await api.put(`/products/${editId}`, form);
+      else await api.post("/products", form);
+      setFormMessage(editId ? "Product updated successfully." : "Product saved successfully.");
+      setForm(empty);
+      setEditId(null);
+      setFieldErrors({});
+      loadProducts();
+    } catch (error) {
+      setFormMessage(error.response?.data?.message || "Unable to save product.");
+    }
+  };
+
+  return (
+    <div className="grid gap-6 lg:grid-cols-3">
+      <FormCard title={editId ? "Edit Product" : "Add Product"}>
+        <form onSubmit={submit} className="space-y-2">
+          <input
+            placeholder="Product Name"
+            value={form.productName}
+            onChange={(e) => setField("productName", e.target.value)}
+            className={inputClass("productName")}
+          />
+          {fieldErrors.productName && <p className="text-sm text-red-600">{fieldErrors.productName}</p>}
+          <input
+            placeholder="Category"
+            value={form.category}
+            onChange={(e) => setField("category", e.target.value)}
+            className={inputClass("category")}
+          />
+          {fieldErrors.category && <p className="text-sm text-red-600">{fieldErrors.category}</p>}
+          <input
+            type="number"
+            placeholder="Quantity"
+            value={form.quantity}
+            onChange={(e) => setField("quantity", e.target.value)}
+            className={inputClass("quantity")}
+          />
+          {fieldErrors.quantity && <p className="text-sm text-red-600">{fieldErrors.quantity}</p>}
+          <input
+            type="number"
+            placeholder="Price (RWF)"
+            value={form.price}
+            onChange={(e) => setField("price", e.target.value)}
+            className={inputClass("price")}
+          />
+          {fieldErrors.price && <p className="text-sm text-red-600">{fieldErrors.price}</p>}
+          {formMessage && <p className="text-sm text-brand-800">{formMessage}</p>}
+          <button className="w-full border border-brand-700 bg-brand-800 p-2.5 font-semibold text-white">
+            {editId ? "Update" : "Save"} Product
+          </button>
+        </form>
+      </FormCard>
+
+      <section className="border border-brand-100 bg-white p-5 shadow-sm lg:col-span-2 md:p-6">
+        <h2 className="mb-4 border-l-4 border-accent-500 pl-3 text-lg font-semibold text-brand-900">
+          All Products
+        </h2>
+        <div className="overflow-auto">
+          <table className="w-full text-sm text-brand-900">
+            <thead>
+              <tr className="text-left">
+                <th>Name</th>
+                <th>Category</th>
+                <th>Qty</th>
+                <th>Price</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {products.map((p) => (
+                <tr key={p.product_id} className="border-t border-brand-100">
+                  <td>{p.product_name}</td>
+                  <td>{p.category}</td>
+                  <td>{p.quantity}</td>
+                  <td>{p.price}</td>
+                  <td className="space-x-2 py-2">
+                    <button
+                      onClick={() => {
+                        setEditId(p.product_id);
+                        setForm({
+                          productName: p.product_name,
+                          category: p.category,
+                          quantity: p.quantity,
+                          price: p.price,
+                        });
+                        setFieldErrors({});
+                      }}
+                      className="border border-brand-700 px-2 py-1 text-brand-900"
+                    >
+                      Edit
+                    </button>
+                    <button
+                      onClick={async () => {
+                        try {
+                          await api.delete(`/products/${p.product_id}`);
+                          loadProducts();
+                        } catch (error) {
+                          alert(error.response?.data?.message || "Delete failed.");
+                        }
+                      }}
+                      className="border border-red-500 bg-red-500 px-2 py-1 text-white"
+                    >
+                      Delete
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export default ProductsPage;