@zeniai/web-components 3.17.8 → 3.17.9

package/dist/EntitySummarySection-DjF1xDYR.js

@@ -0,0 +1,530 @@
+import { j as t, A as V, V as I } from "./vendor-.pnpm-B2klaOGU.js";
+import { useCallback as T, useRef as K, forwardRef as U, useMemo as B } from "react";
+import o from "@emotion/styled";
+import { R as i, a as P, u as b, F as Y, aa as F, S as d, ab as G, D as n, gg as A, fq as O, a2 as j, C as D, o as L, aL as S, H as q, E as J, w as Q } from "./index-usWkcKCS.js";
+import { c as X } from "./agingReportHelper-ovKP-qSS.js";
+const u = P.getLocalizedStrings().reports.aging.agingDetail.header, m = [
+  {
+    key: "date",
+    value: u.date,
+    sortOrder: "ascending",
+    width: new i(212, 212)
+  },
+  {
+    key: "invoiceNumber",
+    value: u.invoiceNumber,
+    sortOrder: "ascending",
+    width: new i(188, 188)
+  },
+  {
+    key: "dueDate",
+    value: u.dueDate,
+    sortOrder: "ascending",
+    width: new i(188, 188)
+  },
+  {
+    key: "daysPastDue",
+    value: u.daysPastDue,
+    sortOrder: "ascending",
+    width: new i(188, 188)
+  },
+  {
+    key: "amount",
+    value: u.amount,
+    sortOrder: "ascending",
+    width: new i(188, 188)
+  },
+  {
+    key: "balance",
+    value: u.balance,
+    sortOrder: "ascending",
+    width: new i(120, 120)
+  }
+], M = {
+  headerLastColumnTopPadding: new i(n[0], n[4]),
+  headerLastColumnRightPadding: new i(n[3], n[8]),
+  headerLastColumnBottomPadding: new i(n[0], n[4]),
+  headerLastColumnLeftPadding: new i(n[3], n[8]),
+  containerMarginLeft: new i(n[0], n[8]),
+  containerMarginRight: new i(n[0], n[8]),
+  headerHeight: new i(45, 58)
+}, Z = o.div`
+  top: ${d.sp0};
+  left: ${d.sp0};
+  min-height: ${(e) => M.headerHeight.valuePx(e.windowSize)};
+  max-height: ${(e) => M.headerHeight.valuePx(e.windowSize)};
+  width: fit-content;
+  min-width: 100%;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  background-color: ${(e) => e.theme.colors.grey4};
+  position: sticky;
+`, ee = o.div`
+  color: ${(e) => e.sortDataValue === e.actualDataValue ? e.theme.colors.primary : e.theme.colors.grey1};
+
+  width: ${(e) => e.windowSize !== "extra-large" ? e.wrapperWidth.valuePx(e.windowSize) : e.wrapperWidth.valuePercentage(e.windowSize)};
+  max-width: ${(e) => e.windowSize !== "extra-large" ? e.wrapperWidth.valuePx(e.windowSize) : e.wrapperWidth.valuePercentage(e.windowSize)};
+  padding-left: ${d.sp0};
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  left: ${d.sp0};
+  justify-content: flex-start;
+  position: static;
+  z-index: 0;
+  box-sizing: border-box;
+`, te = o(G)`
+  width: 12px;
+  height: 12px;
+`, ne = o.div`
+  display: flex;
+  align-items: center;
+  transform: ${(e) => e.sortConfig.sortOrder === "descending" ? "rotate(180deg)" : "rotate(0deg)"};
+  ${(e) => e.sortConfig.sortOrder === "ascending" ? "padding-top: 2px" : "padding-bottom: 2px"};
+`, ie = o.div`
+  display: ${(e) => e.isVisible ? "flex" : "none"};
+  align-items: center;
+  padding-top: 2px;
+  cursor: pointer;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, oe = o.div`
+  display: flex;
+  cursor: pointer;
+  gap: 6px;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`;
+function re({
+  sortConfig: e,
+  onColumnSortConfigChanged: l
+}) {
+  const c = b(), a = T(
+    (r, s) => {
+      let g = s;
+      e.sortKey === r && (g = e.sortOrder === "ascending" ? "descending" : "ascending"), l(r, g);
+    },
+    [l, e]
+  );
+  return /* @__PURE__ */ t.jsx(Z, { windowSize: c, children: m.map((r) => /* @__PURE__ */ t.jsxs(
+    ee,
+    {
+      sortDataValue: e.sortKey,
+      actualDataValue: r.key,
+      wrapperWidth: r.width,
+      windowSize: c,
+      children: [
+        /* @__PURE__ */ t.jsxs(
+          oe,
+          {
+            onClick: () => a(r.key, r.sortOrder),
+            children: [
+              /* @__PURE__ */ t.jsx(Y, { children: r.value }),
+              /* @__PURE__ */ t.jsx(ne, { sortConfig: e, children: /* @__PURE__ */ t.jsx(F, { width: 12, height: 12 }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          ie,
+          {
+            isVisible: e.sortKey === r.key && e.sortKey !== "date",
+            children: /* @__PURE__ */ t.jsx(
+              te,
+              {
+                onClick: () => l("date", "ascending")
+              }
+            )
+          }
+        )
+      ]
+    },
+    r.key
+  )) });
+}
+const $ = {
+  containerPaddingLeft: new i(n[3], n[4]),
+  containerPaddingRight: new i(n[3], n[4]),
+  containerPaddingTop: new i(n[3], n[3]),
+  containerPaddingBottom: new i(n[3], n[3]),
+  containerMarginLeft: new i(n[4], n[8]),
+  nameLogoWidth: new i(n[4], n[4]),
+  nameLogoHeight: new i(n[4], n[4]),
+  nameWidth: new i(150, 150)
+}, ae = o.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${d.sp2};
+`, se = o.div`
+  display: flex;
+  background-color: ${(e) => e.theme.colors.grey5};
+  box-sizing: border-box;
+  align-items: center;
+  padding-top: ${(e) => $.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => $.containerPaddingBottom.valuePx(e.windowSize)};
+  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
+  box-shadow: ${(e) => e.theme.mode === "dark" ? `${D.dropShadowNormalDark} ${d.sp0} 2px ${d.sp1}` : `${d.sp0} 2px ${d.sp1} ${D.dropShadowNormalLight}`};
+  border-radius: ${d.sp2};
+  cursor: pointer;
+  &:hover {
+    border-color: ${(e) => e.theme.colors.primary};
+    div {
+      color: ${(e) => e.theme.colors.primary};
+    }
+    .entity-icon {
+      color: ${(e) => e.theme.colors.grey5};
+    }
+  }
+`, w = o.div`
+  display: flex;
+  align-items: center;
+  width: ${(e) => e.windowSize !== "extra-large" ? e.itemWidth.valuePx(e.windowSize) : e.itemWidth.valuePercentage(e.windowSize)};
+  :last-of-type {
+    padding-right: 0;
+  }
+`, de = o(Y)`
+  color: ${(e) => e.theme.colors.grey1};
+`, y = o(L)`
+  color: ${(e) => e.theme.colors.hero};
+`, le = o(L)`
+  color: ${(e) => e.theme.colors.hero};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: ${(e) => $.nameWidth.valuePx(e.windowSize)};
+`, ce = o.div`
+  display: flex;
+  padding-left: ${d.sp3};
+  align-items: center;
+  justify-content: center;
+  column-gap: ${d.sp2};
+`;
+function ge({
+  invoice: e,
+  entityLogo: l,
+  onTransactionClick: c
+}) {
+  const a = b(), { common: r, dateFormat: s } = P.getLocalizedStrings();
+  return /* @__PURE__ */ t.jsxs(ae, { windowSize: a, children: [
+    /* @__PURE__ */ t.jsx(de, { children: e.date.format(s.visual.MMMDCommaYYYYformat) }),
+    /* @__PURE__ */ t.jsxs(
+      se,
+      {
+        onClick: () => {
+          c(e);
+        },
+        windowSize: a,
+        children: [
+          /* @__PURE__ */ t.jsx(
+            w,
+            {
+              windowSize: a,
+              itemWidth: m[0].width,
+              children: /* @__PURE__ */ t.jsxs(ce, { children: [
+                l != null ? /* @__PURE__ */ t.jsx(
+                  A,
+                  {
+                    photoUrl: l.toString(),
+                    styles: {
+                      width: $.nameLogoWidth.valuePx(a),
+                      height: $.nameLogoHeight.valuePx(a)
+                    }
+                  }
+                ) : /* @__PURE__ */ t.jsx(O, { name: e.entity.name, size: d.sp4 }),
+                /* @__PURE__ */ t.jsx(le, { windowSize: a, title: e.entity.name, children: e.entity.name })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            w,
+            {
+              windowSize: a,
+              itemWidth: m[1].width,
+              children: /* @__PURE__ */ t.jsx(y, { children: e.invoiceNumber ?? r.strings.hyphen })
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            w,
+            {
+              windowSize: a,
+              itemWidth: m[2].width,
+              children: /* @__PURE__ */ t.jsx(y, { children: e.dueDate != null ? e.dueDate.format(s.visual.MMMDCommaYYYYformat) : r.strings.hyphen })
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            w,
+            {
+              windowSize: a,
+              itemWidth: m[3].width,
+              children: /* @__PURE__ */ t.jsx(y, { children: e.daysPastDue ?? r.strings.hyphen })
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            w,
+            {
+              windowSize: a,
+              itemWidth: m[4].width,
+              children: /* @__PURE__ */ t.jsx(y, { children: j("0,0", e.amount) })
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            w,
+            {
+              windowSize: a,
+              itemWidth: m[5].width,
+              children: /* @__PURE__ */ t.jsx(y, { children: j("0,0", e.balance) })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+const he = {
+  wrapperContainerMarginTop: new i(n[4], n[0]),
+  wrapperContaineHorizontalrMargin: new i(n[0], n[8]),
+  itemHeight: new i(103, 103)
+}, me = o.div`
+  position: relative;
+  width: auto;
+  height: 100%;
+`, ue = o.div`
+  top: ${d.sp0};
+  left: ${d.sp0};
+  padding-bottom: ${d.sp3};
+  box-sizing: border-box;
+`, we = o.div``, E = U(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e, l) => {
+    const {
+      children: c,
+      style: a,
+      sortConfig: r,
+      onColumnSortConfigChanged: s,
+      onUpdateCurrentYTDSelection: g,
+      selectedYTDSpendOption: f,
+      fetchState: v,
+      ...p
+    } = e;
+    return /* @__PURE__ */ t.jsxs(
+      we,
+      {
+        ref: l,
+        style: {
+          ...a,
+          width: "auto"
+        },
+        ...p,
+        children: [
+          /* @__PURE__ */ t.jsx(
+            re,
+            {
+              onColumnSortConfigChanged: s,
+              sortConfig: r
+            }
+          ),
+          /* @__PURE__ */ t.jsx(me, { children: c })
+        ]
+      }
+    );
+  }
+);
+E.displayName = "Aging invoices list view inner element type";
+const pe = ({
+  index: e,
+  style: l,
+  invoices: c,
+  entityLogo: a,
+  onTransactionClick: r
+}) => {
+  const s = c[e];
+  return e < c.length ? /* @__PURE__ */ t.jsx(
+    ue,
+    {
+      style: {
+        ...l,
+        width: "fit-content",
+        minWidth: "100%"
+      },
+      children: /* @__PURE__ */ t.jsx(
+        ge,
+        {
+          onTransactionClick: r,
+          invoice: s,
+          entityLogo: a
+        }
+      )
+    }
+  ) : null;
+};
+function Le({
+  uiState: e,
+  invoices: l,
+  entityLogo: c,
+  onColumnSortConfigChanged: a,
+  onTransactionClick: r
+}) {
+  const s = K(null), g = b(), f = T(() => he.itemHeight.value(g), [g]);
+  return /* @__PURE__ */ t.jsx(V, { children: ({ height: v, width: p }) => /* @__PURE__ */ t.jsx(
+    I,
+    {
+      height: v,
+      width: p,
+      ref: s,
+      overscanCount: 1,
+      itemCount: l.length,
+      innerElementType: (x) => /* @__PURE__ */ t.jsx(
+        E,
+        {
+          ...x,
+          onColumnSortConfigChanged: a,
+          sortConfig: {
+            sortKey: e.sortKey,
+            sortOrder: e.sortOrder
+          }
+        }
+      ),
+      itemSize: f,
+      style: { willChange: "auto" },
+      children: (x) => /* @__PURE__ */ t.jsx(
+        pe,
+        {
+          ...x,
+          invoices: l,
+          entityLogo: c,
+          onTransactionClick: r
+        }
+      )
+    }
+  ) });
+}
+const h = {
+  containerHorizontalPadding: new i(n[2], n[8]),
+  nameLogoWidth: new i(n[5], n[5]),
+  nameLogoHeight: new i(n[5], n[5]),
+  nameLogoMarginTop: new i(n[1], n[1]),
+  entityContainerWidth: new i(300, 350, 350, 350, 400),
+  summaryColumnGap: new i(n[2], n[1], n[1], n[2], n[6])
+}, xe = o.div`
+  background: ${(e) => e.theme.colors.grey5};
+  padding-left: ${(e) => h.containerHorizontalPadding.valuePx(e.windowSize)};
+  padding-right: ${(e) => h.containerHorizontalPadding.valuePx(e.windowSize)};
+  padding-bottom: ${d.sp4};
+  display: flex;
+  justify-content: space-between;
+  align-items: ${(e) => e.isLargeScreen === !0 ? "center" : "flex-start"};
+  flex-direction: ${(e) => e.isLargeScreen === !0 ? "row" : "column"};
+  border-bottom: 1px solid ${(e) => e.theme.colors.grey3};
+  row-gap: ${d.sp3};
+`, ye = o.div`
+  display: flex;
+  align-items: flex-start;
+  column-gap: ${d.sp3};
+  max-width: ${(e) => h.entityContainerWidth.valuePx(e.windowSize)};
+`, $e = o.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: ${(e) => h.summaryColumnGap.valuePx(e.windowSize)};
+  width: ${(e) => e.isLargeScreen === !0 ? "unset" : "100%"};
+  overflow: auto;
+`, fe = o.div`
+  display: flex;
+  flex-direction: column;
+`, R = o(J)`
+  color: ${(e) => e.theme.colors.hero};
+`, ve = o.div`
+  margin-top: ${(e) => h.nameLogoMarginTop.valuePx(e.windowSize)};
+`, k = o.div`
+  display: flex;
+  flex-direction: column;
+`, H = o(Q)`
+  text-align: right;
+  color: ${(e) => e.theme.colors.primary};
+`, C = o(L)`
+  color: ${(e) => e.theme.colors.hero};
+  text-wrap: nowrap;
+  width: fit-content;
+`, Se = o(q)`
+  color: ${(e) => e.theme.colors.primary};
+`;
+function We({
+  totalBalances: e,
+  entityName: l,
+  reportId: c,
+  reportDate: a,
+  entityLogo: r
+}) {
+  const s = b(), g = s === "large" || s === "extra-large", {
+    reports: {
+      aging: { duration: f, apAgingDetail: v, arAgingDetail: p, apAging: x, arAging: _ }
+    },
+    dateFormat: W
+  } = P.getLocalizedStrings(), N = B(() => X(e), [e]);
+  return /* @__PURE__ */ t.jsxs(xe, { isLargeScreen: g, windowSize: s, children: [
+    /* @__PURE__ */ t.jsxs(ye, { windowSize: s, children: [
+      r != null ? /* @__PURE__ */ t.jsx(
+        A,
+        {
+          photoUrl: r.toString(),
+          styles: {
+            width: h.nameLogoWidth.valuePx(s),
+            height: h.nameLogoHeight.valuePx(s),
+            marginTop: h.nameLogoMarginTop.valuePx(s)
+          }
+        }
+      ) : /* @__PURE__ */ t.jsx(ve, { windowSize: s, children: /* @__PURE__ */ t.jsx(O, { name: l, size: d.sp5 }) }),
+      /* @__PURE__ */ t.jsxs(fe, { children: [
+        /* @__PURE__ */ t.jsx(Se, { children: l }),
+        /* @__PURE__ */ t.jsx(
+          S,
+          {
+            controller: c === "accounts_payable_aging",
+            children: /* @__PURE__ */ t.jsx(R, { children: `${v.dateLabel} ${a.format(
+              W.visual.MMMDCommaYYYYformat
+            )}` })
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          S,
+          {
+            controller: c === "accounts_receivable_aging",
+            children: /* @__PURE__ */ t.jsx(R, { children: `${p.dateLabel} ${a.format(
+              W.visual.MMMDCommaYYYYformat
+            )}` })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ t.jsxs($e, { isLargeScreen: g, windowSize: s, children: [
+      e.map((z) => /* @__PURE__ */ t.jsxs(k, { children: [
+        /* @__PURE__ */ t.jsx(C, { children: f[z.period] }),
+        /* @__PURE__ */ t.jsx(H, { children: j("0,0", z?.balance) })
+      ] }, z.period)),
+      /* @__PURE__ */ t.jsxs(k, { children: [
+        /* @__PURE__ */ t.jsx(
+          S,
+          {
+            controller: c === "accounts_payable_aging",
+            children: /* @__PURE__ */ t.jsx(C, { children: x.totalPayable })
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          S,
+          {
+            controller: c === "accounts_receivable_aging",
+            children: /* @__PURE__ */ t.jsx(C, { children: _.totalReceivable })
+          }
+        ),
+        /* @__PURE__ */ t.jsx(H, { children: j("0,0", N?.balance) })
+      ] })
+    ] })
+  ] });
+}
+export {
+  Le as A,
+  We as E
+};