create-ishvexa-app 1.0.0

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

@@ -0,0 +1,165 @@
+import { useEffect, useState } from "react";
+import { createDepartment, getDepartments, seedDepartments } from "../api/departmentApi";
+
+function DepartmentPage() {
+  const [departments, setDepartments] = useState([]);
+  const [form, setForm] = useState({
+    departmentCode: "",
+    departmentName: "",
+    grossSalary: "",
+    totalDeduction: "",
+  });
+  const [message, setMessage] = useState("");
+
+  const loadDepartments = async () => {
+    const response = await getDepartments();
+    setDepartments(response.data);
+  };
+
+  useEffect(() => {
+    loadDepartments().catch(() => setMessage("Failed to load departments"));
+  }, []);
+
+  const onChange = (event) => {
+    setForm((prev) => ({ ...prev, [event.target.name]: event.target.value }));
+  };
+
+  const onSubmit = async (event) => {
+    event.preventDefault();
+    setMessage("");
+    const code = form.departmentCode.trim().toUpperCase();
+    const name = form.departmentName.trim();
+    const gross = Number(form.grossSalary);
+    const deduction = Number(form.totalDeduction);
+    if (!/^[A-Z0-9]{2,10}$/.test(code)) {
+      setMessage("Department code must be 2-10 uppercase letters or numbers");
+      return;
+    }
+    if (name.length < 2) {
+      setMessage("Department name must be at least 2 characters");
+      return;
+    }
+    if (Number.isNaN(gross) || gross < 0 || Number.isNaN(deduction) || deduction < 0) {
+      setMessage("Gross salary and deduction must be positive numbers");
+      return;
+    }
+    if (deduction > gross) {
+      setMessage("Total deduction cannot exceed gross salary");
+      return;
+    }
+    try {
+      await createDepartment({
+        departmentCode: code,
+        departmentName: name,
+        grossSalary: gross,
+        totalDeduction: deduction,
+      });
+      setMessage("Department saved");
+      setForm({ departmentCode: "", departmentName: "", grossSalary: "", totalDeduction: "" });
+      await loadDepartments();
+    } catch (error) {
+      setMessage(error.response?.data?.message || "Failed to save department");
+    }
+  };
+
+  const onSeed = async () => {
+    setMessage("");
+    try {
+      await seedDepartments();
+      setMessage("Starter departments loaded");
+      await loadDepartments();
+    } catch (error) {
+      setMessage(error.response?.data?.message || "Failed to seed departments");
+    }
+  };
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2">
+      <section className="rounded-lg bg-white p-4 shadow">
+        <div className="mb-3 flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-blue-900">Department Form</h2>
+          <button
+            type="button"
+            onClick={onSeed}
+            className="rounded-md bg-indigo-600 px-3 py-2 text-sm text-white hover:bg-indigo-700"
+          >
+            Seed Defaults
+          </button>
+        </div>
+        <form onSubmit={onSubmit} className="space-y-3">
+          <input
+            name="departmentCode"
+            className="w-full rounded-md border px-3 py-2"
+            placeholder="Department Code"
+            value={form.departmentCode}
+            onChange={onChange}
+            pattern="[A-Za-z0-9]{2,10}"
+            title="Use 2-10 letters or numbers"
+            required
+          />
+          <input
+            name="departmentName"
+            className="w-full rounded-md border px-3 py-2"
+            placeholder="Department Name"
+            value={form.departmentName}
+            onChange={onChange}
+            minLength={2}
+            required
+          />
+          <input
+            type="number"
+            name="grossSalary"
+            className="w-full rounded-md border px-3 py-2"
+            placeholder="Gross Salary"
+            value={form.grossSalary}
+            onChange={onChange}
+            min={0}
+            required
+          />
+          <input
+            type="number"
+            name="totalDeduction"
+            className="w-full rounded-md border px-3 py-2"
+            placeholder="Total Deduction"
+            value={form.totalDeduction}
+            onChange={onChange}
+            min={0}
+            required
+          />
+          <button className="w-full rounded-md bg-blue-700 px-3 py-2 font-medium text-white hover:bg-blue-800">
+            Save Department
+          </button>
+        </form>
+        {message && <p className="mt-3 text-sm text-slate-600">{message}</p>}
+      </section>
+
+      <section className="rounded-lg bg-white p-4 shadow">
+        <h2 className="mb-3 text-lg font-semibold text-blue-900">Saved Departments</h2>
+        <div className="overflow-x-auto">
+          <table className="min-w-full text-sm">
+            <thead>
+              <tr className="bg-slate-100">
+                <th className="p-2 text-left">Code</th>
+                <th className="p-2 text-left">Name</th>
+                <th className="p-2 text-right">Gross</th>
+                <th className="p-2 text-right">Deduction</th>
+              </tr>
+            </thead>
+            <tbody>
+              {departments.map((item) => (
+                <tr key={item._id} className="border-b">
+                  <td className="p-2">{item.departmentCode}</td>
+                  <td className="p-2">{item.departmentName}</td>
+                  <td className="p-2 text-right">{item.grossSalary}</td>
+                  <td className="p-2 text-right">{item.totalDeduction}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export default DepartmentPage;

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

@@ -0,0 +1,119 @@
+import { useEffect, useState } from "react";
+import api from "../api/client.js";
+
+const emptyForm = { departmentCode: "", departmentName: "" };
+
+const validateDepartment = (form) => {
+  const errors = {};
+  if (!form.departmentCode.trim()) errors.departmentCode = "Department code is required.";
+  else if (form.departmentCode.trim().length < 2) errors.departmentCode = "Code must be at least 2 characters.";
+  if (!form.departmentName.trim()) errors.departmentName = "Department name is required.";
+  return errors;
+};
+
+export default function DepartmentsPage() {
+  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("/departments");
+      setRows(data);
+    } catch {
+      setError("Failed to load departments.");
+    }
+  };
+
+  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 = validateDepartment(form);
+    if (Object.keys(errors).length) {
+      setFieldErrors(errors);
+      return;
+    }
+    setLoading(true);
+    try {
+      await api.post("/departments", form);
+      setMessage("Department 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">Departments</h2>
+        <p className="text-muted text-sm">Add department records before registering employees</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">Department Code</span>
+          <input
+            className={inputClass("departmentCode")}
+            value={form.departmentCode}
+            onChange={(e) => setField("departmentCode", e.target.value.toUpperCase())}
+            placeholder="e.g. IT01"
+          />
+          {fieldErrors.departmentCode && <p className="text-red-600 text-xs mt-1">{fieldErrors.departmentCode}</p>}
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Department Name</span>
+          <input
+            className={inputClass("departmentName")}
+            value={form.departmentName}
+            onChange={(e) => setField("departmentName", e.target.value)}
+            placeholder="e.g. Information Technology"
+          />
+          {fieldErrors.departmentName && <p className="text-red-600 text-xs mt-1">{fieldErrors.departmentName}</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 Department"}
+          </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>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <tr key={row.department_code} className="border-t border-line">
+                <td className="px-4 py-3">{row.department_code}</td>
+                <td className="px-4 py-3">{row.department_name}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,212 @@
+import { useEffect, useState } from "react";
+import { getDepartments } from "../api/departmentApi";
+import { createEmployee, getEmployees } from "../api/employeeApi";
+
+function EmployeePage() {
+  const [departments, setDepartments] = useState([]);
+  const [employees, setEmployees] = useState([]);
+  const [message, setMessage] = useState("");
+  const [form, setForm] = useState({
+    employeeNumber: "",
+    firstName: "",
+    lastName: "",
+    position: "",
+    address: "",
+    telephone: "",
+    gender: "Male",
+    hiredDate: "",
+    departmentId: "",
+  });
+
+  const loadData = async () => {
+    const [deptRes, empRes] = await Promise.all([getDepartments(), getEmployees()]);
+    setDepartments(deptRes.data);
+    setEmployees(empRes.data);
+  };
+
+  useEffect(() => {
+    loadData().catch(() => setMessage("Failed to load employees"));
+  }, []);
+
+  const onChange = (event) => {
+    setForm((prev) => ({ ...prev, [event.target.name]: event.target.value }));
+  };
+
+  const onSubmit = async (event) => {
+    event.preventDefault();
+    setMessage("");
+    const firstName = form.firstName.trim();
+    const lastName = form.lastName.trim();
+    const telephone = form.telephone.trim();
+    const hiredDate = new Date(form.hiredDate);
+    if (!/^[A-Za-z ]{2,50}$/.test(firstName) || !/^[A-Za-z ]{2,50}$/.test(lastName)) {
+      setMessage("First name and last name should contain only letters (2-50 chars)");
+      return;
+    }
+    if (!/^[0-9+\- ]{7,20}$/.test(telephone)) {
+      setMessage("Telephone should contain valid digits (7-20 chars)");
+      return;
+    }
+    if (Number.isNaN(hiredDate.getTime()) || hiredDate > new Date()) {
+      setMessage("Hired date cannot be in the future");
+      return;
+    }
+    try {
+      await createEmployee({
+        ...form,
+        firstName,
+        lastName,
+        telephone,
+      });
+      setMessage("Employee saved");
+      setForm({
+        employeeNumber: "",
+        firstName: "",
+        lastName: "",
+        position: "",
+        address: "",
+        telephone: "",
+        gender: "Male",
+        hiredDate: "",
+        departmentId: "",
+      });
+      await loadData();
+    } catch (error) {
+      setMessage(error.response?.data?.message || "Failed to save employee");
+    }
+  };
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2">
+      <section className="rounded-lg bg-white p-4 shadow">
+        <h2 className="mb-3 text-lg font-semibold text-blue-900">Employee Form</h2>
+        <form onSubmit={onSubmit} className="grid gap-3 md:grid-cols-2">
+          <input
+            name="employeeNumber"
+            className="rounded-md border px-3 py-2"
+            placeholder="Employee Number"
+            value={form.employeeNumber}
+            onChange={onChange}
+            minLength={2}
+            required
+          />
+          <input
+            name="firstName"
+            className="rounded-md border px-3 py-2"
+            placeholder="First Name"
+            value={form.firstName}
+            onChange={onChange}
+            pattern="[A-Za-z ]{2,50}"
+            title="Use only letters (2-50 characters)"
+            required
+          />
+          <input
+            name="lastName"
+            className="rounded-md border px-3 py-2"
+            placeholder="Last Name"
+            value={form.lastName}
+            onChange={onChange}
+            pattern="[A-Za-z ]{2,50}"
+            title="Use only letters (2-50 characters)"
+            required
+          />
+          <input
+            name="position"
+            className="rounded-md border px-3 py-2"
+            placeholder="Position"
+            value={form.position}
+            onChange={onChange}
+            minLength={2}
+            required
+          />
+          <input
+            name="address"
+            className="rounded-md border px-3 py-2 md:col-span-2"
+            placeholder="Address"
+            value={form.address}
+            onChange={onChange}
+            minLength={3}
+            required
+          />
+          <input
+            name="telephone"
+            className="rounded-md border px-3 py-2"
+            placeholder="Telephone"
+            value={form.telephone}
+            onChange={onChange}
+            pattern="[0-9+\- ]{7,20}"
+            title="Use 7-20 digits (plus and dash allowed)"
+            required
+          />
+          <select
+            name="gender"
+            className="rounded-md border px-3 py-2"
+            value={form.gender}
+            onChange={onChange}
+          >
+            <option>Male</option>
+            <option>Female</option>
+            <option>Other</option>
+          </select>
+          <input
+            type="date"
+            name="hiredDate"
+            className="rounded-md border px-3 py-2"
+            value={form.hiredDate}
+            onChange={onChange}
+            max={new Date().toISOString().split("T")[0]}
+            required
+          />
+          <select
+            name="departmentId"
+            className="rounded-md border px-3 py-2"
+            value={form.departmentId}
+            onChange={onChange}
+            required
+          >
+            <option value="">Select department</option>
+            {departments.map((dept) => (
+              <option key={dept._id} value={dept._id}>
+                {dept.departmentCode} - {dept.departmentName}
+              </option>
+            ))}
+          </select>
+          <button className="rounded-md bg-blue-700 px-3 py-2 font-medium text-white hover:bg-blue-800 md:col-span-2">
+            Save Employee
+          </button>
+        </form>
+        {message && <p className="mt-3 text-sm text-slate-600">{message}</p>}
+      </section>
+
+      <section className="rounded-lg bg-white p-4 shadow">
+        <h2 className="mb-3 text-lg font-semibold text-blue-900">Saved Employees</h2>
+        <div className="overflow-x-auto">
+          <table className="min-w-full text-sm">
+            <thead>
+              <tr className="bg-slate-100">
+                <th className="p-2 text-left">Number</th>
+                <th className="p-2 text-left">Name</th>
+                <th className="p-2 text-left">Position</th>
+                <th className="p-2 text-left">Department</th>
+              </tr>
+            </thead>
+            <tbody>
+              {employees.map((item) => (
+                <tr key={item._id} className="border-b">
+                  <td className="p-2">{item.employeeNumber}</td>
+                  <td className="p-2">
+                    {item.firstName} {item.lastName}
+                  </td>
+                  <td className="p-2">{item.position}</td>
+                  <td className="p-2">{item.department?.departmentName}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export default EmployeePage;