call-control-sdk 6.5.3 → 6.5.5-beta.0

package/dist/index.js

@@ -85,9 +85,11 @@ var END_POINT = {
   CONFERENCE_CALL_MUTE_OT_UN_MUTE: `${BASE_URL}${VERSION.v1}/cti/calls/conference/mute?provider=convox`,
   CONFERENCE_CALL_END: `${BASE_URL}${VERSION.v1}/cti/calls/conference/hangup?provider=convox`,
   CONFERENCE_CALL_END_ALL: `${BASE_URL}${VERSION.v1}/cti/calls/conference/hangup/all?provider=convox`,
+  CONFERENCE_CALL_TRANSFER: `${BASE_URL}${VERSION.v1}/cti/calls/conference/transfer?provider=convox`,
   TRANSFER_CALL: `${BASE_URL}${VERSION.v1}/cti/calls/transfer?provider=convox`,
   AGENTS_LIST: `${BASE_URL}${VERSION.v1}/cti/users`,
   PROCESS_LIST: `${BASE_URL}${VERSION.v1}/cti/processes-list`,
+  BREAKS_LIST: `${BASE_URL}${VERSION.v1}/cti/breaks`,
   TRANSFER_TO_DETAILS: `${BASE_URL}${VERSION.v1}/cti/transfer-to-details?provider=convox`,
   SEND_NOTIFICATIONS: `${BASE_URL}${VERSION.v1}/cti/notifications/send`,
   CALL_HISTORY: `${BASE_URL}${VERSION.v1}/dashboard/call-history`,
@@ -124,6 +126,7 @@ var SDKStateManager = class {
       sdkConfig: {
         disableEndCallButton: false,
         disabledDialButton: false,
+        disabledMoreOptionsButton: false,
         enableSmsServices: false,
         enableQueueName: false,
         disableCallTransferButton: false,
@@ -200,7 +203,8 @@ var SDKStateManager = class {
         }
       ],
       hold: 0,
-      mute: 0
+      mute: 0,
+      agentStatus: ""
     };
   }
   loadFromStorage() {
@@ -218,6 +222,7 @@ var SDKStateManager = class {
           isInitialized: parsedState.isInitialized || false,
           sdkConfig: parsedState.sdkConfig || {
             disableEndCallButton: false,
+            disabledMoreOptionsButton: false,
             enableSmsServices: false,
             enableQueueName: false,
             disabledDialButton: false,
@@ -247,7 +252,8 @@ var SDKStateManager = class {
             event_time: "",
             phone_number: ""
           },
-          conferenceLine: parsedState.conferenceLine && Array.isArray(parsedState.conferenceLine) && parsedState.conferenceLine.length > 0 ? parsedState.conferenceLine : this.state.conferenceLine
+          conferenceLine: parsedState.conferenceLine && Array.isArray(parsedState.conferenceLine) && parsedState.conferenceLine.length > 0 ? parsedState.conferenceLine : this.state.conferenceLine,
+          agentStatus: parsedState.agentStatus
         });
       }
     } catch (error) {
@@ -268,7 +274,8 @@ var SDKStateManager = class {
         controlPanelPosition: this.state.controlPanelPosition,
         iframePosition: this.state.iframePosition,
         callData: this.state.callData,
-        conferenceLine: this.state.conferenceLine
+        conferenceLine: this.state.conferenceLine,
+        agentStatus: this.state.agentStatus
       };
       (0, import_vault.setItem)(this.STORAGE_KEY, persistentState);
     } catch (error) {
@@ -301,6 +308,7 @@ var SDKStateManager = class {
         disableEndCallButton: false,
         disabledDialButton: false,
         enableSmsServices: false,
+        disabledMoreOptionsButton: false,
         enableQueueName: false,
         disableCallTransferButton: false,
         isDraggable: true,
@@ -384,6 +392,11 @@ var SDKStateManager = class {
     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();
@@ -633,6 +646,23 @@ var axios_default = axiosInstance;
 
 // call-control-sdk/lib/hooks/useLogout.ts
 var import_vault2 = require("@react-solutions/vault");
+
+// call-control-sdk/lib/services/usbLight.ts
+var USB_LIGHT_BASE_URL = `http://localhost:5000`;
+var USB_LIGHT_ON = (color) => {
+  return `${USB_LIGHT_BASE_URL}/light/${color}/on`;
+};
+var USB_LIGHT_FLASH = (color, number) => {
+  return `${USB_LIGHT_BASE_URL}/light/${color}/flash${number}`;
+};
+var USB_LIGHT_ALL_OFF = () => {
+  return `${USB_LIGHT_BASE_URL}/all/off`;
+};
+var USB_LIGHT_REQUEST = (url, init) => {
+  return fetch(url, init);
+};
+
+// call-control-sdk/lib/hooks/useLogout.ts
 var useLogout = () => {
   const [loading, setLoading] = (0, import_react.useState)(false);
   const [success, setSuccess] = (0, import_react.useState)(false);
@@ -640,6 +670,7 @@ var useLogout = () => {
   const [error, setError] = (0, import_react.useState)(null);
   const [data, setData] = (0, import_react.useState)(null);
   const handleLogout = (0, import_react.useCallback)(async () => {
+    USB_LIGHT_REQUEST(USB_LIGHT_ALL_OFF());
     const state = (0, import_vault2.getItem)(STORAGE_KEY);
     setLoading(true);
     const payload = {
@@ -653,10 +684,14 @@ var useLogout = () => {
       setSuccess(true);
       return res == null ? void 0 : res.data;
     }).catch((err) => {
-      var _a2;
+      var _a2, _b, _c, _d;
       setIsError(true);
       setError(err);
-      return (_a2 = err == null ? void 0 : err.response) == null ? void 0 : _a2.data;
+      if ((_c = (_b = (_a2 = err == null ? void 0 : err.response) == null ? void 0 : _a2.data) == null ? void 0 : _b.data) == null ? void 0 : _c.clearAgentData) {
+        sdkStateManager.clearStorageAndReset();
+        (0, import_vault2.removeItem)(STORAGE_KEY);
+      }
+      return (_d = err == null ? void 0 : err.response) == null ? void 0 : _d.data;
     }).finally(() => {
       setLoading(false);
     });
@@ -1009,43 +1044,45 @@ var usePostRequest = (props = {}) => {
   const { showToast } = useToast();
   const [state, dispatch] = (0, import_react8.useReducer)(reducer, initialState);
   const postRequest = (0, import_react8.useCallback)(
-    (url, payload, config = {}) => {
+    async (url, payload, config = {}) => {
+      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
       dispatch({
         type: "isLoading",
         payload: true
       });
-      axios_default.post(url, payload, config).then((res) => {
-        var _a2;
-        dispatch({
-          type: "isSuccess",
-          payload: res.data
-        });
-        onSuccess == null ? void 0 : onSuccess(res.data, payload);
-        if (!disabledSuccessToast) {
-          showToast((_a2 = res.data) == null ? void 0 : _a2.message, "success");
+      try {
+        try {
+          const res = await axios_default.post(url, payload, config);
+          dispatch({
+            type: "isSuccess",
+            payload: res.data
+          });
+          onSuccess == null ? void 0 : onSuccess(res.data, payload);
+          if (!disabledSuccessToast) {
+            showToast((_a2 = res.data) == null ? void 0 : _a2.message, "success");
+          }
+        } catch (err) {
+          const error = {
+            status: (_c = (_b = err.response) == null ? void 0 : _b.status) != null ? _c : 500,
+            message: ((_e = (_d = err.response) == null ? void 0 : _d.data) == null ? void 0 : _e.detail) || ((_g = (_f = err.response) == null ? void 0 : _f.data) == null ? void 0 : _g.message) || err.message || "An unknown error occurred",
+            data: (_i = (_h = err.response) == null ? void 0 : _h.data) != null ? _i : null,
+            statusText: (_k = (_j = err.response) == null ? void 0 : _j.statusText) != null ? _k : "",
+            code: (_l = err == null ? void 0 : err.code) != null ? _l : "",
+            name: (_m = err == null ? void 0 : err.name) != null ? _m : ""
+          };
+          showToast(error.message, "error");
+          dispatch({
+            type: "isError",
+            payload: error
+          });
+          onError == null ? void 0 : onError(error, payload);
         }
-      }).catch((err) => {
-        var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
-        const error = {
-          status: (_b = (_a2 = err.response) == null ? void 0 : _a2.status) != null ? _b : 500,
-          message: ((_d = (_c = err.response) == null ? void 0 : _c.data) == null ? void 0 : _d.detail) || ((_f = (_e = err.response) == null ? void 0 : _e.data) == null ? void 0 : _f.message) || err.message || "An unknown error occurred",
-          data: (_h = (_g = err.response) == null ? void 0 : _g.data) != null ? _h : null,
-          statusText: (_j = (_i = err.response) == null ? void 0 : _i.statusText) != null ? _j : "",
-          code: (_k = err == null ? void 0 : err.code) != null ? _k : "",
-          name: (_l = err == null ? void 0 : err.name) != null ? _l : ""
-        };
-        showToast(error.message, "error");
-        dispatch({
-          type: "isError",
-          payload: error
-        });
-        onError == null ? void 0 : onError(error, payload);
-      }).finally(() => {
+      } finally {
         dispatch({
           type: "isLoading",
           payload: false
         });
-      });
+      }
     },
     [onSuccess, onError, showToast]
   );
@@ -1118,7 +1155,7 @@ var styles_default = useStyles;
 
 // call-control-sdk/lib/components/dialog.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var ConferenceTableRow = ({ each }) => {
+var ConferenceTableRow = ({ each, isLineDialing }) => {
   var _a2, _b, _c, _d, _e, _f;
   const state = useSDKState();
   const theme = (0, import_material3.useTheme)();
@@ -1308,7 +1345,15 @@ var ConferenceTableRow = ({ each }) => {
                 placeholder: "Phone Number",
                 fullWidth: true,
                 value: (each == null ? void 0 : each.phone) || "",
-                disabled: (each == null ? void 0 : each.line) === 1 || ["ONCALL" /* ONCALL */, "DISCONNECTED" /* DISCONNECTED */, "CONFERENCE" /* CONFERENCE */, "HOLD" /* HOLD */, "MUTE" /* MUTE */, "DIALING" /* DIALING */, "RINGING" /* RINGING */].includes((_f = each == null ? void 0 : each.status) != null ? _f : ""),
+                disabled: (each == null ? void 0 : each.line) === 1 || [
+                  "ONCALL" /* ONCALL */,
+                  "DISCONNECTED" /* DISCONNECTED */,
+                  "CONFERENCE" /* CONFERENCE */,
+                  "HOLD" /* HOLD */,
+                  "MUTE" /* MUTE */,
+                  "DIALING" /* DIALING */,
+                  "RINGING" /* RINGING */
+                ].includes((_f = each == null ? void 0 : each.status) != null ? _f : "") || isLineDialing,
                 onChange: (e) => {
                   onConferenceLineUpdate(each, { phone: e.target.value });
                 }
@@ -1436,7 +1481,7 @@ var ConferenceTableRow = ({ each }) => {
                       onClick: () => {
                         onConferenceCallStart(each, {});
                       },
-                      disabled: (each == null ? void 0 : each.status) !== "IDLE" /* IDLE */,
+                      disabled: (each == null ? void 0 : each.status) !== "IDLE" /* IDLE */ || isLineDialing,
                       children: conferenceCallStart ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         import_material3.CircularProgress,
                         {
@@ -1537,7 +1582,7 @@ var ConferenceTableRow = ({ each }) => {
   );
 };
 function ConferenceDialog() {
-  var _a2;
+  var _a2, _b, _c, _d, _e, _f, _g;
   const state = useSDKState();
   const { showToast } = useToast();
   const [conferenceCallEndAll, setConferenceCallEndAll] = (0, import_react9.useState)(false);
@@ -1545,13 +1590,13 @@ function ConferenceDialog() {
     sdkStateManager.setOpenConferenceDialog(false);
   };
   const onEndAllConferenceCalls = () => {
-    var _a3, _b, _c, _d;
+    var _a3, _b2, _c2, _d2;
     setConferenceCallEndAll(true);
     const payload = {
       action: "EXTERNAL_CONFERENCE",
       operation: "ENDCONFERENCE",
-      userid: (_b = (_a3 = state.callData) == null ? void 0 : _a3.agent_id) != null ? _b : "",
-      process: (_d = (_c = state.callData) == null ? void 0 : _c.process_name) != null ? _d : ""
+      userid: (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.agent_id) != null ? _b2 : "",
+      process: (_d2 = (_c2 = state.callData) == null ? void 0 : _c2.process_name) != null ? _d2 : ""
     };
     axios_default.post(END_POINT.CONFERENCE_CALL_END_ALL, payload).then((res) => {
       var _a4;
@@ -1559,13 +1604,35 @@ function ConferenceDialog() {
       sdkStateManager.resetConferenceLines();
       handleClose();
     }).catch((err) => {
-      var _a4, _b2, _c2, _d2;
-      const message = ((_b2 = (_a4 = err.response) == null ? void 0 : _a4.data) == null ? void 0 : _b2.detail) || ((_d2 = (_c2 = err.response) == null ? void 0 : _c2.data) == null ? void 0 : _d2.message) || err.message || "An unknown error occurred";
+      var _a4, _b3, _c3, _d3;
+      const message = ((_b3 = (_a4 = err.response) == null ? void 0 : _a4.data) == null ? void 0 : _b3.detail) || ((_d3 = (_c3 = err.response) == null ? void 0 : _c3.data) == null ? void 0 : _d3.message) || err.message || "An unknown error occurred";
       showToast(message, "error");
     }).finally(() => {
       setConferenceCallEndAll(false);
     });
   };
+  const handleTransferConferenceCall = () => {
+    var _a3, _b2, _c2, _d2;
+    const payload = {
+      action: "TRANSFERAPI",
+      userid: (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.agent_id) != null ? _b2 : "",
+      process_name: (_d2 = (_c2 = state.callData) == null ? void 0 : _c2.process_name) != null ? _d2 : ""
+    };
+    axios_default.post(END_POINT.CONFERENCE_CALL_TRANSFER, payload).then((res) => {
+      var _a4;
+      showToast((_a4 = res.data) == null ? void 0 : _a4.message, "success");
+      sdkStateManager.resetConferenceLines();
+      handleClose();
+    }).catch((err) => {
+      var _a4, _b3, _c3, _d3;
+      const message = ((_b3 = (_a4 = err.response) == null ? void 0 : _a4.data) == null ? void 0 : _b3.detail) || ((_d3 = (_c3 = err.response) == null ? void 0 : _c3.data) == null ? void 0 : _d3.message) || err.message || "An unknown error occurred";
+      showToast(message, "error");
+    });
+  };
+  const isLineDialing = (_a2 = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _a2.some((item) => (item == null ? void 0 : item.status) === "DIALING" /* DIALING */);
+  const conferenceLineCount = (_d = (_c = (_b = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _b.filter((item) => (item == null ? void 0 : item.status) === "CONFERENCE" /* CONFERENCE */)) == null ? void 0 : _c.length) != null ? _d : 0;
+  const isHold = (_e = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _e.some((item) => (item == null ? void 0 : item.status) === "HOLD" /* HOLD */);
+  const isOnCall = (_f = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _f.some((item) => (item == null ? void 0 : item.status) === "ONCALL" /* ONCALL */);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_material3.Dialog,
     {
@@ -1581,14 +1648,45 @@ function ConferenceDialog() {
               display: "flex",
               justifyContent: "space-between",
               alignItems: "center",
-              padding: "10px 16px"
+              padding: "0px 16px",
+              paddingBottom: "6px",
+              boxShadow: "1px 1px 2px #e7e5e5ff",
+              margin: "10px 0px"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Typography, { variant: "body1", children: [
-                (_a2 = state == null ? void 0 : state.agentId) != null ? _a2 : "",
-                " conference"
-              ] }),
-              /* @__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.Typography,
+                {
+                  variant: "body1",
+                  color: "primary.main",
+                  sx: { textTransform: "uppercase", fontWeight: "bold", fontSize: "14px" },
+                  children: [
+                    (_g = state == null ? void 0 : state.agentId) != null ? _g : "",
+                    " conference"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Box, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_material3.Button,
+                  {
+                    color: "primary",
+                    variant: "outlined",
+                    onClick: handleTransferConferenceCall,
+                    disabled: conferenceLineCount <= 1 || isHold || isLineDialing || isOnCall,
+                    startIcon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.TransferWithinAStation, {}),
+                    children: "Transfer Conference"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_material3.IconButton,
+                  {
+                    onClick: handleClose,
+                    color: "primary",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, { sx: { color: "primary.main" } })
+                  }
+                )
+              ] })
             ]
           }
         ),
@@ -1661,7 +1759,13 @@ function ConferenceDialog() {
                           ]
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.TableBody, { children: state == null ? void 0 : state.conferenceLine.map((each) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ConferenceTableRow, { each })) })
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.TableBody, { children: state == null ? void 0 : state.conferenceLine.map((each) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        ConferenceTableRow,
+                        {
+                          each,
+                          isLineDialing
+                        }
+                      )) })
                     ]
                   }
                 )
@@ -1681,7 +1785,7 @@ function ConferenceDialog() {
                 color: "error",
                 size: "large",
                 onClick: onEndAllConferenceCalls,
-                disabled: conferenceCallEndAll,
+                disabled: conferenceCallEndAll || conferenceLineCount <= 0,
                 sx: { px: 2, borderRadius: "20px", textTransform: "capitalize" },
                 children: [
                   conferenceCallEndAll ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -1753,7 +1857,10 @@ function CallTransferDialog({ open }) {
   const [getIdelAgentsList, { data: idleAgentsList, isLoading: isIdleAgentsListLoading }] = usePostRequest({
     disabledSuccessToast: true
   });
-  const [getHospitalsServicesList, { data: hospitalsServicesList, isLoading: isHospitalsServicesListLoading }] = useGetRequest({
+  const [
+    getHospitalsServicesList,
+    { data: hospitalsServicesList, isLoading: isHospitalsServicesListLoading }
+  ] = useGetRequest({
     disabledSuccessToast: true
   });
   const [
@@ -1807,7 +1914,6 @@ function CallTransferDialog({ open }) {
         callreferenceid: (_K = (_J = state.callData) == null ? void 0 : _J.convox_id) != null ? _K : "",
         blind_transfer_no: (_L = data == null ? void 0 : data.mobile_number) != null ? _L : ""
       };
-      console.log("payload", payload);
       blindTransferCall(END_POINT.BLIEND_TRANSFER, payload);
     }
   };
@@ -1916,274 +2022,230 @@ function CallTransferDialog({ open }) {
                   ]
                 }
               ),
-              !isProcessAndQueuesListLoading && !isIdleAgentsListLoading && !isHospitalsServicesListLoading && currentselecteTab === "process" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Box, { sx: { display: "grid", gridTemplateColumns: ((_a2 = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _a2.process) && ((_c = (_b = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _b.process) == null ? void 0 : _c.length) > 0 ? "repeat(2, 1fr)" : "repeat(1, 1fr)", gap: 1, padding: "10px", flexWrap: "wrap", boxShadow: "1px 1px 4px #d3d3d3ff", borderRadius: "10px" }, children: ((_d = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _d.process) && ((_f = (_e = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _e.process) == null ? void 0 : _f.length) > 0 ? (_h = (_g = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _g.process) == null ? void 0 : _h.map((process, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              !isProcessAndQueuesListLoading && !isIdleAgentsListLoading && !isHospitalsServicesListLoading && currentselecteTab === "process" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 import_material3.Box,
                 {
                   sx: {
-                    p: 1,
-                    display: "flex",
-                    alignItems: "center",
+                    display: "grid",
+                    gridTemplateColumns: ((_a2 = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _a2.process) && ((_c = (_b = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _b.process) == null ? void 0 : _c.length) > 0 ? "repeat(2, 1fr)" : "repeat(1, 1fr)",
+                    gap: 1,
+                    padding: "10px",
+                    flexWrap: "wrap",
                     boxShadow: "1px 1px 4px #d3d3d3ff",
-                    padding: "6px",
-                    borderRadius: "10px",
-                    "&:hover": { bgcolor: "action.selected" }
+                    borderRadius: "10px"
                   },
-                  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.MemoryOutlined, { sx: { marginRight: "4px" } }),
-                          process.process_name
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      import_material3.IconButton,
-                      {
-                        color: "success",
-                        sx: {
-                          bgcolor: "action.hover",
-                          "&:hover": { bgcolor: "action.selected" }
-                        },
-                        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 Process Found"
-                      }
-                    )
-                  ]
-                }
-              ) }),
-              !isProcessAndQueuesListLoading && !isIdleAgentsListLoading && !isHospitalsServicesListLoading && currentselecteTab === "queues" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Box, { sx: { display: "grid", gridTemplateColumns: ((_i = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _i.queue) && ((_k = (_j = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _j.queue) == null ? void 0 : _k.length) > 0 ? "repeat(2, 1fr)" : "repeat(1, 1fr)", gap: 1, padding: "10px", flexWrap: "wrap", boxShadow: "1px 1px 4px #d3d3d3ff", borderRadius: "10px" }, children: ((_l = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _l.queue) && ((_n = (_m = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _m.queue) == null ? void 0 : _n.length) > 0 ? (_p = (_o = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _o.queue) == null ? void 0 : _p.map((queue, index) => {
-                var _a3, _b2, _c2, _d2, _e2, _f2;
-                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: ((_d = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _d.process) && ((_f = (_e = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _e.process) == null ? void 0 : _f.length) > 0 ? (_h = (_g = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _g.process) == null ? void 0 : _h.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,
+                          {
+                            variant: "body1",
+                            sx: {
+                              mx: 1,
+                              width: "200px",
+                              maxWidth: "250px",
+                              display: "flex",
+                              alignItems: "center"
+                            },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.MemoryOutlined, { sx: { marginRight: "4px" } }),
+                              process.process_name
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_material3.IconButton,
+                          {
+                            color: "success",
+                            sx: {
+                              bgcolor: "action.hover",
+                              "&:hover": { bgcolor: "action.selected" }
+                            },
+                            onClick: () => {
+                              handleTransferCall(process, "PROCESS");
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
+                          }
+                        )
+                      ]
                     },
-                    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.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.IconButton,
-                        {
-                          color: "success",
-                          sx: {
-                            bgcolor: "action.hover",
-                            "&:hover": { bgcolor: "action.selected" }
-                          },
-                          onClick: () => {
-                            handleTransferCall(queue, "QUEUE");
-                          },
-                          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"
-                      }
-                    )
-                  ]
+                    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 Process Found"
+                          }
+                        )
+                      ]
+                    }
+                  )
                 }
-              ) }),
-              !isProcessAndQueuesListLoading && !isIdleAgentsListLoading && !isHospitalsServicesListLoading && currentselecteTab === "agents" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Box, { sx: { display: "grid", gridTemplateColumns: (idleAgentsList == null ? void 0 : idleAgentsList.data) && ((_q = idleAgentsList == null ? void 0 : idleAgentsList.data) == null ? void 0 : _q.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) && ((_r = idleAgentsList == null ? void 0 : idleAgentsList.data) == null ? void 0 : _r.length) > 0 ? (_s = idleAgentsList == null ? void 0 : idleAgentsList.data) == null ? void 0 : _s.map((agent, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              ),
+              !isProcessAndQueuesListLoading && !isIdleAgentsListLoading && !isHospitalsServicesListLoading && currentselecteTab === "queues" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 import_material3.Box,
                 {
                   sx: {
-                    p: 1,
-                    display: "flex",
-                    alignItems: "center",
+                    display: "grid",
+                    gridTemplateColumns: ((_i = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _i.queue) && ((_k = (_j = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _j.queue) == null ? void 0 : _k.length) > 0 ? "repeat(2, 1fr)" : "repeat(1, 1fr)",
+                    gap: 1,
+                    padding: "10px",
+                    flexWrap: "wrap",
                     boxShadow: "1px 1px 4px #d3d3d3ff",
-                    padding: "6px",
-                    borderRadius: "10px",
-                    "&:hover": { bgcolor: "action.selected" }
+                    borderRadius: "10px"
                   },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                      import_material3.Typography,
+                  children: ((_l = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _l.queue) && ((_n = (_m = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _m.queue) == null ? void 0 : _n.length) > 0 ? (_p = (_o = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _o.queue) == null ? void 0 : _p.map((queue, index) => {
+                    var _a3, _b2, _c2, _d2, _e2, _f2;
+                    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      import_material3.Box,
                       {
-                        variant: "body1",
                         sx: {
-                          mx: 1,
-                          width: "200px",
-                          maxWidth: "250px",
+                          p: 1,
                           display: "flex",
-                          alignItems: "center"
+                          alignItems: "center",
+                          boxShadow: "1px 1px 4px #d3d3d3ff",
+                          padding: "6px",
+                          borderRadius: "10px",
+                          "&:hover": { bgcolor: "action.selected" }
                         },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.SupportAgent, { sx: { marginRight: "4px" } }),
-                          agent.name
+                          /* @__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.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.IconButton,
+                            {
+                              color: "success",
+                              sx: {
+                                bgcolor: "action.hover",
+                                "&:hover": { bgcolor: "action.selected" }
+                              },
+                              onClick: () => {
+                                handleTransferCall(queue, "QUEUE");
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
+                            }
+                          )
                         ]
-                      }
-                    ),
-                    /* @__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, {})
-                      }
-                    )
-                  ]
-                },
-                index
-              )) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      },
+                      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 && currentselecteTab === "agents" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 import_material3.Box,
                 {
                   sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    flexDirection: "column"
+                    display: "grid",
+                    gridTemplateColumns: (idleAgentsList == null ? void 0 : idleAgentsList.data) && ((_q = idleAgentsList == null ? void 0 : idleAgentsList.data) == null ? void 0 : _q.length) > 0 ? "repeat(2, 1fr)" : "repeat(1, 1fr)",
+                    gap: 1,
+                    padding: "10px",
+                    flexWrap: "wrap",
+                    boxShadow: "1px 1px 4px #d3d3d3ff",
+                    borderRadius: "10px"
                   },
-                  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 && 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) && ((_t = hospitalsServicesList == null ? void 0 : hospitalsServicesList.data) == null ? void 0 : _t.length) > 0 && ((_u = hospitalsServicesList == null ? void 0 : hospitalsServicesList.data) == null ? void 0 : _u.map((service, index) => {
-                  var _a3, _b2, _c2;
-                  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  children: (idleAgentsList == null ? void 0 : idleAgentsList.data) && ((_r = idleAgentsList == null ? void 0 : idleAgentsList.data) == null ? void 0 : _r.length) > 0 ? (_s = idleAgentsList == null ? void 0 : idleAgentsList.data) == null ? void 0 : _s.map((agent, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                     import_material3.Box,
                     {
                       sx: {
@@ -2208,25 +2270,12 @@ 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.SupportAgent, { sx: { marginRight: "4px" } }),
+                              agent.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.IconButton,
                           {
                             color: "success",
@@ -2235,89 +2284,220 @@ function CallTransferDialog({ open }) {
                               "&:hover": { bgcolor: "action.selected" }
                             },
                             onClick: () => {
-                              var _a4;
-                              handleTransferCall({
-                                mobile_number: (_a4 = service == null ? void 0 : service.phone_number) != null ? _a4 : ""
-                              }, "OTHER");
+                              handleTransferCall(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"
-                    },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                        import_material3.Typography,
+                  )) : /* @__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 && 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) && ((_t = hospitalsServicesList == null ? void 0 : hospitalsServicesList.data) == null ? void 0 : _t.length) > 0 && ((_u = hospitalsServicesList == null ? void 0 : hospitalsServicesList.data) == null ? void 0 : _u.map((service, index) => {
+                      var _a3, _b2, _c2;
+                      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                        import_material3.Box,
                         {
-                          variant: "body1",
                           sx: {
-                            mx: 1,
-                            width: "200px",
-                            maxWidth: "250px",
+                            p: 1,
                             display: "flex",
-                            alignItems: "center"
+                            alignItems: "center",
+                            boxShadow: "1px 1px 4px #d3d3d3ff",
+                            padding: "6px",
+                            borderRadius: "10px",
+                            "&:hover": { bgcolor: "action.selected" }
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                            import_material3.TextField,
+                          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.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: (_c2 = service == null ? void 0 : service.phone_number) != null ? _c2 : "", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              import_material3.IconButton,
+                              {
+                                color: "success",
+                                sx: {
+                                  bgcolor: "action.hover",
+                                  "&:hover": { bgcolor: "action.selected" }
+                                },
+                                onClick: () => {
+                                  var _a4;
+                                  handleTransferCall(
+                                    {
+                                      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,
                             {
-                              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);
-                                }
+                              variant: "body1",
+                              sx: {
+                                mx: 1,
+                                width: "200px",
+                                maxWidth: "250px",
+                                display: "flex",
+                                alignItems: "center"
                               },
-                              slotProps: {
-                                htmlInput: {
-                                  inputMode: "numeric",
-                                  maxLength: 11
+                              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"
                                 }
-                              },
-                              placeholder: "Enter mobile number",
-                              autoComplete: "off"
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            import_material3.Tooltip,
+                            {
+                              title: mobileNumber ? `Call To - ${mobileNumber}` : "Enter mobile number",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                import_material3.IconButton,
+                                {
+                                  color: "success",
+                                  sx: {
+                                    bgcolor: "action.hover",
+                                    "&:hover": { bgcolor: "action.selected" }
+                                  },
+                                  onClick: () => {
+                                    handleTransferCall(
+                                      {
+                                        mobile_number: mobileNumber != null ? mobileNumber : ""
+                                      },
+                                      "OTHER"
+                                    );
+                                  },
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
+                                }
+                              )
                             }
                           )
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: mobileNumber ? `Call To - ${mobileNumber}` : "Enter mobile number", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                        import_material3.IconButton,
-                        {
-                          color: "success",
-                          sx: {
-                            bgcolor: "action.hover",
-                            "&:hover": { bgcolor: "action.selected" }
-                          },
-                          onClick: () => {
-                            handleTransferCall({
-                              mobile_number: mobileNumber != null ? mobileNumber : ""
-                            }, "OTHER");
-                          },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
-                        }
-                      ) })
-                    ]
-                  }
-                )
-              ] })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
             ]
           }
         )
@@ -2461,29 +2641,36 @@ function EndCallDispositionDialog({ open, setOpen, onSubmitDisposition }) {
                   gap: 2,
                   mt: 2,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Box, { sx: {
-                      flex: "1",
-                      border: "1px solid #bdbdbd",
-                      borderRadius: "5px"
-                    }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                        import_material3.Checkbox,
-                        {
-                          name: "selected_break",
-                          sx: {
-                            padding: "6px"
-                          },
-                          checked: formData.selected_break,
-                          onChange: (event) => {
-                            handleChange("selected_break", event.target.checked);
-                          },
-                          slotProps: {
-                            input: { "aria-label": "controlled" }
-                          }
-                        }
-                      ),
-                      " Mark as break"
-                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      import_material3.Box,
+                      {
+                        sx: {
+                          flex: "1",
+                          border: "1px solid #bdbdbd",
+                          borderRadius: "5px"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            import_material3.Checkbox,
+                            {
+                              name: "selected_break",
+                              sx: {
+                                padding: "6px"
+                              },
+                              checked: formData.selected_break,
+                              onChange: (event) => {
+                                handleChange("selected_break", event.target.checked);
+                              },
+                              slotProps: {
+                                input: { "aria-label": "controlled" }
+                              }
+                            }
+                          ),
+                          " ",
+                          "Mark as break"
+                        ]
+                      }
+                    ),
                     ((_c = (_b = formData == null ? void 0 : formData.followUp) == null ? void 0 : _b.label) == null ? void 0 : _c.toLowerCase()) === "yes" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       import_material3.TextField,
                       {
@@ -2963,7 +3150,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;
+  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;
   const theme = (0, import_material4.useTheme)();
   const state = useSDKState();
   const { showToast } = useToast();
@@ -2978,6 +3165,8 @@ function CallControls({ onDataChange }) {
   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 maxReconnectAttempts = 60;
   const baseReconnectDelay = 2e3;
   const maxReconnectDelay = 3e4;
@@ -2985,11 +3174,13 @@ function CallControls({ onDataChange }) {
   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);
@@ -3013,17 +3204,13 @@ function CallControls({ onDataChange }) {
       setDialerAnchorEl(null);
     }
   });
-  const [holdOrUnHold, { isLoading: holdOrUnHoldLoading }] = usePostRequest({
-    // onSuccess: () => {
-    // 	sdkStateManager.setHolding(!state.isHolding);
-    // },
-  });
-  const [muteOrUnMute, { isLoading: muteOrUnMuteLoading }] = usePostRequest({
-    // onSuccess: () => {
-    // 	sdkStateManager.setMuted(!state.isMuted);
-    // },
+  const [holdOrUnHold, { isLoading: holdOrUnHoldLoading }] = usePostRequest();
+  const [muteOrUnMute, { isLoading: muteOrUnMuteLoading }] = usePostRequest();
+  const [readyAgentStatus, { isLoading: agentReadyLoading }] = usePostRequest({
+    onSuccess: () => {
+      sdkStateManager.setAgentStatus("");
+    }
   });
-  const [readyAgentStatus, { isLoading: agentReadyLoading }] = usePostRequest();
   const [updateAgentStatus, { isLoading }] = usePostRequest();
   const [sendNotification] = usePostRequest();
   const [endCall, { isLoading: endCallLoading }] = usePostRequest({
@@ -3043,12 +3230,18 @@ function CallControls({ onDataChange }) {
   const handleOpenAbulanceServices = (event) => {
     setAmbulanceAnchorEl(event.currentTarget);
   };
+  const handleOpenMoreOptions = (event) => {
+    setMoreOptionsAnchorEl(event.currentTarget);
+  };
   const handleCloseDialer = () => {
     setDialerAnchorEl(null);
   };
   const handleCloseAmbulance = () => {
     setAmbulanceAnchorEl(null);
   };
+  const handleCloseMoreOptions = () => {
+    setMoreOptionsAnchorEl(null);
+  };
   const handleOpenAgentStatus = (event) => {
     setStatusAnchorEl(event.currentTarget);
   };
@@ -3069,7 +3262,9 @@ function CallControls({ onDataChange }) {
       break_type: status,
       userId: state.agentId
     };
-    updateAgentStatus(END_POINT.UPDATE_AGENT_BREAK, payload);
+    updateAgentStatus(END_POINT.UPDATE_AGENT_BREAK, payload).then(() => {
+      sdkStateManager.setAgentStatus(status);
+    });
   };
   const handleStartCall = (number) => {
     if (number.length !== 10) {
@@ -3203,7 +3398,7 @@ function CallControls({ onDataChange }) {
           if (prevTime === null || prevTime <= 1) {
             clearInterval(wrapUpinterval);
             handleEndCall({
-              disposition: { label: "Resolved", value: "RES" },
+              disposition: { label: "Resolved", value: "AUTO_WRAPUP" },
               followUp: { label: "No", value: "N" },
               callbackDate: "",
               callbackHrs: "",
@@ -3258,17 +3453,25 @@ function CallControls({ onDataChange }) {
         action: "GETAGENTPROCESSLIST",
         refno: "1234221233"
       }).then((res) => {
-        var _a3, _b2;
-        if (res && res.data && ((_a3 = res == null ? void 0 : res.data) == null ? void 0 : _a3.length) > 1) {
+        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) > 1) {
           setProcessList(res.data.data);
           setOpenProcessorDialog(true);
         } else {
-          sdkStateManager.setProcess((_b2 = res == null ? void 0 : res.data) == null ? void 0 : _b2.data[0]);
+          sdkStateManager.setProcess((_d2 = res == null ? void 0 : res.data) == null ? void 0 : _d2.data[0]);
           setOpenProcessorDialog(false);
         }
       }).catch((err) => {
         showToast(err.response.data.message, "error");
       });
+      axios_default.get(END_POINT.BREAKS_LIST).then((res) => {
+        var _a3, _b2, _c2;
+        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);
+        }
+      }).catch((err) => {
+        showToast(err.response.data.message, "error");
+      });
     }
   }, [state.agentId]);
   const connectWebSocket = () => {
@@ -3298,7 +3501,7 @@ function CallControls({ onDataChange }) {
         }, 3e4);
       };
       webSocketRef.current.onmessage = (event) => {
-        var _a3, _b2;
+        var _a3, _b2, _c2, _d2, _e2;
         try {
           const data = JSON.parse(event.data);
           if (data.type === "pong") {
@@ -3307,79 +3510,77 @@ function CallControls({ onDataChange }) {
           const sdkState = (0, import_vault5.getItem)(STORAGE_KEY);
           const confrence = getCombineConfrenceData(sdkState, data);
           const callData = {
-            "agent_id": data == null ? void 0 : data.agent_id,
-            "status": data == null ? void 0 : data.status,
-            "type": data == null ? void 0 : data.type,
-            "event_time": data == null ? void 0 : data.event_time,
-            "phone_number": data == null ? void 0 : data.phone_number,
-            "convox_id": data == null ? void 0 : data.convox_id,
-            "process_id": data == null ? void 0 : data.process_id,
-            "process_name": data == null ? void 0 : data.process_name,
-            "hold": data == null ? void 0 : data.hold,
-            "mute": data == null ? void 0 : data.mute,
-            "mode": data == null ? void 0 : data.mode,
-            "queue_name": data == null ? void 0 : data.queue_name
+            agent_id: data == null ? void 0 : data.agent_id,
+            status: data == null ? void 0 : data.status,
+            type: data == null ? void 0 : data.type,
+            event_time: data == null ? void 0 : data.event_time,
+            phone_number: data == null ? void 0 : data.phone_number,
+            convox_id: data == null ? void 0 : data.convox_id,
+            process_id: data == null ? void 0 : data.process_id,
+            process_name: data == null ? void 0 : data.process_name,
+            hold: data == null ? void 0 : data.hold,
+            mute: data == null ? void 0 : data.mute,
+            mode: data == null ? void 0 : data.mode,
+            queue_name: data == null ? void 0 : data.queue_name
           };
           sdkStateManager.updateCallData(callData);
           sdkStateManager.updateConferenceData([...confrence]);
           if (["RINGING" /* RINGING */, "DIALING" /* DIALING */].includes(data.status)) {
             setShowIframe(true);
             setCallWrapuptime((_b2 = (_a3 = sdkState == null ? void 0 : sdkState.sdkConfig) == null ? void 0 : _a3.auto_wrapup_time) != null ? _b2 : null);
-            sdkStateManager.updateConferenceData(
-              [
-                {
-                  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
-                }
-              ]
-            );
-            if ((data == null ? void 0 : data.mode) !== "manual" && audioRef.current) {
+            sdkStateManager.updateConferenceData([
+              {
+                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
+              }
+            ]);
+            if ((data == null ? void 0 : data.mode) !== "manual" && audioRef.current && ((_c2 = state == null ? void 0 : state.sdkConfig) == null ? void 0 : _c2.enableRingtone)) {
               audioRef.current.play().catch((error) => {
                 console.error("Failed to play ringtone:", error);
               });
@@ -3390,13 +3591,40 @@ function CallControls({ onDataChange }) {
               audioRef.current.currentTime = 0;
             }
           }
-          if (data.status === "ONCALL" /* ONCALL */) {
+          if (data.status === "IDLE" /* IDLE */) {
+            USB_LIGHT_REQUEST(USB_LIGHT_ON("green"));
+          } else if ((data == null ? void 0 : data.mute) !== 1 && (data == null ? void 0 : data.hold) !== 1 && data.status === "ONCALL" /* ONCALL */) {
+            USB_LIGHT_REQUEST(USB_LIGHT_ON("red"));
             sdkStateManager.startCall();
             if (!showIframe) {
               setShowIframe(true);
             }
-          }
-          if (data.status === "WRAPUP" /* WRAPUP */) {
+          } else if (((data == null ? void 0 : data.mute) === 1 || (data == null ? void 0 : data.hold) === 1) && data.status === "ONCALL" /* ONCALL */) {
+            USB_LIGHT_REQUEST(USB_LIGHT_FLASH("red", 1));
+          } 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;
+            if (eventTime !== lastEventTimeRef.current) {
+              hasFlashedRef.current = false;
+              lastEventTimeRef.current = eventTime;
+            }
+            let isOverLimit = false;
+            if (breakTime && eventTime) {
+              const differenceInMinutes = ((/* @__PURE__ */ new Date()).getTime() - new Date(eventTime).getTime()) / 6e4;
+              if (Number(differenceInMinutes.toFixed(0)) >= Number(breakTime)) {
+                isOverLimit = true;
+              }
+            }
+            if (isOverLimit) {
+              if (!hasFlashedRef.current) {
+                USB_LIGHT_REQUEST(USB_LIGHT_FLASH("yellow", 1));
+                hasFlashedRef.current = true;
+              }
+            } else {
+              USB_LIGHT_REQUEST(USB_LIGHT_ON("yellow"));
+            }
+          } else if (data.status === "WRAPUP" /* WRAPUP */) {
+            USB_LIGHT_REQUEST(USB_LIGHT_FLASH("green", 1));
             sdkStateManager.endCall();
           }
         } catch (e) {
@@ -3549,18 +3777,31 @@ function CallControls({ onDataChange }) {
                             size: "small",
                             onClick: (e) => {
                               var _a3, _b2;
-                              if (!["BREAK" /* BREAK */, "ONCALL" /* ONCALL */, "RINGING" /* RINGING */, "WRAPUP" /* WRAPUP */].includes(
-                                (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()
-                              )) {
+                              if (![
+                                "BREAK" /* BREAK */,
+                                "ONCALL" /* ONCALL */,
+                                "RINGING" /* RINGING */,
+                                "WRAPUP" /* WRAPUP */
+                              ].includes((_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase())) {
                                 handleOpenDialer(e);
                               }
                             },
-                            disabled: ["BREAK" /* BREAK */, "ONCALL" /* ONCALL */, "RINGING" /* RINGING */, "WRAPUP" /* WRAPUP */].includes(state.callData.status.toUpperCase()),
+                            disabled: [
+                              "BREAK" /* BREAK */,
+                              "ONCALL" /* ONCALL */,
+                              "RINGING" /* RINGING */,
+                              "WRAPUP" /* WRAPUP */
+                            ].includes(state.callData.status.toUpperCase()),
                             children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                               import_icons_material2.WifiCalling3,
                               {
                                 sx: {
-                                  color: ["BREAK" /* BREAK */, "ONCALL" /* ONCALL */, "RINGING" /* RINGING */, "WRAPUP" /* WRAPUP */].includes(state.callData.status.toUpperCase()) ? "action.selected" : "success.main"
+                                  color: [
+                                    "BREAK" /* BREAK */,
+                                    "ONCALL" /* ONCALL */,
+                                    "RINGING" /* RINGING */,
+                                    "WRAPUP" /* WRAPUP */
+                                  ].includes(state.callData.status.toUpperCase()) ? "action.selected" : "success.main"
                                 }
                               }
                             )
@@ -3631,18 +3872,26 @@ function CallControls({ onDataChange }) {
                         /* @__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((_t = (_s = state.callData) == null ? void 0 : _s.status) == null ? void 0 : _t.toUpperCase()) ? "outlined" : "contained",
+                            variant: ["BREAK" /* BREAK */, "MISSED" /* MISSED */].includes(
+                              (_t = (_s = state.callData) == null ? void 0 : _s.status) == null ? void 0 : _t.toUpperCase()
+                            ) ? "outlined" : "contained",
                             onClick: (e) => {
                               var _a3, _b2;
-                              if (["BREAK" /* BREAK */, "MISSED" /* MISSED */].includes((_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase())) {
+                              if (["BREAK" /* BREAK */, "MISSED" /* MISSED */].includes(
+                                (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()
+                              )) {
                                 e.stopPropagation();
                                 handleAgentReady();
                               }
                             },
                             classes: {
-                              root: ["BREAK" /* BREAK */, "MISSED" /* MISSED */].includes((_v = (_u = state.callData) == null ? void 0 : _u.status) == null ? void 0 : _v.toUpperCase()) ? "outlined" : "enabled"
+                              root: ["BREAK" /* BREAK */, "MISSED" /* MISSED */].includes(
+                                (_v = (_u = state.callData) == null ? void 0 : _u.status) == null ? void 0 : _v.toUpperCase()
+                              ) ? "outlined" : "enabled"
                             },
-                            sx: __spreadValues({}, ["BREAK" /* BREAK */, "MISSED" /* MISSED */].includes((_x = (_w = state.callData) == null ? void 0 : _w.status) == null ? void 0 : _x.toUpperCase()) ? outlined : enabled),
+                            sx: __spreadValues({}, ["BREAK" /* BREAK */, "MISSED" /* MISSED */].includes(
+                              (_x = (_w = state.callData) == null ? void 0 : _w.status) == null ? void 0 : _x.toUpperCase()
+                            ) ? outlined : enabled),
                             disabled: agentReadyLoading,
                             children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.SupportAgent, {})
                           }
@@ -3694,18 +3943,18 @@ function CallControls({ onDataChange }) {
                           {
                             variant: state.openCallTransferDialog ? "contained" : "outlined",
                             onClick: (e) => {
-                              var _a3, _b2;
-                              if (((_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL" /* ONCALL */) {
+                              var _a3, _b2, _c2;
+                              if (((_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL" /* ONCALL */ || ((_c2 = state == null ? void 0 : state.conferenceLine[0]) == null ? void 0 : _c2.status) === "HOLD" /* HOLD */) {
                                 e.stopPropagation();
                                 sdkStateManager.setOpenCallTransferDialog(true);
                               }
                             },
-                            sx: state.openCallTransferDialog ? __spreadValues({}, enabled) : ((_aa = (_$ = state.callData) == null ? void 0 : _$.status) == null ? void 0 : _aa.toUpperCase()) === "ONCALL" /* ONCALL */ ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
-                            disabled: ((_ca = (_ba = state.callData) == null ? void 0 : _ba.status) == null ? void 0 : _ca.toUpperCase()) !== "ONCALL" /* ONCALL */,
+                            sx: state.openCallTransferDialog ? __spreadValues({}, enabled) : ((_aa = (_$ = state.callData) == null ? void 0 : _$.status) == null ? void 0 : _aa.toUpperCase()) === "ONCALL" /* ONCALL */ || ((_ba = state == null ? void 0 : state.conferenceLine[0]) == null ? void 0 : _ba.status) === "HOLD" /* HOLD */ ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                            disabled: ((_da = (_ca = state.callData) == null ? void 0 : _ca.status) == null ? void 0 : _da.toUpperCase()) !== "ONCALL" /* ONCALL */ || ((_ea = state == null ? void 0 : state.conferenceLine[0]) == null ? void 0 : _ea.status) === "HOLD" /* HOLD */,
                             children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.TransferWithinAStation, {})
                           }
                         ) }),
-                        !((_da = state.sdkConfig) == null ? void 0 : _da.disableConferenceButton) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Conference Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        !((_fa = state.sdkConfig) == null ? void 0 : _fa.disableConferenceButton) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Conference Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                           import_material4.Button,
                           {
                             variant: state.openConferenceDialog ? "contained" : "outlined",
@@ -3716,37 +3965,34 @@ function CallControls({ onDataChange }) {
                                 sdkStateManager.setOpenConferenceDialog(true);
                               }
                             },
-                            sx: state.openConferenceDialog ? __spreadValues({}, enabled) : ((_fa = (_ea = state.callData) == null ? void 0 : _ea.status) == null ? void 0 : _fa.toUpperCase()) === "ONCALL" /* ONCALL */ ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
-                            disabled: ((_ha = (_ga = state.callData) == null ? void 0 : _ga.status) == null ? void 0 : _ha.toUpperCase()) !== "ONCALL" /* ONCALL */,
+                            sx: state.openConferenceDialog ? __spreadValues({}, enabled) : ((_ha = (_ga = state.callData) == null ? void 0 : _ga.status) == null ? void 0 : _ha.toUpperCase()) === "ONCALL" /* ONCALL */ ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                            disabled: ((_ja = (_ia = state.callData) == null ? void 0 : _ia.status) == null ? void 0 : _ja.toUpperCase()) !== "ONCALL" /* ONCALL */,
                             children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Group, {})
                           }
                         ) }),
-                        ((_ia = state.sdkConfig) == null ? void 0 : _ia.enableSmsServices) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Send SMS", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        ((_ka = state.sdkConfig) == null ? void 0 : _ka.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",
                             onClick: (e) => {
                               var _a3, _b2;
-                              if ([
-                                "ONCALL" /* ONCALL */,
-                                "WRAPUP" /* WRAPUP */
-                              ].includes((_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase())) {
+                              if (["ONCALL" /* ONCALL */, "WRAPUP" /* WRAPUP */].includes(
+                                (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()
+                              )) {
                                 e.stopPropagation();
                                 handleOpenAbulanceServices(e);
                               }
                             },
-                            sx: Boolean(ambulanceAnchorEl) ? __spreadValues({}, enabled) : [
-                              "ONCALL" /* ONCALL */,
-                              "WRAPUP" /* WRAPUP */
-                            ].includes((_ka = (_ja = state.callData) == null ? void 0 : _ja.status) == null ? void 0 : _ka.toUpperCase()) ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
-                            disabled: ![
-                              "ONCALL" /* ONCALL */,
-                              "WRAPUP" /* WRAPUP */
-                            ].includes((_ma = (_la = state.callData) == null ? void 0 : _la.status) == null ? void 0 : _ma.toUpperCase()),
+                            sx: Boolean(ambulanceAnchorEl) ? __spreadValues({}, enabled) : ["ONCALL" /* ONCALL */, "WRAPUP" /* WRAPUP */].includes(
+                              (_ma = (_la = state.callData) == null ? void 0 : _la.status) == null ? void 0 : _ma.toUpperCase()
+                            ) ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                            disabled: !["ONCALL" /* ONCALL */, "WRAPUP" /* WRAPUP */].includes(
+                              (_oa = (_na = state.callData) == null ? void 0 : _na.status) == null ? void 0 : _oa.toUpperCase()
+                            ),
                             children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.SmsSharp, {})
                           }
                         ) }),
-                        !((_na = state.sdkConfig) == null ? void 0 : _na.disableEndCallButton) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "End Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        !((_pa = state.sdkConfig) == null ? void 0 : _pa.disableEndCallButton) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "End Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                           import_material4.Button,
                           {
                             variant: [
@@ -3754,7 +4000,7 @@ function CallControls({ onDataChange }) {
                               "RINGING" /* RINGING */,
                               "DIALING" /* DIALING */,
                               "WRAPUP" /* WRAPUP */
-                            ].includes((_pa = (_oa = state.callData) == null ? void 0 : _oa.status) == null ? void 0 : _pa.toUpperCase()) ? "contained" : "outlined",
+                            ].includes((_ra = (_qa = state.callData) == null ? void 0 : _qa.status) == null ? void 0 : _ra.toUpperCase()) ? "contained" : "outlined",
                             onClick: (e) => {
                               var _a3, _b2;
                               if ([
@@ -3772,7 +4018,7 @@ function CallControls({ onDataChange }) {
                               "RINGING" /* RINGING */,
                               "DIALING" /* DIALING */,
                               "WRAPUP" /* WRAPUP */
-                            ].includes((_ra = (_qa = state.callData) == null ? void 0 : _qa.status) == null ? void 0 : _ra.toUpperCase()) ? __spreadProps(__spreadValues({}, enabled), {
+                            ].includes((_ta = (_sa = state.callData) == null ? void 0 : _sa.status) == null ? void 0 : _ta.toUpperCase()) ? __spreadProps(__spreadValues({}, enabled), {
                               borderRight: "1px",
                               backgroundColor: "error.main",
                               minWidth: "60px !important",
@@ -3796,7 +4042,7 @@ function CallControls({ onDataChange }) {
                               "RINGING" /* RINGING */,
                               "DIALING" /* DIALING */,
                               "WRAPUP" /* WRAPUP */
-                            ].includes((_ta = (_sa = state.callData) == null ? void 0 : _sa.status) == null ? void 0 : _ta.toUpperCase()) || endCallLoading,
+                            ].includes((_va = (_ua = state.callData) == null ? void 0 : _ua.status) == null ? void 0 : _va.toUpperCase()) || endCallLoading,
                             children: endCallLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                               import_material4.CircularProgress,
                               {
@@ -3805,6 +4051,26 @@ function CallControls({ onDataChange }) {
                               }
                             ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.CallEnd, {})
                           }
+                        ) }),
+                        !((_wa = state.sdkConfig) == null ? void 0 : _wa.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",
+                            onClick: (e) => {
+                              var _a3, _b2;
+                              if (["BREAK" /* BREAK */, "IDLE" /* IDLE */].includes(
+                                (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()
+                              )) {
+                                e.stopPropagation();
+                                handleOpenMoreOptions(e);
+                              }
+                            },
+                            sx: Boolean(moreOptionsAnchorEl) ? __spreadValues({}, enabled) : __spreadValues({}, outlined),
+                            disabled: !["BREAK" /* BREAK */, "IDLE" /* IDLE */].includes(
+                              (_ya = (_xa = state.callData) == null ? void 0 : _xa.status) == null ? void 0 : _ya.toUpperCase()
+                            ),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.MoreVert, {})
+                          }
                         ) })
                       ]
                     }
@@ -3836,7 +4102,7 @@ function CallControls({ onDataChange }) {
               transition: theme.transitions.create(["box-shadow", "transform"], {
                 duration: theme.transitions.duration.short
               }),
-              visibility: showIframe && !((_ua = state.sdkConfig) == null ? void 0 : _ua.disableSoftPhone) ? "visible" : "hidden",
+              visibility: showIframe && !((_za = state.sdkConfig) == null ? void 0 : _za.disableSoftPhone) ? "visible" : "hidden",
               userSelect: "none"
             },
             children: [
@@ -3870,7 +4136,7 @@ function CallControls({ onDataChange }) {
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "iframe",
                 {
-                  src: `https://${IP}/ConVoxCCS/iframe?agent_id=${state.agentId}&process_id=${(_va = state.process) == null ? void 0 : _va.process_id}`,
+                  src: `https://${IP}/ConVoxCCS/iframe?agent_id=${state.agentId}&process_id=${(_Aa = state.process) == null ? void 0 : _Aa.process_id}`,
                   height: 380,
                   width: 420,
                   allow: "camera; microphone; autoplay",
@@ -3912,7 +4178,13 @@ function CallControls({ onDataChange }) {
                   value: phoneNumber,
                   placeholder: "Enter Mobile No.",
                   onChange: (e) => {
-                    setPhoneNumber(e.target.value);
+                    const value = e.target.value;
+                    setPhoneNumber(value);
+                  },
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                      handleStartCall(phoneNumber);
+                    }
                   }
                 }
               ),
@@ -4005,6 +4277,60 @@ function CallControls({ onDataChange }) {
         )
       }
     ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_material4.Menu,
+      {
+        anchorEl: moreOptionsAnchorEl,
+        open: Boolean(moreOptionsAnchorEl),
+        onClose: handleCloseMoreOptions,
+        onClick: (e) => e.stopPropagation(),
+        sx: {
+          zIndex: 99999
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_material4.Box,
+          {
+            sx: {
+              all: "unset",
+              padding: " 0px 20px",
+              "&hover": {
+                backgroundColor: "white"
+              },
+              display: "flex",
+              alignItems: "center",
+              flexDirection: "column",
+              gap: 1
+            },
+            children: processList == null ? void 0 : processList.map((item) => {
+              var _a3, _b2, _c2;
+              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_material4.Box,
+                {
+                  sx: {
+                    width: "100%"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: (_a3 = item == null ? void 0 : item.process_name) != null ? _a3 : "", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    import_material4.Button,
+                    {
+                      color: "primary",
+                      variant: ((_b2 = state == null ? void 0 : state.process) == null ? void 0 : _b2.process_id) === (item == null ? void 0 : item.process_id) ? "contained" : "outlined",
+                      onClick: () => {
+                        sdkStateManager.setProcess(item);
+                      },
+                      sx: {
+                        width: "100%"
+                      },
+                      children: (_c2 = item == null ? void 0 : item.process_name) != null ? _c2 : ""
+                    }
+                  ) })
+                },
+                item == null ? void 0 : item.process_id
+              );
+            })
+          }
+        )
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_material4.Menu,
       {
@@ -4015,7 +4341,32 @@ function CallControls({ onDataChange }) {
         sx: {
           zIndex: 99999
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.MenuItem, { onClick: () => handleUpdateAgentStatus("Lunch"), children: "- Break" })
+        children: !breaksList || (breaksList == null ? void 0 : breaksList.length) === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.MenuItem, { onClick: () => handleUpdateAgentStatus("Lunch"), children: "- Break" }) : breaksList == null ? void 0 : breaksList.map((item) => {
+          var _a3, _b2, _c2;
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            import_material4.MenuItem,
+            {
+              sx: {
+                // hilight background of selected
+                backgroundColor: ((_a3 = state == null ? void 0 : state.callData) == null ? void 0 : _a3.status) === "BREAK" && (state == null ? void 0 : state.agentStatus) === (item == null ? void 0 : item.type) ? "primary.main" : "transparent",
+                color: ((_b2 = state == null ? void 0 : state.callData) == null ? void 0 : _b2.status) === "BREAK" && (state == null ? void 0 : state.agentStatus) === (item == null ? void 0 : item.type) ? "white" : "primary.main",
+                ":hover": {
+                  backgroundColor: ((_c2 = state == null ? void 0 : state.callData) == null ? void 0 : _c2.status) === "BREAK" && (state == null ? void 0 : state.agentStatus) === (item == null ? void 0 : item.type) ? "primary.dark" : "selected.hover"
+                  // color:
+                  // 	state?.callData?.status === "BREAK" && state?.agentStatus === item?.type ?
+                  // 		"primary.main"
+                  // 	:	"primary.main",
+                }
+              },
+              onClick: () => handleUpdateAgentStatus(item == null ? void 0 : item.type),
+              children: [
+                "- ",
+                item == null ? void 0 : item.type
+              ]
+            },
+            item == null ? void 0 : item.type
+          );
+        })
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(