@snapdragonsnursery/react-components 1.3.3 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {

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,13 +26,28 @@ jest.mock('./lib/utils', () => ({
   cn: (...classes) => classes.filter(Boolean).join(' '),
 }));
 
+
+
 // Mock fetch
 global.fetch = jest.fn();
 
-// Mock process.env
+// Mock process.env and import.meta.env
 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
+Object.defineProperty(globalThis, 'import', {
+  value: {
+    meta: {
+      env: {
+        VITE_COMMON_API_FUNCTION_KEY: 'test-key',
+        VITE_COMMON_API_BASE_URL: 'https://test-api.example.com',
+      },
+    },
+  },
+  writable: true,
+});
+
 // Mock the UI components
 jest.mock('./components/ui/input', () => ({
   Input: ({ value, onChange, placeholder, ...props }) => {
@@ -237,4 +252,6 @@ describe('EmployeeSearchPage', () => {
       expect(screen.getByPlaceholderText('Custom placeholder')).toBeInTheDocument();
     });
   });
+
+
 }); 

package/src/components/EmployeeSearchFilters.jsx

@@ -32,7 +32,6 @@ const EmployeeSearchFilters = ({
   showMaternityFilter = true,
   showStartDateFilter = true,
   showEndDateFilter = true,
-  showDbsFilter = true,
   showWorkingHoursFilter = true,
 }) => {
   // Local state for filters that haven't been applied yet
@@ -130,8 +129,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
@@ -311,22 +310,6 @@ const EmployeeSearchFilters = ({
                 </div>
               )}
 
-              {/* DBS Number Filter */}
-              {showDbsFilter && (
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                    DBS Number
-                  </label>
-                  <Input
-                    type="text"
-                    value={localFilters.dbsNumber}
-                    onChange={(e) => handleFilterChange("dbsNumber", e.target.value)}
-                    placeholder="Search by DBS number"
-                    className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
-                  />
-                </div>
-              )}
-
               {/* Working Hours Filter */}
               {showWorkingHoursFilter && (
                 <div>
@@ -345,42 +328,6 @@ 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>
-
-              {/* 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>
-              </div>
             </div>
 
             {/* Apply/Cancel Buttons */}