@snapdragonsnursery/react-components 1.13.0 → 1.16.0

package/src/EmployeeSearchModal.jsx

@@ -14,6 +14,7 @@ import {
 import { trackEvent } from "./telemetry";
 import { Button } from "./components/ui/button";
 import { Input } from "./components/ui/input";
+import { Avatar, AvatarFallback, AvatarImage } from "./components/ui/avatar";
 import {
   Table,
   TableBody,
@@ -74,6 +75,21 @@ const EmployeeSearchModal = ({
   showEndDateFilter = true,
   showDbsFilter = true,
   showWorkingHoursFilter = true,
+  // Profile pictures
+  showProfilePics = false,
+  // Layout controls
+  zIndex = 60,
+  maxHeightVh = 85,
+  // Auth options: provide token directly or a function to fetch it
+  authToken = null,
+  getAccessToken = null,
+  // Graph auth options specifically for Microsoft Graph calls (e.g., profile photos)
+  graphAuthToken = null,
+  getGraphAccessToken = null,
+  // Column customization
+  visibleColumns = null,
+  columnLabels = {},
+  columnRenderers = {},
 }) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [employees, setEmployees] = useState([]);
@@ -108,18 +124,122 @@ const EmployeeSearchModal = ({
 
   // Table sorting state
   const [sorting, setSorting] = useState([]);
-  const [debouncedAdvancedFilters, setDebouncedAdvancedFilters] = useState(advancedFilters);
+  const [debouncedAdvancedFilters, setDebouncedAdvancedFilters] =
+    useState(advancedFilters);
 
   // State for multi-select mode
   const [selectedEmployeesState, setSelectedEmployeesState] = useState(
     selectedEmployees || []
   );
 
+  // State for profile pictures
+  const [profilePics, setProfilePics] = useState(new Map());
+  const [loadingProfilePics, setLoadingProfilePics] = useState(new Set());
+
   const { instance, accounts } = useMsal();
 
   // Column helper for TanStack table
   const columnHelper = createColumnHelper();
 
+  // Function to fetch profile picture from Microsoft Graph
+  const fetchProfilePicture = useCallback(
+    async (entraId) => {
+      if (
+        !entraId ||
+        profilePics.has(entraId) ||
+        loadingProfilePics.has(entraId)
+      ) {
+        return;
+      }
+
+      setLoadingProfilePics((prev) => new Set(prev).add(entraId));
+
+      try {
+        // Get Graph API token (prefer explicit Graph token accessors to avoid APIM token misuse)
+        let graphToken = null;
+
+        if (typeof getGraphAccessToken === "function") {
+          graphToken = await getGraphAccessToken();
+        } else if (graphAuthToken) {
+          graphToken = graphAuthToken;
+        } else if (instance && accounts[0]) {
+          // Fallback: acquire Graph token via MSAL
+          // Prefer broader scopes that allow reading other users' profiles/photos when consented
+          const graphScopes = ["User.Read", "Directory.Read.All"]; // host app should consent these
+          try {
+            const response = await instance.acquireTokenSilent({
+              account: accounts[0],
+              scopes: graphScopes,
+            });
+            graphToken = response.accessToken;
+          } catch (silentErr) {
+            try {
+              const response = await instance.acquireTokenPopup({
+                scopes: graphScopes,
+              });
+              graphToken = response.accessToken;
+            } catch (popupErr) {
+              console.warn(
+                "Failed to get Graph token for profile picture:",
+                popupErr
+              );
+              return;
+            }
+          }
+        }
+
+        if (!graphToken) {
+          console.warn("No Graph token available for profile picture");
+          return;
+        }
+
+        // Try different Graph photo endpoints (small size first)
+        const tryUrls = [
+          `https://graph.microsoft.com/v1.0/users/${entraId}/photos/48x48/$value`,
+          `https://graph.microsoft.com/v1.0/users/${entraId}/photo/$value`,
+        ];
+
+        for (const url of tryUrls) {
+          const response = await fetch(url, {
+            headers: {
+              Authorization: `Bearer ${graphToken}`,
+            },
+          });
+
+          if (response.ok) {
+            const blob = await response.blob();
+            const imageUrl = URL.createObjectURL(blob);
+            setProfilePics((prev) => new Map(prev).set(entraId, imageUrl));
+            return; // success
+          }
+          if (response.status === 404) {
+            // No profile picture available - store null to avoid retrying
+            setProfilePics((prev) => new Map(prev).set(entraId, null));
+            return;
+          }
+        }
+
+        console.warn(`Failed to fetch profile picture for ${entraId}: Non-200 response`);
+      } catch (error) {
+        console.warn(`Error fetching profile picture for ${entraId}:`, error);
+      } finally {
+        setLoadingProfilePics((prev) => {
+          const newSet = new Set(prev);
+          newSet.delete(entraId);
+          return newSet;
+        });
+      }
+    },
+    [
+      instance,
+      accounts,
+      getGraphAccessToken,
+      graphAuthToken,
+      profilePics,
+      loadingProfilePics,
+    ]
+  );
+
   // Helper function to create sortable header
   const createSortableHeader = (column, label) => {
     return ({ column: tableColumn }) => {
@@ -149,94 +269,144 @@ const EmployeeSearchModal = ({
     };
   };
 
-  // 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
+  // Profile picture column
+  const profilePicColumn = columnHelper.display({
+    id: "profile_pic",
+    header: columnLabels.profile_pic || "Photo",
+    cell: ({ row }) => {
+      const entraId = row.original.entra_id;
+      const profilePic = profilePics.get(entraId);
+      const isLoading = loadingProfilePics.has(entraId);
+
+      // Generate initials for fallback
+      const initials =
+        row.original.full_name
+          ?.split(" ")
+          .map((name) => name.charAt(0))
+          .join("")
+          .toUpperCase()
+          .slice(0, 2) || "??";
+
+      if (isLoading) {
+        return (
+          <Avatar className="w-8 h-8">
+            <AvatarFallback className="bg-gray-200 dark:bg-gray-700">
+              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500"></div>
+            </AvatarFallback>
+          </Avatar>
+        );
+      }
+
+      return (
+        <Avatar className="w-8 h-8">
+          {profilePic && (
+            <AvatarImage
+              src={profilePic}
+              alt={`${row.original.full_name} profile`}
+            />
+          )}
+          <AvatarFallback className="bg-blue-500 text-white text-sm font-medium">
+            {initials}
+          </AvatarFallback>
+        </Avatar>
+      );
+    },
+    size: 60,
+  });
+
+  // Define default data columns (excluding optional select)
+  const defaultDataColumns = [
     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>
+      header: createSortableHeader(
+        "full_name",
+        columnLabels.full_name || "Name"
       ),
+      cell: ({ row }) =>
+        columnRenderers.full_name ? (
+          columnRenderers.full_name(row.original)
+        ) : (
+          <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>
+      header: createSortableHeader(
+        "site_name",
+        columnLabels.site_name || "Site"
       ),
+      cell: ({ row }) =>
+        columnRenderers.site_name ? (
+          columnRenderers.site_name(row.original)
+        ) : (
+          <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>
+      header: createSortableHeader(
+        "role_name",
+        columnLabels.role_name || "Role"
       ),
+      cell: ({ row }) =>
+        columnRenderers.role_name ? (
+          columnRenderers.role_name(row.original)
+        ) : (
+          <span>{row.original.role_name}</span>
+        ),
     }),
-    // Email column
     columnHelper.accessor("email", {
-      header: "Email",
-      cell: ({ row }) => (
-        <span className="text-sm">{row.original.email}</span>
-      ),
+      header: columnLabels.email || "Email",
+      cell: ({ row }) =>
+        columnRenderers.email ? (
+          columnRenderers.email(row.original)
+        ) : (
+          <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>
+      header: createSortableHeader(
+        "start_date",
+        columnLabels.start_date || "Start Date"
       ),
+      cell: ({ row }) =>
+        columnRenderers.start_date ? (
+          columnRenderers.start_date(row.original)
+        ) : (
+          <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"),
+      header: createSortableHeader(
+        "employee_status",
+        columnLabels.employee_status || "Status"
+      ),
       cell: ({ row }) => {
+        if (columnRenderers.employee_status)
+          return columnRenderers.employee_status(row.original);
         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',
+          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"
+              statusColors[status] ||
+                "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200"
             )}
           >
             {status || "Unknown"}
@@ -244,19 +414,59 @@ const EmployeeSearchModal = ({
         );
       },
     }),
-    // 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>
-      ),
+      header: columnLabels.total_hours_per_week || "Hours/Week",
+      cell: ({ row }) =>
+        columnRenderers.total_hours_per_week ? (
+          columnRenderers.total_hours_per_week(row.original)
+        ) : (
+          <span>
+            {row.original.total_hours_per_week
+              ? `${row.original.total_hours_per_week}h`
+              : "N/A"}
+          </span>
+        ),
     }),
   ];
 
+  const selectColumn = 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,
+  });
+
+  let dataColumns = defaultDataColumns;
+  if (Array.isArray(visibleColumns) && visibleColumns.length > 0) {
+    const mapByKey = new Map(
+      defaultDataColumns.map((c) => [c.accessorKey || c.id, c])
+    );
+    dataColumns = visibleColumns
+      .map((key) => mapByKey.get(key))
+      .filter(Boolean);
+  }
+
+  // Add profile picture column if enabled
+  if (showProfilePics) {
+    dataColumns = [profilePicColumn, ...dataColumns];
+  }
+
+  const columns = multiSelect ? [selectColumn, ...dataColumns] : dataColumns;
+
   // Create table instance
   const table = useReactTable({
     data: employees,
@@ -266,7 +476,9 @@ const EmployeeSearchModal = ({
     state: {
       sorting,
       rowSelection: selectedEmployeesState.reduce((acc, selectedEmployee) => {
-        const rowIndex = employees.findIndex(employee => employee.entra_id === selectedEmployee.entra_id);
+        const rowIndex = employees.findIndex(
+          (employee) => employee.entra_id === selectedEmployee.entra_id
+        );
         if (rowIndex !== -1) {
           acc[rowIndex] = true;
         }
@@ -279,13 +491,19 @@ const EmployeeSearchModal = ({
       // instead of replacing it, so selection is retained across searches/pages.
 
       // Build current selection map (for visible rows only)
-      const prevSelection = selectedEmployeesState.reduce((acc, selectedEmployee) => {
-        const rowIndex = employees.findIndex((employee) => employee.entra_id === selectedEmployee.entra_id);
-        if (rowIndex !== -1) acc[rowIndex] = true;
-        return acc;
-      }, {});
+      const prevSelection = selectedEmployeesState.reduce(
+        (acc, selectedEmployee) => {
+          const rowIndex = employees.findIndex(
+            (employee) => employee.entra_id === selectedEmployee.entra_id
+          );
+          if (rowIndex !== -1) acc[rowIndex] = true;
+          return acc;
+        },
+        {}
+      );
 
-      const updatedSelection = typeof updater === 'function' ? updater(prevSelection) : updater;
+      const updatedSelection =
+        typeof updater === "function" ? updater(prevSelection) : updater;
 
       // Determine which visible employees are selected after the change
       const visibleSelected = Object.keys(updatedSelection)
@@ -294,11 +512,15 @@ const EmployeeSearchModal = ({
         .filter(Boolean);
 
       // Start from the previous global selection keyed by entra_id
-      const prevById = new Map(selectedEmployeesState.map((e) => [e.entra_id, e]));
+      const prevById = new Map(
+        selectedEmployeesState.map((e) => [e.entra_id, e])
+      );
 
       // Remove any currently visible employees that are now unselected
       const visibleIds = new Set(employees.map((e) => e.entra_id));
-      const visibleSelectedIds = new Set(visibleSelected.map((e) => e.entra_id));
+      const visibleSelectedIds = new Set(
+        visibleSelected.map((e) => e.entra_id)
+      );
       employees.forEach((e) => {
         if (visibleIds.has(e.entra_id) && !visibleSelectedIds.has(e.entra_id)) {
           prevById.delete(e.entra_id);
@@ -348,7 +570,34 @@ const EmployeeSearchModal = ({
     setError(null);
 
     try {
-      const functionKey = import.meta.env.VITE_COMMON_API_FUNCTION_KEY || "";
+      // Resolve access token for APIM
+      const apimScope = import.meta.env.VITE_APIM_SCOPE;
+
+      let accessToken = null;
+      if (typeof getAccessToken === "function") {
+        accessToken = await getAccessToken();
+      } else if (authToken) {
+        accessToken = authToken;
+      } else if (apimScope) {
+        try {
+          const response = await instance.acquireTokenSilent({
+            account: accounts[0],
+            scopes: [apimScope],
+          });
+          accessToken = response.accessToken;
+        } catch (silentErr) {
+          const response = await instance.acquireTokenPopup({
+            scopes: [apimScope],
+          });
+          accessToken = response.accessToken;
+        }
+      }
+
+      if (!accessToken) {
+        throw new Error(
+          "Missing access token. Provide authToken/getAccessToken or set VITE_APIM_SCOPE."
+        );
+      }
 
       const params = new URLSearchParams({
         entra_id: accounts[0].localAccountId,
@@ -363,13 +612,19 @@ const EmployeeSearchModal = ({
       if (siteIds && siteIds.length > 0) {
         params.append("site_ids", siteIds.join(","));
       } else if (debouncedAdvancedFilters.selectedSiteId) {
-        params.append("site_id", debouncedAdvancedFilters.selectedSiteId.toString());
+        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") {
+      if (
+        debouncedAdvancedFilters.status &&
+        debouncedAdvancedFilters.status !== "all"
+      ) {
         params.append("status", debouncedAdvancedFilters.status);
       } else if (activeOnly) {
         params.append("active_only", "true");
@@ -387,7 +642,10 @@ const EmployeeSearchModal = ({
 
       // Add start date filters
       if (debouncedAdvancedFilters.startDateFrom) {
-        params.append("start_date_from", debouncedAdvancedFilters.startDateFrom);
+        params.append(
+          "start_date_from",
+          debouncedAdvancedFilters.startDateFrom
+        );
       }
       if (debouncedAdvancedFilters.startDateTo) {
         params.append("start_date_to", debouncedAdvancedFilters.startDateTo);
@@ -408,7 +666,10 @@ const EmployeeSearchModal = ({
 
       // Add maternity leave filter
       if (debouncedAdvancedFilters.onMaternityLeave) {
-        params.append("on_maternity_leave", debouncedAdvancedFilters.onMaternityLeave);
+        params.append(
+          "on_maternity_leave",
+          debouncedAdvancedFilters.onMaternityLeave
+        );
       }
 
       // Add DBS number filter
@@ -418,7 +679,10 @@ const EmployeeSearchModal = ({
 
       // Add working hours filter
       if (debouncedAdvancedFilters.minHoursPerWeek) {
-        params.append("min_hours_per_week", debouncedAdvancedFilters.minHoursPerWeek);
+        params.append(
+          "min_hours_per_week",
+          debouncedAdvancedFilters.minHoursPerWeek
+        );
       }
 
       // Add sorting
@@ -426,14 +690,11 @@ const EmployeeSearchModal = ({
       params.append("sort_order", debouncedAdvancedFilters.sortOrder);
 
       const apiResponse = await fetch(
-        `${
-          import.meta.env.VITE_COMMON_API_BASE_URL ||
-          "https://snaps-common-api.azurewebsites.net"
-        }/api/search-employees?${params}`,
+        `https://snapdragons.azure-api.net/api/employees/search-employees?${params}`,
         {
           headers: {
             "Content-Type": "application/json",
-            "x-functions-key": functionKey,
+            Authorization: `Bearer ${accessToken}`,
           },
         }
       );
@@ -449,9 +710,9 @@ const EmployeeSearchModal = ({
           employees: data.data.employees.length,
           pagination: data.data.pagination,
           totalCount: data.data.pagination.totalCount,
-          totalPages: data.data.pagination.totalPages
+          totalPages: data.data.pagination.totalPages,
         });
-        
+
         setEmployees(data.data.employees);
         setPagination(data.data.pagination);
         trackEvent("employee_search_modal_success", {
@@ -500,6 +761,17 @@ const EmployeeSearchModal = ({
     }
   }, [isOpen, instance, accounts, searchEmployees]);
 
+  // Fetch profile pictures when employees change and showProfilePics is enabled
+  useEffect(() => {
+    if (showProfilePics && employees.length > 0) {
+      employees.forEach((employee) => {
+        if (employee.entra_id) {
+          fetchProfilePicture(employee.entra_id);
+        }
+      });
+    }
+  }, [employees, showProfilePics, fetchProfilePicture]);
+
   const handlePageChange = (newPage) => {
     setPagination((prev) => ({ ...prev, page: newPage }));
   };
@@ -562,17 +834,27 @@ const EmployeeSearchModal = ({
 
   // 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);
+  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="fixed inset-0 overflow-y-auto" style={{ zIndex }}>
       <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="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">
+        <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 flex flex-col"
+          style={{ maxHeight: `${maxHeightVh}vh` }}
+        >
           {/* 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">
@@ -590,7 +872,7 @@ const EmployeeSearchModal = ({
           </div>
 
           {/* Content */}
-          <div className="px-6 py-4 max-h-[70vh] overflow-y-auto">
+          <div className="px-6 py-4 overflow-y-auto flex-1">
             {/* Search Input */}
             <div className="mb-4">
               <Input
@@ -612,7 +894,9 @@ const EmployeeSearchModal = ({
               managers={managers}
               activeOnly={activeOnly}
               isAdvancedFiltersOpen={isAdvancedFiltersOpen}
-              onToggleAdvancedFilters={() => setIsAdvancedFiltersOpen(!isAdvancedFiltersOpen)}
+              onToggleAdvancedFilters={() =>
+                setIsAdvancedFiltersOpen(!isAdvancedFiltersOpen)
+              }
               onClearFilters={clearFilters}
               showRoleFilter={showRoleFilter}
               showManagerFilter={showManagerFilter}
@@ -645,7 +929,7 @@ const EmployeeSearchModal = ({
                   {/* 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)
+                      {pagination.totalCount > 0 || employees.length > 0
                         ? `Showing ${startItem} to ${endItem} of ${actualTotalCount} employees`
                         : "No employees found"}
                     </div>
@@ -677,7 +961,9 @@ const EmployeeSearchModal = ({
                               <TableRow
                                 key={row.id}
                                 data-state={row.getIsSelected() && "selected"}
-                                onClick={() => handleEmployeeSelect(row.original)}
+                                onClick={() =>
+                                  handleEmployeeSelect(row.original)
+                                }
                                 className="cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
                               >
                                 {row.getVisibleCells().map((cell) => (
@@ -721,7 +1007,7 @@ const EmployeeSearchModal = ({
                           <Pagination>
                             <PaginationContent>
                               <PaginationItem>
-                                <PaginationPrevious 
+                                <PaginationPrevious
                                   href="#"
                                   onClick={(e) => {
                                     e.preventDefault();
@@ -743,7 +1029,10 @@ const EmployeeSearchModal = ({
                               )
                                 .filter((page) => {
                                   const current = pagination.page;
-                                  const total = Math.max(pagination.totalPages, 1);
+                                  const total = Math.max(
+                                    pagination.totalPages,
+                                    1
+                                  );
                                   return (
                                     page === 1 ||
                                     page === total ||
@@ -751,7 +1040,10 @@ const EmployeeSearchModal = ({
                                   );
                                 })
                                 .map((page, index, array) => {
-                                  if (index > 0 && array[index - 1] !== page - 1) {
+                                  if (
+                                    index > 0 &&
+                                    array[index - 1] !== page - 1
+                                  ) {
                                     return (
                                       <React.Fragment key={`ellipsis-${page}`}>
                                         <PaginationItem>
@@ -789,7 +1081,7 @@ const EmployeeSearchModal = ({
                                 })}
 
                               <PaginationItem>
-                                <PaginationNext 
+                                <PaginationNext
                                   href="#"
                                   onClick={(e) => {
                                     e.preventDefault();
@@ -818,15 +1110,21 @@ const EmployeeSearchModal = ({
           <div className="bg-gray-50 dark:bg-gray-700 px-6 py-3 flex items-center justify-between gap-3">
             {/* Selection preview */}
             <div className="flex-1 min-w-0">
-              {multiSelect && selectedEmployeesState.length > 0 && (
+              {multiSelect &&
+                selectedEmployeesState.length > 0 &&
                 (() => {
                   const total = selectedEmployeesState.length;
                   const preview = selectedEmployeesState.slice(0, 5);
                   const extra = Math.max(total - preview.length, 0);
-                  const previewText = `${total} selected${maxSelections ? ` / ${maxSelections}` : ''}: ` +
-                    preview.map((e) => e.full_name).join(', ') +
-                    (extra > 0 ? ` + ${extra} more` : '');
-                  const fullList = selectedEmployeesState.map((e) => e.full_name).join(', ');
+                  const previewText =
+                    `${total} selected${
+                      maxSelections ? ` / ${maxSelections}` : ""
+                    }: ` +
+                    preview.map((e) => e.full_name).join(", ") +
+                    (extra > 0 ? ` + ${extra} more` : "");
+                  const fullList = selectedEmployeesState
+                    .map((e) => e.full_name)
+                    .join(", ");
                   return (
                     <div
                       className="text-sm text-gray-600 dark:text-gray-300 truncate"
@@ -835,12 +1133,15 @@ const EmployeeSearchModal = ({
                       {previewText}
                     </div>
                   );
-                })()
-              )}
+                })()}
             </div>
             <div className="flex items-center gap-2">
               {multiSelect && (
-                <Button variant="outline" onClick={handleClearSelection} disabled={selectedEmployeesState.length === 0}>
+                <Button
+                  variant="outline"
+                  onClick={handleClearSelection}
+                  disabled={selectedEmployeesState.length === 0}
+                >
                   Clear
                 </Button>
               )}
@@ -848,12 +1149,14 @@ const EmployeeSearchModal = ({
                 Go Back
               </Button>
               {multiSelect && (
-                <Button 
-                  onClick={handleConfirmSelection} 
+                <Button
+                  onClick={handleConfirmSelection}
                   disabled={selectedEmployeesState.length === 0}
                   aria-label={`Confirm ${selectedEmployeesState.length} selected`}
                 >
-                  {`Confirm (${selectedEmployeesState.length}${maxSelections ? `/${maxSelections}` : ''})`}
+                  {`Confirm (${selectedEmployeesState.length}${
+                    maxSelections ? `/${maxSelections}` : ""
+                  })`}
                 </Button>
               )}
             </div>
@@ -864,4 +1167,4 @@ const EmployeeSearchModal = ({
   );
 };
 
-export default EmployeeSearchModal; 
+export default EmployeeSearchModal;