@snapdragonsnursery/react-components 1.1.37 → 1.2.0

package/src/components/ChildSearchFilters.jsx

@@ -0,0 +1,237 @@
+// Child Search Filters Component
+// Provides advanced filtering capabilities for child search including status, site, date of birth, age, and sorting options
+// Usage: <ChildSearchFilters filters={filters} onFiltersChange={setFilters} sites={sites} />
+
+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 ChildSearchFilters = ({
+  filters,
+  onFiltersChange,
+  sites = null,
+  activeOnly = true,
+  isAdvancedFiltersOpen,
+  onToggleAdvancedFilters,
+  onClearFilters,
+  onApplyFilters,
+}) => {
+  // 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 getDateRange = () => {
+    if (localFilters.dobFrom || localFilters.dobTo) {
+      return {
+        from: localFilters.dobFrom ? new Date(localFilters.dobFrom) : null,
+        to: localFilters.dobTo ? new Date(localFilters.dobTo) : null,
+      };
+    }
+    return null;
+  };
+
+  const handleDateRangeChange = (range) => {
+    // DateRangePicker now only calls onSelect when both dates are selected or when cleared
+    if (range?.from && range?.to) {
+      // Both dates selected - update local filters
+      setLocalFilters(prev => ({
+        ...prev,
+        dobFrom: range.from.toISOString().split('T')[0],
+        dobTo: range.to.toISOString().split('T')[0],
+      }));
+      setHasUnsavedChanges(true);
+    } else if (!range?.from && !range?.to) {
+      // Range cleared - clear local filters
+      setLocalFilters(prev => ({
+        ...prev,
+        dobFrom: '',
+        dobTo: '',
+      }));
+      setHasUnsavedChanges(true);
+    }
+    // No need to handle single date selection as DateRangePicker handles it internally
+  };
+
+  const handleFilterChange = (key, value) => {
+    setLocalFilters(prev => ({
+      ...prev,
+      [key]: value,
+    }));
+    setHasUnsavedChanges(true);
+  };
+
+  const clearFilters = () => {
+    onClearFilters();
+  };
+
+  const handleApplyFilters = () => {
+    onApplyFilters(localFilters);
+    setHasUnsavedChanges(false);
+  };
+
+  const handleCancelChanges = () => {
+    setLocalFilters(filters);
+    setHasUnsavedChanges(false);
+  };
+
+  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 Children</SelectOption>
+                  <SelectOption value="active">Active Only</SelectOption>
+                  <SelectOption value="inactive">Inactive 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>
+              )}
+
+              {/* Date of Birth Range */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Date of Birth Range
+                </label>
+                <DateRangePicker
+                  selectedRange={getDateRange()}
+                  onSelect={handleDateRangeChange}
+                  placeholder="Select date of birth range"
+                  className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
+                />
+              </div>
+
+              {/* Age Range */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Age From (months)
+                </label>
+                <Input
+                  type="number"
+                  min="0"
+                  value={localFilters.ageFrom}
+                  onChange={(e) => handleFilterChange("ageFrom", 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>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Age To (months)
+                </label>
+                <Input
+                  type="number"
+                  min="0"
+                  value={localFilters.ageTo}
+                  onChange={(e) => handleFilterChange("ageTo", e.target.value)}
+                  placeholder="60"
+                  className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
+                />
+              </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 ChildSearchFilters; 

package/src/components/ChildSearchFilters.test.jsx

@@ -0,0 +1,308 @@
+// ChildSearchFilters Component Tests
+// Tests the filter functionality including status, site, date of birth, age, and sorting options
+
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import ChildSearchFilters from "./ChildSearchFilters";
+
+// Mock the UI components
+jest.mock("./ui/input", () => ({
+  __esModule: true,
+  Input: ({ value, onChange, placeholder, type, min, className, ...props }) => (
+    <input
+      data-testid="input"
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      type={type}
+      min={min}
+      className={className}
+      {...props}
+    />
+  ),
+}));
+
+jest.mock("./ui/select", () => ({
+  __esModule: true,
+  Select: ({ value, onChange, children, className, ...props }) => (
+    <select
+      data-testid="select"
+      value={value}
+      onChange={onChange}
+      className={className}
+      {...props}
+    >
+      {children}
+    </select>
+  ),
+  SelectOption: ({ value, children, ...props }) => (
+    <option value={value} {...props}>
+      {children}
+    </option>
+  ),
+}));
+
+jest.mock("./ui/date-range-picker", () => ({
+  __esModule: true,
+  DateRangePicker: ({ selectedRange, onSelect, placeholder, className, ...props }) => (
+    <div data-testid="date-range-picker" className={className}>
+      <button
+        onClick={() => onSelect && onSelect({ from: new Date('2020-01-01'), to: new Date('2020-12-31') })}
+        {...props}
+      >
+        {selectedRange?.from && selectedRange?.to 
+          ? `${selectedRange.from.toLocaleDateString()} - ${selectedRange.to.toLocaleDateString()}`
+          : placeholder || 'Select date range'
+        }
+      </button>
+    </div>
+  ),
+}));
+
+describe("ChildSearchFilters", () => {
+  const mockFilters = {
+    status: "active",
+    selectedSiteId: "",
+    dobFrom: "",
+    dobTo: "",
+    ageFrom: "",
+    ageTo: "",
+    sortBy: "last_name",
+    sortOrder: "asc",
+  };
+
+  const mockSites = [
+    { site_id: 1, site_name: "Site A" },
+    { site_id: 2, site_name: "Site B" },
+  ];
+
+  const defaultProps = {
+    filters: mockFilters,
+    onFiltersChange: jest.fn(),
+    onApplyFilters: jest.fn(),
+    sites: mockSites,
+    activeOnly: true,
+    isAdvancedFiltersOpen: false,
+    onToggleAdvancedFilters: jest.fn(),
+    onClearFilters: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders the advanced filters toggle button", () => {
+    render(<ChildSearchFilters {...defaultProps} />);
+    
+    expect(screen.getByText("Advanced Filters")).toBeInTheDocument();
+    expect(screen.getByText("Clear Filters")).toBeInTheDocument();
+  });
+
+  it("shows advanced filters when isAdvancedFiltersOpen is true", () => {
+    render(<ChildSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+    
+    expect(screen.getByText("Status")).toBeInTheDocument();
+    expect(screen.getByText("Site")).toBeInTheDocument();
+    expect(screen.getByText("Date of Birth Range")).toBeInTheDocument();
+    expect(screen.getByText("Age From (months)")).toBeInTheDocument();
+    expect(screen.getByText("Age To (months)")).toBeInTheDocument();
+    expect(screen.getByText("Sort By")).toBeInTheDocument();
+    expect(screen.getByText("Sort Order")).toBeInTheDocument();
+  });
+
+  it("hides advanced filters when isAdvancedFiltersOpen is false", () => {
+    render(<ChildSearchFilters {...defaultProps} isAdvancedFiltersOpen={false} />);
+    
+    expect(screen.queryByText("Status")).not.toBeInTheDocument();
+    expect(screen.queryByText("Site")).not.toBeInTheDocument();
+  });
+
+  it("calls onToggleAdvancedFilters when toggle button is clicked", () => {
+    render(<ChildSearchFilters {...defaultProps} />);
+    
+    fireEvent.click(screen.getByText("Advanced Filters"));
+    
+    expect(defaultProps.onToggleAdvancedFilters).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onClearFilters when clear button is clicked", () => {
+    render(<ChildSearchFilters {...defaultProps} />);
+    
+    fireEvent.click(screen.getByText("Clear Filters"));
+    
+    expect(defaultProps.onClearFilters).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders site options when sites are provided", () => {
+    render(<ChildSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+    
+    const siteSelect = screen.getAllByTestId("select")[1]; // Second select is site
+    expect(siteSelect).toBeInTheDocument();
+    
+    // Check that site options are rendered
+    expect(siteSelect).toHaveValue("");
+    expect(siteSelect).toHaveTextContent("All Sites");
+    expect(siteSelect).toHaveTextContent("Site A");
+    expect(siteSelect).toHaveTextContent("Site B");
+  });
+
+  it("does not render site filter when sites are not provided", () => {
+    render(
+      <ChildSearchFilters 
+        {...defaultProps} 
+        sites={null} 
+        isAdvancedFiltersOpen={true} 
+      />
+    );
+    
+    const selects = screen.getAllByTestId("select");
+    expect(selects).toHaveLength(3); // Status, Sort By, Sort Order (no site filter when sites=null)
+  });
+
+  it("shows apply button when filters are changed", () => {
+    render(<ChildSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+    
+    const statusSelect = screen.getAllByTestId("select")[0];
+    fireEvent.change(statusSelect, { target: { value: "inactive" } });
+    
+    expect(screen.getByText("Apply Filters")).toBeInTheDocument();
+    expect(screen.getByText("You have unsaved filter changes")).toBeInTheDocument();
+  });
+
+  it("calls onApplyFilters when apply button is clicked", () => {
+    render(<ChildSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+    
+    const statusSelect = screen.getAllByTestId("select")[0];
+    fireEvent.change(statusSelect, { target: { value: "inactive" } });
+    
+    const applyButton = screen.getByText("Apply Filters");
+    fireEvent.click(applyButton);
+    
+    expect(defaultProps.onApplyFilters).toHaveBeenCalledWith(
+      expect.objectContaining({
+        status: "inactive"
+      })
+    );
+  });
+
+  it("calls onApplyFilters when apply button is clicked with date range", () => {
+    render(<ChildSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+    
+    const dateRangePicker = screen.getByTestId("date-range-picker");
+    const button = dateRangePicker.querySelector("button");
+    fireEvent.click(button);
+    
+    const applyButton = screen.getByText("Apply Filters");
+    fireEvent.click(applyButton);
+    
+    expect(defaultProps.onApplyFilters).toHaveBeenCalledWith(
+      expect.objectContaining({
+        dobFrom: "2020-01-01",
+        dobTo: "2020-12-31"
+      })
+    );
+  });
+
+  it("calls onApplyFilters when apply button is clicked with age filter", () => {
+    render(<ChildSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+    
+    const ageFromInput = screen.getAllByTestId("input")[0];
+    fireEvent.change(ageFromInput, { target: { value: "12" } });
+    
+    const applyButton = screen.getByText("Apply Filters");
+    fireEvent.click(applyButton);
+    
+    expect(defaultProps.onApplyFilters).toHaveBeenCalledWith(
+      expect.objectContaining({
+        ageFrom: "12"
+      })
+    );
+  });
+
+  it("calls onApplyFilters when apply button is clicked with sort filter", () => {
+    render(<ChildSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+    
+    const sortBySelect = screen.getAllByTestId("select")[2];
+    fireEvent.change(sortBySelect, { target: { value: "first_name" } });
+    
+    const applyButton = screen.getByText("Apply Filters");
+    fireEvent.click(applyButton);
+    
+    expect(defaultProps.onApplyFilters).toHaveBeenCalledWith(
+      expect.objectContaining({
+        sortBy: "first_name"
+      })
+    );
+  });
+
+  it("displays correct filter values", () => {
+    const filtersWithValues = {
+      ...mockFilters,
+      status: "inactive",
+      selectedSiteId: "1",
+      dobFrom: "2020-01-01",
+      dobTo: "2020-12-31",
+      ageFrom: "12",
+      ageTo: "60",
+      sortBy: "first_name",
+      sortOrder: "desc",
+    };
+
+    render(
+      <ChildSearchFilters 
+        {...defaultProps} 
+        filters={filtersWithValues}
+        isAdvancedFiltersOpen={true} 
+      />
+    );
+    
+    const statusSelect = screen.getAllByTestId("select")[0];
+    const siteSelect = screen.getAllByTestId("select")[1];
+    const dateRangePicker = screen.getByTestId("date-range-picker");
+    const ageFromInput = screen.getAllByTestId("input")[0];
+    const ageToInput = screen.getAllByTestId("input")[1];
+    const sortBySelect = screen.getAllByTestId("select")[2];
+    const sortOrderSelect = screen.getAllByTestId("select")[3];
+    
+    expect(statusSelect).toHaveValue("inactive");
+    expect(siteSelect).toHaveValue("1");
+    expect(dateRangePicker).toBeInTheDocument();
+    expect(ageFromInput).toHaveValue(12);
+    expect(ageToInput).toHaveValue(60);
+    expect(sortBySelect).toHaveValue("first_name");
+    expect(sortOrderSelect).toHaveValue("desc");
+  });
+
+  it("has correct accessibility attributes", () => {
+    render(<ChildSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+    
+    // Check that all inputs have proper labels
+    expect(screen.getByText("Status")).toBeInTheDocument();
+    expect(screen.getByText("Site")).toBeInTheDocument();
+    expect(screen.getByText("Date of Birth Range")).toBeInTheDocument();
+    expect(screen.getByText("Age From (months)")).toBeInTheDocument();
+    expect(screen.getByText("Age To (months)")).toBeInTheDocument();
+    expect(screen.getByText("Sort By")).toBeInTheDocument();
+    expect(screen.getByText("Sort Order")).toBeInTheDocument();
+  });
+
+  it("applies correct CSS classes for dark mode support", () => {
+    render(<ChildSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+    
+    const inputs = screen.getAllByTestId("input");
+    const selects = screen.getAllByTestId("select");
+    
+    inputs.forEach(input => {
+      expect(input.className).toContain("dark:bg-gray-800");
+      expect(input.className).toContain("dark:border-gray-600");
+      expect(input.className).toContain("dark:text-white");
+    });
+    
+    selects.forEach(select => {
+      expect(select.className).toContain("dark:bg-gray-800");
+      expect(select.className).toContain("dark:border-gray-600");
+      expect(select.className).toContain("dark:text-white");
+    });
+  });
+});