@snapdragonsnursery/react-components 1.13.0 → 1.15.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.15.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; 

package/src/EmployeeSearchModal.jsx

@@ -74,6 +74,16 @@ const EmployeeSearchModal = ({
   showEndDateFilter = true,
   showDbsFilter = true,
   showWorkingHoursFilter = true,
+  // Layout controls
+  zIndex = 60,
+  maxHeightVh = 85,
+  // Auth options: provide token directly or a function to fetch it
+  authToken = null,
+  getAccessToken = null,
+  // Column customization
+  visibleColumns = null,
+  columnLabels = {},
+  columnRenderers = {},
 }) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [employees, setEmployees] = useState([]);
@@ -149,114 +159,127 @@ const EmployeeSearchModal = ({
     };
   };
 
-  // Define table columns
-  const columns = [
-    // Checkbox column for multi-select
-    ...(multiSelect
-      ? [
-          columnHelper.display({
-            id: "select",
-            header: ({ table }) => (
-              <input
-                type="checkbox"
-                checked={table.getIsAllPageRowsSelected()}
-                onChange={table.getToggleAllPageRowsSelectedHandler()}
-                className="rounded border-gray-300"
-              />
-            ),
-            cell: ({ row }) => (
-              <input
-                type="checkbox"
-                checked={row.getIsSelected()}
-                onChange={row.getToggleSelectedHandler()}
-                className="rounded border-gray-300"
-              />
-            ),
-            size: 50,
-          }),
-        ]
-      : []),
-    // Name column - sortable
+  // Define default data columns (excluding optional select)
+  const defaultDataColumns = [
     columnHelper.accessor("full_name", {
-      header: createSortableHeader("full_name", "Name"),
-      cell: ({ row }) => (
-        <div>
-          <div className="font-medium">{row.original.full_name}</div>
-          <div className="text-sm text-gray-500">
-            ID: {row.original.employee_id}
+      header: createSortableHeader("full_name", columnLabels.full_name || "Name"),
+      cell: ({ row }) =>
+        columnRenderers.full_name ? (
+          columnRenderers.full_name(row.original)
+        ) : (
+          <div>
+            <div className="font-medium">{row.original.full_name}</div>
+            <div className="text-sm text-gray-500">ID: {row.original.employee_id}</div>
           </div>
-        </div>
-      ),
+        ),
     }),
-    // Site column - sortable
     columnHelper.accessor("site_name", {
-      header: createSortableHeader("site_name", "Site"),
-      cell: ({ row }) => (
-        <span>{row.original.site_name}</span>
-      ),
+      header: createSortableHeader("site_name", columnLabels.site_name || "Site"),
+      cell: ({ row }) =>
+        columnRenderers.site_name ? (
+          columnRenderers.site_name(row.original)
+        ) : (
+          <span>{row.original.site_name}</span>
+        ),
     }),
-    // Role column - sortable
     columnHelper.accessor("role_name", {
-      header: createSortableHeader("role_name", "Role"),
-      cell: ({ row }) => (
-        <span>{row.original.role_name}</span>
-      ),
+      header: createSortableHeader("role_name", columnLabels.role_name || "Role"),
+      cell: ({ row }) =>
+        columnRenderers.role_name ? (
+          columnRenderers.role_name(row.original)
+        ) : (
+          <span>{row.original.role_name}</span>
+        ),
     }),
-    // Email column
     columnHelper.accessor("email", {
-      header: "Email",
-      cell: ({ row }) => (
-        <span className="text-sm">{row.original.email}</span>
-      ),
+      header: columnLabels.email || "Email",
+      cell: ({ row }) =>
+        columnRenderers.email ? (
+          columnRenderers.email(row.original)
+        ) : (
+          <span className="text-sm">{row.original.email}</span>
+        ),
     }),
-    // Start Date column - sortable
     columnHelper.accessor("start_date", {
-      header: createSortableHeader("start_date", "Start Date"),
-      cell: ({ row }) => (
-        <span>
-          {row.original.start_date
-            ? new Date(row.original.start_date).toLocaleDateString("en-GB")
-            : "N/A"}
-        </span>
-      ),
+      header: createSortableHeader("start_date", columnLabels.start_date || "Start Date"),
+      cell: ({ row }) =>
+        columnRenderers.start_date ? (
+          columnRenderers.start_date(row.original)
+        ) : (
+          <span>
+            {row.original.start_date
+              ? new Date(row.original.start_date).toLocaleDateString("en-GB")
+              : "N/A"}
+          </span>
+        ),
     }),
-    // Status column - sortable
     columnHelper.accessor("employee_status", {
-      header: createSortableHeader("employee_status", "Status"),
+      header: createSortableHeader("employee_status", columnLabels.employee_status || "Status"),
       cell: ({ row }) => {
+        if (columnRenderers.employee_status) return columnRenderers.employee_status(row.original);
         const status = row.original.employee_status;
         const statusColors = {
-          'Active': 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
-          'Inactive': 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200',
+          Active: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
+          Inactive: 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200',
           'On Leave': 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
-          'Terminated': 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
+          Terminated: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
         };
-        
         return (
           <span
             className={cn(
-              "px-2 py-1 text-xs rounded-full",
-              statusColors[status] || "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200"
+              'px-2 py-1 text-xs rounded-full',
+              statusColors[status] || 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200'
             )}
           >
-            {status || "Unknown"}
+            {status || 'Unknown'}
           </span>
         );
       },
     }),
-    // Working Hours column
     columnHelper.accessor("total_hours_per_week", {
-      header: "Hours/Week",
-      cell: ({ row }) => (
-        <span>
-          {row.original.total_hours_per_week 
-            ? `${row.original.total_hours_per_week}h`
-            : "N/A"}
-        </span>
-      ),
+      header: columnLabels.total_hours_per_week || "Hours/Week",
+      cell: ({ row }) =>
+        columnRenderers.total_hours_per_week ? (
+          columnRenderers.total_hours_per_week(row.original)
+        ) : (
+          <span>
+            {row.original.total_hours_per_week
+              ? `${row.original.total_hours_per_week}h`
+              : "N/A"}
+          </span>
+        ),
     }),
   ];
 
+  const selectColumn = columnHelper.display({
+    id: "select",
+    header: ({ table }) => (
+      <input
+        type="checkbox"
+        checked={table.getIsAllPageRowsSelected()}
+        onChange={table.getToggleAllPageRowsSelectedHandler()}
+        className="rounded border-gray-300"
+      />
+    ),
+    cell: ({ row }) => (
+      <input
+        type="checkbox"
+        checked={row.getIsSelected()}
+        onChange={row.getToggleSelectedHandler()}
+        className="rounded border-gray-300"
+      />
+    ),
+    size: 50,
+  });
+
+  let dataColumns = defaultDataColumns;
+  if (Array.isArray(visibleColumns) && visibleColumns.length > 0) {
+    const mapByKey = new Map(defaultDataColumns.map((c) => [c.accessorKey || c.id, c]));
+    dataColumns = visibleColumns.map((key) => mapByKey.get(key)).filter(Boolean);
+  }
+
+  const columns = multiSelect ? [selectColumn, ...dataColumns] : dataColumns;
+
   // Create table instance
   const table = useReactTable({
     data: employees,
@@ -348,7 +371,34 @@ const EmployeeSearchModal = ({
     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,
@@ -426,14 +476,11 @@ const EmployeeSearchModal = ({
       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-employees?${params}`,
+        `https://snapdragons.azure-api.net/api/employees/search-employees?${params}`,
         {
           headers: {
             "Content-Type": "application/json",
-            "x-functions-key": functionKey,
+            Authorization: `Bearer ${accessToken}`,
           },
         }
       );
@@ -568,11 +615,14 @@ const EmployeeSearchModal = ({
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 z-50 overflow-y-auto">
+    <div className="fixed inset-0 overflow-y-auto" style={{ zIndex }}>
       <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
         <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onClick={onClose}></div>
 
-        <div className="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-7xl">
+        <div
+          className="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-7xl flex flex-col"
+          style={{ maxHeight: `${maxHeightVh}vh` }}
+        >
           {/* Header */}
           <div className="bg-white dark:bg-gray-800 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
             <div className="flex items-center justify-between">
@@ -590,7 +640,7 @@ const EmployeeSearchModal = ({
           </div>
 
           {/* Content */}
-          <div className="px-6 py-4 max-h-[70vh] overflow-y-auto">
+          <div className="px-6 py-4 overflow-y-auto flex-1">
             {/* Search Input */}
             <div className="mb-4">
               <Input

package/src/EmployeeSearchPage.jsx

@@ -72,6 +72,13 @@ const EmployeeSearchPage = ({
   showEndDateFilter = false,
   showWorkingHoursFilter = true,
   loadAllResults = false, // If true, loads all results instead of paginating
+  // Auth options: provide token directly or a function to fetch it
+  authToken = null,
+  getAccessToken = null,
+  // Column customization
+  visibleColumns = null, // e.g. ['full_name','site_name','role_name','email','start_date','employee_status','total_hours_per_week']
+  columnLabels = {}, // e.g. { full_name: 'Employee', site_name: 'Location' }
+  columnRenderers = {}, // e.g. { email: (row) => <a>{row.email}</a> }
 }) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [employees, setEmployees] = useState([]);
@@ -157,98 +164,80 @@ const EmployeeSearchPage = ({
     };
   };
 
-  // Define table columns
-  const columns = [
-    // Checkbox column for multi-select
-    ...(multiSelect
-      ? [
-          columnHelper.display({
-            id: "select",
-            header: ({ table }) => (
-              <input
-                type="checkbox"
-                checked={table.getIsAllPageRowsSelected()}
-                onChange={table.getToggleAllPageRowsSelectedHandler()}
-                className="rounded border-gray-300"
-              />
-            ),
-            cell: ({ row }) => (
-              <input
-                type="checkbox"
-                checked={row.getIsSelected()}
-                onChange={row.getToggleSelectedHandler()}
-                className="rounded border-gray-300"
-              />
-            ),
-            size: 50,
-          }),
-        ]
-      : []),
-    // Name column - sortable
+  // Define default data columns (excluding the optional select column)
+  const defaultDataColumns = [
     columnHelper.accessor("full_name", {
-      header: createSortableHeader("full_name", "Name"),
-      cell: ({ row }) => (
-        <div>
-          <div className="font-medium">{row.original.full_name}</div>
-          <div className="text-sm text-gray-500">
-            ID: {row.original.employee_id}
+      header: createSortableHeader("full_name", columnLabels.full_name || "Name"),
+      cell: ({ row }) =>
+        columnRenderers.full_name ? (
+          columnRenderers.full_name(row.original)
+        ) : (
+          <div>
+            <div className="font-medium">{row.original.full_name}</div>
+            <div className="text-sm text-gray-500">ID: {row.original.employee_id}</div>
           </div>
-        </div>
-      ),
+        ),
     }),
-    // Site column - sortable
     columnHelper.accessor("site_name", {
-      header: createSortableHeader("site_name", "Site"),
-      cell: ({ row }) => (
-        <span>{row.original.site_name}</span>
-      ),
+      header: createSortableHeader("site_name", columnLabels.site_name || "Site"),
+      cell: ({ row }) =>
+        columnRenderers.site_name ? (
+          columnRenderers.site_name(row.original)
+        ) : (
+          <span>{row.original.site_name}</span>
+        ),
     }),
-    // Role column - sortable
     columnHelper.accessor("role_name", {
-      header: createSortableHeader("role_name", "Role"),
-      cell: ({ row }) => (
-        <span>{row.original.role_name}</span>
-      ),
+      header: createSortableHeader("role_name", columnLabels.role_name || "Role"),
+      cell: ({ row }) =>
+        columnRenderers.role_name ? (
+          columnRenderers.role_name(row.original)
+        ) : (
+          <span>{row.original.role_name}</span>
+        ),
     }),
-    // Manager column - sortable
     columnHelper.accessor("manager_name", {
-      header: createSortableHeader("manager_name", "Manager"),
-      cell: ({ row }) => (
-        <span className="text-sm">
-          {row.original.manager_name || "N/A"}
-        </span>
-      ),
+      header: createSortableHeader("manager_name", columnLabels.manager_name || "Manager"),
+      cell: ({ row }) =>
+        columnRenderers.manager_name ? (
+          columnRenderers.manager_name(row.original)
+        ) : (
+          <span className="text-sm">{row.original.manager_name || "N/A"}</span>
+        ),
     }),
-    // Email column
     columnHelper.accessor("email", {
-      header: "Email",
-      cell: ({ row }) => (
-        <span className="text-sm">{row.original.email}</span>
-      ),
+      header: columnLabels.email || "Email",
+      cell: ({ row }) =>
+        columnRenderers.email ? (
+          columnRenderers.email(row.original)
+        ) : (
+          <span className="text-sm">{row.original.email}</span>
+        ),
     }),
-    // Start Date column - sortable
     columnHelper.accessor("start_date", {
-      header: createSortableHeader("start_date", "Start Date"),
-      cell: ({ row }) => (
-        <span>
-          {row.original.start_date
-            ? new Date(row.original.start_date).toLocaleDateString("en-GB")
-            : "N/A"}
-        </span>
-      ),
+      header: createSortableHeader("start_date", columnLabels.start_date || "Start Date"),
+      cell: ({ row }) =>
+        columnRenderers.start_date ? (
+          columnRenderers.start_date(row.original)
+        ) : (
+          <span>
+            {row.original.start_date
+              ? new Date(row.original.start_date).toLocaleDateString("en-GB")
+              : "N/A"}
+          </span>
+        ),
     }),
-    // Status column - sortable
     columnHelper.accessor("employee_status", {
-      header: createSortableHeader("employee_status", "Status"),
+      header: createSortableHeader("employee_status", columnLabels.employee_status || "Status"),
       cell: ({ row }) => {
+        if (columnRenderers.employee_status) return columnRenderers.employee_status(row.original);
         const status = row.original.employee_status;
         const statusColors = {
-          'Active': 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
-          'Inactive': 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200',
-          'On Leave': 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
-          'Terminated': 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
+          Active: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
+          Inactive: "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200",
+          "On Leave": "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
+          Terminated: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
         };
-        
         return (
           <span
             className={cn(
@@ -261,45 +250,86 @@ const EmployeeSearchPage = ({
         );
       },
     }),
-    // Working Hours column
     columnHelper.accessor("total_hours_per_week", {
-      header: "Hours/Week",
-      cell: ({ row }) => (
-        <span>
-          {row.original.total_hours_per_week 
-            ? `${row.original.total_hours_per_week}h`
-            : "N/A"}
-        </span>
-      ),
+      header: columnLabels.total_hours_per_week || "Hours/Week",
+      cell: ({ row }) =>
+        columnRenderers.total_hours_per_week ? (
+          columnRenderers.total_hours_per_week(row.original)
+        ) : (
+          <span>
+            {row.original.total_hours_per_week
+              ? `${row.original.total_hours_per_week}h`
+              : "N/A"}
+          </span>
+        ),
     }),
-    // Term Time Only column
     columnHelper.accessor("term_time_only", {
-      header: "Term Time",
-      cell: ({ row }) => (
-        <span>
-          {row.original.term_time_only ? (
-            <CheckCircleIcon className="h-4 w-4 text-green-500" />
-          ) : (
-            <XCircleIcon className="h-4 w-4 text-gray-400" />
-          )}
-        </span>
-      ),
+      header: columnLabels.term_time_only || "Term Time",
+      cell: ({ row }) =>
+        columnRenderers.term_time_only ? (
+          columnRenderers.term_time_only(row.original)
+        ) : (
+          <span>
+            {row.original.term_time_only ? (
+              <CheckCircleIcon className="h-4 w-4 text-green-500" />
+            ) : (
+              <XCircleIcon className="h-4 w-4 text-gray-400" />
+            )}
+          </span>
+        ),
     }),
-    // Maternity Leave column
     columnHelper.accessor("on_maternity_leave", {
-      header: "Maternity",
-      cell: ({ row }) => (
-        <span>
-          {row.original.on_maternity_leave ? (
-            <CheckCircleIcon className="h-4 w-4 text-blue-500" />
-          ) : (
-            <XCircleIcon className="h-4 w-4 text-gray-400" />
-          )}
-        </span>
-      ),
+      header: columnLabels.on_maternity_leave || "Maternity",
+      cell: ({ row }) =>
+        columnRenderers.on_maternity_leave ? (
+          columnRenderers.on_maternity_leave(row.original)
+        ) : (
+          <span>
+            {row.original.on_maternity_leave ? (
+              <CheckCircleIcon className="h-4 w-4 text-blue-500" />
+            ) : (
+              <XCircleIcon className="h-4 w-4 text-gray-400" />
+            )}
+          </span>
+        ),
     }),
   ];
 
+  // Build final columns order
+  const selectColumn = columnHelper.display({
+    id: "select",
+    header: ({ table }) => (
+      <input
+        type="checkbox"
+        checked={table.getIsAllPageRowsSelected()}
+        onChange={table.getToggleAllPageRowsSelectedHandler()}
+        className="rounded border-gray-300"
+      />
+    ),
+    cell: ({ row }) => (
+      <input
+        type="checkbox"
+        checked={row.getIsSelected()}
+        onChange={row.getToggleSelectedHandler()}
+        className="rounded border-gray-300"
+      />
+    ),
+    size: 50,
+  });
+
+  // Filter/reorder if visibleColumns provided
+  let dataColumns = defaultDataColumns;
+  if (Array.isArray(visibleColumns) && visibleColumns.length > 0) {
+    const mapByKey = new Map(
+      defaultDataColumns.map((c) => [c.accessorKey || c.id, c])
+    );
+    dataColumns = visibleColumns
+      .map((key) => mapByKey.get(key))
+      .filter(Boolean);
+  }
+
+  const columns = multiSelect ? [selectColumn, ...dataColumns] : dataColumns;
+
   // Create table instance
   const table = useReactTable({
     data: employees,
@@ -367,7 +397,34 @@ const EmployeeSearchPage = ({
     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,
@@ -445,14 +502,11 @@ const EmployeeSearchPage = ({
       params.append("sort_order", sortOrder);
 
       const apiResponse = await fetch(
-        `${
-          import.meta.env.VITE_COMMON_API_BASE_URL ||
-          "https://snaps-common-api.azurewebsites.net"
-        }/api/search-employees?${params}`,
+        `https://snapdragons.azure-api.net/api/employees/search-employees?${params}`,
         {
           headers: {
             "Content-Type": "application/json",
-            "x-functions-key": functionKey,
+            Authorization: `Bearer ${accessToken}`,
           },
         }
       );
@@ -752,35 +806,36 @@ const EmployeeSearchPage = ({
                     <thead className="[&_tr]:border-b">
                       {table.getHeaderGroups().map((headerGroup) => (
                         <tr key={headerGroup.id} className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
-                          {headerGroup.headers.map((header, index) => {
-                            // Define generous column widths to avoid truncation - table will scroll if too wide
-                            const columnWidths = {
-                              0: multiSelect ? '50px' : '250px',   // Select checkbox or Name
-                              1: multiSelect ? '250px' : '180px',  // Name or Site  
-                              2: multiSelect ? '180px' : '150px',  // Site or Role
-                              3: multiSelect ? '150px' : '180px',  // Role or Manager
-                              4: multiSelect ? '180px' : '300px',  // Manager or Email
-                              5: multiSelect ? '300px' : '150px',  // Email or Start Date
-                              6: multiSelect ? '150px' : '120px',  // Start Date or Status
-                              7: multiSelect ? '120px' : '100px',  // Status or Hours/Week
-                              8: multiSelect ? '100px' : '90px',   // Hours/Week or Term Time
-                              9: multiSelect ? '90px' : '90px',    // Term Time or Maternity
-                              10: '90px' // Maternity (only if multiSelect)
+                          {headerGroup.headers.map((header) => {
+                            // Widths keyed by column id/accessor for stability when columns are customized
+                            const defaultWidthByKey = {
+                              select: '50px',
+                              full_name: multiSelect ? '250px' : '250px',
+                              site_name: '180px',
+                              role_name: '150px',
+                              manager_name: '180px',
+                              email: '300px',
+                              start_date: '150px',
+                              employee_status: '120px',
+                              total_hours_per_week: '100px',
+                              term_time_only: '90px',
+                              on_maternity_leave: '90px',
                             };
-                            
+                            const key = header.column.columnDef.accessorKey || header.column.id;
+                            const width = defaultWidthByKey[key] || '120px';
                             return (
-                            <th 
-                              key={header.id} 
-                              className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0"
-                              style={{ width: columnWidths[index] || '120px', minWidth: columnWidths[index] || '120px' }}
-                            >
-                              {header.isPlaceholder
-                                ? null
-                                : flexRender(
-                                    header.column.columnDef.header,
-                                    header.getContext()
-                                  )}
-                            </th>
+                              <th
+                                key={header.id}
+                                className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0"
+                                style={{ width, minWidth: width }}
+                              >
+                                {header.isPlaceholder
+                                  ? null
+                                  : flexRender(
+                                      header.column.columnDef.header,
+                                      header.getContext()
+                                    )}
+                              </th>
                             );
                           })}
                         </tr>

package/src/__mocks__/importMetaEnv.js

@@ -1,5 +1,4 @@
 // Mock for import.meta.env to handle Vite environment variables in Jest tests
 export default {
-  VITE_COMMON_API_FUNCTION_KEY: 'test-key',
-  VITE_COMMON_API_BASE_URL: 'https://test-api.example.com',
-}; 
+  VITE_APIM_SCOPE: 'api://test-scope/.default',
+};

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

@@ -32,6 +32,14 @@ export function DateRangePicker({
   const [internalRange, setInternalRange] = useState(selectedRange)
   const isSelectingRange = useRef(false)
 
+  const normalizeDate = (date) =>
+    date
+      ? new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
+      : null
+
+  const datesEqual = (a, b) =>
+    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) {
@@ -59,90 +67,75 @@ export function DateRangePicker({
     setInternalRange(selectedRange)
   }, [selectedRange])
 
-    const handleSelect = (range) => {
-    console.log('🔍 handleSelect called with:', range)
-    console.log('🔍 Current internalRange:', internalRange)
-    
-    // Normalize dates to avoid timezone issues
-    const normalizedRange = range ? {
-      from: range.from ? new Date(Date.UTC(range.from.getFullYear(), range.from.getMonth(), range.from.getDate())) : null,
-      to: range.to ? new Date(Date.UTC(range.to.getFullYear(), range.to.getMonth(), range.to.getDate())) : null
-    } : null
-    
-    console.log('🔍 Normalized range:', normalizedRange)
-    
-    // Implement cycling behavior: start date -> end date -> start date -> end date...
+  const handleSelect = (range, selectedDay) => {
+    if (!range || (!range.from && !range.to)) {
+      return
+    }
+
+    const normalizedRange = {
+      from: normalizeDate(range.from),
+      to: normalizeDate(range.to),
+    }
+    const normalizedSelectedDay = normalizeDate(selectedDay)
+
+    const hasCompleteCurrentRange = Boolean(
+      internalRange?.from && internalRange?.to
+    )
+
     let newRange = normalizedRange
-    
-    if (normalizedRange?.from && normalizedRange?.to) {
-      // We have both dates from react-day-picker
-      const currentFrom = internalRange?.from
-      const currentTo = internalRange?.to
-      
-      console.log('🔍 Both dates provided - from:', normalizedRange.from, 'to:', normalizedRange.to)
-      console.log('🔍 Current state - from:', currentFrom, 'to:', currentTo)
-      
-      if (currentFrom && currentTo) {
-        // We have a complete range, so the next click should start a new cycle
-        // The clicked date is the 'to' date, so use that as the new start date
-        console.log('🔍 Complete range detected, starting new cycle')
-        newRange = { from: normalizedRange.to, to: null }
-      } else if (currentFrom && !currentTo) {
-        // We have a start date but no end date, so this should complete the range
-        console.log('🔍 Completing range with end date')
-        newRange = { from: currentFrom, to: normalizedRange.to }
-      } else {
-        // No current selection, so this is the first click
-        console.log('🔍 First click, setting start date')
-        newRange = { from: normalizedRange.from, to: null }
+
+    if (normalizedRange.from && normalizedRange.to) {
+      if (hasCompleteCurrentRange && !isSelectingRange.current) {
+        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) {
-      // We only have a from date (single date selection)
-      const currentFrom = internalRange?.from
-      const currentTo = internalRange?.to
-      
-      console.log('🔍 Only from date provided:', normalizedRange.from)
-      console.log('🔍 Current state - from:', currentFrom, 'to:', currentTo)
-      
-      if (currentFrom && currentTo) {
-        // We have a complete range, so the next click should start a new cycle
-        console.log('🔍 Complete range detected, starting new cycle (single date)')
-        newRange = { from: normalizedRange.from, to: null }
-      } else if (currentFrom && !currentTo) {
-        // We have a start date but no end date, so this should complete the range
-        console.log('🔍 Completing range with end date (single date)')
-        newRange = { from: currentFrom, to: normalizedRange.from }
+    } else if (normalizedRange.from && !normalizedRange.to) {
+      if (hasCompleteCurrentRange && !isSelectingRange.current) {
+        // New cycle starting from the selected day
+        newRange = {
+          from: normalizedSelectedDay ?? normalizedRange.from,
+          to: null,
+        }
       } else {
-        // No current selection, so this is the first click
-        console.log('🔍 First click, setting start date (single date)')
-        newRange = { from: normalizedRange.from, to: null }
+        newRange = {
+          from: normalizedRange.from,
+          to: null,
+        }
       }
+    } else {
+      newRange = null
     }
-    
-    console.log('🔍 Final newRange:', newRange)
-    
-    // Update internal state immediately for UI responsiveness
+
     setInternalRange(newRange)
-    
-    // Update the selecting range flag
+
     if (newRange?.from && !newRange?.to) {
       isSelectingRange.current = true
-    } else if (newRange?.from && newRange?.to) {
-      isSelectingRange.current = false
     } else {
       isSelectingRange.current = false
     }
-    
-    // Only call onSelect when both dates are selected
-    if (newRange?.from && newRange?.to) {
-      onSelect(newRange)
-      // Don't close the popover automatically - let user click outside to close
-    } else if (!newRange?.from && !newRange?.to) {
-      // Range cleared - call onSelect immediately
+
+    if (!newRange?.from || newRange?.to) {
       onSelect(newRange)
     }
-    // Don't call onSelect when only first date is selected
-    // Popover stays open until both dates are selected or user clicks outside
   }
 
   return (
@@ -200,10 +193,9 @@ export function DateRangePicker({
             mode="range"
             defaultMonth={internalRange?.from}
             selected={internalRange}
-            onSelect={(range) => {
-              // Only handle the selection if we have a valid range
+            onSelect={(range, selectedDay) => {
               if (range && (range.from || range.to)) {
-                handleSelect(range)
+                handleSelect(range, selectedDay)
               }
             }}
             numberOfMonths={numberOfMonths}
@@ -289,7 +281,7 @@ export function DatePicker({
   }
 
   return (
-    <Popover open={isOpen} onOpenChange={setIsOpen}>
+    <Popover open={isOpen} onOpenChange={setIsOpen} modal={false}>
       <PopoverTrigger asChild>
         <Button
           variant="outline"
@@ -320,4 +312,4 @@ export function DatePicker({
       </PopoverContent>
     </Popover>
   )
-} 
+}

package/src/components/ui/popover.jsx

@@ -29,7 +29,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[60] w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
           className
         )}
         {...props} />