@snapdragonsnursery/react-components 1.2.0 → 1.3.1

package/src/EmployeeSearchModal.jsx

@@ -0,0 +1,817 @@
+// Employee Search Modal Component
+// Provides a modal interface for employee search with advanced filtering and selection capabilities
+// Usage: <EmployeeSearchModal isOpen={isOpen} onClose={onClose} onSelect={handleSelect} />
+
+import React, { useState, useEffect, useCallback } from "react";
+import { useMsal } from "@azure/msal-react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  flexRender,
+  createColumnHelper,
+} from "@tanstack/react-table";
+import { trackEvent } from "./telemetry";
+import { Button } from "./components/ui/button";
+import { Input } from "./components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./components/ui/table";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "./components/ui/pagination";
+import {
+  CheckCircleIcon,
+  XCircleIcon,
+  ChevronUpIcon,
+  ChevronDownIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
+import { cn } from "./lib/utils";
+import EmployeeSearchFilters from "./components/EmployeeSearchFilters";
+
+const EmployeeSearchModal = ({
+  isOpen = false,
+  onClose,
+  onSelect,
+  title = "Select Employee",
+  searchPlaceholder = "Search by name, employee ID, or email...",
+  siteId = null,
+  siteIds = null,
+  sites = null,
+  roles = null,
+  managers = null,
+  activeOnly = true,
+  status = null,
+  startDateFrom = null,
+  startDateTo = null,
+  endDateFrom = null,
+  endDateTo = null,
+  sortBy = "surname",
+  sortOrder = "asc",
+  applicationContext = "employee-search-modal",
+  bypassPermissions = false,
+  multiSelect = false,
+  maxSelections = null,
+  selectedEmployees = [],
+  // Configurable filter visibility
+  showRoleFilter = true,
+  showManagerFilter = true,
+  showTermTimeFilter = true,
+  showMaternityFilter = true,
+  showStartDateFilter = true,
+  showEndDateFilter = true,
+  showDbsFilter = true,
+  showWorkingHoursFilter = true,
+}) => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [employees, setEmployees] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [pagination, setPagination] = useState({
+    page: 1,
+    pageSize: 20,
+    totalCount: 0,
+    totalPages: 0,
+    hasNextPage: false,
+    hasPreviousPage: false,
+  });
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+  const [isAdvancedFiltersOpen, setIsAdvancedFiltersOpen] = useState(false);
+  const [advancedFilters, setAdvancedFilters] = useState({
+    status: status || (activeOnly ? "Active" : "all"),
+    selectedSiteId: siteId || "",
+    roleId: "",
+    managerId: "",
+    startDateFrom: startDateFrom || "",
+    startDateTo: startDateTo || "",
+    endDateFrom: endDateFrom || "",
+    endDateTo: endDateTo || "",
+    termTimeOnly: "",
+    onMaternityLeave: "",
+    dbsNumber: "",
+    minHoursPerWeek: "",
+    sortBy: sortBy,
+    sortOrder: sortOrder,
+  });
+
+  // Table sorting state
+  const [sorting, setSorting] = useState([]);
+  const [debouncedAdvancedFilters, setDebouncedAdvancedFilters] = useState(advancedFilters);
+
+  // State for multi-select mode
+  const [selectedEmployeesState, setSelectedEmployeesState] = useState(
+    selectedEmployees || []
+  );
+
+  const { instance, accounts } = useMsal();
+
+  // Column helper for TanStack table
+  const columnHelper = createColumnHelper();
+
+  // Helper function to create sortable header
+  const createSortableHeader = (column, label) => {
+    return ({ column: tableColumn }) => {
+      const isSorted = tableColumn.getIsSorted();
+      return (
+        <div
+          className="flex items-center space-x-1 cursor-pointer select-none"
+          onClick={tableColumn.getToggleSortingHandler()}
+        >
+          <span>{label}</span>
+          <div className="flex flex-col">
+            <ChevronUpIcon
+              className={cn(
+                "h-3 w-3 transition-colors",
+                isSorted === "asc" ? "text-blue-500" : "text-gray-400"
+              )}
+            />
+            <ChevronDownIcon
+              className={cn(
+                "h-3 w-3 transition-colors -mt-1",
+                isSorted === "desc" ? "text-blue-500" : "text-gray-400"
+              )}
+            />
+          </div>
+        </div>
+      );
+    };
+  };
+
+  // Define table columns
+  const columns = [
+    // Checkbox column for multi-select
+    ...(multiSelect
+      ? [
+          columnHelper.display({
+            id: "select",
+            header: ({ table }) => (
+              <input
+                type="checkbox"
+                checked={table.getIsAllPageRowsSelected()}
+                onChange={table.getToggleAllPageRowsSelectedHandler()}
+                className="rounded border-gray-300"
+              />
+            ),
+            cell: ({ row }) => (
+              <input
+                type="checkbox"
+                checked={row.getIsSelected()}
+                onChange={row.getToggleSelectedHandler()}
+                className="rounded border-gray-300"
+              />
+            ),
+            size: 50,
+          }),
+        ]
+      : []),
+    // Name column - sortable
+    columnHelper.accessor("full_name", {
+      header: createSortableHeader("full_name", "Name"),
+      cell: ({ row }) => (
+        <div>
+          <div className="font-medium">{row.original.full_name}</div>
+          <div className="text-sm text-gray-500">
+            ID: {row.original.employee_id}
+          </div>
+        </div>
+      ),
+    }),
+    // Site column - sortable
+    columnHelper.accessor("site_name", {
+      header: createSortableHeader("site_name", "Site"),
+      cell: ({ row }) => (
+        <span>{row.original.site_name}</span>
+      ),
+    }),
+    // Role column - sortable
+    columnHelper.accessor("role_name", {
+      header: createSortableHeader("role_name", "Role"),
+      cell: ({ row }) => (
+        <span>{row.original.role_name}</span>
+      ),
+    }),
+    // Email column
+    columnHelper.accessor("email", {
+      header: "Email",
+      cell: ({ row }) => (
+        <span className="text-sm">{row.original.email}</span>
+      ),
+    }),
+    // Start Date column - sortable
+    columnHelper.accessor("start_date", {
+      header: createSortableHeader("start_date", "Start Date"),
+      cell: ({ row }) => (
+        <span>
+          {row.original.start_date
+            ? new Date(row.original.start_date).toLocaleDateString("en-GB")
+            : "N/A"}
+        </span>
+      ),
+    }),
+    // Status column - sortable
+    columnHelper.accessor("employee_status", {
+      header: createSortableHeader("employee_status", "Status"),
+      cell: ({ row }) => {
+        const status = row.original.employee_status;
+        const statusColors = {
+          'Active': 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
+          'Inactive': 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200',
+          'On Leave': 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
+          'Terminated': 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
+        };
+        
+        return (
+          <span
+            className={cn(
+              "px-2 py-1 text-xs rounded-full",
+              statusColors[status] || "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200"
+            )}
+          >
+            {status || "Unknown"}
+          </span>
+        );
+      },
+    }),
+    // Working Hours column
+    columnHelper.accessor("total_hours_per_week", {
+      header: "Hours/Week",
+      cell: ({ row }) => (
+        <span>
+          {row.original.total_hours_per_week 
+            ? `${row.original.total_hours_per_week}h`
+            : "N/A"}
+        </span>
+      ),
+    }),
+  ];
+
+  // Create table instance
+  const table = useReactTable({
+    data: employees,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      sorting,
+      rowSelection: selectedEmployeesState.reduce((acc, selectedEmployee) => {
+        const rowIndex = employees.findIndex(employee => employee.entra_id === selectedEmployee.entra_id);
+        if (rowIndex !== -1) {
+          acc[rowIndex] = true;
+        }
+        return acc;
+      }, {}),
+    },
+    onSortingChange: setSorting,
+    onRowSelectionChange: (updater) => {
+      const newSelection =
+        typeof updater === "function" ? updater({}) : updater;
+      const selectedRows = Object.keys(newSelection).map(
+        (index) => employees[parseInt(index)]
+      );
+      setSelectedEmployeesState(selectedRows);
+    },
+  });
+
+  // Debounce search term
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+      setPagination((prev) => ({ ...prev, page: 1 }));
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [searchTerm]);
+
+  // Debounce advanced filters
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedAdvancedFilters(advancedFilters);
+      setPagination((prev) => ({ ...prev, page: 1 }));
+    }, 500); // Slightly longer delay for filters
+
+    return () => clearTimeout(timer);
+  }, [advancedFilters]);
+
+  // Search employees
+  const searchEmployees = useCallback(async () => {
+    if (!instance || !accounts[0]) {
+      setError("Authentication required");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const functionKey = process.env.VITE_COMMON_API_FUNCTION_KEY || "";
+
+      const params = new URLSearchParams({
+        entra_id: accounts[0].localAccountId,
+        search_term: debouncedSearchTerm,
+        page: pagination.page,
+        page_size: pagination.pageSize,
+        application_context: applicationContext,
+        bypass_permissions: bypassPermissions.toString(),
+      });
+
+      // Handle site filtering
+      if (siteIds && siteIds.length > 0) {
+        params.append("site_ids", siteIds.join(","));
+      } else if (debouncedAdvancedFilters.selectedSiteId) {
+        params.append("site_id", debouncedAdvancedFilters.selectedSiteId.toString());
+      } else if (siteId) {
+        params.append("site_id", siteId.toString());
+      }
+
+      // Handle status filtering
+      if (debouncedAdvancedFilters.status && debouncedAdvancedFilters.status !== "all") {
+        params.append("status", debouncedAdvancedFilters.status);
+      } else if (activeOnly) {
+        params.append("active_only", "true");
+      }
+
+      // Add role filter
+      if (debouncedAdvancedFilters.roleId) {
+        params.append("role_id", debouncedAdvancedFilters.roleId);
+      }
+
+      // Add manager filter
+      if (debouncedAdvancedFilters.managerId) {
+        params.append("manager_id", debouncedAdvancedFilters.managerId);
+      }
+
+      // Add start date filters
+      if (debouncedAdvancedFilters.startDateFrom) {
+        params.append("start_date_from", debouncedAdvancedFilters.startDateFrom);
+      }
+      if (debouncedAdvancedFilters.startDateTo) {
+        params.append("start_date_to", debouncedAdvancedFilters.startDateTo);
+      }
+
+      // Add end date filters
+      if (debouncedAdvancedFilters.endDateFrom) {
+        params.append("end_date_from", debouncedAdvancedFilters.endDateFrom);
+      }
+      if (debouncedAdvancedFilters.endDateTo) {
+        params.append("end_date_to", debouncedAdvancedFilters.endDateTo);
+      }
+
+      // Add term time only filter
+      if (debouncedAdvancedFilters.termTimeOnly) {
+        params.append("term_time_only", debouncedAdvancedFilters.termTimeOnly);
+      }
+
+      // Add maternity leave filter
+      if (debouncedAdvancedFilters.onMaternityLeave) {
+        params.append("on_maternity_leave", debouncedAdvancedFilters.onMaternityLeave);
+      }
+
+      // Add DBS number filter
+      if (debouncedAdvancedFilters.dbsNumber) {
+        params.append("dbs_number", debouncedAdvancedFilters.dbsNumber);
+      }
+
+      // Add working hours filter
+      if (debouncedAdvancedFilters.minHoursPerWeek) {
+        params.append("min_hours_per_week", debouncedAdvancedFilters.minHoursPerWeek);
+      }
+
+      // Add sorting
+      params.append("sort_by", debouncedAdvancedFilters.sortBy);
+      params.append("sort_order", debouncedAdvancedFilters.sortOrder);
+
+      const apiResponse = await fetch(
+        `${
+          process.env.VITE_COMMON_API_BASE_URL ||
+          "https://snaps-common-api.azurewebsites.net"
+        }/api/search-employees?${params}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-functions-key": functionKey,
+          },
+        }
+      );
+
+      if (!apiResponse.ok) {
+        throw new Error(`API request failed: ${apiResponse.status}`);
+      }
+
+      const data = await apiResponse.json();
+
+      if (data.success) {
+        console.log("🔍 API Response:", {
+          employees: data.data.employees.length,
+          pagination: data.data.pagination,
+          totalCount: data.data.pagination.totalCount,
+          totalPages: data.data.pagination.totalPages
+        });
+        
+        setEmployees(data.data.employees);
+        setPagination(data.data.pagination);
+        trackEvent("employee_search_modal_success", {
+          searchTerm: debouncedSearchTerm,
+          resultCount: data.data.employees.length,
+          totalCount: data.data.pagination.totalCount,
+        });
+      } else {
+        throw new Error(data.error || "Search failed");
+      }
+    } catch (err) {
+      console.error("Error searching employees:", err);
+      setError(err.message);
+      trackEvent("employee_search_modal_error", {
+        error: err.message,
+        searchTerm: debouncedSearchTerm,
+      });
+    } finally {
+      setLoading(false);
+    }
+  }, [
+    instance,
+    accounts,
+    debouncedSearchTerm,
+    pagination.page,
+    pagination.pageSize,
+    siteId,
+    siteIds,
+    activeOnly,
+    debouncedAdvancedFilters,
+    applicationContext,
+    bypassPermissions,
+  ]);
+
+  // Search when debounced term changes
+  useEffect(() => {
+    if (isOpen) {
+      searchEmployees();
+    }
+  }, [debouncedSearchTerm, pagination.page, searchEmployees, isOpen]);
+
+  // Initial search on modal open
+  useEffect(() => {
+    if (isOpen && instance && accounts[0]) {
+      searchEmployees();
+    }
+  }, [isOpen, instance, accounts, searchEmployees]);
+
+  const handlePageChange = (newPage) => {
+    setPagination((prev) => ({ ...prev, page: newPage }));
+  };
+
+  const handleEmployeeSelect = (employee) => {
+    if (multiSelect) {
+      const isAlreadySelected = selectedEmployeesState.some(
+        (selected) => selected.entra_id === employee.entra_id
+      );
+
+      if (isAlreadySelected) {
+        const updatedSelection = selectedEmployeesState.filter(
+          (selected) => selected.entra_id !== employee.entra_id
+        );
+        setSelectedEmployeesState(updatedSelection);
+      } else {
+        if (maxSelections && selectedEmployeesState.length >= maxSelections) {
+          return;
+        }
+        const updatedSelection = [...selectedEmployeesState, employee];
+        setSelectedEmployeesState(updatedSelection);
+      }
+    } else {
+      onSelect(employee);
+      onClose();
+    }
+  };
+
+  const handleConfirmSelection = () => {
+    if (multiSelect && selectedEmployeesState.length > 0) {
+      onSelect(selectedEmployeesState);
+      onClose();
+    }
+  };
+
+  const clearFilters = () => {
+    const clearedFilters = {
+      status: activeOnly ? "Active" : "all",
+      selectedSiteId: "",
+      roleId: "",
+      managerId: "",
+      startDateFrom: "",
+      startDateTo: "",
+      endDateFrom: "",
+      endDateTo: "",
+      termTimeOnly: "",
+      onMaternityLeave: "",
+      dbsNumber: "",
+      minHoursPerWeek: "",
+      sortBy: "surname",
+      sortOrder: "asc",
+    };
+    setAdvancedFilters(clearedFilters);
+    setDebouncedAdvancedFilters(clearedFilters); // Clear immediately
+  };
+
+  // Calculate pagination display values
+  const actualTotalCount = pagination.totalCount || employees.length;
+  const startItem = actualTotalCount > 0 ? (pagination.page - 1) * pagination.pageSize + 1 : 0;
+  const endItem = Math.min(pagination.page * pagination.pageSize, actualTotalCount);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 overflow-y-auto">
+      <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+        <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onClick={onClose}></div>
+
+        <div className="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-7xl">
+          {/* Header */}
+          <div className="bg-white dark:bg-gray-800 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+            <div className="flex items-center justify-between">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                {title}
+              </h3>
+              <button
+                onClick={onClose}
+                className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+              >
+                <XMarkIcon className="h-6 w-6" />
+              </button>
+            </div>
+            {multiSelect && (
+              <div className="mt-2 flex items-center justify-between">
+                <span className="text-sm text-gray-600 dark:text-gray-400">
+                  {selectedEmployeesState.length} selected
+                  {maxSelections && ` / ${maxSelections}`}
+                </span>
+                {selectedEmployeesState.length > 0 && (
+                  <Button
+                    size="sm"
+                    onClick={handleConfirmSelection}
+                  >
+                    Confirm Selection
+                  </Button>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Content */}
+          <div className="px-6 py-4 max-h-[70vh] overflow-y-auto">
+            {/* Search Input */}
+            <div className="mb-4">
+              <Input
+                type="text"
+                placeholder={searchPlaceholder}
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full"
+              />
+            </div>
+
+            {/* Advanced Filters */}
+            <EmployeeSearchFilters
+              filters={advancedFilters}
+              onFiltersChange={setAdvancedFilters}
+              onApplyFilters={setAdvancedFilters}
+              sites={sites}
+              roles={roles}
+              managers={managers}
+              activeOnly={activeOnly}
+              isAdvancedFiltersOpen={isAdvancedFiltersOpen}
+              onToggleAdvancedFilters={() => setIsAdvancedFiltersOpen(!isAdvancedFiltersOpen)}
+              onClearFilters={clearFilters}
+              showRoleFilter={showRoleFilter}
+              showManagerFilter={showManagerFilter}
+              showTermTimeFilter={showTermTimeFilter}
+              showMaternityFilter={showMaternityFilter}
+              showStartDateFilter={showStartDateFilter}
+              showEndDateFilter={showEndDateFilter}
+              showDbsFilter={showDbsFilter}
+              showWorkingHoursFilter={showWorkingHoursFilter}
+            />
+
+            {/* Results */}
+            <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+              {loading && (
+                <div className="flex items-center justify-center p-8">
+                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+                </div>
+              )}
+
+              {error && (
+                <div className="p-6 text-center">
+                  <div className="text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 p-4 rounded-lg">
+                    {error}
+                  </div>
+                </div>
+              )}
+
+              {!loading && !error && (
+                <>
+                  {/* Results Header */}
+                  <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+                    <div className="text-sm text-gray-600 dark:text-gray-400">
+                      {(pagination.totalCount > 0 || employees.length > 0)
+                        ? `Showing ${startItem} to ${endItem} of ${actualTotalCount} employees`
+                        : "No employees found"}
+                    </div>
+                  </div>
+
+                  {/* Table */}
+                  {employees.length > 0 ? (
+                    <div className="overflow-x-auto">
+                      <Table>
+                        <TableHeader>
+                          {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                              {headerGroup.headers.map((header) => (
+                                <TableHead key={header.id}>
+                                  {header.isPlaceholder
+                                    ? null
+                                    : flexRender(
+                                        header.column.columnDef.header,
+                                        header.getContext()
+                                      )}
+                                </TableHead>
+                              ))}
+                            </TableRow>
+                          ))}
+                        </TableHeader>
+                        <TableBody>
+                          {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                              <TableRow
+                                key={row.id}
+                                data-state={row.getIsSelected() && "selected"}
+                                onClick={() => handleEmployeeSelect(row.original)}
+                                className="cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
+                              >
+                                {row.getVisibleCells().map((cell) => (
+                                  <TableCell key={cell.id}>
+                                    {flexRender(
+                                      cell.column.columnDef.cell,
+                                      cell.getContext()
+                                    )}
+                                  </TableCell>
+                                ))}
+                              </TableRow>
+                            ))
+                          ) : (
+                            <TableRow>
+                              <TableCell
+                                colSpan={columns.length}
+                                className="h-24 text-center"
+                              >
+                                {debouncedSearchTerm
+                                  ? "No employees found matching your search."
+                                  : "Start typing to search for employees."}
+                              </TableCell>
+                            </TableRow>
+                          )}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  ) : (
+                    <div className="p-6 text-center text-gray-500 dark:text-gray-400">
+                      {debouncedSearchTerm
+                        ? "No employees found matching your search."
+                        : "Start typing to search for employees."}
+                    </div>
+                  )}
+
+                  {/* Pagination */}
+                  {(pagination.totalCount > 0 || employees.length > 0) && (
+                    <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
+                      {(pagination.totalPages > 1 || employees.length > 0) && (
+                        <div className="flex justify-center">
+                          <Pagination>
+                            <PaginationContent>
+                              <PaginationItem>
+                                <PaginationPrevious 
+                                  href="#"
+                                  onClick={(e) => {
+                                    e.preventDefault();
+                                    if (pagination.hasPreviousPage) {
+                                      handlePageChange(pagination.page - 1);
+                                    }
+                                  }}
+                                  className={cn(
+                                    !pagination.hasPreviousPage &&
+                                      "pointer-events-none opacity-50"
+                                  )}
+                                />
+                              </PaginationItem>
+
+                              {/* Page numbers */}
+                              {Array.from(
+                                { length: Math.max(pagination.totalPages, 1) },
+                                (_, i) => i + 1
+                              )
+                                .filter((page) => {
+                                  const current = pagination.page;
+                                  const total = Math.max(pagination.totalPages, 1);
+                                  return (
+                                    page === 1 ||
+                                    page === total ||
+                                    (page >= current - 1 && page <= current + 1)
+                                  );
+                                })
+                                .map((page, index, array) => {
+                                  if (index > 0 && array[index - 1] !== page - 1) {
+                                    return (
+                                      <React.Fragment key={`ellipsis-${page}`}>
+                                        <PaginationItem>
+                                          <PaginationEllipsis />
+                                        </PaginationItem>
+                                        <PaginationItem>
+                                          <PaginationLink
+                                            href="#"
+                                            onClick={(e) => {
+                                              e.preventDefault();
+                                              handlePageChange(page);
+                                            }}
+                                            isActive={page === pagination.page}
+                                          >
+                                            {page}
+                                          </PaginationLink>
+                                        </PaginationItem>
+                                      </React.Fragment>
+                                    );
+                                  }
+                                  return (
+                                    <PaginationItem key={page}>
+                                      <PaginationLink
+                                        href="#"
+                                        onClick={(e) => {
+                                          e.preventDefault();
+                                          handlePageChange(page);
+                                        }}
+                                        isActive={page === pagination.page}
+                                      >
+                                        {page}
+                                      </PaginationLink>
+                                    </PaginationItem>
+                                  );
+                                })}
+
+                              <PaginationItem>
+                                <PaginationNext 
+                                  href="#"
+                                  onClick={(e) => {
+                                    e.preventDefault();
+                                    if (pagination.hasNextPage) {
+                                      handlePageChange(pagination.page + 1);
+                                    }
+                                  }}
+                                  className={cn(
+                                    !pagination.hasNextPage &&
+                                      "pointer-events-none opacity-50"
+                                  )}
+                                />
+                              </PaginationItem>
+                            </PaginationContent>
+                          </Pagination>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div className="bg-gray-50 dark:bg-gray-700 px-6 py-3 flex justify-end space-x-3">
+            <Button
+              variant="outline"
+              onClick={onClose}
+            >
+              Cancel
+            </Button>
+            {multiSelect && selectedEmployeesState.length > 0 && (
+              <Button
+                onClick={handleConfirmSelection}
+              >
+                Select {selectedEmployeesState.length} Employee{selectedEmployeesState.length !== 1 ? 's' : ''}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EmployeeSearchModal;