@snapdragonsnursery/react-components 1.3.3 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.3.3",
+  "version": "1.5.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -64,6 +64,8 @@
     "src/index.css"
   ],
   "devDependencies": {
+    "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@testing-library/jest-dom": "^6.6.4",

package/src/ChildSearchPage.jsx

@@ -451,8 +451,8 @@ const ChildSearchPage = ({
   const endItem = Math.min(pagination.page * pagination.pageSize, actualTotalCount);
 
   return (
-    <div className="bg-gray-50 dark:bg-gray-900">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div className="min-h-full">
+      <div className="w-full py-6">
         {/* Header */}
         <div className="mb-8">
           <h1 className="text-3xl font-bold text-gray-900 dark:text-white">

package/src/ChildSearchPageDemo.jsx

@@ -29,7 +29,7 @@ const ChildSearchPageDemo = () => {
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
       {/* Demo Controls */}
       <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-4">
-        <div className="max-w-7xl mx-auto">
+        <div className="w-full px-4">
           <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
             ChildSearchPage Demo
           </h2>

package/src/EmployeeSearchDemo.jsx

@@ -55,7 +55,7 @@ const EmployeeSearchDemo = () => {
 
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="w-full px-4 sm:px-6 lg:px-8 py-8">
         {/* Header */}
         <div className="mb-8">
           <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">

package/src/EmployeeSearchPage.jsx

@@ -53,7 +53,7 @@ const EmployeeSearchPage = ({
   startDateTo = null,
   endDateFrom = null,
   endDateTo = null,
-  sortBy = "surname",
+  sortBy = "full_name",
   sortOrder = "asc",
   applicationContext = "employee-search",
   bypassPermissions = false,
@@ -67,15 +67,25 @@ const EmployeeSearchPage = ({
   showTermTimeFilter = true,
   showMaternityFilter = true,
   showStartDateFilter = true,
-  showEndDateFilter = true,
-  showDbsFilter = true,
+  showEndDateFilter = false,
   showWorkingHoursFilter = true,
+  loadAllResults = false, // If true, loads all results instead of paginating
 }) => {
   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: loadAllResults ? 10000 : 20, // Use large page size if loading all results
+    totalCount: 0,
+    totalPages: 0,
+    hasNextPage: false,
+    hasPreviousPage: false,
+  });
+  
+  // Local pagination state for when loadAllResults is true
+  const [localPagination, setLocalPagination] = useState({
     page: 1,
     pageSize: 20,
     totalCount: 0,
@@ -83,6 +93,9 @@ const EmployeeSearchPage = ({
     hasNextPage: false,
     hasPreviousPage: false,
   });
+  
+  // All employees when loadAllResults is true
+  const [allEmployees, setAllEmployees] = useState([]);
   const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
   const [isAdvancedFiltersOpen, setIsAdvancedFiltersOpen] = useState(false);
   const [advancedFilters, setAdvancedFilters] = useState({
@@ -96,10 +109,7 @@ const EmployeeSearchPage = ({
     endDateTo: endDateTo || "",
     termTimeOnly: "",
     onMaternityLeave: "",
-    dbsNumber: "",
     minHoursPerWeek: "",
-    sortBy: sortBy,
-    sortOrder: sortOrder,
   });
 
   // Table sorting state
@@ -198,6 +208,15 @@ const EmployeeSearchPage = ({
         <span>{row.original.role_name}</span>
       ),
     }),
+    // Manager column - sortable
+    columnHelper.accessor("manager_name", {
+      header: createSortableHeader("manager_name", "Manager"),
+      cell: ({ row }) => (
+        <span className="text-sm">
+          {row.original.manager_name || "N/A"}
+        </span>
+      ),
+    }),
     // Email column
     columnHelper.accessor("email", {
       header: "Email",
@@ -326,6 +345,10 @@ const EmployeeSearchPage = ({
     return () => clearTimeout(timer);
   }, [advancedFilters]);
 
+
+
+
+
   // Search employees
   const searchEmployees = useCallback(async () => {
     if (!instance || !accounts[0]) {
@@ -342,12 +365,17 @@ const EmployeeSearchPage = ({
       const params = new URLSearchParams({
         entra_id: accounts[0].localAccountId,
         search_term: debouncedSearchTerm,
-        page: pagination.page,
-        page_size: pagination.pageSize,
+        page: loadAllResults ? 1 : pagination.page,
+        page_size: loadAllResults ? 10000 : pagination.pageSize,
         application_context: applicationContext,
         bypass_permissions: bypassPermissions.toString(),
       });
 
+      // Add load_all_results parameter when needed
+      if (loadAllResults) {
+        params.append("load_all_results", "true");
+      }
+
       // Handle site filtering
       if (siteIds && siteIds.length > 0) {
         params.append("site_ids", siteIds.join(","));
@@ -400,19 +428,14 @@ const EmployeeSearchPage = ({
         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);
+      // Add sorting (using default values since sort options were removed from filters)
+      params.append("sort_by", sortBy);
+      params.append("sort_order", sortOrder);
 
       const apiResponse = await fetch(
         `${
@@ -441,8 +464,36 @@ const EmployeeSearchPage = ({
           totalPages: data.data.pagination.totalPages
         });
         
-        setEmployees(data.data.employees);
-        setPagination(data.data.pagination);
+        if (loadAllResults) {
+          // Store all employees and handle local pagination
+          setAllEmployees(data.data.employees);
+          setLocalPagination({
+            page: 1,
+            pageSize: 20,
+            totalCount: data.data.employees.length,
+            totalPages: Math.ceil(data.data.employees.length / 20),
+            hasNextPage: data.data.employees.length > 20,
+            hasPreviousPage: false,
+          });
+          
+          // Set current page employees
+          const startIndex = 0;
+          const endIndex = 20;
+          setEmployees(data.data.employees.slice(startIndex, endIndex));
+          setPagination({
+            page: 1,
+            pageSize: 20,
+            totalCount: data.data.employees.length,
+            totalPages: Math.ceil(data.data.employees.length / 20),
+            hasNextPage: data.data.employees.length > 20,
+            hasPreviousPage: false,
+          });
+        } else {
+          // Normal server-side pagination
+          setEmployees(data.data.employees);
+          setPagination(data.data.pagination);
+        }
+        
         trackEvent("employee_search_success", {
           searchTerm: debouncedSearchTerm,
           resultCount: data.data.employees.length,
@@ -478,12 +529,12 @@ const EmployeeSearchPage = ({
   // Track if component has mounted
   const hasMounted = React.useRef(false);
 
-  // Search when debounced term changes or pagination changes
+  // Search when debounced term changes, pagination changes, or filters change
   useEffect(() => {
     if (instance && accounts[0] && hasMounted.current) {
       searchEmployees();
     }
-  }, [debouncedSearchTerm, pagination.page, instance, accounts]);
+  }, [debouncedSearchTerm, debouncedAdvancedFilters, pagination.page, instance, accounts]);
 
   // Initial search on component mount
   useEffect(() => {
@@ -494,7 +545,29 @@ const EmployeeSearchPage = ({
   }, [instance, accounts]);
 
   const handlePageChange = (newPage) => {
-    setPagination((prev) => ({ ...prev, page: newPage }));
+    if (loadAllResults) {
+      // Handle local pagination
+      const startIndex = (newPage - 1) * localPagination.pageSize;
+      const endIndex = startIndex + localPagination.pageSize;
+      setEmployees(allEmployees.slice(startIndex, endIndex));
+      
+      setLocalPagination((prev) => ({
+        ...prev,
+        page: newPage,
+        hasNextPage: endIndex < allEmployees.length,
+        hasPreviousPage: newPage > 1,
+      }));
+      
+      setPagination((prev) => ({
+        ...prev,
+        page: newPage,
+        hasNextPage: endIndex < allEmployees.length,
+        hasPreviousPage: newPage > 1,
+      }));
+    } else {
+      // Normal server-side pagination
+      setPagination((prev) => ({ ...prev, page: newPage }));
+    }
   };
 
   const handleEmployeeSelect = (employee) => {
@@ -536,10 +609,7 @@ const EmployeeSearchPage = ({
       endDateTo: "",
       termTimeOnly: "",
       onMaternityLeave: "",
-      dbsNumber: "",
       minHoursPerWeek: "",
-      sortBy: "surname",
-      sortOrder: "asc",
     };
     setAdvancedFilters(clearedFilters);
     setDebouncedAdvancedFilters(clearedFilters); // Clear immediately
@@ -547,15 +617,15 @@ const EmployeeSearchPage = ({
 
   // 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 = loadAllResults ? 1 : (actualTotalCount > 0 ? (pagination.page - 1) * pagination.pageSize + 1 : 0);
+  const endItem = loadAllResults ? actualTotalCount : Math.min(pagination.page * pagination.pageSize, actualTotalCount);
 
   return (
-    <div className="bg-gray-50 dark:bg-gray-900">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div className="min-h-full" style={{ width: '100%', maxWidth: '100%', overflow: 'hidden' }}>
+      <div className="py-6" style={{ width: '100%', maxWidth: '100%' }}>
         {/* Header */}
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+        <div className="mb-6">
+          <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
             {title}
           </h1>
           {multiSelect && (
@@ -569,8 +639,8 @@ const EmployeeSearchPage = ({
         </div>
 
         {/* Search Input */}
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 mb-6">
-          <div className="p-6">
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 mb-6" style={{ width: '100%', maxWidth: '100%' }}>
+          <div className="p-4">
             <div className="relative">
               <Input
                 type="text"
@@ -578,6 +648,7 @@ const EmployeeSearchPage = ({
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
                 className="pl-4"
+                style={{ width: '100%' }}
               />
             </div>
           </div>
@@ -601,12 +672,11 @@ const EmployeeSearchPage = ({
           showMaternityFilter={showMaternityFilter}
           showStartDateFilter={showStartDateFilter}
           showEndDateFilter={showEndDateFilter}
-          showDbsFilter={showDbsFilter}
           showWorkingHoursFilter={showWorkingHoursFilter}
         />
 
         {/* Results */}
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700" style={{ width: '100%', maxWidth: '100%', overflow: 'hidden' }}>
           {loading && (
             <div className="flex items-center justify-center p-8" role="status" aria-label="Loading employees">
               <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
@@ -614,7 +684,7 @@ const EmployeeSearchPage = ({
           )}
 
           {error && (
-            <div className="p-6 text-center">
+            <div className="p-4 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>
@@ -624,11 +694,13 @@ const EmployeeSearchPage = ({
           {!loading && !error && (
             <>
               {/* Results Header */}
-              <div className="px-6 py-6 border-b border-gray-200 dark:border-gray-700" style={{ padding: '24px' }}>
+              <div className="px-4 py-4 border-b border-gray-200 dark:border-gray-700">
                 <div className="flex items-center justify-between">
                   <div className="text-sm text-gray-600 dark:text-gray-400">
                     {(pagination.totalCount > 0 || employees.length > 0)
-                      ? `Showing ${startItem} to ${endItem} of ${actualTotalCount} employees`
+                      ? loadAllResults 
+                        ? `Showing all ${actualTotalCount} employees`
+                        : `Showing ${startItem} to ${endItem} of ${actualTotalCount} employees`
                       : "No employees found"}
                   </div>
                 </div>
@@ -636,60 +708,89 @@ const EmployeeSearchPage = ({
 
               {/* Table */}
               {employees.length > 0 ? (
-                <div className="overflow-x-auto mb-6">
-                  <Table>
-                    <TableHeader>
+                <div className="mb-6" style={{ 
+                  width: '100%', 
+                  maxWidth: '100%', 
+                  overflow: 'auto',
+                  overflowY: 'hidden'
+                }}>
+                  <table className="caption-bottom text-sm" style={{ 
+                    tableLayout: 'fixed', 
+                    width: '1400px'
+                  }}>
+                    <thead className="[&_tr]:border-b">
                       {table.getHeaderGroups().map((headerGroup) => (
-                        <TableRow key={headerGroup.id}>
-                          {headerGroup.headers.map((header) => (
-                            <TableHead key={header.id}>
+                        <tr key={headerGroup.id} className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
+                          {headerGroup.headers.map((header, index) => {
+                            // Define generous column widths to avoid truncation - table will scroll if too wide
+                            const columnWidths = {
+                              0: multiSelect ? '50px' : '250px',   // Select checkbox or Name
+                              1: multiSelect ? '250px' : '180px',  // Name or Site  
+                              2: multiSelect ? '180px' : '150px',  // Site or Role
+                              3: multiSelect ? '150px' : '180px',  // Role or Manager
+                              4: multiSelect ? '180px' : '300px',  // Manager or Email
+                              5: multiSelect ? '300px' : '150px',  // Email or Start Date
+                              6: multiSelect ? '150px' : '120px',  // Start Date or Status
+                              7: multiSelect ? '120px' : '100px',  // Status or Hours/Week
+                              8: multiSelect ? '100px' : '90px',   // Hours/Week or Term Time
+                              9: multiSelect ? '90px' : '90px',    // Term Time or Maternity
+                              10: '90px' // Maternity (only if multiSelect)
+                            };
+                            
+                            return (
+                            <th 
+                              key={header.id} 
+                              className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0"
+                              style={{ width: columnWidths[index] || '120px', minWidth: columnWidths[index] || '120px' }}
+                            >
                               {header.isPlaceholder
                                 ? null
                                 : flexRender(
                                     header.column.columnDef.header,
                                     header.getContext()
                                   )}
-                            </TableHead>
-                          ))}
-                        </TableRow>
+                            </th>
+                            );
+                          })}
+                        </tr>
                       ))}
-                    </TableHeader>
-                    <TableBody>
+                    </thead>
+                    <tbody className="[&_tr:last-child]:border-0">
                       {table.getRowModel().rows?.length ? (
                         table.getRowModel().rows.map((row) => (
-                          <TableRow
+                          <tr
                             key={row.id}
                             data-state={row.getIsSelected() && "selected"}
                             onClick={() => handleEmployeeSelect(row.original)}
-                            className="cursor-pointer"
+                            className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted cursor-pointer"
                           >
                             {row.getVisibleCells().map((cell) => (
-                              <TableCell key={cell.id}>
+                              <td key={cell.id} className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
                                 {flexRender(
                                   cell.column.columnDef.cell,
                                   cell.getContext()
                                 )}
-                              </TableCell>
+                              </td>
                             ))}
-                          </TableRow>
+                          </tr>
                         ))
                       ) : (
-                        <TableRow>
-                          <TableCell
+                        <tr className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
+                          <td
                             colSpan={columns.length}
-                            className="h-24 text-center"
+                            className="h-24 text-center p-4 align-middle [&:has([role=checkbox])]:pr-0"
                           >
                             {debouncedSearchTerm
                               ? "No employees found matching your search."
                               : "Start typing to search for employees."}
-                          </TableCell>
-                        </TableRow>
+                          </td>
+                        </tr>
                       )}
-                    </TableBody>
-                  </Table>
+                    </tbody>
+                  </table>
                 </div>
               ) : (
-                <div className="p-6 text-center text-gray-500 dark:text-gray-400 mb-6">
+                <div className="p-4 text-center text-gray-500 dark:text-gray-400 mb-6">
                   {debouncedSearchTerm
                     ? "No employees found matching your search."
                     : "Start typing to search for employees."}
@@ -697,8 +798,8 @@ const EmployeeSearchPage = ({
               )}
 
               {/* Pagination */}
-              {(pagination.totalCount > 0 || employees.length > 0) && (
-                <div className="px-6 py-8 border-t border-gray-200 dark:border-gray-700" style={{ padding: '32px 24px' }}>
+              {(pagination.totalCount > 0 || employees.length > 0) && !loadAllResults && (
+                <div className="px-4 py-6 border-t border-gray-200 dark:border-gray-700">
                   {/* Pagination Controls */}
                   {(pagination.totalPages > 1 || employees.length > 0) && (
                     <div className="flex justify-center">

package/src/EmployeeSearchPage.test.jsx

@@ -26,6 +26,8 @@ jest.mock('./lib/utils', () => ({
   cn: (...classes) => classes.filter(Boolean).join(' '),
 }));
 
+
+
 // Mock fetch
 global.fetch = jest.fn();
 
@@ -33,6 +35,16 @@ global.fetch = jest.fn();
 process.env.VITE_COMMON_API_FUNCTION_KEY = 'test-key';
 process.env.VITE_COMMON_API_BASE_URL = 'https://test-api.example.com';
 
+// Mock import.meta.env for Vite environment variables
+global.import = {
+  meta: {
+    env: {
+      VITE_COMMON_API_FUNCTION_KEY: 'test-key',
+      VITE_COMMON_API_BASE_URL: 'https://test-api.example.com',
+    },
+  },
+};
+
 // Mock the UI components
 jest.mock('./components/ui/input', () => ({
   Input: ({ value, onChange, placeholder, ...props }) => {
@@ -237,4 +249,6 @@ describe('EmployeeSearchPage', () => {
       expect(screen.getByPlaceholderText('Custom placeholder')).toBeInTheDocument();
     });
   });
+
+
 }); 

package/src/__mocks__/EmployeeSearchPage.jsx

@@ -0,0 +1,87 @@
+// Mock EmployeeSearchPage component for testing
+// This avoids the import.meta.env issue by providing a comprehensive mock
+
+import React from 'react';
+
+const EmployeeSearchPage = (props) => {
+  const {
+    title = "Employee Search",
+    searchPlaceholder = "Search by name, employee ID, or email...",
+    onSelect,
+    multiSelect = false,
+    selectedEmployees = [],
+    sites = [],
+    roles = [],
+    managers = [],
+    activeOnly = true,
+    status = null,
+    startDateFrom = null,
+    startDateTo = null,
+    endDateFrom = null,
+    endDateTo = null,
+    sortBy = "full_name",
+    sortOrder = "asc",
+    applicationContext = "employee-search",
+    bypassPermissions = false,
+    maxSelections = null,
+    showRoleFilter = true,
+    showManagerFilter = true,
+    showTermTimeFilter = true,
+    showMaternityFilter = true,
+    showStartDateFilter = true,
+    showEndDateFilter = false,
+    showWorkingHoursFilter = true,
+    loadAllResults = false,
+  } = props;
+
+  return (
+    <div data-testid="employee-search-page">
+      <h1>{title}</h1>
+      
+      {/* Search Input */}
+      <input
+        type="text"
+        placeholder={searchPlaceholder}
+        data-testid="search-input"
+        aria-label="Search employees"
+      />
+      
+      {/* Employee Search Filters */}
+      <div data-testid="employee-search-filters">
+        <button>Change Status</button>
+        <button>Apply Filters</button>
+        <button>Clear Filters</button>
+      </div>
+      
+      {/* Loading State */}
+      <div role="status" aria-live="polite">
+        Loading employees...
+      </div>
+      
+      {/* Mock Table */}
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Email</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>John Doe</td>
+            <td>john@example.com</td>
+            <td>Active</td>
+          </tr>
+        </tbody>
+      </table>
+      
+      {/* Props Display for debugging */}
+      <div style={{ display: 'none' }}>
+        Props: {JSON.stringify(props)}
+      </div>
+    </div>
+  );
+};
+
+export default EmployeeSearchPage; 

package/src/__mocks__/importMetaEnv.js

@@ -0,0 +1,5 @@
+// Mock for import.meta.env to handle Vite environment variables in Jest tests
+export default {
+  VITE_COMMON_API_FUNCTION_KEY: 'test-key',
+  VITE_COMMON_API_BASE_URL: 'https://test-api.example.com',
+}; 

package/src/components/EmployeeSearchFilters.jsx

@@ -32,8 +32,8 @@ const EmployeeSearchFilters = ({
   showMaternityFilter = true,
   showStartDateFilter = true,
   showEndDateFilter = true,
-  showDbsFilter = true,
   showWorkingHoursFilter = true,
+  showDbsFilter = true,
 }) => {
   // Local state for filters that haven't been applied yet
   const [localFilters, setLocalFilters] = React.useState(filters);
@@ -130,8 +130,8 @@ const EmployeeSearchFilters = ({
   };
 
   return (
-    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 mb-6">
-      <div className="p-6">
+    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 mb-6" style={{ width: '100%', maxWidth: '100%', overflow: 'hidden' }}>
+      <div className="p-4">
         {/* Advanced Filters Toggle */}
         <div className="flex items-center justify-between">
           <button
@@ -321,7 +321,7 @@ const EmployeeSearchFilters = ({
                     type="text"
                     value={localFilters.dbsNumber}
                     onChange={(e) => handleFilterChange("dbsNumber", e.target.value)}
-                    placeholder="Search by DBS number"
+                    placeholder="Enter DBS number"
                     className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
                   />
                 </div>
@@ -345,41 +345,41 @@ const EmployeeSearchFilters = ({
                 </div>
               )}
 
-              {/* Sort By */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Sort By
-                </label>
-                <Select
-                  value={localFilters.sortBy}
-                  onChange={(e) => handleFilterChange("sortBy", e.target.value)}
-                  className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
-                >
-                  <SelectOption value="surname">Surname</SelectOption>
-                  <SelectOption value="first_name">First Name</SelectOption>
-                  <SelectOption value="full_name">Full Name</SelectOption>
-                  <SelectOption value="site_name">Site</SelectOption>
-                  <SelectOption value="role_name">Role</SelectOption>
-                  <SelectOption value="start_date">Start Date</SelectOption>
-                  <SelectOption value="employee_status">Status</SelectOption>
-                  <SelectOption value="created">Created Date</SelectOption>
-                  <SelectOption value="modified">Modified Date</SelectOption>
-                </Select>
-              </div>
+            </div>
 
-              {/* Sort Order */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Sort Order
-                </label>
-                <Select
-                  value={localFilters.sortOrder}
-                  onChange={(e) => handleFilterChange("sortOrder", e.target.value)}
-                  className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
-                >
-                  <SelectOption value="asc">Ascending</SelectOption>
-                  <SelectOption value="desc">Descending</SelectOption>
-                </Select>
+            {/* Sorting Options */}
+            <div className="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
+              <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Sorting Options</h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Sort By
+                  </label>
+                  <Select
+                    value={localFilters.sortBy}
+                    onChange={(e) => handleFilterChange("sortBy", e.target.value)}
+                    className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
+                  >
+                    <SelectOption value="surname">Surname</SelectOption>
+                    <SelectOption value="first_name">First Name</SelectOption>
+                    <SelectOption value="full_name">Full Name</SelectOption>
+                    <SelectOption value="date_of_birth">Date of Birth</SelectOption>
+                    <SelectOption value="site_name">Site Name</SelectOption>
+                  </Select>
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Sort Order
+                  </label>
+                  <Select
+                    value={localFilters.sortOrder}
+                    onChange={(e) => handleFilterChange("sortOrder", e.target.value)}
+                    className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
+                  >
+                    <SelectOption value="asc">Ascending</SelectOption>
+                    <SelectOption value="desc">Descending</SelectOption>
+                  </Select>
+                </div>
               </div>
             </div>
 

package/src/components/EmployeeSearchFilters.test.jsx

@@ -233,7 +233,7 @@ describe('EmployeeSearchFilters', () => {
     it('updates DBS number filter when changed', () => {
       render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
       
-      const dbsInput = screen.getAllByTestId('input')[0];
+      const dbsInput = screen.getByPlaceholderText('Enter DBS number');
       fireEvent.change(dbsInput, { target: { value: 'DBS123456' } });
       
       expect(defaultProps.onFiltersChange).toHaveBeenCalledWith({
@@ -245,7 +245,7 @@ describe('EmployeeSearchFilters', () => {
     it('updates working hours filter when changed', () => {
       render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
       
-      const hoursInput = screen.getAllByTestId('input')[1];
+      const hoursInput = screen.getByPlaceholderText('0');
       fireEvent.change(hoursInput, { target: { value: '30' } });
       
       expect(defaultProps.onFiltersChange).toHaveBeenCalledWith({
@@ -459,7 +459,7 @@ describe('EmployeeSearchFilters', () => {
       render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
       
       const sortBySelect = screen.getAllByTestId('select').find(select => 
-        select.querySelector('option[value="first_name"]')
+        select.querySelector('option[value="surname"]')
       );
       fireEvent.change(sortBySelect, { target: { value: 'first_name' } });
       
@@ -471,7 +471,7 @@ describe('EmployeeSearchFilters', () => {
       render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
       
       const sortOrderSelect = screen.getAllByTestId('select').find(select => 
-        select.querySelector('option[value="desc"]')
+        select.querySelector('option[value="asc"]')
       );
       fireEvent.change(sortOrderSelect, { target: { value: 'desc' } });
       
@@ -541,6 +541,7 @@ describe('EmployeeSearchFilters', () => {
       const statusLabels = screen.getAllByText('Status');
       expect(statusLabels.length).toBeGreaterThan(0);
       expect(screen.getByText('Sort By')).toBeInTheDocument();
+      expect(screen.getByText('Sort Order')).toBeInTheDocument();
     });
   });
 }); 

package/src/components/ui/date-range-picker.jsx

@@ -3,7 +3,7 @@
 // Features cycling behavior: start date -> end date -> start date -> end date...
 // Usage: <DateRangePicker selectedRange={range} onSelect={setRange} />
 
-import { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { format } from 'date-fns'
 import { CalendarIcon } from '@heroicons/react/24/outline'
 import { Popover, PopoverContent, PopoverTrigger } from './popover'