@snapdragonsnursery/react-components 1.2.0 → 1.3.1

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;