jett.admin.npmpackage 2.0.13 → 2.0.16

package/dist/index.mjs

@@ -14,6 +14,7 @@ var variantStyles = {
   DANGER: "bg-[#ef4444] text-white dark:text-white"
 };
 var CustomButton = ({
+  id = "button",
   variant = "DEFAULT",
   children,
   className,
@@ -29,9 +30,10 @@ var CustomButton = ({
         variantStyles[variant],
         className
       ),
-      onClick
+      onClick,
+      id: `${id}-div-1`
     },
-    icon && /* @__PURE__ */ React.createElement("div", null, icon),
+    icon && /* @__PURE__ */ React.createElement("div", { id: `${id}-div-2` }, icon),
     children
   );
 };
@@ -40,6 +42,7 @@ var CustomButton = ({
 import React2, { useState, useRef } from "react";
 import { ChevronDown, Check, Search } from "lucide-react";
 var CustomAutocomplete = ({
+  id = "autocomplete",
   label,
   value,
   onChange,
@@ -76,17 +79,19 @@ var CustomAutocomplete = ({
       className: "flex flex-col w-full relative dark:bg-[#18181b] dark:text-white",
       ref: wrapperRef,
       tabIndex: disabled ? -1 : 0,
-      onBlur: handleBlur
+      onBlur: handleBlur,
+      id: `${id}-div-1`
     },
-    heading && /* @__PURE__ */ React2.createElement("h3", { className: "text-lg font-semibold leading-6 mb-1" }, heading),
+    heading && /* @__PURE__ */ React2.createElement("h3", { className: "text-lg font-semibold leading-6 mb-1", id: `${id}-h3-1` }, heading),
     label && /* @__PURE__ */ React2.createElement(
       "label",
       {
-        className: `font-[500] text-sm leading-5 mb-1 ${heading ? "text-[#737373]" : "text-black dark:text-white"}`
+        className: `font-[500] text-sm leading-5 mb-1 ${heading ? "text-[#737373]" : "text-black dark:text-white"}`,
+        id: `${id}-label-1`
       },
       label,
       " ",
-      isRequired && /* @__PURE__ */ React2.createElement("span", { className: "text-red-500" }, "*")
+      isRequired && /* @__PURE__ */ React2.createElement("span", { className: "text-red-500", id: `${id}-span-1` }, "*")
     ),
     /* @__PURE__ */ React2.createElement(
       "div",
@@ -97,13 +102,15 @@ var CustomAutocomplete = ({
         className: `flex justify-between items-center flex-wrap gap-1 rounded-md px-3 py-2 text-sm transition border dark:border-[#303036] h-auto min-h-10 dark:bg-[#18181b] dark:text-white
           ${disabled ? "bg-gray-100 cursor-not-allowed text-gray-400" : "cursor-text"}
           ${error ? "border-red-500 bg-red-50" : "bg-white border-[hsl(0_0%_89.8%)] hover:border-gray-400 dark:bg-[#18181b] dark:text-white"}
-        `
+        `,
+        id: `${id}-div-2`
       },
-      /* @__PURE__ */ React2.createElement("div", { className: "flex flex-wrap gap-1 flex-1" }, selectedOptions.length > 0 ? selectedOptions.map((opt) => /* @__PURE__ */ React2.createElement(
+      /* @__PURE__ */ React2.createElement("div", { className: "flex flex-wrap gap-1 flex-1", id: `${id}-div-3` }, selectedOptions.length > 0 ? selectedOptions.map((opt) => /* @__PURE__ */ React2.createElement(
         "span",
         {
           key: opt.value,
-          className: "bg-[#F7FAFC] dark:bg-[#303036] border border-gray-300 px-2 dark:text-white py-0.5 rounded text-xs flex items-center gap-1"
+          className: "bg-[#F7FAFC] dark:bg-[#303036] border border-gray-300 px-2 dark:text-white py-0.5 rounded text-xs flex items-center gap-1",
+          id: `${id}-span-2`
         },
         opt.label,
         /* @__PURE__ */ React2.createElement(
@@ -113,11 +120,12 @@ var CustomAutocomplete = ({
               e.stopPropagation();
               toggleValue(opt.value);
             },
-            className: "text-gray-500 hover:text-gray-700 dark:text-white cursor-pointer dark:hover:text-white"
+            className: "text-gray-500 hover:text-gray-700 dark:text-white cursor-pointer dark:hover:text-white",
+            id: `${id}-button-1`
           },
           "\u2715"
         )
-      )) : /* @__PURE__ */ React2.createElement("span", { className: "text-gray-400" }, placeholder)),
+      )) : /* @__PURE__ */ React2.createElement("span", { className: "text-gray-400", id: `${id}-span-3` }, placeholder)),
       /* @__PURE__ */ React2.createElement(
         ChevronDown,
         {
@@ -125,55 +133,60 @@ var CustomAutocomplete = ({
         }
       )
     ),
-    !disabled && open && /* @__PURE__ */ React2.createElement("div", { className: "absolute top-full mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto dark:bg-[#18181b] dark:text-white" }, /* @__PURE__ */ React2.createElement("div", { className: "flex items-center gap-2 p-2 border-b border-gray-200" }, /* @__PURE__ */ React2.createElement(Search, { size: 16, className: "text-gray-400" }), /* @__PURE__ */ React2.createElement(
+    !disabled && open && /* @__PURE__ */ React2.createElement("div", { className: "absolute top-full mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto dark:bg-[#18181b] dark:text-white", id: `${id}-div-4` }, /* @__PURE__ */ React2.createElement("div", { className: "flex items-center gap-2 p-2 border-b border-gray-200", id: `${id}-div-5` }, /* @__PURE__ */ React2.createElement(Search, { size: 16, className: "text-gray-400" }), /* @__PURE__ */ React2.createElement(
       "input",
       {
         type: "text",
         value: search,
         onChange: (e) => setSearch(e.target.value),
         placeholder: "Search...",
-        className: "flex-1 text-sm focus:outline-none"
+        className: "flex-1 text-sm focus:outline-none",
+        id: `${id}-input-1`
       }
-    )), /* @__PURE__ */ React2.createElement("ul", null, filteredOptions.length > 0 ? filteredOptions.map((opt) => {
+    )), /* @__PURE__ */ React2.createElement("ul", { id: `${id}-ul-1` }, filteredOptions.length > 0 ? filteredOptions.map((opt) => {
       const selected = value.includes(opt.value);
       return /* @__PURE__ */ React2.createElement(
         "li",
         {
           key: opt.value,
           onClick: () => toggleValue(opt.value),
-          className: `flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-[#F7FAFC] dark:hover:bg-[#303036] ${selected ? "bg-[#F7FAFC] dark:bg-[#303036] font-medium" : ""}`
+          className: `flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-[#F7FAFC] dark:hover:bg-[#303036] ${selected ? "bg-[#F7FAFC] dark:bg-[#303036] font-medium" : ""}`,
+          id: `${id}-li-1`
         },
         /* @__PURE__ */ React2.createElement(
           "span",
           {
-            className: `w-4 h-4 flex items-center justify-center border rounded-sm ${selected ? "bg-blue-600 border-blue-600 text-white" : "border-gray-300"}`
+            className: `w-4 h-4 flex items-center justify-center border rounded-sm ${selected ? "bg-blue-600 border-blue-600 text-white" : "border-gray-300"}`,
+            id: `${id}-span-4`
           },
           selected && /* @__PURE__ */ React2.createElement(Check, { size: 14 })
         ),
         opt.label
       );
-    }) : /* @__PURE__ */ React2.createElement("li", { className: "px-3 py-2 text-sm text-gray-400" }, "No results found")))
+    }) : /* @__PURE__ */ React2.createElement("li", { className: "px-3 py-2 text-sm text-gray-400", id: `${id}-li-2` }, "No results found")))
   );
 };
 
 // src/inputs/Checkbox.jsx
 import React3 from "react";
-var CustomCheckbox = ({ onChange, checked }) => {
+var CustomCheckbox = ({ id = "checkbox", onChange, checked }) => {
   const handleChange = (e) => {
     onChange(e.target.checked);
   };
-  return /* @__PURE__ */ React3.createElement("label", { className: "inline-flex items-center cursor-pointer select-none" }, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement("label", { className: "inline-flex items-center cursor-pointer select-none", id: `${id}-label-1` }, /* @__PURE__ */ React3.createElement(
     "input",
     {
       type: "checkbox",
       checked,
       onChange: handleChange,
-      className: "peer hidden"
+      className: "peer hidden",
+      id: `${id}-input-1`
     }
   ), /* @__PURE__ */ React3.createElement(
     "span",
     {
-      className: "\r\n          w-4 h-4 flex items-center justify-center border-2 border-gray-400 rounded \r\n          peer-checked:bg-primary peer-checked:border-primary\r\n          transition-colors\r\n        "
+      className: "\r\n          w-4 h-4 flex items-center justify-center border-2 border-gray-400 rounded \r\n          peer-checked:bg-primary peer-checked:border-primary\r\n          transition-colors\r\n        ",
+      id: `${id}-span-1`
     },
     checked && /* @__PURE__ */ React3.createElement(
       "svg",
@@ -182,9 +195,10 @@ var CustomCheckbox = ({ onChange, checked }) => {
         fill: "none",
         stroke: "currentColor",
         strokeWidth: "3",
-        viewBox: "0 0 24 24"
+        viewBox: "0 0 24 24",
+        id: `${id}-svg-1`
       },
-      /* @__PURE__ */ React3.createElement("path", { d: "M5 13l4 4L19 7" })
+      /* @__PURE__ */ React3.createElement("path", { d: "M5 13l4 4L19 7", id: `${id}-path-1` })
     )
   ));
 };
@@ -197,11 +211,12 @@ var VARIANTS = {
   RED: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100",
   YELLOW: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100"
 };
-var Chip = ({ label, variant }) => {
+var Chip = ({ id = "chip", label, variant }) => {
   return /* @__PURE__ */ React4.createElement(
     "div",
     {
-      className: `inline-flex text-[12px] items-center px-3 py-1 rounded-full ${VARIANTS[variant] || VARIANTS.PRIMARY} text-sm font-[600]`
+      className: `inline-flex text-[12px] items-center px-3 py-1 rounded-full ${VARIANTS[variant] || VARIANTS.PRIMARY} text-sm font-[600]`,
+      id: `${id}-div-1`
     },
     label
   );
@@ -209,28 +224,31 @@ var Chip = ({ label, variant }) => {
 
 // src/inputs/CustomSwitch.jsx
 import React5 from "react";
-var CustomSwitch = ({ checked, onChange, label, description }) => {
-  return /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement(
+var CustomSwitch = ({ id = "custom-switch", checked, onChange, label, description }) => {
+  return /* @__PURE__ */ React5.createElement("div", { id: `${id}-div-1` }, /* @__PURE__ */ React5.createElement(
     "button",
     {
       type: "button",
       role: "switch",
       "aria-checked": checked,
       onClick: () => onChange(!checked),
-      className: `relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors ${checked ? "bg-black" : "bg-gray-300"}`
+      className: `relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors ${checked ? "bg-black" : "bg-gray-300"}`,
+      id: `${id}-button-1`
     },
     /* @__PURE__ */ React5.createElement(
       "span",
       {
-        className: `inline-block h-4 w-4 transform rounded-full bg-white shadow transition ${checked ? "translate-x-6" : "translate-x-1"}`
+        className: `inline-block h-4 w-4 transform rounded-full bg-white shadow transition ${checked ? "translate-x-6" : "translate-x-1"}`,
+        id: `${id}-span-1`
       }
     )
-  ), /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col" }, label && /* @__PURE__ */ React5.createElement("h3", { className: "font-[500] text-sm text-black mb-2" }, label), description && /* @__PURE__ */ React5.createElement("p", { className: "font-[500] text-sm text-[#737373]" }, description)));
+  ), /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col", id: `${id}-div-2` }, label && /* @__PURE__ */ React5.createElement("h3", { className: "font-[500] text-sm text-black mb-2", id: `${id}-h3-1` }, label), description && /* @__PURE__ */ React5.createElement("p", { className: "font-[500] text-sm text-[#737373]", id: `${id}-p-1` }, description)));
 };
 
 // src/inputs/Input.jsx
 import React6 from "react";
 var CustomInput = ({
+  id = "input",
   label,
   isRequired,
   value,
@@ -240,14 +258,15 @@ var CustomInput = ({
   error,
   heading
 }) => {
-  return /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col gap-1 w-full" }, heading && /* @__PURE__ */ React6.createElement("h3", { className: "text-lg font-semibold" }, heading), /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col gap-1 w-full", id: `${id}-div-1` }, heading && /* @__PURE__ */ React6.createElement("h3", { className: "text-lg font-semibold", id: `${id}-h3-1` }, heading), /* @__PURE__ */ React6.createElement(
     "label",
     {
-      className: `font-[500] text-sm ${heading ? "text-[#737373]" : "text-black"} dark:text-white`
+      className: `font-[500] text-sm ${heading ? "text-[#737373]" : "text-black"} dark:text-white`,
+      id: `${id}-label-1`
     },
     label,
     " ",
-    isRequired && /* @__PURE__ */ React6.createElement("span", { className: "text-red-500" }, "*")
+    isRequired && /* @__PURE__ */ React6.createElement("span", { className: "text-red-500", id: `${id}-span-1` }, "*")
   ), /* @__PURE__ */ React6.createElement(
     "input",
     {
@@ -260,20 +279,22 @@ var CustomInput = ({
       onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
       placeholder,
       disabled,
-      readOnly: disabled
+      readOnly: disabled,
+      id: `${id}-input-1`
     }
   ));
 };
 
 // src/inputs/ProgressBar.jsx
 import React7 from "react";
-var ProgressBar = ({ step, totalSteps }) => {
+var ProgressBar = ({ id = "progress-bar", step, totalSteps }) => {
   const progress = step / totalSteps * 100;
-  return /* @__PURE__ */ React7.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React7.createElement("p", { className: "text-gray-600 text-sm mb-2" }, "Step ", step, " of ", totalSteps), /* @__PURE__ */ React7.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2" }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement("div", { className: "mb-6", id: `${id}-div-1` }, /* @__PURE__ */ React7.createElement("p", { className: "text-gray-600 text-sm mb-2", id: `${id}-p-1` }, "Step ", step, " of ", totalSteps), /* @__PURE__ */ React7.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2", id: `${id}-div-2` }, /* @__PURE__ */ React7.createElement(
     "div",
     {
       className: "bg-black h-2 rounded-full transition-all duration-300",
-      style: { width: `${progress}%` }
+      style: { width: `${progress}%` },
+      id: `${id}-div-3`
     }
   )));
 };
@@ -282,18 +303,20 @@ var ProgressBar = ({ step, totalSteps }) => {
 import React8 from "react";
 import { Search as Search2 } from "lucide-react";
 var CustomSearch = ({
+  id = "search",
   value,
   onChange,
   placeholder = "Search Markets..."
 }) => {
-  return /* @__PURE__ */ React8.createElement("div", { className: "flex items-center border bg-transparent text-[14px] border-[hsl(0_0%_89.8%)] dark:border-[#303036] \r\n                    rounded-md h-10 px-2 w-full focus-within:outline-2 focus-within:outline-black focus-within:outline-offset-2 dark:text-white" }, /* @__PURE__ */ React8.createElement(Search2, { width: 16, height: 16, color: "gray", className: "mr-2" }), /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React8.createElement("div", { className: "flex items-center border bg-transparent text-[14px] border-[hsl(0_0%_89.8%)] dark:border-[#303036] \r\n                    rounded-md h-10 px-2 w-full focus-within:outline-2 focus-within:outline-black focus-within:outline-offset-2 dark:text-white", id: `${id}-div-1` }, /* @__PURE__ */ React8.createElement(Search2, { width: 16, height: 16, color: "gray", className: "mr-2" }), /* @__PURE__ */ React8.createElement(
     "input",
     {
       type: "text",
       value,
       onChange,
       placeholder,
-      className: "bg-transparent w-full h-full focus:outline-none"
+      className: "bg-transparent w-full h-full focus:outline-none",
+      id: `${id}-input-1`
     }
   ));
 };
@@ -301,6 +324,7 @@ var CustomSearch = ({
 // src/inputs/TextArea.jsx
 import React9 from "react";
 var CustomTextarea = ({
+  id = "text-area",
   label,
   isRequired,
   value,
@@ -311,14 +335,15 @@ var CustomTextarea = ({
   heading,
   rows = 4
 }) => {
-  return /* @__PURE__ */ React9.createElement("div", { className: "flex flex-col gap-1 w-full" }, heading && /* @__PURE__ */ React9.createElement("h3", { className: "text-lg font-semibold" }, heading), /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React9.createElement("div", { className: "flex flex-col gap-1 w-full", id: `${id}-div-1` }, heading && /* @__PURE__ */ React9.createElement("h3", { className: "text-lg font-semibold", id: `${id}-h3-1` }, heading), /* @__PURE__ */ React9.createElement(
     "label",
     {
-      className: `font-[500] text-sm ${heading ? "text-[#737373]" : "text-black"}`
+      className: `font-[500] text-sm ${heading ? "text-[#737373]" : "text-black"}`,
+      id: `${id}-label-1`
     },
     label,
     " ",
-    isRequired && /* @__PURE__ */ React9.createElement("span", { className: "text-red-500" }, "*")
+    isRequired && /* @__PURE__ */ React9.createElement("span", { className: "text-red-500", id: `${id}-span-1` }, "*")
   ), /* @__PURE__ */ React9.createElement(
     "textarea",
     {
@@ -332,7 +357,8 @@ var CustomTextarea = ({
       onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
       placeholder,
       disabled,
-      readOnly: disabled
+      readOnly: disabled,
+      id: `${id}-textarea-1`
     }
   ));
 };
@@ -341,6 +367,7 @@ var CustomTextarea = ({
 import React10, { useRef as useRef2 } from "react";
 import { Upload } from "lucide-react";
 var CustomUpload = ({
+  id = "upload",
   label = "Supporting documents",
   description = "Drop items here or Browse Files",
   accept = ".pdf,.jpg,.jpeg,.png",
@@ -359,7 +386,7 @@ var CustomUpload = ({
     }
     onChange == null ? void 0 : onChange(selectedFile);
   };
-  return /* @__PURE__ */ React10.createElement("div", { className: "flex flex-col gap-2 w-full" }, label && /* @__PURE__ */ React10.createElement("label", { className: "text-sm font-medium" }, label), /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React10.createElement("div", { className: "flex flex-col gap-2 w-full", id: `${id}-div-1` }, label && /* @__PURE__ */ React10.createElement("label", { className: "text-sm font-medium", id: `${id}-label-1` }, label), /* @__PURE__ */ React10.createElement(
     "div",
     {
       className: `border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center text-center cursor-pointer transition
@@ -372,11 +399,12 @@ var CustomUpload = ({
       onDrop: (e) => {
         e.preventDefault();
         handleFileSelect(e.dataTransfer.files);
-      }
+      },
+      id: `${id}-div-2`
     },
     /* @__PURE__ */ React10.createElement(Upload, { className: "w-6 h-6 text-gray-500 mb-2" }),
-    /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-700" }, description),
-    /* @__PURE__ */ React10.createElement("p", { className: "text-xs text-gray-500 mt-1" }, "File Supported: PDF/JPG/PNG, up to ", maxSizeMB, " MB"),
+    /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-700", id: `${id}-p-1` }, description),
+    /* @__PURE__ */ React10.createElement("p", { className: "text-xs text-gray-500 mt-1", id: `${id}-p-2` }, "File Supported: PDF/JPG/PNG, up to ", maxSizeMB, " MB"),
     /* @__PURE__ */ React10.createElement(
       "input",
       {
@@ -384,10 +412,11 @@ var CustomUpload = ({
         type: "file",
         accept,
         className: "hidden",
-        onChange: (e) => handleFileSelect(e.target.files)
+        onChange: (e) => handleFileSelect(e.target.files),
+        id: `${id}-input-1`
       }
     )
-  ), value && /* @__PURE__ */ React10.createElement("span", { className: "text-sm truncate text-gray-500" }, "Selected: ", value.name), error && /* @__PURE__ */ React10.createElement("p", { className: "text-xs text-red-500" }, error));
+  ), value && /* @__PURE__ */ React10.createElement("span", { className: "text-sm truncate text-gray-500", id: `${id}-span-1` }, "Selected: ", value.name), error && /* @__PURE__ */ React10.createElement("p", { className: "text-xs text-red-500", id: `${id}-p-3` }, error));
 };
 
 // src/sideBar/SideBar.jsx
@@ -395,11 +424,11 @@ import {
   ChevronDown as ChevronDown3,
   CircleSlash,
   Globe,
-  LogOut,
+  LogOut as LogOut3,
   Menu,
   X
 } from "lucide-react";
-import React12, { useEffect, useState as useState3, useCallback } from "react";
+import React14, { useEffect, useState as useState4, useCallback, useRef as useRef4 } from "react";
 
 // ConstantUI.js
 import {
@@ -437,7 +466,7 @@ var navItemsConstant = [
       {
         label: "Trips",
         onClick: () => {
-          window.location.href = "/corporate/trips/";
+          window.location.href = "/trips/";
         }
       },
       {
@@ -601,6 +630,7 @@ import Cookies from "js-cookie";
 import React11, { useState as useState2, useRef as useRef3 } from "react";
 import { ChevronDown as ChevronDown2, Search as Search3 } from "lucide-react";
 var CustomSelect = ({
+  id = "custom-select",
   label,
   value,
   onChange,
@@ -634,17 +664,19 @@ var CustomSelect = ({
       className: "flex flex-col w-full relative",
       ref: wrapperRef,
       tabIndex: disabled ? -1 : 0,
-      onBlur: handleBlur
+      onBlur: handleBlur,
+      id: `${id}-div-1`
     },
-    heading && /* @__PURE__ */ React11.createElement("h3", { className: "text-lg font-semibold mb-1" }, heading),
+    heading && /* @__PURE__ */ React11.createElement("h3", { className: "text-lg font-semibold mb-1", id: `${id}-h3-1` }, heading),
     label && /* @__PURE__ */ React11.createElement(
       "label",
       {
-        className: `font-medium text-sm mb-1 ${heading ? "text-[#737373] dark:text-white" : "text-black dark:text-white"}`
+        className: `font-medium text-sm mb-1 ${heading ? "text-[#737373] dark:text-white" : "text-black dark:text-white"}`,
+        id: `${id}-label-1`
       },
       label,
       " ",
-      isRequired && /* @__PURE__ */ React11.createElement("span", { className: "text-red-500" }, "*")
+      isRequired && /* @__PURE__ */ React11.createElement("span", { className: "text-red-500", id: `${id}-span-1` }, "*")
     ),
     /* @__PURE__ */ React11.createElement(
       "div",
@@ -653,9 +685,10 @@ var CustomSelect = ({
         className: `flex justify-between items-center rounded-md px-3 py-2 text-sm border h-10 cursor-pointer dark:border-[#303036] dark:bg-[#18181b] dark:text-white
           ${disabled ? "bg-gray-100 text-gray-400" : "bg-white dark:bg-[#18181b] dark:text-white"}
           ${error ? "border-red-500" : "border-gray-300"}
-        `
+        `,
+        id: `${id}-div-2`
       },
-      /* @__PURE__ */ React11.createElement("span", { className: `${selectedOption ? "text-black dark:text-white" : "text-gray-400 dark:text-white"}` }, selectedOption ? selectedOption.label : placeholder),
+      /* @__PURE__ */ React11.createElement("span", { className: `${selectedOption ? "text-black dark:text-white" : "text-gray-400 dark:text-white"}`, id: `${id}-span-2` }, selectedOption ? selectedOption.label : placeholder),
       /* @__PURE__ */ React11.createElement(
         ChevronDown2,
         {
@@ -663,24 +696,26 @@ var CustomSelect = ({
         }
       )
     ),
-    open && !disabled && /* @__PURE__ */ React11.createElement("div", { className: "absolute top-full mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto dark:bg-[#18181b] dark:text-white" }, /* @__PURE__ */ React11.createElement("div", { className: "flex items-center gap-2 p-2 border-b border-gray-200" }, /* @__PURE__ */ React11.createElement(Search3, { size: 16, className: "text-gray-400" }), /* @__PURE__ */ React11.createElement(
+    open && !disabled && /* @__PURE__ */ React11.createElement("div", { className: "absolute top-full mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto dark:bg-[#18181b] dark:text-white", id: `${id}-div-3` }, /* @__PURE__ */ React11.createElement("div", { className: "flex items-center gap-2 p-2 border-b border-gray-200", id: `${id}-div-4` }, /* @__PURE__ */ React11.createElement(Search3, { size: 16, className: "text-gray-400" }), /* @__PURE__ */ React11.createElement(
       "input",
       {
         type: "text",
         value: search,
         onChange: (e) => setSearch(e.target.value),
         placeholder: "Search...",
-        className: "flex-1 text-sm focus:outline-none"
+        className: "flex-1 text-sm focus:outline-none",
+        id: `${id}-input-1`
       }
-    )), /* @__PURE__ */ React11.createElement("ul", null, filteredOptions.length > 0 ? filteredOptions.map((opt) => /* @__PURE__ */ React11.createElement(
+    )), /* @__PURE__ */ React11.createElement("ul", { id: `${id}-ul-1` }, filteredOptions.length > 0 ? filteredOptions.map((opt) => /* @__PURE__ */ React11.createElement(
       "li",
       {
         key: opt.value,
         onClick: () => handleSelect(opt.value),
-        className: `px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 dark:hover:bg-[#27272a] ${value === opt.value ? "bg-gray-100 font-medium dark:bg-[#27272a] dark:text-white" : ""}`
+        className: `px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 dark:hover:bg-[#27272a] ${value === opt.value ? "bg-gray-100 font-medium dark:bg-[#27272a] dark:text-white" : ""}`,
+        id: `${id}-li-1`
       },
       opt.label
-    )) : /* @__PURE__ */ React11.createElement("li", { className: "px-3 py-2 text-sm text-gray-400 dark:text-white" }, "No results found")))
+    )) : /* @__PURE__ */ React11.createElement("li", { className: "px-3 py-2 text-sm text-gray-400 dark:text-white", id: `${id}-li-2` }, "No results found")))
   );
 };
 
@@ -729,6 +764,15 @@ function getScopeFromJettIdCookie() {
   const data = getJettIdCookieData();
   return (data == null ? void 0 : data.Scope) ?? null;
 }
+function getProfilesFromJettIdCookie(all) {
+  const data = getJettIdCookieData();
+  if (!(data == null ? void 0 : data.Profiles)) return [];
+  if (all) return data.Profiles;
+  return data.Profiles.filter((profile) => {
+    var _a;
+    return (_a = profile.Scope) == null ? void 0 : _a.endsWith("_ENTITY");
+  });
+}
 function buildLogoUrl(CDNBasePath, logoPath) {
   const base = (CDNBasePath || "").replace(/\/$/, "");
   const path = (logoPath || "").replace(/^\//, "");
@@ -736,26 +780,258 @@ function buildLogoUrl(CDNBasePath, logoPath) {
   return `${base}/${path}`;
 }
 
+// src/sideBar/SwitchProfileSection.jsx
+import React13, { useLayoutEffect, useState as useState3 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { LogOut as LogOut2, Settings } from "lucide-react";
+
+// src/sideBar/LogoutConfirmModal.jsx
+import React12 from "react";
+import { createPortal } from "react-dom";
+import { LogOut } from "lucide-react";
+var LogoutConfirmModal = ({
+  id = "logout-confirm",
+  open,
+  onConfirm,
+  onCancel,
+  loading = false
+}) => {
+  if (!open || typeof document === "undefined") return null;
+  const handleOverlayClick = (e) => {
+    if (e.target === e.currentTarget && !loading) onCancel();
+  };
+  return createPortal(
+    /* @__PURE__ */ React12.createElement(
+      "div",
+      {
+        className: "fixed inset-0 z-[10000] flex items-center justify-center bg-black/50",
+        onClick: handleOverlayClick,
+        id: `${id}-overlay`
+      },
+      /* @__PURE__ */ React12.createElement("div", { className: "w-[360px] rounded-2xl bg-white dark:bg-[#18181b] p-6 text-center shadow-2xl", id: `${id}-dialog` }, /* @__PURE__ */ React12.createElement("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-50 dark:bg-blue-950/40", id: `${id}-icon` }, /* @__PURE__ */ React12.createElement(LogOut, { className: "text-blue-600", width: 28, height: 28 })), /* @__PURE__ */ React12.createElement("p", { className: "!text-[22px] !font-semibold text-gray-900 dark:text-white" }, "Are you sure you want to logout?"), /* @__PURE__ */ React12.createElement("div", { className: "mt-6 flex gap-3" }, /* @__PURE__ */ React12.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: onCancel,
+          disabled: loading,
+          className: "flex-1 no-wrap rounded-lg border border-gray-300 dark:border-[#303036] px-4 py-2 text-[14px] font-medium text-gray-700 dark:text-[#f4f4f5cc] cursor-pointer hover:bg-gray-50 dark:hover:bg-[#27272a] disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200",
+          id: `${id}-cancel-button`
+        },
+        "No, Keep me in"
+      ), /* @__PURE__ */ React12.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: onConfirm,
+          disabled: loading,
+          className: "flex-1 rounded-lg bg-red-600 px-4 py-2 text-[14px] font-medium text-white cursor-pointer hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200",
+          id: `${id}-confirm-button`
+        },
+        loading ? "Logging out..." : "Yes, logout"
+      )))
+    ),
+    document.body
+  );
+};
+
+// src/utils/switchProfileEncryption.js
+import forge from "node-forge";
+var RSA_MODULUS_BASE64 = "zktSGmyKa5SR8HO540HKTdgDPVmXafgGFrf4OYtRNApRssnt0hGoMU7Jitc/SVWbPstFshIi5XblbDL2NXWYhZtj4PWL4SKc1/bM02xxabPw/eFr3XAAPCF62WxAVPsJBbEoAB0AcOCeIcGHb+tzLtXQJAvOuIBsKLQiiB7/c9ltt5AVVM4si1RC3JsxpqcGTkgwnh+FMg8CFvLdHjh/oi789wj8zoGWLAdYSBBa8IoQgTuzZt1tft2LF0y4Ck3yT8F9TX5GbAiVXb0G9cM/hUmDNz/6xOvHuOfH5147tKDUNCT/sr5tEaLm5ePUmRdpoc5PZa04q1KGJ0rxf6T55E5pQ8Qh2EFr1yPyLh12wiSTRsnHwXwVsosbNNBBN3HdBOMklTQx2VJNDHpi19G+z4d1evlS8yDqNZe9QyRFKEsTd+xPg3ob3j/ObpYDOtXoMaw8fXWbvyG4MJTz7nWG5YL2s5oWSAFZ4mifgwOmM/OuTO/uholelws25k/a3+O/s5Xd/HOugBvpeb5azGLfMHrGvu6J9DSIVI28hfbaFm2+smjyLdS+5PWV2+hM9EQLgaw/euGx4Qhzo2nagLwl9+hNOZ2gjtNHJxJtbQJTNrE90d3mX2/yfxHzh8FiiAiraxiZCgdUQeEZbZNlAwQLHIYWazSqgmRhf4D1LGMMrak=";
+var RSA_EXPONENT_BASE64 = "AQAB";
+var convertModulusExponentToPem = (modulus, exponent) => {
+  const decodedModulus = forge.util.decode64(modulus);
+  const decodedExponent = forge.util.decode64(exponent);
+  const publicKey = forge.pki.setRsaPublicKey(
+    new forge.jsbn.BigInteger(forge.util.bytesToHex(decodedModulus), 16),
+    new forge.jsbn.BigInteger(forge.util.bytesToHex(decodedExponent), 16)
+  );
+  return forge.pki.publicKeyToPem(publicKey);
+};
+var cachedPemKey = null;
+var getPemKey = () => {
+  if (!cachedPemKey) {
+    cachedPemKey = convertModulusExponentToPem(RSA_MODULUS_BASE64, RSA_EXPONENT_BASE64);
+  }
+  return cachedPemKey;
+};
+var encryptForSwitchProfile = (plainText) => {
+  const publicKey = forge.pki.publicKeyFromPem(getPemKey());
+  const encrypted = publicKey.encrypt(plainText, "RSAES-PKCS1-V1_5");
+  return forge.util.encode64(encrypted).replace(/\r?\n|\r/g, "");
+};
+
+// src/sideBar/SwitchProfileSection.jsx
+var SwitchProfileSection = ({
+  id = "switch-profile",
+  open,
+  anchorRef,
+  onClose,
+  onManageProfile,
+  onProfileSwitch,
+  onTmcSettings,
+  onLogout
+}) => {
+  const [position, setPosition] = useState3(null);
+  const [showLogoutConfirm, setShowLogoutConfirm] = useState3(false);
+  const [switchingProfileId, setSwitchingProfileId] = useState3(null);
+  useLayoutEffect(() => {
+    if (!open || !(anchorRef == null ? void 0 : anchorRef.current)) return;
+    const updatePosition = () => {
+      const rect = anchorRef.current.getBoundingClientRect();
+      setPosition({
+        left: rect.right + 12,
+        bottom: window.innerHeight - rect.bottom
+      });
+    };
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [open, anchorRef]);
+  if (!open && !showLogoutConfirm || typeof document === "undefined") return null;
+  const jettIdData = getJettIdCookieData();
+  const userName = (jettIdData == null ? void 0 : jettIdData.UserName) || "";
+  const userEmail = (jettIdData == null ? void 0 : jettIdData.UserEmail) || "";
+  const currentProfileId = jettIdData == null ? void 0 : jettIdData.ProfileId;
+  const allMarkets = getProfilesFromJettIdCookie(true);
+  const markets = allMarkets.length ? allMarkets : (jettIdData == null ? void 0 : jettIdData.EntityName) ? [{ ProfileId: currentProfileId, EntityName: jettIdData.EntityName }] : [];
+  const handleConfirmLogout = () => {
+    setShowLogoutConfirm(false);
+    onLogout == null ? void 0 : onLogout();
+  };
+  const buildRequestContext = () => ({
+    UserAgent: typeof navigator !== "undefined" ? navigator.userAgent : "Mozilla/5.0",
+    TrackingId: crypto.randomUUID(),
+    TransactionId: crypto.randomUUID(),
+    CountryCode: "IN",
+    IpAddress: "127.0.0.1"
+    // Client IP cannot be retrieved from browser
+  });
+  const handleProfileSwitch = async (profile) => {
+    var _a;
+    if (switchingProfileId) return;
+    setSwitchingProfileId(profile.ProfileId);
+    try {
+      const encryptedRequest = encryptForSwitchProfile(
+        JSON.stringify({
+          ProfileToken: profile.ProfileToken,
+          ProfileId: profile.ProfileId
+        })
+      );
+      const response = await fetch(`${window.location.origin}/auth/switch/profile`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          Context: buildRequestContext(),
+          Request: encryptedRequest
+        })
+      }).then((res) => res.json());
+      if ((_a = response == null ? void 0 : response.Response) == null ? void 0 : _a.RedirectUrl) {
+        window.location.href = response.Response.RedirectUrl;
+        return;
+      }
+      setSwitchingProfileId(null);
+      onProfileSwitch == null ? void 0 : onProfileSwitch(profile);
+    } catch (error) {
+      console.error("Switch profile request failed:", error);
+      setSwitchingProfileId(null);
+      onProfileSwitch == null ? void 0 : onProfileSwitch(profile);
+    }
+  };
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, open && createPortal2(
+    /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement("div", { className: "fixed inset-0 z-[9999]", onClick: onClose, id: `${id}-backdrop` }), /* @__PURE__ */ React13.createElement(
+      "div",
+      {
+        className: "fixed w-[370px] max-h-[75vh] flex flex-col overflow-hidden bg-white dark:bg-[#18181b] rounded-xl shadow-xl border border-gray-200 dark:border-[#303036] z-[9999]",
+        style: position ? { left: position.left, bottom: position.bottom } : { left: -9999, bottom: 0 },
+        id: `${id}-panel`
+      },
+      /* @__PURE__ */ React13.createElement("div", { className: "flex items-center justify-between gap-3 p-4", id: `${id}-header` }, /* @__PURE__ */ React13.createElement("div", { className: "flex items-center gap-3 min-w-0", id: `${id}-header-user` }, /* @__PURE__ */ React13.createElement("span", { className: "relative flex shrink-0 overflow-hidden rounded-full h-10 w-10", id: `${id}-avatar` }, /* @__PURE__ */ React13.createElement("span", { className: "flex h-full w-full items-center justify-center !text-[16px] !font-normal border border-gray-200 dark:border-[#303036] rounded-full bg-muted dark:text-white" }, userName ? userName.charAt(0) : "A")), /* @__PURE__ */ React13.createElement("div", { className: "min-w-0", id: `${id}-header-text` }, /* @__PURE__ */ React13.createElement("p", { className: "!font-semibold dark:text-white !text-[15px] truncate" }, userName || "Admin"), /* @__PURE__ */ React13.createElement("p", { className: "!text-[13px] !font-normal text-gray-500 dark:text-[#f4f4f5cc] truncate" }, userEmail))), /* @__PURE__ */ React13.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: onManageProfile,
+          className: "shrink-0 whitespace-nowrap rounded-md border border-gray-300 dark:border-[#303036] px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-gray-700 dark:text-[#f4f4f5cc] cursor-pointer hover:bg-gray-50 dark:hover:bg-[#27272a] transition-colors duration-200",
+          id: `${id}-manage-profile-button`
+        },
+        "Manage Profile"
+      )),
+      /* @__PURE__ */ React13.createElement("div", { className: "border-t border-gray-200 dark:border-[#303036]" }),
+      /* @__PURE__ */ React13.createElement("div", { className: "overflow-y-auto scrollbar-hide", id: `${id}-body` }, /* @__PURE__ */ React13.createElement("p", { className: "px-4 pt-3 pb-2 text-[11px] font-semibold tracking-wider text-gray-400 uppercase", id: `${id}-markets-label` }, "Your Markets"), /* @__PURE__ */ React13.createElement("div", { className: "flex flex-col gap-1 px-2 pb-2", id: `${id}-markets-list` }, markets.length === 0 && /* @__PURE__ */ React13.createElement("p", { className: "px-2 py-2 text-[13px] text-gray-400", id: `${id}-markets-empty` }, "No markets available"), markets.map((profile) => {
+        const isCurrent = profile.ProfileId === currentProfileId;
+        const isSwitching = switchingProfileId === profile.ProfileId;
+        return /* @__PURE__ */ React13.createElement(
+          "div",
+          {
+            key: profile.ProfileId,
+            onClick: () => !isCurrent && handleProfileSwitch(profile),
+            "aria-disabled": isSwitching,
+            className: `flex items-center justify-between gap-2 rounded-lg p-3 cursor-pointer hover:bg-[#f4f4f5] dark:hover:bg-[#27272a] transition-colors duration-200 ${isCurrent ? "border border-gray-800 dark:border-white" : "border border-transparent"} ${isSwitching ? "opacity-50 pointer-events-none" : ""}`,
+            id: `${id}-market-${profile.ProfileId}`
+          },
+          /* @__PURE__ */ React13.createElement("span", { className: "!font-medium !text-[14px] dark:text-[#f4f4f5cc] truncate" }, profile.EntityName),
+          isCurrent && /* @__PURE__ */ React13.createElement("span", { className: "shrink-0 rounded-full bg-blue-600 px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-white" }, "Logged In"),
+          isSwitching && /* @__PURE__ */ React13.createElement("span", { className: "shrink-0 text-[11px] text-gray-400" }, "Switching...")
+        );
+      }))),
+      /* @__PURE__ */ React13.createElement("div", { className: "border-t border-gray-200 dark:border-[#303036]" }),
+      /* @__PURE__ */ React13.createElement("div", { className: "p-2", id: `${id}-footer` }, /* @__PURE__ */ React13.createElement(
+        "div",
+        {
+          onClick: () => {
+            onClose == null ? void 0 : onClose();
+            setShowLogoutConfirm(true);
+          },
+          className: "flex items-center gap-3 rounded-lg p-3 cursor-pointer text-red-600 hover:bg-red-50 dark:hover:bg-[#27272a] transition-colors duration-200",
+          id: `${id}-logout`
+        },
+        /* @__PURE__ */ React13.createElement(LogOut2, { width: 18, height: 18 }),
+        /* @__PURE__ */ React13.createElement("span", { className: "!font-medium !text-[14px]" }, "Logout")
+      ))
+    )),
+    document.body
+  ), /* @__PURE__ */ React13.createElement(
+    LogoutConfirmModal,
+    {
+      id: `${id}-logout-confirm`,
+      open: showLogoutConfirm,
+      onCancel: () => setShowLogoutConfirm(false),
+      onConfirm: handleConfirmLogout
+    }
+  ));
+};
+
 // src/sideBar/SideBar.jsx
 var SCOPE_LABELS = {
   TMC: "TMC Manager",
   TMC_ENTITY: "TMC Entity Manager"
 };
 var AppSideBar = ({
+  id = "side-bar",
   username,
   navItems,
   additionalItems,
-  sideBarLogo
+  sideBarLogo,
+  onManageProfile,
+  onProfileSwitch,
+  onTmcSettings,
+  onLogout
 }) => {
   var _a, _b;
-  const [authData, setAuthData] = useState3(null);
-  const [cookieUserName, setCookieUserName] = useState3(null);
-  const [scope, setScope] = useState3(null);
-  const [selectedCountry, setSelectedCountry] = useState3("dubai");
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState3(false);
-  const [openMenus, setOpenMenus] = useState3(/* @__PURE__ */ new Set());
-  const [activeMenuPath, setActiveMenuPath] = useState3(null);
-  const [currAppearance, setCurrAppearance] = useState3("light");
+  const profileCardRef = useRef4(null);
+  const [authData, setAuthData] = useState4(null);
+  const [cookieUserName, setCookieUserName] = useState4(null);
+  const [scope, setScope] = useState4(null);
+  const [selectedCountry, setSelectedCountry] = useState4("dubai");
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState4(false);
+  const [isSwitchProfileOpen, setIsSwitchProfileOpen] = useState4(false);
+  const [openMenus, setOpenMenus] = useState4(/* @__PURE__ */ new Set());
+  const [activeMenuPath, setActiveMenuPath] = useState4(null);
+  const [currAppearance, setCurrAppearance] = useState4("light");
   useEffect(() => {
     setCurrAppearance("light");
   }, []);
@@ -1025,7 +1301,7 @@ var AppSideBar = ({
       setActiveMenuPath(foundActivePath);
     }
   }, [navItemsLocal]);
-  const [currentUrl, setCurrentUrl] = useState3(
+  const [currentUrl, setCurrentUrl] = useState4(
     () => window.location.pathname + window.location.search
   );
   useEffect(() => {
@@ -1063,69 +1339,76 @@ var AppSideBar = ({
   const closeMobileMenu = () => {
     setIsMobileMenuOpen(false);
   };
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement("div", { className: "fixed top-0 left-0 w-full z-50 flex items-center justify-between px-4 py-3 bg-white dark:bg-[#18181b] border-b border-gray-200 dark:border-[#303036] shadow-lg md:hidden" }, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement("div", { className: "fixed top-0 left-0 w-full z-50 flex items-center justify-between px-4 py-3 bg-white dark:bg-[#18181b] border-b border-gray-200 dark:border-[#303036] shadow-lg md:hidden", id: `${id}-div-1` }, /* @__PURE__ */ React14.createElement(
     "button",
     {
       onClick: toggleMobileMenu,
       className: "p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-[#27272a] transition-colors",
-      "aria-label": "Toggle menu"
+      "aria-label": "Toggle menu",
+      id: `${id}-button-1`
     },
-    isMobileMenuOpen ? /* @__PURE__ */ React12.createElement(X, { className: "w-6 h-6 text-gray-700 dark:text-[#f4f4f5cc]" }) : /* @__PURE__ */ React12.createElement(Menu, { className: "w-6 h-6 text-gray-700 dark:text-[#f4f4f5cc]" })
-  ), /* @__PURE__ */ React12.createElement("div", { className: "flex-1 flex justify-center" }, sideBarLogoLocal && /* @__PURE__ */ React12.createElement(
+    isMobileMenuOpen ? /* @__PURE__ */ React14.createElement(X, { className: "w-6 h-6 text-gray-700 dark:text-[#f4f4f5cc]" }) : /* @__PURE__ */ React14.createElement(Menu, { className: "w-6 h-6 text-gray-700 dark:text-[#f4f4f5cc]" })
+  ), /* @__PURE__ */ React14.createElement("div", { className: "flex-1 flex justify-center", id: `${id}-div-2` }, sideBarLogoLocal && /* @__PURE__ */ React14.createElement(
     "img",
     {
       src: sideBarLogoLocal,
       alt: "sidebarLogo",
       width: 208,
       height: 40,
-      className: "object-contain"
+      className: "object-contain",
+      id: `${id}-img-1`
     }
-  )), /* @__PURE__ */ React12.createElement("div", { className: "w-10" })), isMobileMenuOpen && /* @__PURE__ */ React12.createElement(
+  )), /* @__PURE__ */ React14.createElement("div", { className: "w-10", id: `${id}-div-3` })), isMobileMenuOpen && /* @__PURE__ */ React14.createElement(
     "div",
     {
       className: "fixed inset-0 bg-black/80 bg-opacity-50 z-40 md:hidden",
-      onClick: closeMobileMenu
+      onClick: closeMobileMenu,
+      id: `${id}-div-4`
     }
-  ), /* @__PURE__ */ React12.createElement(
+  ), /* @__PURE__ */ React14.createElement(
     "div",
     {
-      className: `fixed top-0 left-0 md:relative w-[320px] transition-all ease-in-out delay-100 bg-white dark:bg-[#18181b] border-r border-gray-200 dark:border-[#303036] flex flex-col p-4 pt-20 md:pt-4 h-full max-h-[100vh] xs:max-md:z-40 md:max-lg:w-[280px] ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"}`
+      className: `fixed top-0 left-0 md:relative w-[320px] transition-all ease-in-out delay-100 bg-white dark:bg-[#18181b] border-r border-gray-200 dark:border-[#303036] flex flex-col p-4 pt-20 md:pt-4 h-full max-h-[100vh] xs:max-md:z-40 md:max-lg:w-[280px] ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"}`,
+      id: `${id}-div-5`
     },
-    /* @__PURE__ */ React12.createElement("div", { className: "p-2 mb-2 hidden md:block" }, /* @__PURE__ */ React12.createElement("div", { className: "flex items-center justify-center w-full h-[60px] mb-2" }, sideBarLogoLocal && /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React14.createElement("div", { className: "p-2 mb-2 hidden md:block", id: `${id}-div-6` }, /* @__PURE__ */ React14.createElement("div", { className: "flex items-center justify-center w-full h-[60px] mb-2", id: `${id}-div-7` }, sideBarLogoLocal && /* @__PURE__ */ React14.createElement(
       "img",
       {
         src: sideBarLogoLocal,
         alt: "sidebarLogo",
         width: 108,
         height: 40,
-        className: "object-contain"
+        className: "object-contain",
+        id: `${id}-img-2`
       }
     ))),
-    /* @__PURE__ */ React12.createElement("div", { className: "mb-4" }),
-    /* @__PURE__ */ React12.createElement("div", { className: "overflow-y-auto scrollbar-hide" }, /* @__PURE__ */ React12.createElement("div", null, navItemsLocal == null ? void 0 : navItemsLocal.map((item, index) => {
+    /* @__PURE__ */ React14.createElement("div", { className: "mb-4", id: `${id}-div-8` }),
+    /* @__PURE__ */ React14.createElement("div", { className: "overflow-y-auto scrollbar-hide", id: `${id}-div-9` }, /* @__PURE__ */ React14.createElement("div", { id: `${id}-div-10` }, navItemsLocal == null ? void 0 : navItemsLocal.map((item, index) => {
       const menuKey = `menu-${index}`;
       const isOpen = isMenuOpen(menuKey);
       const isActive = activeMenuPath === menuKey;
-      return /* @__PURE__ */ React12.createElement("div", { key: index, className: "" }, /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React14.createElement("div", { key: index, className: "", id: `${id}-div-11` }, /* @__PURE__ */ React14.createElement(
         "div",
         {
           className: `flex items-center gap-3 p-2.5 hover:bg-[#f4f4f5] dark:hover:bg-[#27272a] text-gray-700 dark:text-[#f4f4f5cc] cursor-pointer rounded-lg ml-2 mr-2 transition-colors duration-200 ${isActive ? "bg-[#f4f4f5] dark:bg-[#27272a]" : ""}`,
-          onClick: (e) => handleMenuClick(item, index, e)
+          onClick: (e) => handleMenuClick(item, index, e),
+          id: `${id}-div-12`
         },
-        /* @__PURE__ */ React12.createElement("div", { className: "text-primary" }, /* @__PURE__ */ React12.createElement(item.Icon, { width: 20, height: 20 })),
-        /* @__PURE__ */ React12.createElement("span", { className: "!font-medium !text-[16px] !text-[#000] dark:text-[#f4f4f5cc]" }, item.label),
-        item.isDropDown && /* @__PURE__ */ React12.createElement("div", { className: `ml-auto transition-all delay-75 ${isOpen ? "rotate-180" : ""}` }, /* @__PURE__ */ React12.createElement(ChevronDown3, { width: 20, height: 20, className: "text-gray-500 dark:text-gray-400" }))
-      ), item.options && item.options.length > 0 && /* @__PURE__ */ React12.createElement(
+        /* @__PURE__ */ React14.createElement("div", { className: "text-primary", id: `${id}-div-13` }, /* @__PURE__ */ React14.createElement(item.Icon, { width: 20, height: 20, id: `${id}-icon-1` })),
+        /* @__PURE__ */ React14.createElement("span", { className: "!font-medium !text-[16px] !text-[#000] dark:text-[#f4f4f5cc]", id: `${id}-span-1` }, item.label),
+        item.isDropDown && /* @__PURE__ */ React14.createElement("div", { className: `ml-auto transition-all delay-75 ${isOpen ? "rotate-180" : ""}`, id: `${id}-div-14` }, /* @__PURE__ */ React14.createElement(ChevronDown3, { width: 20, height: 20, className: "text-gray-500 dark:text-gray-400" }))
+      ), item.options && item.options.length > 0 && /* @__PURE__ */ React14.createElement(
         "div",
         {
-          className: `ml-[20px] overflow-hidden flex flex-col transition-all duration-200 ${isOpen ? "max-h-[1000px] min-h-[50px]" : "max-h-0"}`
+          className: `ml-[20px] overflow-hidden flex flex-col transition-all duration-200 ${isOpen ? "max-h-[1000px] min-h-[50px]" : "max-h-0"}`,
+          id: `${id}-div-15`
         },
         item.options.map((options, optionsIndex) => {
           const subMenuKey = `menu-${index}-option-${optionsIndex}`;
           const isSubMenuOpen = isMenuOpen(subMenuKey);
           const isSubActive = activeMenuPath === subMenuKey || (activeMenuPath == null ? void 0 : activeMenuPath.startsWith(`${subMenuKey}-`));
           const isDisabled = options.isDisabled;
-          return /* @__PURE__ */ React12.createElement("div", { key: optionsIndex, className: "" }, /* @__PURE__ */ React12.createElement(
+          return /* @__PURE__ */ React14.createElement("div", { key: optionsIndex, className: "", id: `${id}-div-16-${optionsIndex}` }, /* @__PURE__ */ React14.createElement(
             "div",
             {
               className: `group flex items-center gap-3 py-2 px-3 ml-4 mr-2 rounded-md transition-colors duration-200 ${isDisabled ? "cursor-not-allowed opacity-70 text-gray-400 dark:text-gray-500" : `hover:bg-[#f4f4f5] dark:hover:bg-[#27272a] text-gray-600 dark:text-[#a1a1aa] cursor-pointer ${isSubActive ? "bg-[#f4f4f5] dark:bg-[#27272a]" : ""}`}`,
@@ -1135,30 +1418,34 @@ var AppSideBar = ({
                   return;
                 }
                 handleSubMenuClick(options, optionsIndex, index, e);
-              }
+              },
+              id: `${id}-div-17-${optionsIndex}`
             },
-            /* @__PURE__ */ React12.createElement("div", null),
-            /* @__PURE__ */ React12.createElement("span", { className: `!font-medium !text-[15px] ${isDisabled ? "!text-[#3f3f46cc] dark:!text-[#a1a1aa]" : "!text-[#3f3f46cc] dark:!text-[#a1a1aa]"}` }, options.label),
-            options.isDropDown && /* @__PURE__ */ React12.createElement(
+            /* @__PURE__ */ React14.createElement("div", { id: `${id}-div-18-${optionsIndex}` }),
+            /* @__PURE__ */ React14.createElement("span", { className: `!font-medium !text-[15px] ${isDisabled ? "!text-[#3f3f46cc] dark:!text-[#a1a1aa]" : "!text-[#3f3f46cc] dark:!text-[#a1a1aa]"}`, id: `${id}-span-2-${optionsIndex}` }, options.label),
+            options.isDropDown && /* @__PURE__ */ React14.createElement(
               "div",
               {
-                className: `ml-auto transition-all delay-75 ${isSubMenuOpen ? "rotate-180" : ""}`
+                className: `ml-auto transition-all delay-75 ${isSubMenuOpen ? "rotate-180" : ""}`,
+                id: `${id}-div-19-${optionsIndex}`
               },
-              /* @__PURE__ */ React12.createElement(ChevronDown3, { width: 18, height: 18, className: "text-gray-400 dark:text-gray-500" })
+              /* @__PURE__ */ React14.createElement(ChevronDown3, { width: 18, height: 18, className: "text-gray-400 dark:text-gray-500" })
             )
-          ), options.options && options.options.length > 0 && /* @__PURE__ */ React12.createElement(
+          ), options.options && options.options.length > 0 && /* @__PURE__ */ React14.createElement(
             "div",
             {
-              className: `ml-[20px] overflow-hidden flex flex-col transition-all duration-200 ${isSubMenuOpen ? "max-h-[1000px] min-h-[50px]" : "max-h-0"}`
+              className: `ml-[20px] overflow-hidden flex flex-col transition-all duration-200 ${isSubMenuOpen ? "max-h-[1000px] min-h-[50px]" : "max-h-0"}`,
+              id: `${id}-div-20-${optionsIndex}`
             },
             options.options.map((subOption, subIndex) => {
               const isSubSubActive = activeMenuPath === `menu-${index}-option-${optionsIndex}-sub-${subOption.label}`;
-              return /* @__PURE__ */ React12.createElement(
+              return /* @__PURE__ */ React14.createElement(
                 "div",
                 {
                   key: subIndex,
                   className: `py-1.5 px-3 rounded-md hover:bg-[#f4f4f5] dark:hover:bg-[#27272a] text-gray-500 dark:text-[#71717a] font-medium text-base cursor-pointer ml-8 mr-2 transition-colors duration-200 ${isSubSubActive ? "bg-[#f4f4f5] dark:bg-[#27272a]" : ""}`,
-                  onClick: (e) => handleSubSubMenuClick(subOption, index, optionsIndex, e)
+                  onClick: (e) => handleSubSubMenuClick(subOption, index, optionsIndex, e),
+                  id: `${id}-div-21-${subIndex}`
                 },
                 subOption.label
               );
@@ -1167,22 +1454,58 @@ var AppSideBar = ({
         })
       ));
     }))),
-    /* @__PURE__ */ React12.createElement("div", { className: "mt-auto bg-[#fafafa] dark:bg-[#18181b] sticky bottom-0 mt-2" }, /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React14.createElement("div", { ref: profileCardRef, className: "relative mt-auto bg-[#fafafa] dark:bg-[#18181b] sticky bottom-0 mt-2", id: `${id}-div-22` }, /* @__PURE__ */ React14.createElement(
       "div",
       {
-        className: "flex items-center justify-between p-2 rounded-lg hover:bg-[#f4f4f5] dark:hover:bg-[#27272a] cursor-pointer transition-colors duration-200",
-        onClick: () => {
+        className: "group flex items-center justify-between p-2 rounded-lg hover:bg-[#f4f4f5] dark:hover:bg-[#27272a] cursor-pointer transition-colors duration-200",
+        onClick: () => setIsSwitchProfileOpen((prev) => !prev),
+        id: `${id}-div-23`
+      },
+      /* @__PURE__ */ React14.createElement("div", { className: "flex items-center gap-3", id: `${id}-div-24` }, /* @__PURE__ */ React14.createElement("span", { className: "relative flex shrink-0 overflow-hidden dark:bg-[#27272a] rounded-full h-10 w-10", id: `${id}-span-3` }, /* @__PURE__ */ React14.createElement("span", { className: "flex h-full w-full items-center justify-center !text-[16px] !font-normal border border-gray-200 dark:border-[#303036] rounded-full bg-muted dark:text-white", id: `${id}-span-4` }, cookieUserName ? cookieUserName.split("")[0] : "A")), /* @__PURE__ */ React14.createElement("div", { id: `${id}-div-25` }, /* @__PURE__ */ React14.createElement("p", { className: "!font-semibold dark:text-white !text-[16px]", id: `${id}-p-1` }, cookieUserName ? cookieUserName : "Admin"), /* @__PURE__ */ React14.createElement("p", { className: "!text-[14px] !font-normal dark:text-[#f4f4f5cc]", id: `${id}-p-2` }, SCOPE_LABELS[scope] ?? scope))),
+      /* @__PURE__ */ React14.createElement(
+        "span",
+        {
+          className: "opacity-0 group-hover:opacity-100 transition-opacity duration-200 !text-[14px] !font-bold text-blue-600 dark:text-blue-400 hover:underline",
+          id: `${id}-span-switch`
+        },
+        "Switch"
+      )
+    ), /* @__PURE__ */ React14.createElement(
+      SwitchProfileSection,
+      {
+        id: `${id}-switch-profile`,
+        open: isSwitchProfileOpen,
+        anchorRef: profileCardRef,
+        onClose: () => setIsSwitchProfileOpen(false),
+        onManageProfile: () => {
+          setIsSwitchProfileOpen(false);
           window.location.href = "/profile";
+        },
+        onProfileSwitch: (profile) => {
+          setIsSwitchProfileOpen(false);
+          onProfileSwitch == null ? void 0 : onProfileSwitch(profile);
+        },
+        onTmcSettings: () => {
+          setIsSwitchProfileOpen(false);
+          onTmcSettings == null ? void 0 : onTmcSettings();
+        },
+        onLogout: () => {
+          setIsSwitchProfileOpen(false);
+          if (onLogout) {
+            onLogout();
+          } else {
+            window.dispatchEvent(new Event("logout"));
+          }
         }
-      },
-      /* @__PURE__ */ React12.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React12.createElement("span", { className: "relative flex shrink-0 overflow-hidden dark:bg-[#27272a] rounded-full h-10 w-10" }, /* @__PURE__ */ React12.createElement("span", { className: "flex h-full w-full items-center justify-center !text-[16px] !font-normal border border-gray-200 dark:border-[#303036] rounded-full bg-muted dark:text-white" }, cookieUserName ? cookieUserName.split("")[0] : "A")), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("p", { className: "!font-semibold dark:text-white !text-[16px]" }, cookieUserName ? cookieUserName : "Admin"), /* @__PURE__ */ React12.createElement("p", { className: "!text-[14px] !font-normal dark:text-[#f4f4f5cc]" }, SCOPE_LABELS[scope] ?? scope)))
+      }
     ))
   ));
 };
 
 // src/RightSheet/RightSheet.jsx
-import React13, { useEffect as useEffect2, useState as useState4 } from "react";
+import React15, { useEffect as useEffect2, useState as useState5 } from "react";
 var RightSheet = ({
+  id = "right-sheet",
   open,
   setOpen,
   children,
@@ -1191,7 +1514,7 @@ var RightSheet = ({
   onAction = () => {
   }
 }) => {
-  const [visible, setVisible] = useState4(open);
+  const [visible, setVisible] = useState5(open);
   useEffect2(() => {
     if (open) {
       document.body.style.overflow = "hidden";
@@ -1213,65 +1536,72 @@ var RightSheet = ({
     handleClose();
   };
   if (!visible) return null;
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React15.createElement(
     "div",
     {
       className: "fixed inset-0 overflow-x-hidden bg-black/80 sheetPopIn h-full overflow-auto ",
-      onClick: handleClose
+      onClick: handleClose,
+      id: `${id}-div-1`
     },
-    /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React15.createElement(
       "div",
       {
         className: `absolute flex flex-col right-0 top-0 min-h-full min-w-[100%] md:min-w-[576px]
                 ${visible ? "sheetRightSlide" : "transition-all duration-200 translate-x-[100%]"} justify-between bg-[#fff] dark:bg-[#18181b] dark:text-white`,
-        onClick: (e) => e.stopPropagation()
+        onClick: (e) => e.stopPropagation(),
+        id: `${id}-div-2`
       },
-      /* @__PURE__ */ React13.createElement("div", { className: " min-h-full " }, children),
-      /* @__PURE__ */ React13.createElement("div", { className: "h-[90px] flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 p-6 border-t sticky bottom-0 bg-white border-[#e6e6e6] dark:border-[#303036] dark:bg-[#18181b] dark:text-white" }, /* @__PURE__ */ React13.createElement(CustomButton, { variant: "SECONDARY", onClick: () => handleClose() }, "Cancel"), /* @__PURE__ */ React13.createElement(CustomButton, { variant: "SECONDARY", onClick: handleAction }, actionLabel))
+      /* @__PURE__ */ React15.createElement("div", { className: " min-h-full ", id: `${id}-div-3` }, children),
+      /* @__PURE__ */ React15.createElement("div", { className: "h-[90px] flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 p-6 border-t sticky bottom-0 bg-white border-[#e6e6e6] dark:border-[#303036] dark:bg-[#18181b] dark:text-white", id: `${id}-div-4` }, /* @__PURE__ */ React15.createElement(CustomButton, { variant: "SECONDARY", onClick: () => handleClose(), id: `${id}-custom-button-1` }, "Cancel"), /* @__PURE__ */ React15.createElement(CustomButton, { variant: "SECONDARY", onClick: handleAction, id: `${id}-custom-button-2` }, actionLabel))
     )
   );
 };
 
 // src/Table/CustomTable.jsx
-import React14 from "react";
+import React16 from "react";
 var CustomTable = ({
+  id = "custom-table",
   tableHeader,
   setIsAllChecked,
   isAllChecked,
   children,
   isHideCheckbox = "false"
 }) => {
-  return /* @__PURE__ */ React14.createElement("div", { className: "border border-[#e5e5e5] dark:border-[#303036] rounded-lg overflow-x-auto" }, /* @__PURE__ */ React14.createElement("div", { className: "w-full relative overflow-x-auto" }, /* @__PURE__ */ React14.createElement("table", { className: "w-full caption-bottom text-sm overflow-x-auto bg-white dark:bg-[#18181b] table-fixed border-collapse" }, /* @__PURE__ */ React14.createElement("thead", { className: "border-b border-[#e5e5e5] dark:border-[#303036] dark:bg-[#18181b]" }, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React16.createElement("div", { className: "border border-[#e5e5e5] dark:border-[#303036] rounded-lg overflow-x-auto", id: `${id}-div-1` }, /* @__PURE__ */ React16.createElement("div", { className: "w-full relative overflow-x-auto", id: `${id}-div-2` }, /* @__PURE__ */ React16.createElement("table", { className: "w-full caption-bottom text-sm overflow-x-auto bg-white dark:bg-[#18181b] table-fixed border-collapse", id: `${id}-table-1` }, /* @__PURE__ */ React16.createElement("thead", { className: "border-b border-[#e5e5e5] dark:border-[#303036] dark:bg-[#18181b]", id: `${id}-thead-1` }, /* @__PURE__ */ React16.createElement(
     "tr",
     {
-      className: "transition-colors text-[#737373] hover:bg-muted/50 \r\n                                data-[state=selected]:bg-muted"
+      className: "transition-colors text-[#737373] hover:bg-muted/50 \r\n                                data-[state=selected]:bg-muted",
+      id: `${id}-tr-1`
     },
-    !isHideCheckbox && /* @__PURE__ */ React14.createElement("th", { className: "px-4 py-3 text-left w-[50px]" }, /* @__PURE__ */ React14.createElement(
+    !isHideCheckbox && /* @__PURE__ */ React16.createElement("th", { className: "px-4 py-3 text-left w-[50px]", id: `${id}-th-1` }, /* @__PURE__ */ React16.createElement(
       CustomCheckbox,
       {
         checked: isAllChecked,
         onChange: () => {
           setIsAllChecked(!isAllChecked);
-        }
+        },
+        id: `${id}-custom-checkbox-1`
       }
     )),
     tableHeader.map((header, index) => {
-      return /* @__PURE__ */ React14.createElement(
+      return /* @__PURE__ */ React16.createElement(
         "th",
         {
           className: `text-[#737373] px-4 py-3 text-sm dark:bg-[#18181b] font-medium ${index == tableHeader.length - 1 ? "text-right" : "text-left"}`,
-          key: header + index
+          key: header + index,
+          id: `${id}-th-2-${index}`
         },
         header
       );
     })
-  )), /* @__PURE__ */ React14.createElement("tbody", null, children))));
+  )), /* @__PURE__ */ React16.createElement("tbody", { id: `${id}-tbody-1` }, children))));
 };
 
 // src/Pagination/Pagination.jsx
-import React15, { useMemo, useState as useState5, useEffect as useEffect3 } from "react";
+import React17, { useMemo, useState as useState6, useEffect as useEffect3 } from "react";
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
 var Pagination = ({
+  id = "pagination",
   data = [],
   component: Component,
   itemsPerPage = 6,
@@ -1293,8 +1623,8 @@ var Pagination = ({
   componentProps = {},
   ...restProps
 }) => {
-  const [internalCurrentPage, setInternalCurrentPage] = useState5(1);
-  const [internalItemsPerPage, setInternalItemsPerPage] = useState5(itemsPerPage);
+  const [internalCurrentPage, setInternalCurrentPage] = useState6(1);
+  const [internalItemsPerPage, setInternalItemsPerPage] = useState6(itemsPerPage);
   const isControlled = controlledCurrentPage !== void 0;
   const isItemsPerPageControlled = controlledOnItemsPerPageChange !== void 0;
   const currentPage = isControlled ? controlledCurrentPage : internalCurrentPage;
@@ -1345,46 +1675,50 @@ var Pagination = ({
   const endItem = totalItems !== void 0 ? Math.min(currentPage * activeItemsPerPage, totalItems) : null;
   const renderContent = () => {
     if (Component) {
-      if (React15.isValidElement(Component)) {
+      if (React17.isValidElement(Component)) {
         const ComponentType = Component.type;
         const elementProps = Component.props;
         if (isTable) {
-          return /* @__PURE__ */ React15.createElement(
+          return /* @__PURE__ */ React17.createElement(
             CustomTable,
             {
               tableHeader,
-              isHideCheckbox
+              isHideCheckbox,
+              id: `${id}-custom-table-1`
             },
             data.map((item, index) => {
-              return /* @__PURE__ */ React15.createElement(
+              return /* @__PURE__ */ React17.createElement(
                 ComponentType,
                 {
                   key: item.id || item._id || index,
                   data: item,
                   ...elementProps,
                   ...componentProps,
-                  ...restProps
+                  ...restProps,
+                  id: `${id}-component-type-1-${index}`
                 }
               );
             })
           );
         } else {
           if (isTable) {
-            return /* @__PURE__ */ React15.createElement(
+            return /* @__PURE__ */ React17.createElement(
               CustomTable,
               {
                 tableHeader,
-                isHideCheckbox
+                isHideCheckbox,
+                id: `${id}-custom-table-2`
               },
               paginatedData.map((item, index) => {
-                return /* @__PURE__ */ React15.createElement(
+                return /* @__PURE__ */ React17.createElement(
                   ComponentType,
                   {
                     key: item.id || item._id || index,
                     data: item,
                     ...elementProps,
                     ...componentProps,
-                    ...restProps
+                    ...restProps,
+                    id: `${id}-component-type-2-${index}`
                   }
                 );
               })
@@ -1392,20 +1726,22 @@ var Pagination = ({
           }
         }
       } else {
-        return /* @__PURE__ */ React15.createElement(
+        return /* @__PURE__ */ React17.createElement(
           CustomTable,
           {
             tableHeader,
-            isHideCheckbox
+            isHideCheckbox,
+            id: `${id}-custom-table-3`
           },
           paginatedData.map((item, index) => {
-            return /* @__PURE__ */ React15.createElement(
+            return /* @__PURE__ */ React17.createElement(
               Component,
               {
                 key: item.id || item._id || index,
                 data: item,
                 ...componentProps,
-                ...restProps
+                ...restProps,
+                id: `${id}-component-1-${index}`
               }
             );
           })
@@ -1414,50 +1750,55 @@ var Pagination = ({
     }
     return null;
   };
-  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(React15.Fragment, null, renderContent()), /* @__PURE__ */ React15.createElement("div", { className: "flex flex-col sm:flex-row justify-between items-center gap-4 px-4 py-3 border-t border-[#e5e5e5] dark:border-[#303036] bg-white dark:bg-[#18181b] z-10" }, totalItems !== void 0 && /* @__PURE__ */ React15.createElement("div", { className: "text-sm text-[#737373] dark:text-white" }, "Showing ", startItem, " to ", endItem, " of ", totalItems, " entries"), /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(React17.Fragment, null, renderContent()), /* @__PURE__ */ React17.createElement("div", { className: "flex flex-col sm:flex-row justify-between items-center gap-4 px-4 py-3 border-t border-[#e5e5e5] dark:border-[#303036] bg-white dark:bg-[#18181b] z-10", id: `${id}-div-1` }, totalItems !== void 0 && /* @__PURE__ */ React17.createElement("div", { className: "text-sm text-[#737373] dark:text-white", id: `${id}-div-2` }, "Showing ", startItem, " to ", endItem, " of ", totalItems, " entries"), /* @__PURE__ */ React17.createElement("div", { className: "flex items-center gap-2", id: `${id}-div-3` }, /* @__PURE__ */ React17.createElement(
     "button",
     {
       onClick: () => handlePageChange(1),
       disabled: currentPage === 1,
       className: `flex items-center justify-center w-9 h-9 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-[#27272a] dark:text-gray-600" : "bg-white text-black hover:bg-gray-50 cursor-pointer dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`,
-      title: "First page"
+      title: "First page",
+      id: `${id}-button-1`
     },
-    /* @__PURE__ */ React15.createElement(ChevronsLeft, { size: 16 })
-  ), /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React17.createElement(ChevronsLeft, { size: 16 })
+  ), /* @__PURE__ */ React17.createElement(
     "button",
     {
       onClick: () => handlePageChange(currentPage - 1),
       disabled: currentPage === 1,
       className: `flex items-center justify-center w-9 h-9 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-[#27272a] dark:text-gray-600" : "bg-white text-black hover:bg-gray-50 cursor-pointer dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`,
-      title: "Previous page"
+      title: "Previous page",
+      id: `${id}-button-2`
     },
-    /* @__PURE__ */ React15.createElement(ChevronLeft, { size: 16 })
-  ), getPageNumbers().map((pageNum) => /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React17.createElement(ChevronLeft, { size: 16 })
+  ), getPageNumbers().map((pageNum) => /* @__PURE__ */ React17.createElement(
     "button",
     {
       key: pageNum,
       onClick: () => handlePageChange(pageNum),
-      className: `flex items-center justify-center min-w-9 h-9 px-3 cursor-pointer rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === pageNum ? "bg-primary text-white border-primary dark:bg-primary" : "bg-white text-black hover:bg-gray-50 dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`
+      className: `flex items-center justify-center min-w-9 h-9 px-3 cursor-pointer rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === pageNum ? "bg-primary text-white border-primary dark:bg-primary" : "bg-white text-black hover:bg-gray-50 dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`,
+      id: `${id}-button-3`
     },
     pageNum
-  )), /* @__PURE__ */ React15.createElement(
+  )), /* @__PURE__ */ React17.createElement(
     "button",
     {
       onClick: () => handlePageChange(currentPage + 1),
       disabled: currentPage === calculatedTotalPages || calculatedTotalPages === 0,
       className: `flex items-center justify-center w-9 h-9 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === calculatedTotalPages || calculatedTotalPages === 0 ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-[#27272a] dark:text-gray-600" : "bg-white text-black hover:bg-gray-50 cursor-pointer dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`,
-      title: "Next page"
+      title: "Next page",
+      id: `${id}-button-4`
     },
-    /* @__PURE__ */ React15.createElement(ChevronRight, { size: 16 })
-  ), /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React17.createElement(ChevronRight, { size: 16 })
+  ), /* @__PURE__ */ React17.createElement(
     "button",
     {
       onClick: () => handlePageChange(calculatedTotalPages),
       disabled: currentPage === calculatedTotalPages || calculatedTotalPages === 0,
       className: `flex items-center justify-center w-9 h-9 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === calculatedTotalPages || calculatedTotalPages === 0 ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-[#27272a] dark:text-gray-600" : "bg-white text-black hover:bg-gray-50 cursor-pointer dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`,
-      title: "Last page"
+      title: "Last page",
+      id: `${id}-button-5`
     },
-    /* @__PURE__ */ React15.createElement(ChevronsRight, { size: 16 })
+    /* @__PURE__ */ React17.createElement(ChevronsRight, { size: 16 })
   ))));
 };
 export {