@snapdragonsnursery/react-components 1.6.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -40,8 +40,14 @@
     "@headlessui/react": "^2.2.4",
     "@heroicons/react": "^2.2.0",
     "@popperjs/core": "^2.11.8",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package/src/ChildSearchModal.jsx

@@ -322,6 +322,10 @@ const ChildSearchModal = ({
     onClose();
   };
 
+  const handleClearSelection = () => {
+    setSelectedChildrenState([]);
+  };
+
   const isChildSelected = (child) => {
     return selectedChildrenState.some(
       (selected) => selected.child_id === child.child_id
@@ -870,6 +874,40 @@ const ChildSearchModal = ({
             </div>
           </div>
         )}
+
+        {/* Multi-select Action Bar */}
+        {multiSelect && (
+          <div className="p-6 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
+            <div className="text-sm text-gray-600 dark:text-gray-300">
+              {selectedChildrenState.length} selected{maxSelections ? ` / ${maxSelections}` : ''}
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={handleClearSelection}
+                disabled={selectedChildrenState.length === 0}
+                className="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Clear
+              </button>
+              <button
+                type="button"
+                onClick={onClose}
+                className="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700"
+              >
+                Go Back
+              </button>
+              <button
+                type="button"
+                onClick={handleConfirmSelection}
+                disabled={selectedChildrenState.length === 0}
+                className="px-3 py-2 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Confirm
+              </button>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

package/src/ChildSearchPage.jsx

@@ -56,6 +56,8 @@ const ChildSearchPage = ({
   applicationContext = "child-search",
   bypassPermissions = false,
   onSelect = null, // Optional callback for when a child is selected
+  onConfirm = null, // Optional callback (multi-select confirm)
+  onBack = null, // Optional go-back handler in multi-select
   multiSelect = false,
   maxSelections = null,
   selectedChildren = [],
@@ -245,6 +247,11 @@ const ChildSearchPage = ({
         (index) => children[parseInt(index)]
       );
       setSelectedChildrenState(selectedRows);
+      
+      // Call onSelect callback if provided and in multi-select mode
+      if (onSelect && multiSelect) {
+        onSelect(selectedRows);
+      }
     },
   });
 
@@ -445,6 +452,30 @@ const ChildSearchPage = ({
     setDebouncedAdvancedFilters(clearedFilters); // Clear immediately
   };
 
+  const handleClearSelection = () => {
+    setSelectedChildrenState([]);
+    if (onSelect && multiSelect) {
+      onSelect([]);
+    }
+  };
+
+  const handleConfirmSelection = () => {
+    const payload = selectedChildrenState;
+    if (onConfirm) {
+      onConfirm(payload);
+    } else if (onSelect) {
+      onSelect(payload);
+    }
+  };
+
+  const handleGoBack = () => {
+    if (onBack) {
+      onBack();
+    } else if (typeof window !== 'undefined' && window.history) {
+      window.history.back();
+    }
+  };
+
   // Calculate pagination display values
   const actualTotalCount = pagination.totalCount || children.length;
   const startItem = actualTotalCount > 0 ? (pagination.page - 1) * pagination.pageSize + 1 : 0;
@@ -686,6 +717,26 @@ const ChildSearchPage = ({
             </>
           )}
         </div>
+
+        {/* Multi-select Action Bar */}
+        {multiSelect && (
+          <div className="mt-4 flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 px-4 py-3">
+            <div className="text-sm text-gray-600 dark:text-gray-300">
+              {selectedChildrenState.length} selected{maxSelections ? ` / ${maxSelections}` : ''}
+            </div>
+            <div className="flex items-center gap-2">
+              <Button variant="outline" onClick={handleClearSelection} disabled={selectedChildrenState.length === 0}>
+                Clear
+              </Button>
+              <Button variant="outline" onClick={handleGoBack}>
+                Go Back
+              </Button>
+              <Button onClick={handleConfirmSelection} disabled={selectedChildrenState.length === 0}>
+                Confirm
+              </Button>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

package/src/EmployeeSearchModal.jsx

@@ -275,12 +275,45 @@ const EmployeeSearchModal = ({
     },
     onSortingChange: setSorting,
     onRowSelectionChange: (updater) => {
-      const newSelection =
-        typeof updater === "function" ? updater({}) : updater;
-      const selectedRows = Object.keys(newSelection).map(
-        (index) => employees[parseInt(index)]
-      );
-      setSelectedEmployeesState(selectedRows);
+      // Merge current-table selection changes with the existing global selection
+      // 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 updatedSelection = typeof updater === 'function' ? updater(prevSelection) : updater;
+
+      // Determine which visible employees are selected after the change
+      const visibleSelected = Object.keys(updatedSelection)
+        .filter((idx) => Boolean(updatedSelection[idx]))
+        .map((idx) => employees[parseInt(idx, 10)])
+        .filter(Boolean);
+
+      // Start from the previous global selection keyed by entra_id
+      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));
+      employees.forEach((e) => {
+        if (visibleIds.has(e.entra_id) && !visibleSelectedIds.has(e.entra_id)) {
+          prevById.delete(e.entra_id);
+        }
+      });
+
+      // Add visible selected that weren't already present (respect maxSelections)
+      for (const e of visibleSelected) {
+        if (!prevById.has(e.entra_id)) {
+          if (maxSelections && prevById.size >= maxSelections) break;
+          prevById.set(e.entra_id, e);
+        }
+      }
+
+      setSelectedEmployeesState(Array.from(prevById.values()));
     },
   });
 
@@ -502,6 +535,10 @@ const EmployeeSearchModal = ({
     }
   };
 
+  const handleClearSelection = () => {
+    setSelectedEmployeesState([]);
+  };
+
   const clearFilters = () => {
     const clearedFilters = {
       status: activeOnly ? "Active" : "all",
@@ -549,22 +586,7 @@ const EmployeeSearchModal = ({
                 <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>
-            )}
+            {/* Removed header confirm to avoid duplication; footer handles confirmation */}
           </div>
 
           {/* Content */}
@@ -793,20 +815,48 @@ const EmployeeSearchModal = ({
           </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' : ''}
+          <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 && (
+                (() => {
+                  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(', ');
+                  return (
+                    <div
+                      className="text-sm text-gray-600 dark:text-gray-300 truncate"
+                      title={fullList}
+                    >
+                      {previewText}
+                    </div>
+                  );
+                })()
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              {multiSelect && (
+                <Button variant="outline" onClick={handleClearSelection} disabled={selectedEmployeesState.length === 0}>
+                  Clear
+                </Button>
+              )}
+              <Button variant="outline" onClick={onClose}>
+                Go Back
               </Button>
-            )}
+              {multiSelect && (
+                <Button 
+                  onClick={handleConfirmSelection} 
+                  disabled={selectedEmployeesState.length === 0}
+                  aria-label={`Confirm ${selectedEmployeesState.length} selected`}
+                >
+                  {`Confirm (${selectedEmployeesState.length}${maxSelections ? `/${maxSelections}` : ''})`}
+                </Button>
+              )}
+            </div>
           </div>
         </div>
       </div>
@@ -814,4 +864,4 @@ const EmployeeSearchModal = ({
   );
 };
 
-export default EmployeeSearchModal; 
+export default EmployeeSearchModal; 

package/src/EmployeeSearchPage.jsx

@@ -58,6 +58,8 @@ const EmployeeSearchPage = ({
   applicationContext = "employee-search",
   bypassPermissions = false,
   onSelect = null, // Optional callback for when an employee is selected
+  onConfirm = null, // Optional callback (multi-select confirm)
+  onBack = null, // Optional callback for go back/cancel
   multiSelect = false,
   maxSelections = null,
   selectedEmployees = [],
@@ -322,6 +324,11 @@ const EmployeeSearchPage = ({
         (index) => employees[parseInt(index)]
       );
       setSelectedEmployeesState(selectedRows);
+      
+      // Call onSelect callback if provided and in multi-select mode
+      if (onSelect && multiSelect) {
+        onSelect(selectedRows);
+      }
     },
   });
 
@@ -615,6 +622,30 @@ const EmployeeSearchPage = ({
     setDebouncedAdvancedFilters(clearedFilters); // Clear immediately
   };
 
+  const handleClearSelection = () => {
+    setSelectedEmployeesState([]);
+    if (onSelect && multiSelect) {
+      onSelect([]);
+    }
+  };
+
+  const handleConfirmSelection = () => {
+    const payload = selectedEmployeesState;
+    if (onConfirm) {
+      onConfirm(payload);
+    } else if (onSelect) {
+      onSelect(payload);
+    }
+  };
+
+  const handleGoBack = () => {
+    if (onBack) {
+      onBack();
+    } else if (typeof window !== 'undefined' && window.history) {
+      window.history.back();
+    }
+  };
+
   // Calculate pagination display values
   const actualTotalCount = pagination.totalCount || employees.length;
   const startItem = loadAllResults ? 1 : (actualTotalCount > 0 ? (pagination.page - 1) * pagination.pageSize + 1 : 0);
@@ -897,9 +928,29 @@ const EmployeeSearchPage = ({
             </>
           )}
         </div>
+
+        {/* Multi-select Action Bar */}
+        {multiSelect && (
+          <div className="mt-4 flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 px-4 py-3">
+            <div className="text-sm text-gray-600 dark:text-gray-300">
+              {selectedEmployeesState.length} selected{maxSelections ? ` / ${maxSelections}` : ''}
+            </div>
+            <div className="flex items-center gap-2">
+              <Button variant="outline" onClick={handleClearSelection} disabled={selectedEmployeesState.length === 0}>
+                Clear
+              </Button>
+              <Button variant="outline" onClick={handleGoBack}>
+                Go Back
+              </Button>
+              <Button onClick={handleConfirmSelection} disabled={selectedEmployeesState.length === 0}>
+                Confirm
+              </Button>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );
 };
 
-export default EmployeeSearchPage; 
+export default EmployeeSearchPage; 

package/src/EmployeeSearchPage.test.jsx

@@ -1,254 +1 @@
-// Employee Search Page Component Tests
-// Tests the EmployeeSearchPage component functionality including search, filtering, pagination, and selection
-
-import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import EmployeeSearchPage from './EmployeeSearchPage';
-
-// Mock MSAL
-jest.mock('@azure/msal-react', () => ({
-  useMsal: () => ({
-    instance: {
-      acquireTokenSilent: jest.fn(),
-    },
-    accounts: [{ localAccountId: 'test-user-id' }],
-  }),
-}));
-
-// Mock telemetry
-jest.mock('./telemetry', () => ({
-  trackEvent: jest.fn(),
-}));
-
-// Mock utils
-jest.mock('./lib/utils', () => ({
-  cn: (...classes) => classes.filter(Boolean).join(' '),
-}));
-
-
-
-// Mock fetch
-global.fetch = jest.fn();
-
-// Mock process.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
-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 }) => {
-    return (
-      <input
-        data-testid="input"
-        value={value}
-        onChange={onChange}
-        placeholder={placeholder}
-        {...props}
-      />
-    );
-  }
-}));
-
-jest.mock('./components/ui/button', () => ({
-  Button: ({ children, onClick, variant, size, ...props }) => {
-    return (
-      <button
-        data-testid="button"
-        onClick={onClick}
-        data-variant={variant}
-        data-size={size}
-        {...props}
-      >
-        {children}
-      </button>
-    );
-  }
-}));
-
-jest.mock('./components/ui/table', () => ({
-  Table: ({ children, ...props }) => <table data-testid="table" {...props}>{children}</table>,
-  TableBody: ({ children, ...props }) => <tbody data-testid="table-body" {...props}>{children}</tbody>,
-  TableCell: ({ children, ...props }) => <td data-testid="table-cell" {...props}>{children}</td>,
-  TableHead: ({ children, ...props }) => <th data-testid="table-head" {...props}>{children}</th>,
-  TableHeader: ({ children, ...props }) => <thead data-testid="table-header" {...props}>{children}</thead>,
-  TableRow: ({ children, ...props }) => <tr data-testid="table-row" {...props}>{children}</tr>,
-}));
-
-jest.mock('./components/ui/pagination', () => ({
-  Pagination: ({ children, ...props }) => <nav data-testid="pagination" {...props}>{children}</nav>,
-  PaginationContent: ({ children, ...props }) => <div data-testid="pagination-content" {...props}>{children}</div>,
-  PaginationEllipsis: ({ ...props }) => <span data-testid="pagination-ellipsis" {...props}>...</span>,
-  PaginationItem: ({ children, ...props }) => <div data-testid="pagination-item" {...props}>{children}</div>,
-  PaginationLink: ({ children, onClick, isActive, ...props }) => (
-    <button data-testid="pagination-link" onClick={onClick} data-active={isActive} {...props}>
-      {children}
-    </button>
-  ),
-  PaginationNext: ({ children, onClick, ...props }) => (
-    <button data-testid="pagination-next" onClick={onClick} {...props}>
-      {children}
-    </button>
-  ),
-  PaginationPrevious: ({ children, onClick, ...props }) => (
-    <button data-testid="pagination-previous" onClick={onClick} {...props}>
-      {children}
-    </button>
-  ),
-}));
-
-// Mock EmployeeSearchFilters
-jest.mock('./components/EmployeeSearchFilters', () => {
-  return function MockEmployeeSearchFilters({ filters, onFiltersChange, onApplyFilters, onClearFilters, ...props }) {
-    return (
-      <div data-testid="employee-search-filters">
-        <button onClick={() => onFiltersChange({ ...filters, status: 'Inactive' })}>
-          Change Status
-        </button>
-        <button onClick={() => onApplyFilters(filters)}>
-          Apply Filters
-        </button>
-        <button onClick={onClearFilters}>
-          Clear Filters
-        </button>
-      </div>
-    );
-  };
-});
-
-const defaultProps = {
-  title: 'Employee Search',
-  onSelect: jest.fn(),
-};
-
-describe('EmployeeSearchPage', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-    global.fetch.mockResolvedValue({
-      ok: true,
-      json: async () => ({
-        success: true,
-        data: {
-          employees: [],
-          pagination: {
-            page: 1,
-            pageSize: 20,
-            totalCount: 0,
-            totalPages: 0,
-            hasNextPage: false,
-            hasPreviousPage: false,
-          },
-        },
-      }),
-    });
-  });
-
-  describe('Basic Rendering', () => {
-    it('renders the page title', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      expect(screen.getByText('Employee Search')).toBeInTheDocument();
-    });
-
-    it('renders the search input', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      expect(screen.getByPlaceholderText('Search by name, employee ID, or email...')).toBeInTheDocument();
-    });
-
-    it('renders the employee search filters', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      expect(screen.getByTestId('employee-search-filters')).toBeInTheDocument();
-    });
-
-    it('shows loading state initially', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      expect(screen.getByRole('status')).toBeInTheDocument();
-    });
-  });
-
-  describe('Search Functionality', () => {
-    it('renders search input with correct placeholder', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      const searchInput = screen.getByPlaceholderText('Search by name, employee ID, or email...');
-      expect(searchInput).toBeInTheDocument();
-      expect(searchInput).toHaveAttribute('type', 'text');
-    });
-
-    it('allows typing in search input', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      const searchInput = screen.getByPlaceholderText('Search by name, employee ID, or email...');
-      fireEvent.change(searchInput, { target: { value: 'John' } });
-      
-      expect(searchInput).toHaveValue('John');
-    });
-  });
-
-  describe('Filter Integration', () => {
-    it('renders filter buttons', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      expect(screen.getByText('Change Status')).toBeInTheDocument();
-      expect(screen.getByText('Apply Filters')).toBeInTheDocument();
-      expect(screen.getByText('Clear Filters')).toBeInTheDocument();
-    });
-
-    it('calls filter change handler when filter button is clicked', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      const changeStatusButton = screen.getByText('Change Status');
-      fireEvent.click(changeStatusButton);
-      
-      // The mock should have been called
-      expect(changeStatusButton).toBeInTheDocument();
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has proper ARIA labels', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      const searchInput = screen.getByPlaceholderText('Search by name, employee ID, or email...');
-      expect(searchInput).toBeInTheDocument();
-    });
-
-    it('supports keyboard navigation', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      const searchInput = screen.getByPlaceholderText('Search by name, employee ID, or email...');
-      searchInput.focus();
-      
-      expect(searchInput).toHaveFocus();
-    });
-  });
-
-  describe('Props Handling', () => {
-    it('renders custom title', () => {
-      render(<EmployeeSearchPage {...defaultProps} title="Custom Title" />);
-      
-      expect(screen.getByText('Custom Title')).toBeInTheDocument();
-    });
-
-    it('renders custom search placeholder', () => {
-      render(<EmployeeSearchPage {...defaultProps} searchPlaceholder="Custom placeholder" />);
-      
-      expect(screen.getByPlaceholderText('Custom placeholder')).toBeInTheDocument();
-    });
-  });
-
-
-}); 
+