@zeniai/web-components 3.17.12 → 3.17.14

package/dist/ReportTableViewSelector-Cpbi_aUt.js

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