@zeniai/web-components 3.16.93 → 3.16.94

package/dist/TrendChart-C6eEpBKz.js

@@ -0,0 +1,334 @@
+import { j as s, u as K, A as M } from "./vendor-.pnpm-B2klaOGU.js";
+import R, { useRef as z, useEffect as w, useState as _ } from "react";
+import { Bar as q, BarChart as N, CartesianGrid as O, XAxis as V, YAxis as W, Tooltip as X, ReferenceArea as G } from "recharts";
+import { formatZeniDate as d } from "@zeniai/client-epic-state";
+import { S as A, C as I, o as F, a as C, e as S, t as B, dM as J } from "./index-B9wG56Sb.js";
+import { c as Q, g as v, b as Z, d as $ } from "./chartTypes-BFYRQ3Cv.js";
+import j from "@emotion/styled";
+import { a as H } from "./toCOABalancesWithID-CHuRV6Cy.js";
+import { t as U } from "./toChartData-DjeEqlPj.js";
+const P = j.div`
+  display: flex;
+`, tt = j.div`
+  flex: display;
+  opacity: 0.85;
+  border-radius: ${A.sp1};
+  flex-direction: column;
+  padding: ${A.sp3};
+  background-color: ${(t) => t.theme.colors.black};
+`, at = j(F)`
+  color: ${(t) => t.color ?? I.neutralGrey2Light};
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`, et = ({
+  active: t,
+  payload: a,
+  trendType: e
+}) => {
+  const r = [];
+  return a?.forEach((l) => {
+    const n = l.name;
+    if (l && t && l.value !== 0) {
+      const u = l.payload, x = l.color, m = n != null && u.record[n] != null ? u.record[n].amount : void 0;
+      r.push({
+        barName: e,
+        value: m,
+        color: x
+      });
+    }
+  }), r;
+}, rt = (t) => {
+  const a = et(t);
+  return a.length ? /* @__PURE__ */ s.jsx(P, { children: /* @__PURE__ */ s.jsx(tt, { children: a.map((e, r) => /* @__PURE__ */ s.jsx(
+    at,
+    {
+      color: e.color,
+      children: `${e.barName}: ${Q(
+        e.value
+      )}`
+    },
+    e.barName + r
+  )) }) }) : null;
+}, ot = R.memo(rt), nt = (t, a, e, r) => {
+  let l = [];
+  if (r != null) {
+    const n = st(r, e);
+    n != null && n.length > 0 && (l = H("trend", "actual", n));
+  }
+  if (l.length > 0) {
+    const n = v("trend", "actual"), u = {};
+    return u[n] = l, U(
+      t,
+      a,
+      n,
+      u
+    );
+  } else
+    return;
+}, st = (t, a) => {
+  if (t != null)
+    switch (a) {
+      case "month":
+        return t.monthly;
+      case "quarter":
+        return t.quarterly;
+      case "year":
+        return t.yearly;
+      case "free_range":
+        throw new Error("free_range dates are not supported!");
+    }
+}, k = [v("trend", "actual")];
+function bt({
+  firstMonthOfFY: t,
+  trendReport: a,
+  timeframe: e,
+  selectedTimePeriod: r,
+  graphColor: l,
+  width: n,
+  height: u,
+  onTimeframeSelectionChanged: x
+}) {
+  const m = z(!1), b = r != null ? ct(
+    t,
+    r,
+    e
+  ) : void 0, g = C.getLocalizedStrings().reports.trend[a?.balancesKind];
+  w(() => {
+    m.current = !0;
+  }, []);
+  const h = nt(
+    t,
+    k,
+    e,
+    a
+  ), D = (f) => {
+    const y = [];
+    return k.forEach((o) => {
+      y.push(
+        /* @__PURE__ */ s.jsx(
+          q,
+          {
+            name: o,
+            isAnimationActive: m.current,
+            dataKey: (c) => {
+              const i = c.record;
+              return (i[o] != null && i[o].amount != null ? i[o].amount : void 0)?.amount ?? 0;
+            },
+            maxBarSize: 36,
+            fill: f.toString(),
+            "data-testid": S(o, "bar")
+          },
+          o
+        )
+      );
+    }), y;
+  };
+  return h == null ? null : /* @__PURE__ */ s.jsx(
+    lt,
+    {
+      chartData: h,
+      timeframe: e,
+      selectedLabel: b,
+      barElements: D(l),
+      customToolTipContent: ({ active: f, payload: y }) => /* @__PURE__ */ s.jsx(
+        ot,
+        {
+          active: f,
+          payload: y,
+          trendType: g
+        }
+      ),
+      width: n,
+      height: u,
+      onTimeframeSelectionChanged: x
+    }
+  );
+}
+const lt = ({
+  chartData: t,
+  timeframe: a,
+  selectedLabel: e,
+  barElements: r,
+  customToolTipContent: l,
+  width: n,
+  height: u,
+  onTimeframeSelectionChanged: x
+}) => {
+  const m = K(), [b, g] = _([
+    void 0,
+    void 0
+  ]), h = t.timeseries, D = Z(t), f = h.map(
+    (o) => o.label
+  );
+  w(
+    () => {
+      if (e != null) {
+        const o = $(
+          e.label,
+          f,
+          1
+        );
+        g(o);
+      } else
+        g([void 0, void 0]);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [a, e]
+  );
+  const y = (o) => {
+    if (o?.activePayload == null || o?.activePayload.length === 0)
+      return;
+    const c = o.activePayload[0];
+    if (c?.payload?.record?.[v("trend", "actual")]?.amount == null)
+      return;
+    const i = c.payload.record[v("trend", "actual")].amount;
+    if (i != null && i.amount === 0 || c?.payload?.timeLabel?.label == null)
+      return;
+    const L = c.payload.timeLabel.label, E = c.payload.timeLabel.startDate, T = c.payload.timeLabel.endDate, Y = $(
+      L,
+      f,
+      1
+    );
+    g(Y), x?.(a, {
+      startDate: E,
+      endDate: T
+    });
+  };
+  return /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      style: { width: n, height: u },
+      "data-testid": S("simple-bar-chart"),
+      children: /* @__PURE__ */ s.jsx(M, { children: ({ height: o, width: c }) => /* @__PURE__ */ s.jsxs(
+        N,
+        {
+          "data-testid": S("bar-chart"),
+          width: c,
+          height: o,
+          data: t.recordByTimeseries,
+          barCategoryGap: "30%",
+          margin: {
+            top: 5,
+            right: 20,
+            left: 0,
+            bottom: 5
+          },
+          style: { display: "flex", flex: "1 1 auto", cursor: "pointer" },
+          onClick: y,
+          children: [
+            /* @__PURE__ */ s.jsx(
+              O,
+              {
+                horizontal: !0,
+                vertical: !1,
+                strokeWidth: 0.5,
+                stroke: m.colors.grey3
+              }
+            ),
+            /* @__PURE__ */ s.jsx(
+              V,
+              {
+                dataKey: (i) => i.timeLabel.label,
+                type: "category",
+                axisLine: { stroke: m.colors.grey3, strokeWidth: 0.5 },
+                tickLine: !1,
+                tick: {
+                  color: m.colors.hero,
+                  ...B.extraSmallRegular.cssObject
+                }
+              }
+            ),
+            /* @__PURE__ */ s.jsx(
+              W,
+              {
+                type: "number",
+                axisLine: !1,
+                tickLine: !1,
+                tick: {
+                  color: m.colors.hero,
+                  ...B.extraSmallRegular.cssObject
+                },
+                tickFormatter: (i) => J("0,0.[00]a", i, D)
+              }
+            ),
+            /* @__PURE__ */ s.jsx(
+              X,
+              {
+                cursor: !1,
+                content: l,
+                allowEscapeViewBox: { x: !1, y: !0 }
+              }
+            ),
+            e != null && /* @__PURE__ */ s.jsx(
+              G,
+              {
+                x1: b[0],
+                x2: b[1],
+                opacity: 0.3,
+                fillOpacity: 0.3,
+                stopOpacity: 0.1
+              }
+            ),
+            r
+          ]
+        }
+      ) })
+    }
+  );
+}, { dateFormat: p } = C.getLocalizedStrings(), ct = (t, a, e) => {
+  let r = "";
+  switch (e) {
+    case "week":
+      a.startDate.month() !== a.endDate.month() ? r = `${d(
+        a.startDate,
+        p.visual.MMMYYFormat,
+        t
+      )} - ${d(
+        a.endDate,
+        p.visual.MMMYYFormat,
+        t
+      )}` : r = `${d(
+        a.startDate,
+        p.visual.Dformat,
+        t
+      )} - ${d(
+        a.endDate,
+        p.visual.MMMDCommaYYYYformat,
+        t
+      )}`;
+      break;
+    case "month":
+      r = `${d(
+        a.startDate,
+        p.visual.MMMYYFormat,
+        t
+      )}`;
+      break;
+    case "quarter":
+      r = `${C.getLocalizedStrings().quarterPrefix}${d(
+        a.startDate,
+        p.visual.QYYformat,
+        t
+      )}`;
+      break;
+    case "year":
+      r = `${d(
+        a.startDate,
+        p.visual.YYYYformat,
+        t
+      )}`;
+      break;
+    case "free_range":
+      throw new Error("free_range dates are not supported!");
+  }
+  return {
+    label: r,
+    startDate: a.startDate,
+    endDate: a.endDate
+  };
+};
+export {
+  bt as default
+};

package/dist/TrendWithTransactions-CesVaJPk.js

@@ -0,0 +1,346 @@
+import { j as t, A as q } from "./vendor-.pnpm-B2klaOGU.js";
+import { useState as G, useRef as K } from "react";
+import r from "@emotion/styled";
+import { e as S, S as i, o as V, a as b, b as Y, u as D, A as z, R as c, D as o, k as I, H as _ } from "./index-B9wG56Sb.js";
+import O from "./TrendChart-C6eEpBKz.js";
+import { N as J } from "./NoDataChart-B_yk9del.js";
+import { I as Q } from "./InsightsSection-DeLBGRXz.js";
+import { T as U } from "./TransactionList-we_zUYsL.js";
+const X = r.div`
+  display: inline-block;
+`, Z = r.div`
+  background-color: ${(e) => e.theme.colors.grey3};
+  display: flex;
+  align-items: center;
+  padding: ${i.sp0} ${i.sp3};
+  border-radius: ${i.sp6};
+  height: ${i.sp6};
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    background-color: ${(e) => e.theme.colors.grey2};
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, W = r.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`, ee = r(V)`
+  margin-right: ${i.sp2};
+`, te = r(Y)`
+  width: ${i.sp3};
+  height: ${i.sp3};
+  color: inherit;
+  &:hover {
+    color: inherit;
+  }
+`;
+function ie({
+  selectedTimeframeTick: e,
+  onTimeFilterClosed: n
+}) {
+  const l = () => {
+    n?.();
+  };
+  return /* @__PURE__ */ t.jsx(X, { children: /* @__PURE__ */ t.jsx(
+    Z,
+    {
+      onClick: l,
+      "data-testid": S("time-filter-indicator"),
+      children: /* @__PURE__ */ t.jsxs(W, { children: [
+        /* @__PURE__ */ t.jsx(ee, { children: ne(e) }),
+        /* @__PURE__ */ t.jsx(te, { preserveAspectRatio: "none" })
+      ] })
+    }
+  ) });
+}
+const ne = (e) => {
+  const n = e.startDate, l = b.getLocalizedStrings();
+  return `${n.format(l.dateFormat.visual.MMMYYFormat)}`;
+}, re = {
+  filterMarginLeft: new c(o[3], o[8])
+}, oe = r.div`
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  flex-direction: column;
+`, ae = r.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  margin: ${i.sp0};
+`, se = r.div`
+  margin: ${(e) => `${i.sp4} ${i.sp0} ${i.sp3} 
+    ${re.filterMarginLeft.valuePx(e.windowSize)}`};
+`, de = r.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: ${i.sp8};
+`;
+function le({
+  firstMonthOfFY: e,
+  selectedTimePeriod: n,
+  showSelectedPeriodTags: l,
+  fetchState: s,
+  transactions: d,
+  isDetailPage: g,
+  onTransactionItemClick: m,
+  onSelectedTimePeriodClear: u,
+  onLoadPreviousTransactionsClick: P,
+  onTransactionListHeightChanged: p
+}) {
+  const $ = s === "In-Progress" || s === "Not-Started", v = d.length === 0 && $, w = d.length > 0 && $, L = g !== !0 && l !== !0 ? {
+    isLoading: w && (s === "In-Progress" || s === "Not-Started"),
+    onLoadPreviousClick: (T, H) => {
+      P?.(T, H);
+    }
+  } : void 0, h = D();
+  return /* @__PURE__ */ t.jsx(
+    oe,
+    {
+      "data-testid": S("trend-transactions-list-container"),
+      children: v === !1 ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+        g === !1 && l === !0 && n != null && /* @__PURE__ */ t.jsx(se, { windowSize: h, children: /* @__PURE__ */ t.jsx(
+          ie,
+          {
+            selectedTimeframeTick: n,
+            onTimeFilterClosed: u
+          }
+        ) }),
+        n != null && /* @__PURE__ */ t.jsx(
+          ae,
+          {
+            "data-testid": S("trend-transactions-list"),
+            children: /* @__PURE__ */ t.jsx(
+              U,
+              {
+                firstMonthOfFY: e,
+                timeframe: "quarter",
+                timePeriod: n,
+                transactions: d,
+                isFirstLotLoading: $ && !w,
+                componentName: "trend.transactions.list",
+                trackPerformance: !1,
+                onTransactionItemClick: m,
+                showLoadPrevious: L,
+                onListInnerElementHeightChanged: p
+              }
+            )
+          }
+        )
+      ] }) : /* @__PURE__ */ t.jsx(de, { children: /* @__PURE__ */ t.jsx(z, { size: "Standard", start: !0 }) })
+    }
+  );
+}
+const a = {
+  headingMarginLeftRight: new c(o[3], o[8]),
+  headingMarginTop: new c(o[3], o[6]),
+  headingMarginTopDetail: new c(0, 0),
+  headingMarginBottom: new c(o[4], o[5]),
+  chartMarginLeftRight: new c(o[3], o[8]),
+  smallHeadingMarginTop: new c(o[7], o[5]),
+  smallHeadingMarginBottom: new c(o[4], o[3])
+}, y = {
+  trendChartHeight: 360,
+  emptyTrendChartHeight: new c(360, 432),
+  selectedTimeHeight: 136,
+  // 80 size of time filter + 56 bottom spacer
+  loaderTrendChartHeight: new c(470, 470)
+}, ce = r.div`
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${(e) => e.isDetailPage === !0 || e.page === "vendorDetailPage" ? e.theme.colors.grey4 : e.theme.colors.grey5};
+`, ge = r.div`
+  display: flex;
+  justify-content: center;
+  padding: ${i.sp6} ${i.sp8};
+`, he = r.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  height: 360px;
+  margin: ${(e) => `${i.sp0} ${a.chartMarginLeftRight.valuePx(
+  e.windowSize
+)}`};
+  margin-bottom: ${(e) => e.bottomMarginNeeded === !0 ? i.sp8 : i.sp0};
+`, me = r(_)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-top: ${(e) => a.headingMarginTop.valuePx(e.windowSize)};
+  margin-left: ${(e) => a.headingMarginLeftRight.valuePx(e.windowSize)};
+  margin-bottom: ${(e) => a.headingMarginBottom.valuePx(e.windowSize)};
+  margin-right: ${(e) => a.headingMarginLeftRight.valuePx(e.windowSize)};
+`, ue = r(I)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-top: ${(e) => a.smallHeadingMarginTop.valuePx(e.windowSize)};
+  margin-left: ${(e) => a.headingMarginLeftRight.valuePx(e.windowSize)};
+  margin-bottom: ${(e) => a.smallHeadingMarginBottom.valuePx(e.windowSize)};
+  margin-right: ${(e) => a.headingMarginLeftRight.valuePx(e.windowSize)};
+`, xe = r(I)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-top: ${(e) => a.headingMarginTopDetail.valuePx(e.windowSize)};
+  margin-left: ${(e) => a.headingMarginLeftRight.valuePx(e.windowSize)};
+  margin-bottom: ${(e) => a.headingMarginBottom.valuePx(e.windowSize)};
+  margin-right: ${(e) => a.headingMarginLeftRight.valuePx(e.windowSize)};
+`, fe = r.div`
+  display: flex;
+  margin: ${i.sp0} ${i.sp8};
+`, pe = r.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  height: ${(e) => e.height}px;
+`, $e = r.div`
+  position: relative;
+  box-shadow: ${(e) => e.page === "vendorDetailPage" ? "unset" : `${i.sp0} 2px ${i.sp1} ${e.theme.colors.dropShadowNormal}`};
+  background-color: ${(e) => e.page === "vendorDetailPage" ? e.theme.colors.grey4 : e.theme.colors.grey5};
+`, ve = r.div`
+  position: relative;
+`, we = r.div`
+  flex: 1 1 auto;
+  display: flex;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, je = r.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: ${(e) => e.isDetailPage === !0 ? "inherited" : "100vh"};
+  margin-top: ${i.sp8};
+`, Ce = r.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: ${(e) => y.loaderTrendChartHeight.valuePx(e.windowSize)};
+  margin-top: ${i.sp8};
+`;
+function Re({
+  firstMonthOfFY: e,
+  trendWithTransactionsReport: n,
+  graphColor: l,
+  isDetailPage: s,
+  initialTransactionListHeight: d = 5,
+  page: g,
+  onTransactionItemClick: m,
+  onTimePeriodChange: u
+}) {
+  const P = n.fetchState !== "Completed", p = n.selectedPeriod ?? {
+    timeframe: "quarter",
+    timePeriod: n.transactionTimePeriod
+  }, $ = "month", v = p?.timeframe === "month", w = n.trendReport?.dataAvailable == null, L = () => n.trendReport?.fetchState === "In-Progress" && n.fetchState === "Completed", h = n.trendReport?.trendReport, T = () => {
+    u?.("TransactionList");
+  }, H = (x, f) => {
+    const C = {
+      timeframe: f,
+      addTimePeriod: x,
+      currentTimePeriod: n.selectedPeriod?.timePeriod
+    };
+    u?.("TransactionListLoadMore", C);
+  }, j = D(), [N, B] = G(d), M = K(null), R = () => {
+    const x = h?.insights != null && h?.insights.length > 0;
+    return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      w ? L() ? /* @__PURE__ */ t.jsx(Ce, { windowSize: j, children: /* @__PURE__ */ t.jsx(z, { size: "Standard", start: !0 }) }) : /* @__PURE__ */ t.jsx(fe, { children: /* @__PURE__ */ t.jsx(
+        J,
+        {
+          title: b.getLocalizedStrings().chartCard.no_data_available
+        }
+      ) }) : /* @__PURE__ */ t.jsx(
+        he,
+        {
+          windowSize: j,
+          "data-testid": S(
+            "trend-with-transactions-chart",
+            g
+          ),
+          bottomMarginNeeded: !x,
+          children: /* @__PURE__ */ t.jsx(q, { children: ({ height: f, width: C }) => /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(
+            O,
+            {
+              firstMonthOfFY: e,
+              trendReport: h,
+              timeframe: $,
+              selectedTimePeriod: v === !0 ? p?.timePeriod : void 0,
+              graphColor: l,
+              onTimeframeSelectionChanged: (F, E) => {
+                u?.("Chart", {
+                  timeframe: F,
+                  addTimePeriod: E
+                });
+              },
+              width: C,
+              height: f
+            }
+          ) }) })
+        }
+      ),
+      h?.insights != null && h?.insights.length > 0 && /* @__PURE__ */ t.jsx(ge, { ref: M, children: /* @__PURE__ */ t.jsx(Q, { insights: h?.insights }) })
+    ] });
+  }, k = (x) => /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(
+    le,
+    {
+      firstMonthOfFY: x.firstMonthOfFY,
+      selectedTimePeriod: p?.timePeriod,
+      showSelectedPeriodTags: v,
+      isDetailPage: s,
+      fetchState: n.transactionView?.fetchState ?? "Not-Started",
+      transactions: n.transactionView?.transactions ?? [],
+      onTransactionItemClick: m,
+      onLoadPreviousTransactionsClick: H,
+      onSelectedTimePeriodClear: T,
+      onTransactionListHeightChanged: (f) => {
+        B(f);
+      }
+    }
+  ) }), A = (x) => {
+    const f = M.current != null ? M.current.clientHeight : 56;
+    return (w === !0 ? y.emptyTrendChartHeight.value(j) : y.trendChartHeight) + (v === !0 ? y.selectedTimeHeight : 0) + f + x;
+  };
+  return /* @__PURE__ */ t.jsx(ce, { page: g, isDetailPage: s, children: P === !0 ? /* @__PURE__ */ t.jsx(je, { isDetailPage: s, children: /* @__PURE__ */ t.jsx(z, { size: "Standard", start: !0 }) }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(
+      ye,
+      {
+        windowSize: j,
+        report: n,
+        isDetailPage: s,
+        page: g
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      pe,
+      {
+        windowSize: j,
+        height: A(N),
+        children: s === !0 ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+          /* @__PURE__ */ t.jsx(ve, { children: /* @__PURE__ */ t.jsx(R, {}) }),
+          /* @__PURE__ */ t.jsx(k, { firstMonthOfFY: e })
+        ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+          /* @__PURE__ */ t.jsx($e, { page: g, children: /* @__PURE__ */ t.jsx(R, {}) }),
+          /* @__PURE__ */ t.jsx(we, { children: /* @__PURE__ */ t.jsx(k, { firstMonthOfFY: e }) })
+        ] })
+      }
+    )
+  ] }) });
+}
+const ye = ({
+  windowSize: e,
+  report: n,
+  isDetailPage: l,
+  page: s
+}) => {
+  const d = n.trendReport?.trendReport;
+  if (d == null)
+    return null;
+  const g = d?.balancesKind === "income" ? d.customer.name : d.vendor.name, m = b.getLocalizedStrings().reports.trend[d?.balancesKind];
+  if (l)
+    return /* @__PURE__ */ t.jsx(xe, { windowSize: e, children: m });
+  const u = g + " " + m;
+  return s === "vendorDetailPage" ? /* @__PURE__ */ t.jsx(ue, { windowSize: e, children: m }) : /* @__PURE__ */ t.jsx(me, { windowSize: e, children: u });
+};
+export {
+  Re as T
+};