@snapdragonsnursery/react-components 1.19.7 → 1.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.19.7",
+  "version": "1.20.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/ChildSearchModal.jsx

@@ -57,6 +57,7 @@ const ChildSearchModal = ({
   const [advancedFilters, setAdvancedFilters] = useState({
     status: status || (activeOnly ? "active" : "all"),
     selectedSiteId: siteId || "",
+    selectedRoomId: "",
     dobFrom: dobFrom || "",
     dobTo: dobTo || "",
     ageFrom: ageFrom || "",
@@ -64,6 +65,7 @@ const ChildSearchModal = ({
     sortBy: sortBy,
     sortOrder: sortOrder,
   });
+  const [rooms, setRooms] = useState([]);
 
   // State for multi-select mode
   const initialSelectedChildren = useMemo(
@@ -209,6 +211,11 @@ const ChildSearchModal = ({
         params.append("active_only", "true");
       }
 
+      // Add room filter
+      if (advancedFilters.selectedRoomId) {
+        params.append("room_id", advancedFilters.selectedRoomId.toString());
+      }
+
       // Add date of birth filters
       if (advancedFilters.dobFrom) {
         params.append("dob_from", advancedFilters.dobFrom);
@@ -288,6 +295,35 @@ const ChildSearchModal = ({
     }
   }, [debouncedSearchTerm, pagination.page, isOpen, searchChildren]);
 
+  // Fetch rooms for selected site
+  useEffect(() => {
+    const fetchRooms = async () => {
+      if (!advancedFilters.selectedSiteId) return;
+
+      try {
+        // Find the selected site and extract its rooms
+        if (sites && sites.length > 0) {
+          const selectedSite = sites.find(
+            (site) => site.site_id === parseInt(advancedFilters.selectedSiteId, 10)
+          );
+
+          if (selectedSite && selectedSite.rooms) {
+            setRooms(selectedSite.rooms);
+            return;
+          }
+        }
+
+        // If not available from sites, clear rooms
+        setRooms([]);
+      } catch (err) {
+        console.error("Error fetching rooms:", err);
+        setRooms([]);
+      }
+    };
+
+    fetchRooms();
+  }, [advancedFilters.selectedSiteId, sites]);
+
   // Reset selection when modal opens (for multi-select mode)
   useEffect(() => {
     if (isOpen && multiSelect) {
@@ -618,6 +654,7 @@ const ChildSearchModal = ({
                         setAdvancedFilters((prev) => ({
                           ...prev,
                           selectedSiteId: e.target.value,
+                          selectedRoomId: "", // Reset room when site changes
                         }))
                       }
                       className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm dark:bg-gray-600 dark:text-white"
@@ -632,6 +669,32 @@ const ChildSearchModal = ({
                   </div>
                 )}
 
+                {/* Room Filter */}
+                {advancedFilters.selectedSiteId && rooms && rooms.length > 0 && (
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      Room
+                    </label>
+                    <select
+                      value={advancedFilters.selectedRoomId}
+                      onChange={(e) =>
+                        setAdvancedFilters((prev) => ({
+                          ...prev,
+                          selectedRoomId: e.target.value,
+                        }))
+                      }
+                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm dark:bg-gray-600 dark:text-white"
+                    >
+                      <option value="">All Rooms</option>
+                      {rooms.map((room) => (
+                        <option key={room.room_id} value={room.room_id}>
+                          {room.room_name}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                )}
+
                 {/* Date of Birth Range */}
                 <div>
                   <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
@@ -756,6 +819,7 @@ const ChildSearchModal = ({
                     setAdvancedFilters({
                       status: activeOnly ? "active" : "all",
                       selectedSiteId: "",
+                      selectedRoomId: "",
                       dobFrom: "",
                       dobTo: "",
                       ageFrom: "",
@@ -908,6 +972,14 @@ const ChildSearchModal = ({
                               </div>
                               <div className="mt-1 text-sm text-gray-600 dark:text-gray-300">
                                 <span>{child.site_name}</span>
+                                {child.current_room_name && (
+                                  <>
+                                    <span className="mx-2">•</span>
+                                    <span className="font-medium">
+                                      {child.current_room_name}
+                                    </span>
+                                  </>
+                                )}
                                 {child.date_of_birth && (
                                   <>
                                     <span className="mx-2">•</span>

package/src/ChildSearchPage.jsx

@@ -82,6 +82,7 @@ const ChildSearchPage = ({
   const [advancedFilters, setAdvancedFilters] = useState({
     status: status || (activeOnly ? "active" : "all"),
     selectedSiteId: siteId || "",
+    selectedRoomId: "",
     dobFrom: dobFrom || "",
     dobTo: dobTo || "",
     ageFrom: ageFrom || "",
@@ -89,6 +90,7 @@ const ChildSearchPage = ({
     sortBy: sortBy,
     sortOrder: sortOrder,
   });
+  const [rooms, setRooms] = useState([]);
 
   // Table sorting state
   const [sorting, setSorting] = useState([]);
@@ -179,6 +181,15 @@ const ChildSearchPage = ({
         <span>{row.original.site_name}</span>
       ),
     }),
+    // Room column
+    columnHelper.accessor("current_room_name", {
+      header: "Room",
+      cell: ({ row }) => (
+        <span>
+          {row.original.current_room_name || "N/A"}
+        </span>
+      ),
+    }),
     // Date of Birth column - sortable
     columnHelper.accessor("date_of_birth", {
       header: createSortableHeader("date_of_birth", "Date of Birth"),
@@ -343,6 +354,11 @@ const ChildSearchPage = ({
         params.append("active_only", "true");
       }
 
+      // Add room filter
+      if (debouncedAdvancedFilters.selectedRoomId) {
+        params.append("room_id", debouncedAdvancedFilters.selectedRoomId.toString());
+      }
+
       // Add date of birth filters
       if (debouncedAdvancedFilters.dobFrom) {
         params.append("dob_from", debouncedAdvancedFilters.dobFrom);
@@ -468,6 +484,7 @@ const ChildSearchPage = ({
     const clearedFilters = {
       status: activeOnly ? "active" : "all",
       selectedSiteId: "",
+      selectedRoomId: "",
       dobFrom: "",
       dobTo: "",
       ageFrom: "",

package/src/components/ChildSearchFilters.jsx

@@ -26,12 +26,37 @@ const ChildSearchFilters = ({
   // Local state for filters that haven't been applied yet
   const [localFilters, setLocalFilters] = React.useState(filters);
   const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false);
+  const [rooms, setRooms] = React.useState([]);
 
   // Update local filters when props change
   React.useEffect(() => {
     setLocalFilters(filters);
     setHasUnsavedChanges(false);
   }, [filters]);
+
+  // Fetch rooms for selected site
+  React.useEffect(() => {
+    if (!localFilters.selectedSiteId || !sites) {
+      setRooms([]);
+      return;
+    }
+
+    try {
+      // Find the selected site and extract its rooms
+      const selectedSite = sites.find(
+        (site) => site.site_id === parseInt(localFilters.selectedSiteId, 10)
+      );
+
+      if (selectedSite && selectedSite.rooms) {
+        setRooms(selectedSite.rooms);
+      } else {
+        setRooms([]);
+      }
+    } catch (err) {
+      console.error("Error fetching rooms:", err);
+      setRooms([]);
+    }
+  }, [localFilters.selectedSiteId, sites]);
   // Convert existing date strings to DateRangePicker format
   const getDateRange = () => {
     if (localFilters.dobFrom || localFilters.dobTo) {
@@ -146,7 +171,10 @@ const ChildSearchFilters = ({
                   </label>
                   <Select
                     value={localFilters.selectedSiteId}
-                    onChange={(e) => handleFilterChange("selectedSiteId", e.target.value)}
+                    onChange={(e) => {
+                      handleFilterChange("selectedSiteId", e.target.value);
+                      handleFilterChange("selectedRoomId", ""); // Reset room when site changes
+                    }}
                     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>
@@ -159,6 +187,27 @@ const ChildSearchFilters = ({
                 </div>
               )}
 
+              {/* Room Filter */}
+              {localFilters.selectedSiteId && rooms && rooms.length > 0 && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Room
+                  </label>
+                  <Select
+                    value={localFilters.selectedRoomId}
+                    onChange={(e) => handleFilterChange("selectedRoomId", 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 Rooms</SelectOption>
+                    {rooms.map((room) => (
+                      <SelectOption key={room.room_id} value={room.room_id}>
+                        {room.room_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">

package/src/components/EmployeeSelect.jsx

@@ -232,6 +232,7 @@ export const EmployeeSelect = ({
             </div>
           </div>
           <button
+            type="button"
             onClick={handleClear}
             className="ml-2 p-1 hover:bg-background rounded flex-shrink-0"
             aria-label="Clear selection"

package/src/components/ui/date-range-picker.jsx

@@ -37,6 +37,8 @@ export function DateRangePicker({
   // New: allow styling popover content and calendar for layout control
   contentClassName,
   calendarClassName,
+  // New: allow hiding the calendar icon
+  showIcon = true,
   ...props
 }) {
   const [isOpen, setIsOpen] = useState(false);
@@ -180,7 +182,7 @@ export function DateRangePicker({
           disabled={disabled}
           {...props}
         >
-          <CalendarIcon className="mr-2 h-4 w-4" />
+          {showIcon && <CalendarIcon className="mr-2 h-4 w-4 shrink-0" />}
           {internalRange?.from ? (
             internalRange.to ? (
               <>
@@ -291,6 +293,8 @@ export function DatePicker({
   disabled,
   disableFuture = false,
   displayFormat = "PPP",
+  // New: allow hiding the calendar icon
+  showIcon = true,
   ...props
 }) {
   const [isOpen, setIsOpen] = useState(false);
@@ -313,7 +317,7 @@ export function DatePicker({
           disabled={disabled}
           {...props}
         >
-          <CalendarIcon className="mr-2 h-4 w-4" />
+          {showIcon && <CalendarIcon className="mr-2 h-4 w-4 shrink-0" />}
           {selectedDate ? (
             format(selectedDate, displayFormat)
           ) : (