npm - ahs-cti - Versions diffs - 1.0.0-beta.2 → 1.0.0-beta.21 - Mend

ahs-cti 1.0.0-beta.2 → 1.0.0-beta.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/README.md +639 -639
package/dist/callHistory-TZ7SSXSN.mjs +339 -0
package/dist/callHistory-TZ7SSXSN.mjs.map +1 -0
package/dist/chunk-6AM6THQM.mjs +920 -0
package/dist/chunk-6AM6THQM.mjs.map +1 -0
package/dist/index.d.mts +490 -4
package/dist/index.d.ts +491 -4
package/dist/index.js +2580 -1418
package/dist/index.js.map +1 -1
package/dist/index.mjs +1469 -1637
package/dist/index.mjs.map +1 -1
package/package.json +3 -3

package/dist/index.js CHANGED Viewed

@@ -22,6 +22,9 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -32,32 +35,1301 @@ var __copyProps = (to, from, except, desc) => {
       if (!__hasOwnProp.call(to, key) && key !== except)
         __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+// call-control-sdk/lib/utils/storage.ts
+var STORAGE_KEY;
+var init_storage = __esm({
+  "call-control-sdk/lib/utils/storage.ts"() {
+    "use strict";
+    STORAGE_KEY = "call-control-sdk-state";
+  }
+});
+// call-control-sdk/lib/permissions/sdk-constants.ts
+var SDK_WILDCARD, SDK_MENU_CODES, SDK_PERMISSIONS;
+var init_sdk_constants = __esm({
+  "call-control-sdk/lib/permissions/sdk-constants.ts"() {
+    "use strict";
+    SDK_WILDCARD = "*";
+    SDK_MENU_CODES = {
+      WILDCARD: SDK_WILDCARD,
+      CALL_HISTORY: "call_history"
+    };
+    SDK_PERMISSIONS = {
+      WILDCARD: SDK_WILDCARD,
+      // main object key constants
+      CALLS: "calls",
+      CALL_TRANSFER: "call_transfer",
+      CALL_CONFERENCE: "call_conference",
+      // in each object has items list of objects
+      CALL_INBOUND: "call_inbound",
+      CALL_OUTBOUND: "call_outbound",
+      CONFERENCE: "call_conference",
+      TRANSFER_BLIND: "call_transfer_blind",
+      TRANSFER_ATTENDED: "call_transfer_attended",
+      TRANSFER_WARM: "call_transfer_warm"
+    };
+  }
+});
+// call-control-sdk/lib/permissions/index.ts
+var init_permissions = __esm({
+  "call-control-sdk/lib/permissions/index.ts"() {
+    "use strict";
+    init_sdk_constants();
+  }
+});
+// call-control-sdk/lib/hooks/sdk-state.ts
+var import_vault, SDKStateManager, sdkStateManager;
+var init_sdk_state = __esm({
+  "call-control-sdk/lib/hooks/sdk-state.ts"() {
+    "use strict";
+    import_vault = require("@react-solutions/vault");
+    init_storage();
+    init_permissions();
+    SDKStateManager = class {
+      constructor() {
+        __publicField(this, "state");
+        __publicField(this, "listeners", []);
+        __publicField(this, "STORAGE_KEY", STORAGE_KEY);
+        __publicField(this, "apiKey");
+        __publicField(this, "tenantId");
+        this.state = this.getInitialState();
+        this.loadFromStorage();
+      }
+      getInitialState() {
+        var _a2, _b;
+        return {
+          authorization: void 0,
+          process: null,
+          agentId: "",
+          openConferenceDialog: false,
+          openCallTransferDialog: false,
+          isInitialized: false,
+          sdkConfig: {
+            disableEndCallButton: false,
+            disabledDialButton: false,
+            disabledMoreOptionsButton: false,
+            enableSmsServices: false,
+            enableQueueName: false,
+            disableCallTransferButton: false,
+            disableBlindTransfer: false,
+            disableAttendedTransfer: false,
+            disableWarmTransfer: false,
+            isDraggable: true,
+            disableSoftPhone: false,
+            disableConferenceButton: false,
+            disableHoldButton: false,
+            disableMuteButton: false,
+            disabled: {},
+            enabled: {},
+            outlined: {}
+          },
+          urlConfig: {
+            baseURL: "",
+            iframeURL: "",
+            iframeAPIURL: "",
+            webSocketURL: "",
+            coreBaseURL: "",
+            id: "",
+            password: ""
+          },
+          callStartTime: null,
+          controlPanelPosition: { x: 10, y: 10 },
+          iframePosition: {
+            x: ((_a2 = window.screen) == null ? void 0 : _a2.availWidth) - 460,
+            y: ((_b = window.screen) == null ? void 0 : _b.height) - 580
+          },
+          callData: {
+            agent_id: -1,
+            queue_name: "",
+            hold: 0,
+            mute: 0,
+            status: "",
+            type: "",
+            event_time: "",
+            phone_number: ""
+          },
+          conferenceLine: [
+            {
+              line: 1,
+              status: "IDLE",
+              type: "",
+              phone: "",
+              isMute: false,
+              isHold: false,
+              isCallStart: false,
+              isMergeCall: false
+            },
+            {
+              line: 2,
+              status: "IDLE",
+              type: "",
+              phone: "",
+              isMute: false,
+              isHold: false,
+              isCallStart: false,
+              isMergeCall: false
+            },
+            {
+              line: 3,
+              status: "IDLE",
+              type: "",
+              phone: "",
+              isMute: false,
+              isHold: false,
+              isCallStart: false,
+              isMergeCall: false
+            },
+            {
+              line: 4,
+              status: "IDLE",
+              type: "",
+              phone: "",
+              isMute: false,
+              isHold: false,
+              isCallStart: false,
+              isMergeCall: false
+            },
+            {
+              line: 5,
+              status: "IDLE",
+              type: "",
+              phone: "",
+              isMute: false,
+              isHold: false,
+              isCallStart: false,
+              isMergeCall: false
+            }
+          ],
+          hold: 0,
+          mute: 0,
+          agentStatus: "",
+          sdk: null,
+          isPermissionsLoaded: false,
+          userPermissions: null,
+          menuEntitlements: null,
+          consultInfo: null
+        };
+      }
+      loadFromStorage() {
+        var _a2, _b;
+        try {
+          const stored = (0, import_vault.getSession)(this.STORAGE_KEY);
+          if (stored) {
+            const parsedState = stored;
+            this.state = __spreadProps(__spreadValues({}, this.state), {
+              agentId: parsedState.agentId || "",
+              authorization: parsedState.authorization || void 0,
+              process: parsedState.process || null,
+              openConferenceDialog: (parsedState == null ? void 0 : parsedState.openConferenceDialog) || false,
+              openCallTransferDialog: (parsedState == null ? void 0 : parsedState.openCallTransferDialog) || false,
+              isInitialized: parsedState.isInitialized || false,
+              sdkConfig: parsedState.sdkConfig || {
+                disableEndCallButton: false,
+                disabledMoreOptionsButton: false,
+                enableSmsServices: false,
+                enableQueueName: false,
+                disabledDialButton: false,
+                disableCallTransferButton: false,
+                disableBlindTransfer: false,
+                disableAttendedTransfer: false,
+                disableWarmTransfer: false,
+                isDraggable: true,
+                disableSoftPhone: false,
+                disableConferenceButton: false,
+                disableHoldButton: false,
+                disableMuteButton: false,
+                disabled: {},
+                enabled: {},
+                outlined: {}
+              },
+              urlConfig: parsedState.urlConfig || {
+                id: "",
+                baseURL: "",
+                iframeURL: "",
+                iframeAPIURL: "",
+                webSocketURL: "",
+                coreBaseURL: "",
+                password: ""
+              },
+              callStartTime: parsedState.callStartTime || null,
+              controlPanelPosition: parsedState.controlPanelPosition || {
+                x: 10,
+                y: 10
+              },
+              iframePosition: parsedState.iframePosition || {
+                x: ((_a2 = window.screen) == null ? void 0 : _a2.availWidth) - 460,
+                y: ((_b = window.screen) == null ? void 0 : _b.height) - 580
+              },
+              callData: parsedState.callData || {
+                mobileNumber: "",
+                callReferenceId: "",
+                agent_id: "",
+                status: "",
+                type: "",
+                event_time: "",
+                phone_number: ""
+              },
+              conferenceLine: parsedState.conferenceLine && Array.isArray(parsedState.conferenceLine) && parsedState.conferenceLine.length > 0 ? parsedState.conferenceLine : this.state.conferenceLine,
+              agentStatus: parsedState.agentStatus,
+              sdk: parsedState.sdk || null,
+              isPermissionsLoaded: parsedState.isPermissionsLoaded || false,
+              userPermissions: parsedState.userPermissions || null,
+              menuEntitlements: parsedState.menuEntitlements || null
+            });
+          }
+        } catch (error) {
+          console.warn("Failed to load SDK state:", error);
+        }
+      }
+      saveToStorage() {
+        try {
+          const persistentState = {
+            agentId: this.state.agentId,
+            authorization: this.state.authorization,
+            process: this.state.process,
+            isInitialized: this.state.isInitialized,
+            openConferenceDialog: this.state.openConferenceDialog,
+            openCallTransferDialog: this.state.openCallTransferDialog,
+            sdkConfig: this.state.sdkConfig,
+            urlConfig: this.state.urlConfig,
+            callStartTime: this.state.callStartTime,
+            controlPanelPosition: this.state.controlPanelPosition,
+            iframePosition: this.state.iframePosition,
+            callData: this.state.callData,
+            conferenceLine: this.state.conferenceLine,
+            agentStatus: this.state.agentStatus,
+            sdk: this.state.sdk,
+            isPermissionsLoaded: this.state.isPermissionsLoaded,
+            userPermissions: this.state.userPermissions,
+            menuEntitlements: this.state.menuEntitlements
+          };
+          (0, import_vault.setSession)(this.STORAGE_KEY, persistentState);
+        } catch (error) {
+          console.warn("Failed to save SDK state:", error);
+        }
+      }
+      notifyListeners() {
+        this.listeners.forEach((listener) => listener());
+      }
+      validateCredentials(apiKey, tenantId) {
+        if (!apiKey || typeof apiKey !== "string" || apiKey.trim().length === 0) {
+          throw new Error("API key not available");
+        }
+        if (!tenantId || typeof tenantId !== "string" || tenantId.trim().length === 0) {
+          throw new Error("Tenant ID not available");
+        }
+        this.apiKey = apiKey.trim();
+        this.tenantId = tenantId.trim();
+      }
+      initialize(apiKey, tenantId, agentId, urlConfig, initResult, sdkConfig) {
+        var _a2;
+        this.validateCredentials(apiKey, tenantId);
+        if (!agentId || typeof agentId !== "string" || agentId.trim().length === 0) {
+          throw new Error("Agent ID not available");
+        } else {
+          this.state.agentId = agentId;
+          this.state.openConferenceDialog = false;
+          this.state.openCallTransferDialog = false;
+          this.state.authorization = initResult;
+          this.state.sdkConfig = __spreadValues(__spreadValues({
+            disableEndCallButton: false,
+            disabledDialButton: false,
+            disabledMoreOptionsButton: false,
+            enableQueueName: false,
+            disableCallTransferButton: false,
+            disableBlindTransfer: false,
+            disableAttendedTransfer: false,
+            disableWarmTransfer: false,
+            isDraggable: true,
+            disableSoftPhone: false,
+            disableConferenceButton: false,
+            disableHoldButton: false,
+            disableMuteButton: false,
+            disabled: {},
+            enabled: {},
+            outlined: {}
+          }, sdkConfig), initResult == null ? void 0 : initResult.callControls);
+          this.state.urlConfig = {
+            baseURL: (urlConfig == null ? void 0 : urlConfig.baseURL) || "",
+            iframeURL: (urlConfig == null ? void 0 : urlConfig.iframeURL) || "",
+            iframeAPIURL: (urlConfig == null ? void 0 : urlConfig.iframeAPIURL) || "",
+            webSocketURL: (urlConfig == null ? void 0 : urlConfig.webSocketURL) || "",
+            coreBaseURL: (urlConfig == null ? void 0 : urlConfig.coreBaseURL) || "",
+            id: ((_a2 = initResult == null ? void 0 : initResult.userInfo) == null ? void 0 : _a2.id) ? String(initResult.userInfo.id) : "",
+            password: (urlConfig == null ? void 0 : urlConfig.password) || ""
+          };
+          this.state.isInitialized = true;
+          this.saveToStorage();
+          this.notifyListeners();
+        }
+      }
+      getState() {
+        return __spreadValues({}, this.state);
+      }
+      getCredentials() {
+        return { apiKey: this.apiKey, tenantId: this.tenantId };
+      }
+      getSdkAuthToken() {
+        var _a2;
+        return (_a2 = this.state.authorization) == null ? void 0 : _a2.accessToken;
+      }
+      subscribe(listener) {
+        this.listeners.push(listener);
+        return () => {
+          const index = this.listeners.indexOf(listener);
+          if (index > -1) {
+            this.listeners.splice(index, 1);
+          }
+        };
+      }
+      // public setHolding(isHolding: boolean): void {
+      // 	this.state.isHolding = isHolding;
+      // 	this.saveToStorage();
+      // 	this.notifyListeners();
+      // }
+      // public setMuted(isMuted: boolean): void {
+      // 	this.state.isMuted = isMuted;
+      // 	this.saveToStorage();
+      // 	this.notifyListeners();
+      // }
+      setProcess(process) {
+        this.state.process = process;
+        this.saveToStorage();
+        this.notifyListeners();
+      }
+      setControlPanelPosition(position) {
+        this.state.controlPanelPosition = position;
+        this.saveToStorage();
+        this.notifyListeners();
+      }
+      setIframePosition(position) {
+        this.state.iframePosition = position;
+        this.saveToStorage();
+        this.notifyListeners();
+      }
+      startCall() {
+        this.state.callStartTime = Date.now();
+        this.saveToStorage();
+        this.notifyListeners();
+      }
+      endCall() {
+        this.state.callStartTime = null;
+        this.saveToStorage();
+        this.notifyListeners();
+      }
+      setInitCheck() {
+        this.state.isInitialized = false;
+        this.saveToStorage();
+        this.notifyListeners();
+      }
+      setOpenConferenceDialog(open) {
+        this.state.openConferenceDialog = open;
+        this.saveToStorage();
+        this.notifyListeners();
+      }
+      setOpenCallTransferDialog(open) {
+        this.state.openCallTransferDialog = open;
+        this.saveToStorage();
+        this.notifyListeners();
+      }
+      setConsultInfo(info) {
+        this.state.consultInfo = info;
+        this.notifyListeners();
+      }
+      setAgentStatus(status) {
+        this.state.agentStatus = status;
+        this.saveToStorage();
+        this.notifyListeners();
+      }
+      updateCallData(data) {
+        this.state.callData = __spreadValues(__spreadValues({}, this.state.callData), data);
+        this.saveToStorage();
+        this.notifyListeners();
+      }
+      updateConferenceData(data) {
+        this.state.conferenceLine = [...data];
+        this.saveToStorage();
+        this.notifyListeners();
+      }
+      setConferenceLine(line) {
+        var _a2;
+        if (!this.state.conferenceLine || !Array.isArray(this.state.conferenceLine)) {
+          this.state.conferenceLine = this.getInitialState().conferenceLine;
+        }
+        const conferenceLineData = (_a2 = this.state.conferenceLine) == null ? void 0 : _a2.map(
+          (each) => {
+            if (each.line === line.line) {
+              return line;
+            }
+            return each;
+          }
+        );
+        this.state.conferenceLine = conferenceLineData;
+        this.saveToStorage();
+        this.notifyListeners();
+      }
+      resetConferenceLines() {
+        this.state.conferenceLine = [
+          {
+            line: 1,
+            status: "IDLE",
+            type: "",
+            phone: "",
+            isMute: false,
+            isHold: false,
+            isCallStart: false,
+            isMergeCall: false
+          },
+          {
+            line: 2,
+            status: "IDLE",
+            type: "",
+            phone: "",
+            isMute: false,
+            isHold: false,
+            isCallStart: false,
+            isMergeCall: false
+          },
+          {
+            line: 3,
+            status: "IDLE",
+            type: "",
+            phone: "",
+            isMute: false,
+            isHold: false,
+            isCallStart: false,
+            isMergeCall: false
+          },
+          {
+            line: 4,
+            status: "IDLE",
+            type: "",
+            phone: "",
+            isMute: false,
+            isHold: false,
+            isCallStart: false,
+            isMergeCall: false
+          },
+          {
+            line: 5,
+            status: "IDLE",
+            type: "",
+            phone: "",
+            isMute: false,
+            isHold: false,
+            isCallStart: false,
+            isMergeCall: false
+          }
+        ];
+        this.saveToStorage();
+        this.notifyListeners();
+      }
+      clearStorageAndReset() {
+        try {
+          (0, import_vault.removeSession)(this.STORAGE_KEY);
+          this.state = this.getInitialState();
+          this.notifyListeners();
+        } catch (error) {
+          console.warn("Failed to clear:", error);
+        }
+      }
+      getConferenceLines() {
+        return this.state.conferenceLine || [];
+      }
+      /**
+       * Update SDK config with permission-based controls.
+       * Merges the provided controls with existing config.
+       */
+      updateSDKConfigFromPermissions(permissionControls) {
+        this.state.sdkConfig = __spreadValues(__spreadValues({}, this.state.sdkConfig), permissionControls);
+        this.saveToStorage();
+        this.notifyListeners();
+      }
+      /**
+       * Revert call consult controls back to the base permission-derived values.
+       * Called when a CALL_STATE event arrives without call_consult_controls.
+       */
+      resetConsultControls() {
+        const base = this.getControlsConfig();
+        this.state.sdkConfig = __spreadProps(__spreadValues({}, this.state.sdkConfig), {
+          disableEndCallButton: base.disableEndCallButton,
+          disableCallTransferButton: base.disableCallTransferButton,
+          disableConferenceButton: base.disableConferenceButton,
+          disableHoldButton: base.disableHoldButton,
+          disableMuteButton: base.disableMuteButton
+        });
+        this.saveToStorage();
+        this.notifyListeners();
+      }
+      // ============ Entitlement Logic (Ported from SDKPermissionManager) ============
+      /**
+       * Set user information (entitlements) from login response
+       */
+      setSDKPermissions(userInfo) {
+        var _a2, _b;
+        if (!userInfo) return;
+        const sdk = (_a2 = userInfo.entitlements) == null ? void 0 : _a2.sdk;
+        const sdkPermissions = Array.isArray(userInfo.permissions) ? userInfo.permissions : null;
+        const sdkMenus = Array.isArray((_b = userInfo.entitlements) == null ? void 0 : _b.menus) ? userInfo.entitlements.menus : null;
+        this.state.sdk = sdk;
+        this.state.userPermissions = sdkPermissions;
+        this.state.menuEntitlements = sdkMenus;
+        this.state.isPermissionsLoaded = true;
+        const permissionControls = this.getControlsConfig();
+        this.updateSDKConfigFromPermissions(permissionControls);
+        this.saveToStorage();
+        this.notifyListeners();
+      }
+      /**
+       * Check if a bit is enabled in entitlements
+       */
+      isBitEnabled(category, bitCode) {
+        var _a2;
+        const sdk = this.state.sdk;
+        if (!sdk) return false;
+        const categoryEntitlement = sdk[category];
+        if (!categoryEntitlement) return false;
+        if (!categoryEntitlement.enabled) return false;
+        if (!bitCode) return true;
+        const bit = (_a2 = categoryEntitlement.items) == null ? void 0 : _a2.find(
+          (item) => item.code === bitCode
+        );
+        return bit ? bit.enabled : false;
+      }
+      /** Check if the user has a specific flat permission (e.g. "calls:inbound") */
+      hasPermission(permission) {
+        const perms = this.state.userPermissions;
+        if (!perms) return false;
+        return perms.includes("*") || perms.includes(permission);
+      }
+      /** Check if any of the provided permissions is granted */
+      hasAnyPermission(permissions) {
+        return permissions.some((p) => this.hasPermission(p));
+      }
+      /** Check if all of the provided permissions are granted */
+      hasAllPermissions(permissions) {
+        return permissions.every((p) => this.hasPermission(p));
+      }
+      /** Check if a menu entitlement is enabled (e.g. "campaign"). Supports "*" wildcard. */
+      hasMenuFeature(code) {
+        const menus = this.state.menuEntitlements;
+        if (!menus) return false;
+        if (menus.some((m) => m.code === "*" && m.enabled)) return true;
+        const entry = menus.find((m) => m.code === code);
+        return entry ? entry.enabled : false;
+      }
+      /**
+       * Get SDK controls configuration derived exclusively from structured entitlements.
+       */
+      getControlsConfig() {
+        const { sdk, isPermissionsLoaded } = this.state;
+        if (!isPermissionsLoaded || !sdk) {
+          return {
+            disabledDialButton: true,
+            disableEndCallButton: true,
+            disableCallTransferButton: true,
+            disableBlindTransfer: true,
+            disableAttendedTransfer: true,
+            disableWarmTransfer: true,
+            disableConferenceButton: true,
+            disableHoldButton: true,
+            disableMuteButton: true,
+            disabledMoreOptionsButton: true
+          };
+        }
+        const isDialAllowed = this.isBitEnabled(
+          "calls",
+          SDK_PERMISSIONS.CALL_OUTBOUND
+        );
+        const isInboundAllowed = this.isBitEnabled(
+          "calls",
+          SDK_PERMISSIONS.CALL_INBOUND
+        );
+        const isAnyCallAllowed = isDialAllowed || isInboundAllowed;
+        const isHoldAllowed = isAnyCallAllowed;
+        const isMuteAllowed = isAnyCallAllowed;
+        const isEndCallAllowed = isAnyCallAllowed;
+        const isConferenceAllowed = this.isBitEnabled("call_conference", "");
+        const isTransferEnabled = this.isBitEnabled("call_transfer", "");
+        const isBlindAllowed = this.isBitEnabled(
+          "call_transfer",
+          SDK_PERMISSIONS.TRANSFER_BLIND
+        );
+        const isAttendedAllowed = this.isBitEnabled(
+          "call_transfer",
+          SDK_PERMISSIONS.TRANSFER_ATTENDED
+        );
+        const isWarmAllowed = this.isBitEnabled(
+          "call_transfer",
+          SDK_PERMISSIONS.TRANSFER_WARM
+        );
+        return {
+          disabledDialButton: !isDialAllowed,
+          disableEndCallButton: !isEndCallAllowed,
+          disableCallTransferButton: !isTransferEnabled,
+          disableBlindTransfer: !isBlindAllowed,
+          disableAttendedTransfer: !isAttendedAllowed,
+          disableWarmTransfer: !isWarmAllowed,
+          disableConferenceButton: !isConferenceAllowed,
+          disableHoldButton: !isHoldAllowed,
+          disableMuteButton: !isMuteAllowed,
+          disabledMoreOptionsButton: false
+        };
+      }
+    };
+    sdkStateManager = new SDKStateManager();
+  }
+});
+// call-control-sdk/lib/services/endPoint.ts
+var getBaseURL, getCoreURL, BASE_URL, CORE_URL, VERSION, END_POINT;
+var init_endPoint = __esm({
+  "call-control-sdk/lib/services/endPoint.ts"() {
+    "use strict";
+    init_sdk_state();
+    getBaseURL = () => {
+      var _a2, _b, _c;
+      return ((_c = (_b = (_a2 = sdkStateManager) == null ? void 0 : _a2.getState()) == null ? void 0 : _b.urlConfig) == null ? void 0 : _c.baseURL) || "";
+    };
+    getCoreURL = () => {
+      var _a2, _b, _c;
+      return ((_c = (_b = (_a2 = sdkStateManager) == null ? void 0 : _a2.getState()) == null ? void 0 : _b.urlConfig) == null ? void 0 : _c.coreBaseURL) || "";
+    };
+    BASE_URL = getBaseURL();
+    CORE_URL = getCoreURL();
+    VERSION = {
+      v1: "/api/v1"
+    };
+    END_POINT = {
+      get LOGIN() {
+        return `${getBaseURL()}${VERSION.v1}/cti/login?provider=convox`;
+      },
+      get READY_AGENT() {
+        return `${getCoreURL()}${VERSION.v1}/agents/ready`;
+      },
+      get UPDATE_AGENT_BREAK() {
+        return `${getCoreURL()}${VERSION.v1}/agents/status`;
+      },
+      get CLICK_TO_CALL() {
+        return `${getCoreURL()}${VERSION.v1}/cti/calls/dial`;
+      },
+      get HOLD_CALL() {
+        return `${getCoreURL()}${VERSION.v1}/cti/calls/hold`;
+      },
+      get MUTE_CALL() {
+        return `${getCoreURL()}${VERSION.v1}/cti/calls/mute`;
+      },
+      get UNMUTE_CALL() {
+        return `${getCoreURL()}${VERSION.v1}/cti/mute`;
+      },
+      get END_CALL() {
+        return `${getCoreURL()}${VERSION.v1}/cti/calls/hangup`;
+      },
+      get LOGOUT() {
+        return `${getBaseURL()}${VERSION.v1}/cti/logout?provider=convox`;
+      },
+      get CONFERENCE_CALL() {
+        return `${getCoreURL()}${VERSION.v1}/cti/calls/conference/add`;
+      },
+      get CONFERENCE_MERGE_CALL() {
+        return `${getCoreURL()}${VERSION.v1}/cti/calls/conference/merge`;
+      },
+      get CONFERENCE_CALL_HOLD_OR_UN_HOLD() {
+        return `${getCoreURL()}${VERSION.v1}/cti/calls/hold`;
+      },
+      get CONFERENCE_CALL_MUTE_OT_UN_MUTE() {
+        return `${getCoreURL()}${VERSION.v1}/cti/calls/mute`;
+      },
+      get CONFERENCE_CALL_END() {
+        return `${getCoreURL()}${VERSION.v1}/cti/calls/hangup`;
+      },
+      get CONFERENCE_CALL_END_ALL() {
+        return `${getCoreURL()}${VERSION.v1}/cti/calls/hangup`;
+      },
+      get CONFERENCE_CALL_TRANSFER() {
+        return `${getCoreURL()}${VERSION.v1}/cti/calls/conference/transfer`;
+      },
+      get TRANSFER_CALL() {
+        return `${getCoreURL()}${VERSION.v1}/cti/calls/transfer-call`;
+      },
+      get TRANSFER_COMPLETE() {
+        return `${getCoreURL()}${VERSION.v1}/cti/calls/transfer/complete`;
+      },
+      get TRANSFER_CANCEL() {
+        return `${getCoreURL()}${VERSION.v1}/cti/calls/transfer/cancel`;
+      },
+      get AGENTS_LIST() {
+        return `${getBaseURL()}${VERSION.v1}/cti/users`;
+      },
+      get PROCESS_LIST() {
+        return `${getBaseURL()}${VERSION.v1}/cti/processes-list`;
+      },
+      get BREAKS_LIST() {
+        return `${getBaseURL()}${VERSION.v1}/cti/breaks`;
+      },
+      get TRANSFER_TO_DETAILS() {
+        return `${getBaseURL()}${VERSION.v1}/cti/transfer-to-details?provider=convox`;
+      },
+      get SEND_NOTIFICATIONS() {
+        return `${getBaseURL()}${VERSION.v1}/cti/notifications/send`;
+      },
+      get CALL_HISTORY() {
+        return `${getBaseURL()}${VERSION.v1}/dashboard/call-history`;
+      },
+      get SENTIMENTAL_ANALYSIS() {
+        return `${getBaseURL()}${VERSION.v1}/users/get_sentiment_analysis`;
+      },
+      get DISPOSITIONS() {
+        return `${getBaseURL()}${VERSION.v1}/cti/calls/dispositions`;
+      },
+      SET_CALL_DISPOSITION: (callUuid) => `${getBaseURL()}${VERSION.v1}/calls/${callUuid}/disposition`,
+      get HOSPITALS_SERVICES() {
+        return `${getBaseURL()}${VERSION.v1}/cti/hospital/services`;
+      },
+      get BLIEND_TRANSFER() {
+        return `${getBaseURL()}${VERSION.v1}/cti/calls/blind_transfer?provider=convox`;
+      },
+      get AUTH_LOGOUT() {
+        return `${getBaseURL()}${VERSION.v1}/auth/logout`;
+      },
+      // Permissions
+      get USER_PERMISSIONS() {
+        return `${getBaseURL()}${VERSION.v1}/rbac/users/me/permissions`;
+      },
+      // Supervisor Call Monitoring (Listen / Whisper / Barge via ChanSpy)
+      get SUPERVISOR_CALL_LISTEN() {
+        return `${getBaseURL()}${VERSION.v1}/cti/supervisor/listen`;
+      },
+      get SUPERVISOR_CALL_LEAVE() {
+        return `${getBaseURL()}${VERSION.v1}/cti/supervisor/leave`;
+      },
+      get SUPERVISOR_CALL_CHANGE_MODE() {
+        return `${getBaseURL()}${VERSION.v1}/cti/supervisor/mode`;
+      },
+      // Call History pages
+      get CALLS_HISTORY() {
+        return `${getBaseURL()}${VERSION.v1}/calls/history`;
+      },
+      get MISSED_CALLS() {
+        return `${getBaseURL()}${VERSION.v1}/supervisor/missed-calls`;
+      },
+      RECORDING_BY_CALL: (call_uuid) => `${getBaseURL()}${VERSION.v1}/recordings/call/${call_uuid}`
+    };
+  }
+});
+// call-control-sdk/lib/services/axios.ts
+function getAuthToken() {
+  var _a2;
+  return (_a2 = sdkStateManager.getSdkAuthToken()) != null ? _a2 : "";
+}
+function createAxiosInstance() {
+  var _a2, _b, _c, _d;
+  const instance = import_axios.default.create({
+    // baseURL: sdkStateManager.getState()?.urlConfig?.baseURL,
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "x-tenant-id": (_b = (_a2 = sdkStateManager.getCredentials()) == null ? void 0 : _a2.tenantId) != null ? _b : "",
+      "x-api-key": (_d = (_c = sdkStateManager.getCredentials()) == null ? void 0 : _c.apiKey) != null ? _d : "",
+      Authorization: DEFAULT_TOKEN ? DEFAULT_TOKEN.startsWith("Bearer ") ? DEFAULT_TOKEN : `Bearer ${DEFAULT_TOKEN}` : ""
+    },
+    timeout: REQUEST_TIMEOUT,
+    withCredentials: false
+  });
+  instance.interceptors.request.use(
+    (config) => {
+      const token = getAuthToken();
+      if (token && config.headers) {
+        const authToken = token.startsWith("Bearer ") ? token : `Bearer ${token}`;
+        config.headers.Authorization = authToken;
+      }
+      console.log("API Request:", {
+        url: config.url,
+        method: config.method,
+        hasToken: !!token,
+        tokenStartsWithBearer: token == null ? void 0 : token.startsWith("Bearer "),
+        headers: {
+          Authorization: config.headers.Authorization,
+          "x-tenant-id": config.headers["x-tenant-id"],
+          "x-api-key": config.headers["x-api-key"]
+        }
+      });
+      config.metadata = { startTime: (/* @__PURE__ */ new Date()).getTime() };
+      return config;
+    },
+    (error) => {
+      console.error("Request interceptor error:", error);
+      return Promise.reject(error);
+    }
+  );
+  instance.interceptors.response.use(
+    (response) => {
+      return response;
+    },
+    async (error) => {
+      var _a3;
+      const originalRequest = error.config;
+      if (((_a3 = error.response) == null ? void 0 : _a3.status) === 401 && !originalRequest._retry) {
+        sdkStateManager.setInitCheck();
+        console.warn("Unauthorized request, attempting retry...");
+      }
+      if (!error.response) {
+        console.error("Network error:", error.message);
+        error.message = "Network error: Please check your internet connection";
+      }
+      if (error.response && error.response.status >= 500) {
+        console.error("Server error:", error.response.status, error.response.data);
+        error.message = "Server error: Please try again later";
+      }
+      return Promise.reject(error);
+    }
+  );
+  return instance;
+}
+var import_axios, _a, DEFAULT_TOKEN, REQUEST_TIMEOUT, axiosInstance, axios_default;
+var init_axios = __esm({
+  "call-control-sdk/lib/services/axios.ts"() {
+    "use strict";
+    import_axios = __toESM(require("axios"));
+    init_sdk_state();
+    DEFAULT_TOKEN = (_a = sdkStateManager.getSdkAuthToken()) != null ? _a : "";
+    REQUEST_TIMEOUT = 6e4;
+    axiosInstance = createAxiosInstance();
+    axios_default = axiosInstance;
+  }
+});
+// call-control-sdk/lib/services/toastMessage.tsx
+var import_react, import_material, import_jsx_runtime, ToastContext, noopToast, useToast, ToastProvider;
+var init_toastMessage = __esm({
+  "call-control-sdk/lib/services/toastMessage.tsx"() {
+    "use strict";
+    import_react = require("react");
+    import_material = require("@mui/material");
+    import_jsx_runtime = require("react/jsx-runtime");
+    ToastContext = (0, import_react.createContext)(void 0);
+    noopToast = {
+      showToast: (message, severity) => {
+        console.warn(`[Toast outside provider] ${severity != null ? severity : "info"}: ${message}`);
+      }
+    };
+    useToast = () => {
+      const ctx = (0, import_react.useContext)(ToastContext);
+      return ctx != null ? ctx : noopToast;
+    };
+    ToastProvider = ({ children }) => {
+      const [open, setOpen] = (0, import_react.useState)(false);
+      const [message, setMessage] = (0, import_react.useState)("");
+      const [severity, setSeverity] = (0, import_react.useState)("info");
+      const showToast = (msg, sev = "info") => {
+        setMessage(msg);
+        setSeverity(sev);
+        setOpen(true);
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ToastContext.Provider, { value: { showToast }, children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_material.Snackbar,
+          {
+            open,
+            color: severity,
+            autoHideDuration: 3e3,
+            onClose: () => setOpen(false),
+            anchorOrigin: { vertical: "top", horizontal: "right" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_material.Alert,
+              {
+                variant: "filled",
+                severity,
+                onClose: () => setOpen(false),
+                sx: { width: "100%" },
+                children: message
+              }
+            )
+          }
+        )
+      ] });
+    };
+  }
+});
+// call-control-sdk/lib/components/SDKProvider.tsx
+var import_react13, import_jsx_runtime4, SDKProvider;
+var init_SDKProvider = __esm({
+  "call-control-sdk/lib/components/SDKProvider.tsx"() {
+    "use strict";
+    import_react13 = require("react");
+    init_toastMessage();
+    import_jsx_runtime4 = require("react/jsx-runtime");
+    SDKProvider = (0, import_react13.memo)(({ children }) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ToastProvider, { children });
+    });
+    SDKProvider.displayName = "SDKProvider";
+  }
+});
+// call-control-sdk/lib/pages/callHistory/useCallHistory.ts
+function useCallHistory() {
+  const [calls, setCalls] = (0, import_react16.useState)([]);
+  const [missedCalls, setMissedCalls] = (0, import_react16.useState)([]);
+  const [loading, setLoading] = (0, import_react16.useState)(false);
+  const fetchCallHistory = (0, import_react16.useCallback)(async () => {
+    var _a2;
+    setLoading(true);
+    try {
+      const res = await axios_default.post(END_POINT.CALLS_HISTORY, {});
+      setCalls(Array.isArray((_a2 = res.data) == null ? void 0 : _a2.records) ? res.data.records : []);
+    } catch (e) {
+      setCalls([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  const fetchMissedCalls = (0, import_react16.useCallback)(async () => {
+    var _a2;
+    setLoading(true);
+    try {
+      const res = await axios_default.get(END_POINT.MISSED_CALLS);
+      setMissedCalls(Array.isArray((_a2 = res.data) == null ? void 0 : _a2.data) ? res.data.data : []);
+    } catch (e) {
+      setMissedCalls([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  const fetchRecording = (0, import_react16.useCallback)(async (call_uuid) => {
+    const res = await axios_default.get(END_POINT.RECORDING_BY_CALL(call_uuid), {
+      responseType: "blob"
+    });
+    return res.data;
+  }, []);
+  return {
+    calls,
+    missedCalls,
+    loading,
+    fetchCallHistory,
+    fetchMissedCalls,
+    fetchRecording
+  };
+}
+var import_react16;
+var init_useCallHistory = __esm({
+  "call-control-sdk/lib/pages/callHistory/useCallHistory.ts"() {
+    "use strict";
+    import_react16 = require("react");
+    init_axios();
+    init_endPoint();
+  }
+});
+// call-control-sdk/lib/pages/callHistory/index.tsx
+var callHistory_exports = {};
+__export(callHistory_exports, {
+  default: () => callHistory_default
+});
+function ExpandableRow({
+  row,
+  striped,
+  fetchRecording,
+  onError
+}) {
+  var _a2, _b;
+  const [open, setOpen] = (0, import_react17.useState)(false);
+  const [audioURL, setAudioURL] = (0, import_react17.useState)(null);
+  const [loadingAudio, setLoadingAudio] = (0, import_react17.useState)(false);
+  const handlePlay = async () => {
+    if (!row.recording.available) return;
+    setLoadingAudio(true);
+    try {
+      const blob = await fetchRecording(row.call_uuid);
+      setAudioURL(URL.createObjectURL(blob));
+    } catch (e) {
+      onError("Recording not available");
+    } finally {
+      setLoadingAudio(false);
+    }
+  };
+  const bg = striped ? "#fafafa" : "white";
+  const cellSx = { fontSize: "0.82rem", backgroundColor: bg };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_material6.TableRow, { hover: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableCell, { sx: __spreadProps(__spreadValues({}, cellSx), { maxWidth: 130 }), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.Tooltip, { title: row.call_uuid, arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_material6.Typography,
+        {
+          noWrap: true,
+          sx: { fontSize: 13, maxWidth: 130, overflow: "hidden", textOverflow: "ellipsis" },
+          children: row.call_uuid
+        }
+      ) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableCell, { sx: cellSx, children: row.mobile_no }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableCell, { align: "center", sx: cellSx, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_material6.Chip,
+        {
+          size: "small",
+          label: row.call_type,
+          color: row.call_type === "INCOMING" ? "success" : "primary"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableCell, { sx: cellSx, children: new Date(row.start_time).toLocaleString() }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableCell, { sx: cellSx, children: row.end_time ? new Date(row.end_time).toLocaleString() : "\u2014" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableCell, { align: "center", sx: cellSx, children: row.recording.available ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_material6.IconButton,
+        {
+          color: "primary",
+          onClick: handlePlay,
+          disabled: loadingAudio,
+          size: "small",
+          children: loadingAudio ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.CircularProgress, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_material3.PlayArrow, {})
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.Chip, { size: "small", label: "No File" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableCell, { align: "center", sx: cellSx, children: (_a2 = row.agent_id) != null ? _a2 : "\u2014" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableCell, { align: "center", sx: cellSx, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.IconButton, { onClick: () => setOpen((o) => !o), size: "small", children: open ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_material3.ExpandLess, {}) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_material3.KeyboardArrowDown, {}) }) })
+    ] }),
+    audioURL && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableCell, { colSpan: 8, sx: { p: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.Box, { p: 2, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "audio",
+      {
+        controls: true,
+        autoPlay: true,
+        src: audioURL,
+        onEnded: () => {
+          URL.revokeObjectURL(audioURL);
+          setAudioURL(null);
+        },
+        style: { width: "100%" }
+      }
+    ) }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableCell, { colSpan: 8, sx: { p: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.Collapse, { in: open, unmountOnExit: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_material6.Box, { p: 2, bgcolor: "#f9fafc", borderTop: "1px solid #eee", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.Typography, { fontWeight: 600, fontSize: "0.85rem", mb: 0.5, children: "Call Details" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_material6.Typography, { variant: "body2", fontSize: "0.82rem", children: [
+        "Call UID: ",
+        row.call_uuid
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_material6.Typography, { variant: "body2", fontSize: "0.82rem", children: [
+        "Agent: ",
+        (_b = row.agent_id) != null ? _b : "Unassigned"
+      ] })
+    ] }) }) }) })
+  ] });
+}
+var import_react17, import_material6, import_icons_material3, import_jsx_runtime8, CALL_HISTORY_COLS, MISSED_CALLS_COLS, CENTER_COLS, CallHistoryContent, MissedCallRow, CallHistory, callHistory_default;
+var init_callHistory = __esm({
+  "call-control-sdk/lib/pages/callHistory/index.tsx"() {
+    "use strict";
+    import_react17 = require("react");
+    import_material6 = require("@mui/material");
+    import_icons_material3 = require("@mui/icons-material");
+    init_SDKProvider();
+    init_toastMessage();
+    init_useCallHistory();
+    import_jsx_runtime8 = require("react/jsx-runtime");
+    CALL_HISTORY_COLS = ["Call UID", "Mobile", "Type", "Start Time", "End Time", "Recording", "Agent", "Details"];
+    MISSED_CALLS_COLS = ["Agent ID", "Agent Name", "Mobile No", "Type", "Actions"];
+    CENTER_COLS = /* @__PURE__ */ new Set(["Type", "Recording", "Agent", "Details", "Actions"]);
+    CallHistoryContent = (0, import_react17.memo)(() => {
+      const theme = (0, import_material6.useTheme)();
+      const { showToast } = useToast();
+      const { calls, missedCalls, loading, fetchCallHistory, fetchMissedCalls, fetchRecording } = useCallHistory();
+      const [filter, setFilter] = (0, import_react17.useState)("ALL");
+      const [search, setSearch] = (0, import_react17.useState)("");
+      const [showMissedCalls, setShowMissedCalls] = (0, import_react17.useState)(false);
+      (0, import_react17.useEffect)(() => {
+        if (showMissedCalls) {
+          fetchMissedCalls();
+        } else {
+          fetchCallHistory();
+        }
+      }, [showMissedCalls, fetchCallHistory, fetchMissedCalls]);
+      const filteredCalls = calls.filter((c) => filter === "ALL" || c.call_type === filter).filter((c) => c.mobile_no.toLowerCase().includes(search.toLowerCase()));
+      const filteredMissedCalls = missedCalls.filter((c) => {
+        var _a2;
+        return filter === "ALL" || ((_a2 = c.callType) == null ? void 0 : _a2.toUpperCase()) === filter;
+      }).filter((c) => {
+        var _a2, _b, _c;
+        const q = search.toLowerCase();
+        return ((_a2 = c.agentId) == null ? void 0 : _a2.toLowerCase().includes(q)) || ((_b = c.username) == null ? void 0 : _b.toLowerCase().includes(q)) || ((_c = c.mobileNumber) == null ? void 0 : _c.toLowerCase().includes(q));
+      });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_material6.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          import_material6.Box,
+          {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            px: 2,
+            py: 1.5,
+            borderBottom: "1px solid #eee",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.Typography, { fontWeight: 700, fontSize: "1rem", children: "Call History" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                import_material6.OutlinedInput,
+                {
+                  size: "small",
+                  value: search,
+                  onChange: (e) => setSearch(e.target.value),
+                  placeholder: "Search",
+                  sx: { width: 220, fontSize: "0.82rem", height: 36 },
+                  endAdornment: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.InputAdornment, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_material3.Search, { sx: { fontSize: 18, color: "#999" } }) })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_material6.Box, { py: 1.5, px: 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_material6.Stack, { direction: "row", spacing: 2, alignItems: "center", mb: 2, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              import_material6.FormControlLabel,
+              {
+                control: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  import_material6.Switch,
+                  {
+                    size: "small",
+                    checked: showMissedCalls,
+                    onChange: (_, checked) => setShowMissedCalls(checked)
+                  }
+                ),
+                label: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.Typography, { sx: { fontSize: "0.8rem", color: "#555" }, children: "Missed Calls" }),
+                sx: { ml: 0 }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              import_material6.ToggleButtonGroup,
+              {
+                value: filter,
+                exclusive: true,
+                onChange: (_, v) => v && setFilter(v),
+                size: "small",
+                sx: {
+                  border: "1px solid #ccc",
+                  borderRadius: "50px",
+                  overflow: "hidden",
+                  "& .MuiToggleButton-root": {
+                    border: "none",
+                    borderRight: "1px solid #ccc",
+                    color: "#555",
+                    fontWeight: 600,
+                    textTransform: "uppercase",
+                    fontSize: "0.72rem",
+                    px: 2,
+                    py: 0.5,
+                    borderRadius: 0,
+                    "&:last-of-type": { borderRight: "none" },
+                    "&.Mui-selected": {
+                      backgroundColor: theme.palette.primary.main,
+                      color: "#fff",
+                      "&:hover": { backgroundColor: theme.palette.primary.dark }
+                    }
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.ToggleButton, { value: "ALL", children: "All" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.ToggleButton, { value: "INCOMING", children: "Inbound" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.ToggleButton, { value: "OUTGOING", children: "Outbound" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableContainer, { component: import_material6.Paper, variant: "outlined", sx: { maxHeight: 600 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.Table, { stickyHeader: true, size: "small", children: showMissedCalls ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableRow, { children: MISSED_CALLS_COLS.map((col) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              import_material6.TableCell,
+              {
+                align: CENTER_COLS.has(col) ? "center" : "left",
+                sx: { fontWeight: 600, backgroundColor: "#f1f1f1", fontSize: "0.8rem" },
+                children: col
+              },
+              col
+            )) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableBody, { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableCell, { colSpan: 5, align: "center", sx: { py: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.CircularProgress, { size: 24 }) }) }) : filteredMissedCalls.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableCell, { colSpan: 5, align: "center", sx: { py: 4, color: "#999", fontSize: "0.82rem" }, children: "No Records Found" }) }) : filteredMissedCalls.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MissedCallRow, { row }, `${row.agentId}-${row.mobileNumber}-${i}`)) })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableRow, { children: CALL_HISTORY_COLS.map((col) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              import_material6.TableCell,
+              {
+                align: CENTER_COLS.has(col) ? "center" : "left",
+                sx: { fontWeight: 600, backgroundColor: "#f1f1f1", fontSize: "0.8rem" },
+                children: col
+              },
+              col
+            )) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableBody, { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableCell, { colSpan: 8, align: "center", sx: { py: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.CircularProgress, {}) }) }) : filteredCalls.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableCell, { colSpan: 8, align: "center", sx: { py: 4, color: "#999", fontSize: "0.82rem" }, children: "No Records Found" }) }) : filteredCalls.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              ExpandableRow,
+              {
+                row,
+                striped: i % 2 === 0,
+                fetchRecording,
+                onError: (msg) => showToast(msg, "error")
+              },
+              row.call_uuid
+            )) })
+          ] }) }) })
+        ] })
+      ] });
+    });
+    CallHistoryContent.displayName = "CallHistoryContent";
+    MissedCallRow = (0, import_react17.memo)(({ row }) => {
+      const theme = (0, import_material6.useTheme)();
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_material6.TableRow, { hover: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableCell, { sx: { fontSize: "0.82rem", color: theme.palette.primary.main }, children: row.agentId }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableCell, { sx: { fontSize: "0.82rem" }, children: row.username }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_material6.TableCell, { sx: { fontSize: "0.82rem" }, children: [
+          row.mobileNumber,
+          " (",
+          row.callCount,
+          ")"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableCell, { sx: { fontSize: "0.82rem", textTransform: "uppercase" }, children: row.callType }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableCell, { align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_material3.Phone, { sx: { color: "#c0392b", fontSize: 20, cursor: "pointer" } }) })
+      ] });
+    });
+    MissedCallRow.displayName = "MissedCallRow";
+    CallHistory = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SDKProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CallHistoryContent, {}) });
+    callHistory_default = CallHistory;
+  }
+});
 // call-control-sdk/index.ts
 var index_exports = {};
 __export(index_exports, {
   CallControlPanel: () => CallControlPanel,
+  SDKAccessDenied: () => SDKAccessDenied,
+  SDKPages: () => SDKPages,
+  SDKPermissionGuard: () => SDKPermissionGuard,
+  SDK_MENU_CODES: () => SDK_MENU_CODES,
   SDK_PERMISSIONS: () => SDK_PERMISSIONS,
+  SDK_WILDCARD: () => SDK_WILDCARD,
+  changeMonitorMode: () => changeMonitorMode,
+  clickToCall: () => clickToCall,
+  clickToConference: () => clickToConference,
+  endCall: () => endCall,
   getSDKVersion: () => getSDKVersion,
   initSDK: () => initSDK,
   isSDKInitialized: () => isSDKInitialized,
+  logout: () => logout,
+  sdkStateManager: () => sdkStateManager,
+  startMonitoring: () => startMonitoring,
+  stopMonitoring: () => stopMonitoring,
+  useCallMonitoring: () => useCallMonitoring,
   useClickToCall: () => useClickToCall,
+  useClickToConference: () => useClickToConference,
   useEndCall: () => useEndCall,
   useGetAuthorizationToken: () => useGetAuthorizationToken,
   useGetCallerData: () => useGetCallerData,
   useLogout: () => useLogout,
+  useSDKPermissions: () => useSDKPermissions,
   useSDKState: () => useSDKState
 });
 module.exports = __toCommonJS(index_exports);
@@ -130,600 +1402,51 @@ var EventTrackerSDK = class {
         await new Promise((resolve) => setTimeout(resolve, delay));
       }
     }
-    throw new Error("Max retries exceeded");
-  }
-  startPeriodicFlush() {
-    if (this.flushTimer) {
-      clearInterval(this.flushTimer);
-    }
-  }
-};
-var eventTracker = new EventTrackerSDK();
-if (typeof window !== "undefined") {
-  window.EventTracker = eventTracker;
-}
-// call-control-sdk/lib/hooks/sdk-state.ts
-var import_vault = require("@react-solutions/vault");
-// call-control-sdk/lib/utils/storage.ts
-var STORAGE_KEY = "call-control-sdk-state";
-// call-control-sdk/lib/permissions/sdk-constants.ts
-var SDK_PERMISSIONS = {
-  // main object key constants
-  CALLS: "calls",
-  CALL_TRANSFER: "call_transfer",
-  CALL_CONFERENCE: "call_conference",
-  // in each object has items list of objects
-  CALL_INBOUND: "call_inbound",
-  CALL_OUTBOUND: "call_outbound",
-  CONFERENCE: "call_conference",
-  TRANSFER_BLIND: "call_transfer_blind",
-  TRANSFER_ATTENDED: "call_transfer_attended",
-  TRANSFER_WARM: "call_transfer_warm"
-};
-// call-control-sdk/lib/hooks/sdk-state.ts
-var SDKStateManager = class {
-  constructor() {
-    __publicField(this, "state");
-    __publicField(this, "listeners", []);
-    __publicField(this, "STORAGE_KEY", STORAGE_KEY);
-    __publicField(this, "apiKey");
-    __publicField(this, "tenantId");
-    this.state = this.getInitialState();
-    this.loadFromStorage();
-  }
-  getInitialState() {
-    var _a2, _b;
-    return {
-      authorization: void 0,
-      process: null,
-      agentId: "",
-      openConferenceDialog: false,
-      openCallTransferDialog: false,
-      isInitialized: false,
-      sdkConfig: {
-        disableEndCallButton: false,
-        disabledDialButton: false,
-        disabledMoreOptionsButton: false,
-        enableSmsServices: false,
-        enableQueueName: false,
-        disableCallTransferButton: false,
-        disableBlindTransfer: false,
-        disableAttendedTransfer: false,
-        disableWarmTransfer: false,
-        isDraggable: true,
-        disableSoftPhone: false,
-        disableConferenceButton: false,
-        disableHoldButton: false,
-        disableMuteButton: false,
-        disabled: {},
-        enabled: {},
-        outlined: {}
-      },
-      urlConfig: {
-        baseURL: "",
-        iframeURL: "",
-        iframeAPIURL: "",
-        webSocketURL: "",
-        coreBaseURL: "",
-        id: "",
-        password: ""
-      },
-      callStartTime: null,
-      controlPanelPosition: { x: 10, y: 10 },
-      iframePosition: {
-        x: ((_a2 = window.screen) == null ? void 0 : _a2.availWidth) - 460,
-        y: ((_b = window.screen) == null ? void 0 : _b.height) - 580
-      },
-      callData: {
-        agent_id: -1,
-        queue_name: "",
-        hold: 0,
-        mute: 0,
-        status: "",
-        type: "",
-        event_time: "",
-        phone_number: ""
-      },
-      conferenceLine: [
-        {
-          line: 1,
-          status: "IDLE",
-          type: "",
-          phone: "",
-          isMute: false,
-          isHold: false,
-          isCallStart: false,
-          isMergeCall: false
-        },
-        {
-          line: 2,
-          status: "IDLE",
-          type: "",
-          phone: "",
-          isMute: false,
-          isHold: false,
-          isCallStart: false,
-          isMergeCall: false
-        },
-        {
-          line: 3,
-          status: "IDLE",
-          type: "",
-          phone: "",
-          isMute: false,
-          isHold: false,
-          isCallStart: false,
-          isMergeCall: false
-        },
-        {
-          line: 4,
-          status: "IDLE",
-          type: "",
-          phone: "",
-          isMute: false,
-          isHold: false,
-          isCallStart: false,
-          isMergeCall: false
-        },
-        {
-          line: 5,
-          status: "IDLE",
-          type: "",
-          phone: "",
-          isMute: false,
-          isHold: false,
-          isCallStart: false,
-          isMergeCall: false
-        }
-      ],
-      hold: 0,
-      mute: 0,
-      agentStatus: "",
-      sdk: null,
-      isPermissionsLoaded: false
-    };
-  }
-  loadFromStorage() {
-    var _a2, _b;
-    try {
-      const stored = (0, import_vault.getItem)(this.STORAGE_KEY);
-      if (stored) {
-        const parsedState = stored;
-        this.state = __spreadProps(__spreadValues({}, this.state), {
-          agentId: parsedState.agentId || "",
-          authorization: parsedState.authorization || void 0,
-          process: parsedState.process || null,
-          openConferenceDialog: (parsedState == null ? void 0 : parsedState.openConferenceDialog) || false,
-          openCallTransferDialog: (parsedState == null ? void 0 : parsedState.openCallTransferDialog) || false,
-          isInitialized: parsedState.isInitialized || false,
-          sdkConfig: parsedState.sdkConfig || {
-            disableEndCallButton: false,
-            disabledMoreOptionsButton: false,
-            enableSmsServices: false,
-            enableQueueName: false,
-            disabledDialButton: false,
-            disableCallTransferButton: false,
-            disableBlindTransfer: false,
-            disableAttendedTransfer: false,
-            disableWarmTransfer: false,
-            isDraggable: true,
-            disableSoftPhone: false,
-            disableConferenceButton: false,
-            disableHoldButton: false,
-            disableMuteButton: false,
-            disabled: {},
-            enabled: {},
-            outlined: {}
-          },
-          urlConfig: parsedState.urlConfig || {
-            id: "",
-            baseURL: "",
-            iframeURL: "",
-            iframeAPIURL: "",
-            webSocketURL: "",
-            coreBaseURL: "",
-            password: ""
-          },
-          callStartTime: parsedState.callStartTime || null,
-          controlPanelPosition: parsedState.controlPanelPosition || {
-            x: 10,
-            y: 10
-          },
-          iframePosition: parsedState.iframePosition || {
-            x: ((_a2 = window.screen) == null ? void 0 : _a2.availWidth) - 460,
-            y: ((_b = window.screen) == null ? void 0 : _b.height) - 580
-          },
-          callData: parsedState.callData || {
-            mobileNumber: "",
-            callReferenceId: "",
-            agent_id: "",
-            status: "",
-            type: "",
-            event_time: "",
-            phone_number: ""
-          },
-          conferenceLine: parsedState.conferenceLine && Array.isArray(parsedState.conferenceLine) && parsedState.conferenceLine.length > 0 ? parsedState.conferenceLine : this.state.conferenceLine,
-          agentStatus: parsedState.agentStatus,
-          sdk: parsedState.sdk || null,
-          isPermissionsLoaded: parsedState.isPermissionsLoaded || false
-        });
-      }
-    } catch (error) {
-      console.warn("Failed to load SDK state:", error);
-    }
-  }
-  saveToStorage() {
-    try {
-      const persistentState = {
-        agentId: this.state.agentId,
-        authorization: this.state.authorization,
-        process: this.state.process,
-        isInitialized: this.state.isInitialized,
-        openConferenceDialog: this.state.openConferenceDialog,
-        openCallTransferDialog: this.state.openCallTransferDialog,
-        sdkConfig: this.state.sdkConfig,
-        urlConfig: this.state.urlConfig,
-        callStartTime: this.state.callStartTime,
-        controlPanelPosition: this.state.controlPanelPosition,
-        iframePosition: this.state.iframePosition,
-        callData: this.state.callData,
-        conferenceLine: this.state.conferenceLine,
-        agentStatus: this.state.agentStatus,
-        sdk: this.state.sdk,
-        isPermissionsLoaded: this.state.isPermissionsLoaded
-      };
-      (0, import_vault.setItem)(this.STORAGE_KEY, persistentState);
-    } catch (error) {
-      console.warn("Failed to save SDK state:", error);
-    }
-  }
-  notifyListeners() {
-    this.listeners.forEach((listener) => listener());
-  }
-  validateCredentials(apiKey, tenantId) {
-    if (!apiKey || typeof apiKey !== "string" || apiKey.trim().length === 0) {
-      throw new Error("API key not available");
-    }
-    if (!tenantId || typeof tenantId !== "string" || tenantId.trim().length === 0) {
-      throw new Error("Tenant ID not available");
-    }
-    this.apiKey = apiKey.trim();
-    this.tenantId = tenantId.trim();
-  }
-  initialize(apiKey, tenantId, agentId, urlConfig, initResult, sdkConfig) {
-    this.validateCredentials(apiKey, tenantId);
-    if (!agentId || typeof agentId !== "string" || agentId.trim().length === 0) {
-      throw new Error("Agent ID not available");
-    } else {
-      this.state.agentId = agentId;
-      this.state.openConferenceDialog = false;
-      this.state.openCallTransferDialog = false;
-      this.state.authorization = initResult;
-      this.state.sdkConfig = __spreadValues(__spreadValues({
-        disableEndCallButton: false,
-        disabledDialButton: false,
-        disabledMoreOptionsButton: false,
-        enableQueueName: false,
-        disableCallTransferButton: false,
-        disableBlindTransfer: false,
-        disableAttendedTransfer: false,
-        disableWarmTransfer: false,
-        isDraggable: true,
-        disableSoftPhone: false,
-        disableConferenceButton: false,
-        disableHoldButton: false,
-        disableMuteButton: false,
-        disabled: {},
-        enabled: {},
-        outlined: {}
-      }, sdkConfig), initResult == null ? void 0 : initResult.callControls);
-      this.state.urlConfig = {
-        baseURL: (urlConfig == null ? void 0 : urlConfig.baseURL) || "",
-        iframeURL: (urlConfig == null ? void 0 : urlConfig.iframeURL) || "",
-        iframeAPIURL: (urlConfig == null ? void 0 : urlConfig.iframeAPIURL) || "",
-        webSocketURL: (urlConfig == null ? void 0 : urlConfig.webSocketURL) || "",
-        coreBaseURL: (urlConfig == null ? void 0 : urlConfig.coreBaseURL) || "",
-        id: (urlConfig == null ? void 0 : urlConfig.id) || "",
-        password: (urlConfig == null ? void 0 : urlConfig.password) || ""
-      };
-      this.state.isInitialized = true;
-      this.saveToStorage();
-      this.notifyListeners();
-    }
-  }
-  getState() {
-    return __spreadValues({}, this.state);
-  }
-  getCredentials() {
-    return { apiKey: this.apiKey, tenantId: this.tenantId };
-  }
-  getSdkAuthToken() {
-    var _a2;
-    return (_a2 = this.state.authorization) == null ? void 0 : _a2.accessToken;
-  }
-  subscribe(listener) {
-    this.listeners.push(listener);
-    return () => {
-      const index = this.listeners.indexOf(listener);
-      if (index > -1) {
-        this.listeners.splice(index, 1);
-      }
-    };
-  }
-  // public setHolding(isHolding: boolean): void {
-  // 	this.state.isHolding = isHolding;
-  // 	this.saveToStorage();
-  // 	this.notifyListeners();
-  // }
-  // public setMuted(isMuted: boolean): void {
-  // 	this.state.isMuted = isMuted;
-  // 	this.saveToStorage();
-  // 	this.notifyListeners();
-  // }
-  setProcess(process) {
-    this.state.process = process;
-    this.saveToStorage();
-    this.notifyListeners();
-  }
-  setControlPanelPosition(position) {
-    this.state.controlPanelPosition = position;
-    this.saveToStorage();
-    this.notifyListeners();
-  }
-  setIframePosition(position) {
-    this.state.iframePosition = position;
-    this.saveToStorage();
-    this.notifyListeners();
-  }
-  startCall() {
-    this.state.callStartTime = Date.now();
-    this.saveToStorage();
-    this.notifyListeners();
-  }
-  endCall() {
-    this.state.callStartTime = null;
-    this.saveToStorage();
-    this.notifyListeners();
-  }
-  setInitCheck() {
-    this.state.isInitialized = false;
-    this.saveToStorage();
-    this.notifyListeners();
-  }
-  setOpenConferenceDialog(open) {
-    this.state.openConferenceDialog = open;
-    this.saveToStorage();
-    this.notifyListeners();
-  }
-  setOpenCallTransferDialog(open) {
-    this.state.openCallTransferDialog = open;
-    this.saveToStorage();
-    this.notifyListeners();
-  }
-  setAgentStatus(status) {
-    this.state.agentStatus = status;
-    this.saveToStorage();
-    this.notifyListeners();
-  }
-  updateCallData(data) {
-    this.state.callData = __spreadValues(__spreadValues({}, this.state.callData), data);
-    this.saveToStorage();
-    this.notifyListeners();
-  }
-  updateConferenceData(data) {
-    this.state.conferenceLine = [...data];
-    this.saveToStorage();
-    this.notifyListeners();
-  }
-  setConferenceLine(line) {
-    var _a2;
-    if (!this.state.conferenceLine || !Array.isArray(this.state.conferenceLine)) {
-      this.state.conferenceLine = this.getInitialState().conferenceLine;
-    }
-    const conferenceLineData = (_a2 = this.state.conferenceLine) == null ? void 0 : _a2.map(
-      (each) => {
-        if (each.line === line.line) {
-          return line;
-        }
-        return each;
-      }
-    );
-    this.state.conferenceLine = conferenceLineData;
-    this.saveToStorage();
-    this.notifyListeners();
-  }
-  resetConferenceLines() {
-    this.state.conferenceLine = [
-      {
-        line: 1,
-        status: "IDLE",
-        type: "",
-        phone: "",
-        isMute: false,
-        isHold: false,
-        isCallStart: false,
-        isMergeCall: false
-      },
-      {
-        line: 2,
-        status: "IDLE",
-        type: "",
-        phone: "",
-        isMute: false,
-        isHold: false,
-        isCallStart: false,
-        isMergeCall: false
-      },
-      {
-        line: 3,
-        status: "IDLE",
-        type: "",
-        phone: "",
-        isMute: false,
-        isHold: false,
-        isCallStart: false,
-        isMergeCall: false
-      },
-      {
-        line: 4,
-        status: "IDLE",
-        type: "",
-        phone: "",
-        isMute: false,
-        isHold: false,
-        isCallStart: false,
-        isMergeCall: false
-      },
-      {
-        line: 5,
-        status: "IDLE",
-        type: "",
-        phone: "",
-        isMute: false,
-        isHold: false,
-        isCallStart: false,
-        isMergeCall: false
-      }
-    ];
-    this.saveToStorage();
-    this.notifyListeners();
-  }
-  clearStorageAndReset() {
-    try {
-      (0, import_vault.removeItem)(this.STORAGE_KEY);
-      this.state = this.getInitialState();
-      this.notifyListeners();
-    } catch (error) {
-      console.warn("Failed to clear:", error);
-    }
-  }
-  getConferenceLines() {
-    return this.state.conferenceLine || [];
-  }
-  /**
-   * Update SDK config with permission-based controls.
-   * Merges the provided controls with existing config.
-   */
-  updateSDKConfigFromPermissions(permissionControls) {
-    this.state.sdkConfig = __spreadValues(__spreadValues({}, this.state.sdkConfig), permissionControls);
-    this.saveToStorage();
-    this.notifyListeners();
-  }
-  // ============ Entitlement Logic (Ported from SDKPermissionManager) ============
-  /**
-   * Set user information (entitlements) from login response
-   */
-  setSDKPermissions(userInfo) {
-    var _a2;
-    if (!userInfo) return;
-    const sdk = (_a2 = userInfo.entitlements) == null ? void 0 : _a2.sdk;
-    this.state.sdk = sdk;
-    this.state.isPermissionsLoaded = true;
-    const permissionControls = this.getControlsConfig();
-    this.updateSDKConfigFromPermissions(permissionControls);
-    this.saveToStorage();
-    this.notifyListeners();
-  }
-  /**
-   * Check if a bit is enabled in entitlements
-   */
-  isBitEnabled(category, bitCode) {
-    var _a2;
-    const sdk = this.state.sdk;
-    if (!sdk) return false;
-    const categoryEntitlement = sdk[category];
-    if (!categoryEntitlement) return false;
-    if (!categoryEntitlement.enabled) return false;
-    if (!bitCode) return true;
-    const bit = (_a2 = categoryEntitlement.items) == null ? void 0 : _a2.find(
-      (item) => item.code === bitCode
-    );
-    return bit ? bit.enabled : false;
-  }
-  /**
-   * Get SDK controls configuration derived exclusively from structured entitlements.
-   */
-  getControlsConfig() {
-    const { sdk, isPermissionsLoaded } = this.state;
-    if (!isPermissionsLoaded || !sdk) {
-      return {
-        disabledDialButton: true,
-        disableEndCallButton: true,
-        disableCallTransferButton: true,
-        disableBlindTransfer: true,
-        disableAttendedTransfer: true,
-        disableWarmTransfer: true,
-        disableConferenceButton: true,
-        disableHoldButton: true,
-        disableMuteButton: true,
-        disabledMoreOptionsButton: true
-      };
-    }
-    const isDialAllowed = this.isBitEnabled(
-      "calls",
-      SDK_PERMISSIONS.CALL_OUTBOUND
-    );
-    const isInboundAllowed = this.isBitEnabled(
-      "calls",
-      SDK_PERMISSIONS.CALL_INBOUND
-    );
-    const isAnyCallAllowed = isDialAllowed || isInboundAllowed;
-    const isHoldAllowed = isAnyCallAllowed;
-    const isMuteAllowed = isAnyCallAllowed;
-    const isEndCallAllowed = isAnyCallAllowed;
-    const isConferenceAllowed = this.isBitEnabled("call_conference", "");
-    const isTransferEnabled = this.isBitEnabled("call_transfer", "");
-    const isBlindAllowed = this.isBitEnabled(
-      "call_transfer",
-      SDK_PERMISSIONS.TRANSFER_BLIND
-    );
-    const isAttendedAllowed = this.isBitEnabled(
-      "call_transfer",
-      SDK_PERMISSIONS.TRANSFER_ATTENDED
-    );
-    const isWarmAllowed = this.isBitEnabled(
-      "call_transfer",
-      SDK_PERMISSIONS.TRANSFER_WARM
-    );
-    return {
-      disabledDialButton: !isDialAllowed,
-      disableEndCallButton: !isEndCallAllowed,
-      disableCallTransferButton: !isTransferEnabled,
-      disableBlindTransfer: !isBlindAllowed,
-      disableAttendedTransfer: !isAttendedAllowed,
-      disableWarmTransfer: !isWarmAllowed,
-      disableConferenceButton: !isConferenceAllowed,
-      disableHoldButton: !isHoldAllowed,
-      disableMuteButton: !isMuteAllowed,
-      disabledMoreOptionsButton: false
-    };
+    throw new Error("Max retries exceeded");
+  }
+  startPeriodicFlush() {
+    if (this.flushTimer) {
+      clearInterval(this.flushTimer);
+    }
   }
 };
-var sdkStateManager = new SDKStateManager();
+var eventTracker = new EventTrackerSDK();
+if (typeof window !== "undefined") {
+  window.EventTracker = eventTracker;
+}
+// call-control-sdk/index.ts
+init_sdk_state();
 // call-control-sdk/lib/hooks/useLogout.ts
-var import_react = require("react");
+var import_react2 = require("react");
+init_endPoint();
+init_sdk_state();
+init_axios();
 var import_vault2 = require("@react-solutions/vault");
+init_storage();
+init_toastMessage();
 var useLogout = () => {
-  const [loading, setLoading] = (0, import_react.useState)(false);
-  const [success, setSuccess] = (0, import_react.useState)(false);
-  const [isError, setIsError] = (0, import_react.useState)(false);
-  const [error, setError] = (0, import_react.useState)(null);
-  const [data, setData] = (0, import_react.useState)(null);
-  const handleLogout = (0, import_react.useCallback)(async () => {
-    const state = (0, import_vault2.getItem)(STORAGE_KEY);
+  const [loading, setLoading] = (0, import_react2.useState)(false);
+  const [success, setSuccess] = (0, import_react2.useState)(false);
+  const [isError, setIsError] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const [data, setData] = (0, import_react2.useState)(null);
+  const { showToast } = useToast();
+  const handleLogout = (0, import_react2.useCallback)(async () => {
+    var _a2, _b;
     setLoading(true);
-    const payload = {
-      action: "LOGOUTUSER",
-      userId: state.agentId || ""
-    };
-    sdkStateManager.clearStorageAndReset();
-    (0, import_vault2.removeItem)(STORAGE_KEY);
-    setSuccess(true);
+    try {
+      await axios_default.post(END_POINT.AUTH_LOGOUT);
+    } catch (err) {
+      const message = ((_b = (_a2 = err == null ? void 0 : err.response) == null ? void 0 : _a2.data) == null ? void 0 : _b.message) || "Logout failed. Please try again.";
+      showToast(message, "error");
+    } finally {
+      sdkStateManager.clearStorageAndReset();
+      (0, import_vault2.removeSession)(STORAGE_KEY);
+      setSuccess(true);
+      setLoading(false);
+    }
   }, []);
   return {
     logout: handleLogout,
@@ -736,199 +1459,22 @@ var useLogout = () => {
 };
 // call-control-sdk/lib/hooks/useEndCall.ts
-var import_react2 = require("react");
-// call-control-sdk/lib/services/endPoint.ts
-var getBaseURL = () => {
-  var _a2, _b, _c;
-  return ((_c = (_b = (_a2 = sdkStateManager) == null ? void 0 : _a2.getState()) == null ? void 0 : _b.urlConfig) == null ? void 0 : _c.baseURL) || "";
-};
-var getCoreURL = () => {
-  var _a2, _b, _c;
-  return ((_c = (_b = (_a2 = sdkStateManager) == null ? void 0 : _a2.getState()) == null ? void 0 : _b.urlConfig) == null ? void 0 : _c.coreBaseURL) || "";
-};
-var BASE_URL = getBaseURL();
-var CORE_URL = getCoreURL();
-var VERSION = {
-  v1: "/api/v1"
-};
-var END_POINT = {
-  get LOGIN() {
-    return `${getBaseURL()}${VERSION.v1}/cti/login?provider=convox`;
-  },
-  get READY_AGENT() {
-    return `${getCoreURL()}${VERSION.v1}/agents/ready`;
-  },
-  get UPDATE_AGENT_BREAK() {
-    return `${getCoreURL()}${VERSION.v1}/agents/status`;
-  },
-  get CLICK_TO_CALL() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/dial`;
-  },
-  get HOLD_CALL() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/hold`;
-  },
-  get MUTE_CALL() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/mute`;
-  },
-  get UNMUTE_CALL() {
-    return `${getCoreURL()}${VERSION.v1}/cti/mute`;
-  },
-  get END_CALL() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/hangup`;
-  },
-  get LOGOUT() {
-    return `${getBaseURL()}${VERSION.v1}/cti/logout?provider=convox`;
-  },
-  get CONFERENCE_CALL() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/conference/add`;
-  },
-  get CONFERENCE_MERGE_CALL() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/conference/merge`;
-  },
-  get CONFERENCE_CALL_HOLD_OR_UN_HOLD() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/hold`;
-  },
-  get CONFERENCE_CALL_MUTE_OT_UN_MUTE() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/mute`;
-  },
-  get CONFERENCE_CALL_END() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/hangup`;
-  },
-  get CONFERENCE_CALL_END_ALL() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/hangup`;
-  },
-  get CONFERENCE_CALL_TRANSFER() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/conference/transfer`;
-  },
-  get TRANSFER_CALL() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/transfer-call`;
-  },
-  get AGENTS_LIST() {
-    return `${getBaseURL()}${VERSION.v1}/cti/users`;
-  },
-  get PROCESS_LIST() {
-    return `${getBaseURL()}${VERSION.v1}/cti/processes-list`;
-  },
-  get BREAKS_LIST() {
-    return `${getBaseURL()}${VERSION.v1}/cti/breaks`;
-  },
-  get TRANSFER_TO_DETAILS() {
-    return `${getBaseURL()}${VERSION.v1}/cti/transfer-to-details?provider=convox`;
-  },
-  get SEND_NOTIFICATIONS() {
-    return `${getBaseURL()}${VERSION.v1}/cti/notifications/send`;
-  },
-  get CALL_HISTORY() {
-    return `${getBaseURL()}${VERSION.v1}/dashboard/call-history`;
-  },
-  get SENTIMENTAL_ANALYSIS() {
-    return `${getBaseURL()}${VERSION.v1}/users/get_sentiment_analysis`;
-  },
-  get DISPOSITIONS() {
-    return `${getBaseURL()}${VERSION.v1}/cti/calls/dispositions`;
-  },
-  SET_CALL_DISPOSITION: (callUuid) => `${getBaseURL()}${VERSION.v1}/calls/${callUuid}/disposition`,
-  get HOSPITALS_SERVICES() {
-    return `${getBaseURL()}${VERSION.v1}/cti/hospital/services`;
-  },
-  get BLIEND_TRANSFER() {
-    return `${getBaseURL()}${VERSION.v1}/cti/calls/blind_transfer?provider=convox`;
-  },
-  // Permissions
-  get USER_PERMISSIONS() {
-    return `${getBaseURL()}${VERSION.v1}/rbac/users/me/permissions`;
-  }
-};
-// call-control-sdk/lib/services/axios.ts
-var import_axios = __toESM(require("axios"));
-var _a;
-var DEFAULT_TOKEN = (_a = sdkStateManager.getSdkAuthToken()) != null ? _a : "";
-var REQUEST_TIMEOUT = 6e4;
-function getAuthToken() {
-  var _a2;
-  return (_a2 = sdkStateManager.getSdkAuthToken()) != null ? _a2 : "";
-}
-function createAxiosInstance() {
-  var _a2, _b, _c, _d;
-  const instance = import_axios.default.create({
-    // baseURL: sdkStateManager.getState()?.urlConfig?.baseURL,
-    headers: {
-      "Content-Type": "application/json",
-      Accept: "application/json",
-      "x-tenant-id": (_b = (_a2 = sdkStateManager.getCredentials()) == null ? void 0 : _a2.tenantId) != null ? _b : "",
-      "x-api-key": (_d = (_c = sdkStateManager.getCredentials()) == null ? void 0 : _c.apiKey) != null ? _d : "",
-      Authorization: DEFAULT_TOKEN ? DEFAULT_TOKEN.startsWith("Bearer ") ? DEFAULT_TOKEN : `Bearer ${DEFAULT_TOKEN}` : ""
-    },
-    timeout: REQUEST_TIMEOUT,
-    withCredentials: false
-  });
-  instance.interceptors.request.use(
-    (config) => {
-      const token = getAuthToken();
-      if (token && config.headers) {
-        const authToken = token.startsWith("Bearer ") ? token : `Bearer ${token}`;
-        config.headers.Authorization = authToken;
-      }
-      console.log("API Request:", {
-        url: config.url,
-        method: config.method,
-        hasToken: !!token,
-        tokenStartsWithBearer: token == null ? void 0 : token.startsWith("Bearer "),
-        headers: {
-          Authorization: config.headers.Authorization,
-          "x-tenant-id": config.headers["x-tenant-id"],
-          "x-api-key": config.headers["x-api-key"]
-        }
-      });
-      config.metadata = { startTime: (/* @__PURE__ */ new Date()).getTime() };
-      return config;
-    },
-    (error) => {
-      console.error("Request interceptor error:", error);
-      return Promise.reject(error);
-    }
-  );
-  instance.interceptors.response.use(
-    (response) => {
-      return response;
-    },
-    async (error) => {
-      var _a3;
-      const originalRequest = error.config;
-      if (((_a3 = error.response) == null ? void 0 : _a3.status) === 401 && !originalRequest._retry) {
-        sdkStateManager.setInitCheck();
-        console.warn("Unauthorized request, attempting retry...");
-      }
-      if (!error.response) {
-        console.error("Network error:", error.message);
-        error.message = "Network error: Please check your internet connection";
-      }
-      if (error.response && error.response.status >= 500) {
-        console.error("Server error:", error.response.status, error.response.data);
-        error.message = "Server error: Please try again later";
-      }
-      return Promise.reject(error);
-    }
-  );
-  return instance;
-}
-var axiosInstance = createAxiosInstance();
-var axios_default = axiosInstance;
-// call-control-sdk/lib/hooks/useEndCall.ts
+var import_react3 = require("react");
+init_endPoint();
+init_sdk_state();
+init_axios();
 var import_vault3 = require("@react-solutions/vault");
+init_storage();
 var useEndCall = () => {
-  const [loading, setLoading] = (0, import_react2.useState)(false);
-  const [success, setSuccess] = (0, import_react2.useState)(false);
-  const [isError, setIsError] = (0, import_react2.useState)(false);
-  const [error, setError] = (0, import_react2.useState)(null);
-  const [data, setData] = (0, import_react2.useState)(null);
-  const handleEndCall = (0, import_react2.useCallback)(
+  const [loading, setLoading] = (0, import_react3.useState)(false);
+  const [success, setSuccess] = (0, import_react3.useState)(false);
+  const [isError, setIsError] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const [data, setData] = (0, import_react3.useState)(null);
+  const handleEndCall = (0, import_react3.useCallback)(
     async (data2) => {
       var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
-      const state = (0, import_vault3.getItem)(STORAGE_KEY);
+      const state = (0, import_vault3.getSession)(STORAGE_KEY);
       setLoading(true);
       const payload = {
         action: "ENDCALL",
@@ -977,17 +1523,21 @@ var useEndCall = () => {
 };
 // call-control-sdk/lib/hooks/useClickToCall.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
+init_endPoint();
+init_axios();
+init_sdk_state();
 var import_vault4 = require("@react-solutions/vault");
+init_storage();
 var useClickToCall = () => {
-  const [loading, setLoading] = (0, import_react3.useState)(false);
-  const [success, setSuccess] = (0, import_react3.useState)(false);
-  const [isError, setIsError] = (0, import_react3.useState)(false);
-  const [error, setError] = (0, import_react3.useState)(null);
-  const [data, setData] = (0, import_react3.useState)(null);
-  const handleStartCall = (0, import_react3.useCallback)(async (data2) => {
+  const [loading, setLoading] = (0, import_react4.useState)(false);
+  const [success, setSuccess] = (0, import_react4.useState)(false);
+  const [isError, setIsError] = (0, import_react4.useState)(false);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const [data, setData] = (0, import_react4.useState)(null);
+  const handleStartCall = (0, import_react4.useCallback)(async (data2) => {
     var _a2, _b, _c, _d, _e, _f, _g, _h;
-    const state = (0, import_vault4.getItem)(STORAGE_KEY);
+    const state = (0, import_vault4.getSession)(STORAGE_KEY);
     setLoading(true);
     if (((_a2 = state == null ? void 0 : state.callData) == null ? void 0 : _a2.status) === "IDLE") {
       const payload = {
@@ -1046,7 +1596,8 @@ var useClickToCall = () => {
 };
 // call-control-sdk/lib/hooks/useGetCallerData.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
+init_sdk_state();
 var useGetCallerData = () => {
   const { process_id, process_name, status, phone_number, agent_id, convox_id } = sdkStateManager.getState().callData;
   const initialCallData = {
@@ -1057,8 +1608,8 @@ var useGetCallerData = () => {
     process_id,
     process_name
   };
-  const [callData, setCallData] = (0, import_react4.useState)(initialCallData);
-  (0, import_react4.useEffect)(() => {
+  const [callData, setCallData] = (0, import_react5.useState)(initialCallData);
+  (0, import_react5.useEffect)(() => {
     const unsubscribe = sdkStateManager.subscribe(() => {
       const { process_id: process_id2, process_name: process_name2, status: status2, phone_number: phone_number2, agent_id: agent_id2, convox_id: convox_id2 } = sdkStateManager.getState().callData;
       const currentCallData = {
@@ -1077,10 +1628,11 @@ var useGetCallerData = () => {
 };
 // call-control-sdk/lib/hooks/useGetAuthorizationToken.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
+init_sdk_state();
 var useGetAuthorizationToken = () => {
-  const [token, setToken] = (0, import_react5.useState)(sdkStateManager.getSdkAuthToken());
-  (0, import_react5.useEffect)(() => {
+  const [token, setToken] = (0, import_react6.useState)(sdkStateManager.getSdkAuthToken());
+  (0, import_react6.useEffect)(() => {
     const unsubscribe = sdkStateManager.subscribe(() => {
       setToken(sdkStateManager.getSdkAuthToken());
     });
@@ -1090,10 +1642,11 @@ var useGetAuthorizationToken = () => {
 };
 // call-control-sdk/lib/hooks/useSDKState.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
+init_sdk_state();
 function useSDKState() {
-  const [state, setState] = (0, import_react6.useState)(sdkStateManager.getState());
-  (0, import_react6.useEffect)(() => {
+  const [state, setState] = (0, import_react7.useState)(sdkStateManager.getState());
+  (0, import_react7.useEffect)(() => {
     const unsubscribe = sdkStateManager.subscribe(() => {
       setState(sdkStateManager.getState());
     });
@@ -1102,67 +1655,102 @@ function useSDKState() {
   return state;
 }
+// call-control-sdk/lib/hooks/useCallMonitoring.ts
+var import_react8 = require("react");
+init_endPoint();
+init_axios();
+var useCallMonitoring = () => {
+  const [loading, setLoading] = (0, import_react8.useState)(false);
+  const [success, setSuccess] = (0, import_react8.useState)(false);
+  const [isError, setIsError] = (0, import_react8.useState)(false);
+  const [error, setError] = (0, import_react8.useState)(null);
+  const [data, setData] = (0, import_react8.useState)(null);
+  const resetState = () => {
+    setSuccess(false);
+    setIsError(false);
+    setError(null);
+  };
+  const startMonitoring2 = (0, import_react8.useCallback)(async (payload) => {
+    resetState();
+    setLoading(true);
+    return axios_default.post(END_POINT.SUPERVISOR_CALL_LISTEN, payload).then((res) => {
+      setData(res == null ? void 0 : res.data);
+      setSuccess(true);
+      return res == null ? void 0 : res.data;
+    }).catch((err) => {
+      var _a2;
+      setIsError(true);
+      setError(err);
+      return (_a2 = err == null ? void 0 : err.response) == null ? void 0 : _a2.data;
+    }).finally(() => {
+      setLoading(false);
+    });
+  }, []);
+  const stopMonitoring2 = (0, import_react8.useCallback)(async (payload) => {
+    resetState();
+    setLoading(true);
+    return axios_default.post(END_POINT.SUPERVISOR_CALL_LEAVE, payload).then((res) => {
+      setData(res == null ? void 0 : res.data);
+      setSuccess(true);
+      return res == null ? void 0 : res.data;
+    }).catch((err) => {
+      var _a2;
+      setIsError(true);
+      setError(err);
+      return (_a2 = err == null ? void 0 : err.response) == null ? void 0 : _a2.data;
+    }).finally(() => {
+      setLoading(false);
+    });
+  }, []);
+  const changeMode = (0, import_react8.useCallback)(async (payload) => {
+    resetState();
+    setLoading(true);
+    return axios_default.post(END_POINT.SUPERVISOR_CALL_CHANGE_MODE, payload).then((res) => {
+      setData(res == null ? void 0 : res.data);
+      setSuccess(true);
+      return res == null ? void 0 : res.data;
+    }).catch((err) => {
+      var _a2;
+      setIsError(true);
+      setError(err);
+      return (_a2 = err == null ? void 0 : err.response) == null ? void 0 : _a2.data;
+    }).finally(() => {
+      setLoading(false);
+    });
+  }, []);
+  return {
+    startMonitoring: startMonitoring2,
+    stopMonitoring: stopMonitoring2,
+    changeMode,
+    isLoading: loading,
+    isSuccess: success,
+    isError,
+    error,
+    data
+  };
+};
+// call-control-sdk/index.ts
+init_permissions();
 // call-control-sdk/lib/components/callControlPanel.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 // call-control-sdk/lib/components/callControls.tsx
 var import_icons_material2 = require("@mui/icons-material");
 var import_material4 = require("@mui/material");
-var import_react11 = require("react");
+var import_react12 = require("react");
 // call-control-sdk/lib/components/dialog.tsx
 var import_icons_material = require("@mui/icons-material");
 var import_material3 = require("@mui/material");
-var import_react9 = require("react");
-// call-control-sdk/lib/services/request.ts
-var import_react8 = require("react");
-// call-control-sdk/lib/services/toastMessage.tsx
-var import_react7 = require("react");
-var import_material = require("@mui/material");
-var import_jsx_runtime = require("react/jsx-runtime");
-var ToastContext = (0, import_react7.createContext)(void 0);
-var useToast = () => {
-  const ctx = (0, import_react7.useContext)(ToastContext);
-  if (!ctx) throw new Error("useToast must be used inside ToastProvider");
-  return ctx;
-};
-var ToastProvider = ({ children }) => {
-  const [open, setOpen] = (0, import_react7.useState)(false);
-  const [message, setMessage] = (0, import_react7.useState)("");
-  const [severity, setSeverity] = (0, import_react7.useState)("info");
-  const showToast = (msg, sev = "info") => {
-    setMessage(msg);
-    setSeverity(sev);
-    setOpen(true);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ToastContext.Provider, { value: { showToast }, children: [
-    children,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_material.Snackbar,
-      {
-        open,
-        color: severity,
-        autoHideDuration: 3e3,
-        onClose: () => setOpen(false),
-        anchorOrigin: { vertical: "top", horizontal: "right" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_material.Alert,
-          {
-            variant: "filled",
-            severity,
-            onClose: () => setOpen(false),
-            sx: { width: "100%" },
-            children: message
-          }
-        )
-      }
-    )
-  ] });
-};
+var import_react10 = require("react");
+init_sdk_state();
 // call-control-sdk/lib/services/request.ts
+var import_react9 = require("react");
+init_axios();
+init_toastMessage();
 var initialState = {
   isLoading: false,
   isSuccess: false,
@@ -1199,8 +1787,8 @@ var reducer = (state, action) => {
 var useGetRequest = (props = {}) => {
   const { onSuccess = null, onError = null } = props;
   const { showToast } = useToast();
-  const [state, dispatch] = (0, import_react8.useReducer)(reducer, initialState);
-  const getRequest = (0, import_react8.useCallback)(
+  const [state, dispatch] = (0, import_react9.useReducer)(reducer, initialState);
+  const getRequest = (0, import_react9.useCallback)(
     (url, config = {}) => {
       dispatch({
         type: "isLoading",
@@ -1252,8 +1840,8 @@ var useGetRequest = (props = {}) => {
 var usePostRequest = (props = {}) => {
   const { onSuccess = null, onError = null, disabledSuccessToast = false } = props;
   const { showToast } = useToast();
-  const [state, dispatch] = (0, import_react8.useReducer)(reducer, initialState);
-  const postRequest = (0, import_react8.useCallback)(
+  const [state, dispatch] = (0, import_react9.useReducer)(reducer, initialState);
+  const postRequest = (0, import_react9.useCallback)(
     async (url, payload, config = {}) => {
       var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
       dispatch({
@@ -1299,6 +1887,11 @@ var usePostRequest = (props = {}) => {
   return [postRequest, state];
 };
+// call-control-sdk/lib/components/dialog.tsx
+init_endPoint();
+init_axios();
+init_toastMessage();
 // call-control-sdk/lib/components/styles.ts
 var import_material2 = require("@mui/material");
 var useStyles = ({
@@ -1375,10 +1968,10 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
     enabled: ((_b = state.sdkConfig) == null ? void 0 : _b.enabled) || {},
     outlined: ((_c = state.sdkConfig) == null ? void 0 : _c.outlined) || {}
   });
-  const [conferenceCallStart, setConferenceCallStart] = (0, import_react9.useState)(false);
-  const [conferenceCallMerge, setConferenceCallMerge] = (0, import_react9.useState)(false);
-  const [conferenceCallHoldOrUnHold, setConferenceCallHoldOrUnHold] = (0, import_react9.useState)(false);
-  const [conferenceCallEnd, setConferenceCallEnd] = (0, import_react9.useState)(false);
+  const [conferenceCallStart, setConferenceCallStart] = (0, import_react10.useState)(false);
+  const [conferenceCallMerge, setConferenceCallMerge] = (0, import_react10.useState)(false);
+  const [conferenceCallHoldOrUnHold, setConferenceCallHoldOrUnHold] = (0, import_react10.useState)(false);
+  const [conferenceCallEnd, setConferenceCallEnd] = (0, import_react10.useState)(false);
   const isSameAsActiveCall = (each == null ? void 0 : each.phone) === ((_d = state.callData) == null ? void 0 : _d.phone_number) && !!(each == null ? void 0 : each.phone);
   const isDuplicateInConference = !!(each == null ? void 0 : each.phone) && (each == null ? void 0 : each.line) !== 1 && ((_e = state.conferenceLine) == null ? void 0 : _e.some(
     (line) => line.line < each.line && line.phone === (each == null ? void 0 : each.phone) && !!line.phone
@@ -1793,7 +2386,7 @@ function ConferenceDialog() {
   var _a2, _b, _c, _d, _e, _f, _g;
   const state = useSDKState();
   const { showToast } = useToast();
-  const [conferenceCallEndAll, setConferenceCallEndAll] = (0, import_react9.useState)(false);
+  const [conferenceCallEndAll, setConferenceCallEndAll] = (0, import_react10.useState)(false);
   const handleClose = () => {
     sdkStateManager.setOpenConferenceDialog(false);
   };
@@ -1858,6 +2451,7 @@ function ConferenceDialog() {
       "aria-labelledby": "alert-dialog-title",
       "aria-describedby": "alert-dialog-description",
       maxWidth: "md",
+      slotProps: { paper: { sx: { minWidth: 800 } } },
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           import_material3.Box,
@@ -1973,15 +2567,33 @@ function ConferenceDialog() {
   ) });
 }
 function CallTransferDialog({ open }) {
-  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
   const state = useSDKState();
-  const [mobileNumber, setMobileNumber] = (0, import_react9.useState)("");
+  const [mobileNumber, setMobileNumber] = (0, import_react10.useState)("");
   const [transferCall, { isLoading: isTransferLoading }] = usePostRequest({
     onSuccess: () => {
       sdkStateManager.setOpenCallTransferDialog(false);
     }
   });
-  const [currentselecteTab, setCurrentselecteTab] = (0, import_react9.useState)("queues");
+  const [initiateConsultCall] = usePostRequest({});
+  const [completeConsultTransfer, { isLoading: isCompleteConsultLoading }] = usePostRequest({
+    onSuccess: () => {
+      sdkStateManager.setConsultInfo(null);
+      sdkStateManager.setOpenCallTransferDialog(false);
+    }
+  });
+  const [cancelConsultTransfer, { isLoading: isCancelConsultLoading }] = usePostRequest({
+    onSuccess: () => {
+      sdkStateManager.setConsultInfo(null);
+    }
+  });
+  const [currentselecteTab, setCurrentselecteTab] = (0, import_react10.useState)("queues");
+  const [transferMenuAnchor, setTransferMenuAnchor] = (0, import_react10.useState)(null);
+  const [pendingTransferData, setPendingTransferData] = (0, import_react10.useState)(null);
+  const blindEnabled = !((_a2 = state.sdkConfig) == null ? void 0 : _a2.disableBlindTransfer);
+  const attendedEnabled = !((_b = state.sdkConfig) == null ? void 0 : _b.disableAttendedTransfer);
+  const enabledTransferModeCount = (blindEnabled ? 1 : 0) + (attendedEnabled ? 1 : 0);
+  const singleTransferMode = enabledTransferModeCount === 1 ? blindEnabled ? "DEFAULT" : "CONSULT" : null;
   const [getIdelAgentsList, { data: idleAgentsList, isLoading: isIdleAgentsListLoading }] = usePostRequest({ disabledSuccessToast: true });
   const [
     getHospitalsServicesList,
@@ -1994,8 +2606,8 @@ function CallTransferDialog({ open }) {
   const handleClose = () => {
     sdkStateManager.setOpenCallTransferDialog(false);
   };
-  const handleTransferCall = (data, type) => {
-    var _a3, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N;
+  const handleTransferCall = (data, type, mode = "DEFAULT") => {
+    var _a3, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2, _x2, _y2, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N;
     if (type === "PROCESS") {
       const payload = {
         mobile_number: (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.phone_number) != null ? _b2 : "",
@@ -2020,207 +2632,189 @@ function CallTransferDialog({ open }) {
       transferCall(END_POINT.TRANSFER_CALL, payload);
     } else if (type === "AGENT") {
       const payload = {
-        mobile_number: (_x = (_w = state.callData) == null ? void 0 : _w.phone_number) != null ? _x : "",
-        userid: (_z = (_y = state.callData) == null ? void 0 : _y.agent_id) != null ? _z : "",
+        mobile_number: (_x2 = (_w2 = state.callData) == null ? void 0 : _w2.phone_number) != null ? _x2 : "",
+        userid: (_z = (_y2 = state.callData) == null ? void 0 : _y2.agent_id) != null ? _z : "",
         type: "AGENT",
+        transfer_type: mode === "CONSULT" ? "ATTENDED" : "BLIND",
         transfer_to: (_B = (_A = data == null ? void 0 : data.id) == null ? void 0 : _A.toString()) != null ? _B : "",
         callreferenceid: (_D = (_C = state.callData) == null ? void 0 : _C.convox_id) != null ? _D : "",
         processid: String((_F = (_E = state.callData) == null ? void 0 : _E.process_id) != null ? _F : ""),
         process_name: (_H = (_G = state.callData) == null ? void 0 : _G.process_name) != null ? _H : ""
       };
-      transferCall(END_POINT.TRANSFER_CALL, payload);
+      if (mode === "CONSULT") {
+        initiateConsultCall(END_POINT.TRANSFER_CALL, payload);
+      } else {
+        transferCall(END_POINT.TRANSFER_CALL, payload);
+      }
     } else if (type === "OTHER") {
       const payload = {
-        action: "BLIND_TRANSFER",
+        action: mode === "CONSULT" ? "ATTENDED" : "BLIND_TRANSFER",
+        transfer_type: mode === "CONSULT" ? "ATTENDED" : "BLIND",
         type: "OTHER",
         transfer_to: (_I = data == null ? void 0 : data.mobile_number) != null ? _I : "",
         userid: (_K = (_J = state.callData) == null ? void 0 : _J.agent_id) != null ? _K : -1,
         callreferenceid: (_M = (_L = state.callData) == null ? void 0 : _L.convox_id) != null ? _M : "",
         blind_transfer_no: (_N = data == null ? void 0 : data.mobile_number) != null ? _N : ""
       };
-      transferCall(END_POINT.TRANSFER_CALL, payload);
+      if (mode === "CONSULT") {
+        initiateConsultCall(END_POINT.TRANSFER_CALL, payload);
+      } else {
+        transferCall(END_POINT.TRANSFER_CALL, payload);
+      }
+    }
+  };
+  const handleTransferClick = (e, data, type) => {
+    if (singleTransferMode) {
+      handleTransferCall(data, type, singleTransferMode);
+    } else {
+      setPendingTransferData({ data, type });
+      setTransferMenuAnchor(e.currentTarget);
     }
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     getIdelAgentsList(END_POINT.AGENTS_LIST, { status: "IDLE", active: true });
     getProcessAndQueuesList(END_POINT.TRANSFER_TO_DETAILS, { status: "ACTIVE", active: true });
     getHospitalsServicesList(END_POINT.HOSPITALS_SERVICES);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_material3.Dialog,
-    {
-      open,
-      "aria-labelledby": "alert-dialog-title",
-      "aria-describedby": "alert-dialog-description",
-      fullWidth: true,
-      maxWidth: "sm",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-          import_material3.Box,
-          {
-            sx: {
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-              padding: "4px 16px",
-              boxShadow: "0px 1px 2px #f5f5f5ff"
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { variant: "body1", children: " Call Transfer" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Box, { sx: { margin: "10px", borderRadius: "10px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Box, { sx: { display: "flex", gap: 1, margin: "10px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              import_material3.Button,
-              {
-                variant: currentselecteTab === "queues" ? "contained" : "outlined",
-                onClick: () => setCurrentselecteTab("queues"),
-                children: "Queues"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              import_material3.Button,
-              {
-                variant: currentselecteTab === "agents" ? "contained" : "outlined",
-                onClick: () => {
-                  setCurrentselecteTab("agents");
-                  getIdelAgentsList(END_POINT.AGENTS_LIST, { status: "IDLE", active: true });
-                },
-                children: "Agents"
-              }
-            ),
-            !((_a2 = state.sdkConfig) == null ? void 0 : _a2.disableBlindTransfer) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              import_material3.Button,
-              {
-                variant: currentselecteTab === "others" ? "contained" : "outlined",
-                onClick: () => setCurrentselecteTab("others"),
-                children: "Others"
-              }
-            )
-          ] }),
-          (isProcessAndQueuesListLoading || isIdleAgentsListLoading || isHospitalsServicesListLoading || isTransferLoading) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_material3.Box,
-            {
-              sx: {
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                height: "80px"
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.CircularProgress, {})
-            }
-          ),
-          !isProcessAndQueuesListLoading && !isIdleAgentsListLoading && !isHospitalsServicesListLoading && !isTransferLoading && currentselecteTab === "process" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_material3.Dialog,
+      {
+        open,
+        "aria-labelledby": "alert-dialog-title",
+        "aria-describedby": "alert-dialog-description",
+        maxWidth: "md",
+        slotProps: { paper: { sx: { minWidth: 600 } } },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
             import_material3.Box,
             {
-              sx: {
-                display: "grid",
-                gridTemplateColumns: ((_b = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _b.process) && ((_d = (_c = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _c.process) == null ? void 0 : _d.length) > 0 ? "repeat(2, 1fr)" : "repeat(1, 1fr)",
-                gap: 1,
-                padding: "10px",
-                flexWrap: "wrap",
-                boxShadow: "1px 1px 4px #d3d3d3ff",
-                borderRadius: "10px"
-              },
-              children: ((_e = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _e.process) && ((_g = (_f = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _f.process) == null ? void 0 : _g.length) > 0 ? (_i = (_h = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _h.process) == null ? void 0 : _i.map((process, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                import_material3.Box,
-                {
-                  sx: {
-                    p: 1,
-                    display: "flex",
-                    alignItems: "center",
-                    boxShadow: "1px 1px 4px #d3d3d3ff",
-                    padding: "6px",
-                    borderRadius: "10px",
-                    "&:hover": { bgcolor: "action.selected" }
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                      import_material3.Typography,
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                padding: "4px 16px",
+                boxShadow: "0px 1px 2px #f5f5f5ff",
+                position: "relative"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { variant: "body1", sx: { flex: 1 }, children: " Call Transfer" }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Box, { sx: { position: "absolute", left: "50%", transform: "translateX(-50%)" }, children: [
+                  state.consultInfo && ((_c = state.consultInfo.status) == null ? void 0 : _c.toUpperCase()) === "RINGING" /* RINGING */ && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { variant: "body1", sx: { whiteSpace: "nowrap" }, children: "Trying to consult" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Box, { component: "span", sx: { display: "inline-flex", gap: "3px", alignItems: "flex-end", height: "14px" }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Box, { component: "span", sx: {
+                      "@keyframes jumpDot": {
+                        "0%, 60%, 100%": { transform: "translateY(0)" },
+                        "30%": { transform: "translateY(-5px)" }
+                      },
+                      animation: "jumpDot 1s ease-in-out infinite",
+                      animationDelay: `${i * 0.15}s`,
+                      fontSize: "14px",
+                      fontWeight: 700,
+                      lineHeight: 1,
+                      display: "inline-block"
+                    }, children: "." }, i)) })
+                  ] }),
+                  state.consultInfo && ((_d = state.consultInfo.status) == null ? void 0 : _d.toUpperCase()) === "ONCALL" /* ONCALL */ && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_material3.Button,
                       {
-                        variant: "body1",
-                        sx: {
-                          mx: 1,
-                          width: "200px",
-                          maxWidth: "250px",
-                          display: "flex",
-                          alignItems: "center"
+                        variant: "outlined",
+                        size: "small",
+                        startIcon: isCompleteConsultLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.CircularProgress, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.TransferWithinAStation, { sx: { fontSize: 16 } }),
+                        disabled: isCompleteConsultLoading || isCancelConsultLoading,
+                        onClick: () => {
+                          if (state.consultInfo) {
+                            completeConsultTransfer(END_POINT.TRANSFER_COMPLETE, {}, {
+                              params: { call_uuid: state.consultInfo.call_uuid }
+                            });
+                          }
                         },
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.MemoryOutlined, { sx: { marginRight: "4px" } }),
-                          process.process_name
-                        ]
+                        children: "Transfer"
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      import_material3.IconButton,
+                      import_material3.Button,
                       {
-                        color: "success",
-                        sx: {
-                          bgcolor: "action.hover",
-                          "&:hover": { bgcolor: "action.selected" }
+                        variant: "outlined",
+                        size: "small",
+                        color: "error",
+                        startIcon: isCancelConsultLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.CircularProgress, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.PhoneDisabled, { sx: { fontSize: 16 } }),
+                        disabled: isCancelConsultLoading || isCompleteConsultLoading,
+                        onClick: () => {
+                          if (state.consultInfo) {
+                            cancelConsultTransfer(END_POINT.TRANSFER_CANCEL, {
+                              status: state.consultInfo.status,
+                              participant_identifier: state.consultInfo.participant_identifier,
+                              channel_id: state.consultInfo.channel_id,
+                              call_uuid: state.consultInfo.call_uuid,
+                              bridge_id: state.consultInfo.bridge_id
+                            });
+                          }
                         },
-                        onClick: () => handleTransferCall(process, "PROCESS"),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
+                        children: "Cancel"
                       }
                     )
-                  ]
-                },
-                index
-              )) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                import_material3.Box,
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Box, { sx: { flex: 1, display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Box, { sx: { margin: "10px", borderRadius: "10px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Box, { sx: { display: "flex", gap: 1, margin: "10px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_material3.Button,
                 {
-                  sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    flexDirection: "column"
+                  variant: currentselecteTab === "queues" ? "contained" : "outlined",
+                  onClick: () => setCurrentselecteTab("queues"),
+                  children: "Queues"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_material3.Button,
+                {
+                  variant: currentselecteTab === "agents" ? "contained" : "outlined",
+                  onClick: () => {
+                    setCurrentselecteTab("agents");
+                    getIdelAgentsList(END_POINT.AGENTS_LIST, { status: "IDLE", active: true });
                   },
-                  p: 2,
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Upcoming, { color: "primary" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      import_material3.Typography,
-                      {
-                        variant: "body1",
-                        sx: {
-                          fontSize: "16px",
-                          letterSpacing: "0.02em",
-                          textTransform: "capitalize",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          width: "100%",
-                          margin: "10px 0px",
-                          color: "primary.main",
-                          height: "20px"
-                        },
-                        children: "No Process Found"
-                      }
-                    )
-                  ]
+                  children: "Agents"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_material3.Button,
+                {
+                  variant: currentselecteTab === "others" ? "contained" : "outlined",
+                  onClick: () => setCurrentselecteTab("others"),
+                  children: "Others"
                 }
               )
-            }
-          ),
-          !isProcessAndQueuesListLoading && !isIdleAgentsListLoading && !isHospitalsServicesListLoading && !isTransferLoading && currentselecteTab === "queues" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_material3.Box,
-            {
-              sx: {
-                display: "grid",
-                gridTemplateColumns: ((_j = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _j.queue) && ((_l = (_k = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _k.queue) == null ? void 0 : _l.length) > 0 ? "repeat(2, 1fr)" : "repeat(1, 1fr)",
-                gap: 1,
-                padding: "10px",
-                flexWrap: "wrap",
-                boxShadow: "1px 1px 4px #d3d3d3ff",
-                borderRadius: "10px"
-              },
-              children: ((_m = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _m.queue) && ((_o = (_n = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _n.queue) == null ? void 0 : _o.length) > 0 ? (_q = (_p = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _p.queue) == null ? void 0 : _q.map((queue, index) => {
-                var _a3, _b2, _c2, _d2, _e2, _f2;
-                return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            ] }),
+            (isProcessAndQueuesListLoading || isIdleAgentsListLoading || isHospitalsServicesListLoading || isTransferLoading) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_material3.Box,
+              {
+                sx: {
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  height: "80px"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.CircularProgress, {})
+              }
+            ),
+            !isProcessAndQueuesListLoading && !isIdleAgentsListLoading && !isHospitalsServicesListLoading && !isTransferLoading && currentselecteTab === "process" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_material3.Box,
+              {
+                sx: {
+                  display: "grid",
+                  gridTemplateColumns: ((_e = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _e.process) && ((_g = (_f = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _f.process) == null ? void 0 : _g.length) > 0 ? "repeat(2, 1fr)" : "repeat(1, 1fr)",
+                  gap: 1,
+                  padding: "10px",
+                  flexWrap: "wrap",
+                  boxShadow: "1px 1px 4px #d3d3d3ff",
+                  borderRadius: "10px"
+                },
+                children: ((_h = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _h.process) && ((_j = (_i = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _i.process) == null ? void 0 : _j.length) > 0 ? (_l = (_k = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _k.process) == null ? void 0 : _l.map((process, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                   import_material3.Box,
                   {
                     sx: {
@@ -2245,30 +2839,12 @@ function CallTransferDialog({ open }) {
                             alignItems: "center"
                           },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Airlines, { sx: { marginRight: "4px" } }),
-                            queue.queue_name,
-                            ((_c2 = (_b2 = (_a3 = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _a3.process) == null ? void 0 : _b2.find(
-                              (process) => process.process_id === queue.process_id
-                            )) == null ? void 0 : _c2.process_name) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                              import_material3.Typography,
-                              {
-                                variant: "body1",
-                                sx: {
-                                  fontSize: "12px",
-                                  fontWeight: "600",
-                                  letterSpacing: "0.02em",
-                                  textTransform: "capitalize",
-                                  color: "gray"
-                                },
-                                children: "(" + ((_f2 = (_e2 = (_d2 = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _d2.process) == null ? void 0 : _e2.find(
-                                  (process) => process.process_id === queue.process_id
-                                )) == null ? void 0 : _f2.process_name) + ")"
-                              }
-                            ) : ""
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.MemoryOutlined, { sx: { marginRight: "4px" } }),
+                            process.process_name
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: state.consultInfo ? "Please complete or cancel the ongoing consult transfer before proceeding." : "", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         import_material3.IconButton,
                         {
                           color: "success",
@@ -2276,160 +2852,64 @@ function CallTransferDialog({ open }) {
                             bgcolor: "action.hover",
                             "&:hover": { bgcolor: "action.selected" }
                           },
-                          onClick: () => handleTransferCall(queue, "QUEUE"),
+                          disabled: !!state.consultInfo,
+                          onClick: () => handleTransferCall(process, "PROCESS"),
                           children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
                         }
-                      )
+                      ) }) })
                     ]
                   },
                   index
-                );
-              }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                import_material3.Box,
-                {
-                  sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    flexDirection: "column"
-                  },
-                  p: 2,
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Upcoming, { color: "primary" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      import_material3.Typography,
-                      {
-                        variant: "body1",
-                        sx: {
-                          fontSize: "16px",
-                          letterSpacing: "0.02em",
-                          textTransform: "capitalize",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          width: "100%",
-                          margin: "10px 0px",
-                          color: "primary.main",
-                          height: "20px"
-                        },
-                        children: "No Queues Found"
-                      }
-                    )
-                  ]
-                }
-              )
-            }
-          ),
-          !isProcessAndQueuesListLoading && !isIdleAgentsListLoading && !isHospitalsServicesListLoading && !isTransferLoading && currentselecteTab === "agents" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_material3.Box,
-            {
-              sx: {
-                display: "grid",
-                gridTemplateColumns: (idleAgentsList == null ? void 0 : idleAgentsList.data) && ((_r = idleAgentsList == null ? void 0 : idleAgentsList.data) == null ? void 0 : _r.length) > 0 ? "repeat(2, 1fr)" : "repeat(1, 1fr)",
-                gap: 1,
-                padding: "10px",
-                flexWrap: "wrap",
-                boxShadow: "1px 1px 4px #d3d3d3ff",
-                borderRadius: "10px"
-              },
-              children: (idleAgentsList == null ? void 0 : idleAgentsList.data) && ((_s = idleAgentsList == null ? void 0 : idleAgentsList.data) == null ? void 0 : _s.length) > 0 ? (_t = idleAgentsList == null ? void 0 : idleAgentsList.data) == null ? void 0 : _t.map((agent, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                import_material3.Box,
-                {
-                  sx: {
-                    p: 1,
-                    display: "flex",
-                    alignItems: "center",
-                    boxShadow: "1px 1px 4px #d3d3d3ff",
-                    padding: "6px",
-                    borderRadius: "10px",
-                    "&:hover": { bgcolor: "action.selected" }
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                      import_material3.Typography,
-                      {
-                        variant: "body1",
-                        sx: {
-                          mx: 1,
-                          width: "200px",
-                          maxWidth: "250px",
-                          display: "flex",
-                          alignItems: "center"
-                        },
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.SupportAgent, { sx: { marginRight: "4px" } }),
-                          agent.name
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      import_material3.IconButton,
-                      {
-                        color: "success",
-                        sx: {
-                          bgcolor: "action.hover",
-                          "&:hover": { bgcolor: "action.selected" }
-                        },
-                        onClick: () => {
-                          handleTransferCall(agent, "AGENT");
-                        },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
-                      }
-                    )
-                  ]
+                )) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  import_material3.Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      flexDirection: "column"
+                    },
+                    p: 2,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Upcoming, { color: "primary" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        import_material3.Typography,
+                        {
+                          variant: "body1",
+                          sx: {
+                            fontSize: "16px",
+                            letterSpacing: "0.02em",
+                            textTransform: "capitalize",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: "100%",
+                            margin: "10px 0px",
+                            color: "primary.main",
+                            height: "20px"
+                          },
+                          children: "No Process Found"
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            !isProcessAndQueuesListLoading && !isIdleAgentsListLoading && !isHospitalsServicesListLoading && !isTransferLoading && currentselecteTab === "queues" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_material3.Box,
+              {
+                sx: {
+                  display: "grid",
+                  gridTemplateColumns: ((_m = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _m.queue) && ((_o = (_n = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _n.queue) == null ? void 0 : _o.length) > 0 ? "repeat(2, 1fr)" : "repeat(1, 1fr)",
+                  gap: 1,
+                  padding: "10px",
+                  flexWrap: "wrap",
+                  boxShadow: "1px 1px 4px #d3d3d3ff",
+                  borderRadius: "10px"
                 },
-                index
-              )) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                import_material3.Box,
-                {
-                  sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    flexDirection: "column"
-                  },
-                  p: 2,
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Upcoming, { color: "primary" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      import_material3.Typography,
-                      {
-                        variant: "body1",
-                        sx: {
-                          fontSize: "16px",
-                          letterSpacing: "0.02em",
-                          textTransform: "capitalize",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          width: "100%",
-                          margin: "10px 0px",
-                          color: "primary.main",
-                          height: "20px"
-                        },
-                        children: "No Agents Found"
-                      }
-                    )
-                  ]
-                }
-              )
-            }
-          ),
-          !isProcessAndQueuesListLoading && !isIdleAgentsListLoading && !isHospitalsServicesListLoading && !isTransferLoading && currentselecteTab === "others" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-            import_material3.Box,
-            {
-              sx: {
-                display: "grid",
-                gridTemplateColumns: "repeat(2, 1fr)",
-                gap: 1,
-                padding: "10px",
-                flexWrap: "wrap",
-                boxShadow: "1px 1px 4px #d3d3d3ff",
-                borderRadius: "10px"
-              },
-              children: [
-                (hospitalsServicesList == null ? void 0 : hospitalsServicesList.data) && ((_u = hospitalsServicesList == null ? void 0 : hospitalsServicesList.data) == null ? void 0 : _u.length) > 0 && ((_v = hospitalsServicesList == null ? void 0 : hospitalsServicesList.data) == null ? void 0 : _v.map((service, index) => {
-                  var _a3, _b2, _c2;
+                children: ((_p = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _p.queue) && ((_r = (_q = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _q.queue) == null ? void 0 : _r.length) > 0 ? (_t = (_s = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _s.queue) == null ? void 0 : _t.map((queue, index) => {
+                  var _a3, _b2, _c2, _d2, _e2, _f2;
                   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                     import_material3.Box,
                     {
@@ -2455,31 +2935,30 @@ function CallTransferDialog({ open }) {
                               alignItems: "center"
                             },
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Roofing, { sx: { marginRight: "4px" } }),
-                              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: `${(_a3 = service == null ? void 0 : service.description) != null ? _a3 : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Box, { sx: { color: "text.secondary" }, children: [
-                                service.name,
-                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                                  import_material3.Box,
-                                  {
-                                    sx: {
-                                      fontSize: "9px",
-                                      fontWeight: "600",
-                                      letterSpacing: "0.02em",
-                                      textTransform: "capitalize",
-                                      color: "gray",
-                                      textOverflow: "ellipsis",
-                                      whiteSpace: "nowrap",
-                                      overflow: "hidden",
-                                      maxWidth: "160px"
-                                    },
-                                    children: (_b2 = service == null ? void 0 : service.description) != null ? _b2 : ""
-                                  }
-                                )
-                              ] }) })
+                              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Airlines, { sx: { marginRight: "4px" } }),
+                              queue.queue_name,
+                              ((_c2 = (_b2 = (_a3 = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _a3.process) == null ? void 0 : _b2.find(
+                                (process) => process.process_id === queue.process_id
+                              )) == null ? void 0 : _c2.process_name) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                import_material3.Typography,
+                                {
+                                  variant: "body1",
+                                  sx: {
+                                    fontSize: "12px",
+                                    fontWeight: "600",
+                                    letterSpacing: "0.02em",
+                                    textTransform: "capitalize",
+                                    color: "gray"
+                                  },
+                                  children: "(" + ((_f2 = (_e2 = (_d2 = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _d2.process) == null ? void 0 : _e2.find(
+                                    (process) => process.process_id === queue.process_id
+                                  )) == null ? void 0 : _f2.process_name) + ")"
+                                }
+                              ) : ""
                             ]
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: (_c2 = service == null ? void 0 : service.phone_number) != null ? _c2 : "", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: state.consultInfo ? "Please complete or cancel the ongoing consult transfer before proceeding." : "", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                           import_material3.IconButton,
                           {
                             color: "success",
@@ -2487,104 +2966,355 @@ function CallTransferDialog({ open }) {
                               bgcolor: "action.hover",
                               "&:hover": { bgcolor: "action.selected" }
                             },
-                            onClick: () => {
-                              var _a4;
-                              return handleTransferCall(
-                                { mobile_number: (_a4 = service == null ? void 0 : service.phone_number) != null ? _a4 : "" },
-                                "OTHER"
-                              );
-                            },
+                            disabled: !!state.consultInfo,
+                            onClick: () => handleTransferCall(queue, "QUEUE"),
                             children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
                           }
-                        ) })
+                        ) }) })
                       ]
                     },
                     index
                   );
-                })),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  import_material3.Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      flexDirection: "column"
+                    },
+                    p: 2,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Upcoming, { color: "primary" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        import_material3.Typography,
+                        {
+                          variant: "body1",
+                          sx: {
+                            fontSize: "16px",
+                            letterSpacing: "0.02em",
+                            textTransform: "capitalize",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: "100%",
+                            margin: "10px 0px",
+                            color: "primary.main",
+                            height: "20px"
+                          },
+                          children: "No Queues Found"
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            !isProcessAndQueuesListLoading && !isIdleAgentsListLoading && !isHospitalsServicesListLoading && !isTransferLoading && currentselecteTab === "agents" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_material3.Box,
+              {
+                sx: {
+                  display: "grid",
+                  gridTemplateColumns: (idleAgentsList == null ? void 0 : idleAgentsList.data) && ((_u = idleAgentsList == null ? void 0 : idleAgentsList.data) == null ? void 0 : _u.length) > 0 ? "repeat(2, 1fr)" : "repeat(1, 1fr)",
+                  gap: 1,
+                  padding: "10px",
+                  flexWrap: "wrap",
+                  boxShadow: "1px 1px 4px #d3d3d3ff",
+                  borderRadius: "10px"
+                },
+                children: (idleAgentsList == null ? void 0 : idleAgentsList.data) && ((_v = idleAgentsList == null ? void 0 : idleAgentsList.data) == null ? void 0 : _v.length) > 0 ? (_w = idleAgentsList == null ? void 0 : idleAgentsList.data) == null ? void 0 : _w.map((agent, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  import_material3.Box,
+                  {
+                    sx: {
+                      p: 1,
+                      display: "flex",
+                      alignItems: "center",
+                      boxShadow: "1px 1px 4px #d3d3d3ff",
+                      padding: "6px",
+                      borderRadius: "10px",
+                      "&:hover": { bgcolor: "action.selected" }
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                        import_material3.Typography,
+                        {
+                          variant: "body1",
+                          sx: {
+                            mx: 1,
+                            width: "200px",
+                            maxWidth: "250px",
+                            display: "flex",
+                            alignItems: "center"
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.SupportAgent, { sx: { marginRight: "4px" } }),
+                            agent.name
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: state.consultInfo ? "Please complete or cancel the ongoing consult transfer before proceeding." : "", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        import_material3.IconButton,
+                        {
+                          color: "success",
+                          sx: {
+                            bgcolor: "action.hover",
+                            "&:hover": { bgcolor: "action.selected" }
+                          },
+                          disabled: !!state.consultInfo,
+                          onClick: (e) => handleTransferClick(e, agent, "AGENT"),
+                          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
+                        }
+                      ) }) })
+                    ]
+                  },
+                  index
+                )) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                   import_material3.Box,
                   {
                     sx: {
-                      p: 1,
                       display: "flex",
                       alignItems: "center",
-                      boxShadow: "1px 1px 4px #d3d3d3ff",
-                      padding: "6px",
-                      borderRadius: "10px"
+                      justifyContent: "center",
+                      flexDirection: "column"
                     },
+                    p: 2,
                     children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Upcoming, { color: "primary" }),
                       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         import_material3.Typography,
                         {
                           variant: "body1",
                           sx: {
-                            mx: 1,
-                            width: "200px",
-                            maxWidth: "250px",
+                            fontSize: "16px",
+                            letterSpacing: "0.02em",
+                            textTransform: "capitalize",
                             display: "flex",
-                            alignItems: "center"
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: "100%",
+                            margin: "10px 0px",
+                            color: "primary.main",
+                            height: "20px"
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                            import_material3.TextField,
+                          children: "No Agents Found"
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            !isProcessAndQueuesListLoading && !isIdleAgentsListLoading && !isHospitalsServicesListLoading && !isTransferLoading && currentselecteTab === "others" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              import_material3.Box,
+              {
+                sx: {
+                  display: "grid",
+                  gridTemplateColumns: "repeat(2, 1fr)",
+                  gap: 1,
+                  padding: "10px",
+                  flexWrap: "wrap",
+                  boxShadow: "1px 1px 4px #d3d3d3ff",
+                  borderRadius: "10px"
+                },
+                children: [
+                  (hospitalsServicesList == null ? void 0 : hospitalsServicesList.data) && ((_x = hospitalsServicesList == null ? void 0 : hospitalsServicesList.data) == null ? void 0 : _x.length) > 0 && ((_y = hospitalsServicesList == null ? void 0 : hospitalsServicesList.data) == null ? void 0 : _y.map((service, index) => {
+                    var _a3, _b2, _c2;
+                    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      import_material3.Box,
+                      {
+                        sx: {
+                          p: 1,
+                          display: "flex",
+                          alignItems: "center",
+                          boxShadow: "1px 1px 4px #d3d3d3ff",
+                          padding: "6px",
+                          borderRadius: "10px",
+                          "&:hover": { bgcolor: "action.selected" }
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                            import_material3.Typography,
                             {
-                              size: "small",
-                              name: "others",
-                              label: "Mobile number",
-                              variant: "outlined",
-                              type: "tel",
-                              value: mobileNumber,
-                              onChange: (e) => {
-                                const v = e.target.value;
-                                if (/^\d*$/.test(v)) {
-                                  setMobileNumber(v);
-                                }
-                              },
-                              slotProps: {
-                                htmlInput: {
-                                  inputMode: "numeric",
-                                  maxLength: 11
-                                }
+                              variant: "body1",
+                              sx: {
+                                mx: 1,
+                                width: "200px",
+                                maxWidth: "250px",
+                                display: "flex",
+                                alignItems: "center"
                               },
-                              placeholder: "Enter mobile number",
-                              autoComplete: "off"
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Roofing, { sx: { marginRight: "4px" } }),
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: `${(_a3 = service == null ? void 0 : service.description) != null ? _a3 : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Box, { sx: { color: "text.secondary" }, children: [
+                                  service.name,
+                                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                    import_material3.Box,
+                                    {
+                                      sx: {
+                                        fontSize: "9px",
+                                        fontWeight: "600",
+                                        letterSpacing: "0.02em",
+                                        textTransform: "capitalize",
+                                        color: "gray",
+                                        textOverflow: "ellipsis",
+                                        whiteSpace: "nowrap",
+                                        overflow: "hidden",
+                                        maxWidth: "160px"
+                                      },
+                                      children: (_b2 = service == null ? void 0 : service.description) != null ? _b2 : ""
+                                    }
+                                  )
+                                ] }) })
+                              ]
                             }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                        import_material3.Tooltip,
-                        {
-                          title: mobileNumber ? `Call To - ${mobileNumber}` : "Enter mobile number",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: state.consultInfo ? "Please complete or cancel the ongoing consult transfer before proceeding." : (_c2 = service == null ? void 0 : service.phone_number) != null ? _c2 : "", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                             import_material3.IconButton,
                             {
                               color: "success",
+                              disabled: !!state.consultInfo,
                               sx: {
                                 bgcolor: "action.hover",
                                 "&:hover": { bgcolor: "action.selected" }
                               },
-                              onClick: () => handleTransferCall({ mobile_number: mobileNumber != null ? mobileNumber : "" }, "OTHER"),
+                              onClick: (e) => {
+                                var _a4;
+                                return handleTransferClick(e, { mobile_number: (_a4 = service == null ? void 0 : service.phone_number) != null ? _a4 : "" }, "OTHER");
+                              },
                               children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
                             }
-                          )
-                        }
-                      )
-                    ]
-                  }
-                )
+                          ) }) })
+                        ]
+                      },
+                      index
+                    );
+                  })),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                    import_material3.Box,
+                    {
+                      sx: {
+                        p: 1,
+                        display: "flex",
+                        alignItems: "center",
+                        boxShadow: "1px 1px 4px #d3d3d3ff",
+                        padding: "6px",
+                        borderRadius: "10px"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_material3.Typography,
+                          {
+                            variant: "body1",
+                            sx: {
+                              mx: 1,
+                              width: "200px",
+                              maxWidth: "250px",
+                              display: "flex",
+                              alignItems: "center"
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              import_material3.TextField,
+                              {
+                                size: "small",
+                                name: "others",
+                                label: "Mobile number",
+                                variant: "outlined",
+                                type: "tel",
+                                value: mobileNumber,
+                                onChange: (e) => {
+                                  const v = e.target.value;
+                                  if (/^\d*$/.test(v)) {
+                                    setMobileNumber(v);
+                                  }
+                                },
+                                slotProps: {
+                                  htmlInput: {
+                                    inputMode: "numeric",
+                                    maxLength: 11
+                                  }
+                                },
+                                placeholder: "Enter mobile number",
+                                autoComplete: "off"
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_material3.Tooltip,
+                          {
+                            title: state.consultInfo ? "Please complete or cancel the ongoing consult transfer before proceeding." : mobileNumber ? `Call To - ${mobileNumber}` : "Enter mobile number",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              import_material3.IconButton,
+                              {
+                                color: "success",
+                                disabled: !!state.consultInfo,
+                                sx: {
+                                  bgcolor: "action.hover",
+                                  "&:hover": { bgcolor: "action.selected" }
+                                },
+                                onClick: (e) => handleTransferClick(e, { mobile_number: mobileNumber != null ? mobileNumber : "" }, "OTHER"),
+                                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
+                              }
+                            ) })
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_material3.Menu,
+      {
+        anchorEl: transferMenuAnchor,
+        open: Boolean(transferMenuAnchor),
+        onClose: () => setTransferMenuAnchor(null),
+        anchorOrigin: { vertical: "top", horizontal: "left" },
+        transformOrigin: { vertical: "bottom", horizontal: "left" },
+        children: [
+          blindEnabled && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            import_material3.MenuItem,
+            {
+              onClick: () => {
+                if (pendingTransferData) handleTransferCall(pendingTransferData.data, pendingTransferData.type, "DEFAULT");
+                setTransferMenuAnchor(null);
+              },
+              sx: { gap: 1 },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.TransferWithinAStation, { fontSize: "small", color: "primary" }),
+                "Transfer"
+              ]
+            }
+          ),
+          attendedEnabled && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            import_material3.MenuItem,
+            {
+              onClick: () => {
+                if (pendingTransferData) handleTransferCall(pendingTransferData.data, pendingTransferData.type, "CONSULT");
+                setTransferMenuAnchor(null);
+              },
+              sx: { gap: 1 },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.RecordVoiceOver, { fontSize: "small", color: "primary" }),
+                "Consult then Transfer"
               ]
             }
           )
-        ] })
-      ] })
-    }
-  ) });
+        ]
+      }
+    )
+  ] });
 }
 function EndCallDispositionDialog({ open, setOpen, onSubmitDisposition }) {
   var _a2, _b, _c, _d, _e;
   const [getDispositions, data] = useGetRequest();
-  const [formData, setFormData] = (0, import_react9.useState)({
+  const [formData, setFormData] = (0, import_react10.useState)({
     disposition: { label: "", value: "", id: 0 },
     followUp: { label: "No", value: "N" },
     callbackDate: "",
@@ -2615,10 +3345,10 @@ function EndCallDispositionDialog({ open, setOpen, onSubmitDisposition }) {
     handleReset();
     setOpen(false);
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     getDispositions(END_POINT.DISPOSITIONS);
   }, []);
-  const dispositionsOptions = (0, import_react9.useMemo)(() => {
+  const dispositionsOptions = (0, import_react10.useMemo)(() => {
     var _a3, _b2, _c2, _d2;
     return ((_d2 = (_c2 = (_b2 = (_a3 = data == null ? void 0 : data.data) == null ? void 0 : _a3.data) == null ? void 0 : _b2.filter((item) => item.name !== "Resolved")) == null ? void 0 : _c2.map((item) => ({
       label: item.name,
@@ -2632,8 +3362,8 @@ function EndCallDispositionDialog({ open, setOpen, onSubmitDisposition }) {
       open,
       "aria-labelledby": "alert-dialog-title",
       "aria-describedby": "alert-dialog-description",
-      fullWidth: true,
       maxWidth: "xs",
+      slotProps: { paper: { sx: { minWidth: 500 } } },
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           import_material3.Box,
@@ -2874,6 +3604,7 @@ function ProcessorListDialog({
       "aria-labelledby": "alert-dialog-title",
       "aria-describedby": "alert-dialog-description",
       maxWidth: "xs",
+      slotProps: { paper: { sx: { minWidth: 500 } } },
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           import_material3.Box,
@@ -2953,8 +3684,8 @@ function CallHistoryDialog({ open, setOpen }) {
       open,
       "aria-labelledby": "alert-dialog-title",
       "aria-describedby": "alert-dialog-description",
-      fullWidth: true,
       maxWidth: "md",
+      slotProps: { paper: { sx: { minWidth: 500 } } },
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           import_material3.Box,
@@ -2992,15 +3723,18 @@ function CallHistoryDialog({ open, setOpen }) {
   ) });
 }
+// call-control-sdk/lib/components/callControls.tsx
+init_sdk_state();
 // call-control-sdk/lib/hooks/useDraggable.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 function useDraggable(initialPosition, onPositionChange) {
-  const [position, setPosition] = (0, import_react10.useState)(initialPosition);
-  const [isDragging, setIsDragging] = (0, import_react10.useState)(false);
-  const dragRef = (0, import_react10.useRef)();
-  const dragStart = (0, import_react10.useRef)({ x: 0, y: 0 });
-  const elementStart = (0, import_react10.useRef)({ x: 0, y: 0 });
-  const updatePosition = (0, import_react10.useCallback)(
+  const [position, setPosition] = (0, import_react11.useState)(initialPosition);
+  const [isDragging, setIsDragging] = (0, import_react11.useState)(false);
+  const dragRef = (0, import_react11.useRef)();
+  const dragStart = (0, import_react11.useRef)({ x: 0, y: 0 });
+  const elementStart = (0, import_react11.useRef)({ x: 0, y: 0 });
+  const updatePosition = (0, import_react11.useCallback)(
     (newPosition) => {
       const element = dragRef.current;
       if (!element) return;
@@ -3016,7 +3750,7 @@ function useDraggable(initialPosition, onPositionChange) {
     },
     [onPositionChange]
   );
-  const handleStart = (0, import_react10.useCallback)(
+  const handleStart = (0, import_react11.useCallback)(
     (clientX, clientY) => {
       setIsDragging(true);
       dragStart.current = { x: clientX, y: clientY };
@@ -3056,14 +3790,14 @@ function useDraggable(initialPosition, onPositionChange) {
     },
     [position, updatePosition]
   );
-  const handleMouseDown = (0, import_react10.useCallback)(
+  const handleMouseDown = (0, import_react11.useCallback)(
     (e) => {
       e.preventDefault();
       handleStart(e.clientX, e.clientY);
     },
     [handleStart]
   );
-  const handleTouchStart = (0, import_react10.useCallback)(
+  const handleTouchStart = (0, import_react11.useCallback)(
     (e) => {
       e.preventDefault();
       const touch = e.touches[0];
@@ -3082,6 +3816,11 @@ function useDraggable(initialPosition, onPositionChange) {
   };
 }
+// call-control-sdk/lib/components/callControls.tsx
+init_endPoint();
+init_axios();
+init_toastMessage();
 // call-control-sdk/lib/services/micController.ts
 function createMicController(constraints = { audio: true }) {
   let stream = null;
@@ -3212,6 +3951,7 @@ function cleanupAudioResources() {
 // call-control-sdk/lib/components/callControls.tsx
 var import_vault5 = require("@react-solutions/vault");
+init_storage();
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var getCombineConfrenceData = (localState, apiData) => {
   const localConfrenceData = localState == null ? void 0 : localState.conferenceLine;
@@ -3247,7 +3987,7 @@ var formatDuration = (seconds) => {
   return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
 };
 function CallControls({ onDataChange }) {
-  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a, _ab;
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a, _ab, _bb, _cb, _db, _eb, _fb, _gb, _hb, _ib, _jb, _kb, _lb;
   const theme = (0, import_material4.useTheme)();
   const state = useSDKState();
   const { showToast } = useToast();
@@ -3256,35 +3996,35 @@ function CallControls({ onDataChange }) {
     enabled: ((_b = state.sdkConfig) == null ? void 0 : _b.enabled) || {},
     outlined: ((_c = state.sdkConfig) == null ? void 0 : _c.outlined) || {}
   });
-  const micRef = (0, import_react11.useRef)(null);
-  const webSocketRef = (0, import_react11.useRef)(null);
-  const audioRef = (0, import_react11.useRef)(null);
-  const reconnectTimeoutRef = (0, import_react11.useRef)(null);
-  const pingIntervalRef = (0, import_react11.useRef)(null);
-  const reconnectAttemptsRef = (0, import_react11.useRef)(0);
-  const hasFlashedRef = (0, import_react11.useRef)(false);
-  const lastEventTimeRef = (0, import_react11.useRef)(null);
-  const holdStartTimeRef = (0, import_react11.useRef)(null);
-  const muteStartTimeRef = (0, import_react11.useRef)(null);
+  const micRef = (0, import_react12.useRef)(null);
+  const webSocketRef = (0, import_react12.useRef)(null);
+  const audioRef = (0, import_react12.useRef)(null);
+  const reconnectTimeoutRef = (0, import_react12.useRef)(null);
+  const pingIntervalRef = (0, import_react12.useRef)(null);
+  const reconnectAttemptsRef = (0, import_react12.useRef)(0);
+  const hasFlashedRef = (0, import_react12.useRef)(false);
+  const lastEventTimeRef = (0, import_react12.useRef)(null);
+  const holdStartTimeRef = (0, import_react12.useRef)(null);
+  const muteStartTimeRef = (0, import_react12.useRef)(null);
   const maxReconnectAttempts = 60;
   const baseReconnectDelay = 2e3;
   const maxReconnectDelay = 3e4;
-  const [anchorEl, setAnchorEl] = (0, import_react11.useState)(null);
-  const [statusAnchorEl, setStatusAnchorEl] = (0, import_react11.useState)(null);
-  const [dialerAnchorEl, setDialerAnchorEl] = (0, import_react11.useState)(null);
-  const [ambulanceAnchorEl, setAmbulanceAnchorEl] = (0, import_react11.useState)(null);
-  const [moreOptionsAnchorEl, setMoreOptionsAnchorEl] = (0, import_react11.useState)(null);
-  const [showIframe, setShowIframe] = (0, import_react11.useState)(true);
-  const [openCallDisposition, setOpenCallDisposition] = (0, import_react11.useState)(false);
-  const [openProcessorDialog, setOpenProcessorDialog] = (0, import_react11.useState)(false);
-  const [openCallHistoryDialog, setOpenCallHistoryDialog] = (0, import_react11.useState)(false);
-  const [processList, setProcessList] = (0, import_react11.useState)(null);
-  const [breaksList, setBreaksList] = (0, import_react11.useState)(null);
-  const [phoneNumber, setPhoneNumber] = (0, import_react11.useState)("");
-  const [callDuration, setCallDuration] = (0, import_react11.useState)(0);
-  const [callWrapuptime, setCallWrapuptime] = (0, import_react11.useState)(null);
-  const [holdDuration, setHoldDuration] = (0, import_react11.useState)(0);
-  const [muteDuration, setMuteDuration] = (0, import_react11.useState)(0);
+  const [anchorEl, setAnchorEl] = (0, import_react12.useState)(null);
+  const [statusAnchorEl, setStatusAnchorEl] = (0, import_react12.useState)(null);
+  const [dialerAnchorEl, setDialerAnchorEl] = (0, import_react12.useState)(null);
+  const [ambulanceAnchorEl, setAmbulanceAnchorEl] = (0, import_react12.useState)(null);
+  const [moreOptionsAnchorEl, setMoreOptionsAnchorEl] = (0, import_react12.useState)(null);
+  const [showIframe, setShowIframe] = (0, import_react12.useState)(true);
+  const [openCallDisposition, setOpenCallDisposition] = (0, import_react12.useState)(false);
+  const [openProcessorDialog, setOpenProcessorDialog] = (0, import_react12.useState)(false);
+  const [openCallHistoryDialog, setOpenCallHistoryDialog] = (0, import_react12.useState)(false);
+  const [processList, setProcessList] = (0, import_react12.useState)(null);
+  const [breaksList, setBreaksList] = (0, import_react12.useState)(null);
+  const [phoneNumber, setPhoneNumber] = (0, import_react12.useState)("");
+  const [callDuration, setCallDuration] = (0, import_react12.useState)(0);
+  const [callWrapuptime, setCallWrapuptime] = (0, import_react12.useState)(null);
+  const [holdDuration, setHoldDuration] = (0, import_react12.useState)(0);
+  const [muteDuration, setMuteDuration] = (0, import_react12.useState)(0);
   const { position, isDragging, dragRef, handleMouseDown, handleTouchStart } = useDraggable(
     state.controlPanelPosition,
     (newPosition) => sdkStateManager.setControlPanelPosition(newPosition)
@@ -3299,7 +4039,7 @@ function CallControls({ onDataChange }) {
     state.iframePosition,
     (newPosition) => sdkStateManager.setIframePosition(newPosition)
   );
-  const [clickToCall, { isLoading: clickToCallLoading }] = usePostRequest({
+  const [clickToCall2, { isLoading: clickToCallLoading }] = usePostRequest({
     onSuccess: () => {
       setPhoneNumber("");
       setDialerAnchorEl(null);
@@ -3314,7 +4054,7 @@ function CallControls({ onDataChange }) {
   });
   const [updateAgentStatus, { isLoading }] = usePostRequest();
   const [sendNotification] = usePostRequest();
-  const [endCall, { isLoading: endCallLoading }] = usePostRequest({
+  const [endCall2, { isLoading: endCallLoading }] = usePostRequest({
     onSuccess: () => {
       sdkStateManager.endCall();
       setOpenCallDisposition(false);
@@ -3385,7 +4125,7 @@ function CallControls({ onDataChange }) {
         phone_number: number,
         userId: state.agentId
       };
-      clickToCall(END_POINT.CLICK_TO_CALL, payload);
+      clickToCall2(END_POINT.CLICK_TO_CALL, payload);
     }
   };
   const handleHoldToggle = () => {
@@ -3421,7 +4161,7 @@ function CallControls({ onDataChange }) {
       endcall_type: "CLOSE"
     };
     setPhoneNumber("");
-    endCall(END_POINT.END_CALL, payload, {
+    endCall2(END_POINT.END_CALL, payload, {
       params: {
         isBreak: (_q2 = data == null ? void 0 : data.selected_break) != null ? _q2 : false
       }
@@ -3444,7 +4184,7 @@ function CallControls({ onDataChange }) {
       }
     });
   };
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const handleBeforeUnload = (e) => {
       e.preventDefault();
     };
@@ -3453,7 +4193,7 @@ function CallControls({ onDataChange }) {
       window.removeEventListener("beforeunload", handleBeforeUnload);
     };
   }, []);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const mic = createMicController();
     micRef.current = mic;
     mic.start().catch((err) => {
@@ -3461,7 +4201,7 @@ function CallControls({ onDataChange }) {
     });
     const handleKeyDown = (event) => {
       var _a3, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
-      const fullState = (0, import_vault5.getItem)(STORAGE_KEY);
+      const fullState = (0, import_vault5.getSession)(STORAGE_KEY);
       const key = (_a3 = event.key) == null ? void 0 : _a3.toLowerCase();
       if (!event.altKey || ((_b2 = fullState == null ? void 0 : fullState.callData) == null ? void 0 : _b2.status) !== "ONCALL" /* ONCALL */) {
         return;
@@ -3506,7 +4246,7 @@ function CallControls({ onDataChange }) {
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, []);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     let interval;
     let wrapUpinterval;
     if (state.callData.status && state.callData.status === "ONCALL" /* ONCALL */) {
@@ -3541,7 +4281,7 @@ function CallControls({ onDataChange }) {
       if (wrapUpinterval) clearInterval(wrapUpinterval);
     };
   }, [state.callData.status]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     var _a3, _b2, _c2;
     let holdInterval;
     const isOnCall = ((_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL" /* ONCALL */;
@@ -3563,7 +4303,7 @@ function CallControls({ onDataChange }) {
       if (holdInterval) clearInterval(holdInterval);
     };
   }, [(_d = state.callData) == null ? void 0 : _d.hold, (_e = state.callData) == null ? void 0 : _e.status]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     var _a3, _b2, _c2, _d2;
     let muteInterval;
     const isOnCall = ((_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL" /* ONCALL */;
@@ -3586,7 +4326,7 @@ function CallControls({ onDataChange }) {
       if (muteInterval) clearInterval(muteInterval);
     };
   }, [(_f = state.callData) == null ? void 0 : _f.mute, (_g = state.callData) == null ? void 0 : _g.status]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     createAudioElement().then((audio) => {
       audioRef.current = audio;
     }).catch((error) => {
@@ -3602,7 +4342,7 @@ function CallControls({ onDataChange }) {
       cleanupAudioResources();
     };
   }, []);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (onDataChange && state.callData) {
       const { process_id, process_name, status, phone_number, agent_id, convox_id } = state.callData;
       const callData = {
@@ -3616,12 +4356,16 @@ function CallControls({ onDataChange }) {
       onDataChange(callData);
     }
   }, [state.callData, onDataChange]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (state.agentId) {
       axios_default.get(END_POINT.BREAKS_LIST).then((res) => {
-        var _a3, _b2, _c2;
+        var _a3, _b2, _c2, _d2;
         if (res && ((_a3 = res.data) == null ? void 0 : _a3.data) && ((_c2 = (_b2 = res == null ? void 0 : res.data) == null ? void 0 : _b2.data) == null ? void 0 : _c2.length)) {
           setBreaksList(res.data.data);
+          const liveStatus = (_d2 = sdkStateManager.getState().callData) == null ? void 0 : _d2.status;
+          if (!liveStatus) {
+            handleUpdateAgentStatus(res.data.data[0].type);
+          }
         }
       }).catch((err) => {
         showToast(err.response.data.message, "error");
@@ -3656,13 +4400,13 @@ function CallControls({ onDataChange }) {
         }, 3e4);
       };
       webSocketRef.current.onmessage = (event) => {
-        var _a4, _b3, _c2, _d2, _e2;
+        var _a4, _b3, _c2, _d2, _e2, _f2;
         try {
           const data = JSON.parse(event.data);
           if (data.type === "pong") {
             return;
           }
-          const sdkState = (0, import_vault5.getItem)(STORAGE_KEY);
+          const sdkState = (0, import_vault5.getSession)(STORAGE_KEY);
           const confrence = getCombineConfrenceData(sdkState, data);
           const callData = {
             agent_id: data == null ? void 0 : data.agent_id,
@@ -3680,9 +4424,15 @@ function CallControls({ onDataChange }) {
           };
           sdkStateManager.updateCallData(callData);
           sdkStateManager.updateConferenceData([...confrence]);
+          sdkStateManager.setConsultInfo((_a4 = data.consult_info) != null ? _a4 : null);
+          if (data == null ? void 0 : data.call_consult_controls) {
+            sdkStateManager.updateSDKConfigFromPermissions(data.call_consult_controls);
+          } else {
+            sdkStateManager.resetConsultControls();
+          }
           if (["RINGING" /* RINGING */, "DIALING" /* DIALING */].includes(data.status)) {
             setShowIframe(true);
-            setCallWrapuptime((_b3 = (_a4 = sdkState == null ? void 0 : sdkState.sdkConfig) == null ? void 0 : _a4.auto_wrapup_time) != null ? _b3 : null);
+            setCallWrapuptime((_c2 = (_b3 = sdkState == null ? void 0 : sdkState.sdkConfig) == null ? void 0 : _b3.auto_wrapup_time) != null ? _c2 : null);
             sdkStateManager.updateConferenceData([
               {
                 line: 1,
@@ -3735,7 +4485,7 @@ function CallControls({ onDataChange }) {
                 isMergeCall: false
               }
             ]);
-            if ((data == null ? void 0 : data.mode) !== "manual" && audioRef.current && ((_c2 = state == null ? void 0 : state.sdkConfig) == null ? void 0 : _c2.enableRingtone)) {
+            if ((data == null ? void 0 : data.mode) !== "manual" && audioRef.current && ((_d2 = state == null ? void 0 : state.sdkConfig) == null ? void 0 : _d2.enableRingtone)) {
               audioRef.current.play().catch((error) => {
                 console.error("Failed to play ringtone:", error);
               });
@@ -3759,8 +4509,8 @@ function CallControls({ onDataChange }) {
             }
           } else if (((data == null ? void 0 : data.mute) === 1 || (data == null ? void 0 : data.hold) === 1) && data.status === "ONCALL" /* ONCALL */) {
           } else if (data.status === "BREAK" /* BREAK */) {
-            const breakTime = (_d2 = sdkState == null ? void 0 : sdkState.sdkConfig) == null ? void 0 : _d2.break_time;
-            const eventTime = (_e2 = data == null ? void 0 : data.event_time) != null ? _e2 : null;
+            const breakTime = (_e2 = sdkState == null ? void 0 : sdkState.sdkConfig) == null ? void 0 : _e2.break_time;
+            const eventTime = (_f2 = data == null ? void 0 : data.event_time) != null ? _f2 : null;
             if (eventTime !== lastEventTimeRef.current) {
               hasFlashedRef.current = false;
               lastEventTimeRef.current = eventTime;
@@ -3822,7 +4572,7 @@ function CallControls({ onDataChange }) {
       }
     }
   };
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (state.agentId) {
       connectWebSocket();
     }
@@ -3864,24 +4614,25 @@ function CallControls({ onDataChange }) {
   }
   const isOnHold = ((_h = state.callData) == null ? void 0 : _h.hold) === 1 && ((_j = (_i = state.callData) == null ? void 0 : _i.status) == null ? void 0 : _j.toUpperCase()) === "ONCALL" /* ONCALL */;
   const isMuted = ((_k = state.callData) == null ? void 0 : _k.mute) === 1 && ((_m = (_l = state.callData) == null ? void 0 : _l.status) == null ? void 0 : _m.toUpperCase()) === "ONCALL" /* ONCALL */;
+  const isVertical = ((_n = state.sdkConfig) == null ? void 0 : _n.sdkPosition) === "vertical";
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Fade, { in: true, timeout: 300, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_material4.Paper,
       {
-        ref: ((_n = state.sdkConfig) == null ? void 0 : _n.isDraggable) ? dragRef : null,
-        elevation: isDragging ? 4 : ((_o = state.sdkConfig) == null ? void 0 : _o.isDraggable) ? 1 : 0,
+        ref: ((_o = state.sdkConfig) == null ? void 0 : _o.isDraggable) ? dragRef : null,
+        elevation: isDragging ? 4 : ((_p = state.sdkConfig) == null ? void 0 : _p.isDraggable) ? 1 : 0,
         sx: {
-          position: ((_p = state.sdkConfig) == null ? void 0 : _p.isDraggable) ? "fixed" : "relative",
-          left: ((_q = state.sdkConfig) == null ? void 0 : _q.isDraggable) ? position.x : "auto",
-          top: ((_r = state.sdkConfig) == null ? void 0 : _r.isDraggable) ? position.y : "auto",
+          position: ((_q = state.sdkConfig) == null ? void 0 : _q.isDraggable) ? "fixed" : "relative",
+          left: ((_r = state.sdkConfig) == null ? void 0 : _r.isDraggable) ? position.x : "auto",
+          top: ((_s = state.sdkConfig) == null ? void 0 : _s.isDraggable) ? position.y : "auto",
           display: "inline-block",
-          width: "auto",
+          width: isVertical ? "180px" : "auto",
           flexShrink: 0,
           whiteSpace: "nowrap",
           p: 0.5,
           borderRadius: 3,
           bgcolor: "background.paper",
-          zIndex: ((_s = state.sdkConfig) == null ? void 0 : _s.isDraggable) ? Number.MAX_SAFE_INTEGER : 0,
+          zIndex: ((_t = state.sdkConfig) == null ? void 0 : _t.isDraggable) ? Number.MAX_SAFE_INTEGER : 0,
           transition: theme.transitions.create(["box-shadow", "transform"], {
             duration: theme.transitions.duration.short
           }),
@@ -3892,7 +4643,8 @@ function CallControls({ onDataChange }) {
           {
             sx: {
               display: "flex",
-              alignItems: "center"
+              flexDirection: isVertical ? "column" : "row",
+              alignItems: isVertical ? "stretch" : "center"
             },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -3900,12 +4652,13 @@ function CallControls({ onDataChange }) {
                 {
                   sx: {
                     display: "flex",
-                    alignItems: "center",
+                    flexDirection: isVertical ? "column" : "row",
+                    alignItems: isVertical ? "stretch" : "center",
                     gap: 1,
-                    margin: "0px 10px"
+                    margin: isVertical ? "10px 8px 4px 8px" : "0px 10px"
                   },
                   children: [
-                    ((_t = state.sdkConfig) == null ? void 0 : _t.isDraggable) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    ((_u = state.sdkConfig) == null ? void 0 : _u.isDraggable) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       import_material4.IconButton,
                       {
                         component: "div",
@@ -3918,8 +4671,49 @@ function CallControls({ onDataChange }) {
                         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.DragIndicator, {})
                       }
                     ),
-                    ((_u = state.sdkConfig) == null ? void 0 : _u.enableQueueName) && ((_v = state == null ? void 0 : state.callData) == null ? void 0 : _v.queue_name) && ((_w = state == null ? void 0 : state.callData) == null ? void 0 : _w.mode) !== "manual" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Chip, { label: (_x = state == null ? void 0 : state.callData) == null ? void 0 : _x.queue_name }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: ((_y = state.sdkConfig) == null ? void 0 : _y.disabledDialButton) ? "Outbound call feature is disabled" : "Dial", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { component: "span", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    ((_v = state.sdkConfig) == null ? void 0 : _v.enableQueueName) && ((_w = state == null ? void 0 : state.callData) == null ? void 0 : _w.queue_name) && ((_x = state == null ? void 0 : state.callData) == null ? void 0 : _x.mode) !== "manual" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Chip, { label: (_y = state == null ? void 0 : state.callData) == null ? void 0 : _y.queue_name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: ((_z = state.sdkConfig) == null ? void 0 : _z.disabledDialButton) ? "Outbound call feature is disabled" : "Dial", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { component: "span", sx: isVertical ? { display: "block" } : {}, children: isVertical ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      import_material4.Button,
+                      {
+                        variant: "outlined",
+                        startIcon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.WifiCalling3, {}),
+                        onClick: (e) => {
+                          var _a3, _b2, _c2;
+                          if (![
+                            "BREAK" /* BREAK */,
+                            "ONCALL" /* ONCALL */,
+                            "RINGING" /* RINGING */,
+                            "WRAPUP" /* WRAPUP */
+                          ].includes((_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()) && !((_c2 = state.sdkConfig) == null ? void 0 : _c2.disabledDialButton)) {
+                            handleOpenDialer(e);
+                          }
+                        },
+                        disabled: [
+                          "BREAK" /* BREAK */,
+                          "ONCALL" /* ONCALL */,
+                          "RINGING" /* RINGING */,
+                          "WRAPUP" /* WRAPUP */
+                        ].includes((_A = state.callData.status) == null ? void 0 : _A.toUpperCase()) || ((_B = state.sdkConfig) == null ? void 0 : _B.disabledDialButton),
+                        sx: {
+                          justifyContent: "flex-start",
+                          width: "100%",
+                          px: 2,
+                          color: [
+                            "BREAK" /* BREAK */,
+                            "ONCALL" /* ONCALL */,
+                            "RINGING" /* RINGING */,
+                            "WRAPUP" /* WRAPUP */
+                          ].includes((_C = state.callData.status) == null ? void 0 : _C.toUpperCase()) || ((_D = state.sdkConfig) == null ? void 0 : _D.disabledDialButton) ? "action.selected" : "success.main",
+                          borderColor: [
+                            "BREAK" /* BREAK */,
+                            "ONCALL" /* ONCALL */,
+                            "RINGING" /* RINGING */,
+                            "WRAPUP" /* WRAPUP */
+                          ].includes((_E = state.callData.status) == null ? void 0 : _E.toUpperCase()) || ((_F = state.sdkConfig) == null ? void 0 : _F.disabledDialButton) ? "action.selected" : "success.main"
+                        },
+                        children: "Dial"
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       import_material4.IconButton,
                       {
                         size: "small",
@@ -3939,7 +4733,7 @@ function CallControls({ onDataChange }) {
                           "ONCALL" /* ONCALL */,
                           "RINGING" /* RINGING */,
                           "WRAPUP" /* WRAPUP */
-                        ].includes((_z = state.callData.status) == null ? void 0 : _z.toUpperCase()) || ((_A = state.sdkConfig) == null ? void 0 : _A.disabledDialButton),
+                        ].includes((_G = state.callData.status) == null ? void 0 : _G.toUpperCase()) || ((_H = state.sdkConfig) == null ? void 0 : _H.disabledDialButton),
                         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                           import_icons_material2.WifiCalling3,
                           {
@@ -3949,7 +4743,7 @@ function CallControls({ onDataChange }) {
                                 "ONCALL" /* ONCALL */,
                                 "RINGING" /* RINGING */,
                                 "WRAPUP" /* WRAPUP */
-                              ].includes((_B = state.callData.status) == null ? void 0 : _B.toUpperCase()) || ((_C = state.sdkConfig) == null ? void 0 : _C.disabledDialButton) ? "action.selected" : "success.main"
+                              ].includes((_I = state.callData.status) == null ? void 0 : _I.toUpperCase()) || ((_J = state.sdkConfig) == null ? void 0 : _J.disabledDialButton) ? "action.selected" : "success.main"
                             }
                           }
                         )
@@ -4068,7 +4862,7 @@ function CallControls({ onDataChange }) {
                               width: "60px",
                               textAlign: "center"
                             },
-                            children: (_F = (_E = (_D = state.callData) == null ? void 0 : _D.status) == null ? void 0 : _E.toUpperCase()) != null ? _F : "N/A"
+                            children: (_M = (_L = (_K = state.callData) == null ? void 0 : _K.status) == null ? void 0 : _L.toUpperCase()) != null ? _M : "N/A"
                           }
                         ),
                         onClick: handleOpenAgentStatus,
@@ -4084,17 +4878,20 @@ function CallControls({ onDataChange }) {
                 {
                   sx: {
                     display: "flex",
+                    flexDirection: isVertical ? "column" : "row",
                     gap: 1,
                     justifyContent: "center",
-                    alignItems: "center"
+                    alignItems: isVertical ? "stretch" : "center",
+                    margin: isVertical ? "0px 8px 8px 8px" : "0px"
                   },
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Agent Ready", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       import_material4.Button,
                       {
                         variant: ["BREAK" /* BREAK */, "MISSED" /* MISSED */].includes(
-                          (_H = (_G = state.callData) == null ? void 0 : _G.status) == null ? void 0 : _H.toUpperCase()
+                          (_O = (_N = state.callData) == null ? void 0 : _N.status) == null ? void 0 : _O.toUpperCase()
                         ) ? "outlined" : "contained",
+                        startIcon: isVertical ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.SupportAgent, {}) : void 0,
                         onClick: (e) => {
                           var _a3, _b2;
                           if (["BREAK" /* BREAK */, "MISSED" /* MISSED */].includes(
@@ -4106,20 +4903,21 @@ function CallControls({ onDataChange }) {
                         },
                         classes: {
                           root: ["BREAK" /* BREAK */, "MISSED" /* MISSED */].includes(
-                            (_J = (_I = state.callData) == null ? void 0 : _I.status) == null ? void 0 : _J.toUpperCase()
+                            (_Q = (_P = state.callData) == null ? void 0 : _P.status) == null ? void 0 : _Q.toUpperCase()
                           ) ? "outlined" : "enabled"
                         },
-                        sx: __spreadValues({}, ["BREAK" /* BREAK */, "MISSED" /* MISSED */].includes(
-                          (_L = (_K = state.callData) == null ? void 0 : _K.status) == null ? void 0 : _L.toUpperCase()
-                        ) ? outlined : enabled),
+                        sx: __spreadValues(__spreadValues({}, ["BREAK" /* BREAK */, "MISSED" /* MISSED */].includes(
+                          (_S = (_R = state.callData) == null ? void 0 : _R.status) == null ? void 0 : _S.toUpperCase()
+                        ) ? outlined : enabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }),
                         disabled: agentReadyLoading,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.SupportAgent, {})
+                        children: isVertical ? "Agent Ready" : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.SupportAgent, {})
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: ((_M = state.sdkConfig) == null ? void 0 : _M.disableHoldButton) ? "Hold feature is disabled" : ((_N = state.callData) == null ? void 0 : _N.hold) === 1 ? "Resume" : "Hold", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { component: "span", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: ((_T = state.sdkConfig) == null ? void 0 : _T.disableHoldButton) ? "Hold feature is disabled" : ((_U = state.callData) == null ? void 0 : _U.hold) === 1 ? "Resume" : "Hold", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { component: "span", sx: isVertical ? { display: "block" } : {}, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       import_material4.Button,
                       {
-                        variant: ((_O = state.callData) == null ? void 0 : _O.hold) === 1 && ((_Q = (_P = state.callData) == null ? void 0 : _P.status) == null ? void 0 : _Q.toUpperCase()) === "ONCALL" /* ONCALL */ ? "contained" : "outlined",
+                        variant: ((_V = state.callData) == null ? void 0 : _V.hold) === 1 && ((_X = (_W = state.callData) == null ? void 0 : _W.status) == null ? void 0 : _X.toUpperCase()) === "ONCALL" /* ONCALL */ ? "contained" : "outlined",
+                        startIcon: isVertical ? holdOrUnHoldLoading ? void 0 : ((_Y = state.callData) == null ? void 0 : _Y.hold) === 1 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.PlayArrow, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Pause, {}) : void 0,
                         onClick: (e) => {
                           var _a3;
                           e.stopPropagation();
@@ -4127,21 +4925,22 @@ function CallControls({ onDataChange }) {
                             handleHoldToggle();
                           }
                         },
-                        sx: ((_R = state.callData) == null ? void 0 : _R.hold) === 1 && ((_T = (_S = state.callData) == null ? void 0 : _S.status) == null ? void 0 : _T.toUpperCase()) === "ONCALL" /* ONCALL */ ? __spreadValues({}, enabled) : ((_V = (_U = state.callData) == null ? void 0 : _U.status) == null ? void 0 : _V.toUpperCase()) === "ONCALL" /* ONCALL */ && !((_W = state.sdkConfig) == null ? void 0 : _W.disableHoldButton) ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
-                        disabled: ((_Y = (_X = state.callData) == null ? void 0 : _X.status) == null ? void 0 : _Y.toUpperCase()) !== "ONCALL" /* ONCALL */ && ((_Z = state.callData) == null ? void 0 : _Z.hold) !== 1 || holdOrUnHoldLoading || ((__ = state.sdkConfig) == null ? void 0 : __.disableHoldButton),
+                        sx: ((_Z = state.callData) == null ? void 0 : _Z.hold) === 1 && ((_$ = (__ = state.callData) == null ? void 0 : __.status) == null ? void 0 : _$.toUpperCase()) === "ONCALL" /* ONCALL */ ? __spreadValues(__spreadValues({}, enabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : ((_ba = (_aa = state.callData) == null ? void 0 : _aa.status) == null ? void 0 : _ba.toUpperCase()) === "ONCALL" /* ONCALL */ && !((_ca = state.sdkConfig) == null ? void 0 : _ca.disableHoldButton) ? __spreadValues(__spreadValues({}, outlined), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : __spreadValues(__spreadValues({}, disabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }),
+                        disabled: ((_ea = (_da = state.callData) == null ? void 0 : _da.status) == null ? void 0 : _ea.toUpperCase()) !== "ONCALL" /* ONCALL */ && ((_fa = state.callData) == null ? void 0 : _fa.hold) !== 1 || holdOrUnHoldLoading || ((_ga = state.sdkConfig) == null ? void 0 : _ga.disableHoldButton),
                         children: holdOrUnHoldLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                           import_material4.CircularProgress,
                           {
                             size: "20px",
                             sx: { color: theme.palette.primary.main }
                           }
-                        ) : ((_$ = state.callData) == null ? void 0 : _$.hold) === 1 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.PlayArrow, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Pause, {})
+                        ) : isVertical ? ((_ha = state.callData) == null ? void 0 : _ha.hold) === 1 ? "Resume" : "Hold" : ((_ia = state.callData) == null ? void 0 : _ia.hold) === 1 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.PlayArrow, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Pause, {})
                       }
                     ) }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: ((_aa = state.sdkConfig) == null ? void 0 : _aa.disableMuteButton) ? "Mute feature is disabled" : ((_ba = state.callData) == null ? void 0 : _ba.mute) === 1 ? "Unmute" : "Mute", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { component: "span", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: ((_ja = state.sdkConfig) == null ? void 0 : _ja.disableMuteButton) ? "Mute feature is disabled" : ((_ka = state.callData) == null ? void 0 : _ka.mute) === 1 ? "Unmute" : "Mute", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { component: "span", sx: isVertical ? { display: "block" } : {}, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       import_material4.Button,
                       {
-                        variant: ((_ca = state.callData) == null ? void 0 : _ca.mute) === 1 && ((_ea = (_da = state.callData) == null ? void 0 : _da.status) == null ? void 0 : _ea.toUpperCase()) === "ONCALL" /* ONCALL */ ? "contained" : "outlined",
+                        variant: ((_la = state.callData) == null ? void 0 : _la.mute) === 1 && ((_na = (_ma = state.callData) == null ? void 0 : _ma.status) == null ? void 0 : _na.toUpperCase()) === "ONCALL" /* ONCALL */ ? "contained" : "outlined",
+                        startIcon: isVertical ? muteOrUnMuteLoading ? void 0 : ((_oa = state.callData) == null ? void 0 : _oa.mute) === 1 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.MicOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Mic, {}) : void 0,
                         onClick: (e) => {
                           var _a3;
                           e.stopPropagation();
@@ -4149,21 +4948,22 @@ function CallControls({ onDataChange }) {
                             handleMuteToggle();
                           }
                         },
-                        sx: ((_fa = state.sdkConfig) == null ? void 0 : _fa.disableMuteButton) || ((_ga = state.callData) == null ? void 0 : _ga.hold) === 1 ? __spreadValues({}, disabled) : ((_ha = state.callData) == null ? void 0 : _ha.mute) === 1 && ((_ja = (_ia = state.callData) == null ? void 0 : _ia.status) == null ? void 0 : _ja.toUpperCase()) === "ONCALL" /* ONCALL */ ? __spreadValues({}, enabled) : ((_la = (_ka = state.callData) == null ? void 0 : _ka.status) == null ? void 0 : _la.toUpperCase()) === "ONCALL" /* ONCALL */ ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
-                        disabled: ((_na = (_ma = state.callData) == null ? void 0 : _ma.status) == null ? void 0 : _na.toUpperCase()) !== "ONCALL" /* ONCALL */ && ((_oa = state.callData) == null ? void 0 : _oa.mute) !== 1 || muteOrUnMuteLoading || ((_pa = state.callData) == null ? void 0 : _pa.hold) === 1 || ((_qa = state.sdkConfig) == null ? void 0 : _qa.disableMuteButton),
+                        sx: ((_pa = state.sdkConfig) == null ? void 0 : _pa.disableMuteButton) || ((_qa = state.callData) == null ? void 0 : _qa.hold) === 1 ? __spreadValues(__spreadValues({}, disabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : ((_ra = state.callData) == null ? void 0 : _ra.mute) === 1 && ((_ta = (_sa = state.callData) == null ? void 0 : _sa.status) == null ? void 0 : _ta.toUpperCase()) === "ONCALL" /* ONCALL */ ? __spreadValues(__spreadValues({}, enabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : ((_va = (_ua = state.callData) == null ? void 0 : _ua.status) == null ? void 0 : _va.toUpperCase()) === "ONCALL" /* ONCALL */ ? __spreadValues(__spreadValues({}, outlined), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : __spreadValues(__spreadValues({}, disabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }),
+                        disabled: ((_xa = (_wa = state.callData) == null ? void 0 : _wa.status) == null ? void 0 : _xa.toUpperCase()) !== "ONCALL" /* ONCALL */ && ((_ya = state.callData) == null ? void 0 : _ya.mute) !== 1 || muteOrUnMuteLoading || ((_za = state.callData) == null ? void 0 : _za.hold) === 1 || ((_Aa = state.sdkConfig) == null ? void 0 : _Aa.disableMuteButton),
                         children: muteOrUnMuteLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                           import_material4.CircularProgress,
                           {
                             size: "20px",
                             sx: { color: theme.palette.primary.main }
                           }
-                        ) : ((_ra = state.callData) == null ? void 0 : _ra.mute) === 1 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.MicOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Mic, {})
+                        ) : isVertical ? ((_Ba = state.callData) == null ? void 0 : _Ba.mute) === 1 ? "Unmute" : "Mute" : ((_Ca = state.callData) == null ? void 0 : _Ca.mute) === 1 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.MicOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Mic, {})
                       }
                     ) }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: ((_sa = state.sdkConfig) == null ? void 0 : _sa.disableCallTransferButton) ? "Transfer Call feature is disabled" : "Transfer Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { component: "span", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: ((_Da = state.sdkConfig) == null ? void 0 : _Da.disableCallTransferButton) ? "Transfer Call feature is disabled" : "Transfer Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { component: "span", sx: isVertical ? { display: "block" } : {}, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       import_material4.Button,
                       {
                         variant: state.openCallTransferDialog ? "contained" : "outlined",
+                        startIcon: isVertical ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.TransferWithinAStation, {}) : void 0,
                         onClick: (e) => {
                           var _a3, _b2, _c2;
                           if (((_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL" /* ONCALL */ && !((_c2 = state.sdkConfig) == null ? void 0 : _c2.disableCallTransferButton)) {
@@ -4171,15 +4971,16 @@ function CallControls({ onDataChange }) {
                             sdkStateManager.setOpenCallTransferDialog(true);
                           }
                         },
-                        sx: state.openCallTransferDialog ? __spreadValues({}, enabled) : ((_ua = (_ta = state.callData) == null ? void 0 : _ta.status) == null ? void 0 : _ua.toUpperCase()) === "ONCALL" /* ONCALL */ && !((_va = state.sdkConfig) == null ? void 0 : _va.disableCallTransferButton) ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
-                        disabled: ((_xa = (_wa = state.callData) == null ? void 0 : _wa.status) == null ? void 0 : _xa.toUpperCase()) !== "ONCALL" /* ONCALL */ || ((_ya = state.sdkConfig) == null ? void 0 : _ya.disableCallTransferButton),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.TransferWithinAStation, {})
+                        sx: state.openCallTransferDialog ? __spreadValues(__spreadValues({}, enabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : ((_Fa = (_Ea = state.callData) == null ? void 0 : _Ea.status) == null ? void 0 : _Fa.toUpperCase()) === "ONCALL" /* ONCALL */ && !((_Ga = state.sdkConfig) == null ? void 0 : _Ga.disableCallTransferButton) ? __spreadValues(__spreadValues({}, outlined), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : __spreadValues(__spreadValues({}, disabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }),
+                        disabled: ((_Ia = (_Ha = state.callData) == null ? void 0 : _Ha.status) == null ? void 0 : _Ia.toUpperCase()) !== "ONCALL" /* ONCALL */ || ((_Ja = state.sdkConfig) == null ? void 0 : _Ja.disableCallTransferButton),
+                        children: isVertical ? "Transfer" : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.TransferWithinAStation, {})
                       }
                     ) }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: ((_za = state.sdkConfig) == null ? void 0 : _za.disableConferenceButton) ? "Conference Call feature is disabled" : "Conference Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { component: "span", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: ((_Ka = state.sdkConfig) == null ? void 0 : _Ka.disableConferenceButton) ? "Conference Call feature is disabled" : "Conference Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { component: "span", sx: isVertical ? { display: "block" } : {}, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       import_material4.Button,
                       {
                         variant: state.openConferenceDialog ? "contained" : "outlined",
+                        startIcon: isVertical ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Group, {}) : void 0,
                         onClick: (e) => {
                           var _a3, _b2, _c2;
                           if (((_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL" /* ONCALL */ && !((_c2 = state.sdkConfig) == null ? void 0 : _c2.disableConferenceButton)) {
@@ -4187,15 +4988,16 @@ function CallControls({ onDataChange }) {
                             sdkStateManager.setOpenConferenceDialog(true);
                           }
                         },
-                        sx: state.openConferenceDialog ? __spreadValues({}, enabled) : ((_Ba = (_Aa = state.callData) == null ? void 0 : _Aa.status) == null ? void 0 : _Ba.toUpperCase()) === "ONCALL" /* ONCALL */ && !((_Ca = state.sdkConfig) == null ? void 0 : _Ca.disableConferenceButton) ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
-                        disabled: ((_Ea = (_Da = state.callData) == null ? void 0 : _Da.status) == null ? void 0 : _Ea.toUpperCase()) !== "ONCALL" /* ONCALL */ || ((_Fa = state.sdkConfig) == null ? void 0 : _Fa.disableConferenceButton),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Group, {})
+                        sx: state.openConferenceDialog ? __spreadValues(__spreadValues({}, enabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : ((_Ma = (_La = state.callData) == null ? void 0 : _La.status) == null ? void 0 : _Ma.toUpperCase()) === "ONCALL" /* ONCALL */ && !((_Na = state.sdkConfig) == null ? void 0 : _Na.disableConferenceButton) ? __spreadValues(__spreadValues({}, outlined), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : __spreadValues(__spreadValues({}, disabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }),
+                        disabled: ((_Pa = (_Oa = state.callData) == null ? void 0 : _Oa.status) == null ? void 0 : _Pa.toUpperCase()) !== "ONCALL" /* ONCALL */ || ((_Qa = state.sdkConfig) == null ? void 0 : _Qa.disableConferenceButton),
+                        children: isVertical ? "Conference" : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Group, {})
                       }
                     ) }) }),
-                    ((_Ga = state.sdkConfig) == null ? void 0 : _Ga.enableSmsServices) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Send SMS", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    ((_Ra = state.sdkConfig) == null ? void 0 : _Ra.enableSmsServices) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Send SMS", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       import_material4.Button,
                       {
                         variant: Boolean(ambulanceAnchorEl) ? "contained" : "outlined",
+                        startIcon: isVertical ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.SmsSharp, {}) : void 0,
                         onClick: (e) => {
                           var _a3, _b2;
                           if (["ONCALL" /* ONCALL */, "WRAPUP" /* WRAPUP */].includes(
@@ -4205,16 +5007,16 @@ function CallControls({ onDataChange }) {
                             handleOpenAbulanceServices(e);
                           }
                         },
-                        sx: Boolean(ambulanceAnchorEl) ? __spreadValues({}, enabled) : ["ONCALL" /* ONCALL */, "WRAPUP" /* WRAPUP */].includes(
-                          (_Ia = (_Ha = state.callData) == null ? void 0 : _Ha.status) == null ? void 0 : _Ia.toUpperCase()
-                        ) ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                        sx: Boolean(ambulanceAnchorEl) ? __spreadValues(__spreadValues({}, enabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : ["ONCALL" /* ONCALL */, "WRAPUP" /* WRAPUP */].includes(
+                          (_Ta = (_Sa = state.callData) == null ? void 0 : _Sa.status) == null ? void 0 : _Ta.toUpperCase()
+                        ) ? __spreadValues(__spreadValues({}, outlined), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : __spreadValues(__spreadValues({}, disabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }),
                         disabled: !["ONCALL" /* ONCALL */, "WRAPUP" /* WRAPUP */].includes(
-                          (_Ka = (_Ja = state.callData) == null ? void 0 : _Ja.status) == null ? void 0 : _Ka.toUpperCase()
+                          (_Va = (_Ua = state.callData) == null ? void 0 : _Ua.status) == null ? void 0 : _Va.toUpperCase()
                         ),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.SmsSharp, {})
+                        children: isVertical ? "Send SMS" : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.SmsSharp, {})
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: ((_La = state.sdkConfig) == null ? void 0 : _La.disableEndCallButton) ? "End Call feature is disabled" : "End Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { component: "span", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: ((_Wa = state.sdkConfig) == null ? void 0 : _Wa.disableEndCallButton) ? "End Call feature is disabled" : "End Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { component: "span", sx: isVertical ? { display: "block" } : {}, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       import_material4.Button,
                       {
                         variant: [
@@ -4222,7 +5024,8 @@ function CallControls({ onDataChange }) {
                           "RINGING" /* RINGING */,
                           "DIALING" /* DIALING */,
                           "WRAPUP" /* WRAPUP */
-                        ].includes((_Na = (_Ma = state.callData) == null ? void 0 : _Ma.status) == null ? void 0 : _Na.toUpperCase()) && !((_Oa = state.sdkConfig) == null ? void 0 : _Oa.disableEndCallButton) ? "contained" : "outlined",
+                        ].includes((_Ya = (_Xa = state.callData) == null ? void 0 : _Xa.status) == null ? void 0 : _Ya.toUpperCase()) && !((_Za = state.sdkConfig) == null ? void 0 : _Za.disableEndCallButton) ? "contained" : "outlined",
+                        startIcon: isVertical && !endCallLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.CallEnd, {}) : void 0,
                         onClick: (e) => {
                           var _a3, _b2, _c2;
                           if ([
@@ -4240,7 +5043,7 @@ function CallControls({ onDataChange }) {
                           "RINGING" /* RINGING */,
                           "DIALING" /* DIALING */,
                           "WRAPUP" /* WRAPUP */
-                        ].includes((_Qa = (_Pa = state.callData) == null ? void 0 : _Pa.status) == null ? void 0 : _Qa.toUpperCase()) && !((_Ra = state.sdkConfig) == null ? void 0 : _Ra.disableEndCallButton) ? __spreadProps(__spreadValues({}, enabled), {
+                        ].includes((_$a = (__a = state.callData) == null ? void 0 : __a.status) == null ? void 0 : _$a.toUpperCase()) && !((_ab = state.sdkConfig) == null ? void 0 : _ab.disableEndCallButton) ? __spreadValues(__spreadProps(__spreadValues({}, enabled), {
                           borderRight: "1px",
                           backgroundColor: "error.main",
                           minWidth: "60px !important",
@@ -4256,22 +5059,23 @@ function CallControls({ onDataChange }) {
                             bgcolor: "error.light",
                             boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
                           }
-                        }) : __spreadProps(__spreadValues({}, disabled), {
+                        }), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : __spreadValues(__spreadProps(__spreadValues({}, disabled), {
                           minWidth: "60px !important"
-                        }),
+                        }), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }),
                         disabled: ![
                           "ONCALL" /* ONCALL */,
                           "RINGING" /* RINGING */,
                           "DIALING" /* DIALING */,
                           "WRAPUP" /* WRAPUP */
-                        ].includes((_Ta = (_Sa = state.callData) == null ? void 0 : _Sa.status) == null ? void 0 : _Ta.toUpperCase()) || endCallLoading || ((_Ua = state.sdkConfig) == null ? void 0 : _Ua.disableEndCallButton),
-                        children: endCallLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.CircularProgress, { size: "20px", color: "error" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.CallEnd, {})
+                        ].includes((_cb = (_bb = state.callData) == null ? void 0 : _bb.status) == null ? void 0 : _cb.toUpperCase()) || endCallLoading || ((_db = state.sdkConfig) == null ? void 0 : _db.disableEndCallButton),
+                        children: endCallLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.CircularProgress, { size: "20px", color: "error" }) : isVertical ? "End Call" : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.CallEnd, {})
                       }
                     ) }) }),
-                    !((_Va = state.sdkConfig) == null ? void 0 : _Va.disabledMoreOptionsButton) && processList && (processList == null ? void 0 : processList.length) > 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Switch Process", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    !((_eb = state.sdkConfig) == null ? void 0 : _eb.disabledMoreOptionsButton) && processList && (processList == null ? void 0 : processList.length) > 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Switch Process", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       import_material4.Button,
                       {
                         variant: Boolean(moreOptionsAnchorEl) ? "contained" : "outlined",
+                        startIcon: isVertical ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.MoreVert, {}) : void 0,
                         onClick: (e) => {
                           var _a3, _b2;
                           if (["BREAK" /* BREAK */, "IDLE" /* IDLE */].includes(
@@ -4281,11 +5085,11 @@ function CallControls({ onDataChange }) {
                             handleOpenMoreOptions(e);
                           }
                         },
-                        sx: Boolean(moreOptionsAnchorEl) ? __spreadValues({}, enabled) : __spreadValues({}, outlined),
+                        sx: Boolean(moreOptionsAnchorEl) ? __spreadValues(__spreadValues({}, enabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : __spreadValues(__spreadValues({}, outlined), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }),
                         disabled: !["BREAK" /* BREAK */, "IDLE" /* IDLE */].includes(
-                          (_Xa = (_Wa = state.callData) == null ? void 0 : _Wa.status) == null ? void 0 : _Xa.toUpperCase()
+                          (_gb = (_fb = state.callData) == null ? void 0 : _fb.status) == null ? void 0 : _gb.toUpperCase()
                         ),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.MoreVert, {})
+                        children: isVertical ? "Switch Process" : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.MoreVert, {})
                       }
                     ) })
                   ]
@@ -4316,7 +5120,7 @@ function CallControls({ onDataChange }) {
               transition: theme.transitions.create(["box-shadow", "transform"], {
                 duration: theme.transitions.duration.short
               }),
-              visibility: showIframe && !((_Ya = state.sdkConfig) == null ? void 0 : _Ya.disableSoftPhone) ? "visible" : "hidden",
+              visibility: showIframe && !((_hb = state.sdkConfig) == null ? void 0 : _hb.disableSoftPhone) ? "visible" : "hidden",
               userSelect: "none"
             },
             children: [
@@ -4351,7 +5155,7 @@ function CallControls({ onDataChange }) {
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "iframe",
                 {
-                  src: `${(_Za = state.urlConfig) == null ? void 0 : _Za.iframeURL}/static/phone/index.html?user_id=${(__a = state.urlConfig) == null ? void 0 : __a.id}&api_url=${(_$a = state.urlConfig) == null ? void 0 : _$a.iframeAPIURL}&token=${(_ab = state.authorization) == null ? void 0 : _ab.accessToken}`,
+                  src: `${(_ib = state.urlConfig) == null ? void 0 : _ib.iframeURL}/static/phone/index.html?user_id=${(_jb = state.urlConfig) == null ? void 0 : _jb.id}&api_url=${(_kb = state.urlConfig) == null ? void 0 : _kb.iframeAPIURL}&token=${(_lb = state.authorization) == null ? void 0 : _lb.accessToken}`,
                   height: 380,
                   width: 420,
                   allow: "camera; microphone; autoplay",
@@ -4665,18 +5469,14 @@ function CallControls({ onDataChange }) {
   ] });
 }
-// call-control-sdk/lib/components/SDKProvider.tsx
-var import_react12 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var SDKProvider = (0, import_react12.memo)(({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ToastProvider, { children });
-});
-SDKProvider.displayName = "SDKProvider";
 // call-control-sdk/lib/components/callControlPanel.tsx
+init_SDKProvider();
+init_permissions();
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var CallControlPanel = (0, import_react13.memo)(({ onDataChange }) => {
-  const handleDataChange = (0, import_react13.useCallback)(
+var CallControlPanel = (0, import_react14.memo)(({ onDataChange }) => {
+  var _a2;
+  const { sdk } = useSDKState();
+  const handleDataChange = (0, import_react14.useCallback)(
     (data) => {
       try {
         if (onDataChange && typeof onDataChange === "function") {
@@ -4688,10 +5488,355 @@ var CallControlPanel = (0, import_react13.memo)(({ onDataChange }) => {
     },
     [onDataChange]
   );
+  const sdkObject = sdk == null ? void 0 : sdk.calls;
+  const hasDialerAccess = (sdkObject == null ? void 0 : sdkObject.enabled) && ((_a2 = sdkObject == null ? void 0 : sdkObject.items) == null ? void 0 : _a2.some(
+    (item) => item.code === SDK_PERMISSIONS.CALL_OUTBOUND || item.code === SDK_PERMISSIONS.CALL_INBOUND
+  ));
+  if (!hasDialerAccess) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SDKProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CallControls, { onDataChange: handleDataChange }) });
 });
 CallControlPanel.displayName = "CallControlPanel";
+// call-control-sdk/lib/pages/sdkPages.tsx
+var import_react18 = __toESM(require("react"));
+// call-control-sdk/lib/hooks/useSDKPermissions.ts
+var import_react15 = require("react");
+init_sdk_state();
+function useSDKPermissions() {
+  var _a2, _b;
+  const [state, setState] = (0, import_react15.useState)(() => sdkStateManager.getState());
+  (0, import_react15.useEffect)(() => {
+    const unsubscribe = sdkStateManager.subscribe(() => {
+      setState(sdkStateManager.getState());
+    });
+    return unsubscribe;
+  }, []);
+  const hasPermission = (0, import_react15.useCallback)(
+    (permission) => sdkStateManager.hasPermission(permission),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.userPermissions]
+  );
+  const hasAnyPermission = (0, import_react15.useCallback)(
+    (permissions) => sdkStateManager.hasAnyPermission(permissions),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.userPermissions]
+  );
+  const hasAllPermissions = (0, import_react15.useCallback)(
+    (permissions) => sdkStateManager.hasAllPermissions(permissions),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.userPermissions]
+  );
+  const hasMenuFeature = (0, import_react15.useCallback)(
+    (code) => sdkStateManager.hasMenuFeature(code),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.menuEntitlements]
+  );
+  return {
+    permissions: (_a2 = state.userPermissions) != null ? _a2 : [],
+    menuEntitlements: (_b = state.menuEntitlements) != null ? _b : [],
+    isLoaded: state.isPermissionsLoaded,
+    hasPermission,
+    hasAnyPermission,
+    hasAllPermissions,
+    hasMenuFeature
+  };
+}
+// call-control-sdk/lib/components/SDKAccessDenied.tsx
+var import_material5 = require("@mui/material");
+var import_LockOutlined = __toESM(require("@mui/icons-material/LockOutlined"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SDKAccessDenied = ({
+  message = "You don't have permission to view this page."
+}) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  import_material5.Box,
+  {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: 300,
+    gap: 2,
+    p: 4,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_LockOutlined.default, { sx: { fontSize: 56, color: "text.disabled" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material5.Typography, { variant: "h6", fontWeight: 600, color: "text.secondary", children: "Access Denied" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material5.Typography, { variant: "body2", color: "text.disabled", textAlign: "center", children: message })
+    ]
+  }
+);
+// call-control-sdk/lib/components/SDKPermissionGuard.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var SDKPermissionGuard = ({
+  children,
+  permission,
+  permissions,
+  requireAll = false,
+  menuFeature,
+  requireAllMenus = false,
+  fallback,
+  showFallback = true,
+  onDenied
+}) => {
+  const { isLoaded, hasPermission, hasAnyPermission, hasAllPermissions, hasMenuFeature } = useSDKPermissions();
+  if (!isLoaded) return null;
+  const isAllowed = checkAccess({
+    permission,
+    permissions,
+    requireAll,
+    menuFeature,
+    requireAllMenus,
+    hasPermission,
+    hasAnyPermission,
+    hasAllPermissions,
+    hasMenuFeature
+  });
+  if (!isAllowed) {
+    onDenied == null ? void 0 : onDenied();
+    if (fallback !== void 0) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: fallback });
+    if (showFallback) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SDKAccessDenied, {});
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children });
+};
+function checkAccess({
+  permission,
+  permissions,
+  requireAll,
+  menuFeature,
+  requireAllMenus,
+  hasPermission,
+  hasAnyPermission,
+  hasAllPermissions,
+  hasMenuFeature
+}) {
+  const menuCodes = menuFeature ? Array.isArray(menuFeature) ? menuFeature : [menuFeature] : [];
+  const hasNoGuards = !permission && (!permissions || permissions.length === 0) && menuCodes.length === 0;
+  if (hasNoGuards) return true;
+  if (menuCodes.length > 0) {
+    const menuGranted = requireAllMenus ? menuCodes.every((c) => hasMenuFeature(c)) : menuCodes.some((c) => hasMenuFeature(c));
+    if (!menuGranted) return false;
+  }
+  if (permission && !hasPermission(permission)) return false;
+  if (permissions && permissions.length > 0) {
+    const granted = requireAll ? hasAllPermissions(permissions) : hasAnyPermission(permissions);
+    if (!granted) return false;
+  }
+  return true;
+}
+// call-control-sdk/lib/pages/sdkPages.tsx
+init_permissions();
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function withGuard(menuCodes, loader) {
+  return import_react18.default.lazy(async () => {
+    const mod = await loader();
+    const Page = mod.default;
+    const Guarded = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SDKPermissionGuard, { menuFeature: menuCodes, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Page, __spreadValues({}, props)) });
+    return { default: Guarded };
+  });
+}
+var SDKPages = {
+  CallHistory: withGuard(SDK_MENU_CODES.CALL_HISTORY, () => Promise.resolve().then(() => (init_callHistory(), callHistory_exports)))
+};
+// call-control-sdk/lib/hooks/useClickToConference.ts
+var import_react19 = require("react");
+init_endPoint();
+init_axios();
+init_sdk_state();
+var import_vault6 = require("@react-solutions/vault");
+init_storage();
+var useClickToConference = () => {
+  const [loading, setLoading] = (0, import_react19.useState)(false);
+  const [success, setSuccess] = (0, import_react19.useState)(false);
+  const [isError, setIsError] = (0, import_react19.useState)(false);
+  const [error, setError] = (0, import_react19.useState)(null);
+  const [data, setData] = (0, import_react19.useState)(null);
+  const pendingLineRef = (0, import_react19.useRef)(null);
+  const prevConferenceRef = (0, import_react19.useRef)([]);
+  (0, import_react19.useEffect)(() => {
+    if (pendingLineRef.current === null) return;
+    const unsubscribe = sdkStateManager.subscribe(() => {
+      var _a2;
+      const state = sdkStateManager.getState();
+      const targetLine = pendingLineRef.current;
+      if (targetLine === null) return;
+      const line = (_a2 = state.conferenceLine) == null ? void 0 : _a2.find(
+        (l) => l.line === targetLine
+      );
+      if (line && line.status !== "IDLE") {
+        pendingLineRef.current = null;
+        prevConferenceRef.current = [];
+        sdkStateManager.setOpenConferenceDialog(true);
+      }
+    });
+    return unsubscribe;
+  }, [loading]);
+  const handleStartConferenceCall = (0, import_react19.useCallback)(
+    async (payload) => {
+      var _a2, _b, _c, _d, _e, _f, _g, _h;
+      const state = (0, import_vault6.getSession)(STORAGE_KEY);
+      if (((_a2 = state == null ? void 0 : state.callData) == null ? void 0 : _a2.status) !== "ONCALL") {
+        const msg = "Conference call requires an active call (ONCALL status)";
+        setIsError(true);
+        setError(new Error(msg));
+        throw new Error(msg);
+      }
+      const availableLine = payload.lineNumber != null ? (_b = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _b.find(
+        (l) => l.line === payload.lineNumber
+      ) : (_d = (_c = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _c.filter((l) => l.line !== 1)) == null ? void 0 : _d.find((l) => l.status === "IDLE" && !(l == null ? void 0 : l.isCallStart));
+      if (!availableLine) {
+        const msg = "No available conference line found";
+        setIsError(true);
+        setError(new Error(msg));
+        throw new Error(msg);
+      }
+      const requestPayload = {
+        action: "EXTERNAL_CONFERENCE",
+        operation: `CALL${availableLine.line}`,
+        target: payload.mobileNumber,
+        line_number: Number(availableLine.line),
+        userid: (_f = (_e = state.callData) == null ? void 0 : _e.agent_id) != null ? _f : -1,
+        process: (_h = (_g = state.callData) == null ? void 0 : _g.process_name) != null ? _h : ""
+      };
+      setLoading(true);
+      setIsError(false);
+      setError(null);
+      setSuccess(false);
+      pendingLineRef.current = availableLine.line;
+      return axios_default.post(END_POINT.CONFERENCE_CALL, requestPayload).then((res) => {
+        setData(res == null ? void 0 : res.data);
+        setSuccess(true);
+        return res == null ? void 0 : res.data;
+      }).catch((err) => {
+        var _a3;
+        pendingLineRef.current = null;
+        setIsError(true);
+        setError(err);
+        return (_a3 = err == null ? void 0 : err.response) == null ? void 0 : _a3.data;
+      }).finally(() => {
+        setLoading(false);
+      });
+    },
+    []
+  );
+  return {
+    handleStartConferenceCall,
+    isLoading: loading,
+    isSuccess: success,
+    isError,
+    error,
+    data
+  };
+};
+// call-control-sdk/index.ts
+init_sdk_state();
+// call-control-sdk/lib/angular-services/index.ts
+var import_vault7 = require("@react-solutions/vault");
+init_axios();
+init_endPoint();
+init_sdk_state();
+init_storage();
+async function clickToCall(payload) {
+  const state = (0, import_vault7.getSession)(STORAGE_KEY);
+  const body = {
+    action: "CALL",
+    userId: state == null ? void 0 : state.agentId,
+    phone_number: payload.mobileNumber
+  };
+  try {
+    const res = await axios_default.post(END_POINT.CLICK_TO_CALL, body);
+    sdkStateManager.resetConferenceLines();
+    if (!(res == null ? void 0 : res.success)) {
+      throw res;
+    }
+    return res.data;
+  } catch (err) {
+    throw err;
+  }
+}
+async function clickToConference(payload) {
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const state = (0, import_vault7.getSession)(STORAGE_KEY);
+  const availableLine = payload.lineNumber != null ? (_a2 = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _a2.find((l) => l.line === payload.lineNumber) : (_c = (_b = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _b.filter((l) => l.line !== 1)) == null ? void 0 : _c.find((l) => l.status === "IDLE" && !(l == null ? void 0 : l.isCallStart));
+  if (!availableLine) {
+    throw new Error("No available conference line found");
+  }
+  const body = {
+    action: "EXTERNAL_CONFERENCE",
+    operation: `CALL${availableLine.line}`,
+    target: payload.mobileNumber,
+    line_number: Number(availableLine.line),
+    userid: (_e = (_d = state.callData) == null ? void 0 : _d.agent_id) != null ? _e : -1,
+    process: (_g = (_f = state.callData) == null ? void 0 : _f.process_name) != null ? _g : ""
+  };
+  try {
+    const res = await axios_default.post(END_POINT.CONFERENCE_CALL, body);
+    sdkStateManager.setOpenConferenceDialog(true);
+    if (!(res == null ? void 0 : res.success)) {
+      throw res;
+    }
+    return res.data;
+  } catch (err) {
+    throw new Error((_j = (_i = (_h = err == null ? void 0 : err.response) == null ? void 0 : _h.data) == null ? void 0 : _i.message) != null ? _j : "Conference call API failed");
+  }
+}
+async function endCall(options = {}) {
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  const state = (0, import_vault7.getSession)(STORAGE_KEY);
+  const body = {
+    action: "ENDCALL",
+    userId: state == null ? void 0 : state.agentId,
+    processid: (_c = (_b = (_a2 = state == null ? void 0 : state.process) == null ? void 0 : _a2.process_id) == null ? void 0 : _b.toString()) != null ? _c : "",
+    process_name: (_e = (_d = state == null ? void 0 : state.process) == null ? void 0 : _d.process_name) != null ? _e : "",
+    callreferenceid: (_g = (_f = state == null ? void 0 : state.callData) == null ? void 0 : _f.convox_id) != null ? _g : "",
+    mobile_number: (_i = (_h = state == null ? void 0 : state.callData) == null ? void 0 : _h.phone_number) != null ? _i : "",
+    disposition: (_j = options.disposition) != null ? _j : "RES",
+    set_followUp: (_k = options.followUp) != null ? _k : "N",
+    callback_date: (_l = options.callbackDate) != null ? _l : "",
+    callback_hrs: (_m = options.callbackHrs) != null ? _m : "",
+    callback_mins: (_n = options.callbackMins) != null ? _n : "",
+    endcall_type: "CLOSE",
+    patient_enquiry: (_o = options.patientLog) != null ? _o : null
+  };
+  const res = await axios_default.post(END_POINT.END_CALL, body, {
+    params: { isBreak: (_p = options.isBreak) != null ? _p : false }
+  });
+  sdkStateManager.resetConferenceLines();
+  sdkStateManager.endCall();
+  return res.data;
+}
+async function logout() {
+  var _a2, _b;
+  let logoutError;
+  try {
+    await axios_default.post(END_POINT.AUTH_LOGOUT);
+  } catch (err) {
+    logoutError = new Error(((_b = (_a2 = err == null ? void 0 : err.response) == null ? void 0 : _a2.data) == null ? void 0 : _b.message) || "Logout failed. Please try again.");
+  } finally {
+    sdkStateManager.clearStorageAndReset();
+    (0, import_vault7.removeSession)(STORAGE_KEY);
+  }
+  if (logoutError) throw logoutError;
+}
+async function startMonitoring(payload) {
+  const res = await axios_default.post(END_POINT.SUPERVISOR_CALL_LISTEN, payload);
+  return res.data;
+}
+async function stopMonitoring(payload) {
+  const res = await axios_default.post(END_POINT.SUPERVISOR_CALL_LEAVE, payload);
+  return res.data;
+}
+async function changeMonitorMode(payload) {
+  const res = await axios_default.post(END_POINT.SUPERVISOR_CALL_CHANGE_MODE, payload);
+  return res.data;
+}
 // call-control-sdk/index.ts
 async function initSDK({
   apiKey,
@@ -4731,7 +5876,8 @@ async function initSDK({
       accessToken: initResult.accessToken,
       expiration: initResult.expiration,
       ticketId: initResult.ticketId,
-      callControls: callcontrolConfig
+      callControls: callcontrolConfig,
+      userInfo: initResult.userInfo
     };
     console.info("SDK initialized successfully");
     sdkStateManager.initialize(
@@ -4759,15 +5905,31 @@ function isSDKInitialized() {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CallControlPanel,
+  SDKAccessDenied,
+  SDKPages,
+  SDKPermissionGuard,
+  SDK_MENU_CODES,
   SDK_PERMISSIONS,
+  SDK_WILDCARD,
+  changeMonitorMode,
+  clickToCall,
+  clickToConference,
+  endCall,
   getSDKVersion,
   initSDK,
   isSDKInitialized,
+  logout,
+  sdkStateManager,
+  startMonitoring,
+  stopMonitoring,
+  useCallMonitoring,
   useClickToCall,
+  useClickToConference,
   useEndCall,
   useGetAuthorizationToken,
   useGetCallerData,
   useLogout,
+  useSDKPermissions,
   useSDKState
 });
 //# sourceMappingURL=index.js.map