@snapdragonsnursery/react-components 1.18.4 → 1.19.2

package/package.json

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

package/src/EmployeeSearchModal.jsx

@@ -1,6 +1,6 @@
 // Employee Search Modal Component
 // Provides a modal interface for employee search with advanced filtering and selection capabilities
-// Usage: <EmployeeSearchModal isOpen={isOpen} onClose={onClose} onSelect={handleSelect} />
+// Usage: <EmployeeSearchModal isOpen={isOpen} onClose={onClose} onSelect={handleSelect} showFiltersPanel={false} />
 
 import React, { useState, useEffect, useCallback } from "react";
 import { useMsal } from "@azure/msal-react";
@@ -47,7 +47,7 @@ const EmployeeSearchModal = ({
   onClose,
   onSelect,
   title = "Select Employee",
-  searchPlaceholder = "Search by name, ID, or email address...",
+  searchPlaceholder = "Search by name, Employee ID, or email address...",
   siteId = null,
   siteIds = null,
   sites = null,
@@ -90,6 +90,8 @@ const EmployeeSearchModal = ({
   visibleColumns = null,
   columnLabels = {},
   columnRenderers = {},
+  showFiltersPanel = true,
+  dataProfile = "full",
 }) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [employees, setEmployees] = useState([]);
@@ -219,7 +221,9 @@ const EmployeeSearchModal = ({
           }
         }
 
-        console.warn(`Failed to fetch profile picture for ${entraId}: Non-200 response`);
+        console.warn(
+          `Failed to fetch profile picture for ${entraId}: Non-200 response`
+        );
       } catch (error) {
         console.warn(`Error fetching profile picture for ${entraId}:`, error);
       } finally {
@@ -315,7 +319,7 @@ const EmployeeSearchModal = ({
   });
 
   // Define default data columns (excluding optional select)
-  const defaultDataColumns = [
+  const basicColumns = [
     columnHelper.accessor("full_name", {
       header: createSortableHeader(
         "full_name",
@@ -327,9 +331,11 @@ const EmployeeSearchModal = ({
         ) : (
           <div>
             <div className="font-medium">{row.original.full_name}</div>
-            <div className="text-sm text-gray-500">
-              ID: {row.original.employee_id}
-            </div>
+            {dataProfile !== "basic" && row.original.employee_id ? (
+              <div className="text-sm text-gray-500">
+                ID: {row.original.employee_id}
+              </div>
+            ) : null}
           </div>
         ),
     }),
@@ -366,6 +372,9 @@ const EmployeeSearchModal = ({
           <span className="text-sm">{row.original.email}</span>
         ),
     }),
+  ];
+
+  const extendedColumns = [
     columnHelper.accessor("start_date", {
       header: createSortableHeader(
         "start_date",
@@ -429,6 +438,11 @@ const EmployeeSearchModal = ({
     }),
   ];
 
+  const defaultDataColumns =
+    dataProfile === "basic"
+      ? basicColumns
+      : [...basicColumns, ...extendedColumns];
+
   const selectColumn = columnHelper.display({
     id: "select",
     header: ({ table }) => (
@@ -608,6 +622,10 @@ const EmployeeSearchModal = ({
         bypass_permissions: bypassPermissions.toString(),
       });
 
+      if (dataProfile && dataProfile !== "full") {
+        params.append("data_profile", dataProfile);
+      }
+
       // Handle site filtering
       if (siteIds && siteIds.length > 0) {
         params.append("site_ids", siteIds.join(","));
@@ -745,6 +763,7 @@ const EmployeeSearchModal = ({
     debouncedAdvancedFilters,
     applicationContext,
     bypassPermissions,
+    dataProfile,
   ]);
 
   // Search when debounced term changes
@@ -885,28 +904,30 @@ const EmployeeSearchModal = ({
             </div>
 
             {/* Advanced Filters */}
-            <EmployeeSearchFilters
-              filters={advancedFilters}
-              onFiltersChange={setAdvancedFilters}
-              onApplyFilters={setAdvancedFilters}
-              sites={sites}
-              roles={roles}
-              managers={managers}
-              activeOnly={activeOnly}
-              isAdvancedFiltersOpen={isAdvancedFiltersOpen}
-              onToggleAdvancedFilters={() =>
-                setIsAdvancedFiltersOpen(!isAdvancedFiltersOpen)
-              }
-              onClearFilters={clearFilters}
-              showRoleFilter={showRoleFilter}
-              showManagerFilter={showManagerFilter}
-              showTermTimeFilter={showTermTimeFilter}
-              showMaternityFilter={showMaternityFilter}
-              showStartDateFilter={showStartDateFilter}
-              showEndDateFilter={showEndDateFilter}
-              showDbsFilter={showDbsFilter}
-              showWorkingHoursFilter={showWorkingHoursFilter}
-            />
+            {showFiltersPanel && (
+              <EmployeeSearchFilters
+                filters={advancedFilters}
+                onFiltersChange={setAdvancedFilters}
+                onApplyFilters={setAdvancedFilters}
+                sites={sites}
+                roles={roles}
+                managers={managers}
+                activeOnly={activeOnly}
+                isAdvancedFiltersOpen={isAdvancedFiltersOpen}
+                onToggleAdvancedFilters={() =>
+                  setIsAdvancedFiltersOpen(!isAdvancedFiltersOpen)
+                }
+                onClearFilters={clearFilters}
+                showRoleFilter={showRoleFilter}
+                showManagerFilter={showManagerFilter}
+                showTermTimeFilter={showTermTimeFilter}
+                showMaternityFilter={showMaternityFilter}
+                showStartDateFilter={showStartDateFilter}
+                showEndDateFilter={showEndDateFilter}
+                showDbsFilter={showDbsFilter}
+                showWorkingHoursFilter={showWorkingHoursFilter}
+              />
+            )}
 
             {/* Results */}
             <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">

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

@@ -3,18 +3,29 @@
 // Features cycling behavior: start date -> end date -> start date -> end date...
 // Usage: <DateRangePicker selectedRange={range} onSelect={setRange} />
 
-import React, { useState, useEffect, useRef } from 'react'
-import { format, addDays, addMonths, endOfMonth, endOfYear, startOfMonth, startOfYear, subDays, subMonths, subYears } from 'date-fns'
-import { CalendarIcon } from '@heroicons/react/24/outline'
-import { Popover, PopoverContent, PopoverTrigger } from './popover'
-import { Calendar } from './calendar'
-import { Button } from './button'
-import { cn } from '../../lib/utils'
+import React, { useState, useEffect, useRef } from "react";
+import {
+  format,
+  addDays,
+  addMonths,
+  endOfMonth,
+  endOfYear,
+  startOfMonth,
+  startOfYear,
+  subDays,
+  subMonths,
+  subYears,
+} from "date-fns";
+import { CalendarIcon } from "@heroicons/react/24/outline";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { Calendar } from "./calendar";
+import { Button } from "./button";
+import { cn } from "../../lib/utils";
 
 // Optional preset type: { key: string, label: string, getRange: () => ({ from: Date, to: Date }) }
-export function DateRangePicker({ 
-  selectedRange, 
-  onSelect, 
+export function DateRangePicker({
+  selectedRange,
+  onSelect,
   className,
   placeholder = "Select a date range",
   disabled,
@@ -26,87 +37,87 @@ export function DateRangePicker({
   // New: allow styling popover content and calendar for layout control
   contentClassName,
   calendarClassName,
-  ...props 
+  ...props
 }) {
-  const [isOpen, setIsOpen] = useState(false)
-  const [internalRange, setInternalRange] = useState(selectedRange)
-  const isSelectingRange = useRef(false)
+  const [isOpen, setIsOpen] = useState(false);
+  const [internalRange, setInternalRange] = useState(selectedRange);
+  const isSelectingRange = useRef(false);
 
   const normalizeDate = (date) =>
     date
       ? new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
-      : null
+      : null;
 
   const datesEqual = (a, b) =>
-    a instanceof Date && b instanceof Date && a.getTime() === b.getTime()
+    a instanceof Date && b instanceof Date && a.getTime() === b.getTime();
 
   const handleOpenChange = (open) => {
     // If we're in the middle of selecting a range and trying to close, prevent it
     if (!open && isSelectingRange.current) {
       // Instead of returning, let's try to keep it open
       setTimeout(() => {
-        setIsOpen(true)
-      }, 0)
-      return
+        setIsOpen(true);
+      }, 0);
+      return;
     }
-    
+
     // When opening, set the selecting range flag based on whether we have a partial selection
     if (open) {
       if (internalRange?.from && !internalRange?.to) {
-        isSelectingRange.current = true
+        isSelectingRange.current = true;
       } else {
-        isSelectingRange.current = false
+        isSelectingRange.current = false;
       }
     }
-    
-    setIsOpen(open)
-  }
+
+    setIsOpen(open);
+  };
 
   // Update internal range when prop changes
   useEffect(() => {
-    setInternalRange(selectedRange)
-  }, [selectedRange])
+    setInternalRange(selectedRange);
+  }, [selectedRange]);
 
   const handleSelect = (range, selectedDay) => {
     if (!range || (!range.from && !range.to)) {
-      return
+      return;
     }
 
     const normalizedRange = {
       from: normalizeDate(range.from),
       to: normalizeDate(range.to),
-    }
-    const normalizedSelectedDay = normalizeDate(selectedDay)
+    };
+    const normalizedSelectedDay = normalizeDate(selectedDay);
 
     const hasCompleteCurrentRange = Boolean(
       internalRange?.from && internalRange?.to
-    )
+    );
 
-    let newRange = normalizedRange
+    let newRange = normalizedRange;
 
     if (normalizedRange.from && normalizedRange.to) {
       if (hasCompleteCurrentRange && !isSelectingRange.current) {
-        const sameStart = datesEqual(normalizedRange.from, internalRange.from)
+        const sameStart = datesEqual(normalizedRange.from, internalRange.from);
 
         if (sameStart) {
           // Adjusting end date on an existing range
           newRange = {
             from: internalRange.from,
             to: normalizedRange.to,
-          }
+          };
         } else {
           // Starting a new range selection cycle
           newRange = {
             from: normalizedSelectedDay ?? normalizedRange.from,
             to: null,
-          }
+          };
         }
       } else if (internalRange?.from && !internalRange?.to) {
         // Completing an in-progress range
         newRange = {
           from: internalRange.from,
           to: normalizedRange.to,
-        }
+        };
       }
     } else if (normalizedRange.from && !normalizedRange.to) {
       if (hasCompleteCurrentRange && !isSelectingRange.current) {
@@ -114,48 +125,48 @@ export function DateRangePicker({
         newRange = {
           from: normalizedSelectedDay ?? normalizedRange.from,
           to: null,
-        }
+        };
       } else {
         newRange = {
           from: normalizedRange.from,
           to: null,
-        }
+        };
       }
     } else {
-      newRange = null
+      newRange = null;
     }
 
-    setInternalRange(newRange)
+    setInternalRange(newRange);
 
     if (newRange?.from && !newRange?.to) {
-      isSelectingRange.current = true
+      isSelectingRange.current = true;
     } else {
-      isSelectingRange.current = false
+      isSelectingRange.current = false;
     }
 
     if (!newRange?.from || newRange?.to) {
-      onSelect(newRange)
+      onSelect(newRange);
     }
-  }
+  };
 
   return (
-    <Popover 
-      open={isOpen} 
-      onOpenChange={handleOpenChange} 
+    <Popover
+      open={isOpen}
+      onOpenChange={handleOpenChange}
       modal={false}
       onPointerDownOutside={(e) => {
         if (isSelectingRange.current) {
-          e.preventDefault()
+          e.preventDefault();
         }
       }}
       onEscapeKeyDown={(e) => {
         if (isSelectingRange.current) {
-          e.preventDefault()
+          e.preventDefault();
         }
       }}
       onInteractOutside={(e) => {
         if (isSelectingRange.current) {
-          e.preventDefault()
+          e.preventDefault();
         }
       }}
     >
@@ -163,8 +174,8 @@ export function DateRangePicker({
         <Button
           variant="outline"
           className={cn(
-            'w-full justify-start text-left font-normal',
-            !internalRange?.from && 'text-muted-foreground',
+            "w-full justify-start text-left font-normal",
+            !internalRange?.from && "text-muted-foreground",
             className
           )}
           disabled={disabled}
@@ -174,20 +185,21 @@ export function DateRangePicker({
           {internalRange?.from ? (
             internalRange.to ? (
               <>
-                {format(internalRange.from, 'LLL dd, y')} -{' '}
-                {format(internalRange.to, 'LLL dd, y')}
+                {format(internalRange.from, "LLL dd, y")} -{" "}
+                {format(internalRange.to, "LLL dd, y")}
               </>
             ) : (
-              <>
-                {format(internalRange.from, 'LLL dd, y')} - Select end date
-              </>
+              <>{format(internalRange.from, "LLL dd, y")} - Select end date</>
             )
           ) : (
             <span>{placeholder}</span>
           )}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className={cn('w-[90vw] p-3 sm:w-auto', contentClassName)} align="start">
+      <PopoverContent
+        className={cn("w-[90vw] p-3 sm:w-auto", contentClassName)}
+        align="start"
+      >
         <div className="relative w-full sm:w-[520px]">
           <Calendar
             mode="range"
@@ -195,31 +207,33 @@ export function DateRangePicker({
             selected={internalRange}
             onSelect={(range, selectedDay) => {
               if (range && (range.from || range.to)) {
-                handleSelect(range, selectedDay)
+                handleSelect(range, selectedDay);
               }
             }}
             numberOfMonths={numberOfMonths}
-            className={cn('w-full', calendarClassName)}
+            className={cn("w-full", calendarClassName)}
           />
           {presetsEnabled && (
             <div className="mt-2 flex flex-wrap gap-2 p-2">
-              {(presets && presets.length > 0 ? presets : defaultPresets()).map((p) => {
-                const r = p.getRange()
-                return (
-                  <Button
-                    key={p.key}
-                    variant="outline"
-                    size="sm"
-                    onClick={() => {
-                      setInternalRange(r)
-                      isSelectingRange.current = false
-                      onSelect(r)
-                    }}
-                  >
-                    {p.label}
-                  </Button>
-                )
-              })}
+              {(presets && presets.length > 0 ? presets : defaultPresets()).map(
+                (p) => {
+                  const r = p.getRange();
+                  return (
+                    <Button
+                      key={p.key}
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        setInternalRange(r);
+                        isSelectingRange.current = false;
+                        onSelect(r);
+                      }}
+                    >
+                      {p.label}
+                    </Button>
+                  );
+                }
+              )}
             </div>
           )}
           {/* Always-present footer actions for clarity on mobile/desktop */}
@@ -228,9 +242,9 @@ export function DateRangePicker({
               variant="ghost"
               size="sm"
               onClick={() => {
-                setInternalRange(null)
-                isSelectingRange.current = false
-                onSelect(null)
+                setInternalRange(null);
+                isSelectingRange.current = false;
+                onSelect(null);
               }}
             >
               Clear
@@ -243,42 +257,48 @@ export function DateRangePicker({
         </div>
       </PopoverContent>
     </Popover>
-  )
+  );
 }
 
 // Provide a default preset set similar to app usage, but minimal
 function defaultPresets() {
-  const today = new Date()
-  const last7Days = { from: subDays(today, 6), to: today }
-  const monthToDate = { from: startOfMonth(today), to: today }
-  const yearToDate = { from: startOfYear(today), to: today }
-  const lastMonth = { from: startOfMonth(subMonths(today, 1)), to: endOfMonth(subMonths(today, 1)) }
-  const lastYear = { from: startOfYear(subYears(today, 1)), to: endOfYear(subYears(today, 1)) }
+  const today = new Date();
+  const last7Days = { from: subDays(today, 6), to: today };
+  const monthToDate = { from: startOfMonth(today), to: today };
+  const yearToDate = { from: startOfYear(today), to: today };
+  const lastMonth = {
+    from: startOfMonth(subMonths(today, 1)),
+    to: endOfMonth(subMonths(today, 1)),
+  };
+  const lastYear = {
+    from: startOfYear(subYears(today, 1)),
+    to: endOfYear(subYears(today, 1)),
+  };
   return [
-    { key: 'last7', label: 'Last 7 days', getRange: () => last7Days },
-    { key: 'mtd', label: 'Month to date', getRange: () => monthToDate },
-    { key: 'lastMonth', label: 'Last month', getRange: () => lastMonth },
-    { key: 'ytd', label: 'Year to date', getRange: () => yearToDate },
-    { key: 'lastYear', label: 'Last year', getRange: () => lastYear },
-  ]
+    { key: "last7", label: "Last 7 days", getRange: () => last7Days },
+    { key: "mtd", label: "Month to date", getRange: () => monthToDate },
+    { key: "lastMonth", label: "Last month", getRange: () => lastMonth },
+    { key: "ytd", label: "Year to date", getRange: () => yearToDate },
+    { key: "lastYear", label: "Last year", getRange: () => lastYear },
+  ];
 }
 
 // Single date picker variant
-export function DatePicker({ 
-  selectedDate, 
-  onSelect, 
+export function DatePicker({
+  selectedDate,
+  onSelect,
   className,
   placeholder = "Select a date",
   disabled,
   disableFuture = false,
-  ...props 
+  ...props
 }) {
-  const [isOpen, setIsOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(false);
 
   const handleSelect = (date) => {
-    onSelect(date)
-    setIsOpen(false)
-  }
+    onSelect(date);
+    setIsOpen(false);
+  };
 
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen} modal={false}>
@@ -286,8 +306,8 @@ export function DatePicker({
         <Button
           variant="outline"
           className={cn(
-            'w-full justify-start text-left font-normal',
-            !selectedDate && 'text-muted-foreground',
+            "w-full justify-start text-left font-normal",
+            !selectedDate && "text-muted-foreground",
             className
           )}
           disabled={disabled}
@@ -295,7 +315,7 @@ export function DatePicker({
         >
           <CalendarIcon className="mr-2 h-4 w-4" />
           {selectedDate ? (
-            format(selectedDate, 'PPP')
+            format(selectedDate, "PPP")
           ) : (
             <span>{placeholder}</span>
           )}
@@ -311,5 +331,5 @@ export function DatePicker({
         />
       </PopoverContent>
     </Popover>
-  )
+  );
 }