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

package/dist/components/client-portal/return-confirm/ReturnConfirmedTable.js

@@ -1,42 +1,43 @@
-import { jsx as e, Fragment as P, jsxs as n } from "react/jsx-runtime";
-import { Skeleton as M, Empty as x } from "antd";
-import { useRef as k, useState as S, useMemo as W, useEffect as U } from "react";
-import { NavLink as Y } from "react-router-dom";
-import { Checkbox as y, displayValueOrNA as o } from "@bjsdistribution/dms-component-library";
-import { usePrintOptionTOggle as j, useLoading as H } from "../../order-daily-overview/store/store.js";
-import { useReturnConfirmedOrderData as V, useClientPortal as $, useSelectedClientAfterOrders as B } from "../../store.js";
-import { useOrderId as G } from "../../order-view/store.js";
-import q from "../../../common/SortIcon.js";
-import _ from "../../../common/CaretDownFilledIcon.js";
-import { StyledTableWrapper as z, StyledTable as J, EmptyDataContainer as K, CustomDrop as Q } from "../../order-daily-overview/return-order-table/return-orders-filters/returnstyles.js";
-import X from "../../../assets/icons/PrinterIcon.js";
-import Z from "../../../assets/icons/DownIcon.js";
-import ee from "../../order-daily-overview/shared/elements/PrintDropDown.js";
-import { formatDate as te } from "../../order-daily-overview/shared/utlis.js";
-import re from "dayjs";
-import { WEIGHT_UNIT as w, VOLUME_UNIT as ne } from "../../../common/utils.js";
-const _e = () => {
-  const I = k(null), m = k(null), [p, g] = j(), [, N] = G(), [h] = V(), [D] = $(), [F] = H(), [O, v] = S(!1), [
-    A,
-    f
-  ] = B(), [l, T] = S(null), i = (t) => {
-    T((r) => r?.key === t && r.direction === "asc" ? { key: t, direction: "desc" } : { key: t, direction: "asc" });
-  }, C = W(() => {
-    if (!h || !l) return h;
-    const { key: t, direction: r } = l;
-    return [...h].sort((d, s) => {
-      const c = d[t], u = s[t];
-      return typeof c == "number" && typeof u == "number" ? r === "asc" ? c - u : u - c : typeof c == "string" && typeof u == "string" ? r === "asc" ? c.localeCompare(u) : u.localeCompare(c) : 0;
+import { jsx as e, Fragment as j, jsxs as n } from "react/jsx-runtime";
+import { Select as $, Skeleton as B, Empty as U } from "antd";
+import { useRef as I, useState as R, useMemo as Y, useEffect as H } from "react";
+import D from "styled-components";
+import { NavLink as V } from "react-router-dom";
+import { Checkbox as g, displayValueOrNA as l } from "@bjsdistribution/dms-component-library";
+import { usePrintOptionTOggle as G, useLoading as q } from "../../order-daily-overview/store/store.js";
+import { useReturnConfirmedOrderData as J, useClientPortal as K, useSelectedClientAfterOrders as Q } from "../../store.js";
+import { useOrderId as X } from "../../order-view/store.js";
+import Z from "../../../common/SortIcon.js";
+import O from "../../../common/CaretDownFilledIcon.js";
+import { StyledTableWrapper as ee, StyledTable as te, EmptyDataContainer as ne, CustomDrop as re } from "../../order-daily-overview/return-order-table/return-orders-filters/returnstyles.js";
+import ae from "../../../assets/icons/PrinterIcon.js";
+import oe from "../../../assets/icons/DownIcon.js";
+import le from "../../order-daily-overview/shared/elements/PrintDropDown.js";
+import { formatDate as ie } from "../../order-daily-overview/shared/utlis.js";
+import de from "dayjs";
+import { VOLUME_UNIT as m, WEIGHT_UNIT as x } from "../../../common/utils.js";
+const Re = () => {
+  const F = I(null), h = I(null), [y, C] = G(), [, A] = X(), [u] = J(), [L] = K(), [w] = q(), [k, P] = R(!1), [
+    z,
+    b
+  ] = Q(), [o, v] = R(null), d = (t) => {
+    v((r) => r?.key === t && r.direction === "asc" ? { key: t, direction: "desc" } : { key: t, direction: "asc" });
+  }, f = Y(() => {
+    if (!u || !o) return u;
+    const { key: t, direction: r } = o;
+    return [...u].sort((s, p) => {
+      const a = s[t], i = p[t], N = a == null || a === "", T = i == null || i === "";
+      return N && T ? 0 : N ? 1 : T ? -1 : typeof a == "number" && typeof i == "number" ? r === "asc" ? a - i : i - a : typeof a == "string" && typeof i == "string" ? r === "asc" ? a.localeCompare(i) : i.localeCompare(a) : 0;
     });
-  }, [h, l]), a = (t) => !l || l.key !== t ? /* @__PURE__ */ e(q, {}) : l.direction === "asc" ? /* @__PURE__ */ e(_, {}) : /* @__PURE__ */ e(_, { style: { transform: "rotate(180deg)" } }), R = (t) => {
-    g((r) => r === t ? null : t);
+  }, [u, o]), c = (t) => !o || o.key !== t ? /* @__PURE__ */ e(Z, {}) : o.direction === "asc" ? /* @__PURE__ */ e(O, {}) : /* @__PURE__ */ e(O, { style: { transform: "rotate(180deg)" } }), E = (t) => {
+    C((r) => r === t ? null : t);
   };
-  U(() => (document.addEventListener("mousedown", b), () => {
-    document.removeEventListener("mousedown", b);
+  H(() => (document.addEventListener("mousedown", S), () => {
+    document.removeEventListener("mousedown", S);
   }), []);
-  const b = (t) => {
-    m.current && !m.current.contains(t.target) && g(null);
-  }, E = (t) => {
+  const S = (t) => {
+    h.current && !h.current.contains(t.target) && C(null);
+  }, M = (t) => {
     switch (t) {
       case "Cancelled":
       case "Failed":
@@ -61,166 +62,425 @@ const _e = () => {
       default:
         return { color: "#000", background: "#fff" };
     }
-  }, L = (t) => {
-    f(
-      (r) => r.includes(t) ? r.filter((d) => d !== t) : [...r, t]
+  }, W = (t) => {
+    b(
+      (r) => r.includes(t) ? r.filter((s) => s !== t) : [...r, t]
+    );
+  }, _ = (t) => {
+    const r = t.target.checked;
+    P(r), b(
+      r ? u?.map((s) => s?.id) || [] : []
     );
   };
-  return /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(z, { className: "fortables", children: /* @__PURE__ */ n(J, { children: [
-    /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ n("tr", { children: [
-      /* @__PURE__ */ e("th", { className: "emailInvoiceCheckbox", children: /* @__PURE__ */ e(
-        y,
-        {
-          checked: O,
-          onChange: (t) => {
-            const r = t.target.checked;
-            v(r), f(
-              r ? h?.map((d) => d?.id) || [] : []
-            );
+  return /* @__PURE__ */ e(j, { children: /* @__PURE__ */ n(se, { className: "fortables cpTable", children: [
+    !w && f?.length > 0 && /* @__PURE__ */ n(ce, { className: "cpMobileBar", children: [
+      /* @__PURE__ */ n("label", { className: "selectAll", children: [
+        /* @__PURE__ */ e(
+          g,
+          {
+            checked: k,
+            onChange: _
           }
-        }
-      ) }),
-      /* @__PURE__ */ e("th", { onClick: () => i("created_at"), children: /* @__PURE__ */ n("div", { className: "sortIconClass", children: [
-        "Created ",
-        a("created_at")
-      ] }) }),
-      /* @__PURE__ */ e("th", { onClick: () => i("return_location_name"), children: /* @__PURE__ */ n("div", { className: "sortIconClass", children: [
-        "Return Location ",
-        a("return_location_name")
-      ] }) }),
-      /* @__PURE__ */ e("th", { onClick: () => i("recipient_name"), children: /* @__PURE__ */ n("div", { className: "sortIconClass", children: [
-        "Recipient ",
-        a("recipient_name")
-      ] }) }),
-      /* @__PURE__ */ e("th", { onClick: () => i("recipient_reference"), children: /* @__PURE__ */ n("div", { className: "sortIconClass", children: [
-        "Recipient Reference ",
-        a("recipient_reference")
-      ] }) }),
-      /* @__PURE__ */ e("th", { children: "Sender" }),
-      /* @__PURE__ */ e("th", { children: "Consignment" }),
-      /* @__PURE__ */ e("th", { children: "Return Order No" }),
-      /* @__PURE__ */ e("th", { children: " Total Parts" }),
-      /* @__PURE__ */ e("th", { onClick: () => i("weight"), children: /* @__PURE__ */ n("div", { className: "sortIconClass", children: [
-        "Total Weight (",
-        w,
-        ") ",
-        a("weight")
-      ] }) }),
-      /* @__PURE__ */ e("th", { onClick: () => i("cube"), children: /* @__PURE__ */ n("div", { className: "sortIconClass", children: [
-        "Total ",
-        ne,
-        " ",
-        a("cube")
-      ] }) }),
-      /* @__PURE__ */ e("th", { style: { textAlign: "center" }, children: "Status" }),
-      /* @__PURE__ */ e("th", { className: "emailInvoiceShare", children: "Labels" })
-    ] }) }),
-    /* @__PURE__ */ e("tbody", { children: F ? /* @__PURE__ */ n("tr", { children: [
-      /* @__PURE__ */ e("td", { colSpan: 16, children: /* @__PURE__ */ e(M, { active: !0 }) }),
-      /* @__PURE__ */ e("td", { colSpan: 16 })
-    ] }) : C?.length === 0 ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: 16, children: /* @__PURE__ */ e(K, { children: /* @__PURE__ */ e(x, {}) }) }) }) : C?.map((t, r) => {
-      const s = {
-        cancelled: "Cancelled",
-        "on hold": "On Hold",
-        subcontracted: "Sub-Contracted",
-        SC: "Sub-Contracted",
-        "awaiting route": "Awaiting route",
-        "awaiting confirmation": "Awaiting Confirmation",
-        complete: "Completed",
-        outstanding: "Outstanding",
-        routed: "Routed",
-        failed: "Failed",
-        confirmed: "Confirmed"
-      }[t?.status_value] || "Unknown", c = E(s);
-      return /* @__PURE__ */ n("tr", { children: [
-        /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e(
-          y,
+        ),
+        "Select all"
+      ] }),
+      /* @__PURE__ */ n("div", { className: "sortControls", children: [
+        /* @__PURE__ */ e(
+          $,
           {
-            checked: A.includes(t?.id),
-            onChange: () => L(t?.id)
+            "aria-label": "Sort by",
+            placeholder: "Sort by",
+            value: o?.key,
+            allowClear: !0,
+            popupMatchSelectWidth: !1,
+            onChange: (t) => v(t ? { key: t, direction: "asc" } : null),
+            options: [
+              { value: "created_at", label: "Created" },
+              { value: "return_location_name", label: "Return Location" },
+              { value: "recipient_name", label: "Recipient" },
+              { value: "recipient_reference", label: "Recipient Reference" },
+              { value: "weight", label: "Total Weight" },
+              { value: "cube", label: `Total ${m}` }
+            ]
           }
-        ) }),
-        /* @__PURE__ */ e("td", { children: te(new Date(t?.created_at)) }),
-        /* @__PURE__ */ e("td", { children: o(t?.return_location_name) }),
-        /* @__PURE__ */ e("td", { onClick: () => N(t.id), children: /* @__PURE__ */ n("ul", { style: { listStyleType: "none", padding: 0 }, children: [
-          /* @__PURE__ */ e(
-            "li",
-            {
-              style: {
-                color: "#0099ff",
-                fontWeight: 600,
-                paddingLeft: 0
-              },
-              children: /* @__PURE__ */ e(Y, { to: `/return/view/${t.id}`, children: o(t?.recipient_name) })
-            }
-          ),
-          /* @__PURE__ */ e("li", { style: { color: "#888075" }, children: o(t?.postcode) })
-        ] }) }),
-        /* @__PURE__ */ e("td", { children: o(t?.recipient_reference) }),
-        /* @__PURE__ */ e("td", { children: o(t?.customer_name) }),
-        /* @__PURE__ */ n("td", { children: [
-          o(t?.consignment),
-          !D && Number(t?.failure_count) > 0 && /* @__PURE__ */ n("span", { style: { color: "inherit", fontWeight: 700, marginLeft: 2 }, title: "Delivery Failure Count", children: [
-            "- [",
-            t?.failure_count,
-            "]"
-          ] })
-        ] }),
-        /* @__PURE__ */ e("td", { children: o(t?.order_number) }),
-        /* @__PURE__ */ e("td", { children: o(t?.total_products) }),
-        /* @__PURE__ */ n("td", { children: [
-          o(t?.weight),
-          " ",
-          t?.weight && t?.weight > 0 ? w : ""
-        ] }),
-        /* @__PURE__ */ e("td", { children: o(t?.cube) }),
-        /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e(
-          "ul",
+        ),
+        /* @__PURE__ */ e(
+          "button",
           {
-            className: "statuscontainer",
-            style: {
-              listStyleType: "none",
-              background: c.background
-            },
-            children: /* @__PURE__ */ n(
-              "li",
-              {
-                className: "statustext",
-                style: { color: c.color },
-                children: [
-                  s,
-                  (s === "Completed" || s === "Failed") && t?.action_date ? ` - ${re(t?.action_date).format(
-                    "DD/MM/YYYY"
-                  )}` : ""
-                ]
-              }
-            )
+            type: "button",
+            "aria-label": "Toggle sort direction",
+            disabled: !o,
+            onClick: () => o && d(o.key),
+            children: o?.direction === "desc" ? "↓" : "↑"
           }
-        ) }),
-        /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("ul", { className: "actionbox", children: /* @__PURE__ */ e(
-          Q,
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ n(te, { children: [
+      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ n("tr", { children: [
+        /* @__PURE__ */ e("th", { className: "emailInvoiceCheckbox", children: /* @__PURE__ */ e(
+          g,
           {
-            ref: I,
-            className: p === r ? "active" : "",
-            children: /* @__PURE__ */ n(
+            checked: k,
+            onChange: _
+          }
+        ) }),
+        /* @__PURE__ */ e("th", { onClick: () => d("created_at"), children: /* @__PURE__ */ n("div", { className: "sortIconClass", children: [
+          "Created ",
+          c("created_at")
+        ] }) }),
+        /* @__PURE__ */ e("th", { onClick: () => d("return_location_name"), children: /* @__PURE__ */ n("div", { className: "sortIconClass", children: [
+          "Return Location ",
+          c("return_location_name")
+        ] }) }),
+        /* @__PURE__ */ e("th", { onClick: () => d("recipient_name"), children: /* @__PURE__ */ n("div", { className: "sortIconClass", children: [
+          "Recipient ",
+          c("recipient_name")
+        ] }) }),
+        /* @__PURE__ */ e("th", { onClick: () => d("recipient_reference"), children: /* @__PURE__ */ n("div", { className: "sortIconClass", children: [
+          "Recipient Reference ",
+          c("recipient_reference")
+        ] }) }),
+        /* @__PURE__ */ e("th", { children: "Sender" }),
+        /* @__PURE__ */ e("th", { children: "Consignment" }),
+        /* @__PURE__ */ e("th", { children: "Return Order No" }),
+        /* @__PURE__ */ e("th", { children: " Total Parts" }),
+        /* @__PURE__ */ e("th", { onClick: () => d("weight"), children: /* @__PURE__ */ n("div", { className: "sortIconClass", children: [
+          "Total Weight (",
+          x,
+          ") ",
+          c("weight")
+        ] }) }),
+        /* @__PURE__ */ e("th", { onClick: () => d("cube"), children: /* @__PURE__ */ n("div", { className: "sortIconClass", children: [
+          "Total ",
+          m,
+          " ",
+          c("cube")
+        ] }) }),
+        /* @__PURE__ */ e("th", { style: { textAlign: "center" }, children: "Status" }),
+        /* @__PURE__ */ e("th", { className: "emailInvoiceShare", children: "Labels" })
+      ] }) }),
+      /* @__PURE__ */ e("tbody", { children: w ? /* @__PURE__ */ n("tr", { children: [
+        /* @__PURE__ */ e("td", { colSpan: 16, children: /* @__PURE__ */ e(B, { active: !0 }) }),
+        /* @__PURE__ */ e("td", { colSpan: 16 })
+      ] }) : f?.length === 0 ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: 16, children: /* @__PURE__ */ e(ne, { children: /* @__PURE__ */ e(U, {}) }) }) }) : f?.map((t, r) => {
+        const p = {
+          cancelled: "Cancelled",
+          "on hold": "On Hold",
+          subcontracted: "Sub-Contracted",
+          SC: "Sub-Contracted",
+          "awaiting route": "Awaiting route",
+          "awaiting confirmation": "Awaiting Confirmation",
+          complete: "Completed",
+          outstanding: "Outstanding",
+          routed: "Routed",
+          failed: "Failed",
+          confirmed: "Confirmed"
+        }[t?.status_value] || "Unknown", a = M(p);
+        return /* @__PURE__ */ n("tr", { children: [
+          /* @__PURE__ */ e("td", { className: "cpSelect", children: /* @__PURE__ */ e(
+            g,
+            {
+              checked: z.includes(t?.id),
+              onChange: () => W(t?.id)
+            }
+          ) }),
+          /* @__PURE__ */ e("td", { "data-label": "Created", children: ie(new Date(t?.created_at)) }),
+          /* @__PURE__ */ e("td", { "data-label": "Return Location", children: /* @__PURE__ */ e(
+            "span",
+            {
+              className: "cpClip",
+              title: String(t?.return_location_name ?? ""),
+              children: l(t?.return_location_name)
+            }
+          ) }),
+          /* @__PURE__ */ e("td", { className: "cpTitle", onClick: () => A(t.id), children: /* @__PURE__ */ n("ul", { style: { listStyleType: "none", padding: 0 }, children: [
+            /* @__PURE__ */ e(
               "li",
               {
-                className: "shareIconContainer",
-                onClick: () => R(r),
-                children: [
-                  /* @__PURE__ */ e(X, {}),
-                  /* @__PURE__ */ e(Z, {}),
-                  p === r && /* @__PURE__ */ e("div", { ref: m, children: /* @__PURE__ */ e(ee, { legacyProductId: t }) })
-                ]
+                style: {
+                  color: "#0099ff",
+                  fontWeight: 600,
+                  paddingLeft: 0
+                },
+                children: /* @__PURE__ */ e(V, { to: `/return/view/${t.id}`, children: l(t?.recipient_name) })
               }
-            )
-          }
-        ) }) })
-      ] }, t.id);
-    }) })
-  ] }) }) });
-};
+            ),
+            /* @__PURE__ */ e("li", { style: { color: "#888075" }, children: l(t?.postcode) })
+          ] }) }),
+          /* @__PURE__ */ e("td", { "data-label": "Recipient Reference", children: /* @__PURE__ */ e(
+            "span",
+            {
+              className: "cpClip",
+              title: String(t?.recipient_reference ?? ""),
+              children: l(t?.recipient_reference)
+            }
+          ) }),
+          /* @__PURE__ */ e("td", { "data-label": "Sender", children: /* @__PURE__ */ e(
+            "span",
+            {
+              className: "cpClip",
+              title: String(t?.customer_name ?? ""),
+              children: l(t?.customer_name)
+            }
+          ) }),
+          /* @__PURE__ */ e("td", { "data-label": "Consignment", children: /* @__PURE__ */ n("span", { children: [
+            l(t?.consignment),
+            !L && Number(t?.failure_count) > 0 && /* @__PURE__ */ n("span", { style: { color: "inherit", fontWeight: 700, marginLeft: 2 }, title: "Delivery Failure Count", children: [
+              "- [",
+              t?.failure_count,
+              "]"
+            ] })
+          ] }) }),
+          /* @__PURE__ */ e("td", { "data-label": "Return Order No", children: l(t?.order_number) }),
+          /* @__PURE__ */ e("td", { "data-label": "Total Parts", children: l(t?.total_products) }),
+          /* @__PURE__ */ n("td", { "data-label": `Total Weight (${x})`, children: [
+            l(t?.weight),
+            " ",
+            t?.weight && t?.weight > 0 ? x : ""
+          ] }),
+          /* @__PURE__ */ e("td", { "data-label": `Total ${m}`, children: l(t?.cube) }),
+          /* @__PURE__ */ e("td", { className: "cpStatus", "data-label": "Status", children: /* @__PURE__ */ e(
+            "ul",
+            {
+              className: "statuscontainer",
+              style: {
+                listStyleType: "none",
+                background: a.background
+              },
+              children: /* @__PURE__ */ n(
+                "li",
+                {
+                  className: "statustext",
+                  style: { color: a.color },
+                  children: [
+                    p,
+                    (p === "Completed" || p === "Failed") && t?.action_date ? ` - ${de(t?.action_date).format(
+                      "DD/MM/YYYY"
+                    )}` : ""
+                  ]
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ e("td", { className: "cpLabels", "data-label": "Labels", children: /* @__PURE__ */ e("ul", { className: "actionbox", children: /* @__PURE__ */ e(
+            re,
+            {
+              ref: F,
+              className: y === r ? "active" : "",
+              children: /* @__PURE__ */ n(
+                "li",
+                {
+                  className: "shareIconContainer",
+                  onClick: () => E(r),
+                  children: [
+                    /* @__PURE__ */ e(ae, {}),
+                    /* @__PURE__ */ e(oe, {}),
+                    y === r && /* @__PURE__ */ e("div", { ref: h, children: /* @__PURE__ */ e(le, { legacyProductId: t }) })
+                  ]
+                }
+              )
+            }
+          ) }) })
+        ] }, t.id);
+      }) })
+    ] })
+  ] }) });
+}, ce = D.div`
+  display: none;
+
+  @media (max-width: 767px) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    flex-wrap: wrap;
+    padding: 4px 4px 10px;
+
+    .selectAll {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 12px;
+      font-weight: 600;
+      color: #3a3630;
+      cursor: pointer;
+    }
+    .sortControls {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      min-width: 0;
+    }
+    /* stock antd Select (same look as the Row on Page dropdown) */
+    .ant-select {
+      width: 150px;
+    }
+    button {
+      width: 32px;
+      height: 32px;
+      border: 1px solid #e0e2e7;
+      border-radius: 50%;
+      background: #fff;
+      color: #3a3630;
+      font-size: 14px;
+      cursor: pointer;
+      &:disabled {
+        opacity: 0.4;
+        cursor: default;
+      }
+    }
+  }
+`, se = D(ee)`
+  /* Tablet / small laptop: a thin, single-line-per-row table. Long text is
+     clipped with an ellipsis (full text is in the title tooltip) instead of
+     wrapping onto 3 lines. */
+  @media (min-width: 768px) and (max-width: 1280px) {
+    /* whatever still does not fit scrolls sideways inside the card */
+    overflow-x: auto;
+
+    table {
+      border-spacing: 0 6px;
+    }
+    thead tr th {
+      padding: 5px 6px;
+      font-size: 11px;
+      line-height: 1.15;
+    }
+    tbody tr td {
+      padding: 4px 6px;
+      font-size: 11px;
+      line-height: 1.25;
+      white-space: nowrap;
+    }
+    .cpClip {
+      display: inline-block;
+      max-width: 84px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      vertical-align: bottom;
+    }
+    tbody tr td.cpTitle li {
+      max-width: 112px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    tbody tr td.cpTitle ul > li > a {
+      word-break: normal;
+    }
+    tbody tr td .statuscontainer {
+      padding: 3px 8px;
+      flex: 0 0 auto;
+    }
+    tbody tr td .statustext {
+      font-size: 10px;
+      white-space: nowrap;
+    }
+    tbody tr td .shareIconContainer {
+      padding: 1px 6px;
+    }
+  }
+
+  @media (max-width: 767px) {
+    max-height: none;
+    overflow: visible;
+    padding-top: 0;
+
+    table,
+    tbody {
+      display: block;
+      width: 100%;
+    }
+    thead {
+      display: none;
+    }
+
+    tbody tr {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      margin-bottom: 12px;
+      padding: 10px 12px 6px;
+      border: 1px solid rgba(0, 0, 0, 0.08);
+      border-radius: 16px;
+      background: #fff;
+    }
+    tbody tr:nth-child(even) {
+      background: #f6fbff;
+    }
+
+    tbody tr td {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 6px 0;
+      border: none !important;
+      border-radius: 0 !important;
+      background: transparent !important;
+      font-size: 12px;
+      text-align: right;
+    }
+    tbody tr td[data-label]::before {
+      content: attr(data-label);
+      flex: 0 0 auto;
+      color: #8e8a85;
+      font-size: 11px;
+      font-weight: 600;
+      text-align: left;
+    }
+    tbody tr td[data-label] > span {
+      min-width: 0;
+      overflow-wrap: anywhere;
+    }
+
+    /* checkbox sits in the card corner */
+    tbody tr td.cpSelect {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      width: auto;
+      padding: 0;
+      z-index: 1;
+    }
+    /* recipient = card title */
+    tbody tr td.cpTitle {
+      order: -1;
+      display: block;
+      padding: 0 32px 8px 0;
+      margin-bottom: 4px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
+      text-align: left;
+      font-size: 13px;
+    }
+    tbody tr td.cpTitle ul {
+      margin: 0;
+    }
+    tbody tr td.cpTitle ul > li > a {
+      word-break: normal;
+      overflow-wrap: anywhere;
+    }
+    tbody tr td.cpStatus .statuscontainer {
+      padding: 4px 14px;
+      flex: 0 0 auto;
+    }
+    tbody tr td.cpLabels .actionbox {
+      margin: 0;
+    }
+
+    /* loading skeleton + empty state rows have no labels */
+    tbody tr:has(td[colspan]) {
+      padding: 0;
+      border: none;
+      background: transparent;
+    }
+    tbody tr td[colspan] {
+      display: block;
+      text-align: center;
+    }
+  }
+`;
 export {
-  _e as default
+  Re as default
 };
 //# sourceMappingURL=ReturnConfirmedTable.js.map