@snapdragonsnursery/react-components 1.20.0 → 1.21.0

package/README.md

@@ -42,6 +42,58 @@ function MyComponent() {
 }
 ```
 
+### ChildSearchModal with Room Filter
+
+The component supports room filtering in two ways:
+
+**Option 1: Rooms from `sites` prop** (rooms included on site objects)
+```jsx
+const sites = [
+  {
+    site_id: 1,
+    site_name: 'Main Office',
+    rooms: [
+      { room_id: 10, room_name: 'Toddlers' },
+      { room_id: 11, room_name: 'Pre-School' }
+    ]
+  }
+];
+
+<ChildSearchModal
+  isOpen={isModalOpen}
+  onClose={() => setIsModalOpen(false)}
+  onSelect={handleSelect}
+  sites={sites}
+  showAdvancedFilters={true}
+/>
+```
+
+**Option 2: Rooms from `availableRooms` prop** (recommended when rooms come from separate data)
+```jsx
+const availableRooms = [
+  { room_id: 10, room_name: 'Toddlers', site_id: 1 },
+  { room_id: 11, room_name: 'Pre-School', site_id: 1 },
+  { room_id: 20, room_name: 'Infants', site_id: 2 }
+];
+
+<ChildSearchModal
+  isOpen={isModalOpen}
+  onClose={() => setIsModalOpen(false)}
+  onSelect={handleSelect}
+  sites={sites}  // Just need site IDs/names for site filter
+  availableRooms={availableRooms}
+  showAdvancedFilters={true}
+  showRoomFilter={true}
+/>
+```
+
+The room filter will automatically appear when:
+- A site is selected in advanced filters
+- Room data is available (from either `sites[].rooms` or `availableRooms`)
+- `showRoomFilter` is `true` (default)
+
+You can disable the room filter with `showRoomFilter={false}` if needed.
+
 ### EmployeeSelect Example
 
 ```jsx

package/package.json

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

package/src/ChildSearchModal.jsx

@@ -8,6 +8,15 @@ import React, {
 import { useMsal } from "@azure/msal-react";
 import { trackEvent } from "./telemetry";
 
+/**
+ * ChildSearchModal - Advanced child search and selection component
+ *
+ * Room data can be provided in two ways:
+ * 1. Via `sites` prop with `rooms` array on each site object: { site_id, site_name, rooms: [{ room_id, room_name }] }
+ * 2. Via `availableRooms` prop directly: [{ room_id, room_name, site_id }]
+ *
+ * The component prioritises `availableRooms` if provided, otherwise extracts from `sites[].rooms`.
+ */
 const ChildSearchModal = ({
   isOpen,
   onClose,
@@ -29,6 +38,8 @@ const ChildSearchModal = ({
   className = "",
   showAdvancedFilters = false, // Whether to show advanced filter options
   showSiteFilter = true, // Whether to show site filter dropdown
+  showRoomFilter = true, // Whether to show room filter (only displays when rooms are available)
+  availableRooms = null, // Array of room objects { room_id, room_name, site_id } to populate the room filter
   multiSelect = false, // Enable multiple child selection
   maxSelections = null, // Maximum number of children that can be selected (null = unlimited)
   selectedChildren, // Array of already selected children (for multi-select mode)
@@ -298,22 +309,44 @@ const ChildSearchModal = ({
   // Fetch rooms for selected site
   useEffect(() => {
     const fetchRooms = async () => {
-      if (!advancedFilters.selectedSiteId) return;
+      if (!advancedFilters.selectedSiteId) {
+        setRooms([]);
+        return;
+      }
 
       try {
-        // Find the selected site and extract its rooms
+        const selectedSiteId = parseInt(advancedFilters.selectedSiteId, 10);
+
+        // Priority 1: Use availableRooms prop if provided (filtered by selected site, active, and childcare)
+        if (availableRooms && availableRooms.length > 0) {
+          const filteredRooms = availableRooms.filter(
+            (room) =>
+              (!room.site_id || room.site_id === selectedSiteId) &&
+              room.is_active === true &&
+              room.childcare === true
+          );
+          setRooms(filteredRooms);
+          return;
+        }
+
+        // Priority 2: Extract rooms from sites prop (filtered by active and childcare)
         if (sites && sites.length > 0) {
           const selectedSite = sites.find(
-            (site) => site.site_id === parseInt(advancedFilters.selectedSiteId, 10)
+            (site) => site.site_id === selectedSiteId
           );
 
           if (selectedSite && selectedSite.rooms) {
-            setRooms(selectedSite.rooms);
+            const filteredRooms = selectedSite.rooms.filter(
+              (room) =>
+                room.is_active === true &&
+                room.childcare === true
+            );
+            setRooms(filteredRooms);
             return;
           }
         }
 
-        // If not available from sites, clear rooms
+        // No rooms available
         setRooms([]);
       } catch (err) {
         console.error("Error fetching rooms:", err);
@@ -322,7 +355,7 @@ const ChildSearchModal = ({
     };
 
     fetchRooms();
-  }, [advancedFilters.selectedSiteId, sites]);
+  }, [advancedFilters.selectedSiteId, sites, availableRooms]);
 
   // Reset selection when modal opens (for multi-select mode)
   useEffect(() => {
@@ -670,7 +703,7 @@ const ChildSearchModal = ({
                 )}
 
                 {/* Room Filter */}
-                {advancedFilters.selectedSiteId && rooms && rooms.length > 0 && (
+                {showRoomFilter && advancedFilters.selectedSiteId && rooms && rooms.length > 0 && (
                   <div>
                     <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                       Room

package/src/components/EmployeeSelect.jsx

@@ -44,6 +44,7 @@ import React from "react";
 import { Users, Search, X } from "lucide-react";
 import { cn } from "../lib/utils";
 
+
 export const EmployeeSelect = ({
   value,
   onChange,
@@ -116,6 +117,32 @@ export const EmployeeSelect = ({
     return `hsl(${hue}, 70%, 50%)`;
   };
 
+  // Helper component for employee item avatar with error handling
+  // Accepts blob URLs (from Graph API) or direct image URLs
+  const EmployeeAvatar = ({ avatarUrl, fullName, size = "h-8 w-8" }) => {
+    const [imageError, setImageError] = React.useState(false);
+    
+    if (imageError || !avatarUrl) {
+      return (
+        <div
+          className={`flex ${size} items-center justify-center rounded-full text-xs font-medium text-white flex-shrink-0`}
+          style={{ backgroundColor: getAvatarColor(fullName) }}
+        >
+          {getInitials(fullName)}
+        </div>
+      );
+    }
+
+    return (
+      <img
+        src={avatarUrl}
+        alt={fullName}
+        className={`${size} rounded-full object-cover flex-shrink-0`}
+        onError={() => setImageError(true)}
+      />
+    );
+  };
+
   const processedItems = React.useMemo(() => {
     const sourceList = enableServerSearch ? searchResults : items;
     const list = Array.isArray(sourceList) ? [...sourceList] : [];
@@ -135,6 +162,8 @@ export const EmployeeSelect = ({
         roleName: String(e.role_name || ""),
         employeeId: String(e.employee_id || ""),
         email: String(e.email || ""),
+        // Use provided photo URLs (blob URLs from Graph API fetched in parent component)
+        avatarUrl: e.avatar_url || e.photo_url || e.graph_photo || e.avatar || null,
       }))
       .filter((e) => e.entraId);
 
@@ -173,8 +202,15 @@ export const EmployeeSelect = ({
     return searchFiltered;
   }, [items, filter, groupBy, searchTerm, enableServerSearch, searchResults, requireSearch, value]);
 
-  const selectedEmployee = processedItems.find((e) => e.entraId === value) || 
+  const selectedEmployeeRaw = processedItems.find((e) => e.entraId === value) || 
     (enableServerSearch ? searchResults.find((e) => String(e.entra_id) === value) : items.find((e) => String(e.entra_id) === value));
+  
+  const selectedEmployee = selectedEmployeeRaw ? {
+    entraId: String(selectedEmployeeRaw.entra_id || selectedEmployeeRaw.entraId || ""),
+    fullName: String(selectedEmployeeRaw.full_name || selectedEmployeeRaw.fullName || "Unknown"),
+    siteName: String(selectedEmployeeRaw.site_name || selectedEmployeeRaw.siteName || ""),
+    avatarUrl: selectedEmployeeRaw.avatar_url || selectedEmployeeRaw.photo_url || selectedEmployeeRaw.graph_photo || selectedEmployeeRaw.avatar || selectedEmployeeRaw.avatarUrl || null,
+  } : null;
 
   const handleSelect = (employeeId) => {
     onChange?.(employeeId);
@@ -190,12 +226,11 @@ export const EmployeeSelect = ({
   const renderEmployeeItem = (employee) => (
     <div className="flex items-center gap-2 p-2 hover:bg-accent rounded-md cursor-pointer">
       {showAvatar && (
-        <div
-          className="flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium text-white flex-shrink-0"
-          style={{ backgroundColor: getAvatarColor(employee.fullName) }}
-        >
-          {getInitials(employee.fullName)}
-        </div>
+        <EmployeeAvatar 
+          avatarUrl={employee.avatarUrl} 
+          fullName={employee.fullName}
+          size="h-8 w-8"
+        />
       )}
       <div className="flex-1 min-w-0">
         <div className="text-sm font-medium truncate">{employee.fullName}</div>
@@ -214,15 +249,14 @@ export const EmployeeSelect = ({
     <div className={cn("relative", className)} disabled={disabled}>
       {/* Selected value display */}
       {selectedEmployee && (
-        <div className="mb-2 flex items-center justify-between bg-secondary px-3 py-2 rounded-md">
+          <div className="mb-2 flex items-center justify-between bg-secondary px-3 py-2 rounded-md">
           <div className="flex items-center gap-2 min-w-0">
             {showAvatar && (
-              <div
-                className="flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium text-white flex-shrink-0"
-                style={{ backgroundColor: getAvatarColor(selectedEmployee.fullName) }}
-              >
-                {getInitials(selectedEmployee.fullName)}
-              </div>
+              <EmployeeAvatar 
+                avatarUrl={selectedEmployee.avatarUrl}
+                fullName={selectedEmployee.fullName}
+                size="h-6 w-6"
+              />
             )}
             <div className="min-w-0">
               <div className="text-sm font-medium truncate">{selectedEmployee.fullName}</div>
@@ -300,7 +334,7 @@ export const EmployeeSelect = ({
             className="absolute top-full left-0 right-0 mt-1 bg-popover border rounded-md shadow-md z-50 overflow-hidden"
             style={{ maxHeight }}
           >
-            <div className="overflow-y-auto">
+            <div className="overflow-y-auto" style={{ maxHeight }}>
               {requireSearch && !searchTerm && processedItems.length === 0 ? (
                 <div className="px-3 py-6 text-center text-sm text-muted-foreground">
                   Start typing to search for employees...

package/src/index.d.ts

@@ -34,6 +34,7 @@ export const EmployeeSearchPage: React.ComponentType<any>
 export const EmployeeSearchModal: React.ComponentType<any>
 export const EmployeeSearchDemo: React.ComponentType<any>
 export const EmployeeSearchFilters: React.ComponentType<any>
+export const EmployeeSelect: React.ComponentType<any>
 
 export const DateRangePicker: React.ComponentType<any>
 export interface DatePickerProps {