page.tsx

Go to the documentation of this file.

"use client";
 
import { useEffect, useState } from "react";
import { apiClient } from "@/lib/client/apiClient";
import { Icon } from "@/contexts/IconContext";
 
interface StaffMember {
  f100: number; // ID
  f101: string; // Name
  f102: number; // Active (1/0)
  f107?: string; // Barcode
  f121?: string; // Formal Name
  f122?: string; // Main Location
  f123?: string; // Printed Name
  f124?: string; // First Name
  f125?: string; // Last Name
  f126?: string; // Nick Name
  f127?: string; // Start Date
  f128?: string; // Leave Date
  f130?: string; // Private Email
  f131?: string; // Work Email
  f133?: string; // Online Login
  f134?: number; // Is Customer Rep
  f135?: number; // Is Account Rep
  f136?: string; // Remote Profile
  f137?: string; // Auto Login From
  f143?: number; // Login Where bitmask
  LastOk?: string; // Last seen datetime
}
 
interface SecurityRole {
  id: number;
  name: string;
  active: boolean;
}
 
interface StaffFormData {
  id?: number;
  name: string;
  active: boolean;
  password: string;
  barcode: string;
  formalName: string;
  mainLocation: string;
  printedName: string;
  firstName: string;
  lastName: string;
  nickName: string;
  startDate: string;
  leaveDate: string;
  privateEmail: string;
  workEmail: string;
  onlineLogin: string;
  onlinePassword: string;
  isCustomerRep: boolean;
  isAccountRep: boolean;
  remoteProfile: number;
  autoLoginFrom: string;
  loginWhere: number;
}
 
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
}
 
export default function StaffManagementPage() {
  const [activeTab, setActiveTab] = useState<'staff' | 'employees'>('staff');
  const [staff, setStaff] = useState<StaffMember[]>([]);
  const [filteredStaff, setFilteredStaff] = useState<StaffMember[]>([]);
  const [securityRoles, setSecurityRoles] = useState<SecurityRole[]>([]);
  const [selectedRoles, setSelectedRoles] = useState<number[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  const [showActive, setShowActive] = useState(true);
  const [showInactive, setShowInactive] = useState(true);
  const [showRole, setShowRole] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const [editingStaff, setEditingStaff] = useState<StaffMember | null>(null);
  
  // Employees state
  const [employees, setEmployees] = useState<Employee[]>([]);
  const [filteredEmployees, setFilteredEmployees] = useState<Employee[]>([]);
  const [employeeSearchTerm, setEmployeeSearchTerm] = useState("");
  const [loadingEmployees, setLoadingEmployees] = useState(false);
  const [showEmployeeModal, setShowEmployeeModal] = useState(false);
  const [editingEmployee, setEditingEmployee] = useState<Employee | null>(null);
  const [formData, setFormData] = useState<StaffFormData>({
    name: "",
    active: true,
    password: "",
    barcode: "",
    formalName: "",
    mainLocation: "",
    printedName: "",
    firstName: "",
    lastName: "",
    nickName: "",
    startDate: "",
    leaveDate: "",
    privateEmail: "",
    workEmail: "",
    onlineLogin: "",
    onlinePassword: "",
    isCustomerRep: false,
    isAccountRep: false,
    remoteProfile: 0,
    autoLoginFrom: "",
    loginWhere: 1, // POS by default
  });
 
  useEffect(() => {
    loadStaff();
  }, []);
 
  useEffect(() => {
    if (activeTab === 'employees') {
      loadEmployees();
    }
  }, [activeTab]);
 
  useEffect(() => {
    applyEmployeeFilters();
  }, [employees, employeeSearchTerm]);
 
  useEffect(() => {
    applyFilters();
  }, [staff, searchTerm, showActive, showInactive, showRole]);
 
  const loadStaff = async () => {
    try {
      setLoading(true);
      const [staffResult, usageResult] = await Promise.all([
        apiClient.getStaff(),
        apiClient.getStaffUsage()
      ]);
 
      if (staffResult.success && staffResult.data?.DATS) {
        const staffList = staffResult.data.DATS;
        
        // Extract security roles (negative IDs)
        const roles = staffList
          .filter((s: StaffMember) => s.f100 < 0 && s.f102 === 1)
          .map((s: StaffMember) => ({
            id: s.f100,
            name: s.f101,
            active: s.f102 === 1,
          }));
        setSecurityRoles(roles);
        
        // Merge usage data
        if (usageResult.success && usageResult.data?.DATS) {
          const usageMap = new Map(
            usageResult.data.DATS.map((u: any) => [u.f110, u.f112])
          );
          
          staffList.forEach((s: StaffMember) => {
            if (usageMap.has(s.f100)) {
              s.LastOk = usageMap.get(s.f100) as string | undefined;
            }
          });
        }
        
        setStaff(staffList);
      }
    } catch (error) {
      console.error("Error loading staff:", error);
    } finally {
      setLoading(false);
    }
  };
 
  const applyFilters = () => {
    let filtered = staff.filter((member) => {
      const isActive = member.f102 === 1;
      const isRole = member.f100 < 0;
      
      // Filter by active/inactive/role
      if (isRole && !showRole) return false;
      if (!isRole && isActive && !showActive) return false;
      if (!isRole && !isActive && !showInactive) return false;
      
      // Filter by search term
      if (searchTerm) {
        const search = searchTerm.toLowerCase();
        return (
          member.f101?.toLowerCase().includes(search) ||
          member.f107?.toLowerCase().includes(search) ||
          member.f100?.toString().includes(search)
        );
      }
      
      return true;
    });
    
    setFilteredStaff(filtered);
  };
 
  const openNewStaffModal = () => {
    setEditingStaff(null);
    setSelectedRoles([]);
    setFormData({
      name: "",
      active: true,
      password: "",
      barcode: "",
      formalName: "",
      mainLocation: "",
      printedName: "",
      firstName: "",
      lastName: "",
      nickName: "",
      startDate: "",
      leaveDate: "",
      privateEmail: "",
      workEmail: "",
      onlineLogin: "",
      onlinePassword: "",
      isCustomerRep: false,
      isAccountRep: false,
      remoteProfile: 0,
      autoLoginFrom: "",
      loginWhere: 1,
    });
    setShowModal(true);
  };
 
  const openEditModal = (member: StaffMember) => {
    setEditingStaff(member);
    setFormData({
      id: member.f100,
      name: member.f101 || "",
      active: member.f102 === 1,
      password: "",
      barcode: member.f107 || "",
      formalName: member.f121 || "",
      mainLocation: member.f122 || "",
      printedName: member.f123 || "",
      firstName: member.f124 || "",
      lastName: member.f125 || "",
      nickName: member.f126 || "",
      startDate: member.f127 || "",
      leaveDate: member.f128 || "",
      privateEmail: member.f130 || "",
      workEmail: member.f131 || "",
      onlineLogin: member.f133 || "",
      onlinePassword: "",
      isCustomerRep: member.f134 === 1,
      isAccountRep: member.f135 === 1,
      remoteProfile: parseInt(member.f136 || "0"),
      autoLoginFrom: member.f137 || "",
      loginWhere: member.f143 || 1,
    });
    setShowModal(true);
  };
 
  const handleSave = async () => {
    try {
      const saveData: any = { ...formData };
      
      // Add selected roles for new staff
      if (!editingStaff && selectedRoles.length > 0) {
        saveData.roles = selectedRoles;
      }
      
      const result = await apiClient.saveStaff(saveData);
      
      if (result.success) {
        setShowModal(false);
        loadStaff();
      } else {
        alert("Failed to save staff: " + (result.error || "Unknown error"));
      }
    } catch (error) {
      console.error("Error saving staff:", error);
      alert("Failed to save staff member");
    }
  };
 
  const formatDateTime = (dateStr: string) => {
    if (!dateStr) return "—";
    const date = new Date(dateStr);
    return date.toLocaleString("en-GB", {
      day: "2-digit",
      month: "short",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    });
  };
 
  // Login log functions
  const loadEmployees = async () => {
    try {
      setLoadingEmployees(true);
      const result = await apiClient.getEmployees();
      
      if (result.success && result.data?.DATS) {
        setEmployees(result.data.DATS);
        setFilteredEmployees(result.data.DATS);
      }
    } catch (error) {
      console.error("Error loading employees:", error);
    } finally {
      setLoadingEmployees(false);
    }
  };
 
  const applyEmployeeFilters = () => {
    if (!employeeSearchTerm) {
      setFilteredEmployees(employees);
      return;
    }
 
    const search = employeeSearchTerm.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({
      f100: 0,
      f101: "",
      f102: "",
      f103: "",
      f104: "",
      f105: "",
      f106: "",
      f107: "",
      f108: "",
      f109: "",
      f110: "",
      f114: "",
    });
    setShowEmployeeModal(true);
  };
 
  const openEditEmployeeModal = (employee: Employee) => {
    setEditingEmployee(employee);
    setShowEmployeeModal(true);
  };
 
  const handleSaveEmployee = async () => {
    try {
      const saveData: any = {
        shortName: editingEmployee?.f101 || "",
        fullName: editingEmployee?.f102 || "",
        posLoginId: editingEmployee?.f103,
        startDate: editingEmployee?.f104,
        endDate: editingEmployee?.f105,
        mainLocation: editingEmployee?.f106,
        jobTitle: editingEmployee?.f107,
        jobCode: editingEmployee?.f108,
        departmentId: editingEmployee?.f109,
        externalId: editingEmployee?.f110,
        nztaUid: editingEmployee?.f114,
      };
 
      if (editingEmployee?.f100) {
        saveData.id = editingEmployee.f100;
      }
 
      const result = await apiClient.saveEmployee(saveData);
 
      if (result.success) {
        setShowEmployeeModal(false);
        setEditingEmployee(null);
        loadEmployees();
      } else {
        alert("Failed to save employee: " + (result.error || "Unknown error"));
      }
    } catch (error) {
      console.error("Error saving employee:", error);
      alert("Failed to save employee");
    }
  };
 
  if (loading) {
    return (
      <div className="p-6 bg-bg min-h-screen">
        <div className="animate-pulse space-y-4">
          <div className="h-8 bg-surface rounded w-1/4"></div>
          <div className="h-64 bg-surface rounded"></div>
        </div>
      </div>
    );
  }
 
  return (
    <div className="p-6 bg-bg min-h-screen">
      {/* Header */}
      <div className="mb-6 flex items-center gap-3">
        <Icon name="badge" size={36} className="text-brand" />
        <div>
          <h1 className="text-3xl font-bold text-text">
            Workforce Management
          </h1>
          <p className="text-muted">
            Manage POS staff, employees, security roles, and login history
          </p>
        </div>
      </div>
 
      {/* Info Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div className="bg-brand/10 border-l-4 border-brand p-6 rounded-lg">
          <div className="flex items-start gap-4">
            <Icon name="person" size={40} className="text-brand flex-shrink-0" />
            <div>
              <h3 className="text-lg font-bold text-text mb-2 flex items-center gap-2">
                <Icon name="person" size={20} />Staff (POS Operators)
              </h3>
              <p className="text-sm text-text mb-2">
                <strong>POS system users</strong> with login credentials for cash registers and terminals.
              </p>
              <ul className="text-xs text-muted space-y-1">
                <li>• Have POS login access and passwords</li>
                <li>• Assigned to security roles for permissions</li>
                <li>• Track sales, transactions, and till operations</li>
                <li>• Can log in to selling interface</li>
              </ul>
            </div>
          </div>
        </div>
 
        <div className="bg-success/10 border-l-4 border-success p-6 rounded-lg">
          <div className="flex items-start gap-4">
            <Icon name="groups" size={40} className="text-success flex-shrink-0" />
            <div>
              <h3 className="text-lg font-bold text-text mb-2 flex items-center gap-2">
                <Icon name="groups" size={20} />Employees (HR Records)
              </h3>
              <p className="text-sm text-text mb-2">
                <strong>Workforce records</strong> for commission tracking, payroll, and HR management.
              </p>
              <ul className="text-xs text-muted space-y-1">
                <li>• NO POS login access</li>
                <li>• Track commissions and payroll data</li>
                <li>• Job titles, departments, hire dates</li>
                <li>• May be linked to external payroll systems</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
 
      {/* Tab Navigation */}
      <div className="bg-surface rounded-lg shadow mb-6 p-2">
        <div className="grid grid-cols-2 gap-2">
          <button
            onClick={() => setActiveTab('staff')}
            className={`px-4 py-4 font-semibold text-base rounded-lg transition-all ${
              activeTab === 'staff'
                ? 'bg-brand text-white shadow-lg transform scale-105'
                : 'bg-surface-2 text-muted hover:bg-surface'
            }`}
          >
            <div className="flex flex-col items-center justify-center gap-1">
              <Icon name="person" size={24} />
              <span>Staff (POS)</span>
            </div>
          </button>
          <button
            onClick={() => setActiveTab('employees')}
            className={`px-4 py-4 font-semibold text-base rounded-lg transition-all ${
              activeTab === 'employees'
                ? 'bg-success text-white shadow-lg transform scale-105'
                : 'bg-surface-2 text-muted hover:bg-surface'
            }`}
          >
            <div className="flex flex-col items-center justify-center gap-1">
              <Icon name="groups" size={24} />
              <span>Employees (HR)</span>
            </div>
          </button>
        </div>
      </div>
 
      {/* Staff List View */}
      {activeTab === 'staff' && (
        <>
      {/* Action Bar */}
      <div className="bg-surface rounded-lg shadow p-4 mb-6">
        <div className="flex flex-wrap items-center gap-4">
          <button
            onClick={openNewStaffModal}
            className="bg-brand text-white px-6 py-2 rounded-lg hover:bg-brand/90 transition-colors flex items-center gap-2"
          >
            <Icon name="add" size={20} />
            New Staff Member
          </button>
 
          <div className="flex-1 min-w-[200px] relative">
            <Icon name="search" size={20} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
            <input
              type="text"
              placeholder="Search staff..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2 bg-bg border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent text-text"
            />
          </div>
 
          <div className="flex items-center gap-4">
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={showActive}
                onChange={(e) => setShowActive(e.target.checked)}
                className="w-4 h-4 text-brand rounded"
              />
              <span className="text-sm text-text">Active</span>
            </label>
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={showInactive}
                onChange={(e) => setShowInactive(e.target.checked)}
                className="w-4 h-4 text-brand rounded"
              />
              <span className="text-sm text-text">Inactive</span>
            </label>
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={showRole}
                onChange={(e) => setShowRole(e.target.checked)}
                className="w-4 h-4 text-brand rounded"
              />
              <span className="text-sm text-text">Roles Only</span>
            </label>
          </div>
        </div>
 
        <div className="mt-2 text-sm text-muted">
          Displaying {filteredStaff.length} of {staff.length} staff members
        </div>
      </div>
 
      {/* Staff 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">
                  Name
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Status
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Barcode
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Last Seen
                </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-border">
              {filteredStaff.map((member) => (
                <tr key={member.f100} className="hover:bg-surface-2">
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-text">
                    {member.f100}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="text-sm font-medium text-text">
                      {member.f101}
                    </div>
                    {member.f121 && (
                      <div className="text-sm text-muted">{member.f121}</div>
                    )}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span
                      className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                        member.f102 === 1
                          ? "bg-success/20 text-success"
                          : "bg-danger/20 text-danger"
                      }`}
                    >
                      {member.f102 === 1 ? "Active" : "Inactive"}
                    </span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-muted">
                    {member.f107 || "—"}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-muted">
                    {formatDateTime(member.LastOk || "")}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <button
                      onClick={() => openEditModal(member)}
                      className="text-[#00543b] hover:text-[#003d2b] mr-4"
                    >
                      Edit
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
        </>
      )}
 
      {/* Employees View */}
      {activeTab === 'employees' && (
        <>
          <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-success text-white px-6 py-2 rounded-lg hover:bg-success/90 transition-colors flex items-center gap-2"
              >
                <Icon name="add" size={20} />
                New Employee
              </button>
              
              <div className="flex-1 min-w-[200px] relative">
                <Icon name="search" size={20} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
                <input
                  type="text"
                  placeholder="Search employees..."
                  value={employeeSearchTerm}
                  onChange={(e) => setEmployeeSearchTerm(e.target.value)}
                  className="w-full pl-10 pr-4 py-2 bg-bg border border-border rounded-lg focus:ring-2 focus:ring-success focus:border-transparent text-text"
                />
              </div>
            </div>
          </div>
 
          <div className="bg-surface rounded-lg shadow overflow-hidden">
            {loadingEmployees ? (
              <div className="p-8 text-center">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-success mx-auto"></div>
                <p className="mt-4 text-muted">Loading employees...</p>
              </div>
            ) : filteredEmployees.length === 0 ? (
              <div className="p-8 text-center text-muted">
                <Icon name="groups" size={64} className="mx-auto text-muted/50 mb-4" />
                <p className="text-lg font-semibold mb-2 text-text">No employees found</p>
                <p className="text-sm">
                  {employeeSearchTerm ? `No employees match "${employeeSearchTerm}"` : "No employee records available"}
                </p>
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead className="bg-success/10">
                    <tr>
                      <th className="px-6 py-3 text-left text-xs font-medium text-text uppercase tracking-wider">ID</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-text uppercase tracking-wider">Short Name</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-text uppercase tracking-wider">Full Name</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-text uppercase tracking-wider">Job Title</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-text uppercase tracking-wider">Department</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-text uppercase tracking-wider">Start Date</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-text uppercase tracking-wider">External ID</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-text uppercase tracking-wider">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="bg-surface divide-y divide-border">
                    {filteredEmployees.map((emp) => (
                      <tr key={emp.f100} className="hover:bg-surface-2">
                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-text">
                          {emp.f100}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-text">
                          {emp.f101 || "—"}
                        </td>
                        <td className="px-6 py-4 text-sm text-text">
                          {emp.f102 || "—"}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-muted">
                          {emp.f107 || "—"}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-muted">
                          {emp.f109 || "—"}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-muted">
                          {emp.f104 ? new Date(emp.f104).toLocaleDateString() : "—"}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-muted">
                          {emp.f110 || "—"}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm">
                          <button
                            onClick={() => openEditEmployeeModal(emp)}
                            className="text-success hover:text-success/80 font-medium flex items-center gap-1"
                          >
                            <Icon name="edit" size={16} />
                            Edit
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
          
          <div className="mt-6 bg-success/10 border-l-4 border-success p-4 rounded">
            <div className="flex items-start gap-3">
              <Icon name="info" size={20} className="text-success flex-shrink-0 mt-0.5" />
              <div className="text-sm text-text">
                <p className="font-semibold mb-1">About Employees</p>
                <p>Employees are tracked for commission, payroll, and HR purposes. They <strong>do not</strong> have POS login access. If someone needs to operate a cash register, add them as <strong>Staff</strong> instead.</p>
              </div>
            </div>
          </div>
        </>
      )}
 
      {/* Edit/Create Modal */}
      {showModal && (
        <div className="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center z-50 p-4 overflow-y-auto">
          <div className="bg-surface backdrop-blur-md rounded-lg shadow-xl max-w-4xl w-full my-8">
            <div className="bg-brand backdrop-blur-sm text-white px-6 py-4 rounded-t-lg flex items-center justify-between">
              <h2 className="text-2xl font-bold text-white flex items-center gap-2">
                <Icon name="person" size={28} />
                {editingStaff ? "Edit Staff Member" : "New Staff Member"}
              </h2>
              <button
                onClick={() => setShowModal(false)}
                className="text-white hover:text-muted/70"
              >
                <Icon name="close" size={24} />
              </button>
            </div>
 
            <div className="p-6 max-h-[70vh] overflow-y-auto bg-surface backdrop-blur-md rounded-b-lg">
              <div className="grid grid-cols-2 gap-6">
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Name *
                  </label>
                  <input
                    type="text"
                    value={formData.name}
                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent text-text"
                    required
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Password
                  </label>
                  <input
                    type="password"
                    value={formData.password}
                    onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent text-text"
                    placeholder={editingStaff ? "Leave blank to keep current" : ""}
                  />
                </div>
 
                <div>
                  <label className="flex items-center gap-2 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={formData.active}
                      onChange={(e) => setFormData({ ...formData, active: e.target.checked })}
                      className="w-4 h-4 text-brand rounded"
                      disabled={!editingStaff}
                    />
                    <span className="text-sm font-medium text-text">Active</span>
                  </label>
                  {!editingStaff && (
                    <p className="text-xs text-muted mt-1">
                      All staff are created active. Edit after creation to disable.
                    </p>
                  )}
                </div>
 
                {/* Security Roles - Only show for new staff */}
                {!editingStaff && securityRoles.length > 0 && (
                  <div className="col-span-2">
                    <label className="block text-sm font-medium text-text mb-2">
                      Assign Security Roles
                    </label>
                    <div className="border border-border rounded-lg p-4 bg-bg max-h-40 overflow-y-auto">
                      <div className="space-y-2">
                        {securityRoles.map((role) => (
                          <label key={role.id} className="flex items-center gap-2 cursor-pointer">
                            <input
                              type="checkbox"
                              checked={selectedRoles.includes(role.id)}
                              onChange={(e) => {
                                if (e.target.checked) {
                                  setSelectedRoles([...selectedRoles, role.id]);
                                } else {
                                  setSelectedRoles(selectedRoles.filter(id => id !== role.id));
                                }
                              }}
                              className="w-4 h-4 text-brand rounded"
                            />
                            <span className="text-sm text-text">{role.name}</span>
                          </label>
                        ))}
                      </div>
                    </div>
                  </div>
                )}
 
                <div className="col-span-2">
                  <label className="block text-sm font-medium text-text mb-2">
                    Login Where
                  </label>
                  <div className="flex flex-wrap gap-4">
                    <label className="flex items-center gap-2 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={(formData.loginWhere & 1) === 0}
                        onChange={(e) => {
                          const bit = 1;
                          setFormData({
                            ...formData,
                            loginWhere: e.target.checked
                              ? formData.loginWhere & ~bit
                              : formData.loginWhere | bit,
                          });
                        }}
                        className="w-4 h-4 text-brand rounded"
                      />
                      <span className="text-sm text-text">POS</span>
                    </label>
                    <label className="flex items-center gap-2 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={(formData.loginWhere & 2) !== 0}
                        onChange={(e) => {
                          const bit = 2;
                          setFormData({
                            ...formData,
                            loginWhere: e.target.checked
                              ? formData.loginWhere | bit
                              : formData.loginWhere & ~bit,
                          });
                        }}
                        className="w-4 h-4 text-brand rounded"
                      />
                      <span className="text-sm text-text">Store Server</span>
                    </label>
                    <label className="flex items-center gap-2 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={(formData.loginWhere & 4) !== 0}
                        onChange={(e) => {
                          const bit = 4;
                          setFormData({
                            ...formData,
                            loginWhere: e.target.checked
                              ? formData.loginWhere | bit
                              : formData.loginWhere & ~bit,
                          });
                        }}
                        className="w-4 h-4 text-brand rounded"
                      />
                      <span className="text-sm text-text">Head Office</span>
                    </label>
                  </div>
                  <p className="text-xs text-muted mt-1">
                    Tick all options for full access user (only effective if security enabled)
                  </p>
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Login Barcode
                  </label>
                  <input
                    type="text"
                    value={formData.barcode}
                    onChange={(e) => setFormData({ ...formData, barcode: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent text-text"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Formal Name
                  </label>
                  <input
                    type="text"
                    value={formData.formalName}
                    onChange={(e) => setFormData({ ...formData, formalName: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent text-text"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Printed Name
                  </label>
                  <input
                    type="text"
                    value={formData.printedName}
                    onChange={(e) => setFormData({ ...formData, printedName: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent text-text"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    First Name
                  </label>
                  <input
                    type="text"
                    value={formData.firstName}
                    onChange={(e) => setFormData({ ...formData, firstName: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent text-text"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Last Name
                  </label>
                  <input
                    type="text"
                    value={formData.lastName}
                    onChange={(e) => setFormData({ ...formData, lastName: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent text-text"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Nick Name
                  </label>
                  <input
                    type="text"
                    value={formData.nickName}
                    onChange={(e) => setFormData({ ...formData, nickName: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent text-text"
                  />
                </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 bg-bg border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent text-text"
                    placeholder="Store number"
                  />
                  <p className="text-xs text-muted mt-1">
                    Location number where staff typically works (not enforced)
                  </p>
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Remote Profile
                  </label>
                  <select
                    value={formData.remoteProfile}
                    onChange={(e) => setFormData({ ...formData, remoteProfile: parseInt(e.target.value) })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent text-text"
                  >
                    <option value={0}>None</option>
                    <option value={1}>Profile 1</option>
                    <option value={2}>Profile 2</option>
                    <option value={3}>Profile 3</option>
                    <option value={4}>Profile 4</option>
                    <option value={5}>Profile 5</option>
                    <option value={6}>Profile 6</option>
                    <option value={7}>Profile 7</option>
                    <option value={8}>Profile 8</option>
                  </select>
                  <p className="text-xs text-muted mt-1">
                    Profile for remote access terminal usage
                  </p>
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Auto Login From
                  </label>
                  <input
                    type="text"
                    value={formData.autoLoginFrom}
                    onChange={(e) => setFormData({ ...formData, autoLoginFrom: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent text-text"
                    placeholder="Windows login name"
                  />
                  <p className="text-xs text-muted mt-1">
                    Auto login to POS if using this Windows login (must be enabled on lane)
                  </p>
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Work Email
                  </label>
                  <input
                    type="email"
                    value={formData.workEmail}
                    onChange={(e) => setFormData({ ...formData, workEmail: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent text-text"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Private Email
                  </label>
                  <input
                    type="email"
                    value={formData.privateEmail}
                    onChange={(e) => setFormData({ ...formData, privateEmail: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent text-text"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Online Login Email
                  </label>
                  <input
                    type="email"
                    value={formData.onlineLogin}
                    onChange={(e) => setFormData({ ...formData, onlineLogin: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent text-text"
                  />
                </div>
 
                {editingStaff && (
                  <div>
                    <label className="block text-sm font-medium text-text mb-1">
                      Online Password
                    </label>
                    <input
                      type="password"
                      value={formData.onlinePassword}
                      onChange={(e) => setFormData({ ...formData, onlinePassword: e.target.value })}
                      className="w-full px-3 py-2 bg-bg border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent text-text"
                    />
                  </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 bg-bg border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent text-text"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Leave Date
                  </label>
                  <input
                    type="date"
                    value={formData.leaveDate}
                    onChange={(e) => setFormData({ ...formData, leaveDate: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent text-text"
                  />
                </div>
 
                <div className="col-span-2">
                  <label className="block text-sm font-medium text-text mb-2">
                    Flags
                  </label>
                  <div className="flex gap-6">
                    <label className="flex items-center gap-2 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={formData.isCustomerRep}
                        onChange={(e) => setFormData({ ...formData, isCustomerRep: e.target.checked })}
                        className="w-4 h-4 text-brand rounded"
                      />
                      <span className="text-sm text-text">Is Customer Rep</span>
                    </label>
                    <label className="flex items-center gap-2 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={formData.isAccountRep}
                        onChange={(e) => setFormData({ ...formData, isAccountRep: e.target.checked })}
                        className="w-4 h-4 text-brand rounded"
                      />
                      <span className="text-sm text-text">Is Sales/Account Rep</span>
                    </label>
                  </div>
                </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 transition-colors text-text"
              >
                Cancel
              </button>
              <button
                onClick={handleSave}
                className="bg-brand text-white px-6 py-2 rounded-lg hover:bg-brand/90 transition-colors"
              >
                {editingStaff ? "Save Changes" : "Create Staff Member"}
              </button>
            </div>
          </div>
        </div>
      )}
 
      {/* Employee Edit/Create Modal */}
      {showEmployeeModal && (
        <div className="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center z-50 p-4 overflow-y-auto">
          <div className="bg-surface backdrop-blur-md rounded-lg shadow-xl max-w-3xl w-full my-8">
            <div className="bg-success backdrop-blur-sm text-white px-6 py-4 rounded-t-lg flex items-center justify-between">
              <h2 className="text-2xl font-bold text-white flex items-center gap-2">
                <Icon name="groups" size={28} />
                {editingEmployee ? "Edit Employee" : "New Employee"}
              </h2>
              <button
                onClick={() => {
                  setShowEmployeeModal(false);
                  setEditingEmployee(null);
                }}
                className="text-white hover:text-muted/70"
              >
                <Icon name="close" size={24} />
              </button>
            </div>
 
            <div className="p-6 max-h-[70vh] overflow-y-auto bg-surface backdrop-blur-md">
              <div className="grid grid-cols-2 gap-6">
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Short Name <span className="text-danger">*</span>
                  </label>
                  <input
                    type="text"
                    value={editingEmployee?.f101 || ""}
                    onChange={(e) => setEditingEmployee({ ...editingEmployee!, f101: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded focus:ring-2 focus:ring-success focus:border-transparent text-text"
                    placeholder="Short display name"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Full Name <span className="text-danger">*</span>
                  </label>
                  <input
                    type="text"
                    value={editingEmployee?.f102 || ""}
                    onChange={(e) => setEditingEmployee({ ...editingEmployee!, f102: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded focus:ring-2 focus:ring-success focus:border-transparent text-text"
                    placeholder="Full legal name"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    POS Login ID
                  </label>
                  <input
                    type="text"
                    value={editingEmployee?.f103 || ""}
                    onChange={(e) => setEditingEmployee({ ...editingEmployee!, f103: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded focus:ring-2 focus:ring-success focus:border-transparent text-text"
                    placeholder="Optional POS login reference"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Job Title
                  </label>
                  <input
                    type="text"
                    value={editingEmployee?.f107 || ""}
                    onChange={(e) => setEditingEmployee({ ...editingEmployee!, f107: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded focus:ring-2 focus:ring-success focus:border-transparent text-text"
                    placeholder="e.g. Sales Associate"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Job Code
                  </label>
                  <input
                    type="text"
                    value={editingEmployee?.f108 || ""}
                    onChange={(e) => setEditingEmployee({ ...editingEmployee!, f108: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded focus:ring-2 focus:ring-success focus:border-transparent text-text"
                    placeholder="Internal job code"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Department ID
                  </label>
                  <input
                    type="text"
                    value={editingEmployee?.f109 || ""}
                    onChange={(e) => setEditingEmployee({ ...editingEmployee!, f109: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded focus:ring-2 focus:ring-success focus:border-transparent text-text"
                    placeholder="Department identifier"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Main Location
                  </label>
                  <input
                    type="text"
                    value={editingEmployee?.f106 || ""}
                    onChange={(e) => setEditingEmployee({ ...editingEmployee!, f106: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded focus:ring-2 focus:ring-success focus:border-transparent text-text"
                    placeholder="Primary work location"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    External ID
                  </label>
                  <input
                    type="text"
                    value={editingEmployee?.f110 || ""}
                    onChange={(e) => setEditingEmployee({ ...editingEmployee!, f110: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded focus:ring-2 focus:ring-success focus:border-transparent text-text"
                    placeholder="External system ID"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Start Date
                  </label>
                  <input
                    type="date"
                    value={editingEmployee?.f104 || ""}
                    onChange={(e) => setEditingEmployee({ ...editingEmployee!, f104: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded focus:ring-2 focus:ring-success focus:border-transparent text-text"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    End Date
                  </label>
                  <input
                    type="date"
                    value={editingEmployee?.f105 || ""}
                    onChange={(e) => setEditingEmployee({ ...editingEmployee!, f105: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded focus:ring-2 focus:ring-success focus:border-transparent text-text"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    NZTA UID
                  </label>
                  <input
                    type="text"
                    value={editingEmployee?.f114 || ""}
                    onChange={(e) => setEditingEmployee({ ...editingEmployee!, f114: e.target.value })}
                    className="w-full px-3 py-2 bg-bg border border-border rounded focus:ring-2 focus:ring-success focus:border-transparent text-text"
                    placeholder="NZ Transport Agency ID"
                  />
                </div>
              </div>
            </div>
 
            <div className="bg-surface-2 px-6 py-4 rounded-b-lg flex justify-end gap-3">
              <button
                onClick={() => {
                  setShowEmployeeModal(false);
                  setEditingEmployee(null);
                }}
                className="px-6 py-2 border border-border rounded-lg hover:bg-surface transition-colors text-text"
              >
                Cancel
              </button>
              <button
                onClick={handleSaveEmployee}
                className="bg-success text-white px-6 py-2 rounded-lg hover:bg-success/90 transition-colors"
                disabled={!editingEmployee?.f101 || !editingEmployee?.f102}
              >
                {editingEmployee?.f100 ? "Save Changes" : "Create Employee"}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}