@zeniai/web-components 3.17.12 → 3.17.13

package/dist/TopExDetailPage-1ZDpWYcp.js

@@ -0,0 +1,318 @@
+import { j as t, u as j, A as b } from "./vendor-.pnpm-B2klaOGU.js";
+import i from "@emotion/styled";
+import { Event as A } from "@zeniai/client-analytics";
+import { TOP_EX_TIME_PERIODS as k } from "@zeniai/client-epic-state";
+import { S as n, D as c, a as f, e as H, a2 as S, O as B, o as E, C as D, u as P, aE as M, R as $, eW as z, eM as L } from "./index-BveTtfdM.js";
+import { i as N, M as F } from "./TopExCard-BcqJUOg5.js";
+import { T as R } from "./TimeframeSwitcher-DGi35XA7.js";
+import { N as V } from "./NoDataTable-BGoJCfod.js";
+import * as l from "react";
+import I from "react";
+const v = "141px", W = n.sp4;
+c[4];
+const _ = "123px", Z = i(B)`
+  color: inherit;
+  width: ${n.sp3};
+  height: ${n.sp3};
+  &:hover {
+    color: inherit;
+  }
+`, O = i.div`
+  user-select: none;
+  display: flex;
+  width: 100%;
+  flex-flow: row;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: ${n.sp3};
+  margin-bottom: ${n.sp3};
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.isClickable ? e.theme.colors.primary : e.theme.colors.hero};
+  }
+`, X = i.div`
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-direction: row;
+  justify-content: flex-end;
+`, q = i(E)`
+  user-select: none;
+  width: ${v};
+  min-width: ${v};
+  text-align: right;
+  margin-left: ${W};
+`, G = i.div`
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 2;
+  flex-grow: 1;
+  align-items: center;
+`, J = i(E)`
+  user-select: none;
+  display: flex;
+  min-width: ${_};
+  text-align: left;
+  margin-left: ${n.sp4};
+`;
+function K({
+  leftChevron: e,
+  account: o,
+  onAccountBalanceClick: s
+}) {
+  const r = o != null && o.balance != null, a = e === "hidden", u = r ? "pointer" : "default", d = a === !1 && r, C = d ? "pointer" : "default", h = a ? c[6] : c[4], m = Z, {
+    common: {
+      strings: { empty: w }
+    }
+  } = f.getLocalizedStrings(), y = o?.accountDescription ? o.accountDescription : w, x = o?.accountName ? o.accountName : y;
+  return /* @__PURE__ */ t.jsxs(O, { isClickable: d, children: [
+    /* @__PURE__ */ t.jsxs(
+      G,
+      {
+        style: { cursor: C },
+        isClickable: d,
+        children: [
+          a === !1 ? /* @__PURE__ */ t.jsx(m, { style: { minWidth: c[3], minHeight: c[3] } }) : null,
+          /* @__PURE__ */ t.jsx(
+            J,
+            {
+              "data-testid": H("top-ex-account-name", x),
+              style: { marginLeft: h },
+              title: x,
+              onClick: () => {
+                d && o != null && o.balance != null && s?.(o);
+              },
+              children: x
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ t.jsx(X, { style: { cursor: u }, children: /* @__PURE__ */ t.jsx(
+      q,
+      {
+        isClickable: r,
+        onClick: () => {
+          o?.balance != null && s?.(o);
+        },
+        children: S("0,0", o?.balance.available)
+      }
+    ) })
+  ] });
+}
+const Q = i.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+`, U = i.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+`, Y = i.div`
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 1px;
+  background-color: ${(e) => e.theme.colors.grey3};
+`;
+function ee({
+  accounts: e,
+  onAccountBalanceClick: o
+}) {
+  const s = (r, a) => r.length > 1 && a < r.length - 1;
+  return /* @__PURE__ */ t.jsx(Q, { children: e?.map((r, a) => /* @__PURE__ */ t.jsxs(U, { children: [
+    /* @__PURE__ */ t.jsx(
+      K,
+      {
+        leftChevron: "collapsed",
+        account: r,
+        onAccountBalanceClick: o
+      }
+    ),
+    s(e, a) === !0 ? /* @__PURE__ */ t.jsx(Y, {}) : null
+  ] }, a)) });
+}
+const te = I.memo(ee), ne = i.div`
+  margin: ${n.sp0} ${n.sp0} ${n.sp6} ${n.sp0};
+  background-color: inherit;
+  width: 100%;
+`;
+function ie({ report: e, onAccountBalanceClick: o }) {
+  const s = (a) => {
+    a != null && e.topExpenses != null && o?.(a, e.topExpenses);
+  }, r = e.topExpenses.accountsOrdered;
+  return /* @__PURE__ */ t.jsx(ne, { children: /* @__PURE__ */ t.jsx(
+    te,
+    {
+      accounts: r,
+      onAccountBalanceClick: s
+    }
+  ) });
+}
+const oe = (e) => /* @__PURE__ */ l.createElement("svg", { viewBox: "0 0 1089 119", height: 119, role: "img", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("path", { d: "M563 0H1085C1087.21 0 1089 1.79086 1089 4V33C1089 35.2091 1087.21 37 1085 37H563V0Z", fill: "#202122" }), /* @__PURE__ */ l.createElement("rect", { y: 18, width: 523, height: 1, fill: "#3E4043" }), /* @__PURE__ */ l.createElement("path", { d: "M563 41H1085C1087.21 41 1089 42.7909 1089 45V74C1089 76.2091 1087.21 78 1085 78H563V41Z", fill: "#202122" }), /* @__PURE__ */ l.createElement("rect", { y: 59, width: 523, height: 1, fill: "#3E4043" }), /* @__PURE__ */ l.createElement("path", { d: "M563 82H1085C1087.21 82 1089 83.7909 1089 86V115C1089 117.209 1087.21 119 1085 119H563V82Z", fill: "#202122" }), /* @__PURE__ */ l.createElement("rect", { y: 100, width: 523, height: 1, fill: "#3E4043" })), le = (e) => /* @__PURE__ */ l.createElement("svg", { viewBox: "0 0 1089 119", height: 119, role: "img", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("path", { d: "M563 0H1085C1087.21 0 1089 1.79086 1089 4V33C1089 35.2091 1087.21 37 1085 37H563V0Z", fill: "#FAFBFC" }), /* @__PURE__ */ l.createElement("rect", { y: 18, width: 523, height: 1, fill: "#E9ECF0" }), /* @__PURE__ */ l.createElement("path", { d: "M563 41H1085C1087.21 41 1089 42.7909 1089 45V74C1089 76.2091 1087.21 78 1085 78H563V41Z", fill: "#FAFBFC" }), /* @__PURE__ */ l.createElement("rect", { y: 59, width: 523, height: 1, fill: "#E9ECF0" }), /* @__PURE__ */ l.createElement("path", { d: "M563 82H1085C1087.21 82 1089 83.7909 1089 86V115C1089 117.209 1087.21 119 1085 119H563V82Z", fill: "#FAFBFC" }), /* @__PURE__ */ l.createElement("rect", { y: 100, width: 523, height: 1, fill: "#E9ECF0" })), ae = i.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`, re = i.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+`, se = i.div`
+  display: flex;
+  width: 100%;
+  height: 20vh;
+  min-height: 150px;
+  flex-grow: 0;
+  max-width: 100%;
+  flex-basis: 100%;
+  flex-direction: column;
+`, ce = i(E)`
+  color: ${D.alert};
+  margin: ${n.sp3} ${n.sp0} ${n.sp5} ${n.sp0};
+`;
+function de() {
+  switch (j().mode) {
+    case "light":
+      return /* @__PURE__ */ t.jsx(le, { width: "100%", preserveAspectRatio: "none" });
+    case "dark":
+    default:
+      return /* @__PURE__ */ t.jsx(oe, { width: "100%", preserveAspectRatio: "none" });
+  }
+}
+function pe({ title: e }) {
+  return /* @__PURE__ */ t.jsxs(ae, { children: [
+    e != null ? /* @__PURE__ */ t.jsx(ce, { children: e }) : null,
+    /* @__PURE__ */ t.jsx(re, { children: /* @__PURE__ */ t.jsx(se, { children: /* @__PURE__ */ t.jsx(de, {}) }) })
+  ] });
+}
+const g = {
+  wrapperPadding: new $(c[3], c[3], c[8]),
+  chartContainerMinHeight: new $(c[12], c[11])
+}, he = i.div`
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, me = i.div`
+  position: relative;
+  box-shadow: ${(e) => `2px 2px ${n.sp1} ${e.theme.colors.dropShadowNormal}`};
+  background-color: ${(e) => e.theme.colors.grey5};
+  padding-top: ${n.sp0};
+  padding-bottom: ${n.sp0};
+  padding-left: ${(e) => g.wrapperPadding.valuePx(e.windowSize)};
+  padding-right: ${(e) => g.wrapperPadding.valuePx(e.windowSize)};
+`, xe = i.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 auto;
+  justify-content: center;
+  max-width: 100%;
+`, fe = i.div`
+  display: flex;
+  padding: ${n.sp2} ${n.sp0} ${n.sp4} ${n.sp0};
+`, ge = i.div`
+  display: flex;
+  justify-content: center;
+  padding-top: ${n.sp4};
+  padding-bottom: ${n.sp4};
+  padding-left: ${(e) => g.wrapperPadding.valuePx(e.windowSize)};
+  padding-right: ${(e) => g.wrapperPadding.valuePx(e.windowSize)};
+  background-color: ${(e) => e.theme.colors.grey4};
+`, ue = i.div`
+  height: ${n.sp9};
+  color: ${(e) => e.theme.colors.primary};
+`, Ce = i(z)``, we = i(L)`
+  padding-left: ${n.sp3};
+`, ye = i.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: ${(e) => g.chartContainerMinHeight.valuePx(e.windowSize)};
+  margin-bottom: ${n.sp5};
+`, Ee = i.div`
+  display: flex;
+`;
+function Be(e) {
+  const o = j(), {
+    report: s,
+    onTimeframeSelectionChanged: r,
+    onAccountBalanceClick: a,
+    onBackClick: u
+  } = e, d = P(), C = [...k], h = N(s.topExpenses.accountsOrdered), { topExTimePeriod: m, topExpenses: w } = s, y = w.total, x = (p) => {
+    e.autoCompleteData.autoCompleteText != null && e.analytics?.trackSearch(
+      A.search,
+      "Top Expenses",
+      p.type,
+      p.name,
+      e.autoCompleteData.autoCompleteText
+    ), e.autoCompleteActions.onAutoCompleteEntity?.(p);
+  };
+  return /* @__PURE__ */ t.jsxs(he, { children: [
+    /* @__PURE__ */ t.jsx(
+      M,
+      {
+        source: "TopExDetailPage",
+        title: f.getLocalizedStrings().reportTitleById.top_expenses,
+        backgroundColor: o.colors.grey5,
+        onBackClick: u,
+        searchAutoComplete: {
+          autoCompleteData: e.autoCompleteData,
+          autoCompleteActions: {
+            ...e.autoCompleteActions,
+            onAutoCompleteEntity: x
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(me, { windowSize: d, children: [
+      /* @__PURE__ */ t.jsx(fe, { children: /* @__PURE__ */ t.jsx(xe, { children: /* @__PURE__ */ t.jsx(
+        R,
+        {
+          timeframes: C,
+          selectedTimeframe: m,
+          onTimeframeSelectionChanged: (p) => {
+            r?.(
+              p
+            );
+          }
+        }
+      ) }) }),
+      h ? null : /* @__PURE__ */ t.jsxs(ue, { children: [
+        /* @__PURE__ */ t.jsx(Ce, { children: S("0,0", y) }),
+        /* @__PURE__ */ t.jsx(we, { children: f.getLocalizedStrings().reports.detail.topEx.insightLabel })
+      ] }),
+      h ? /* @__PURE__ */ t.jsx(Ee, { children: /* @__PURE__ */ t.jsx(
+        pe,
+        {
+          title: `${f.getLocalizedStrings().chartCard.no_data_available_for} ${f.getLocalizedStrings().timeframe[m]}`
+        }
+      ) }) : /* @__PURE__ */ t.jsx(ye, { windowSize: d, children: /* @__PURE__ */ t.jsx(b, { style: { height: "fit-content" }, children: ({ height: p, width: T }) => /* @__PURE__ */ t.jsx(
+        F,
+        {
+          report: s,
+          timeframe: m,
+          showBarHoverBackground: !1,
+          width: T,
+          height: p,
+          isDetailPage: !0
+        }
+      ) }) })
+    ] }),
+    /* @__PURE__ */ t.jsx(ge, { windowSize: d, children: h ? /* @__PURE__ */ t.jsx(V, {}) : /* @__PURE__ */ t.jsx(
+      ie,
+      {
+        report: s,
+        onAccountBalanceClick: a
+      }
+    ) })
+  ] });
+}
+export {
+  Be as default
+};

package/dist/TopExDetailPage-B6-_KoU_.cjs

@@ -0,0 +1,132 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./vendor-.pnpm-D0ILHvHB.cjs"),i=require("@emotion/styled"),y=require("@zeniai/client-analytics"),v=require("@zeniai/client-epic-state"),t=require("./index-DoK40ULp.cjs"),j=require("./TopExCard-BZUYFU7p.cjs"),R=require("./TimeframeSwitcher-Cjp4aTaD.cjs"),$=require("./NoDataTable-Dsv6Ly64.cjs"),w=require("react");function b(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const r=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(o,s,r.get?r:{enumerable:!0,get:()=>e[s]})}}return o.default=e,Object.freeze(o)}const a=b(w),C="141px",T=t.Space.sp4;t.sp[4];const A="123px",k=i(t.SvgArrowRight)`
+  color: inherit;
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  &:hover {
+    color: inherit;
+  }
+`,P=i.div`
+  user-select: none;
+  display: flex;
+  width: 100%;
+  flex-flow: row;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: ${t.Space.sp3};
+  margin-bottom: ${t.Space.sp3};
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.isClickable?e.theme.colors.primary:e.theme.colors.hero};
+  }
+`,D=i.div`
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-direction: row;
+  justify-content: flex-end;
+`,H=i(t.StandardRegular)`
+  user-select: none;
+  width: ${C};
+  min-width: ${C};
+  text-align: right;
+  margin-left: ${T};
+`,B=i.div`
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 2;
+  flex-grow: 1;
+  align-items: center;
+`,L=i(t.StandardRegular)`
+  user-select: none;
+  display: flex;
+  min-width: ${A};
+  text-align: left;
+  margin-left: ${t.Space.sp4};
+`;function M({leftChevron:e,account:o,onAccountBalanceClick:s}){const r=o!=null&&o.balance!=null,l=e==="hidden",h=r?"pointer":"default",c=l===!1&&r,g=c?"pointer":"default",d=l?t.sp[6]:t.sp[4],x=k,{common:{strings:{empty:f}}}=t.appLocale.getLocalizedStrings(),E=o?.accountDescription?o.accountDescription:f,m=o?.accountName?o.accountName:E;return n.jsxRuntimeExports.jsxs(P,{isClickable:c,children:[n.jsxRuntimeExports.jsxs(B,{style:{cursor:g},isClickable:c,children:[l===!1?n.jsxRuntimeExports.jsx(x,{style:{minWidth:t.sp[3],minHeight:t.sp[3]}}):null,n.jsxRuntimeExports.jsx(L,{"data-testid":t.generateDataTestId("top-ex-account-name",m),style:{marginLeft:d},title:m,onClick:()=>{c&&o!=null&&o.balance!=null&&s?.(o)},children:m})]}),n.jsxRuntimeExports.jsx(D,{style:{cursor:h},children:n.jsxRuntimeExports.jsx(H,{isClickable:r,onClick:()=>{o?.balance!=null&&s?.(o)},children:t.amountToString("0,0",o?.balance.available)})})]})}const z=i.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+`,N=i.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+`,F=i.div`
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 1px;
+  background-color: ${e=>e.theme.colors.grey3};
+`;function V({accounts:e,onAccountBalanceClick:o}){const s=(r,l)=>r.length>1&&l<r.length-1;return n.jsxRuntimeExports.jsx(z,{children:e?.map((r,l)=>n.jsxRuntimeExports.jsxs(N,{children:[n.jsxRuntimeExports.jsx(M,{leftChevron:"collapsed",account:r,onAccountBalanceClick:o}),s(e,l)===!0?n.jsxRuntimeExports.jsx(F,{}):null]},l))})}const _=w.memo(V),O=i.div`
+  margin: ${t.Space.sp0} ${t.Space.sp0} ${t.Space.sp6} ${t.Space.sp0};
+  background-color: inherit;
+  width: 100%;
+`;function q({report:e,onAccountBalanceClick:o}){const s=l=>{l!=null&&e.topExpenses!=null&&o?.(l,e.topExpenses)},r=e.topExpenses.accountsOrdered;return n.jsxRuntimeExports.jsx(O,{children:n.jsxRuntimeExports.jsx(_,{accounts:r,onAccountBalanceClick:s})})}const I=e=>a.createElement("svg",{viewBox:"0 0 1089 119",height:119,role:"img",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},a.createElement("path",{d:"M563 0H1085C1087.21 0 1089 1.79086 1089 4V33C1089 35.2091 1087.21 37 1085 37H563V0Z",fill:"#202122"}),a.createElement("rect",{y:18,width:523,height:1,fill:"#3E4043"}),a.createElement("path",{d:"M563 41H1085C1087.21 41 1089 42.7909 1089 45V74C1089 76.2091 1087.21 78 1085 78H563V41Z",fill:"#202122"}),a.createElement("rect",{y:59,width:523,height:1,fill:"#3E4043"}),a.createElement("path",{d:"M563 82H1085C1087.21 82 1089 83.7909 1089 86V115C1089 117.209 1087.21 119 1085 119H563V82Z",fill:"#202122"}),a.createElement("rect",{y:100,width:523,height:1,fill:"#3E4043"})),W=e=>a.createElement("svg",{viewBox:"0 0 1089 119",height:119,role:"img",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},a.createElement("path",{d:"M563 0H1085C1087.21 0 1089 1.79086 1089 4V33C1089 35.2091 1087.21 37 1085 37H563V0Z",fill:"#FAFBFC"}),a.createElement("rect",{y:18,width:523,height:1,fill:"#E9ECF0"}),a.createElement("path",{d:"M563 41H1085C1087.21 41 1089 42.7909 1089 45V74C1089 76.2091 1087.21 78 1085 78H563V41Z",fill:"#FAFBFC"}),a.createElement("rect",{y:59,width:523,height:1,fill:"#E9ECF0"}),a.createElement("path",{d:"M563 82H1085C1087.21 82 1089 83.7909 1089 86V115C1089 117.209 1087.21 119 1085 119H563V82Z",fill:"#FAFBFC"}),a.createElement("rect",{y:100,width:523,height:1,fill:"#E9ECF0"})),Z=i.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`,X=i.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+`,G=i.div`
+  display: flex;
+  width: 100%;
+  height: 20vh;
+  min-height: 150px;
+  flex-grow: 0;
+  max-width: 100%;
+  flex-basis: 100%;
+  flex-direction: column;
+`,J=i(t.StandardRegular)`
+  color: ${t.Colors.alert};
+  margin: ${t.Space.sp3} ${t.Space.sp0} ${t.Space.sp5} ${t.Space.sp0};
+`;function K(){switch(n.useTheme().mode){case"light":return n.jsxRuntimeExports.jsx(W,{width:"100%",preserveAspectRatio:"none"});case"dark":default:return n.jsxRuntimeExports.jsx(I,{width:"100%",preserveAspectRatio:"none"})}}function Q({title:e}){return n.jsxRuntimeExports.jsxs(Z,{children:[e!=null?n.jsxRuntimeExports.jsx(J,{children:e}):null,n.jsxRuntimeExports.jsx(X,{children:n.jsxRuntimeExports.jsx(G,{children:n.jsxRuntimeExports.jsx(K,{})})})]})}const u={wrapperPadding:new t.ResponsiveSized(t.sp[3],t.sp[3],t.sp[8]),chartContainerMinHeight:new t.ResponsiveSized(t.sp[12],t.sp[11])},U=i.div`
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${e=>e.theme.colors.grey4};
+`,Y=i.div`
+  position: relative;
+  box-shadow: ${e=>`2px 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`};
+  background-color: ${e=>e.theme.colors.grey5};
+  padding-top: ${t.Space.sp0};
+  padding-bottom: ${t.Space.sp0};
+  padding-left: ${e=>u.wrapperPadding.valuePx(e.windowSize)};
+  padding-right: ${e=>u.wrapperPadding.valuePx(e.windowSize)};
+`,ee=i.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 auto;
+  justify-content: center;
+  max-width: 100%;
+`,te=i.div`
+  display: flex;
+  padding: ${t.Space.sp2} ${t.Space.sp0} ${t.Space.sp4} ${t.Space.sp0};
+`,ne=i.div`
+  display: flex;
+  justify-content: center;
+  padding-top: ${t.Space.sp4};
+  padding-bottom: ${t.Space.sp4};
+  padding-left: ${e=>u.wrapperPadding.valuePx(e.windowSize)};
+  padding-right: ${e=>u.wrapperPadding.valuePx(e.windowSize)};
+  background-color: ${e=>e.theme.colors.grey4};
+`,ie=i.div`
+  height: ${t.Space.sp9};
+  color: ${e=>e.theme.colors.primary};
+`,oe=i(t.H5RegularSp)``,se=i(t.LargeMediumSp)`
+  padding-left: ${t.Space.sp3};
+`,re=i.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: ${e=>u.chartContainerMinHeight.valuePx(e.windowSize)};
+  margin-bottom: ${t.Space.sp5};
+`,ae=i.div`
+  display: flex;
+`;function le(e){const o=n.useTheme(),{report:s,onTimeframeSelectionChanged:r,onAccountBalanceClick:l,onBackClick:h}=e,c=t.useWindowSizeContext(),g=[...v.TOP_EX_TIME_PERIODS],d=j.isEmptyBalances(s.topExpenses.accountsOrdered),{topExTimePeriod:x,topExpenses:f}=s,E=f.total,m=p=>{e.autoCompleteData.autoCompleteText!=null&&e.analytics?.trackSearch(y.Event.search,"Top Expenses",p.type,p.name,e.autoCompleteData.autoCompleteText),e.autoCompleteActions.onAutoCompleteEntity?.(p)};return n.jsxRuntimeExports.jsxs(U,{children:[n.jsxRuntimeExports.jsx(t.NavBar,{source:"TopExDetailPage",title:t.appLocale.getLocalizedStrings().reportTitleById.top_expenses,backgroundColor:o.colors.grey5,onBackClick:h,searchAutoComplete:{autoCompleteData:e.autoCompleteData,autoCompleteActions:{...e.autoCompleteActions,onAutoCompleteEntity:m}}}),n.jsxRuntimeExports.jsxs(Y,{windowSize:c,children:[n.jsxRuntimeExports.jsx(te,{children:n.jsxRuntimeExports.jsx(ee,{children:n.jsxRuntimeExports.jsx(R.TimeframeSwitcher,{timeframes:g,selectedTimeframe:x,onTimeframeSelectionChanged:p=>{r?.(p)}})})}),d?null:n.jsxRuntimeExports.jsxs(ie,{children:[n.jsxRuntimeExports.jsx(oe,{children:t.amountToString("0,0",E)}),n.jsxRuntimeExports.jsx(se,{children:t.appLocale.getLocalizedStrings().reports.detail.topEx.insightLabel})]}),d?n.jsxRuntimeExports.jsx(ae,{children:n.jsxRuntimeExports.jsx(Q,{title:`${t.appLocale.getLocalizedStrings().chartCard.no_data_available_for} ${t.appLocale.getLocalizedStrings().timeframe[x]}`})}):n.jsxRuntimeExports.jsx(re,{windowSize:c,children:n.jsxRuntimeExports.jsx(n.AutoSizer,{style:{height:"fit-content"},children:({height:p,width:S})=>n.jsxRuntimeExports.jsx(j.MemoTopExChart,{report:s,timeframe:x,showBarHoverBackground:!1,width:S,height:p,isDetailPage:!0})})})]}),n.jsxRuntimeExports.jsx(ne,{windowSize:c,children:d?n.jsxRuntimeExports.jsx($.NoDataTable,{}):n.jsxRuntimeExports.jsx(q,{report:s,onAccountBalanceClick:l})})]})}exports.default=le;