create-ishvexa-app 1.0.0

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

@@ -0,0 +1,192 @@
+import { useState } from "react";
+import api from "../api/client.js";
+
+const sections = [
+  {
+    key: "employees",
+    label: "Employees",
+    cols: ["Number", "First Name", "Last Name", "Position", "Department", "Hired Date"],
+    keys: ["employee_number", "first_name", "last_name", "position", "department_code", "hired_date"],
+  },
+  {
+    key: "departments",
+    label: "Departments",
+    cols: ["Code", "Name"],
+    keys: ["department_code", "department_name"],
+  },
+  {
+    key: "salaries",
+    label: "Salaries",
+    cols: ["Gross", "Deduction", "Net", "Month", "Employee"],
+    keys: ["gross_salary", "total_deduction", "net_salary", "month_of_payment", "employee_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 employee, department, and salary 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/epms-app/frontend/src/pages/ResetPasswordPage.jsx

@@ -0,0 +1,83 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { recoverPassword } from "../api/authApi";
+
+function ResetPasswordPage() {
+  const [username, setUsername] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [message, setMessage] = useState("");
+  const [error, setError] = useState("");
+
+  const handleReset = async (event) => {
+    event.preventDefault();
+    setError("");
+    setMessage("");
+    const cleanUsername = username.trim();
+    if (cleanUsername.length < 3) {
+      setError("Username must be at least 3 characters");
+      return;
+    }
+    if (newPassword.length < 6) {
+      setError("New password must be at least 6 characters");
+      return;
+    }
+
+    try {
+      const response = await recoverPassword({ username: cleanUsername, newPassword });
+      setMessage(response.data.message);
+      setNewPassword("");
+    } catch (err) {
+      setError(err.response?.data?.message || "Password reset failed");
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-slate-100 p-4">
+      <div className="w-full max-w-md rounded-xl bg-white p-6 shadow-lg">
+        <h1 className="mb-2 text-2xl font-bold text-amber-900">Reset Password</h1>
+        <p className="mb-6 text-slate-600">Set a new password for an existing account.</p>
+
+        {(error || message) && (
+          <div
+            className={`mb-4 rounded-md px-4 py-3 text-sm ${
+              error ? "bg-red-100 text-red-700" : "bg-green-100 text-green-700"
+            }`}
+          >
+            {error || message}
+          </div>
+        )}
+
+        <form onSubmit={handleReset} className="space-y-3 rounded-lg border p-4">
+          <input
+            className="w-full rounded-md border px-3 py-2"
+            placeholder="Username"
+            value={username}
+            onChange={(event) => setUsername(event.target.value)}
+            minLength={3}
+            required
+          />
+          <input
+            type="password"
+            className="w-full rounded-md border px-3 py-2"
+            placeholder="New password"
+            value={newPassword}
+            onChange={(event) => setNewPassword(event.target.value)}
+            minLength={6}
+            required
+          />
+          <button className="w-full rounded-md bg-amber-600 px-3 py-2 font-medium text-white hover:bg-amber-700">
+            Reset Password
+          </button>
+        </form>
+
+        <div className="mt-4 text-sm">
+          <Link to="/login" className="text-blue-700 hover:underline">
+            Back to login
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ResetPasswordPage;

package/templates/epms-app/frontend/src/pages/SalariesPage.jsx

@@ -0,0 +1,274 @@
+import { useEffect, useState } from "react";
+import api from "../api/client.js";
+
+const calcNet = (gross, deduction) => {
+  const g = Number(gross);
+  const d = Number(deduction);
+  if (gross === "" || deduction === "" || Number.isNaN(g) || Number.isNaN(d)) return "";
+  if (d > g) return "invalid";
+  return String(Math.round((g - d) * 100) / 100);
+};
+
+const validateSalary = (form, employees) => {
+  const errors = {};
+  if (!form.employeeNumber) errors.employeeNumber = "Select an employee from the list.";
+  else if (!employees.some((e) => e.employee_number === form.employeeNumber)) {
+    errors.employeeNumber = "Selected employee is not valid.";
+  }
+  if (form.grossSalary === "" || Number.isNaN(Number(form.grossSalary))) {
+    errors.grossSalary = "Gross salary is required.";
+  } else if (Number(form.grossSalary) < 0) errors.grossSalary = "Gross salary cannot be negative.";
+  if (form.totalDeduction === "" || Number.isNaN(Number(form.totalDeduction))) {
+    errors.totalDeduction = "Total deduction is required.";
+  } else if (Number(form.totalDeduction) < 0) errors.totalDeduction = "Deduction cannot be negative.";
+  if (!errors.grossSalary && !errors.totalDeduction) {
+    const net = calcNet(form.grossSalary, form.totalDeduction);
+    if (net === "invalid") errors.totalDeduction = "Deduction cannot exceed gross salary.";
+  }
+  if (!form.monthOfPayment) errors.monthOfPayment = "Select month of payment.";
+  return errors;
+};
+
+export default function SalariesPage() {
+  const [form, setForm] = useState({
+    grossSalary: "",
+    totalDeduction: "",
+    netSalary: "",
+    monthOfPayment: "",
+    employeeNumber: "",
+  });
+  const [employees, setEmployees] = useState([]);
+  const [rows, setRows] = useState([]);
+  const [editId, setEditId] = useState(null);
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [error, setError] = useState("");
+  const [message, setMessage] = useState("");
+
+  const loadSalaries = async () => {
+    try {
+      const { data } = await api.get("/salaries");
+      setRows(data);
+    } catch {
+      setError("Failed to load salary records.");
+    }
+  };
+
+  const loadEmployees = async () => {
+    try {
+      const { data } = await api.get("/employees");
+      setEmployees(data);
+    } catch {
+      setError("Failed to load employees.");
+    }
+  };
+
+  useEffect(() => {
+    loadSalaries();
+    loadEmployees();
+  }, []);
+
+  const updateAmounts = (key, value) => {
+    const next = { ...form, [key]: value };
+    const net = calcNet(
+      key === "grossSalary" ? value : next.grossSalary,
+      key === "totalDeduction" ? value : next.totalDeduction
+    );
+    next.netSalary = net === "invalid" ? "" : net;
+    setForm(next);
+    setFieldErrors((prev) => ({ ...prev, [key]: "", netSalary: "" }));
+  };
+
+  const setField = (key, value) => {
+    setForm((prev) => ({ ...prev, [key]: value }));
+    setFieldErrors((prev) => ({ ...prev, [key]: "" }));
+  };
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setError("");
+    setMessage("");
+    const errors = validateSalary(form, employees);
+    if (Object.keys(errors).length) {
+      setFieldErrors(errors);
+      return;
+    }
+    const net = calcNet(form.grossSalary, form.totalDeduction);
+    const payload = { ...form, netSalary: net };
+    try {
+      if (editId) {
+        await api.put(`/salaries/${editId}`, payload);
+        setMessage("Salary updated.");
+      } else {
+        await api.post("/salaries", payload);
+        setMessage("Salary added.");
+      }
+      setForm({ grossSalary: "", totalDeduction: "", netSalary: "", monthOfPayment: "", employeeNumber: "" });
+      setFieldErrors({});
+      setEditId(null);
+      loadSalaries();
+    } catch (err) {
+      setError(err.response?.data?.message || "Operation failed.");
+    }
+  };
+
+  const startEdit = (row) => {
+    setEditId(row.salary_id);
+    setFieldErrors({});
+    setForm({
+      grossSalary: String(row.gross_salary ?? ""),
+      totalDeduction: String(row.total_deduction ?? ""),
+      netSalary: String(row.net_salary ?? ""),
+      monthOfPayment: row.month_of_payment ?? "",
+      employeeNumber: row.employee_number ?? "",
+    });
+  };
+
+  const remove = async (id) => {
+    if (!window.confirm("Delete this record?")) return;
+    try {
+      await api.delete(`/salaries/${id}`);
+      loadSalaries();
+    } catch {
+      setError("Delete failed.");
+    }
+  };
+
+  const employeeLabel = (number) => {
+    const emp = employees.find((e) => e.employee_number === number);
+    if (!emp) return number;
+    return `${emp.first_name} ${emp.last_name} (${number})`;
+  };
+
+  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">Salary Records</h2>
+        <p className="text-muted text-sm">Select employee, enter amounts — net salary is calculated automatically</p>
+      </div>
+      {employees.length === 0 && (
+        <p className="text-amber-700 text-sm bg-amber-50 border border-amber-200 rounded-lg px-4 py-3">
+          Add employees before recording salary payments.
+        </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 md:col-span-2">
+          <span className="font-medium text-ink">Employee</span>
+          <select
+            className={inputClass("employeeNumber")}
+            value={form.employeeNumber}
+            onChange={(e) => setField("employeeNumber", e.target.value)}
+            disabled={employees.length === 0}
+          >
+            <option value="">Select employee</option>
+            {employees.map((emp) => (
+              <option key={emp.employee_number} value={emp.employee_number}>
+                {emp.employee_number} — {emp.first_name} {emp.last_name} ({emp.position})
+              </option>
+            ))}
+          </select>
+          {fieldErrors.employeeNumber && <p className="text-red-600 text-xs mt-1">{fieldErrors.employeeNumber}</p>}
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Gross Salary</span>
+          <input
+            type="number"
+            min="0"
+            step="0.01"
+            className={inputClass("grossSalary")}
+            value={form.grossSalary}
+            onChange={(e) => updateAmounts("grossSalary", e.target.value)}
+          />
+          {fieldErrors.grossSalary && <p className="text-red-600 text-xs mt-1">{fieldErrors.grossSalary}</p>}
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Total Deduction</span>
+          <input
+            type="number"
+            min="0"
+            step="0.01"
+            className={inputClass("totalDeduction")}
+            value={form.totalDeduction}
+            onChange={(e) => updateAmounts("totalDeduction", e.target.value)}
+          />
+          {fieldErrors.totalDeduction && <p className="text-red-600 text-xs mt-1">{fieldErrors.totalDeduction}</p>}
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Net Salary</span>
+          <input
+            type="text"
+            readOnly
+            className="mt-1 w-full rounded-lg border border-line bg-surface px-3 py-2 text-muted"
+            value={form.netSalary}
+            placeholder="Auto-calculated"
+          />
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Month of Payment</span>
+          <input
+            type="month"
+            className={inputClass("monthOfPayment")}
+            value={form.monthOfPayment}
+            onChange={(e) => setField("monthOfPayment", e.target.value)}
+          />
+          {fieldErrors.monthOfPayment && <p className="text-red-600 text-xs mt-1">{fieldErrors.monthOfPayment}</p>}
+        </label>
+        <div className="md:col-span-2 flex flex-wrap gap-3 items-center">
+          <button
+            type="submit"
+            disabled={employees.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({ grossSalary: "", totalDeduction: "", netSalary: "", monthOfPayment: "", employeeNumber: "" });
+              }}
+              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">Employee</th>
+              <th className="px-4 py-3 text-left">Gross</th>
+              <th className="px-4 py-3 text-left">Deduction</th>
+              <th className="px-4 py-3 text-left">Net</th>
+              <th className="px-4 py-3 text-left">Month</th>
+              <th className="px-4 py-3">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <tr key={row.salary_id} className="border-t border-line">
+                <td className="px-4 py-3">{employeeLabel(row.employee_number)}</td>
+                <td className="px-4 py-3">{row.gross_salary}</td>
+                <td className="px-4 py-3">{row.total_deduction}</td>
+                <td className="px-4 py-3">{row.net_salary}</td>
+                <td className="px-4 py-3">{row.month_of_payment}</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.salary_id)} className="text-red-600 font-medium">Delete</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}