page.tsx

Go to the documentation of this file.

"use client";
 
import { useEffect, useState } from "react";
import { apiClient } from "@/lib/client/apiClient";
 
interface Employee {
  f100: number; // ID
  f101: string; // Short Name
  f102: string; // Full Name
  f103?: string; // POS Login ID
  f104?: string; // Start Date
  f105?: string; // End Date
  f106?: string; // Main Location
  f107?: string; // Job Title
  f108?: string; // Job Code
  f109?: string; // Department ID
  f110?: string; // External ID
  f114?: string; // NZTA UID
}
 
interface EmployeeFormData {
  id?: number;
  shortName: string;
  fullName: string;
  posLoginId: string;
  startDate: string;
  endDate: string;
  mainLocation: string;
  jobTitle: string;
  jobCode: string;
  departmentId: string;
  externalId: string;
  nztaUid: string;
}
 
export default function EmployeesPage() {
  const [employees, setEmployees] = useState<Employee[]>([]);
  const [filteredEmployees, setFilteredEmployees] = useState<Employee[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  const [showModal, setShowModal] = useState(false);
  const [editingEmployee, setEditingEmployee] = useState<Employee | null>(null);
  const [formData, setFormData] = useState<EmployeeFormData>({
    shortName: "",
    fullName: "",
    posLoginId: "",
    startDate: "",
    endDate: "",
    mainLocation: "",
    jobTitle: "",
    jobCode: "",
    departmentId: "",
    externalId: "",
    nztaUid: "",
  });
 
  useEffect(() => {
    loadEmployees();
  }, []);
 
  useEffect(() => {
    applyFilters();
  }, [employees, searchTerm]);
 
  const loadEmployees = async () => {
    try {
      setLoading(true);
      const result = await apiClient.getEmployees();
 
      if (result.success && result.data?.DATS) {
        setEmployees(result.data.DATS);
      }
    } catch (error) {
      console.error("Error loading employees:", error);
    } finally {
      setLoading(false);
    }
  };
 
  const applyFilters = () => {
    if (!searchTerm) {
      setFilteredEmployees(employees);
      return;
    }
 
    const search = searchTerm.toLowerCase();
    const filtered = employees.filter((emp) => {
      return (
        emp.f100?.toString().includes(search) ||
        emp.f101?.toLowerCase().includes(search) ||
        emp.f102?.toLowerCase().includes(search) ||
        emp.f107?.toLowerCase().includes(search) ||
        emp.f110?.toLowerCase().includes(search)
      );
    });
 
    setFilteredEmployees(filtered);
  };
 
  const openNewEmployeeModal = () => {
    setEditingEmployee(null);
    setFormData({
      shortName: "",
      fullName: "",
      posLoginId: "",
      startDate: "",
      endDate: "",
      mainLocation: "",
      jobTitle: "",
      jobCode: "",
      departmentId: "",
      externalId: "",
      nztaUid: "",
    });
    setShowModal(true);
  };
 
  const openEditModal = (employee: Employee) => {
    setEditingEmployee(employee);
    setFormData({
      id: employee.f100,
      shortName: employee.f101 || "",
      fullName: employee.f102 || "",
      posLoginId: employee.f103 || "",
      startDate: employee.f104 || "",
      endDate: employee.f105 || "",
      mainLocation: employee.f106 || "",
      jobTitle: employee.f107 || "",
      jobCode: employee.f108 || "",
      departmentId: employee.f109 || "",
      externalId: employee.f110 || "",
      nztaUid: employee.f114 || "",
    });
    setShowModal(true);
  };
 
  const handleSave = async () => {
    try {
      const result = await apiClient.saveEmployee(formData);
 
      if (result.success) {
        setShowModal(false);
        loadEmployees();
      } else {
        alert("Failed to save employee: " + (result.error || "Unknown error"));
      }
    } catch (error) {
      console.error("Error saving employee:", error);
      alert("Failed to save employee");
    }
  };
 
  const formatDate = (dateStr: string) => {
    if (!dateStr) return "—";
    const date = new Date(dateStr);
    return date.toLocaleDateString("en-GB", {
      day: "2-digit",
      month: "short",
      year: "numeric",
    });
  };
 
  if (loading) {
    return (
      <div className="p-6 bg-surface-2 min-h-screen">
        <div className="animate-pulse space-y-4">
          <div className="h-8 bg-surface-2 rounded w-1/4"></div>
          <div className="h-64 bg-surface-2 rounded"></div>
        </div>
      </div>
    );
  }
 
  return (
    <div className="p-6 bg-surface-2 min-h-screen">
      {/* Header */}
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-text mb-2">
          Employee Management
        </h1>
        <p className="text-muted">
          Employees are people who work for you and are known to the POS, but do not 
          necessarily have access to the Point of Sale. Often used for commission tracking 
          for non-retail staff.
        </p>
      </div>
 
      {/* Action Bar */}
      <div className="bg-surface rounded-lg shadow p-4 mb-6">
        <div className="flex flex-wrap items-center gap-4">
          <button
            onClick={openNewEmployeeModal}
            className="bg-[#00543b] text-white px-6 py-2 rounded-lg hover:bg-[#003d2b] transition-colors flex items-center gap-2"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
            </svg>
            Add New Employee
          </button>
 
          <div className="flex-1 min-w-[200px]">
            <input
              type="text"
              placeholder="Search employees..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full px-4 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent"
            />
          </div>
        </div>
 
        <div className="mt-2 text-sm text-muted">
          Displaying {filteredEmployees.length} of {employees.length} employees
        </div>
      </div>
 
      {/* Employees Table */}
      <div className="bg-surface rounded-lg shadow overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-[var(--brand)] text-surface">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  ID
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Short Name
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Full Name
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Job Title
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Start Date
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  End Date
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Actions
                </th>
              </tr>
            </thead>
            <tbody className="bg-surface divide-y divide-gray-200">
              {filteredEmployees.map((employee) => (
                <tr key={employee.f100} className="hover:bg-surface-2">
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-text">
                    {employee.f100}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-text">
                    {employee.f101}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-text">
                    {employee.f102}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-muted">
                    {employee.f107 || "—"}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-muted">
                    {formatDate(employee.f104 || "")}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-muted">
                    {formatDate(employee.f105 || "")}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <button
                      onClick={() => openEditModal(employee)}
                      className="text-[#00543b] hover:text-[#003d2b]"
                    >
                      Edit
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
 
      {/* Edit/Create Modal */}
      {showModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 overflow-y-auto">
          <div className="bg-surface rounded-lg shadow-xl max-w-3xl w-full my-8">
            <div className="bg-[#00543b] text-white px-6 py-4 rounded-t-lg flex items-center justify-between">
              <h2 className="text-2xl font-bold">
                {editingEmployee ? "Edit Employee" : "New Employee"}
              </h2>
              <button
                onClick={() => setShowModal(false)}
                className="text-white hover:text-muted/70"
              >
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
 
            <div className="p-6 max-h-[70vh] overflow-y-auto">
              <div className="grid grid-cols-2 gap-6">
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Short Name *
                  </label>
                  <input
                    type="text"
                    value={formData.shortName}
                    onChange={(e) => setFormData({ ...formData, shortName: e.target.value })}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent"
                    required
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Full Name *
                  </label>
                  <input
                    type="text"
                    value={formData.fullName}
                    onChange={(e) => setFormData({ ...formData, fullName: e.target.value })}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent"
                    required
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    POS Login ID
                  </label>
                  <input
                    type="text"
                    value={formData.posLoginId}
                    onChange={(e) => setFormData({ ...formData, posLoginId: e.target.value })}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent"
                  />
                  <p className="text-xs text-muted mt-1">Links to staff login account</p>
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    External ID
                  </label>
                  <input
                    type="text"
                    value={formData.externalId}
                    onChange={(e) => setFormData({ ...formData, externalId: e.target.value })}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent"
                  />
                  <p className="text-xs text-muted mt-1">External system reference</p>
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Start Date
                  </label>
                  <input
                    type="date"
                    value={formData.startDate}
                    onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    End Date
                  </label>
                  <input
                    type="date"
                    value={formData.endDate}
                    onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Main Location
                  </label>
                  <input
                    type="text"
                    value={formData.mainLocation}
                    onChange={(e) => setFormData({ ...formData, mainLocation: e.target.value })}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent"
                    placeholder="Store number"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Department ID
                  </label>
                  <input
                    type="text"
                    value={formData.departmentId}
                    onChange={(e) => setFormData({ ...formData, departmentId: e.target.value })}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Job Title
                  </label>
                  <input
                    type="text"
                    value={formData.jobTitle}
                    onChange={(e) => setFormData({ ...formData, jobTitle: e.target.value })}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Job Code
                  </label>
                  <input
                    type="text"
                    value={formData.jobCode}
                    onChange={(e) => setFormData({ ...formData, jobCode: e.target.value })}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    NZTA UID
                  </label>
                  <input
                    type="text"
                    value={formData.nztaUid}
                    onChange={(e) => setFormData({ ...formData, nztaUid: e.target.value })}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent"
                  />
                </div>
              </div>
            </div>
 
            <div className="bg-surface-2 px-6 py-4 rounded-b-lg flex justify-end gap-3">
              <button
                onClick={() => setShowModal(false)}
                className="px-6 py-2 border border-border rounded-lg hover:bg-surface-2 transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={handleSave}
                className="bg-[#00543b] text-white px-6 py-2 rounded-lg hover:bg-[#003d2b] transition-colors"
              >
                {editingEmployee ? "Save Changes" : "Create Employee"}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}