@zeniai/web-components 3.16.86 → 3.16.87

package/dist/OpExByVendorPage-D8Z47apy.js

@@ -0,0 +1,1058 @@
+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-D5gxGIYo.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, jy as Ie, fa as Se, e as $e, z as Ne, jx as Pe, eV as Re, aE as Oe, jz as Ae, jA as Ee, P as Le, A as ze, R as z, dK as Me } from "./index-BtWKMiEc.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-C0C94j_A.js";
+import { t as Ue } from "./toChartData-BmnkmpGD.js";
+import { t as F } from "./analyticsHelper-CwfhU5AD.js";
+import { T as Xe } from "./TimeRangeSwitcher-BarW_X-E.js";
+import { T as Qe } from "./TimeframeSwitcherWithToggle-COQqW4Za.js";
+import { N as Ze } from "./NoDataChart-CcjmMGvQ.js";
+import { N as eo } from "./NoDataTable-DpfxWtpD.js";
+import { B as oo, m as ae } from "./detailCommon-BgtJ4Xwa.js";
+import { g as V } from "./getReferrerType-DjPOy76W.js";
+import { u as X, C as ro } from "./CollapsableReportTable-BqFdBJzy.js";
+import { m as ge } from "./mapTimeframeBalancesToTreeNode-kHIH3Idb.js";
+import { m as ne } from "./mapLoadingInProgressToTreeNode-BfQAeqa9.js";
+import { m as to } from "./mapSpacerToTreeNode-B5_7FKq9.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
+};