@snapdragonsnursery/react-components 1.1.38 → 1.2.0

package/src/ChildSearchPage.jsx

@@ -13,7 +13,6 @@ import {
 import { trackEvent } from "./telemetry";
 import { Button } from "./components/ui/button";
 import { Input } from "./components/ui/input";
-import { Select, SelectOption } from "./components/ui/select";
 import {
   Table,
   TableBody,
@@ -32,17 +31,13 @@ import {
   PaginationPrevious,
 } from "./components/ui/pagination";
 import {
-  MagnifyingGlassIcon,
-  FunnelIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  UserIcon,
-  MapPinIcon,
-  CalendarIcon,
   CheckCircleIcon,
   XCircleIcon,
+  ChevronUpIcon,
+  ChevronDownIcon,
 } from "@heroicons/react/24/outline";
 import { cn } from "./lib/utils";
+import ChildSearchFilters from "./components/ChildSearchFilters";
 
 const ChildSearchPage = ({
   title = "Child Search",
@@ -90,6 +85,10 @@ const ChildSearchPage = ({
     sortOrder: sortOrder,
   });
 
+  // Table sorting state
+  const [sorting, setSorting] = useState([]);
+  const [debouncedAdvancedFilters, setDebouncedAdvancedFilters] = useState(advancedFilters);
+
   // State for multi-select mode
   const [selectedChildrenState, setSelectedChildrenState] = useState(
     selectedChildren || []
@@ -100,6 +99,35 @@ const ChildSearchPage = ({
   // Column helper for TanStack table
   const columnHelper = createColumnHelper();
 
+  // Helper function to create sortable header
+  const createSortableHeader = (column, label) => {
+    return ({ column: tableColumn }) => {
+      const isSorted = tableColumn.getIsSorted();
+      return (
+        <div
+          className="flex items-center space-x-1 cursor-pointer select-none"
+          onClick={tableColumn.getToggleSortingHandler()}
+        >
+          <span>{label}</span>
+          <div className="flex flex-col">
+            <ChevronUpIcon
+              className={cn(
+                "h-3 w-3 transition-colors",
+                isSorted === "asc" ? "text-blue-500" : "text-gray-400"
+              )}
+            />
+            <ChevronDownIcon
+              className={cn(
+                "h-3 w-3 transition-colors -mt-1",
+                isSorted === "desc" ? "text-blue-500" : "text-gray-400"
+              )}
+            />
+          </div>
+        </div>
+      );
+    };
+  };
+
   // Define table columns
   const columns = [
     // Checkbox column for multi-select
@@ -127,9 +155,9 @@ const ChildSearchPage = ({
           }),
         ]
       : []),
-    // Name column
+    // Name column - sortable
     columnHelper.accessor("full_name", {
-      header: "Name",
+      header: createSortableHeader("full_name", "Name"),
       cell: ({ row }) => (
         <div>
           <div className="font-medium">{row.original.full_name}</div>
@@ -139,16 +167,16 @@ const ChildSearchPage = ({
         </div>
       ),
     }),
-    // Site column
+    // Site column - sortable
     columnHelper.accessor("site_name", {
-      header: "Site",
+      header: createSortableHeader("site_name", "Site"),
       cell: ({ row }) => (
         <span>{row.original.site_name}</span>
       ),
     }),
-    // Date of Birth column
+    // Date of Birth column - sortable
     columnHelper.accessor("date_of_birth", {
-      header: "Date of Birth",
+      header: createSortableHeader("date_of_birth", "Date of Birth"),
       cell: ({ row }) => (
         <span>
           {row.original.date_of_birth
@@ -157,9 +185,9 @@ const ChildSearchPage = ({
         </span>
       ),
     }),
-    // Age column
+    // Age column - sortable (using age_years for sorting)
     columnHelper.accessor("age_years", {
-      header: "Age",
+      header: createSortableHeader("age_years", "Age"),
       cell: ({ row }) => {
         const { age_years, age_months } = row.original;
         
@@ -175,27 +203,20 @@ const ChildSearchPage = ({
         return <span>{ageText}</span>;
       },
     }),
-    // Status column
+    // Status column - sortable
     columnHelper.accessor("is_active", {
-      header: "Status",
+      header: createSortableHeader("is_active", "Status"),
       cell: ({ row }) => (
-        <div className="flex items-center space-x-2">
-          {row.original.is_active ? (
-            <CheckCircleIcon className="h-4 w-4 text-green-500" />
-          ) : (
-            <XCircleIcon className="h-4 w-4 text-red-500" />
+        <span
+          className={cn(
+            "px-2 py-1 text-xs rounded-full",
+            row.original.is_active
+              ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+              : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
           )}
-          <span
-            className={cn(
-              "px-2 py-1 text-xs rounded-full",
-              row.original.is_active
-                ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
-                : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
-            )}
-          >
-            {row.original.is_active ? "Active" : "Inactive"}
-          </span>
-        </div>
+        >
+          {row.original.is_active ? "Active" : "Inactive"}
+        </span>
       ),
     }),
   ];
@@ -207,6 +228,7 @@ const ChildSearchPage = ({
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     state: {
+      sorting,
       rowSelection: selectedChildrenState.reduce((acc, selectedChild) => {
         const rowIndex = children.findIndex(child => child.child_id === selectedChild.child_id);
         if (rowIndex !== -1) {
@@ -215,6 +237,7 @@ const ChildSearchPage = ({
         return acc;
       }, {}),
     },
+    onSortingChange: setSorting,
     onRowSelectionChange: (updater) => {
       const newSelection =
         typeof updater === "function" ? updater({}) : updater;
@@ -235,6 +258,16 @@ const ChildSearchPage = ({
     return () => clearTimeout(timer);
   }, [searchTerm]);
 
+  // Debounce advanced filters
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedAdvancedFilters(advancedFilters);
+      setPagination((prev) => ({ ...prev, page: 1 }));
+    }, 500); // Slightly longer delay for filters
+
+    return () => clearTimeout(timer);
+  }, [advancedFilters]);
+
   // Search children
   const searchChildren = useCallback(async () => {
     if (!instance || !accounts[0]) {
@@ -260,38 +293,38 @@ const ChildSearchPage = ({
       // Handle site filtering
       if (siteIds && siteIds.length > 0) {
         params.append("site_ids", siteIds.join(","));
-      } else if (advancedFilters.selectedSiteId) {
-        params.append("site_id", advancedFilters.selectedSiteId.toString());
+      } else if (debouncedAdvancedFilters.selectedSiteId) {
+        params.append("site_id", debouncedAdvancedFilters.selectedSiteId.toString());
       } else if (siteId) {
         params.append("site_id", siteId.toString());
       }
 
       // Handle status filtering
-      if (advancedFilters.status && advancedFilters.status !== "all") {
-        params.append("status", advancedFilters.status);
+      if (debouncedAdvancedFilters.status && debouncedAdvancedFilters.status !== "all") {
+        params.append("status", debouncedAdvancedFilters.status);
       } else if (activeOnly) {
         params.append("active_only", "true");
       }
 
       // Add date of birth filters
-      if (advancedFilters.dobFrom) {
-        params.append("dob_from", advancedFilters.dobFrom);
+      if (debouncedAdvancedFilters.dobFrom) {
+        params.append("dob_from", debouncedAdvancedFilters.dobFrom);
       }
-      if (advancedFilters.dobTo) {
-        params.append("dob_to", advancedFilters.dobTo);
+      if (debouncedAdvancedFilters.dobTo) {
+        params.append("dob_to", debouncedAdvancedFilters.dobTo);
       }
 
       // Add age filters
-      if (advancedFilters.ageFrom) {
-        params.append("age_from", advancedFilters.ageFrom);
+      if (debouncedAdvancedFilters.ageFrom) {
+        params.append("age_from", debouncedAdvancedFilters.ageFrom);
       }
-      if (advancedFilters.ageTo) {
-        params.append("age_to", advancedFilters.ageTo);
+      if (debouncedAdvancedFilters.ageTo) {
+        params.append("age_to", debouncedAdvancedFilters.ageTo);
       }
 
       // Add sorting
-      params.append("sort_by", advancedFilters.sortBy);
-      params.append("sort_order", advancedFilters.sortOrder);
+      params.append("sort_by", debouncedAdvancedFilters.sortBy);
+      params.append("sort_order", debouncedAdvancedFilters.sortOrder);
 
       const apiResponse = await fetch(
         `${
@@ -349,7 +382,7 @@ const ChildSearchPage = ({
     siteId,
     siteIds,
     activeOnly,
-    advancedFilters,
+    debouncedAdvancedFilters,
     applicationContext,
     bypassPermissions,
   ]);
@@ -398,7 +431,7 @@ const ChildSearchPage = ({
   };
 
   const clearFilters = () => {
-    setAdvancedFilters({
+    const clearedFilters = {
       status: activeOnly ? "active" : "all",
       selectedSiteId: "",
       dobFrom: "",
@@ -407,7 +440,9 @@ const ChildSearchPage = ({
       ageTo: "",
       sortBy: "last_name",
       sortOrder: "asc",
-    });
+    };
+    setAdvancedFilters(clearedFilters);
+    setDebouncedAdvancedFilters(clearedFilters); // Clear immediately
   };
 
   // Calculate pagination display values
@@ -433,11 +468,10 @@ const ChildSearchPage = ({
           )}
         </div>
 
-        {/* Search and Filters */}
+        {/* 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">
-            {/* Search Input */}
-            <div className="relative mb-4">
+            <div className="relative">
               <Input
                 type="text"
                 placeholder={searchPlaceholder}
@@ -446,211 +480,21 @@ const ChildSearchPage = ({
                 className="pl-4"
               />
             </div>
-
-            {/* Advanced Filters Toggle */}
-            <div className="flex items-center justify-between">
-              <button
-                onClick={() => setIsAdvancedFiltersOpen(!isAdvancedFiltersOpen)}
-                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={advancedFilters.status}
-                      onChange={(e) =>
-                        setAdvancedFilters((prev) => ({
-                          ...prev,
-                          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={advancedFilters.selectedSiteId}
-                        onChange={(e) =>
-                          setAdvancedFilters((prev) => ({
-                            ...prev,
-                            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 From
-                    </label>
-                    <Input
-                      type="date"
-                      value={advancedFilters.dobFrom}
-                      onChange={(e) =>
-                        setAdvancedFilters((prev) => ({
-                          ...prev,
-                          dobFrom: e.target.value,
-                        }))
-                      }
-                      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">
-                      Date of Birth To
-                    </label>
-                    <Input
-                      type="date"
-                      value={advancedFilters.dobTo}
-                      onChange={(e) =>
-                        setAdvancedFilters((prev) => ({
-                          ...prev,
-                          dobTo: e.target.value,
-                        }))
-                      }
-                      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={advancedFilters.ageFrom}
-                      onChange={(e) =>
-                        setAdvancedFilters((prev) => ({
-                          ...prev,
-                          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={advancedFilters.ageTo}
-                      onChange={(e) =>
-                        setAdvancedFilters((prev) => ({
-                          ...prev,
-                          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>
-
-                  {/* Sort Options */}
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                      Sort By
-                    </label>
-                    <Select
-                      value={advancedFilters.sortBy}
-                      onChange={(e) =>
-                        setAdvancedFilters((prev) => ({
-                          ...prev,
-                          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="last_name">Last Name</SelectOption>
-                      <SelectOption value="first_name">First Name</SelectOption>
-                      <SelectOption value="full_name">Full Name</SelectOption>
-                      <SelectOption value="date_of_birth">
-                        Date of Birth
-                      </SelectOption>
-                      <SelectOption value="site_name">Site Name</SelectOption>
-                    </Select>
-                  </div>
-
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                      Sort Order
-                    </label>
-                    <Select
-                      value={advancedFilters.sortOrder}
-                      onChange={(e) =>
-                        setAdvancedFilters((prev) => ({
-                          ...prev,
-                          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>
-              </div>
-            )}
           </div>
         </div>
 
+        {/* Advanced Filters */}
+        <ChildSearchFilters
+          filters={advancedFilters}
+          onFiltersChange={setAdvancedFilters}
+          onApplyFilters={setAdvancedFilters}
+          sites={sites}
+          activeOnly={activeOnly}
+          isAdvancedFiltersOpen={isAdvancedFiltersOpen}
+          onToggleAdvancedFilters={() => setIsAdvancedFiltersOpen(!isAdvancedFiltersOpen)}
+          onClearFilters={clearFilters}
+        />
+
         {/* Results */}
         <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
           {loading && (

package/src/DateRangePickerDebug.jsx

@@ -0,0 +1 @@
+ 

package/src/DateRangePickerDemo.jsx

@@ -0,0 +1,58 @@
+// Demo component showing how to use DateRangePicker and DatePicker components
+// Demonstrates both single date and date range selection functionality
+
+import React, { useState } from 'react'
+import { DateRangePicker, DatePicker } from './components/ui/date-range-picker'
+
+export default function DateRangePickerDemo() {
+  const [selectedRange, setSelectedRange] = useState(null)
+  const [selectedDate, setSelectedDate] = useState(null)
+
+  return (
+    <div className="p-6 space-y-6 max-w-md mx-auto">
+      <h2 className="text-2xl font-bold mb-4">Date Picker Components Demo</h2>
+      
+      <div className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold mb-2">Date Range Picker</h3>
+          <DateRangePicker
+            selectedRange={selectedRange}
+            onSelect={setSelectedRange}
+            placeholder="Select a date range"
+          />
+          {selectedRange?.from && selectedRange?.to && (
+            <p className="text-sm text-gray-600 mt-2">
+              Selected: {selectedRange.from.toLocaleDateString()} - {selectedRange.to.toLocaleDateString()}
+            </p>
+          )}
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-2">Single Date Picker</h3>
+          <DatePicker
+            selectedDate={selectedDate}
+            onSelect={setSelectedDate}
+            placeholder="Select a date"
+          />
+          {selectedDate && (
+            <p className="text-sm text-gray-600 mt-2">
+              Selected: {selectedDate.toLocaleDateString()}
+            </p>
+          )}
+        </div>
+
+        <div className="pt-4">
+          <button
+            onClick={() => {
+              setSelectedRange(null)
+              setSelectedDate(null)
+            }}
+            className="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded"
+          >
+            Clear All
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+} 

package/src/DateRangePickerTest.jsx

@@ -0,0 +1,71 @@
+// Test component to verify DateRangePicker behavior
+// This can be used to test if the date range picker stays open when selecting first date
+
+import React, { useState } from 'react'
+import { DateRangePicker } from './components/ui/date-range-picker'
+
+export default function DateRangePickerTest() {
+  const [selectedRange, setSelectedRange] = useState(null)
+  const [filters, setFilters] = useState({
+    dobFrom: '',
+    dobTo: '',
+  })
+
+  const handleDateRangeChange = (range) => {
+    console.log('DateRangePickerTest handleDateRangeChange called with:', range)
+    
+    // DateRangePicker now only calls onSelect when both dates are selected or when cleared
+    if (range?.from && range?.to) {
+      console.log('Both dates selected - updating filters')
+      setFilters({
+        dobFrom: range.from.toISOString().split('T')[0],
+        dobTo: range.to.toISOString().split('T')[0],
+      })
+    } else if (!range?.from && !range?.to) {
+      console.log('Range cleared - clearing filters')
+      setFilters({
+        dobFrom: '',
+        dobTo: '',
+      })
+    }
+    // No need to handle single date selection as DateRangePicker handles it internally
+    
+    setSelectedRange(range)
+  }
+
+  return (
+    <div className="p-6 space-y-4 max-w-md mx-auto">
+      <h2 className="text-2xl font-bold">Date Range Picker Test</h2>
+      
+      <div className="space-y-2">
+        <label className="block text-sm font-medium">Date of Birth Range</label>
+        <DateRangePicker
+          selectedRange={selectedRange}
+          onSelect={handleDateRangeChange}
+          placeholder="Select date of birth range"
+        />
+      </div>
+
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold">Current State:</h3>
+        <div className="text-sm space-y-1">
+          <div>Selected Range: {selectedRange ? JSON.stringify(selectedRange, null, 2) : 'null'}</div>
+          <div>Filters dobFrom: {filters.dobFrom || 'empty'}</div>
+          <div>Filters dobTo: {filters.dobTo || 'empty'}</div>
+        </div>
+      </div>
+
+      <div className="pt-4">
+        <button
+          onClick={() => {
+            setSelectedRange(null)
+            setFilters({ dobFrom: '', dobTo: '' })
+          }}
+          className="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded"
+        >
+          Clear All
+        </button>
+      </div>
+    </div>
+  )
+}