@zeniai/web-components 3.16.71 → 3.16.72

package/dist/ApprovalRulesSettingsPage-fEDHmMDv.js

@@ -0,0 +1,145 @@
+import { u as U, b as f, j as e } from "./vendor-.pnpm-DtFedGku.js";
+import s from "@emotion/styled";
+import { hasBillPayAccessible as F, hasReimbursementAccessible as G } from "@zeniai/client-epic-state";
+import { u as N, dz as J, a as c, aE as V, A as q, hH as y, gh as w, R as r, S as R, E as K, t as b, D as l } from "./index-DLKZoZ-i.js";
+const i = {
+  sectionRowGap: new r(l[4], l[8], l[8]),
+  lastSectionPaddingBottom: new r(l[7], l[10], l[10]),
+  iconWidthHeight: new r(20, l[4]),
+  subtitleSectionWidth: new r(343, 580, 1200)
+}, ie = ({
+  billpayApprovalView: t,
+  remiApproverView: A,
+  currentTenant: p,
+  onBackClick: j,
+  onClickMenuIcon: P,
+  onSetupApprovalRulesBillPaySectionClick: C,
+  onSetupApprovalRulesRemiSectionClick: z
+}) => {
+  const a = U(), o = N(), d = J(), {
+    fetchState: u,
+    allApprovalRules: h,
+    approvalRulesStatus: B
+  } = t, {
+    fetchState: m,
+    allApprovalRules: g,
+    approvalRulesStatus: T
+  } = A, { commonSetUp: k, spendManagement: I } = c.getLocalizedStrings(), v = c.getLocalizedStrings().common.settings, x = c.getLocalizedStrings().common.headers, { billPay: $, reimbursement: W } = I, { billPaySetup: L } = $, { reimbursementSetup: H } = W, { setUp: n } = k, D = u === "In-Progress" || m === "In-Progress" || u === "Not-Started" || m === "Not-Started", S = a.mode === "light" ? new f(a.colors.brandColorJadeLight) : new f(a.colors.brandColorJadeDark), E = F(
+    p,
+    d.loggedInUserRoleMap
+  ), M = G(
+    p,
+    d.loggedInUserRoleMap
+  );
+  return /* @__PURE__ */ e.jsxs(Q, { children: [
+    /* @__PURE__ */ e.jsx(
+      V,
+      {
+        source: "ApprovalRulesSettingsPage",
+        title: v.title.approvalRules,
+        backgroundColor: a.colors.grey4,
+        style: { zIndex: 3 },
+        onBackClick: j,
+        showBackButton: !1,
+        showMenuIcon: o === "medium-compact" || o === "small",
+        onClickMenuIcon: P
+      }
+    ),
+    /* @__PURE__ */ e.jsx(X, { windowSize: o, children: D ? /* @__PURE__ */ e.jsx(Y, { children: /* @__PURE__ */ e.jsx(q, { size: "ExtraLarge", start: !0 }) }) : /* @__PURE__ */ e.jsxs(O, { children: [
+      /* @__PURE__ */ e.jsx(_, { windowSize: o, children: /* @__PURE__ */ e.jsx(ee, { windowSize: o, children: v.infoText.approvalRules }) }),
+      /* @__PURE__ */ e.jsxs(Z, { windowSize: o, children: [
+        E === !0 && /* @__PURE__ */ e.jsx(
+          y,
+          {
+            title: h.length > 0 ? n.approvalTitle : n.createApprovalTitle,
+            subTitle: L.approvalSubTitle,
+            header: x.bills,
+            icon: {
+              element: /* @__PURE__ */ e.jsx(
+                w,
+                {
+                  width: i.iconWidthHeight.valuePx(o),
+                  height: i.iconWidthHeight.valuePx(o)
+                }
+              ),
+              color: S
+            },
+            onClick: C,
+            status: h.length > 0 ? B : void 0
+          }
+        ),
+        M === !0 && /* @__PURE__ */ e.jsx(
+          y,
+          {
+            title: g.length > 0 ? n.approvalTitle : n.createApprovalTitle,
+            subTitle: H.approvalSubTitle,
+            header: x.reimbursements,
+            icon: {
+              element: /* @__PURE__ */ e.jsx(
+                w,
+                {
+                  height: i.iconWidthHeight.valuePx(o)
+                }
+              ),
+              color: S
+            },
+            style: {
+              paddingBottom: i.lastSectionPaddingBottom.valuePx(o)
+            },
+            onClick: z,
+            status: g.length > 0 ? T : void 0
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}, O = s.div`
+  width: 100%;
+  margin: auto;
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+`, Q = s.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  row-gap: ${R.sp3};
+  width: 100%;
+  background-color: ${(t) => t.theme.colors.grey4};
+`, X = s.div`
+  display: flex;
+  height: 100%;
+  overflow-y: auto;
+  justify-content: center;
+`, Y = s.div`
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 110px);
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: ${(t) => t.theme.colors.grey4};
+`, Z = s.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${(t) => i.sectionRowGap.valuePx(t.windowSize)};
+`, _ = s(K)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: ${(t) => i.subtitleSectionWidth.valuePx(t.windowSize)};
+  margin-bottom: ${R.sp5};
+`, ee = s.div`
+  display: flex;
+  align-items: center;
+
+  color: ${(t) => t.theme.colors.hero};
+  font-family: ${b.largeMedium.fontFamily};
+  ${b.standardRegular.css};
+`;
+export {
+  ie as default
+};

package/dist/ArAgingChart-BKi-1Dyo.js

@@ -0,0 +1,529 @@
+import { j as u, bs as j, bt as w, a0 as E, u as v, A as D, a$ as z, Q as I, X as V, Y as M, R as _, bu as G } from "./vendor-.pnpm-DtFedGku.js";
+import H, { useRef as F, useState as W, useEffect as P } from "react";
+import b from "@emotion/styled";
+import { C as g, a as f, S as x, p as U, D as A, t as L, dK as X } from "./index-DLKZoZ-i.js";
+import { e as Z, c as B, f as k, h as J, i as Y } from "./chartTypes-BMnBH70G.js";
+import { defaultVendorCurrency as K, defaultCustomerCurrency as R } from "@zeniai/client-epic-state";
+const tt = b.div`
+  display: flex;
+`, rt = b.div`
+  flex: display;
+  opacity: 0.85;
+  border-radius: ${x.sp1};
+  flex-direction: column;
+  padding: ${x.sp3};
+  background-color: ${(t) => t.theme.colors.black};
+`, O = b(U)`
+  color: ${(t) => t.color ?? g.neutralGrey2Light};
+  text-align: left;
+`, et = b.div`
+  margin: ${x.sp2} ${x.sp0} ${x.sp2} ${x.sp0};
+  width: 100%;
+  height: 1px;
+  background-color: ${g.neutralGrey3Dark};
+`, ot = ({
+  active: t,
+  payload: n,
+  barName: o
+}) => {
+  const s = [];
+  if (n != null && t === !0) {
+    const r = n.filter(
+      (m) => m.name == o
+    )[0], a = r.payload, c = r.color, i = o != null && a.record[o] != null ? a.record[o].amount : void 0, l = {
+      amount: 0,
+      currencyCode: "",
+      currencySymbol: ""
+    };
+    let d;
+    for (d in a.record) {
+      const m = a.record[d].amount;
+      l.amount += a.record[d].amount?.amount ?? 0, l.currencyCode = m != null ? m.currencyCode : l.currencyCode, l.currencySymbol = m != null ? m.currencySymbol : l.currencySymbol;
+    }
+    const e = Z(o);
+    s.push({
+      barName: e,
+      actual: i,
+      color: c
+    }), s.push({
+      barName: f.getLocalizedStrings().chartCard.total,
+      actual: l,
+      color: g.brandColorPearl
+    });
+  }
+  return s;
+}, nt = ({
+  barLabelsWithValues: t
+}) => /* @__PURE__ */ u.jsx(tt, { children: /* @__PURE__ */ u.jsxs(rt, { children: [
+  /* @__PURE__ */ u.jsx(O, { color: t[0].color, children: `${t[0].barName}: ${B(t[0].actual)}` }),
+  /* @__PURE__ */ u.jsx(et, {}),
+  /* @__PURE__ */ u.jsx(O, { children: `${f.getLocalizedStrings().chartCard.total}: ${B(t[1].actual)}` })
+] }) }), at = (t) => {
+  const n = ot({ ...t });
+  return n.length === 0 ? null : /* @__PURE__ */ u.jsx(nt, { barLabelsWithValues: n });
+}, N = H.memo(at), Q = 5;
+function st(t) {
+  const n = w(t, (s, r) => [s.amount?.amount ?? 0, r]);
+  return n.sort((s, r) => r[0] - s[0]), n.slice(0, Q - 1).reduce((s, r) => ({
+    ...s,
+    [r[1]]: !0
+  }), {});
+}
+function $(t) {
+  const n = [];
+  for (const o in t)
+    n.push(o);
+  return n.sort((o, s) => (t[s].amount?.amount ?? 0) - (t[o].amount?.amount ?? 0)), n;
+}
+const ct = (t) => {
+  const n = t.agingPeriods.map(
+    (r) => f.getLocalizedStrings().reports.aging.duration[r]
+  ), o = [];
+  return {
+    recordByDurations: t.agingPeriods.map(
+      (r) => {
+        const a = {};
+        t.agingBalances.forEach((l) => {
+          const d = k(
+            l.vendor?.name ?? "",
+            r
+          );
+          a[d] = {
+            amount: l.apAgingBalances.find((e) => e.period === r)?.balance
+          };
+        });
+        const c = f.getLocalizedStrings().reports.aging.duration[r];
+        if (Object.keys(a).length > Q) {
+          const l = st(a), d = j(a, (C, p) => l[p] === !0), e = j(a, (C, p) => l[p] !== !0), m = Object.keys(e).reduce(
+            (C, p) => C + (e[p].amount?.amount ?? 0),
+            0
+          ), h = Object.keys(e)[0], y = k("Other", r);
+          d[y] = {
+            ...e[h],
+            amount: {
+              amount: m,
+              currencyCode: e[h].amount?.currencyCode ?? K.currencyCode,
+              currencySymbol: e[h].amount?.currencySymbol ?? K.currencySymbol
+            }
+          };
+          const S = $(d);
+          return o.push(...S), {
+            label: c,
+            record: d
+          };
+        }
+        const i = $(a);
+        return o.push(...i), {
+          label: c,
+          record: a
+        };
+      }
+    ),
+    durationLabels: n,
+    orderedKeys: Array.from(o)
+  };
+}, ut = b.div`
+  width: ${(t) => t.width}px;
+  height: ${(t) => t.height}px;
+`, lt = ({
+  active: t,
+  payload: n,
+  mouseOverBarName: o
+}) => n?.find(
+  (r) => r.name === o
+) != null && o != null && t === !0 ? /* @__PURE__ */ u.jsx(
+  N,
+  {
+    active: t,
+    payload: n,
+    barName: o
+  }
+) : null;
+function Lt({
+  report: t,
+  width: n,
+  height: o,
+  isDetailPage: s
+}) {
+  const r = F(!1), [a, c] = W(
+    void 0
+  );
+  P(() => {
+    r.current = !0;
+  }, []);
+  const i = ct(t), l = () => {
+    const e = [];
+    return i?.orderedKeys.forEach((m) => {
+      const h = s === !0 && !r.current;
+      e.push(d(m, h));
+    }), e;
+  }, d = (e, m) => /* @__PURE__ */ u.jsx(
+    E,
+    {
+      name: e,
+      animationDuration: m ? 500 : void 0,
+      style: { cursor: "pointer" },
+      dataKey: (h) => {
+        const y = h.record;
+        return (y[e]?.amount != null ? y[e].amount : void 0)?.amount ?? 0;
+      },
+      stackId: "a",
+      fill: dt(e, i),
+      onMouseEnter: () => {
+        a !== e && c(e);
+      },
+      onMouseLeave: () => {
+        a != null && c(void 0);
+      }
+    },
+    e
+  );
+  return i == null ? null : /* @__PURE__ */ u.jsx(
+    it,
+    {
+      chartData: i,
+      barElements: l(),
+      width: n,
+      height: o,
+      isDetailPage: s === !0,
+      customToolTipContent: /* @__PURE__ */ u.jsx(lt, { mouseOverBarName: a })
+    }
+  );
+}
+const it = ({
+  chartData: t,
+  barElements: n,
+  customToolTipContent: o,
+  width: s,
+  height: r,
+  isDetailPage: a
+}) => {
+  const c = v(), i = J(t);
+  return /* @__PURE__ */ u.jsx(ut, { width: s, height: r, children: /* @__PURE__ */ u.jsx(D, { children: ({ height: l, width: d }) => /* @__PURE__ */ u.jsxs(
+    z,
+    {
+      width: d,
+      height: l,
+      stackOffset: "sign",
+      data: t.recordByDurations,
+      barCategoryGap: "25%",
+      maxBarSize: a ? A[8] : A[3],
+      margin: {
+        top: 5,
+        right: 20,
+        left: 0,
+        bottom: 5
+      },
+      style: { display: "flex", flex: "1 1 auto" },
+      children: [
+        /* @__PURE__ */ u.jsx(
+          I,
+          {
+            horizontal: !0,
+            vertical: !1,
+            strokeWidth: 0.5,
+            stroke: c.colors.grey3
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          V,
+          {
+            dataKey: (e) => e.label,
+            type: "category",
+            axisLine: { stroke: c.colors.grey3, strokeWidth: 0.5 },
+            tickLine: !1,
+            tick: {
+              color: c.colors.hero,
+              ...L.extraSmallRegular.cssObject
+            }
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          M,
+          {
+            type: "number",
+            axisLine: !1,
+            tickLine: !1,
+            tick: {
+              color: c.colors.hero,
+              ...L.extraSmallRegular.cssObject
+            },
+            tickFormatter: (e) => X("0,0.[00]a", e, i)
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          _,
+          {
+            wrapperStyle: { zIndex: 2 },
+            cursor: !1,
+            content: o,
+            allowEscapeViewBox: { x: !1, y: !0 }
+          }
+        ),
+        n
+      ]
+    }
+  ) }) });
+};
+function dt(t, n) {
+  const o = Y(t), s = f.getLocalizedStrings().reports.aging.duration[o], r = n?.recordByDurations.find(
+    (a) => a.label === s
+  )?.record;
+  if (r?.[t] != null) {
+    const a = r[t].amount?.amount ?? 0;
+    let c = 1;
+    switch (G(r, (i) => {
+      (i.amount?.amount ?? 0) > a && c++;
+    }), c) {
+      case 1:
+        return g.graphColor24;
+      case 2:
+        return g.graphColor33;
+      case 3:
+        return g.graphColor18;
+      case 4:
+        return g.graphColor12;
+      case 5:
+        return g.graphColor01;
+      default:
+        return g.graphColor01;
+    }
+  }
+  return g.graphColor01;
+}
+const q = 5;
+function mt(t) {
+  const n = w(t, (s, r) => [s.amount?.amount ?? 0, r]);
+  return n.sort((s, r) => r[0] - s[0]), n.slice(0, q - 1).reduce((s, r) => ({
+    ...s,
+    [r[1]]: !0
+  }), {});
+}
+function T(t) {
+  const n = [];
+  for (const o in t)
+    n.push(o);
+  return n.sort((o, s) => (t[s].amount?.amount ?? 0) - (t[o].amount?.amount ?? 0)), n;
+}
+const gt = (t) => {
+  const n = t.agingPeriods.map(
+    (r) => f.getLocalizedStrings().reports.aging.duration[r]
+  ), o = [];
+  return {
+    recordByDurations: t.agingPeriods.map(
+      (r) => {
+        const a = {};
+        t.agingBalances.forEach((l) => {
+          const d = k(
+            l.customer?.name ?? "",
+            r
+          ), e = l.arAgingBalances.find(
+            (m) => m.period === r
+          );
+          a[d] = {
+            amount: l.children.length > 0 ? e?.totalBalance : e?.balance
+          };
+        });
+        const c = f.getLocalizedStrings().reports.aging.duration[r];
+        if (Object.keys(a).length > q) {
+          const l = mt(a), d = j(a, (C, p) => l[p] === !0), e = j(a, (C, p) => l[p] !== !0), m = Object.keys(e).reduce(
+            (C, p) => C + (e[p].amount?.amount ?? 0),
+            0
+          ), h = Object.keys(e)[0], y = k("Other", r);
+          d[y] = {
+            ...e[h],
+            amount: {
+              amount: m,
+              currencyCode: e[h].amount?.currencyCode ?? R.currencyCode,
+              currencySymbol: e[h].amount?.currencySymbol ?? R.currencySymbol
+            }
+          };
+          const S = T(d);
+          return o.push(...S), {
+            label: c,
+            record: d
+          };
+        }
+        const i = T(a);
+        return o.push(...i), {
+          label: c,
+          record: a
+        };
+      }
+    ),
+    durationLabels: n,
+    orderedKeys: Array.from(o)
+  };
+}, ht = b.div`
+  width: ${(t) => t.width}px;
+  height: ${(t) => t.height}px;
+`, pt = ({
+  active: t,
+  payload: n,
+  mouseOverBarName: o
+}) => n?.find(
+  (r) => r.name === o
+) != null && o != null && t === !0 ? /* @__PURE__ */ u.jsx(
+  N,
+  {
+    active: t,
+    payload: n,
+    barName: o
+  }
+) : null;
+function kt({
+  report: t,
+  width: n,
+  height: o,
+  isDetailPage: s
+}) {
+  const r = F(!1), [a, c] = W(
+    void 0
+  );
+  P(() => {
+    r.current = !0;
+  }, []);
+  const i = gt(t), l = () => {
+    const e = [];
+    return i?.orderedKeys.forEach((m) => {
+      const h = s === !0 && !r.current;
+      e.push(d(m, h));
+    }), e;
+  }, d = (e, m) => /* @__PURE__ */ u.jsx(
+    E,
+    {
+      name: e,
+      animationDuration: m ? 500 : void 0,
+      style: { cursor: "pointer" },
+      dataKey: (h) => {
+        const y = h.record;
+        return (y[e]?.amount != null ? y[e].amount : void 0)?.amount ?? 0;
+      },
+      stackId: "a",
+      fill: ft(e, i),
+      onMouseEnter: () => {
+        a !== e && c(e);
+      },
+      onMouseLeave: () => {
+        a != null && c(void 0);
+      }
+    },
+    e
+  );
+  return i == null ? null : /* @__PURE__ */ u.jsx(
+    yt,
+    {
+      chartData: i,
+      barElements: l(),
+      width: n,
+      height: o,
+      isDetailPage: s === !0,
+      customToolTipContent: /* @__PURE__ */ u.jsx(pt, { mouseOverBarName: a })
+    }
+  );
+}
+const yt = ({
+  chartData: t,
+  barElements: n,
+  customToolTipContent: o,
+  width: s,
+  height: r,
+  isDetailPage: a
+}) => {
+  const c = v(), i = J(t);
+  return /* @__PURE__ */ u.jsx(ht, { width: s, height: r, children: /* @__PURE__ */ u.jsx(D, { children: ({ height: l, width: d }) => /* @__PURE__ */ u.jsxs(
+    z,
+    {
+      width: d,
+      height: l,
+      stackOffset: "sign",
+      data: t.recordByDurations,
+      barCategoryGap: "25%",
+      maxBarSize: a ? A[8] : A[3],
+      margin: {
+        top: 5,
+        right: 20,
+        left: 0,
+        bottom: 5
+      },
+      style: { display: "flex", flex: "1 1 auto" },
+      children: [
+        /* @__PURE__ */ u.jsx(
+          I,
+          {
+            horizontal: !0,
+            vertical: !1,
+            strokeWidth: 0.5,
+            stroke: c.colors.grey3
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          V,
+          {
+            dataKey: (e) => e.label,
+            type: "category",
+            axisLine: { stroke: c.colors.grey3, strokeWidth: 0.5 },
+            tickLine: !1,
+            tick: {
+              color: c.colors.hero,
+              ...L.extraSmallRegular.cssObject
+            }
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          M,
+          {
+            type: "number",
+            axisLine: !1,
+            tickLine: !1,
+            tick: {
+              color: c.colors.hero,
+              ...L.extraSmallRegular.cssObject
+            },
+            tickFormatter: (e) => X("0,0.[00]a", e, i)
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          _,
+          {
+            wrapperStyle: { zIndex: 2 },
+            cursor: !1,
+            content: o,
+            allowEscapeViewBox: { x: !1, y: !0 }
+          }
+        ),
+        n
+      ]
+    }
+  ) }) });
+};
+function ft(t, n) {
+  const o = Y(t), s = f.getLocalizedStrings().reports.aging.duration[o], r = n?.recordByDurations.find(
+    (a) => a.label === s
+  )?.record;
+  if (r?.[t] != null) {
+    const a = r[t].amount?.amount ?? 0;
+    let c = 1;
+    switch (G(r, (i) => {
+      (i.amount?.amount ?? 0) > a && c++;
+    }), c) {
+      case 1:
+        return g.graphColor24;
+      case 2:
+        return g.graphColor33;
+      case 3:
+        return g.graphColor18;
+      case 4:
+        return g.graphColor12;
+      case 5:
+        return g.graphColor01;
+      default:
+        return g.graphColor01;
+    }
+  }
+  return g.graphColor01;
+}
+export {
+  Lt as A,
+  kt as a
+};

package/dist/ArAgingChart-qUqQsdfD.cjs

@@ -0,0 +1,24 @@
+"use strict";const r=require("./vendor-.pnpm-CT-Z_-kn.cjs"),f=require("react"),j=require("@emotion/styled"),s=require("./index-DaOROfUT.cjs"),x=require("./chartTypes-B7879aa1.cjs"),S=require("@zeniai/client-epic-state"),K=j.div`
+  display: flex;
+`,T=j.div`
+  flex: display;
+  opacity: 0.85;
+  border-radius: ${s.Space.sp1};
+  flex-direction: column;
+  padding: ${s.Space.sp3};
+  background-color: ${t=>t.theme.colors.black};
+`,b=j(s.StandardRegular)`
+  color: ${t=>t.color??s.Colors.neutralGrey2Light};
+  text-align: left;
+`,O=j.div`
+  margin: ${s.Space.sp2} ${s.Space.sp0} ${s.Space.sp2} ${s.Space.sp0};
+  width: 100%;
+  height: 1px;
+  background-color: ${s.Colors.neutralGrey3Dark};
+`,$=({active:t,payload:a,barName:n})=>{const u=[];if(a!=null&&t===!0){const e=a.filter(p=>p.name==n)[0],c=e.payload,l=e.color,d=n!=null&&c.record[n]!=null?c.record[n].amount:void 0,i={amount:0,currencyCode:"",currencySymbol:""};let m;for(m in c.record){const p=c.record[m].amount;i.amount+=c.record[m].amount?.amount??0,i.currencyCode=p!=null?p.currencyCode:i.currencyCode,i.currencySymbol=p!=null?p.currencySymbol:i.currencySymbol}const o=x.getAgingReportIDFromAgingReportChartValueKey(n);u.push({barName:o,actual:d,color:l}),u.push({barName:s.appLocale.getLocalizedStrings().chartCard.total,actual:i,color:s.Colors.brandColorPearl})}return u},w=({barLabelsWithValues:t})=>r.jsxRuntimeExports.jsx(K,{children:r.jsxRuntimeExports.jsxs(T,{children:[r.jsxRuntimeExports.jsx(b,{color:t[0].color,children:`${t[0].barName}: ${x.currencyFormatter(t[0].actual)}`}),r.jsxRuntimeExports.jsx(O,{}),r.jsxRuntimeExports.jsx(b,{children:`${s.appLocale.getLocalizedStrings().chartCard.total}: ${x.currencyFormatter(t[1].actual)}`})]})}),v=t=>{const a=$({...t});return a.length===0?null:r.jsxRuntimeExports.jsx(w,{barLabelsWithValues:a})},L=f.memo(v),B=5;function V(t){const a=r.map(t,(u,e)=>[u.amount?.amount??0,e]);return a.sort((u,e)=>e[0]-u[0]),a.slice(0,B-1).reduce((u,e)=>({...u,[e[1]]:!0}),{})}function E(t){const a=[];for(const n in t)a.push(n);return a.sort((n,u)=>(t[u].amount?.amount??0)-(t[n].amount?.amount??0)),a}const z=t=>{const a=t.agingPeriods.map(e=>s.appLocale.getLocalizedStrings().reports.aging.duration[e]),n=[];return{recordByDurations:t.agingPeriods.map(e=>{const c={};t.agingBalances.forEach(i=>{const m=x.getAgingReportChartValueKey(i.vendor?.name??"",e);c[m]={amount:i.apAgingBalances.find(o=>o.period===e)?.balance}});const l=s.appLocale.getLocalizedStrings().reports.aging.duration[e];if(Object.keys(c).length>B){const i=V(c),m=r.pickBy(c,(C,h)=>i[h]===!0),o=r.pickBy(c,(C,h)=>i[h]!==!0),p=Object.keys(o).reduce((C,h)=>C+(o[h].amount?.amount??0),0),g=Object.keys(o)[0],y=x.getAgingReportChartValueKey("Other",e);m[y]={...o[g],amount:{amount:p,currencyCode:o[g].amount?.currencyCode??S.defaultVendorCurrency.currencyCode,currencySymbol:o[g].amount?.currencySymbol??S.defaultVendorCurrency.currencySymbol}};const R=E(m);return n.push(...R),{label:l,record:m}}const d=E(c);return n.push(...d),{label:l,record:c}}),durationLabels:a,orderedKeys:Array.from(n)}},D=j.div`
+  width: ${t=>t.width}px;
+  height: ${t=>t.height}px;
+`,I=({active:t,payload:a,mouseOverBarName:n})=>a?.find(e=>e.name===n)!=null&&n!=null&&t===!0?r.jsxRuntimeExports.jsx(L,{active:t,payload:a,barName:n}):null;function M({report:t,width:a,height:n,isDetailPage:u}){const e=f.useRef(!1),[c,l]=f.useState(void 0);f.useEffect(()=>{e.current=!0},[]);const d=z(t),i=()=>{const o=[];return d?.orderedKeys.forEach(p=>{const g=u===!0&&!e.current;o.push(m(p,g))}),o},m=(o,p)=>r.jsxRuntimeExports.jsx(r.Bar,{name:o,animationDuration:p?500:void 0,style:{cursor:"pointer"},dataKey:g=>{const y=g.record;return(y[o]?.amount!=null?y[o].amount:void 0)?.amount??0},stackId:"a",fill:F(o,d),onMouseEnter:()=>{c!==o&&l(o)},onMouseLeave:()=>{c!=null&&l(void 0)}},o);return d==null?null:r.jsxRuntimeExports.jsx(_,{chartData:d,barElements:i(),width:a,height:n,isDetailPage:u===!0,customToolTipContent:r.jsxRuntimeExports.jsx(I,{mouseOverBarName:c})})}const _=({chartData:t,barElements:a,customToolTipContent:n,width:u,height:e,isDetailPage:c})=>{const l=r.useTheme(),d=x.getCurrencySymbolForAgingChart(t);return r.jsxRuntimeExports.jsx(D,{width:u,height:e,children:r.jsxRuntimeExports.jsx(r.AutoSizer,{children:({height:i,width:m})=>r.jsxRuntimeExports.jsxs(r.ComposedChart,{width:m,height:i,stackOffset:"sign",data:t.recordByDurations,barCategoryGap:"25%",maxBarSize:c?s.sp[8]:s.sp[3],margin:{top:5,right:20,left:0,bottom:5},style:{display:"flex",flex:"1 1 auto"},children:[r.jsxRuntimeExports.jsx(r.CartesianGrid,{horizontal:!0,vertical:!1,strokeWidth:.5,stroke:l.colors.grey3}),r.jsxRuntimeExports.jsx(r.XAxis,{dataKey:o=>o.label,type:"category",axisLine:{stroke:l.colors.grey3,strokeWidth:.5},tickLine:!1,tick:{color:l.colors.hero,...s.textStyles.extraSmallRegular.cssObject}}),r.jsxRuntimeExports.jsx(r.YAxis,{type:"number",axisLine:!1,tickLine:!1,tick:{color:l.colors.hero,...s.textStyles.extraSmallRegular.cssObject},tickFormatter:o=>s.amountValueToString("0,0.[00]a",o,d)}),r.jsxRuntimeExports.jsx(r.Tooltip$1,{wrapperStyle:{zIndex:2},cursor:!1,content:n,allowEscapeViewBox:{x:!1,y:!0}}),a]})})})};function F(t,a){const n=x.getAgingPeriodFromAgingReportChartValueKey(t),u=s.appLocale.getLocalizedStrings().reports.aging.duration[n],e=a?.recordByDurations.find(c=>c.label===u)?.record;if(e?.[t]!=null){const c=e[t].amount?.amount??0;let l=1;switch(r.forOwn(e,d=>{(d.amount?.amount??0)>c&&l++}),l){case 1:return s.Colors.graphColor24;case 2:return s.Colors.graphColor33;case 3:return s.Colors.graphColor18;case 4:return s.Colors.graphColor12;case 5:return s.Colors.graphColor01;default:return s.Colors.graphColor01}}return s.Colors.graphColor01}const k=5;function G(t){const a=r.map(t,(u,e)=>[u.amount?.amount??0,e]);return a.sort((u,e)=>e[0]-u[0]),a.slice(0,k-1).reduce((u,e)=>({...u,[e[1]]:!0}),{})}function A(t){const a=[];for(const n in t)a.push(n);return a.sort((n,u)=>(t[u].amount?.amount??0)-(t[n].amount?.amount??0)),a}const q=t=>{const a=t.agingPeriods.map(e=>s.appLocale.getLocalizedStrings().reports.aging.duration[e]),n=[];return{recordByDurations:t.agingPeriods.map(e=>{const c={};t.agingBalances.forEach(i=>{const m=x.getAgingReportChartValueKey(i.customer?.name??"",e),o=i.arAgingBalances.find(p=>p.period===e);c[m]={amount:i.children.length>0?o?.totalBalance:o?.balance}});const l=s.appLocale.getLocalizedStrings().reports.aging.duration[e];if(Object.keys(c).length>k){const i=G(c),m=r.pickBy(c,(C,h)=>i[h]===!0),o=r.pickBy(c,(C,h)=>i[h]!==!0),p=Object.keys(o).reduce((C,h)=>C+(o[h].amount?.amount??0),0),g=Object.keys(o)[0],y=x.getAgingReportChartValueKey("Other",e);m[y]={...o[g],amount:{amount:p,currencyCode:o[g].amount?.currencyCode??S.defaultCustomerCurrency.currencyCode,currencySymbol:o[g].amount?.currencySymbol??S.defaultCustomerCurrency.currencySymbol}};const R=A(m);return n.push(...R),{label:l,record:m}}const d=A(c);return n.push(...d),{label:l,record:c}}),durationLabels:a,orderedKeys:Array.from(n)}},P=j.div`
+  width: ${t=>t.width}px;
+  height: ${t=>t.height}px;
+`,W=({active:t,payload:a,mouseOverBarName:n})=>a?.find(e=>e.name===n)!=null&&n!=null&&t===!0?r.jsxRuntimeExports.jsx(L,{active:t,payload:a,barName:n}):null;function X({report:t,width:a,height:n,isDetailPage:u}){const e=f.useRef(!1),[c,l]=f.useState(void 0);f.useEffect(()=>{e.current=!0},[]);const d=q(t),i=()=>{const o=[];return d?.orderedKeys.forEach(p=>{const g=u===!0&&!e.current;o.push(m(p,g))}),o},m=(o,p)=>r.jsxRuntimeExports.jsx(r.Bar,{name:o,animationDuration:p?500:void 0,style:{cursor:"pointer"},dataKey:g=>{const y=g.record;return(y[o]?.amount!=null?y[o].amount:void 0)?.amount??0},stackId:"a",fill:Y(o,d),onMouseEnter:()=>{c!==o&&l(o)},onMouseLeave:()=>{c!=null&&l(void 0)}},o);return d==null?null:r.jsxRuntimeExports.jsx(J,{chartData:d,barElements:i(),width:a,height:n,isDetailPage:u===!0,customToolTipContent:r.jsxRuntimeExports.jsx(W,{mouseOverBarName:c})})}const J=({chartData:t,barElements:a,customToolTipContent:n,width:u,height:e,isDetailPage:c})=>{const l=r.useTheme(),d=x.getCurrencySymbolForAgingChart(t);return r.jsxRuntimeExports.jsx(P,{width:u,height:e,children:r.jsxRuntimeExports.jsx(r.AutoSizer,{children:({height:i,width:m})=>r.jsxRuntimeExports.jsxs(r.ComposedChart,{width:m,height:i,stackOffset:"sign",data:t.recordByDurations,barCategoryGap:"25%",maxBarSize:c?s.sp[8]:s.sp[3],margin:{top:5,right:20,left:0,bottom:5},style:{display:"flex",flex:"1 1 auto"},children:[r.jsxRuntimeExports.jsx(r.CartesianGrid,{horizontal:!0,vertical:!1,strokeWidth:.5,stroke:l.colors.grey3}),r.jsxRuntimeExports.jsx(r.XAxis,{dataKey:o=>o.label,type:"category",axisLine:{stroke:l.colors.grey3,strokeWidth:.5},tickLine:!1,tick:{color:l.colors.hero,...s.textStyles.extraSmallRegular.cssObject}}),r.jsxRuntimeExports.jsx(r.YAxis,{type:"number",axisLine:!1,tickLine:!1,tick:{color:l.colors.hero,...s.textStyles.extraSmallRegular.cssObject},tickFormatter:o=>s.amountValueToString("0,0.[00]a",o,d)}),r.jsxRuntimeExports.jsx(r.Tooltip$1,{wrapperStyle:{zIndex:2},cursor:!1,content:n,allowEscapeViewBox:{x:!1,y:!0}}),a]})})})};function Y(t,a){const n=x.getAgingPeriodFromAgingReportChartValueKey(t),u=s.appLocale.getLocalizedStrings().reports.aging.duration[n],e=a?.recordByDurations.find(c=>c.label===u)?.record;if(e?.[t]!=null){const c=e[t].amount?.amount??0;let l=1;switch(r.forOwn(e,d=>{(d.amount?.amount??0)>c&&l++}),l){case 1:return s.Colors.graphColor24;case 2:return s.Colors.graphColor33;case 3:return s.Colors.graphColor18;case 4:return s.Colors.graphColor12;case 5:return s.Colors.graphColor01;default:return s.Colors.graphColor01}}return s.Colors.graphColor01}exports.ApAgingChart=M;exports.ArAgingChart=X;