@snapdragonsnursery/react-components 1.13.0 → 1.16.0

package/README.md

@@ -188,16 +188,16 @@ The `ChildSearchFilters` component now includes an "Apply Filters" button that p
 
 ## Environment Variables
 
-Set these environment variables in your application:
+Set this environment variable in your application:
 
 ```env
-VITE_COMMON_API_BASE_URL=https://snaps-common-api.azurewebsites.net
+VITE_APIM_SCOPE=api://your-apim-app-id/.default
 ```
 
 ## Documentation
 
-- [ChildSearchModal Documentation](./CHILD_SEARCH_MODAL_DOCUMENTATION.md)
-- [ChildSearchModal README](./CHILD_SEARCH_README.md)
+- [ChildSearchModal Documentation](docs/CHILD_SEARCH_MODAL_DOCUMENTATION.md)
+- [ChildSearchModal README](docs/CHILD_SEARCH_README.md)
 - [Release Guide](./RELEASE.md)
 - [SoftWarningAlert](./SOFT_WARNING_ALERT.md)
 

package/package.json

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

package/src/ChildSearchModal.jsx

@@ -26,6 +26,12 @@ const ChildSearchModal = ({
   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)
+  // Auth options: provide token directly or a function to fetch it
+  authToken = null,
+  getAccessToken = null,
+  // Layout controls
+  zIndex = 60,
+  maxHeightVh = 90,
 }) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [children, setChildren] = useState([]);
@@ -137,8 +143,35 @@ const ChildSearchModal = ({
     setError(null);
 
     try {
-      // Get function key for authentication
-      const functionKey = import.meta.env.VITE_COMMON_API_FUNCTION_KEY || "";
+      // Resolve access token: prefer prop function, then prop token, then MSAL using APIM scope
+      const apimScope = import.meta.env.VITE_APIM_SCOPE;
+
+      let accessToken = null;
+      if (typeof getAccessToken === "function") {
+        accessToken = await getAccessToken();
+      } else if (authToken) {
+        accessToken = authToken;
+      } else if (apimScope) {
+        try {
+          const response = await instance.acquireTokenSilent({
+            account: accounts[0],
+            scopes: [apimScope],
+          });
+          accessToken = response.accessToken;
+        } catch (silentErr) {
+          // Fallback to popup if silent acquisition fails
+          const response = await instance.acquireTokenPopup({
+            scopes: [apimScope],
+          });
+          accessToken = response.accessToken;
+        }
+      }
+
+      if (!accessToken) {
+        throw new Error(
+          "Missing access token. Provide authToken/getAccessToken or set VITE_APIM_SCOPE."
+        );
+      }
 
       // Build query parameters
       const params = new URLSearchParams({
@@ -186,16 +219,13 @@ const ChildSearchModal = ({
       params.append("sort_by", advancedFilters.sortBy);
       params.append("sort_order", advancedFilters.sortOrder);
 
-      // Make API call
+      // Make API call via APIM with Bearer token
       const apiResponse = await fetch(
-        `${
-          import.meta.env.VITE_COMMON_API_BASE_URL ||
-          "https://snaps-common-api.azurewebsites.net"
-        }/api/search-children?${params}`,
+        `https://snapdragons.azure-api.net/api/children/search-children?${params}`,
         {
           headers: {
             "Content-Type": "application/json",
-            "x-functions-key": functionKey,
+            Authorization: `Bearer ${accessToken}`,
           },
         }
       );
@@ -351,13 +381,13 @@ const ChildSearchModal = ({
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 overflow-hidden">
+    <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: '90vh',
-          height: '90vh',
+          maxHeight: `${maxHeightVh}vh`,
+          height: `${maxHeightVh}vh`,
           display: 'flex',
           flexDirection: 'column',
           position: 'relative'

package/src/ChildSearchPage.jsx

@@ -61,6 +61,9 @@ const ChildSearchPage = ({
   multiSelect = false,
   maxSelections = null,
   selectedChildren = [],
+  // Auth options: provide token directly or a function to fetch it
+  authToken = null,
+  getAccessToken = null,
 }) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [children, setChildren] = useState([]);
@@ -286,7 +289,34 @@ const ChildSearchPage = ({
     setError(null);
 
     try {
-      const functionKey = import.meta.env.VITE_COMMON_API_FUNCTION_KEY || "";
+      // Resolve access token for APIM
+      const apimScope = import.meta.env.VITE_APIM_SCOPE;
+
+      let accessToken = null;
+      if (typeof getAccessToken === "function") {
+        accessToken = await getAccessToken();
+      } else if (authToken) {
+        accessToken = authToken;
+      } else if (apimScope) {
+        try {
+          const response = await instance.acquireTokenSilent({
+            account: accounts[0],
+            scopes: [apimScope],
+          });
+          accessToken = response.accessToken;
+        } catch (silentErr) {
+          const response = await instance.acquireTokenPopup({
+            scopes: [apimScope],
+          });
+          accessToken = response.accessToken;
+        }
+      }
+
+      if (!accessToken) {
+        throw new Error(
+          "Missing access token. Provide authToken/getAccessToken or set VITE_APIM_SCOPE."
+        );
+      }
 
       const params = new URLSearchParams({
         entra_id: accounts[0].localAccountId,
@@ -334,14 +364,11 @@ const ChildSearchPage = ({
       params.append("sort_order", debouncedAdvancedFilters.sortOrder);
 
       const apiResponse = await fetch(
-        `${
-          import.meta.env.VITE_COMMON_API_BASE_URL ||
-          "https://snaps-common-api.azurewebsites.net"
-        }/api/search-children?${params}`,
+        `https://snapdragons.azure-api.net/api/children/search-children?${params}`,
         {
           headers: {
             "Content-Type": "application/json",
-            "x-functions-key": functionKey,
+            Authorization: `Bearer ${accessToken}`,
           },
         }
       );

package/src/EmployeeSearchDemo.jsx

@@ -174,6 +174,42 @@ const EmployeeSearchDemo = () => {
               showWorkingHoursFilter={true}
             />
           </div>
+
+          {/* Custom Columns (Page) */}
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+              Custom Columns (Page)
+            </h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+              Demonstrates visibleColumns, columnLabels, and columnRenderers.
+            </p>
+            <EmployeeSearchPage
+              title="Custom Column Set"
+              onSelect={handleEmployeeSelect}
+              sites={mockSites}
+              roles={mockRoles}
+              managers={mockManagers}
+              visibleColumns={[
+                'full_name',
+                'site_name',
+                'role_name',
+                'email',
+                'employee_status',
+              ]}
+              columnLabels={{
+                full_name: 'Employee',
+                site_name: 'Location',
+                role_name: 'Position',
+              }}
+              columnRenderers={{
+                email: (row) => (
+                  <a href={`mailto:${row.email}`} className="text-blue-600">
+                    {row.email}
+                  </a>
+                ),
+              }}
+            />
+          </div>
         </div>
 
         {/* Site-Specific Search */}
@@ -272,4 +308,4 @@ const EmployeeSearchDemo = () => {
   );
 };
 
-export default EmployeeSearchDemo; 
+export default EmployeeSearchDemo;