@snapdragonsnursery/react-components 1.3.0 → 1.3.1

package/src/EmployeeSearchPage.test.jsx

@@ -0,0 +1,240 @@
+// 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 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();
+    });
+  });
+}); 

package/src/components/EmployeeSearchFilters.jsx

@@ -0,0 +1,418 @@
+// Employee Search Filters Component
+// Provides advanced filtering capabilities for employee search including status, site, start date, role, manager, and other employee-specific filters
+// Usage: <EmployeeSearchFilters filters={filters} onFiltersChange={setFilters} sites={sites} roles={roles} managers={managers} />
+
+import React from "react";
+import { Input } from "./ui/input";
+import { Select, SelectOption } from "./ui/select";
+import { DateRangePicker } from "./ui/date-range-picker";
+import { Button } from "./ui/button";
+import {
+  FunnelIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from "@heroicons/react/24/outline";
+
+const EmployeeSearchFilters = ({
+  filters,
+  onFiltersChange,
+  sites = null,
+  roles = null,
+  managers = null,
+  activeOnly = true,
+  isAdvancedFiltersOpen,
+  onToggleAdvancedFilters,
+  onClearFilters,
+  onApplyFilters,
+  onCancelChanges,
+  // Configurable filter visibility
+  showRoleFilter = true,
+  showManagerFilter = true,
+  showTermTimeFilter = true,
+  showMaternityFilter = true,
+  showStartDateFilter = true,
+  showEndDateFilter = true,
+  showDbsFilter = true,
+  showWorkingHoursFilter = true,
+}) => {
+  // Local state for filters that haven't been applied yet
+  const [localFilters, setLocalFilters] = React.useState(filters);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false);
+
+  // Update local filters when props change
+  React.useEffect(() => {
+    setLocalFilters(filters);
+    setHasUnsavedChanges(false);
+  }, [filters]);
+
+  // Convert existing date strings to DateRangePicker format
+  const getStartDateRange = () => {
+    if (localFilters.startDateFrom || localFilters.startDateTo) {
+      return {
+        from: localFilters.startDateFrom ? new Date(localFilters.startDateFrom) : null,
+        to: localFilters.startDateTo ? new Date(localFilters.startDateTo) : null,
+      };
+    }
+    return null;
+  };
+
+  const getEndDateRange = () => {
+    if (localFilters.endDateFrom || localFilters.endDateTo) {
+      return {
+        from: localFilters.endDateFrom ? new Date(localFilters.endDateFrom) : null,
+        to: localFilters.endDateTo ? new Date(localFilters.endDateTo) : null,
+      };
+    }
+    return null;
+  };
+
+  const handleStartDateRangeChange = (range) => {
+    if (range?.from && range?.to) {
+      setLocalFilters(prev => ({
+        ...prev,
+        startDateFrom: range.from.toISOString().split('T')[0],
+        startDateTo: range.to.toISOString().split('T')[0],
+      }));
+      setHasUnsavedChanges(true);
+    } else if (!range?.from && !range?.to) {
+      setLocalFilters(prev => ({
+        ...prev,
+        startDateFrom: '',
+        startDateTo: '',
+      }));
+      setHasUnsavedChanges(true);
+    }
+  };
+
+  const handleEndDateRangeChange = (range) => {
+    if (range?.from && range?.to) {
+      setLocalFilters(prev => ({
+        ...prev,
+        endDateFrom: range.from.toISOString().split('T')[0],
+        endDateTo: range.to.toISOString().split('T')[0],
+      }));
+      setHasUnsavedChanges(true);
+    } else if (!range?.from && !range?.to) {
+      setLocalFilters(prev => ({
+        ...prev,
+        endDateFrom: '',
+        endDateTo: '',
+      }));
+      setHasUnsavedChanges(true);
+    }
+  };
+
+  const handleFilterChange = (key, value) => {
+    const updatedFilters = {
+      ...localFilters,
+      [key]: value,
+    };
+    setLocalFilters(updatedFilters);
+    setHasUnsavedChanges(true);
+    onFiltersChange(updatedFilters);
+  };
+
+  const clearFilters = () => {
+    onClearFilters();
+  };
+
+  const handleApplyFilters = () => {
+    onApplyFilters(localFilters);
+    setHasUnsavedChanges(false);
+  };
+
+  const handleCancelChanges = () => {
+    setLocalFilters(filters);
+    setHasUnsavedChanges(false);
+    if (onCancelChanges) {
+      onCancelChanges();
+    }
+  };
+
+  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">
+        {/* Advanced Filters Toggle */}
+        <div className="flex items-center justify-between">
+          <button
+            onClick={onToggleAdvancedFilters}
+            className="flex items-center space-x-2 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
+          >
+            <FunnelIcon className="h-4 w-4" />
+            <span>Advanced Filters</span>
+            {isAdvancedFiltersOpen ? (
+              <ChevronUpIcon className="h-4 w-4" />
+            ) : (
+              <ChevronDownIcon className="h-4 w-4" />
+            )}
+          </button>
+          <button
+            onClick={clearFilters}
+            className="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"
+          >
+            Clear Filters
+          </button>
+        </div>
+
+        {/* Advanced Filters */}
+        {isAdvancedFiltersOpen && (
+          <div 
+            className="mt-4 p-4 rounded-lg" 
+            style={{ 
+              backgroundColor: 'hsl(var(--card))',
+              border: '1px solid hsl(var(--border))'
+            }}
+          >
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {/* Status Filter */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Status
+                </label>
+                <Select
+                  value={localFilters.status}
+                  onChange={(e) => handleFilterChange("status", 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="all">All Employees</SelectOption>
+                  <SelectOption value="Active">Active Only</SelectOption>
+                  <SelectOption value="Inactive">Inactive Only</SelectOption>
+                  <SelectOption value="On Leave">On Leave Only</SelectOption>
+                  <SelectOption value="Terminated">Terminated Only</SelectOption>
+                </Select>
+              </div>
+
+              {/* Site Filter */}
+              {sites && sites.length > 0 && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Site
+                  </label>
+                  <Select
+                    value={localFilters.selectedSiteId}
+                    onChange={(e) => handleFilterChange("selectedSiteId", 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="">All Sites</SelectOption>
+                    {sites.map((site) => (
+                      <SelectOption key={site.site_id} value={site.site_id}>
+                        {site.site_name}
+                      </SelectOption>
+                    ))}
+                  </Select>
+                </div>
+              )}
+
+              {/* Role Filter */}
+              {showRoleFilter && roles && roles.length > 0 && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Role
+                  </label>
+                  <Select
+                    value={localFilters.roleId}
+                    onChange={(e) => handleFilterChange("roleId", 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="">All Roles</SelectOption>
+                    {roles.map((role) => (
+                      <SelectOption key={role.role_id} value={role.role_id}>
+                        {role.role_name}
+                      </SelectOption>
+                    ))}
+                  </Select>
+                </div>
+              )}
+
+              {/* Manager Filter */}
+              {showManagerFilter && managers && managers.length > 0 && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Manager
+                  </label>
+                  <Select
+                    value={localFilters.managerId}
+                    onChange={(e) => handleFilterChange("managerId", 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="">All Managers</SelectOption>
+                    {managers.map((manager) => (
+                      <SelectOption key={manager.entra_id} value={manager.entra_id}>
+                        {manager.full_name}
+                      </SelectOption>
+                    ))}
+                  </Select>
+                </div>
+              )}
+
+              {/* Start Date Range */}
+              {showStartDateFilter && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Start Date Range
+                  </label>
+                  <DateRangePicker
+                    selectedRange={getStartDateRange()}
+                    onSelect={handleStartDateRangeChange}
+                    placeholder="Select start date range"
+                    className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
+                  />
+                </div>
+              )}
+
+              {/* End Date Range */}
+              {showEndDateFilter && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    End Date Range
+                  </label>
+                  <DateRangePicker
+                    selectedRange={getEndDateRange()}
+                    onSelect={handleEndDateRangeChange}
+                    placeholder="Select end date range"
+                    className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
+                  />
+                </div>
+              )}
+
+              {/* Term Time Only Filter */}
+              {showTermTimeFilter && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Term Time Only
+                  </label>
+                  <Select
+                    value={localFilters.termTimeOnly}
+                    onChange={(e) => handleFilterChange("termTimeOnly", 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="">All</SelectOption>
+                    <SelectOption value="true">Term Time Only</SelectOption>
+                    <SelectOption value="false">Not Term Time Only</SelectOption>
+                  </Select>
+                </div>
+              )}
+
+              {/* Maternity Leave Filter */}
+              {showMaternityFilter && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Maternity Leave
+                  </label>
+                  <Select
+                    value={localFilters.onMaternityLeave}
+                    onChange={(e) => handleFilterChange("onMaternityLeave", 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="">All</SelectOption>
+                    <SelectOption value="true">On Maternity Leave</SelectOption>
+                    <SelectOption value="false">Not On Maternity Leave</SelectOption>
+                  </Select>
+                </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>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Min Hours Per Week
+                  </label>
+                  <Input
+                    type="number"
+                    min="0"
+                    max="168"
+                    value={localFilters.minHoursPerWeek}
+                    onChange={(e) => handleFilterChange("minHoursPerWeek", e.target.value)}
+                    placeholder="0"
+                    className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
+                  />
+                </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 */}
+            {hasUnsavedChanges && (
+              <div className="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-gray-600 dark:text-gray-400">
+                    You have unsaved filter changes
+                  </span>
+                  <div className="flex items-center space-x-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={handleCancelChanges}
+                    >
+                      Cancel
+                    </Button>
+                    <Button
+                      size="sm"
+                      onClick={handleApplyFilters}
+                    >
+                      Apply Filters
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default EmployeeSearchFilters;