create-ishvexa-app 1.0.0

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

@@ -0,0 +1,192 @@
+import { useState } from "react";
+import api from "../api/client.js";
+
+const sections = [
+  {
+    key: "suppliers",
+    label: "Suppliers",
+    cols: ["Code", "Name", "Phone", "Email"],
+    keys: ["supplier_code", "supplier_name", "telephone", "email"],
+  },
+  {
+    key: "shipments",
+    label: "Shipments",
+    cols: ["Number", "Date", "Status", "Destination", "Supplier"],
+    keys: ["shipment_number", "shipment_date", "shipment_status", "destination", "supplier_code"],
+  },
+  {
+    key: "deliveries",
+    label: "Deliveries",
+    cols: ["Code", "Date", "Qty", "Status", "Shipment"],
+    keys: ["delivery_code", "delivery_date", "quantity_delivered", "delivery_status", "shipment_number"],
+  },
+];
+
+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 supplier, shipment, and delivery 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/scms-app/frontend/src/pages/ShipmentsPage.jsx

@@ -0,0 +1,259 @@
+import { useEffect, useState } from "react";
+import api from "../api/client.js";
+
+const SHIPMENT_STATUSES = ["Pending", "In Transit", "Delivered", "Cancelled"];
+
+const emptyForm = {
+  shipmentNumber: "",
+  shipmentDate: "",
+  shipmentStatus: "",
+  destination: "",
+  supplierCode: "",
+};
+
+const validateShipment = (form, suppliers) => {
+  const errors = {};
+  if (!form.shipmentNumber.trim()) errors.shipmentNumber = "Shipment number is required.";
+  if (!form.shipmentDate) errors.shipmentDate = "Shipment date is required.";
+  if (!form.shipmentStatus) errors.shipmentStatus = "Select shipment status.";
+  else if (!SHIPMENT_STATUSES.includes(form.shipmentStatus)) {
+    errors.shipmentStatus = "Select a valid status from the list.";
+  }
+  if (!form.destination.trim()) errors.destination = "Destination is required.";
+  if (!form.supplierCode) errors.supplierCode = "Select a supplier from the list.";
+  else if (!suppliers.some((s) => s.supplier_code === form.supplierCode)) {
+    errors.supplierCode = "Selected supplier 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 ShipmentsPage() {
+  const [form, setForm] = useState(emptyForm);
+  const [suppliers, setSuppliers] = useState([]);
+  const [rows, setRows] = useState([]);
+  const [editId, setEditId] = useState(null);
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [error, setError] = useState("");
+  const [message, setMessage] = useState("");
+
+  const loadShipments = async () => {
+    try {
+      const { data } = await api.get("/shipments");
+      setRows(data);
+    } catch {
+      setError("Failed to load shipment records.");
+    }
+  };
+
+  const loadSuppliers = async () => {
+    try {
+      const { data } = await api.get("/suppliers");
+      setSuppliers(data);
+    } catch {
+      setError("Failed to load suppliers.");
+    }
+  };
+
+  useEffect(() => {
+    loadShipments();
+    loadSuppliers();
+  }, []);
+
+  const setField = (key, value) => {
+    setForm((prev) => ({ ...prev, [key]: value }));
+    setFieldErrors((prev) => ({ ...prev, [key]: "" }));
+  };
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setError("");
+    setMessage("");
+    const errors = validateShipment(form, suppliers);
+    if (Object.keys(errors).length) {
+      setFieldErrors(errors);
+      return;
+    }
+    try {
+      if (editId) {
+        await api.put(`/shipments/${editId}`, form);
+        setMessage("Shipment updated.");
+      } else {
+        await api.post("/shipments", form);
+        setMessage("Shipment added.");
+      }
+      setForm(emptyForm);
+      setFieldErrors({});
+      setEditId(null);
+      loadShipments();
+    } catch (err) {
+      setError(err.response?.data?.message || "Operation failed.");
+    }
+  };
+
+  const startEdit = (row) => {
+    setEditId(row.shipment_number);
+    setFieldErrors({});
+    setForm({
+      shipmentNumber: row.shipment_number ?? "",
+      shipmentDate: formatDateTimeLocal(row.shipment_date),
+      shipmentStatus: row.shipment_status ?? "",
+      destination: row.destination ?? "",
+      supplierCode: row.supplier_code ?? "",
+    });
+  };
+
+  const remove = async (id) => {
+    if (!window.confirm("Delete this record?")) return;
+    try {
+      await api.delete(`/shipments/${id}`);
+      loadShipments();
+    } catch {
+      setError("Delete failed.");
+    }
+  };
+
+  const supplierLabel = (code) => {
+    const s = suppliers.find((x) => x.supplier_code === code);
+    return s ? `${s.supplier_name} (${code})` : code;
+  };
+
+  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">Shipments</h2>
+        <p className="text-muted text-sm">Manage shipments — select supplier and status from the list</p>
+      </div>
+      {suppliers.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 supplier before creating shipments.
+        </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">Shipment Number</span>
+          <input
+            className={inputClass("shipmentNumber")}
+            value={form.shipmentNumber}
+            onChange={(e) => setField("shipmentNumber", e.target.value)}
+            disabled={!!editId}
+          />
+          {fieldErrors.shipmentNumber && <p className="text-red-600 text-xs mt-1">{fieldErrors.shipmentNumber}</p>}
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Shipment Date</span>
+          <input
+            type="datetime-local"
+            className={inputClass("shipmentDate")}
+            value={form.shipmentDate}
+            onChange={(e) => setField("shipmentDate", e.target.value)}
+          />
+          {fieldErrors.shipmentDate && <p className="text-red-600 text-xs mt-1">{fieldErrors.shipmentDate}</p>}
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Status</span>
+          <select
+            className={inputClass("shipmentStatus")}
+            value={form.shipmentStatus}
+            onChange={(e) => setField("shipmentStatus", e.target.value)}
+          >
+            <option value="">Select status</option>
+            {SHIPMENT_STATUSES.map((s) => (
+              <option key={s} value={s}>{s}</option>
+            ))}
+          </select>
+          {fieldErrors.shipmentStatus && <p className="text-red-600 text-xs mt-1">{fieldErrors.shipmentStatus}</p>}
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Destination</span>
+          <input
+            className={inputClass("destination")}
+            value={form.destination}
+            onChange={(e) => setField("destination", e.target.value)}
+          />
+          {fieldErrors.destination && <p className="text-red-600 text-xs mt-1">{fieldErrors.destination}</p>}
+        </label>
+        <label className="block text-sm md:col-span-2">
+          <span className="font-medium text-ink">Supplier</span>
+          <select
+            className={inputClass("supplierCode")}
+            value={form.supplierCode}
+            onChange={(e) => setField("supplierCode", e.target.value)}
+            disabled={suppliers.length === 0}
+          >
+            <option value="">Select supplier</option>
+            {suppliers.map((s) => (
+              <option key={s.supplier_code} value={s.supplier_code}>
+                {s.supplier_code} — {s.supplier_name}
+              </option>
+            ))}
+          </select>
+          {fieldErrors.supplierCode && <p className="text-red-600 text-xs mt-1">{fieldErrors.supplierCode}</p>}
+        </label>
+        <div className="md:col-span-2 flex flex-wrap gap-3 items-center">
+          <button
+            type="submit"
+            disabled={suppliers.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">Number</th>
+              <th className="px-4 py-3 text-left">Date</th>
+              <th className="px-4 py-3 text-left">Status</th>
+              <th className="px-4 py-3 text-left">Destination</th>
+              <th className="px-4 py-3 text-left">Supplier</th>
+              <th className="px-4 py-3">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <tr key={row.shipment_number} className="border-t border-line">
+                <td className="px-4 py-3">{row.shipment_number}</td>
+                <td className="px-4 py-3">{String(row.shipment_date ?? "").slice(0, 16)}</td>
+                <td className="px-4 py-3">{row.shipment_status}</td>
+                <td className="px-4 py-3">{row.destination}</td>
+                <td className="px-4 py-3">{supplierLabel(row.supplier_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.shipment_number)} className="text-red-600 font-medium">Delete</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,168 @@
+import { useEffect, useState } from "react";
+import api from "../api/client.js";
+
+const emptyForm = {
+  supplierCode: "",
+  supplierName: "",
+  telephone: "",
+  address: "",
+  email: "",
+};
+
+const validateSupplier = (form) => {
+  const errors = {};
+  if (!form.supplierCode.trim()) errors.supplierCode = "Supplier code is required.";
+  if (!form.supplierName.trim()) errors.supplierName = "Supplier 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.";
+  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.";
+  }
+  return errors;
+};
+
+export default function SuppliersPage() {
+  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("/suppliers");
+      setRows(data);
+    } catch {
+      setError("Failed to load supplier 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 = validateSupplier(form);
+    if (Object.keys(errors).length) {
+      setFieldErrors(errors);
+      return;
+    }
+    setLoading(true);
+    try {
+      await api.post("/suppliers", form);
+      setMessage("Supplier 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">Suppliers</h2>
+        <p className="text-muted text-sm">Add new supplier 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">Supplier Code</span>
+          <input
+            className={inputClass("supplierCode")}
+            value={form.supplierCode}
+            onChange={(e) => setField("supplierCode", e.target.value)}
+          />
+          {fieldErrors.supplierCode && <p className="text-red-600 text-xs mt-1">{fieldErrors.supplierCode}</p>}
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Supplier Name</span>
+          <input
+            className={inputClass("supplierName")}
+            value={form.supplierName}
+            onChange={(e) => setField("supplierName", e.target.value)}
+          />
+          {fieldErrors.supplierName && <p className="text-red-600 text-xs mt-1">{fieldErrors.supplierName}</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">
+          <span className="font-medium text-ink">Email</span>
+          <input
+            type="email"
+            className={inputClass("email")}
+            value={form.email}
+            onChange={(e) => setField("email", e.target.value)}
+          />
+          {fieldErrors.email && <p className="text-red-600 text-xs mt-1">{fieldErrors.email}</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 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 disabled:opacity-50">
+            {loading ? "Saving..." : "Add Supplier"}
+          </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">Code</th>
+              <th className="px-4 py-3">Name</th>
+              <th className="px-4 py-3">Telephone</th>
+              <th className="px-4 py-3">Email</th>
+              <th className="px-4 py-3">Address</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <tr key={row.supplier_code} className="border-t border-line">
+                <td className="px-4 py-3">{row.supplier_code}</td>
+                <td className="px-4 py-3">{row.supplier_name}</td>
+                <td className="px-4 py-3">{row.telephone}</td>
+                <td className="px-4 py-3">{row.email}</td>
+                <td className="px-4 py-3">{row.address}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

package/templates/scms-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 },
+});

package/templates/sfms-app/.env

@@ -0,0 +1,7 @@
+PORT=5000
+DB_HOST=localhost
+DB_USER=student
+DB_PASSWORD=
+DB_NAME=SFMS
+DB_PORT=3306
+JWT_SECRET=change-me-in-production