@bjsdistribution/dms-client-return 0.2.2-prod → 0.2.3-prod

package/dist/components/order-view/toolbox-resources/expanded-content/index.js

@@ -1,52 +1,53 @@
-import { jsxs as l, jsx as e, Fragment as j } from "react/jsx-runtime";
-import { useState as L, useEffect as U } from "react";
-import r, { css as O } from "styled-components";
-import { useOrderId as re, skeletonTomTom as se, useZoomCallLogs as ce, useZoomCallLogsLoader as de, useEpodImages as pe } from "../../store.js";
-import he from "../../../../common/scrollbar/index.js";
-import me from "../../../../common/expand-collapse/index.js";
-import ge from "../collapsed-content/index.js";
-import b from "@tippyjs/react";
-import { DownloadIcon as S } from "../../../../assets/icons/DownloadIcon.js";
-import { Tabs as k, Skeleton as c, Image as fe, Spin as ue, notification as E } from "antd";
-import { useAxios as P, PrivateIcon as be, PublicIcon as we, toReverseDeliveryLabel as xe, ViewIcon as _, formatUtcToLocal as A } from "@bjsdistribution/dms-component-library";
-import { useClientPortal as ye } from "../../../store.js";
-import { useAtom as ve } from "jotai";
-function He() {
-  const [x] = re(), [Z] = ve(se), [f, M] = L("pda"), [C, V] = ce(), [H, K] = de(), [G, W] = L([]), [q] = pe(), [I, J] = L([]), [Q] = ye(), {
+import { jsxs as l, jsx as t, Fragment as R } from "react/jsx-runtime";
+import { useState as k, useEffect as U } from "react";
+import r, { css as F } from "styled-components";
+import { useOrderId as rt, skeletonTomTom as dt, useZoomCallLogs as st, useZoomCallLogsLoader as ct, useEpodImages as pt } from "../../store.js";
+import ht from "../../../../common/scrollbar/index.js";
+import mt from "../../../../common/expand-collapse/index.js";
+import bt from "../collapsed-content/index.js";
+import u from "@tippyjs/react";
+import { DownloadIcon as N } from "../../../../assets/icons/DownloadIcon.js";
+import { Tabs as L, Skeleton as s, Image as gt, Spin as ft, notification as S } from "antd";
+import { useAxios as E, PrivateIcon as ut, PublicIcon as wt, ViewIcon as _, formatUtcToLocal as P } from "@bjsdistribution/dms-component-library";
+import { useClientPortal as xt } from "../../../store.js";
+import { toReverseDeliveryLabel as yt } from "../../../utils.js";
+import { useAtom as vt } from "jotai";
+function Kt() {
+  const [x] = rt(), [Z] = vt(dt), [g, M] = k("pda"), [C, V] = st(), [H, K] = ct(), [G, W] = k([]), [q] = pt(), [z, J] = k([]), [Q] = xt(), {
     data: X,
     // setShouldPerformAction: setAction,
-    loading: D,
+    loading: I,
     fetchData: Y
-  } = P({
+  } = E({
     endpoint: `v1/orders/call_logs/?order_id=${x}`,
     method: "GET"
     // performAction: false,
   });
   U(() => {
-    x && V(X?.data), K(D);
-  }, [D]);
-  const { fetchData: ee } = P({
+    x && V(X?.data), K(I);
+  }, [I]);
+  const { fetchData: tt } = E({
     endpoint: "/v1/orders/call_logs/recording/download/",
     method: "POST",
     config: {
       responseType: "blob"
     }
-  }), y = q?.result?.map((o) => ({
-    s3_content: o?.s3_content,
+  }), y = q?.result?.map((a) => ({
+    s3_content: a?.s3_content,
     // Use image_link for photos as it already contains the .jpg extension
-    image_link: o?.image_link,
-    type: o?.type,
-    time: new Date(o?.timestamp * 1e3).toLocaleString(),
-    path: o?.path,
-    visibility_status: o?.visibility_status
+    image_link: a?.image_link,
+    type: a?.type,
+    time: new Date(a?.timestamp * 1e3).toLocaleString(),
+    path: a?.path,
+    visibility_status: a?.visibility_status
   }));
   U(() => {
     y && y?.length > 0 && J(y);
   }, [y?.length > 0]);
-  const z = async (o) => {
-    const t = new Uint8Array(await o.slice(0, 12).arrayBuffer());
-    return t[0] === 255 && t[1] === 216 && t[2] === 255 ? ".jpeg" : t[0] === 137 && t[1] === 80 && t[2] === 78 && t[3] === 71 ? ".png" : t[0] === 37 && t[1] === 80 && t[2] === 68 && t[3] === 70 ? ".pdf" : t[0] === 73 && t[1] === 68 && t[2] === 51 || t[0] === 255 && (t[1] === 251 || t[1] === 243 || t[1] === 242) ? ".mp3" : t[0] === 82 && t[1] === 73 && t[2] === 70 && t[3] === 70 && t[8] === 87 && t[9] === 65 && t[10] === 86 && t[11] === 69 ? ".wav" : t[0] === 79 && t[1] === 103 && t[2] === 103 && t[3] === 83 ? ".ogg" : t[0] === 71 && t[1] === 73 && t[2] === 70 && t[3] === 56 ? ".gif" : t[0] === 82 && t[1] === 73 && t[2] === 70 && t[3] === 70 && t[8] === 87 && t[9] === 69 && t[10] === 66 && t[11] === 80 ? ".webp" : t[4] === 102 && t[5] === 116 && t[6] === 121 && t[7] === 112 ? ".mp4" : "";
-  }, T = (o) => ({
+  const D = async (a) => {
+    const e = new Uint8Array(await a.slice(0, 12).arrayBuffer());
+    return e[0] === 255 && e[1] === 216 && e[2] === 255 ? ".jpeg" : e[0] === 137 && e[1] === 80 && e[2] === 78 && e[3] === 71 ? ".png" : e[0] === 37 && e[1] === 80 && e[2] === 68 && e[3] === 70 ? ".pdf" : e[0] === 73 && e[1] === 68 && e[2] === 51 || e[0] === 255 && (e[1] === 251 || e[1] === 243 || e[1] === 242) ? ".mp3" : e[0] === 82 && e[1] === 73 && e[2] === 70 && e[3] === 70 && e[8] === 87 && e[9] === 65 && e[10] === 86 && e[11] === 69 ? ".wav" : e[0] === 79 && e[1] === 103 && e[2] === 103 && e[3] === 83 ? ".ogg" : e[0] === 71 && e[1] === 73 && e[2] === 70 && e[3] === 56 ? ".gif" : e[0] === 82 && e[1] === 73 && e[2] === 70 && e[3] === 70 && e[8] === 87 && e[9] === 69 && e[10] === 66 && e[11] === 80 ? ".webp" : e[4] === 102 && e[5] === 116 && e[6] === 121 && e[7] === 112 ? ".mp4" : "";
+  }, T = (a) => ({
     "image/jpeg": ".jpeg",
     "image/jpg": ".jpg",
     "image/png": ".png",
@@ -59,185 +60,185 @@ function He() {
     "audio/ogg": ".ogg",
     "audio/x-wav": ".wav",
     "video/mp4": ".mp4"
-  })[o?.toLowerCase()] || "", te = async (o, t) => {
-    if (o)
+  })[a?.toLowerCase()] || "", et = async (a, e) => {
+    if (a)
       try {
-        const n = await fetch(o);
-        if (!n.ok) throw new Error("Download failed");
-        const a = await n.blob();
-        let i = await z(a);
+        const o = await fetch(a);
+        if (!o.ok) throw new Error("Download failed");
+        const n = await o.blob();
+        let i = await D(n);
         if (!i) {
-          const le = n.headers.get("Content-Type") || "";
-          i = T(le.split(";")[0]?.trim());
+          const lt = o.headers.get("Content-Type") || "";
+          i = T(lt.split(";")[0]?.trim());
         }
-        !i && a.type && (i = T(a.type));
-        let s = t || "download";
-        !/\.\w{2,5}$/.test(s) && i && (s = `${s}${i}`);
-        const g = URL.createObjectURL(a), h = document.createElement("a");
-        h.href = g, h.download = s, document.body.appendChild(h), h.click(), document.body.removeChild(h), URL.revokeObjectURL(g);
+        !i && n.type && (i = T(n.type));
+        let d = e || "download";
+        !/\.\w{2,5}$/.test(d) && i && (d = `${d}${i}`);
+        const b = URL.createObjectURL(n), h = document.createElement("a");
+        h.href = b, h.download = d, document.body.appendChild(h), h.click(), document.body.removeChild(h), URL.revokeObjectURL(b);
       } catch {
-        const a = document.createElement("a");
-        a.href = o, a.download = t || "download", document.body.appendChild(a), a.click(), document.body.removeChild(a);
+        const n = document.createElement("a");
+        n.href = a, n.download = e || "download", document.body.appendChild(n), n.click(), document.body.removeChild(n);
       }
-  }, ne = (o) => {
-    M(o), o === "customer_calls" && Y();
-  }, oe = f === "pda" ? Z : H, $ = f === "pda" ? I : C, R = (o, t) => {
-    W((n) => n.some((a) => a.url === o) ? n.map(
-      (a) => a.url === o ? { ...a, status: t } : a
-    ) : [...n, { url: o, status: t }]);
-  }, ae = async (o) => {
+  }, ot = (a) => {
+    M(a), a === "customer_calls" && Y();
+  }, at = g === "pda" ? Z : H, j = g === "pda" ? z : C, $ = (a, e) => {
+    W((o) => o.some((n) => n.url === a) ? o.map(
+      (n) => n.url === a ? { ...n, status: e } : n
+    ) : [...o, { url: a, status: e }]);
+  }, nt = async (a) => {
     try {
-      R(o, !0);
-      const n = await ee({
+      $(a, !0);
+      const o = await tt({
         payload: {
-          recording_url: o
+          recording_url: a
         }
-      }), { pathname: a } = new URL(o), i = a.split("/").pop(), s = n instanceof Blob ? n : new Blob([n]);
-      let p = await z(s);
-      !p && s.type && (p = T(s.type)), p || (p = ".mp3");
-      const g = URL.createObjectURL(s), h = document.createElement("a");
-      h.href = g, h.download = `${i}${p}`, h.click(), URL.revokeObjectURL(g), E.success({
+      }), { pathname: n } = new URL(a), i = n.split("/").pop(), d = o instanceof Blob ? o : new Blob([o]);
+      let p = await D(d);
+      !p && d.type && (p = T(d.type)), p || (p = ".mp3");
+      const b = URL.createObjectURL(d), h = document.createElement("a");
+      h.href = b, h.download = `${i}${p}`, h.click(), URL.revokeObjectURL(b), S.success({
         message: "Success",
         description: "File downloaded successfully"
       });
-    } catch (t) {
-      console.log(t), E.error({
+    } catch (e) {
+      console.log(e), S.error({
         message: "Failed to download file",
         //@ts-ignore
-        description: t
+        description: e
       });
     } finally {
-      R(o, !1);
+      $(a, !1);
     }
-  }, ie = (o, t) => o === "pda" ? t?.map((n, a) => /* @__PURE__ */ l(u, { children: [
-    /* @__PURE__ */ l(m, { children: [
-      n?.visibility_status === "locked" ? /* @__PURE__ */ e(be, {}) : /* @__PURE__ */ e(we, {}),
-      /* @__PURE__ */ e("div", { children: n?.path })
-    ] }),
-    /* @__PURE__ */ e(m, { children: xe(n?.type, Q) }),
-    /* @__PURE__ */ e(m, { children: n?.time }),
-    /* @__PURE__ */ e(m, { colSpan: 2, children: (n?.type === "photo" || n?.type === "call_recording") && /* @__PURE__ */ e(ze, { children: /* @__PURE__ */ l(F, { children: [
-      n?.type === "call_recording" ? /* @__PURE__ */ e(b, { content: "Play", placement: "top", trigger: "mouseenter", children: /* @__PURE__ */ e(
+  }, it = (a, e) => a === "pda" ? e?.map((o, n) => /* @__PURE__ */ l(f, { className: "data-row", children: [
+    /* @__PURE__ */ t(m, { "data-label": "Content", children: /* @__PURE__ */ l("div", { className: "cell-value", children: [
+      o?.visibility_status === "locked" ? /* @__PURE__ */ t(ut, {}) : /* @__PURE__ */ t(wt, {}),
+      /* @__PURE__ */ t("div", { children: o?.path })
+    ] }) }),
+    /* @__PURE__ */ t(m, { "data-label": "Type", children: yt(o?.type, Q) }),
+    /* @__PURE__ */ t(m, { "data-label": "Time", children: o?.time }),
+    /* @__PURE__ */ t(m, { colSpan: 2, "data-label": "Options", children: (o?.type === "photo" || o?.type === "call_recording") && /* @__PURE__ */ t(Dt, { children: /* @__PURE__ */ l(B, { children: [
+      o?.type === "call_recording" ? /* @__PURE__ */ t(u, { content: "Play", placement: "top", trigger: "mouseenter", children: /* @__PURE__ */ t(
         w,
         {
           onClick: () => {
-            const i = n?.path?.match(/\.\w+$/)?.[0] || "";
-            window.open(`${n?.s3_content}${i}`, "_blank");
+            const i = o?.path?.match(/\.\w+$/)?.[0] || "";
+            window.open(`${o?.s3_content}${i}`, "_blank");
           },
-          children: /* @__PURE__ */ e(_, { style: { cursor: "pointer" } })
+          children: /* @__PURE__ */ t(_, { style: { cursor: "pointer" } })
         }
-      ) }) : /* @__PURE__ */ e(b, { content: "View", placement: "top", trigger: "mouseenter", children: /* @__PURE__ */ l(w, { className: "ImageView", children: [
-        /* @__PURE__ */ e(_, { style: { cursor: "pointer" } }),
-        /* @__PURE__ */ e(
-          fe,
+      ) }) : /* @__PURE__ */ t(u, { content: "View", placement: "top", trigger: "mouseenter", children: /* @__PURE__ */ l(w, { className: "ImageView", children: [
+        /* @__PURE__ */ t(_, { style: { cursor: "pointer" } }),
+        /* @__PURE__ */ t(
+          gt,
           {
             width: "20px",
-            src: n?.type === "photo" ? n?.image_link : n?.s3_content
+            src: o?.type === "photo" ? o?.image_link : o?.s3_content
           }
         )
       ] }) }),
-      /* @__PURE__ */ e(
-        b,
+      /* @__PURE__ */ t(
+        u,
         {
           content: "Download",
           placement: "top",
           trigger: "mouseenter",
-          children: /* @__PURE__ */ e(
+          children: /* @__PURE__ */ t(
             w,
             {
               onClick: () => {
-                const i = n?.path?.match(/\.\w+$/)?.[0] || "", s = n?.type === "photo" ? n?.image_link : `${n?.s3_content}${i}`;
-                te(
-                  s,
-                  n?.path?.split("/").pop()
+                const i = o?.path?.match(/\.\w+$/)?.[0] || "", d = o?.type === "photo" ? o?.image_link : `${o?.s3_content}${i}`;
+                et(
+                  d,
+                  o?.path?.split("/").pop()
                 );
               },
-              children: /* @__PURE__ */ e(S, {})
+              children: /* @__PURE__ */ t(N, {})
             }
           )
         }
       )
     ] }) }) })
-  ] }, a)) : C?.map((n, a) => {
-    const i = n?.recordings?.[0], p = G.find((g) => g.url === i?.url)?.status || !1;
-    return /* @__PURE__ */ l(u, { children: [
-      /* @__PURE__ */ e(m, { children: n?.description }),
-      /* @__PURE__ */ e(m, { children: n?.source_type }),
-      /* @__PURE__ */ e(m, { children: /* @__PURE__ */ l(Ce, { children: [
-        /* @__PURE__ */ e("span", { children: A(n?.start_datetime).date }),
-        /* @__PURE__ */ e("span", { children: A(n?.start_datetime).time })
+  ] }, n)) : C?.map((o, n) => {
+    const i = o?.recordings?.[0], p = G.find((b) => b.url === i?.url)?.status || !1;
+    return /* @__PURE__ */ l(f, { className: "data-row", children: [
+      /* @__PURE__ */ t(m, { "data-label": "Content", children: o?.description }),
+      /* @__PURE__ */ t(m, { "data-label": "Type", children: o?.source_type }),
+      /* @__PURE__ */ t(m, { "data-label": "Time", children: /* @__PURE__ */ l(Ct, { children: [
+        /* @__PURE__ */ t("span", { children: P(o?.start_datetime).date }),
+        /* @__PURE__ */ t("span", { children: P(o?.start_datetime).time })
       ] }) }),
-      /* @__PURE__ */ e(m, { colSpan: 2, children: /* @__PURE__ */ e("div", { className: "call-recording-actions", children: /* @__PURE__ */ l(F, { children: [
-        !p && i && /* @__PURE__ */ l(j, { children: [
-          /* @__PURE__ */ e(
-            b,
+      /* @__PURE__ */ t(m, { colSpan: 2, "data-label": "Options", children: /* @__PURE__ */ t("div", { className: "call-recording-actions", children: /* @__PURE__ */ l(B, { children: [
+        !p && i && /* @__PURE__ */ l(R, { children: [
+          /* @__PURE__ */ t(
+            u,
             {
               content: "Play",
               placement: "top",
               trigger: "mouseenter",
-              children: /* @__PURE__ */ e(
+              children: /* @__PURE__ */ t(
                 w,
                 {
                   onClick: () => window.open(i.url, "_blank"),
-                  children: /* @__PURE__ */ e(_, { style: { cursor: "pointer" } })
+                  children: /* @__PURE__ */ t(_, { style: { cursor: "pointer" } })
                 }
               )
             }
           ),
-          /* @__PURE__ */ e(
-            b,
+          /* @__PURE__ */ t(
+            u,
             {
               content: "Download",
               placement: "top",
               trigger: "mouseenter",
-              children: /* @__PURE__ */ e(
+              children: /* @__PURE__ */ t(
                 w,
                 {
-                  onClick: () => ae(i.url),
-                  children: /* @__PURE__ */ e(S, {})
+                  onClick: () => nt(i.url),
+                  children: /* @__PURE__ */ t(N, {})
                 }
               )
             }
           )
         ] }),
-        i && /* @__PURE__ */ e(ue, { size: "small", spinning: p })
+        i && /* @__PURE__ */ t(ft, { size: "small", spinning: p })
       ] }) }) })
-    ] }, a);
+    ] }, n);
   });
-  return /* @__PURE__ */ l(me, { collapsedContent: /* @__PURE__ */ e(ge, {}), children: [
-    /* @__PURE__ */ e(Te, { children: /* @__PURE__ */ l(
-      k,
+  return /* @__PURE__ */ l(mt, { collapsedContent: /* @__PURE__ */ t(bt, {}), children: [
+    /* @__PURE__ */ t(Tt, { children: /* @__PURE__ */ l(
+      L,
       {
         defaultActiveKey: "pda",
-        activeKey: f,
-        onChange: ne,
+        activeKey: g,
+        onChange: ot,
         children: [
-          /* @__PURE__ */ e(
-            k.TabPane,
+          /* @__PURE__ */ t(
+            L.TabPane,
             {
               tab: /* @__PURE__ */ l(
                 "div",
                 {
-                  className: f === "pda" ? "active-tab" : "passive-tab",
+                  className: g === "pda" ? "active-tab" : "passive-tab",
                   children: [
                     "PDA ",
-                    /* @__PURE__ */ e("span", { className: "count", children: I?.length })
+                    /* @__PURE__ */ t("span", { className: "count", children: z?.length })
                   ]
                 }
               )
             },
             "pda"
           ),
-          /* @__PURE__ */ e(
-            k.TabPane,
+          /* @__PURE__ */ t(
+            L.TabPane,
             {
               tab: /* @__PURE__ */ l(
                 "div",
                 {
-                  className: f === "customer_calls" ? "active-tab" : "passive-tab",
+                  className: g === "customer_calls" ? "active-tab" : "passive-tab",
                   children: [
                     "Customer Calls",
-                    /* @__PURE__ */ e("span", { className: "count", children: C?.length })
+                    /* @__PURE__ */ t("span", { className: "count", children: C?.length })
                   ]
                 }
               )
@@ -247,49 +248,49 @@ function He() {
         ]
       }
     ) }),
-    /* @__PURE__ */ e($e, { children: /* @__PURE__ */ e(Le, { children: /* @__PURE__ */ e(ke, { children: /* @__PURE__ */ e(he, { children: /* @__PURE__ */ l(De, { children: [
-      /* @__PURE__ */ e(Ie, { children: /* @__PURE__ */ l(u, { children: [
-        /* @__PURE__ */ e(v, { children: "Content" }),
-        /* @__PURE__ */ e(v, { children: "Type" }),
-        /* @__PURE__ */ e(v, { children: "Time" }),
-        /* @__PURE__ */ e(v, { children: "Options" })
+    /* @__PURE__ */ t(jt, { children: /* @__PURE__ */ t(kt, { className: "mobile-table-container", children: /* @__PURE__ */ t(Lt, { className: "mobile-table-wrapper", children: /* @__PURE__ */ t(ht, { children: /* @__PURE__ */ l(It, { children: [
+      /* @__PURE__ */ t(zt, { children: /* @__PURE__ */ l(f, { children: [
+        /* @__PURE__ */ t(v, { children: "Content" }),
+        /* @__PURE__ */ t(v, { children: "Type" }),
+        /* @__PURE__ */ t(v, { children: "Time" }),
+        /* @__PURE__ */ t(v, { children: "Options" })
       ] }) }),
-      /* @__PURE__ */ e(_e, { children: oe ? /* @__PURE__ */ l(j, { children: [
-        /* @__PURE__ */ l(u, { children: [
-          /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(
-            c.Input,
+      /* @__PURE__ */ t(_t, { children: at ? /* @__PURE__ */ l(R, { children: [
+        /* @__PURE__ */ l(f, { children: [
+          /* @__PURE__ */ t(c, { children: /* @__PURE__ */ t(
+            s.Input,
             {
               active: !0,
               size: "small",
               style: { width: 100 }
             }
           ) }),
-          /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(
-            c.Input,
+          /* @__PURE__ */ t(c, { children: /* @__PURE__ */ t(
+            s.Input,
             {
               active: !0,
               size: "small",
               style: { width: 80 }
             }
           ) }),
-          /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(
-            c.Input,
+          /* @__PURE__ */ t(c, { children: /* @__PURE__ */ t(
+            s.Input,
             {
               active: !0,
               size: "small",
               style: { width: 130 }
             }
           ) }),
-          /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(
-            c.Input,
+          /* @__PURE__ */ t(c, { children: /* @__PURE__ */ t(
+            s.Input,
             {
               active: !0,
               size: "small",
               style: { width: 100 }
             }
           ) }),
-          /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(
-            c.Input,
+          /* @__PURE__ */ t(c, { children: /* @__PURE__ */ t(
+            s.Input,
             {
               active: !0,
               size: "small",
@@ -297,41 +298,41 @@ function He() {
             }
           ) })
         ] }),
-        /* @__PURE__ */ l(u, { children: [
-          /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(
-            c.Input,
+        /* @__PURE__ */ l(f, { children: [
+          /* @__PURE__ */ t(c, { children: /* @__PURE__ */ t(
+            s.Input,
             {
               active: !0,
               size: "small",
               style: { width: 100 }
             }
           ) }),
-          /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(
-            c.Input,
+          /* @__PURE__ */ t(c, { children: /* @__PURE__ */ t(
+            s.Input,
             {
               active: !0,
               size: "small",
               style: { width: 80 }
             }
           ) }),
-          /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(
-            c.Input,
+          /* @__PURE__ */ t(c, { children: /* @__PURE__ */ t(
+            s.Input,
             {
               active: !0,
               size: "small",
               style: { width: 130 }
             }
           ) }),
-          /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(
-            c.Input,
+          /* @__PURE__ */ t(c, { children: /* @__PURE__ */ t(
+            s.Input,
             {
               active: !0,
               size: "small",
               style: { width: 100 }
             }
           ) }),
-          /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(
-            c.Input,
+          /* @__PURE__ */ t(c, { children: /* @__PURE__ */ t(
+            s.Input,
             {
               active: !0,
               size: "small",
@@ -339,20 +340,20 @@ function He() {
             }
           ) })
         ] })
-      ] }) : $?.length > 0 ? ie(f, $) : /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(m, { colSpan: 5, children: "No entries found." }) }) })
+      ] }) : j?.length > 0 ? it(g, j) : /* @__PURE__ */ t(f, { children: /* @__PURE__ */ t(m, { colSpan: 5, children: "No entries found." }) }) })
     ] }) }) }) }) })
   ] });
 }
-const Ce = r.div`
+const Ct = r.div`
   display: flex;
   flex-direction: column;
   gap: 2px;
-`, B = O`
+`, A = F`
   color: #3a3630 !important;
   font-family: 'Lato', sans-serif;
   font-size: 14px;
   font-weight: 500;
-`, N = O`
+`, O = F`
   color: #fff;
   background: #3a3630;
   padding: 2px 5px;
@@ -362,7 +363,7 @@ const Ce = r.div`
   height: 18px;
   display: flex;
   align-items: center;
-`, Te = r.div`
+`, Tt = r.div`
   margin-bottom: 10px;
 
   .ant-tabs {
@@ -370,9 +371,9 @@ const Ce = r.div`
   }
   .ant-tabs-tab {
     .ant-tabs-tab-btn {
-      ${B};
+      ${A};
       .count {
-        ${N};
+        ${O};
       }
       .passive-tab {
         display: flex;
@@ -384,9 +385,9 @@ const Ce = r.div`
   }
   .ant-tabs-tab-active {
     .ant-tabs-tab-btn {
-      ${B};
+      ${A};
       .count {
-        ${N};
+        ${O};
       }
       .active-tab {
         display: flex;
@@ -398,17 +399,17 @@ const Ce = r.div`
   .ant-tabs-ink-bar {
     background: #feba30;
   }
-`, d = r.td`
+`, c = r.td`
   padding: 12px 8px;
   text-align: left;
   max-width: ${({ width: x }) => x || "auto"};
-`, Le = r.div`
+`, kt = r.div`
   height: 30vh;
   pointer-events: initial;
   @media (max-width: 1024px) {
     height: 40vh;
   }
-`, ke = r.div`
+`, Lt = r.div`
   height: 100%;
   overflow-x: auto;
   scrollbar-width: thin;
@@ -436,30 +437,30 @@ const Ce = r.div`
     gap: 5px;
     align-items: center;
   }
-`, u = r.tr`
+`, f = r.tr`
   border-bottom: 1px solid rgb(215, 214, 213);
   font-weight: 300;
-`, _e = r.tbody`
+`, _t = r.tbody`
   border-bottom-right-radius: 10px;
   background: rgb(255, 255, 255);
   height: 96%;
   overflow: auto;
   width: 100%;
-`, Ie = r.thead`
+`, zt = r.thead`
   position: sticky;
   top: 0px;
   z-index: 1;
   background: #f8f8f8;
   white-space: nowrap;
-`, De = r.table`
+`, It = r.table`
   width: 100%;
   background: rgb(255, 255, 255);
   box-shadow: 0px 4px 30px 0px #2e2d740d;
   border-collapse: collapse;
-`, ze = r.div``, w = r.div`
+`, Dt = r.div``, w = r.div`
   display: inline-block;
   margin: 7px;
-`, F = r.div`
+`, B = r.div`
   gap: 10px;
   cursor: pointer;
   display: flex;
@@ -473,7 +474,7 @@ const Ce = r.div`
       opacity: 0;
     }
   }
-`, $e = r.div`
+`, jt = r.div`
   .col {
     display: flex;
     align-items: center;
@@ -511,6 +512,113 @@ const Ce = r.div`
     justify-content: flex-end;
   }
 
+  @media screen and (max-width: 768px) {
+    .mobile-table-container {
+      height: auto;
+    }
+    .mobile-table-wrapper {
+      height: auto;
+      max-height: 60vh;
+      overflow-x: hidden;
+      overflow-y: auto;
+      border-radius: 0;
+    }
+    .mobile-table-wrapper > div,
+    .mobile-table-wrapper > div > div:first-child {
+      position: static !important;
+      height: auto !important;
+      overflow: visible !important;
+      margin: 0 !important;
+      inset: auto !important;
+    }
+
+    table,
+    thead,
+    tbody {
+      display: block;
+      width: 100%;
+      min-width: 0;
+      height: auto;
+      box-shadow: none;
+    }
+    table {
+      background: transparent;
+    }
+
+    thead {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      padding: 0;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    tbody tr.data-row {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      margin-bottom: 12px;
+      padding: 10px 12px;
+      border: 1px solid #e3e3e3;
+      border-radius: 12px;
+      background: #fff;
+      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    }
+    tbody tr.data-row td {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 12px;
+      width: 100%;
+      max-width: none;
+      box-sizing: border-box;
+      padding: 8px 0;
+      border: 0;
+      border-bottom: 1px solid #f0f2f2;
+      text-align: right;
+      word-break: break-word;
+    }
+    tbody tr.data-row td:last-child {
+      border-bottom: 0;
+      justify-content: flex-end;
+    }
+    tbody tr.data-row td:empty {
+      display: none;
+    }
+    tbody tr.data-row td[data-label]::before {
+      content: attr(data-label);
+      flex: 0 0 38%;
+      text-align: left;
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+      color: #6a7378;
+    }
+    tbody tr.data-row td .cell-value {
+      flex: 1;
+      min-width: 0;
+    }
+    tbody tr.data-row td .call-recording-actions {
+      justify-content: flex-end;
+    }
+    tbody tr.data-row td:last-child:has(.call-recording-actions:empty),
+    tbody tr.data-row td:last-child:has(.call-recording-actions > div:empty) {
+      display: none;
+    }
+
+    /* loading / empty rows */
+    tbody > tr:not(.data-row),
+    tbody > tr:not(.data-row) td {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+    }
+  }
+
   .TableHeadData,
   .TableData {
     padding: 10px 5px;
@@ -528,6 +636,6 @@ const Ce = r.div`
   }
 `;
 export {
-  He as default
+  Kt as default
 };
 //# sourceMappingURL=index.js.map