@zeniai/web-components 3.16.60 → 3.16.62

package/dist/ReportTableViewSelector-knfHrTuI.js

@@ -0,0 +1,679 @@
+import { f as fe, u as X, j as o, z as ge, k as K, b as xe, g as ye, C as be, F as _e } from "./vendor-.pnpm-DtFedGku.js";
+import { a as ee, f as we, g as $e, S as a, p as ve, aw as ke, D as p, u as ce, R as I, f8 as je, f9 as oe, ap as Ne, _ as Ce, E as de, b2 as De, G as Se } from "./index-DosfnUdx.js";
+import "@zeniai/client-epic-state";
+import he, { useState as _, useEffect as Q } from "react";
+import d from "@emotion/styled";
+import { u as R, C as Ie } from "./CollapsableReportTable-BEEd8gul.js";
+import { S as Re } from "./filter-cZIFUNvj.js";
+const F = ee.getLocalizedStrings().dateFormat.analytics.YYYYDashMMDashDDFormat, Te = (e) => ({
+  this_period: {
+    start_date: e.thisPeriod.startDate.format(F),
+    end_date: e.thisPeriod.endDate.format(F)
+  },
+  number_of_periods: e.numberOfPeriods,
+  order_by: e.orderBy
+}), Oe = (e) => e != null ? {
+  start_date: e.startDate.format(F),
+  end_date: e.endDate.format(F)
+} : void 0;
+function Pe(e) {
+  return {
+    locale_id: e.localeId,
+    show_negative_amount_in_parenthesis: e.showNegativeAmountInParenthesis,
+    filter_accounts_with_nil_balances: e.filterAccountsWithNilBalances,
+    filter_account_groups_with_nil_balances: e.filterAccountGroupsWithNilBalances,
+    include_cover_page: e.includeCoverPage,
+    company_name: e.companyName,
+    statement_file_type: e.statementFileType,
+    statements: e.statements,
+    first_month_of_fy: e.firstMonthOfFY,
+    book_close_date: e.bookCloseDate != null ? e.bookCloseDate.format(F) : void 0,
+    timeframe: e.timeframe,
+    additional_balances: e.additionalBalances,
+    format: e.format,
+    balances_filter: Te(e.balancesFilter),
+    account_view_mode: e.accountViewMode,
+    classes_to_filter_out: e.classesToFilterOut,
+    data_available: Oe(e.dataAvailable),
+    is_zeni_coa_used: e.isZeniCOAUsed
+  };
+}
+async function ho(e, c, r) {
+  const t = ee.getLocalizedStrings().downloadReport, s = `${e}?query=${encodeURIComponent(
+    JSON.stringify(Pe(r))
+  )}`;
+  try {
+    const h = await we({
+      urlEndPoint: s,
+      authParams: c,
+      fileType: r.statementFileType
+    });
+    if (h.ok) {
+      const x = $e(
+        h.headers,
+        t.defaultFileName
+      ), y = await h.arrayBuffer();
+      fe(y, x);
+    } else
+      console.error(`${t.reportErrorMessage} ${h.statusText}`);
+  } catch (h) {
+    console.error(`${t.reportErrorMessage} ${JSON.stringify(h)}`);
+  }
+}
+const Be = d.div`
+  padding: 0 ${a.sp3} 0 ${a.sp3};
+  border: 1px solid ${(e) => e.theme.colors.primary};
+  background: ${(e) => e.theme.colors.grey5};
+  border-radius: ${a.sp1};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  height: ${a.sp8};
+  cursor: pointer;
+`, Ee = d(ve)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-top: -2px;
+`, ze = d(ke)`
+  color: ${(e) => e.theme.colors.hero};
+  width: 12px;
+  height: 12px;
+  margin: auto ${a.sp0};
+  :hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Ae = (e) => {
+  const { value: c, onClick: r } = e, t = X();
+  return /* @__PURE__ */ o.jsxs(Be, { onClick: r, children: [
+    /* @__PURE__ */ o.jsx(Ee, { style: { color: t.colors.primary }, children: c }),
+    /* @__PURE__ */ o.jsx(ze, {})
+  ] });
+}, Le = he.memo(Ae);
+function We({
+  backgroundColor: e,
+  foregroundColor: c,
+  animated: r,
+  width: t,
+  height: s
+}) {
+  return /* @__PURE__ */ o.jsxs(
+    ge,
+    {
+      speed: 2,
+      width: t,
+      height: s,
+      viewBox: `0 0 ${t} ${s}`,
+      animate: r != !1,
+      backgroundColor: e,
+      foregroundColor: c,
+      style: { marginBottom: a.sp2 },
+      children: [
+        /* @__PURE__ */ o.jsx("rect", { x: "45", y: p[3], rx: "5", ry: "5", width: "120", height: p[4] }),
+        /* @__PURE__ */ o.jsx("rect", { x: "45", y: p[8], rx: "5", ry: "5", width: "120", height: p[4] }),
+        /* @__PURE__ */ o.jsx("rect", { x: "45", y: "96", rx: "5", ry: "5", width: "120", height: p[4] }),
+        /* @__PURE__ */ o.jsx("rect", { x: "45", y: "136", rx: "5", ry: "5", width: "120", height: p[4] })
+      ]
+    }
+  );
+}
+function ue({
+  nestedClass: e,
+  isLastNode: c,
+  config: r,
+  parentNodeIDs: t
+}) {
+  const s = R("checkbox_and_name_only", [], e.classId[0]), h = {
+    children: [],
+    id: s,
+    isLastNode: c,
+    reportElementData: {
+      element: {
+        kind: "checkbox_and_name_only",
+        title: e.className,
+        data: e,
+        numOfBalances: 0
+      },
+      config: r
+    }
+  };
+  return h.children = e.children.map(
+    (x, y) => ue({
+      nestedClass: x,
+      config: r,
+      isLastNode: y === e.children.length - 1,
+      parentNodeIDs: [...t, s]
+    })
+  ), h;
+}
+function Me(e, c) {
+  const r = e.map((t, s) => {
+    const h = R(
+      "checkbox_and_name_only",
+      [],
+      t.classId[0]
+    ), x = {
+      children: [],
+      id: h,
+      isLastNode: t.children.length !== 0,
+      reportElementData: {
+        element: {
+          kind: "checkbox_and_name_only",
+          title: t.className,
+          data: t,
+          numOfBalances: 0
+        },
+        config: c
+      }
+    }, y = t.children.map(
+      (T) => ue({
+        nestedClass: T,
+        config: c,
+        isLastNode: s === t.children.length - 1,
+        parentNodeIDs: [h]
+      })
+    );
+    return x.children.push(...y), x;
+  });
+  return {
+    config: c,
+    headerNodes: [],
+    contentNodes: [...r]
+  };
+}
+function Fe(e, c) {
+  Object.assign(e.config, c);
+  const r = e.contentNodes;
+  return r.forEach(
+    (t) => pe(t, c)
+  ), {
+    config: c,
+    headerNodes: [],
+    contentNodes: [...r]
+  };
+}
+function pe(e, c) {
+  Object.assign(e.reportElementData.config, c), e.children.forEach(
+    (r) => pe(r, c)
+    // Note: recursive call!
+  );
+}
+const te = {
+  contentPaddingLeft: new I(p[3], p[3], p[2]),
+  contentPaddingRight: new I(p[3], p[3], p[2])
+}, He = d.div`
+  height: ${(e) => e.height}px;
+  width: 100%;
+`, Ye = ({
+  reportId: e,
+  firstMonthOfFY: c,
+  nestedClassHierarchy: r,
+  classesToBeFilteredOut: t,
+  selectedView: s,
+  showClassAccountNumber: h,
+  scrollPosition: x,
+  onScroll: y,
+  nodeOpenStatus: T,
+  onNodeCollapseToggled: V,
+  onToggleCheck: O
+}) => {
+  const H = X(), Y = ce(), [$, N] = _(
+    void 0
+  ), [A, b] = _(!1), [L, P] = _({}), [f, W] = _(
+    void 0
+  ), [B, v] = _(s), q = "none", E = (i) => s === "account_group" ? !0 : t?.length > 0 ? t.find((l) => l[0] === i[0]) != null : !1, C = (i, l) => {
+    b(!0), P(i), O?.(
+      i,
+      l,
+      s === "account_group" ? !0 : void 0
+    ), w(i, l);
+  }, w = (i, l) => {
+    const m = G(i);
+    for (const k of m.children)
+      O?.(k.classId, l), w(k.classId, l);
+  }, G = (i) => {
+    let l = r.filter(
+      (m) => m.classId[0] === i[i.length - 1]
+    )[0];
+    for (let m = i.length - 2; m >= 0; m--)
+      l = l.children.filter(
+        (k) => k.classId[0] === i[m]
+      )[0];
+    return l;
+  }, U = (i) => {
+    if (i.length > 1) {
+      const l = G(i.slice(1));
+      let m = !1;
+      for (const k of l.children)
+        if (t.find(
+          (n) => n[0] === k.classId[0]
+        ) === void 0) {
+          m = !0;
+          break;
+        }
+      m === !0 ? O?.(l.classId, !0) : O?.(l.classId, !1), P(l.classId);
+    }
+  };
+  Q(() => {
+    A && U(L);
+  }), Q(() => {
+    const i = {
+      reportId: e,
+      displayOrder: "ascending_date",
+      reportFormat: "more_detailed",
+      mode: q,
+      firstMonthOfFY: c,
+      filterAccountsWithNilBalances: "off",
+      filterAccountGroupsWithNilBalances: "off",
+      showNegativeAmountInParenthesis: !1,
+      isClassToBeFilteredOut: E,
+      showClassAccountNumber: h
+    };
+    if ($ == null || !K(f, r) || !K(B, s) || A === !0) {
+      const l = Me(
+        r,
+        i
+      );
+      W(r), N(l), v(s);
+    } else {
+      const l = Fe(
+        $,
+        i
+      );
+      N(l), v(s);
+    }
+  }, [r, s, t]);
+  const [J, Z] = _(5), z = (i) => {
+    const l = i + p[6];
+    Z(l);
+  };
+  return $ != null ? /* @__PURE__ */ o.jsx(He, { height: J, children: /* @__PURE__ */ o.jsx(
+    Ie,
+    {
+      backgroundColor: s === "classes" ? new xe(H.colors.background) : void 0,
+      rootNodes: $,
+      type: "name_only",
+      compareMode: "compare_mode_amount",
+      isSticky: {
+        isStickyHeader: !1,
+        isStickyName: !1
+      },
+      treeNodePadding: {
+        left: te.contentPaddingLeft.value(Y),
+        right: te.contentPaddingRight.value(Y)
+      },
+      scrollPosition: x,
+      onScroll: y,
+      nodeOpenStatus: T,
+      onNodeCollapseToggled: V,
+      onToggleCheck: C,
+      onReportTableHeightChanged: z
+    }
+  ) }) : null;
+}, j = {
+  width: new I(350, 400, 400),
+  height: new I(165, 165, 165),
+  buttonWidth: new I(62, 62),
+  buttonHeight: new I(p[5], p[5]),
+  containerWidth: new I(150, 400, 400)
+}, qe = d.div`
+  position: relative;
+  pointer-events: ${(e) => e.isDisabled === !0 ? "none" : "initial"};
+`, Ge = d.div`
+  display: flex;
+  flex-direction: column;
+  width: ${(e) => j.containerWidth.valuePx(e.windowSize)};
+`, Ue = d(Ce)`
+  display: flex;
+  flex-direction: row;
+  width: fit-content;
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.primary};
+  .dropdownIcon {
+    color: ${(e) => e.theme.colors.hero};
+  }
+  &:hover {
+    .dropdownIcon {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+  gap: ${a.sp2};
+  margin-top: 12px;
+  align-items: center;
+`, Je = d(Re)`
+  color: ${(e) => e.theme.colors.hero};
+  width: ${a.sp4};
+  height: ${a.sp4};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Ve = d.div`
+  display: flex;
+  width: ${(e) => e.width}px;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-direction: column;
+  border: 1px solid ${(e) => e.theme.colors.grey5};
+  border-radius: ${a.sp1};
+  box-shadow: ${(e) => `${a.sp0} 2px ${a.sp2} ${e.theme.colors.dropShadowHover}`};
+  margin-top: 10px;
+  padding-top: ${a.sp1};
+  background: ${(e) => e.theme.colors.grey5};
+`, ne = d.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${(e) => e.checked === !0 ? e.theme.colors.background : "transparent"};
+  & input[type="radio"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    display: inline-block;
+    width: ${a.sp3};
+    height: ${a.sp3};
+    padding: 2px;
+    background-clip: content-box;
+    border: 1px solid ${(e) => e.theme.colors.primary};
+    border-radius: 50%;
+    margin: ${a.sp0} ${a.sp2} ${a.sp0} ${a.sp2};
+    cursor: pointer;
+  }
+
+  input[type="radio"]:checked {
+    background-color: ${(e) => e.theme.colors.primary};
+  }
+
+  input[type="radio"]:disabled {
+    cursor: default;
+  }
+
+  &:hover {
+    background: ${(e) => e.theme.colors.background};
+  }
+`, re = d(Se)`
+  height: ${a.sp6};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`, Ze = d.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  height: 100%;
+  width: inherit;
+  overflow-y: auto;
+  .hide-icon {
+    display: none;
+  }
+  min-height: 165px;
+  max-height: 353px;
+  overscroll-behavior: contain;
+`, Ke = d.div`
+  width: 100%;
+  height: 65px;
+`, ae = d.label`
+  color: ${(e) => e.theme.colors.primary};
+  cursor: ${(e) => e.disabled === !0 ? "default" : "pointer"};
+`, Qe = d(de)`
+  display: flex;
+  align-items: center;
+  column-gap: ${a.sp2};
+  margin-left: ${a.sp5};
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    cursor: pointer;
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Xe = d.div`
+  display: flex;
+  flex: 1;
+  width: inherit;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, eo = d(De)`
+  width: ${a.sp3};
+  height: ${a.sp3};
+`, oo = d(de)`
+  margin-left: ${a.sp5};
+  margin-top: -12px;
+  color: ${(e) => e.theme.colors.hero};
+`, {
+  reportViewSelector: S,
+  common: { footer: se }
+} = ee.getLocalizedStrings(), le = "tableViewSelector", ie = (e) => `${e}_form`;
+function uo({
+  reportId: e,
+  firstMonthOfFY: c,
+  nodes: r,
+  classesListFetchState: t,
+  selectedView: s,
+  classesToBeFilteredOut: h,
+  showClassAccountNumber: x,
+  onOpenAccountViewMode: y,
+  onSaveClick: T,
+  isClassViewDisabled: V,
+  downloadPage: O,
+  showAccountGroups: H = !0,
+  onResyncReports: Y,
+  isPageFetchInProgress: $ = !1,
+  lastRefreshSuccessTime: N
+}) {
+  const A = X(), b = ce(), [L, P] = _(!1), [f, W] = _(s), [B, v] = _(
+    {}
+  ), q = (n, u) => (n.forEach((g) => {
+    u.push(g.classId), u = q(g.children, u);
+  }), u), E = q(r, []), [C, w] = _(
+    f === "classes" ? h : E
+  ), G = t !== "Completed" || f === "classes" && C.length === E.length;
+  je({
+    componentName: `reports.${e}`
+  });
+  const U = (n) => n === "classes" ? S.classes.label : H === !0 ? S.accountGroups.label : S.accounts.label, J = ye({
+    mode: "all"
+  }), Z = J.handleSubmit(() => {
+    P(!1), f === "classes" ? T?.("classes", C) : T?.("account_group");
+  }), z = (n) => {
+    if (W(n), n === "classes")
+      v({}), w([]);
+    else {
+      w(E);
+      let u = {};
+      r.forEach((g) => {
+        const D = R(
+          "checkbox_and_name_only",
+          [],
+          g.classId[0]
+        );
+        u = Object.assign({}, u, { [D]: !1 });
+      }), v(u);
+    }
+  }, i = () => {
+    L === !0 && m(), P(!L);
+    let n = {};
+    r.forEach((u) => {
+      const g = R(
+        "checkbox_and_name_only",
+        [],
+        u.classId[0]
+      );
+      s === "account_group" || C.find((D) => D[0] === u.classId[0]) !== void 0 ? n = Object.assign({}, n, { [g]: !1 }) : n = Object.assign({}, n, { [g]: !0 });
+    }), v(n);
+  }, l = (n, u, g) => {
+    if (g === !0 && (W("classes"), w(E)), u === !0) {
+      const D = R("checkbox_and_name_only", [], n[0]);
+      B[D] = !0, v(B), w(
+        (M) => M.filter((me) => me[0] !== n[0])
+      );
+    } else {
+      const D = R("checkbox_and_name_only", [], n[0]);
+      B[D] = !1, C.find((M) => M[0] === n[0]) === void 0 && w((M) => [...M, n]);
+    }
+  }, m = () => {
+    P(!1), W(s), w(h);
+  }, k = () => {
+    $ === !1 && Y?.();
+  };
+  return Q(() => {
+    if (t === "Completed" && f === "account_group") {
+      let n = {};
+      r.forEach((u) => {
+        const g = R(
+          "checkbox_and_name_only",
+          [],
+          u.classId[0]
+        );
+        n = Object.assign({}, n, { [g]: !1 });
+      }), v(n);
+    }
+  }, [t]), /* @__PURE__ */ o.jsx(be, { onClickAway: m, children: /* @__PURE__ */ o.jsxs(qe, { isDisabled: V ?? !1, children: [
+    O === !0 ? /* @__PURE__ */ o.jsx(
+      Le,
+      {
+        value: U(s),
+        onClick: () => {
+          y?.(), i();
+        }
+      }
+    ) : /* @__PURE__ */ o.jsxs(Ge, { windowSize: b, children: [
+      /* @__PURE__ */ o.jsxs(
+        Ue,
+        {
+          onClick: (n) => {
+            n.preventDefault(), y?.(), i();
+          },
+          children: [
+            /* @__PURE__ */ o.jsx(Je, { className: "dropdownIcon" }),
+            U(s)
+          ]
+        }
+      ),
+      s === "classes" ? /* @__PURE__ */ o.jsx(Qe, { onClick: k, children: $ ? S.generatingReportByClass : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+        N && `${oe(N)}`,
+        /* @__PURE__ */ o.jsx(eo, {})
+      ] }) }) : null
+    ] }),
+    L ? /* @__PURE__ */ o.jsx(_e, { ...J, children: /* @__PURE__ */ o.jsx("form", { id: ie(le), onSubmit: Z, children: /* @__PURE__ */ o.jsxs(Ve, { width: j.width.value(b), children: [
+      /* @__PURE__ */ o.jsx(ne, { checked: f === "account_group", children: /* @__PURE__ */ o.jsxs(
+        re,
+        {
+          onClick: () => f !== "account_group" ? z("account_group") : null,
+          children: [
+            /* @__PURE__ */ o.jsx(
+              "input",
+              {
+                type: "radio",
+                value: "account_group",
+                id: "accountGroups",
+                name: "formgroup",
+                onChange: (n) => z(
+                  n.currentTarget.value
+                ),
+                checked: f === "account_group",
+                disabled: t !== "Completed"
+              }
+            ),
+            /* @__PURE__ */ o.jsx(
+              ae,
+              {
+                disabled: t !== "Completed",
+                children: H === !0 ? S.accountGroups.dropdownLabel : S.accounts.dropdownLabel
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ o.jsx(Xe, {}),
+      /* @__PURE__ */ o.jsxs(ne, { checked: f === "classes", children: [
+        /* @__PURE__ */ o.jsxs(
+          re,
+          {
+            onClick: () => t === "Completed" ? z("classes") : null,
+            children: [
+              /* @__PURE__ */ o.jsx(
+                "input",
+                {
+                  type: "radio",
+                  value: "classes",
+                  id: "classes",
+                  name: "formgroup",
+                  onChange: (n) => t === "Completed" ? z(
+                    n.currentTarget.value
+                  ) : null,
+                  checked: f === "classes",
+                  disabled: t !== "Completed"
+                }
+              ),
+              /* @__PURE__ */ o.jsx(
+                ae,
+                {
+                  disabled: t !== "Completed",
+                  children: S.classes.dropdownLabel
+                }
+              )
+            ]
+          }
+        ),
+        $ || t !== "Completed" ? null : /* @__PURE__ */ o.jsx(oo, { children: N && `${oe(N)}` }),
+        t === "Completed" ? /* @__PURE__ */ o.jsx(Ze, { id: "sectionformcontainer", children: /* @__PURE__ */ o.jsx(
+          to,
+          {
+            reportId: e,
+            firstMonthOfFY: c,
+            nestedClassHierarchy: r,
+            classesToBeFilteredOut: C,
+            selectedView: f,
+            nodeOpenStatus: B,
+            showClassAccountNumber: x,
+            onToggleCheck: l
+          }
+        ) }) : /* @__PURE__ */ o.jsx(
+          We,
+          {
+            backgroundColor: A.colors.grey3,
+            foregroundColor: A.colors.grey4,
+            width: j.width.value(b),
+            height: j.height.value(b),
+            animated: !0
+          }
+        )
+      ] }),
+      /* @__PURE__ */ o.jsx(Ke, { children: /* @__PURE__ */ o.jsx(
+        Ne,
+        {
+          formId: ie(le),
+          primaryBtn: {
+            label: se.save,
+            style: {
+              width: j.buttonWidth.valuePx(b),
+              height: j.buttonHeight.valuePx(b)
+            },
+            isLoading: !1,
+            isDisabled: G,
+            size: "small"
+          },
+          showCancel: !0,
+          cancelBtn: {
+            label: se.cancel,
+            style: {
+              width: j.buttonWidth.valuePx(b),
+              height: j.buttonHeight.valuePx(b)
+            },
+            onClick: m,
+            size: "small",
+            shouldResetOnCancel: !0
+          },
+          style: {
+            padding: a.sp3
+          }
+        }
+      ) })
+    ] }) }) }) : null
+  ] }) });
+}
+const to = he.memo(Ye, K);
+export {
+  uo as R,
+  ho as d
+};