create-ishvexa-app 1.0.0

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

@@ -0,0 +1,177 @@
+import { useState } from "react";
+import api from "../api/client.js";
+
+const sections = [
+  { key: "products", label: "Available Stock", cols: ["Code", "Name", "Qty", "Price"], keys: ["product_code", "product_name", "quantity_in_stock", "unit_price"] },
+  { key: "stockIn", label: "Stock In", cols: ["Date", "Qty", "Product", "Warehouse"], keys: ["transaction_date", "quantity_moved", "product_code", "warehouse_code"] },
+  { key: "stockOut", label: "Stock Out", cols: ["Date", "Qty", "Product", "Warehouse"], keys: ["transaction_date", "quantity_moved", "product_code", "warehouse_code"] },
+];
+
+const today = () => new Date().toISOString().slice(0, 10);
+const thisMonth = () => today().slice(0, 7);
+
+export default function ReportsPage() {
+  const [period, setPeriod] = useState("daily");
+  const [date, setDate] = useState(today());
+  const [startDate, setStartDate] = useState(today());
+  const [endDate, setEndDate] = useState(today());
+  const [month, setMonth] = useState(thisMonth());
+  const [data, setData] = useState(null);
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const load = async () => {
+    setError("");
+    setLoading(true);
+    try {
+      const params = { period };
+      if (period === "daily") params.date = date;
+      if (period === "weekly") {
+        if (!startDate || !endDate) {
+          setError("Select start date and end date for the weekly report.");
+          setLoading(false);
+          return;
+        }
+        if (startDate > endDate) {
+          setError("Start date must be before or equal to end date.");
+          setLoading(false);
+          return;
+        }
+        params.startDate = startDate;
+        params.endDate = endDate;
+      }
+      if (period === "monthly") params.month = month;
+
+      const { data: res } = await api.get("/reports", { params });
+      setData(res.reports);
+    } catch (err) {
+      setError(err.response?.data?.message || "Failed to load reports.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold text-ink">Reports</h2>
+        <p className="text-muted text-sm">Daily, weekly, and monthly stock and transaction reports</p>
+      </div>
+
+      <div className="bg-card rounded-xl border border-line p-6 space-y-4">
+        <label className="block text-sm font-medium text-ink">
+          Report type
+          <select
+            value={period}
+            onChange={(e) => setPeriod(e.target.value)}
+            className="mt-1 w-full md:w-64 rounded-lg border border-line px-3 py-2"
+          >
+            <option value="daily">Daily</option>
+            <option value="weekly">Weekly</option>
+            <option value="monthly">Monthly</option>
+          </select>
+        </label>
+
+        {period === "daily" && (
+          <label className="block text-sm font-medium text-ink">
+            Select date
+            <input
+              type="date"
+              value={date}
+              onChange={(e) => setDate(e.target.value)}
+              className="mt-1 w-full md:w-64 rounded-lg border border-line px-3 py-2"
+            />
+          </label>
+        )}
+
+        {period === "weekly" && (
+          <div className="grid gap-4 md:grid-cols-2">
+            <label className="block text-sm font-medium text-ink">
+              Start date
+              <input
+                type="date"
+                value={startDate}
+                onChange={(e) => setStartDate(e.target.value)}
+                className="mt-1 w-full rounded-lg border border-line px-3 py-2"
+              />
+            </label>
+            <label className="block text-sm font-medium text-ink">
+              End date
+              <input
+                type="date"
+                value={endDate}
+                onChange={(e) => setEndDate(e.target.value)}
+                className="mt-1 w-full rounded-lg border border-line px-3 py-2"
+              />
+            </label>
+          </div>
+        )}
+
+        {period === "monthly" && (
+          <label className="block text-sm font-medium text-ink">
+            Select month
+            <input
+              type="month"
+              value={month}
+              onChange={(e) => setMonth(e.target.value)}
+              className="mt-1 w-full md:w-64 rounded-lg border border-line px-3 py-2"
+            />
+          </label>
+        )}
+
+        <button
+          type="button"
+          onClick={load}
+          disabled={loading}
+          className="rounded-lg bg-accent text-accent-text px-5 py-2.5 font-semibold disabled:opacity-60"
+        >
+          {loading ? "Loading..." : "Generate report"}
+        </button>
+      </div>
+
+      {error && <p className="text-red-600 text-sm">{error}</p>}
+
+      {data && (
+        <div className="grid gap-6">
+          {sections.map((s) => (
+            <div key={s.key} className="bg-card rounded-xl border border-line overflow-x-auto">
+              <h3 className="px-4 py-3 font-semibold border-b border-line bg-surface">
+                {s.label} ({(data[s.key] || []).length})
+              </h3>
+              <table className="w-full text-sm">
+                <thead>
+                  <tr>
+                    {s.cols.map((c) => (
+                      <th key={c} className="px-4 py-2 text-left">
+                        {c}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {(data[s.key] || []).length === 0 ? (
+                    <tr>
+                      <td colSpan={s.cols.length} className="px-4 py-6 text-center text-muted">
+                        No records for this period.
+                      </td>
+                    </tr>
+                  ) : (
+                    (data[s.key] || []).map((row, i) => (
+                      <tr key={i} className="border-t border-line">
+                        {s.keys.map((k) => (
+                          <td key={k} className="px-4 py-2">
+                            {String(row[k] ?? "").slice(0, 40)}
+                          </td>
+                        ))}
+                      </tr>
+                    ))
+                  )}
+                </tbody>
+              </table>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,270 @@
+import { useEffect, useState } from "react";
+import api from "../api/client.js";
+
+const TRANSACTION_TYPES = ["IN", "OUT"];
+
+const emptyForm = {
+  transactionDate: "",
+  quantityMoved: "",
+  transactionType: "",
+  productCode: "",
+  warehouseCode: "",
+};
+
+const toDatetimeLocal = (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())}`;
+};
+
+const validateTransaction = (form, products, warehouses) => {
+  const errors = {};
+  if (!form.transactionDate) errors.transactionDate = "Transaction date is required.";
+  if (form.quantityMoved === "" || form.quantityMoved === undefined) {
+    errors.quantityMoved = "Quantity is required.";
+  } else if (Number(form.quantityMoved) <= 0) {
+    errors.quantityMoved = "Quantity must be greater than 0.";
+  }
+  if (!form.transactionType) errors.transactionType = "Select transaction type.";
+  else if (!TRANSACTION_TYPES.includes(form.transactionType)) {
+    errors.transactionType = "Select IN or OUT.";
+  }
+  if (!form.productCode) errors.productCode = "Select a product from the list.";
+  else if (!products.some((p) => p.product_code === form.productCode)) {
+    errors.productCode = "Selected product is not valid.";
+  }
+  if (!form.warehouseCode) errors.warehouseCode = "Select a warehouse from the list.";
+  else if (!warehouses.some((w) => w.warehouse_code === form.warehouseCode)) {
+    errors.warehouseCode = "Selected warehouse is not valid.";
+  }
+  return errors;
+};
+
+export default function TransactionsPage() {
+  const [form, setForm] = useState(emptyForm);
+  const [products, setProducts] = useState([]);
+  const [warehouses, setWarehouses] = useState([]);
+  const [rows, setRows] = useState([]);
+  const [editId, setEditId] = useState(null);
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [error, setError] = useState("");
+  const [message, setMessage] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const loadTransactions = async () => {
+    try {
+      const { data } = await api.get("/transactions");
+      setRows(data);
+    } catch {
+      setError("Failed to load records.");
+    }
+  };
+
+  const loadProducts = async () => {
+    try {
+      const { data } = await api.get("/products");
+      setProducts(data);
+    } catch {
+      setError("Failed to load products.");
+    }
+  };
+
+  const loadWarehouses = async () => {
+    try {
+      const { data } = await api.get("/warehouses");
+      setWarehouses(data);
+    } catch {
+      setError("Failed to load warehouses.");
+    }
+  };
+
+  useEffect(() => {
+    loadTransactions();
+    loadProducts();
+    loadWarehouses();
+  }, []);
+
+  const setField = (key, value) => {
+    setForm((prev) => ({ ...prev, [key]: value }));
+    setFieldErrors((prev) => ({ ...prev, [key]: "" }));
+  };
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setError("");
+    setMessage("");
+    const errors = validateTransaction(form, products, warehouses);
+    if (Object.keys(errors).length) {
+      setFieldErrors(errors);
+      return;
+    }
+    setLoading(true);
+    try {
+      if (editId) {
+        await api.put(`/transactions/${editId}`, form);
+        setMessage("Transaction updated.");
+      } else {
+        await api.post("/transactions", form);
+        setMessage("Transaction added.");
+      }
+      setForm(emptyForm);
+      setEditId(null);
+      setFieldErrors({});
+      loadTransactions();
+    } catch (err) {
+      setError(err.response?.data?.message || "Operation failed.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const startEdit = (row) => {
+    setEditId(row.transaction_id);
+    setForm({
+      transactionDate: toDatetimeLocal(row.transaction_date),
+      quantityMoved: String(row.quantity_moved ?? ""),
+      transactionType: row.transaction_type ?? "",
+      productCode: row.product_code ?? "",
+      warehouseCode: row.warehouse_code ?? "",
+    });
+    setFieldErrors({});
+  };
+
+  const remove = async (id) => {
+    if (!window.confirm("Delete this record?")) return;
+    try {
+      await api.delete(`/transactions/${id}`);
+      loadTransactions();
+    } catch {
+      setError("Delete failed.");
+    }
+  };
+
+  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">Stock Transactions</h2>
+        <p className="text-muted text-sm">Manage transactions with full CRUD</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">Transaction Date</span>
+          <input
+            type="datetime-local"
+            className={inputClass("transactionDate")}
+            value={form.transactionDate}
+            onChange={(e) => setField("transactionDate", e.target.value)}
+          />
+          {fieldErrors.transactionDate && <p className="text-red-600 text-xs mt-1">{fieldErrors.transactionDate}</p>}
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Quantity Moved</span>
+          <input
+            type="number"
+            min="1"
+            className={inputClass("quantityMoved")}
+            value={form.quantityMoved}
+            onChange={(e) => setField("quantityMoved", e.target.value)}
+          />
+          {fieldErrors.quantityMoved && <p className="text-red-600 text-xs mt-1">{fieldErrors.quantityMoved}</p>}
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Type</span>
+          <select
+            className={inputClass("transactionType")}
+            value={form.transactionType}
+            onChange={(e) => setField("transactionType", e.target.value)}
+          >
+            <option value="">Select type</option>
+            {TRANSACTION_TYPES.map((t) => (
+              <option key={t} value={t}>{t}</option>
+            ))}
+          </select>
+          {fieldErrors.transactionType && <p className="text-red-600 text-xs mt-1">{fieldErrors.transactionType}</p>}
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Product</span>
+          <select
+            className={inputClass("productCode")}
+            value={form.productCode}
+            onChange={(e) => setField("productCode", e.target.value)}
+          >
+            <option value="">Select product</option>
+            {products.map((p) => (
+              <option key={p.product_code} value={p.product_code}>
+                {p.product_code} — {p.product_name}
+              </option>
+            ))}
+          </select>
+          {fieldErrors.productCode && <p className="text-red-600 text-xs mt-1">{fieldErrors.productCode}</p>}
+        </label>
+        <label className="block text-sm md:col-span-2">
+          <span className="font-medium text-ink">Warehouse</span>
+          <select
+            className={inputClass("warehouseCode")}
+            value={form.warehouseCode}
+            onChange={(e) => setField("warehouseCode", e.target.value)}
+          >
+            <option value="">Select warehouse</option>
+            {warehouses.map((w) => (
+              <option key={w.warehouse_code} value={w.warehouse_code}>
+                {w.warehouse_code} — {w.warehouse_name}
+              </option>
+            ))}
+          </select>
+          {fieldErrors.warehouseCode && <p className="text-red-600 text-xs mt-1">{fieldErrors.warehouseCode}</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..." : editId ? "Update" : "Add"}
+          </button>
+          {editId && (
+            <button
+              type="button"
+              onClick={() => { setEditId(null); setForm(emptyForm); setFieldErrors({}); }}
+              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 text-left">
+            <tr>
+              <th className="px-4 py-3">Date</th>
+              <th className="px-4 py-3">Qty</th>
+              <th className="px-4 py-3">Type</th>
+              <th className="px-4 py-3">Product</th>
+              <th className="px-4 py-3">Warehouse</th>
+              <th className="px-4 py-3">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <tr key={row.transaction_id} className="border-t border-line">
+                <td className="px-4 py-3">{String(row.transaction_date ?? "").slice(0, 19)}</td>
+                <td className="px-4 py-3">{row.quantity_moved}</td>
+                <td className="px-4 py-3">{row.transaction_type}</td>
+                <td className="px-4 py-3">{row.product_code}</td>
+                <td className="px-4 py-3">{row.warehouse_code}</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.transaction_id)} className="text-red-600 font-medium">Delete</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,116 @@
+import { useEffect, useState } from "react";
+import api from "../api/client.js";
+
+const emptyForm = { warehouseCode: "", warehouseName: "", warehouseLocation: "" };
+
+const validateWarehouse = (form) => {
+  const errors = {};
+  if (!form.warehouseCode.trim()) errors.warehouseCode = "Warehouse code is required.";
+  else if (form.warehouseCode.trim().length < 2) errors.warehouseCode = "Code must be at least 2 characters.";
+  if (!form.warehouseName.trim()) errors.warehouseName = "Warehouse name is required.";
+  if (!form.warehouseLocation.trim()) errors.warehouseLocation = "Location is required.";
+  return errors;
+};
+
+const fields = [
+  { key: "warehouseCode", col: "warehouse_code", label: "Warehouse Code" },
+  { key: "warehouseName", col: "warehouse_name", label: "Warehouse Name" },
+  { key: "warehouseLocation", col: "warehouse_location", label: "Location" },
+];
+
+export default function WarehousesPage() {
+  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("/warehouses");
+      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 = validateWarehouse(form);
+    if (Object.keys(errors).length) {
+      setFieldErrors(errors);
+      return;
+    }
+    setLoading(true);
+    try {
+      await api.post("/warehouses", form);
+      setMessage("Warehouse 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">Warehouses</h2>
+        <p className="text-muted text-sm">Add new warehouse 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="text"
+              className={inputClass(f.key)}
+              value={form[f.key]}
+              onChange={(e) =>
+                setField(f.key, f.key === "warehouseCode" ? 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 Warehouse"}
+          </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>
+  );
+}

package/templates/stockhub-sms-app/frontend/vite.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: { port: 5173, strictPort: false },
+});