@zeniai/web-components 3.17.1 → 3.17.2

package/dist/OpExByVendorPage-DH0yct9O.js

@@ -1,1058 +0,0 @@
-import { j as a, k as de, u as J, A as me, f as ve, l as we, b as Te } from "./vendor-.pnpm-B2klaOGU.js";
-import ke, { useRef as q, useState as R, useEffect as M, useCallback as oe } from "react";
-import p from "@emotion/styled";
-import { a as B, C as t, S as f, o as he, D as j, t as re, dM as Be, f as je, g as De, u as U, jz as Ie, fa as Se, e as $e, z as Ne, jy as Pe, eV as Re, aE as Oe, jA as Ae, jB as Ee, P as Le, A as ze, R as z, dK as Me } from "./index-DOPIZEh4.js";
-import { ComposedChart as Fe, CartesianGrid as Ve, XAxis as We, YAxis as Ke, Tooltip as Ge, Bar as Ye } from "recharts";
-import { getOpexVendorTimeframeKey as He } from "@zeniai/client-epic-state";
-import { a as pe, c as te, g as qe, b as Je, m as H } from "./chartTypes-BumAsPmj.js";
-import { t as Ue } from "./toChartData-CW2UOsn6.js";
-import { t as F } from "./analyticsHelper-BLgOJ3AD.js";
-import { T as Xe } from "./TimeRangeSwitcher-Cc17kflM.js";
-import { T as Qe } from "./TimeframeSwitcherWithToggle-hlsXnl9i.js";
-import { N as Ze } from "./NoDataChart-tv2N2MOH.js";
-import { N as eo } from "./NoDataTable-DD9kG81t.js";
-import { B as oo, m as ae } from "./detailCommon-CLmahG3e.js";
-import { g as V } from "./getReferrerType-DjPOy76W.js";
-import { u as X, C as ro } from "./CollapsableReportTable-DRtxT8wE.js";
-import { m as ge } from "./mapTimeframeBalancesToTreeNode-ImCnhnoK.js";
-import { m as ne } from "./mapLoadingInProgressToTreeNode-HsFHQF8-.js";
-import { m as to } from "./mapSpacerToTreeNode-Dq3DCZnE.js";
-const ao = p.div`
-  display: flex;
-`, no = p.div`
-  flex: display;
-  opacity: 0.85;
-  width: 320px;
-  border-radius: ${f.sp1};
-  flex-direction: column;
-  padding: ${f.sp3};
-  background-color: ${(e) => e.theme.colors.black};
-`, se = p.div`
-  display: flex;
-  justify-content: space-between;
-`, le = p(he)`
-  color: ${(e) => e.color ?? t.neutralGrey2Light};
-  text-align: left;
-`, ie = p(he)`
-  color: ${(e) => e.color ?? t.neutralGrey2Light};
-  text-align: right;
-`, so = p.div`
-  margin: ${f.sp2} ${f.sp0} ${f.sp2} ${f.sp0};
-  width: 100%;
-  height: 1px;
-  background-color: ${t.neutralGrey3Dark};
-`, lo = ({
-  active: e,
-  payload: r,
-  barName: o
-}) => {
-  const n = [];
-  if (r !== void 0 && e === !0) {
-    const l = r.filter(
-      (C) => C.name == o
-    )[0], s = l.payload, h = l.color, i = {
-      amount: s.record[o].amount?.amount ?? 0,
-      currencyCode: s.record[o].amount?.currencyCode ?? "",
-      currencySymbol: s.record[o].amount?.currencySymbol ?? ""
-    }, c = {
-      amount: 0,
-      currencyCode: "",
-      currencySymbol: ""
-    };
-    let g = 0, m;
-    for (m in s.record)
-      m.endsWith("_actual") && (g += s.record[m].amount?.amount ?? 0);
-    c.amount = g, c.currencyCode = i.currencyCode, c.currencySymbol = i.currencySymbol, n.push({
-      barName: pe(o),
-      actual: i,
-      color: h,
-      total: c,
-      timeframeTick: s.timeLabel
-    });
-  }
-  return n;
-}, io = ({
-  barLabelsWithValues: e,
-  getVendorName: r
-}) => /* @__PURE__ */ a.jsx(ao, { children: /* @__PURE__ */ a.jsxs(no, { children: [
-  /* @__PURE__ */ a.jsxs(se, { children: [
-    /* @__PURE__ */ a.jsx(le, { color: e[0].color, children: `${r(
-      e[0].timeframeTick,
-      e[0].barName
-    )}` }),
-    /* @__PURE__ */ a.jsx(ie, { color: e[0].color, children: `${te(e[0].actual)}` })
-  ] }),
-  /* @__PURE__ */ a.jsx(so, {}),
-  /* @__PURE__ */ a.jsxs(se, { children: [
-    /* @__PURE__ */ a.jsx(le, { color: t.primaryDark, children: `${B.getLocalizedStrings().chartCard.total}` }),
-    /* @__PURE__ */ a.jsx(ie, { children: `${te(e[0].total)}` })
-  ] })
-] }) }), co = (e) => {
-  const r = lo({ ...e });
-  return r.length === 0 ? null : /* @__PURE__ */ a.jsx(
-    io,
-    {
-      barLabelsWithValues: r,
-      getVendorName: e.getVendorName
-    }
-  );
-}, mo = ke.memo(co), ce = [
-  t.graphColor34,
-  t.graphColor05,
-  t.graphColor08,
-  t.graphColor11,
-  t.graphColor13,
-  t.graphColor19,
-  t.graphColor29,
-  t.graphColor28,
-  t.graphColor20,
-  t.graphColor21,
-  t.graphColor22,
-  t.graphColor14,
-  t.graphColor35,
-  t.graphColor31,
-  t.graphColor33,
-  t.graphColor32,
-  t.graphColor36,
-  t.graphColor02,
-  t.graphColor06,
-  t.graphColor04,
-  t.graphColor10,
-  t.graphColor12,
-  t.graphColor15,
-  t.graphColor18,
-  t.graphColor17,
-  t.graphColor07,
-  t.graphColor34Dark,
-  t.graphColor05Dark,
-  t.graphColor08Dark,
-  t.graphColor11Dark,
-  t.graphColor13Dark,
-  t.graphColor19Dark,
-  t.graphColor29Dark,
-  t.graphColor28Dark,
-  t.graphColor20Dark,
-  t.graphColor21Dark,
-  t.graphColor22Dark,
-  t.graphColor14Dark,
-  t.graphColor35Dark,
-  t.graphColor31Dark,
-  t.graphColor33Dark,
-  t.graphColor32Dark,
-  t.graphColor36Dark,
-  t.graphColor02Dark,
-  t.graphColor06Dark,
-  t.graphColor04Dark,
-  t.graphColor10Dark,
-  t.graphColor12Dark,
-  t.graphColor15Dark,
-  t.graphColor18Dark,
-  t.graphColor17Dark,
-  t.graphColor07Dark
-];
-class N {
-  _barColors;
-  _barColorsKeyWise;
-  _defaultColor;
-  constructor() {
-    this._defaultColor = t.graphColor34, this._barColors = ce.slice(), this._barColorsKeyWise = /* @__PURE__ */ new Map();
-  }
-  static #e = new N();
-  getBarColor(r) {
-    const o = N.instance();
-    return o._barColorsKeyWise.has(r) || (o._barColors.length === 0 && (o._barColors = ce.slice()), o._barColorsKeyWise.set(
-      r,
-      o._barColors.shift() ?? o._defaultColor
-    )), o._barColorsKeyWise.get(r);
-  }
-  shouldUpdate(r) {
-    const o = N.instance(), n = Array.from(
-      o._barColorsKeyWise.keys()
-    ).sort();
-    return !de(n, r);
-  }
-  static init() {
-    return this.#e = new N(), this.#e;
-  }
-  static instance() {
-    return this.#e;
-  }
-}
-const ho = N.instance(), po = (e, r) => {
-  const o = /* @__PURE__ */ new Set(), n = {};
-  let l;
-  const s = r.top4VendorsAndOthers;
-  return Object.keys(s).length > 0 && Object.keys(s).forEach((h) => {
-    s[h].forEach(
-      (c, g) => {
-        const m = `vendor_${g}`, u = qe(m, "actual");
-        o.add(u), l == null && c.balance != null && (l = u), n[u] != null ? n[u].push({
-          key: u,
-          balance: c.balance
-        }) : n[u] = [
-          { key: u, balance: c.balance }
-        ];
-      }
-    );
-  }), l != null ? Ue(
-    e,
-    [...o],
-    l,
-    n
-  ) : void 0;
-}, go = p.div`
-  width: ${(e) => e.width}px;
-  height: ${(e) => e.height}px;
-`;
-function uo({
-  selectedRangeReport: e,
-  width: r,
-  height: o,
-  showBarHoverBackground: n = !1,
-  isDetailPage: l = !1
-}) {
-  const s = q(!1), h = ho, [i, c] = R(
-    void 0
-  );
-  M(() => {
-    s.current = !0;
-  }, []);
-  const g = po(
-    e.firstMonthOfFY,
-    e
-  ), m = () => {
-    const d = [];
-    return g?.orderedKeys.forEach((_) => {
-      const T = l === !0 && !s.current;
-      d.push(C(_, T));
-    }), d;
-  }, C = (d, _) => /* @__PURE__ */ a.jsx(
-    Ye,
-    {
-      name: d,
-      animationDuration: _ ? 500 : void 0,
-      style: { cursor: "pointer" },
-      dataKey: (T) => {
-        const b = T.record;
-        return (b[d]?.amount != null ? b[d].amount : void 0)?.amount ?? 0;
-      },
-      stackId: "chartByTimeSeries",
-      fill: h.getBarColor(pe(d)),
-      onMouseEnter: () => {
-        i !== d && c(d);
-      },
-      onMouseLeave: () => {
-        i != null && c(void 0);
-      }
-    },
-    d
-  ), u = ({
-    active: d,
-    payload: _
-  }) => _?.find(
-    (b) => b.name === i
-  ) != null && i != null && d === !0 ? /* @__PURE__ */ a.jsx(
-    mo,
-    {
-      active: d,
-      payload: _,
-      barName: i,
-      getVendorName: y
-    }
-  ) : null, y = (d, _) => {
-    const T = He(d);
-    try {
-      const b = _.split("_")[1];
-      return e.top4VendorsAndOthers[T][parseInt(b)].vendor.name;
-    } catch (b) {
-      return console.warn("Was not able to parse vendor index for tooltip ", b), "";
-    }
-  };
-  return g == null ? null : /* @__PURE__ */ a.jsx(
-    fo,
-    {
-      chartData: g,
-      showBarHoverBackground: n,
-      barElements: m(),
-      customToolTipContent: /* @__PURE__ */ a.jsx(u, {}),
-      width: r,
-      height: o,
-      isDetailPage: l === !0
-    }
-  );
-}
-const fo = ({
-  chartData: e,
-  barElements: r,
-  customToolTipContent: o,
-  width: n,
-  height: l,
-  showBarHoverBackground: s = !1,
-  isDetailPage: h
-}) => {
-  const i = J(), c = Je(e), g = s !== !1, m = h ? (n - 60) / H.operating_expenses_by_vendor * (H.operating_expenses_by_vendor - e.timeseries.length) : 20;
-  return /* @__PURE__ */ a.jsx(go, { width: n, height: l, children: /* @__PURE__ */ a.jsx(me, { children: ({ height: C, width: u }) => /* @__PURE__ */ a.jsxs(
-    Fe,
-    {
-      width: u,
-      height: C,
-      stackOffset: "sign",
-      data: e.recordByTimeseries,
-      barCategoryGap: "25%",
-      maxBarSize: h ? j[5] : 30,
-      margin: {
-        top: 5,
-        right: m,
-        left: 0,
-        bottom: 5
-      },
-      style: { display: "flex", flex: "1 1 auto" },
-      children: [
-        /* @__PURE__ */ a.jsx(
-          Ve,
-          {
-            horizontal: !0,
-            vertical: !1,
-            strokeWidth: 0.5,
-            stroke: i.colors.grey3
-          }
-        ),
-        /* @__PURE__ */ a.jsx(
-          We,
-          {
-            dataKey: (y) => y.timeLabel.label,
-            type: "category",
-            axisLine: { stroke: i.colors.grey3, strokeWidth: 0.5 },
-            tickLine: !1,
-            tick: {
-              color: i.colors.hero,
-              ...re.extraSmallRegular.cssObject
-            }
-          }
-        ),
-        /* @__PURE__ */ a.jsx(
-          Ke,
-          {
-            type: "number",
-            axisLine: !1,
-            tickLine: !1,
-            tick: {
-              color: i.colors.hero,
-              ...re.extraSmallRegular.cssObject
-            },
-            tickFormatter: (y) => Be("0,0.[00]a", y, c)
-          }
-        ),
-        /* @__PURE__ */ a.jsx(
-          Ge,
-          {
-            wrapperStyle: { zIndex: 2 },
-            cursor: g ? {
-              stroke: i.colors.background,
-              strokeWidth: (u - 120) / H.operating_expenses_by_vendor,
-              fill: i.colors.background
-            } : !1,
-            content: o,
-            allowEscapeViewBox: { x: !1, y: !0 }
-          }
-        ),
-        r
-      ]
-    }
-  ) }) });
-};
-function Co(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,
-    company_name: e.companyName,
-    statement_file_type: e.statementFileType,
-    timeframe: e.timeframe,
-    timezone: e.timezone,
-    additional_balances: e.additionalBalances,
-    format: e.format,
-    sort_key: e.sortKey,
-    sort_order: e.sortOrder,
-    is_compare_mode_on: e.isCompareModeOn,
-    search_string: e.searchString
-  };
-}
-function yo(e) {
-  const { isCompareModeOn: r, report: o, currentTenantCompanyName: n } = e, l = [];
-  if (r && (l.push("this_period_vs_last_period_percent"), l.push("this_period_vs_last_period")), o.dataAvailable != null)
-    return {
-      localeId: B.getAppLocaleID(),
-      showNegativeAmountInParenthesis: !0,
-      filterAccountsWithNilBalances: "filter_actual_nil_balances",
-      filterAccountGroupsWithNilBalances: "filter_actual_forecast_empty_account_group_balances",
-      companyName: n,
-      statementFileType: "excel",
-      timeframe: e.timeframe,
-      timezone: e.timezone,
-      additionalBalances: l,
-      format: e.reportType,
-      sortKey: e.sortKey,
-      sortOrder: e.sortOrder,
-      isCompareModeOn: e.isCompareModeOn,
-      searchString: e.searchString
-    };
-}
-function xo(e) {
-  const r = yo(e);
-  if (r != null)
-    return _o(
-      e.statementEndPoint,
-      e.authParams,
-      r
-    );
-}
-async function _o(e, r, o) {
-  const n = B.getLocalizedStrings().downloadReport, l = `${e}?query=${encodeURIComponent(
-    JSON.stringify(Co(o))
-  )}`;
-  try {
-    const s = await je({
-      urlEndPoint: l,
-      authParams: r,
-      fileType: o.statementFileType
-    });
-    if (s.ok) {
-      const h = De(
-        s.headers,
-        n.defaultFileName
-      ), i = await s.arrayBuffer();
-      ve(i, h);
-    } else
-      console.error(`${n.reportErrorMessage} ${s.statusText}`);
-  } catch (s) {
-    console.error(`${n.reportErrorMessage} ${JSON.stringify(s)}`);
-  }
-}
-function bo({
-  title: e,
-  balances: r,
-  config: o,
-  nodeId: n
-}) {
-  return {
-    children: [],
-    id: n ?? X("title_string_only", []),
-    isLastNode: !1,
-    reportElementData: {
-      element: {
-        kind: "title_string_only",
-        title: e,
-        data: r,
-        numOfBalances: r.length
-      },
-      config: o
-    }
-  };
-}
-function vo({
-  opExByVendor: e,
-  numOfBalances: r,
-  title: o,
-  isLastNode: n,
-  config: l
-}) {
-  const s = e.account?.accountName ?? "-", h = e.classBase?.className ?? "-", i = X("vendor_row", [], o + s + h);
-  return {
-    children: [],
-    id: i,
-    isLastNode: n,
-    reportElementData: {
-      element: {
-        kind: "vendor_row",
-        title: o,
-        data: e,
-        numOfBalances: r
-      },
-      config: l
-    }
-  };
-}
-function wo({
-  title: e,
-  balances: r,
-  config: o,
-  numOfBalances: n,
-  nodeId: l
-}) {
-  return {
-    children: [],
-    id: l ?? X("total", []),
-    isLastNode: !1,
-    reportElementData: {
-      element: {
-        kind: "total",
-        title: e,
-        data: r,
-        numOfBalances: n
-      },
-      config: o
-    }
-  };
-}
-const To = (e, r, o, n = !0) => {
-  const l = o.mode === "this_period_vs_period_before" ? e.filter.balancesRange.numberOfPeriods + 1 : e.filter.balancesRange.numberOfPeriods, s = e.totalBalances != null ? [
-    ...e.totalBalances.balances,
-    ...e.totalBalances.additionalBalances
-  ] : [];
-  e.totalBalances?.totalBalance != null && s.push(e.totalBalances.totalBalance);
-  const h = ge({
-    balances: s,
-    config: o
-  }), i = [];
-  i.push(h);
-  const c = B.getLocalizedStrings().vendors.opExByVendor, g = o.opexByVendorConfig?.sortOrSearchInProgress ?? !1, m = o.opexByVendorConfig?.pageFetchInProgress ?? !1;
-  if (g === !0)
-    [...Array(10)].forEach((C, u) => {
-      i.push(
-        ne({
-          title: `${u}+${c.loading}`,
-          balances: s,
-          config: o
-        })
-      );
-    });
-  else if (e.opexBalances.length > 0) {
-    if (!r.searchString) {
-      const y = wo({
-        title: B.getLocalizedStrings().chartCard.total,
-        balances: e.totalBalances,
-        config: o,
-        numOfBalances: l
-      });
-      i.push(y);
-    }
-    const C = r.pageToken[r.timeframe], u = e.opexBalances.map((y, d) => vo({
-      opExByVendor: y,
-      title: y.vendor.name,
-      numOfBalances: l,
-      isLastNode: d === e.opexBalances.length - 1 && C == null,
-      config: o
-    }));
-    i.push(...u), m === !0 && [...Array(1)].forEach((y, d) => {
-      i.push(
-        ne({
-          title: `${d}+${c.loading}`,
-          balances: s,
-          config: o
-        })
-      );
-    }), [...Array(1)].forEach((y, d) => {
-      i.push(
-        to({
-          title: `${d}+${c.loading}`,
-          balances: [],
-          config: o
-        })
-      );
-    });
-  }
-  return e.opexBalances.length === 0 && g !== !0 && i.push(
-    bo({
-      title: B.getLocalizedStrings().vendors.opExByVendor.noResultsFound,
-      balances: s,
-      config: o
-    })
-  ), {
-    config: o,
-    headerNodes: n ? [h] : [],
-    contentNodes: i
-  };
-};
-function ko(e, r, o, n = !0) {
-  Object.assign(e.config, r);
-  const l = Bo(o), s = ge({
-    balances: l,
-    config: r
-  });
-  return {
-    config: r,
-    headerNodes: n ? [s] : [],
-    contentNodes: [s, ...e.contentNodes.slice(1)]
-  };
-}
-const Bo = (e) => e.totalBalances != null ? [
-  ...e.totalBalances.balances,
-  ...e.totalBalances.additionalBalances
-] : [], P = {
-  chartHeight: new z(288, 360),
-  wrapperPadding: new z(j[3], j[3], j[8]),
-  contentPaddingLeft: new z(j[0], j[0], j[0]),
-  contentPaddingRight: new z(j[3], j[3], j[8])
-}, jo = p.div`
-  display: flex;
-  flex: 1 1 auto;
-  min-height: 100%;
-  flex-direction: column;
-  width: 100%;
-  background-color: ${(e) => e.theme.colors.grey5};
-  padding: ${f.sp0};
-  gap: 2px;
-`, Do = p.div`
-  position: relative;
-  box-shadow: ${(e) => `2px 2px ${f.sp1} ${e.theme.colors.dropShadowNormal}`};
-  background-color: ${(e) => e.theme.colors.grey5};
-  padding-left: ${(e) => P.wrapperPadding.valuePx(e.windowSize)};
-  padding-right: ${(e) => P.wrapperPadding.valuePx(e.windowSize)};
-`, Io = p.div`
-  display: flex;
-  width: 100%;
-  height: 100vh;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  background-color: ${(e) => e.theme.colors.grey5};
-`, So = p.div`
-  display: flex;
-  width: 100%;
-  height: 100vh;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-`, $o = p.div`
-  height: 96px;
-  width: 96px;
-  background: ${(e) => e.theme.colors.background};
-  border-radius: 50%;
-  cursor: pointer;
-  & svg {
-    margin: ${f.sp5};
-    color: ${(e) => e.theme.colors.grey1};
-  }
-  &:hover {
-    & svg {
-      color: ${(e) => e.theme.colors.primary};
-    }
-  }
-`, No = p(Le)`
-  margin-top: ${f.sp3};
-  color: ${(e) => e.theme.colors.hero};
-`, Po = p.div`
-  display: flex;
-  padding: ${f.sp2} ${f.sp0} ${f.sp4} ${f.sp0};
-`, Ro = p.div``, Oo = p.div``, Ao = p.div`
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  height: ${(e) => P.chartHeight.valuePx(e.windowSize)};
-  padding-bottom: ${f.sp6};
-`, Eo = p.div`
-  display: flex;
-`, Lo = p.div`
-  margin-top: ${f.sp5};
-  margin-bottom: ${f.sp6};
-`, zo = p.div`
-  display: flex;
-  position: sticky;
-  justify-content: center;
-  padding-top: ${f.sp8};
-  padding-left: ${(e) => P.wrapperPadding.valuePx(e.windowSize)};
-  background-color: ${(e) => e.theme.colors.grey4};
-`, Mo = p.div`
-  width: 100%;
-  height: calc(100vh - ${f.sp11});
-`, Fo = ({ fetchState: e }) => e === "In-Progress" || e === "Not-Started" ? /* @__PURE__ */ a.jsx(Io, { children: /* @__PURE__ */ a.jsx(ze, { size: "ExtraLarge", start: !0 }) }) : null, mr = ({
-  report: e,
-  vendorTabsToShow: r,
-  uiState: o,
-  downloadParams: n,
-  onVendorTabSelectionChanged: l,
-  onReloadReport: s,
-  onBackClick: h,
-  onFetchOpExByVendors: i,
-  onAdditionalBalanceSelectionChanged: c,
-  onTimeframeSelectionChanged: g,
-  onSortOrderChanged: m,
-  onSortOrSearchStarted: C,
-  onVendorNameAndBalanceClicked: u,
-  onPageFetchStarted: y,
-  previousTabPosition: d,
-  setPreviousTabPosition: _,
-  updateDownloadStateHandler: T,
-  onClearSearch: b,
-  analytics: k,
-  onClickMenuIcon: W
-}) => {
-  const [S, O] = R(
-    o.searchString[o.timeframe]
-  ), [A, E] = R(!1), v = U(), I = q(null), K = Ie(r), ue = K.length > 1, fe = B.getLocalizedStrings().reports.common, Q = B.getLocalizedStrings().vendors, Z = J(), Ce = ["month", "quarter"], ye = e.availableNumberOfPeriods != null && e.availableNumberOfPeriods < 2, L = o.mode === "compare_mode" && !ye, G = e.allTimeframeTicks.length === 0, { timeframe: D } = o, $ = o.searchString[D];
-  Se({
-    componentName: "vendors.opex_by_vendor.list"
-  });
-  const xe = oe(
-    (w) => {
-      i(D, $, w);
-    },
-    [D, $, i]
-  ), _e = oe(
-    (w, x) => {
-      window.scrollTo({
-        top: I.current?.offsetTop,
-        behavior: "smooth"
-      }), w.length > 0 ? (C(!0), i(x, w, !1)) : (C(!1), b(x));
-    },
-    [b, i, C]
-  ), ee = q(
-    we(
-      (w, x) => _e(w, x),
-      500,
-      {
-        trailing: !0
-      }
-    )
-  ).current, be = (w, x) => {
-    m(w, x, D), C(!0), i(D, $, !1);
-  };
-  if (M(() => {
-    async function w() {
-      await xo({
-        report: e,
-        isCompareModeOn: L,
-        downloadState: o.downloadState,
-        reportType: "more_detailed",
-        timeframe: o.timeframe,
-        sortKey: o.sortKey[o.timeframe],
-        sortOrder: o.sortOrder[o.timeframe],
-        searchString: o.searchString[D],
-        ...n
-      }), k?.trackDownload(
-        V("operating_expenses_by_vendor"),
-        F(o.timeframe),
-        "excel",
-        L
-      ), T("Completed");
-    }
-    A && o.downloadState !== "In-Progress" && (E(!1), T("In-Progress"), w());
-  }, [
-    e,
-    o,
-    L,
-    n,
-    o.downloadState,
-    A
-  ]), M(() => {
-    O($);
-  }, [$]), e.fetchState === "Error")
-    return /* @__PURE__ */ a.jsxs(So, { children: [
-      /* @__PURE__ */ a.jsx(
-        $o,
-        {
-          "data-testid": $e("op-ex-by-vendor-reload-page"),
-          onClick: s,
-          children: /* @__PURE__ */ a.jsx(Ne, {})
-        }
-      ),
-      /* @__PURE__ */ a.jsx(No, { children: fe.failed })
-    ] });
-  const Y = e.totalBalances?.totalBalance;
-  if (o.sortOrSearchInProgress === !1 && o.pageFetchInProgress === !1 && (e.fetchState === "In-Progress" || e.fetchState === "Not-Started"))
-    return /* @__PURE__ */ a.jsx(Fo, { fetchState: e.fetchState });
-  if ((e.fetchState === "Completed" || o.sortOrSearchInProgress === !0 || o.pageFetchInProgress === !0) && e.isReportGenerated === !0) {
-    const w = /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
-      /* @__PURE__ */ a.jsx(
-        Pe,
-        {
-          isSearchOpen: ($?.length ?? 0) > 0,
-          searchPlaceHolder: Q.common.searchPlaceholder,
-          searchText: S ?? "",
-          onSearchTextChanged: (x) => {
-            O(x), x.trim().length >= 2 ? ee(x, D) : x.trim().length == 0 && ee("", D);
-          },
-          downloadPresent: !0
-        }
-      ),
-      /* @__PURE__ */ a.jsx(
-        Re,
-        {
-          downloadReportOptions: {
-            type: "simple_menu",
-            downloadMenu: {
-              simpleMenuItems: [
-                {
-                  type: "excel",
-                  isDisabled: G,
-                  isDownloading: o.downloadState === "In-Progress"
-                }
-              ],
-              onDownloadClick: async (x) => {
-                if (x === "excel")
-                  if (o.downloadState === "In-Progress") {
-                    console.log("Download is already in progress!");
-                    return;
-                  } else
-                    E(!0);
-              }
-            }
-          }
-        }
-      )
-    ] });
-    return /* @__PURE__ */ a.jsxs(jo, { windowSize: v, children: [
-      /* @__PURE__ */ a.jsx(
-        Oe,
-        {
-          title: Q.common.navBarTitle,
-          subTitle: e.lastRefreshSuccessTime != null ? e.lastRefreshSuccessTime.utc(!0).fromNow() : "",
-          backgroundColor: Z.colors.grey5,
-          onBackClick: h,
-          rightSideComponent: w,
-          showMenuIcon: v === "medium-compact" || v === "small",
-          downloadPresent: !0,
-          onClickMenuIcon: W,
-          source: "OpExByVendorPage"
-        }
-      ),
-      /* @__PURE__ */ a.jsxs(Do, { windowSize: v, children: [
-        ue ? /* @__PURE__ */ a.jsx(
-          Ae,
-          {
-            allTabs: K,
-            selectedTab: K[1].id,
-            containerStyle: {
-              borderBottom: `2px solid ${Z.colors.grey3}`
-            },
-            onTabChange: (x) => l(
-              Ee(x.id)
-            ),
-            previousTabPosition: d,
-            setPreviousTabPosition: _
-          }
-        ) : null,
-        /* @__PURE__ */ a.jsx(
-          Vo,
-          {
-            timeframes: Ce,
-            isCompareModeOn: L,
-            firstMonthOfFY: e.firstMonthOfFY,
-            allTimeframeTicks: e.allTimeframeTicks,
-            selectedTimeframe: o.timeframe,
-            selectedCOABalancesRange: e.filter.balancesRange,
-            onAdditionalBalanceSelectionChanged: c,
-            onTimeframeSelectionChanged: g,
-            mode: o.mode,
-            analytics: k
-          }
-        ),
-        Y != null ? /* @__PURE__ */ a.jsx(Lo, { children: /* @__PURE__ */ a.jsx(
-          oo,
-          {
-            balance: Y,
-            dateText: Go(Y)
-          }
-        ) }) : null,
-        /* @__PURE__ */ a.jsx(Wo, { report: e, isEmptyPeriod: G })
-      ] }),
-      /* @__PURE__ */ a.jsx(
-        Ko,
-        {
-          reference: I,
-          report: e,
-          uiState: o,
-          isEmptyPeriod: G,
-          onAdditionalBalanceSelectionChanged: c,
-          onVendorNameAndBalanceClicked: u,
-          onSortOrderChanged: be,
-          handleFetchOpExByVendor: xe,
-          onPageFetchStarted: y,
-          analytics: k
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ a.jsx(a.Fragment, {});
-}, Vo = ({
-  timeframes: e,
-  firstMonthOfFY: r,
-  allTimeframeTicks: o,
-  selectedCOABalancesRange: n,
-  selectedTimeframe: l,
-  onTimeframeSelectionChanged: s,
-  onAdditionalBalanceSelectionChanged: h,
-  mode: i,
-  isCompareModeOn: c,
-  analytics: g
-}) => /* @__PURE__ */ a.jsx(Oo, { children: /* @__PURE__ */ a.jsxs(Ro, { children: [
-  /* @__PURE__ */ a.jsx(Po, { children: /* @__PURE__ */ a.jsx(
-    Qe,
-    {
-      timeframe: {
-        allowedTimeframes: e,
-        selectedTimeframe: l,
-        onTimeframeSelectionChanged: (m) => {
-          g?.trackTimeframeSwitch(
-            F(m),
-            V("operating_expenses_by_vendor")
-          ), (m === "month" || m === "quarter") && s(m), i === "compare_mode" && !c && h(
-            c,
-            c ? ["this_period_vs_last_period_percent"] : []
-          );
-        }
-      },
-      toggle: {
-        label: B.getLocalizedStrings().compareSwitchLabel,
-        isOn: c,
-        isToggleDisabled: !1,
-        onValueChanged: (m) => {
-          g?.trackCompareMode(
-            m,
-            V("operating_expenses_by_vendor"),
-            F(l)
-          ), h(
-            m,
-            m ? ["this_period_vs_last_period_percent"] : []
-          );
-        }
-      }
-    }
-  ) }),
-  /* @__PURE__ */ a.jsx(
-    Xe,
-    {
-      firstMonthOfFY: r,
-      timeframe: l,
-      timeframeTicks: o,
-      selection: {
-        selectedTicks: ae(
-          o,
-          n
-        ),
-        highlightedOfSelectedTicks: ae(
-          o,
-          n
-        )
-      }
-    }
-  )
-] }) }), Wo = ({
-  isEmptyPeriod: e,
-  report: r
-}) => {
-  const o = U();
-  return e ? /* @__PURE__ */ a.jsx(Eo, { children: /* @__PURE__ */ a.jsx(
-    Ze,
-    {
-      title: B.getLocalizedStrings().chartCard.no_data_available
-    }
-  ) }) : /* @__PURE__ */ a.jsx(Ao, { windowSize: o, children: /* @__PURE__ */ a.jsx(me, { children: ({ height: n, width: l }) => /* @__PURE__ */ a.jsx(
-    uo,
-    {
-      selectedRangeReport: r,
-      width: l,
-      height: n,
-      isDetailPage: !0,
-      showBarHoverBackground: !1
-    }
-  ) }) });
-}, Ko = ({
-  report: e,
-  uiState: r,
-  isEmptyPeriod: o,
-  reference: n,
-  onAdditionalBalanceSelectionChanged: l,
-  onTableScroll: s,
-  onSortOrderChanged: h,
-  onVendorNameAndBalanceClicked: i,
-  handleFetchOpExByVendor: c,
-  onPageFetchStarted: g,
-  analytics: m
-}) => {
-  const C = r.mode === "compare_mode", u = (v) => {
-    m?.trackCompareFilterChange(
-      v === "compare_mode_percent" ? "percentage" : "amount",
-      V("operating_expenses_by_vendor"),
-      F(r.timeframe),
-      "dropdown"
-    ), l(C, [v === "compare_mode_percent" ? "this_period_vs_last_period_percent" : "this_period_vs_last_period"]);
-  }, y = r.selectedAdditionalBalances.includes(
-    "this_period_vs_last_period_percent"
-  ) ? "compare_mode_percent" : "compare_mode_amount", [d, _] = R(
-    void 0
-  ), [T, b] = R(
-    void 0
-  ), k = U(), W = J(), S = !(k === "small" || k === "medium-compact");
-  M(() => {
-    const v = {
-      reportId: e.reportId,
-      mode: r.mode === "compare_mode" ? "this_period_vs_period_before" : "none",
-      displayOrder: "ascending_date",
-      reportFormat: "more_detailed",
-      bookCloseDate: e.bookCloseDate,
-      firstMonthOfFY: e.firstMonthOfFY,
-      filterAccountsWithNilBalances: "off",
-      filterAccountGroupsWithNilBalances: "off",
-      showNegativeAmountInParenthesis: Me(),
-      dataAvailable: e.dataAvailable,
-      opexByVendorConfig: {
-        sortKey: r.sortKey[r.timeframe],
-        sortOrder: r.sortOrder[r.timeframe],
-        isCompareModeOn: r.mode === "compare_mode",
-        isAccountColumnShown: !0,
-        isClassColumnShown: !0,
-        onSortOrderChanged: h,
-        sortOrSearchInProgress: r.sortOrSearchInProgress,
-        pageFetchInProgress: r.pageFetchInProgress,
-        onVendorNameAndBalanceClicked: i
-      }
-    };
-    if (d == null || !de(T, e)) {
-      const I = To(
-        e,
-        r,
-        v,
-        S
-      );
-      b(e), _(I);
-    } else {
-      const I = ko(
-        d,
-        v,
-        e,
-        S
-      );
-      _(I);
-    }
-  }, [r.mode, e]);
-  const O = (v) => v < e.opexBalances.length, A = () => {
-    r.pageToken[r.timeframe] != null && e.fetchState === "Completed" && (g(), c(!0));
-  }, E = e.opexBalances.length;
-  return /* @__PURE__ */ a.jsx(zo, { windowSize: k, ref: n, children: o ? /* @__PURE__ */ a.jsx(eo, {}) : d != null ? /* @__PURE__ */ a.jsx(Mo, { children: /* @__PURE__ */ a.jsx(
-    ro,
-    {
-      backgroundColor: new Te(W.colors.grey4),
-      rootNodes: d,
-      type: "name+balances_actual",
-      compareMode: y,
-      isSticky: {
-        isStickyHeader: S,
-        isStickyName: S
-      },
-      treeNodePadding: {
-        left: P.contentPaddingLeft.value(k),
-        right: P.contentPaddingRight.value(k)
-      },
-      nodeOpenStatus: {},
-      scrollPosition: r.scrollPosition,
-      onCompareModeChanged: u,
-      onScroll: s,
-      infiniteLoadingProps: {
-        isItemLoaded: O,
-        itemCount: E,
-        loadMoreItems: A
-      }
-    }
-  ) }) : null });
-}, Go = (e) => {
-  const r = e.startDate, o = e.endDate, { vendors: n, dateFormat: l } = B.getLocalizedStrings();
-  return `${n.opExByVendor.in} ${r.format(
-    l.visual.MMMYYFormat
-  )} - ${o.format(l.visual.MMMYYFormat)}`;
-};
-export {
-  mr as default
-};