create-ishvexa-app 1.0.0

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

@@ -0,0 +1,217 @@
+import { useEffect, useState } from "react";
+import api from "../api/client.js";
+
+const GENDERS = ["Male", "Female"];
+
+const emptyForm = {
+  employeeNumber: "",
+  firstName: "",
+  lastName: "",
+  address: "",
+  position: "",
+  telephone: "",
+  gender: "",
+  hiredDate: "",
+  departmentCode: "",
+};
+
+const validateEmployee = (form, departments) => {
+  const errors = {};
+  if (!form.employeeNumber.trim()) errors.employeeNumber = "Employee number is required.";
+  if (!form.firstName.trim()) errors.firstName = "First name is required.";
+  if (!form.lastName.trim()) errors.lastName = "Last name is required.";
+  if (!form.address.trim()) errors.address = "Address is required.";
+  if (!form.position.trim()) errors.position = "Position 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.gender) errors.gender = "Select gender.";
+  else if (!GENDERS.includes(form.gender)) errors.gender = "Select Male or Female.";
+  if (!form.hiredDate) errors.hiredDate = "Hired date is required.";
+  if (!form.departmentCode) errors.departmentCode = "Select a department from the list.";
+  else if (!departments.some((d) => d.department_code === form.departmentCode)) {
+    errors.departmentCode = "Selected department is not valid.";
+  }
+  return errors;
+};
+
+export default function EmployeesPage() {
+  const [form, setForm] = useState(emptyForm);
+  const [departments, setDepartments] = useState([]);
+  const [rows, setRows] = useState([]);
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [error, setError] = useState("");
+  const [message, setMessage] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const loadEmployees = async () => {
+    try {
+      const { data } = await api.get("/employees");
+      setRows(data);
+    } catch {
+      setError("Failed to load employees.");
+    }
+  };
+
+  const loadDepartments = async () => {
+    try {
+      const { data } = await api.get("/departments");
+      setDepartments(data);
+    } catch {
+      setError("Failed to load departments.");
+    }
+  };
+
+  useEffect(() => {
+    loadEmployees();
+    loadDepartments();
+  }, []);
+
+  const setField = (key, value) => {
+    setForm((prev) => ({ ...prev, [key]: value }));
+    setFieldErrors((prev) => ({ ...prev, [key]: "" }));
+  };
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setError("");
+    setMessage("");
+    const errors = validateEmployee(form, departments);
+    if (Object.keys(errors).length) {
+      setFieldErrors(errors);
+      return;
+    }
+    setLoading(true);
+    try {
+      await api.post("/employees", form);
+      setMessage("Employee added successfully.");
+      setForm(emptyForm);
+      setFieldErrors({});
+      loadEmployees();
+    } catch (err) {
+      setError(err.response?.data?.message || "Failed to save.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const deptLabel = (code) => {
+    const d = departments.find((x) => x.department_code === code);
+    return d ? `${d.department_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">Employees</h2>
+        <p className="text-muted text-sm">Add employee records — select department and gender from the list</p>
+      </div>
+      {departments.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 department before registering employees.
+        </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">Employee Number</span>
+          <input className={inputClass("employeeNumber")} value={form.employeeNumber} onChange={(e) => setField("employeeNumber", e.target.value)} />
+          {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">First Name</span>
+          <input className={inputClass("firstName")} value={form.firstName} onChange={(e) => setField("firstName", e.target.value)} />
+          {fieldErrors.firstName && <p className="text-red-600 text-xs mt-1">{fieldErrors.firstName}</p>}
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Last Name</span>
+          <input className={inputClass("lastName")} value={form.lastName} onChange={(e) => setField("lastName", e.target.value)} />
+          {fieldErrors.lastName && <p className="text-red-600 text-xs mt-1">{fieldErrors.lastName}</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 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>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Position</span>
+          <input className={inputClass("position")} value={form.position} onChange={(e) => setField("position", e.target.value)} />
+          {fieldErrors.position && <p className="text-red-600 text-xs mt-1">{fieldErrors.position}</p>}
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Gender</span>
+          <select className={inputClass("gender")} value={form.gender} onChange={(e) => setField("gender", e.target.value)}>
+            <option value="">Select gender</option>
+            {GENDERS.map((g) => (
+              <option key={g} value={g}>{g}</option>
+            ))}
+          </select>
+          {fieldErrors.gender && <p className="text-red-600 text-xs mt-1">{fieldErrors.gender}</p>}
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Hired Date</span>
+          <input type="date" className={inputClass("hiredDate")} value={form.hiredDate} onChange={(e) => setField("hiredDate", e.target.value)} />
+          {fieldErrors.hiredDate && <p className="text-red-600 text-xs mt-1">{fieldErrors.hiredDate}</p>}
+        </label>
+        <label className="block text-sm">
+          <span className="font-medium text-ink">Department</span>
+          <select
+            className={inputClass("departmentCode")}
+            value={form.departmentCode}
+            onChange={(e) => setField("departmentCode", e.target.value)}
+            disabled={departments.length === 0}
+          >
+            <option value="">Select department</option>
+            {departments.map((d) => (
+              <option key={d.department_code} value={d.department_code}>
+                {d.department_code} — {d.department_name}
+              </option>
+            ))}
+          </select>
+          {fieldErrors.departmentCode && <p className="text-red-600 text-xs mt-1">{fieldErrors.departmentCode}</p>}
+        </label>
+        <div className="md:col-span-2 flex flex-wrap gap-3 items-center">
+          <button type="submit" disabled={loading || departments.length === 0} className="rounded-lg bg-accent text-accent-text px-5 py-2 font-semibold disabled:opacity-50">
+            {loading ? "Saving..." : "Add Employee"}
+          </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">Number</th>
+              <th className="px-4 py-3">Name</th>
+              <th className="px-4 py-3">Position</th>
+              <th className="px-4 py-3">Gender</th>
+              <th className="px-4 py-3">Department</th>
+              <th className="px-4 py-3">Hired</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <tr key={row.employee_number} className="border-t border-line">
+                <td className="px-4 py-3">{row.employee_number}</td>
+                <td className="px-4 py-3">{row.first_name} {row.last_name}</td>
+                <td className="px-4 py-3">{row.position}</td>
+                <td className="px-4 py-3">{row.gender}</td>
+                <td className="px-4 py-3">{deptLabel(row.department_code)}</td>
+                <td className="px-4 py-3">{String(row.hired_date ?? "").slice(0, 10)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,105 @@
+import { useState } from "react";
+import { Link, Navigate } from "react-router-dom";
+import api from "../api/client.js";
+import { useAuth } from "../context/AuthContext.jsx";
+
+export default function LoginPage() {
+  const { login, isAuthenticated, loading } = useAuth();
+  const [mode, setMode] = useState("login");
+  const [form, setForm] = useState({ username: "", email: "", password: "" });
+  const [error, setError] = useState("");
+  const [message, setMessage] = useState("");
+
+  if (loading) return null;
+  if (isAuthenticated) return <Navigate to="/" replace />;
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setError("");
+    setMessage("");
+    if (mode === "register") {
+      if (!form.username.trim() || !form.email.trim() || !form.password) {
+        setError("Username, email and password are required.");
+        return;
+      }
+    } else if (!form.username.trim() || !form.password) {
+      setError("Username and password are required.");
+      return;
+    }
+    try {
+      if (mode === "register") {
+        await api.post("/auth/register", {
+          username: form.username,
+          email: form.email,
+          password: form.password,
+        });
+        setMessage("Account created. Please login.");
+        setMode("login");
+        setForm({ username: form.username, email: "", password: "" });
+        return;
+      }
+      const { data } = await api.post("/auth/login", {
+        username: form.username,
+        password: form.password,
+      });
+      login(data.user, data.token);
+    } catch (err) {
+      setError(err.response?.data?.message || "Request failed.");
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-surface px-4">
+      <form onSubmit={submit} className="w-full max-w-md bg-card rounded-2xl shadow-xl p-8 border border-line">
+        <div className="w-12 h-1 bg-accent rounded mb-4" />
+        <h1 className="text-2xl font-bold text-ink">Employee Payroll Management System</h1>
+        <p className="text-muted text-sm mt-1">Sign in to continue</p>
+        <div className="mt-6 space-y-3">
+          <input
+            className="w-full rounded-lg border border-line px-3 py-2.5"
+            placeholder="Username"
+            value={form.username}
+            onChange={(e) => setForm({ ...form, username: e.target.value })}
+          />
+          {mode === "register" && (
+            <input
+              className="w-full rounded-lg border border-line px-3 py-2.5"
+              type="email"
+              placeholder="Email"
+              value={form.email}
+              onChange={(e) => setForm({ ...form, email: e.target.value })}
+            />
+          )}
+          <input
+            className="w-full rounded-lg border border-line px-3 py-2.5"
+            type="password"
+            placeholder="Password"
+            value={form.password}
+            onChange={(e) => setForm({ ...form, password: e.target.value })}
+          />
+        </div>
+        {message && <p className="mt-3 text-sm text-green-600">{message}</p>}
+        {error && <p className="mt-3 text-sm text-red-600">{error}</p>}
+        <button type="submit" className="mt-5 w-full rounded-lg bg-accent text-accent-text py-2.5 font-semibold">
+          {mode === "login" ? "Sign In" : "Register"}
+        </button>
+        {mode === "login" && (
+          <Link to="/forgot-password" className="mt-3 block w-full text-center text-sm text-muted underline">
+            Forgot Password?
+          </Link>
+        )}
+        <button
+          type="button"
+          onClick={() => {
+            setMode(mode === "login" ? "register" : "login");
+            setError("");
+            setForm({ username: form.username, email: "", password: "" });
+          }}
+          className="mt-3 w-full text-sm text-muted underline"
+        >
+          {mode === "login" ? "Create account" : "Back to login"}
+        </button>
+      </form>
+    </div>
+  );
+}

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

@@ -0,0 +1,84 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { registerUser } from "../api/authApi";
+
+function RegisterPage() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [message, setMessage] = useState("");
+  const [error, setError] = useState("");
+
+  const handleRegister = async (event) => {
+    event.preventDefault();
+    setError("");
+    setMessage("");
+    const cleanUsername = username.trim();
+    if (cleanUsername.length < 3) {
+      setError("Username must be at least 3 characters");
+      return;
+    }
+    if (password.length < 6) {
+      setError("Password must be at least 6 characters");
+      return;
+    }
+
+    try {
+      const response = await registerUser({ username: cleanUsername, password });
+      setMessage(response.data.message);
+      setUsername("");
+      setPassword("");
+    } catch (err) {
+      setError(err.response?.data?.message || "Registration 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-emerald-900">Create Account</h1>
+        <p className="mb-6 text-slate-600">Register a new EPMS user 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={handleRegister} 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="Password"
+            value={password}
+            onChange={(event) => setPassword(event.target.value)}
+            minLength={6}
+            required
+          />
+          <button className="w-full rounded-md bg-emerald-700 px-3 py-2 font-medium text-white hover:bg-emerald-800">
+            Register
+          </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 RegisterPage;