@snapdragonsnursery/react-components 1.19.0 → 1.19.3

package/package.json

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

package/src/ChildSearchModal.jsx

@@ -107,8 +107,8 @@ const ChildSearchModal = ({
       const viewportHeight = window.innerHeight;
       const expectedHeight = viewportHeight * 0.9;
       const expectedContentHeight = expectedHeight - 300;
-      
-      console.log('🔍 Modal Debug:', {
+
+      console.log("🔍 Modal Debug:", {
         modalHeight: rect.height,
         modalTop: rect.top,
         modalBottom: rect.bottom,
@@ -119,15 +119,15 @@ const ChildSearchModal = ({
         loading,
         error,
         modalStyle: modal.style,
-        modalComputedStyle: window.getComputedStyle(modal)
+        modalComputedStyle: window.getComputedStyle(modal),
       });
-      
+
       // Check if modal is overflowing
       if (rect.bottom > window.innerHeight) {
-        console.warn('⚠️ Modal is overflowing bottom of viewport!');
+        console.warn("⚠️ Modal is overflowing bottom of viewport!");
       }
       if (rect.top < 0) {
-        console.warn('⚠️ Modal is overflowing top of viewport!');
+        console.warn("⚠️ Modal is overflowing top of viewport!");
       }
     }
   }, [isOpen, children.length, loading, error]);
@@ -363,14 +363,43 @@ const ChildSearchModal = ({
   };
 
   const formatAge = (years, months) => {
-    if (years && months) {
-      return `${years}y ${months}m`;
-    } else if (years) {
-      return `${years}y`;
-    } else if (months) {
-      return `${months}m`;
+    const numericYears =
+      typeof years === "number" && Number.isFinite(years)
+        ? years
+        : typeof years === "string" && years.trim() !== ""
+        ? Number.parseInt(years, 10)
+        : null;
+    const numericMonths =
+      typeof months === "number" && Number.isFinite(months)
+        ? months
+        : typeof months === "string" && months.trim() !== ""
+        ? Number.parseInt(months, 10)
+        : null;
+
+    let displayYears = numericYears;
+    let displayMonths = numericMonths;
+
+    if (displayMonths !== null && displayMonths >= 12) {
+      const additionalYears = Math.floor(displayMonths / 12);
+      if (additionalYears > 0) {
+        displayYears = (displayYears ?? 0) + additionalYears;
+        displayMonths = displayMonths % 12;
+      }
     }
-    return "";
+
+    const parts = [];
+    if (displayYears !== null && !Number.isNaN(displayYears)) {
+      parts.push(`${displayYears}y`);
+    }
+    if (
+      displayMonths !== null &&
+      !Number.isNaN(displayMonths) &&
+      displayMonths > 0
+    ) {
+      parts.push(`${displayMonths}m`);
+    }
+
+    return parts.join(" ");
   };
 
   const formatDate = (dateString) => {
@@ -381,16 +410,19 @@ const ChildSearchModal = ({
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 overflow-hidden" style={{ zIndex }}>
+    <div
+      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 overflow-hidden"
+      style={{ zIndex }}
+    >
       <div
         ref={modalRef}
         className={`bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full flex flex-col overflow-hidden ${className}`}
         style={{
           maxHeight: `${maxHeightVh}vh`,
           height: `${maxHeightVh}vh`,
-          display: 'flex',
-          flexDirection: 'column',
-          position: 'relative'
+          display: "flex",
+          flexDirection: "column",
+          position: "relative",
         }}
       >
         {/* Header */}
@@ -688,20 +720,20 @@ const ChildSearchModal = ({
         </div>
 
         {/* Content */}
-        <div 
+        <div
           className="overflow-hidden"
-          style={{ 
-            height: 'calc(90vh - 300px)',
-            maxHeight: 'calc(90vh - 300px)',
-            overflow: 'hidden',
-            flex: 'none',
-            position: 'relative'
+          style={{
+            height: "calc(90vh - 300px)",
+            maxHeight: "calc(90vh - 300px)",
+            overflow: "hidden",
+            flex: "none",
+            position: "relative",
           }}
           ref={(el) => {
             if (el) {
               const rect = el.getBoundingClientRect();
               const computedStyle = window.getComputedStyle(el);
-              console.log('📦 Content Area Debug:', {
+              console.log("📦 Content Area Debug:", {
                 contentHeight: rect.height,
                 contentTop: rect.top,
                 contentBottom: rect.bottom,
@@ -712,7 +744,7 @@ const ChildSearchModal = ({
                 height: computedStyle.height,
                 overflow: computedStyle.overflow,
                 styleMaxHeight: el.style.maxHeight,
-                styleHeight: el.style.height
+                styleHeight: el.style.height,
               });
             }
           }}
@@ -732,18 +764,18 @@ const ChildSearchModal = ({
           )}
 
           {!loading && !error && (
-            <div 
+            <div
               className="overflow-y-auto h-full max-h-full"
-              style={{ 
-                maxHeight: '100% !important',
-                height: '100% !important',
-                overflowY: 'auto !important'
+              style={{
+                maxHeight: "100% !important",
+                height: "100% !important",
+                overflowY: "auto !important",
               }}
               ref={(el) => {
                 if (el) {
                   const rect = el.getBoundingClientRect();
                   const computedStyle = window.getComputedStyle(el);
-                  console.log('📜 Scrollable Content Debug:', {
+                  console.log("📜 Scrollable Content Debug:", {
                     scrollHeight: el.scrollHeight,
                     clientHeight: el.clientHeight,
                     scrollTop: el.scrollTop,
@@ -754,7 +786,7 @@ const ChildSearchModal = ({
                     height: computedStyle.height,
                     overflowY: computedStyle.overflowY,
                     styleMaxHeight: el.style.maxHeight,
-                    styleHeight: el.style.height
+                    styleHeight: el.style.height,
                   });
                 }
               }}
@@ -909,7 +941,8 @@ const ChildSearchModal = ({
         {multiSelect && (
           <div className="p-6 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
             <div className="text-sm text-gray-600 dark:text-gray-300">
-              {selectedChildrenState.length} selected{maxSelections ? ` / ${maxSelections}` : ''}
+              {selectedChildrenState.length} selected
+              {maxSelections ? ` / ${maxSelections}` : ""}
             </div>
             <div className="flex items-center gap-2">
               <button

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">