@mx-cartographer/experiences 7.13.1 → 7.13.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/{LineChart-DBSlRSEm.mjs → LineChart-DBcA1UJI.mjs} +25 -25
  3. package/dist/{ManageIncome-QvqN555q.mjs → ManageIncome-6rzdF0hn.mjs} +1 -1
  4. package/dist/{RecurringSettings-DdOcok2e.mjs → RecurringSettings-DSsqb6FN.mjs} +1 -1
  5. package/dist/{TransactionDetails-BpcWeXNU.mjs → TransactionDetails-CBrqmEw1.mjs} +180 -168
  6. package/dist/{ViewMoreMicroCard-ApUBfGOX.mjs → ViewMoreMicroCard-D24H9kDm.mjs} +9 -8
  7. package/dist/accounts/index.es.js +2 -2
  8. package/dist/budgets/index.es.js +2 -2
  9. package/dist/cashflow/index.es.js +2 -2
  10. package/dist/finstrong/index.es.js +3 -3
  11. package/dist/microinsights/index.es.js +1 -1
  12. package/dist/networth/index.es.js +1 -1
  13. package/dist/recurringtransactions/index.es.js +4 -4
  14. package/dist/spending/index.es.js +1 -1
  15. package/dist/transactions/index.es.js +2 -2
  16. package/dist/trends/TrendsWidget.d.ts +1 -1
  17. package/dist/trends/components/CategoryDetails.d.ts +3 -0
  18. package/dist/trends/index.es.js +587 -584
  19. package/package.json +1 -1
  20. package/dist/trends/components/CategoryDetailDrawer.d.ts +0 -7
package/dist/trends/index.es.js CHANGED
@@ -1,120 +1,120 @@
1
1
  import { jsxs as C, jsx as e, Fragment as wt } from "react/jsx-runtime";
2
- import g, { useRef as xt, useState as vt, useEffect as Dt } from "react";
3
- import { observer as M } from "mobx-react-lite";
4
- import { CategoryIcon as xe, Text as Q, Icon as He, H3 as Ge, P as fe, ChevronRightIcon as It } from "@mxenabled/mxui";
5
- import W from "@mui/material/Box";
2
+ import g, { useRef as vt, useState as Dt, useEffect as It } from "react";
3
+ import { observer as A } from "mobx-react-lite";
4
+ import { CategoryIcon as we, Text as F, Icon as He, H3 as Ge, P as pe, ChevronRightIcon as Lt } from "@mxenabled/mxui";
5
+ import N from "@mui/material/Box";
6
6
  import x from "@mui/material/Stack";
7
7
  import Te from "@mui/material/Button";
8
- import { addSeconds as Je } from "date-fns/addSeconds";
8
+ import { addSeconds as et } from "date-fns/addSeconds";
9
9
  import { differenceInCalendarMonths as Se } from "date-fns/differenceInCalendarMonths";
10
- import Lt from "numeral";
11
- import { useTheme as ne, styled as Et, alpha as Mt } from "@mui/material/styles";
12
- import { useItemTooltip as At, ChartsTooltipContainer as Rt } from "@mui/x-charts/ChartsTooltip";
13
- import { LineChart as kt } from "@mui/x-charts/LineChart";
14
- import { u as q } from "../useScreenSize-B6JyS_Lj.mjs";
15
- import { u as Ht } from "../useDimensions-CeDR9V8N.mjs";
16
- import et from "@mui/material/Card";
17
- import tt from "@mui/material/CardContent";
10
+ import Et from "numeral";
11
+ import { useTheme as ae, styled as Mt, alpha as At } from "@mui/material/styles";
12
+ import { useItemTooltip as Rt, ChartsTooltipContainer as kt } from "@mui/x-charts/ChartsTooltip";
13
+ import { LineChart as Ht } from "@mui/x-charts/LineChart";
14
+ import { u as j } from "../useScreenSize-B6JyS_Lj.mjs";
15
+ import { u as Nt } from "../useDimensions-CeDR9V8N.mjs";
16
+ import tt from "@mui/material/Card";
17
+ import ot from "@mui/material/CardContent";
18
18
  import Ne from "@mui/material/Divider";
19
- import Fe from "@mui/material/Grid";
20
- import { u as A, l as J, g as $, b as ye, h as ve, d as De, B as Ce, p as ot, f as Be, a as nt } from "../hooks-BxkfR-Ff.mjs";
21
- import { b as st } from "../Localization-CPkpIwIx.mjs";
22
- import { C as we } from "../CurrencyText-CA-E5N_y.mjs";
23
- import { C as Re, b as $e, c as Nt } from "../Category-CevNQ03n.mjs";
24
- import { f as Z, D as B } from "../DateFormats-BMpMrZpW.mjs";
25
- import { f as oe, a as Wt } from "../NumberFormatting-QCaNwbjv.mjs";
26
- import { c as Ot, a as ze, g as Gt, L as rt } from "../TrendsStore-st6GjDtg.mjs";
27
- import { T as ms } from "../TrendsStore-st6GjDtg.mjs";
28
- import { c as Bt, i as Pt, d as Vt, e as Ft, b as at, g as it, f as Ke } from "../SpendingData-Bz1bCWAs.mjs";
29
- import $t from "@mui/material/ToggleButton";
30
- import zt from "@mui/material/ToggleButtonGroup";
31
- import { parseISO as lt } from "date-fns/parseISO";
19
+ import $e from "@mui/material/Grid";
20
+ import { u as R, l as U, g as $, b as fe, h as ve, d as De, B as ye, p as nt, f as Be, a as st } from "../hooks-BxkfR-Ff.mjs";
21
+ import { b as rt } from "../Localization-CPkpIwIx.mjs";
22
+ import { C as xe } from "../CurrencyText-CA-E5N_y.mjs";
23
+ import { C as Re, b as ze, c as Wt } from "../Category-CevNQ03n.mjs";
24
+ import { f as Y, D as P } from "../DateFormats-BMpMrZpW.mjs";
25
+ import { f as re, a as Ot } from "../NumberFormatting-QCaNwbjv.mjs";
26
+ import { c as Gt, a as Ke, g as Bt, L as Pt } from "../TrendsStore-st6GjDtg.mjs";
27
+ import { T as us } from "../TrendsStore-st6GjDtg.mjs";
28
+ import { c as Vt, i as Ft, d as $t, e as zt, b as at, g as it, f as Ye } from "../SpendingData-Bz1bCWAs.mjs";
29
+ import Kt from "@mui/material/ToggleButton";
30
+ import Yt from "@mui/material/ToggleButtonGroup";
31
+ import { parseISO as ct } from "date-fns/parseISO";
32
32
  import { H as ke } from "../HeaderCell-P8w6CmfO.mjs";
33
- import { T as G, b as Kt } from "../ViewMoreMicroCard-ApUBfGOX.mjs";
34
- import { useGridApiContext as Yt, useGridRootProps as jt, DataGridPro as Ut } from "@mui/x-data-grid-pro";
35
- import Xt from "@mui/material/Badge";
36
- import Zt from "@mui/material/IconButton";
33
+ import { T as W, b as jt } from "../ViewMoreMicroCard-D24H9kDm.mjs";
34
+ import { useGridApiContext as Ut, useGridRootProps as Xt, DataGridPro as Zt } from "@mui/x-data-grid-pro";
35
+ import Qt from "@mui/material/Badge";
36
+ import qt from "@mui/material/IconButton";
37
37
  import { A as v } from "../Analytics-BYItVAe-.mjs";
38
- import { T as ct } from "../StatusIndicator-CIKUOoN_.mjs";
39
- import { T as dt } from "../TransactionDetails-BpcWeXNU.mjs";
40
- import { D as We } from "../Drawer-Bbe4AMB1.mjs";
38
+ import { T as lt } from "../StatusIndicator-CIKUOoN_.mjs";
39
+ import { T as dt } from "../TransactionDetails-CBrqmEw1.mjs";
40
+ import { D as Pe } from "../Drawer-Bbe4AMB1.mjs";
41
41
  import { u as Ie } from "../useWidgetLoadTimer-DgN1bTyu.mjs";
42
42
  import { L as Le } from "../Loader-D3rjKx72.mjs";
43
43
  import { W as ut } from "../WidgetContainer-D_iaToWJ.mjs";
44
- import { L as Pe } from "../LineChart-DBSlRSEm.mjs";
45
- import { M as Qt } from "../MiniWidgetContainer-xLWSV6Wz.mjs";
46
- import { subMonths as qt } from "date-fns";
47
- import { TrendingUp as Jt, TrendingDown as eo, MultilineChart as to, ExpandLess as oo, ExpandMore as no, ArrowBack as so } from "@mxenabled/mx-icons";
48
- import { M as ro } from "../MicroWidgetContainer-B_EnfvCq.mjs";
49
- import ao from "@mui/material/Collapse";
50
- import io from "@mui/material/List";
51
- import lo from "@mui/material/ListItem";
52
- import co from "@mui/material/ListItemButton";
44
+ import { L as Ve } from "../LineChart-DBcA1UJI.mjs";
45
+ import { M as Jt } from "../MiniWidgetContainer-xLWSV6Wz.mjs";
46
+ import { subMonths as eo } from "date-fns";
47
+ import { TrendingUp as to, TrendingDown as oo, MultilineChart as no, ExpandLess as so, ExpandMore as ro, ArrowBack as ao } from "@mxenabled/mx-icons";
48
+ import { M as io } from "../MicroWidgetContainer-B_EnfvCq.mjs";
49
+ import co from "@mui/material/Collapse";
50
+ import We from "@mui/material/List";
51
+ import mt from "@mui/material/ListItem";
52
+ import lo from "@mui/material/ListItemButton";
53
53
  import uo from "@mui/material/ListItemIcon";
54
- import mo from "@mui/material/ListItemText";
55
- import mt from "@mui/material/styles/useTheme";
54
+ import ht from "@mui/material/ListItemText";
55
+ import gt from "@mui/material/styles/useTheme";
56
56
  import { b as Oe } from "../CategoryUtil-BVixr0d5.mjs";
57
- import { Stack as ho } from "@mui/material";
58
- import go from "@mui/material/Paper";
59
- import { E as po } from "../ExportCsvAction-izkIdXj5.mjs";
60
- import { u as fo } from "../useInsightsEnabled-DL_oNyI0.mjs";
61
- import { E as yo } from "../EmptyState-DHAkGsjk.mjs";
62
- import { C as Co } from "../ConnectDrawer-C0wjwcJt.mjs";
63
- const ht = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
64
- const { categories: n } = A(), { getCategoryName: o } = J(), r = o(t);
57
+ import { Stack as mo } from "@mui/material";
58
+ import ho from "@mui/material/ListItemAvatar";
59
+ import { E as go } from "../ExportCsvAction-izkIdXj5.mjs";
60
+ import { u as po } from "../useInsightsEnabled-DL_oNyI0.mjs";
61
+ import { E as fo } from "../EmptyState-DHAkGsjk.mjs";
62
+ import { C as yo } from "../ConnectDrawer-C0wjwcJt.mjs";
63
+ const pt = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
64
+ const { categories: n } = R(), { getCategoryName: o } = U(), r = o(t);
65
65
  return /* @__PURE__ */ C(x, { alignItems: "center", direction: "column", gap: "8", justifyContent: "center", mb: 4, children: [
66
66
  /* @__PURE__ */ e(
67
- W,
67
+ N,
68
68
  {
69
- "aria-label": st(n.category_icon_label_aria, r),
69
+ "aria-label": rt(n.category_icon_label_aria, r),
70
70
  mb: 4,
71
71
  role: "img",
72
- children: /* @__PURE__ */ e(xe, { categoryGuid: s })
72
+ children: /* @__PURE__ */ e(we, { categoryGuid: s })
73
73
  }
74
74
  ),
75
- /* @__PURE__ */ e(Q, { variant: "body1", children: r })
75
+ /* @__PURE__ */ e(F, { variant: "body1", children: r })
76
76
  ] });
77
- }, _o = ({
77
+ }, Co = ({
78
78
  categoryGuids: { guid: t, topLevelGuid: s },
79
79
  hoveredAreaData: n,
80
80
  cursorPosition: o,
81
81
  chartContainerRef: r
82
82
  }) => {
83
- const l = ne(), a = xt(null), [u, c] = vt({ x: o.x, y: o.y });
84
- if (Dt(() => {
83
+ const c = ae(), a = vt(null), [l, u] = Dt({ x: o.x, y: o.y });
84
+ if (It(() => {
85
85
  (() => {
86
86
  const m = a.current, _ = r.current;
87
87
  if (!m || !_) return;
88
88
  const h = m.getBoundingClientRect(), p = _.getBoundingClientRect();
89
89
  let f = o.x, T = o.y;
90
- f + h.width * 2 > p.right ? f = o.x - h.width : f - h.width < p.left && (f = o.x), T + h.height * 2 > p.bottom && (T = o.y - h.height), c({ x: f, y: T });
90
+ f + h.width * 2 > p.right ? f = o.x - h.width : f - h.width < p.left && (f = o.x), T + h.height * 2 > p.bottom && (T = o.y - h.height), u({ x: f, y: T });
91
91
  })();
92
92
  }, [o, r]), !n) return null;
93
93
  const i = n.reduce((y, m) => y + m.y, 0);
94
94
  return /* @__PURE__ */ e(
95
- et,
95
+ tt,
96
96
  {
97
97
  ref: a,
98
98
  sx: {
99
99
  position: "absolute",
100
- top: u.y,
101
- left: u.x,
100
+ top: l.y,
101
+ left: l.x,
102
102
  width: 250,
103
103
  pointerEvents: "none"
104
104
  },
105
- children: /* @__PURE__ */ C(tt, { children: [
106
- /* @__PURE__ */ C(W, { alignItems: "center", display: "flex", flexDirection: "column", children: [
107
- /* @__PURE__ */ e(ht, { categoryGuid: t, topLevelCategoryGuid: s }),
108
- /* @__PURE__ */ e(Q, { variant: "body2", children: `${n.length}-month total` }),
109
- /* @__PURE__ */ e(we, { amount: i, bold: !0, formatString: "0,0", variant: "body2" })
105
+ children: /* @__PURE__ */ C(ot, { children: [
106
+ /* @__PURE__ */ C(N, { alignItems: "center", display: "flex", flexDirection: "column", children: [
107
+ /* @__PURE__ */ e(pt, { categoryGuid: t, topLevelCategoryGuid: s }),
108
+ /* @__PURE__ */ e(F, { variant: "body2", children: `${n.length}-month total` }),
109
+ /* @__PURE__ */ e(xe, { amount: i, bold: !0, formatString: "0,0", variant: "body2" })
110
110
  ] }),
111
111
  /* @__PURE__ */ e(Ne, { sx: { my: 16, width: "100%" } }),
112
- /* @__PURE__ */ e(Fe, { container: !0, children: n.map((y, m) => /* @__PURE__ */ C(g.Fragment, { children: [
112
+ /* @__PURE__ */ e($e, { container: !0, children: n.map((y, m) => /* @__PURE__ */ C(g.Fragment, { children: [
113
113
  m > 0 && m % 3 === 0 && /* @__PURE__ */ e(Ne, { sx: { my: 16, width: "100%" } }),
114
- /* @__PURE__ */ e(Fe, { item: !0, xs: 4, children: /* @__PURE__ */ C(W, { alignItems: "center", display: "flex", flexDirection: "column", children: [
115
- /* @__PURE__ */ e(Q, { color: l.palette.text.secondary, variant: "caption", children: y.x }),
114
+ /* @__PURE__ */ e($e, { item: !0, xs: 4, children: /* @__PURE__ */ C(N, { alignItems: "center", display: "flex", flexDirection: "column", children: [
115
+ /* @__PURE__ */ e(F, { color: c.palette.text.secondary, variant: "caption", children: y.x }),
116
116
  /* @__PURE__ */ e(
117
- we,
117
+ xe,
118
118
  {
119
119
  amount: y.y,
120
120
  bold: !0,
@@ -127,15 +127,15 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
127
127
  ] })
128
128
  }
129
129
  );
130
- }, bo = M(_o), To = ({
130
+ }, _o = A(Co), bo = ({
131
131
  sx: t,
132
132
  categoryGuids: s,
133
133
  hoveredLegend: n,
134
134
  legendRef: o,
135
135
  onHoverLegend: r,
136
- onClickLegend: l
136
+ onClickLegend: c
137
137
  }) => {
138
- const { isMobile: a } = q(), { getCategoryName: u } = J();
138
+ const { isMobile: a } = j(), { getCategoryName: l } = U();
139
139
  return /* @__PURE__ */ e(
140
140
  x,
141
141
  {
@@ -145,13 +145,13 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
145
145
  justifyContent: "start",
146
146
  ref: o,
147
147
  sx: t,
148
- children: s.map(({ guid: c, top_level_guid: i }) => {
149
- const y = n === c, m = Re[c], _ = Re[i], h = m ?? _ ?? Re.default, p = h + "33";
148
+ children: s.map(({ guid: u, top_level_guid: i }) => {
149
+ const y = n === u, m = Re[u], _ = Re[i], h = m ?? _ ?? Re.default, p = h + "33";
150
150
  return /* @__PURE__ */ C(
151
151
  Te,
152
152
  {
153
- onClick: () => l(c),
154
- onMouseEnter: () => r(c),
153
+ onClick: () => c(u),
154
+ onMouseEnter: () => r(u),
155
155
  onMouseLeave: () => r(null),
156
156
  sx: {
157
157
  color: "text.primary",
@@ -166,7 +166,7 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
166
166
  },
167
167
  children: [
168
168
  /* @__PURE__ */ e(
169
- W,
169
+ N,
170
170
  {
171
171
  sx: {
172
172
  width: 16,
@@ -177,66 +177,66 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
177
177
  }
178
178
  }
179
179
  ),
180
- /* @__PURE__ */ e(Q, { variant: "body1", children: u(c) })
180
+ /* @__PURE__ */ e(F, { variant: "body1", children: l(u) })
181
181
  ]
182
182
  },
183
- c
183
+ u
184
184
  );
185
185
  })
186
186
  }
187
187
  );
188
- }, So = ({
188
+ }, To = ({
189
189
  categoryGuids: { guid: t, topLevelGuid: s },
190
190
  series: n,
191
191
  xData: o
192
192
  }) => {
193
- const r = At(), l = ne();
193
+ const r = Rt(), c = ae();
194
194
  if (!r?.identifier) return null;
195
- const { dataIndex: a, seriesId: u } = r.identifier;
196
- if (a == null || !u) return null;
197
- const i = n.find((m) => m.id === u)?.data?.[a], y = o?.[a];
198
- return i === void 0 || !y ? null : /* @__PURE__ */ e(et, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ e(tt, { children: /* @__PURE__ */ C(W, { alignItems: "center", display: "flex", flexDirection: "column", children: [
199
- /* @__PURE__ */ e(ht, { categoryGuid: t, topLevelCategoryGuid: s }),
200
- /* @__PURE__ */ e(Q, { color: l.palette.text.secondary, variant: "body2", children: Z(y, B.MONTH_SHORT_YEAR) }),
201
- /* @__PURE__ */ e(we, { amount: String(i), bold: !0, formatString: "0,0", variant: "body1" })
195
+ const { dataIndex: a, seriesId: l } = r.identifier;
196
+ if (a == null || !l) return null;
197
+ const i = n.find((m) => m.id === l)?.data?.[a], y = o?.[a];
198
+ return i === void 0 || !y ? null : /* @__PURE__ */ e(tt, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ e(ot, { children: /* @__PURE__ */ C(N, { alignItems: "center", display: "flex", flexDirection: "column", children: [
199
+ /* @__PURE__ */ e(pt, { categoryGuid: t, topLevelCategoryGuid: s }),
200
+ /* @__PURE__ */ e(F, { color: c.palette.text.secondary, variant: "body2", children: Y(y, P.MONTH_SHORT_YEAR) }),
201
+ /* @__PURE__ */ e(xe, { amount: String(i), bold: !0, formatString: "0,0", variant: "body1" })
202
202
  ] }) }) });
203
- }, wo = ({
203
+ }, So = ({
204
204
  onHoverArea: t,
205
205
  onHoverPoint: s,
206
206
  onHoverLegend: n,
207
207
  onClickLegend: o,
208
208
  stackedDatasets: r,
209
- unstackedDatasets: l = [],
209
+ unstackedDatasets: c = [],
210
210
  availableHeight: a = 0,
211
- minimumHeight: u = 350
211
+ minimumHeight: l = 350
212
212
  }) => {
213
- const c = ne(), { isMobile: i } = q(), [y, { height: m }] = Ht(), _ = g.useRef(null), [h, p] = g.useState(0);
213
+ const u = ae(), { isMobile: i } = j(), [y, { height: m }] = Nt(), _ = g.useRef(null), [h, p] = g.useState(0);
214
214
  g.useEffect(() => {
215
- const d = Math.max(a - m, u);
215
+ const d = Math.max(a - m, l);
216
216
  p(d);
217
217
  }, [a, m]);
218
- const [f, T] = g.useState(null), [S, R] = g.useState({
218
+ const [f, T] = g.useState(null), [S, k] = g.useState({
219
219
  hoveredSeriesId: null,
220
220
  hoveredAreaData: null,
221
221
  isAreaHovered: !1,
222
222
  cursorPos: { x: 0, y: 0 }
223
- }), { hoveredSeriesId: L, hoveredAreaData: w, isAreaHovered: k, cursorPos: H } = S, z = k && L && w, P = !z, K = [...r, ...l], E = K[0]?.dataset.length ?? 0, te = K.flatMap((d) => d.dataset.map((b) => b.x)), O = K.flatMap((d) => d.dataset.map((b) => b.y)), se = r[0]?.dataset?.map(
224
- (d, b) => r.reduce((I, U) => I + U.dataset[b]?.y || 0, 0)
225
- ) ?? [0], re = Math.max(...se), X = Math.max(
226
- ...l.flatMap((d) => d.dataset.map((b) => b.y))
227
- ), de = Math.floor(Math.min(...O) / 100) * 100, ue = Math.ceil(Math.max(re, X) / 100) * 100, V = r.map((d, b) => ({
223
+ }), { hoveredSeriesId: L, hoveredAreaData: E, isAreaHovered: w, cursorPos: M } = S, ie = w && L && E, X = !ie, V = [...r, ...c], Z = V[0]?.dataset.length ?? 0, O = V.flatMap((d) => d.dataset.map((b) => b.x)), G = V.flatMap((d) => d.dataset.map((b) => b.y)), Q = r[0]?.dataset?.map(
224
+ (d, b) => r.reduce((I, K) => I + K.dataset[b]?.y || 0, 0)
225
+ ) ?? [0], Ce = Math.max(...Q), ce = Math.max(
226
+ ...c.flatMap((d) => d.dataset.map((b) => b.y))
227
+ ), q = Math.floor(Math.min(...G) / 100) * 100, le = Math.ceil(Math.max(Ce, ce) / 100) * 100, z = r.map((d, b) => ({
228
228
  id: `stacked-${b}`,
229
229
  guid: d.category_guid,
230
230
  top_level_guid: d.top_level_category_guid,
231
231
  area: !0,
232
- color: r[b].category_color ?? c.palette.primary.main,
232
+ color: r[b].category_color ?? u.palette.primary.main,
233
233
  data: d.dataset.map((I) => I.y),
234
234
  label: r[b].category_name,
235
235
  stack: "total",
236
236
  type: "line",
237
237
  highlightScope: { highlight: "item" },
238
- valueFormatter: (I) => oe(I, "0,0")
239
- })), ae = l.map((d, b) => ({
238
+ valueFormatter: (I) => re(I, "0,0")
239
+ })), J = c.map((d, b) => ({
240
240
  id: `unstacked-${b}`,
241
241
  guid: d.category_guid,
242
242
  top_level_guid: d.top_level_category_guid,
@@ -245,68 +245,68 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
245
245
  data: d.dataset.map((I) => I.y),
246
246
  label: d.category_name,
247
247
  type: "line",
248
- valueFormatter: (I) => oe(I, "0,0")
249
- })), Y = [...V, ...ae], me = [
250
- ...V.map(({ guid: d, top_level_guid: b }) => ({
248
+ valueFormatter: (I) => re(I, "0,0")
249
+ })), ne = [...z, ...J], ee = [
250
+ ...z.map(({ guid: d, top_level_guid: b }) => ({
251
251
  guid: d,
252
252
  top_level_guid: b
253
253
  })),
254
- ...ae.map(({ guid: d, top_level_guid: b }) => ({
254
+ ...J.map(({ guid: d, top_level_guid: b }) => ({
255
255
  guid: d,
256
256
  top_level_guid: b
257
257
  }))
258
- ], j = (d) => {
259
- const I = d.startsWith("stacked-") ? r[parseInt(d.split("-")[1])] : l[parseInt(d.split("-")[1])];
258
+ ], te = (d) => {
259
+ const I = d.startsWith("stacked-") ? r[parseInt(d.split("-")[1])] : c[parseInt(d.split("-")[1])];
260
260
  return {
261
261
  guid: I?.category_guid,
262
262
  topLevelGuid: I?.top_level_category_guid
263
263
  };
264
- }, ie = (d) => {
264
+ }, se = (d) => {
265
265
  T(d), n?.(d ?? "");
266
- }, he = (d) => {
266
+ }, de = (d) => {
267
267
  o?.(d ?? "");
268
- }, le = () => {
269
- const d = j(String(L)).guid;
268
+ }, ue = () => {
269
+ const d = te(String(L)).guid;
270
270
  d && o?.(d);
271
- }, ce = (d) => {
272
- const b = String(d?.seriesId), I = j(b).guid, U = Y.find((ge) => ge.id === b), Ee = U && d?.dataIndex !== void 0, _e = U && d?.dataIndex === void 0;
273
- if (Ee)
274
- R({
271
+ }, me = (d) => {
272
+ const b = String(d?.seriesId), I = te(b).guid, K = ne.find((he) => he.id === b), _e = K && d?.dataIndex !== void 0, Ee = K && d?.dataIndex === void 0;
273
+ if (_e)
274
+ k({
275
275
  hoveredSeriesId: b,
276
276
  hoveredAreaData: null,
277
277
  isAreaHovered: !1,
278
- cursorPos: H
278
+ cursorPos: M
279
279
  }), s?.(I);
280
- else if (_e) {
281
- const ge = U?.data.map((Me, Ae) => ({
282
- x: te[Ae],
280
+ else if (Ee) {
281
+ const he = K?.data.map((Me, Ae) => ({
282
+ x: O[Ae],
283
283
  y: Me
284
284
  })) ?? [];
285
- R({
285
+ k({
286
286
  hoveredSeriesId: b,
287
- hoveredAreaData: ge,
287
+ hoveredAreaData: he,
288
288
  isAreaHovered: !0,
289
- cursorPos: H
289
+ cursorPos: M
290
290
  }), t?.(I);
291
291
  } else
292
- R({
292
+ k({
293
293
  hoveredSeriesId: null,
294
294
  hoveredAreaData: null,
295
295
  isAreaHovered: !1,
296
- cursorPos: H
296
+ cursorPos: M
297
297
  });
298
298
  }, D = (d) => {
299
299
  if (d.target instanceof Element && d.target.classList[0]?.includes("MuiMarkElement-root"))
300
300
  return;
301
301
  const b = d.currentTarget.getBoundingClientRect();
302
- R((I) => ({
302
+ k((I) => ({
303
303
  ...I,
304
304
  cursorPos: {
305
305
  x: d.clientX - b.left,
306
306
  y: d.clientY - b.top
307
307
  }
308
308
  }));
309
- }, F = {
309
+ }, B = {
310
310
  p: 4,
311
311
  "& .MuiBarLabel-root": {
312
312
  fontSize: 10,
@@ -322,15 +322,15 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
322
322
  '& [class*="MuiLineElement-series-unstacked-"]': {
323
323
  strokeWidth: 3
324
324
  },
325
- ...f && V.reduce((d, b, I) => {
326
- const U = `.MuiAreaElement-series-stacked-${I}`;
327
- return d[U] = {
328
- opacity: V[I].guid === f ? 0.9 : 0.2
325
+ ...f && z.reduce((d, b, I) => {
326
+ const K = `.MuiAreaElement-series-stacked-${I}`;
327
+ return d[K] = {
328
+ opacity: z[I].guid === f ? 0.9 : 0.2
329
329
  }, d;
330
330
  }, {})
331
331
  };
332
332
  return /* @__PURE__ */ e(
333
- W,
333
+ N,
334
334
  {
335
335
  onMouseMove: D,
336
336
  ref: _,
@@ -353,68 +353,68 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
353
353
  sx: { width: "100%", position: "relative" },
354
354
  children: [
355
355
  /* @__PURE__ */ e(
356
- kt,
356
+ Ht,
357
357
  {
358
358
  height: h,
359
359
  hideLegend: !0,
360
360
  margin: { bottom: 24, left: 12, right: 54, top: 48 },
361
- onAreaClick: le,
362
- onHighlightChange: ce,
363
- series: Y,
361
+ onAreaClick: ue,
362
+ onHighlightChange: me,
363
+ series: ne,
364
364
  skipAnimation: !0,
365
365
  slotProps: {
366
- tooltip: { trigger: P ? "item" : "none" }
366
+ tooltip: { trigger: X ? "item" : "none" }
367
367
  },
368
368
  slots: {
369
- tooltip: P && L ? (d) => /* @__PURE__ */ e(Rt, { children: /* @__PURE__ */ e(
370
- So,
369
+ tooltip: X && L ? (d) => /* @__PURE__ */ e(kt, { children: /* @__PURE__ */ e(
370
+ To,
371
371
  {
372
372
  ...d,
373
- categoryGuids: j(L),
374
- series: Y,
375
- xData: te
373
+ categoryGuids: te(L),
374
+ series: ne,
375
+ xData: O
376
376
  }
377
377
  ) }) : void 0
378
378
  },
379
- sx: F,
379
+ sx: B,
380
380
  xAxis: [
381
381
  {
382
- data: te,
382
+ data: O,
383
383
  scaleType: "time",
384
- valueFormatter: (d) => Z(d, B.MONTH_SHORT_YEAR),
385
- tickNumber: E
384
+ valueFormatter: (d) => Y(d, P.MONTH_SHORT_YEAR),
385
+ tickNumber: Z
386
386
  // How many ticks to show on the x-axis
387
387
  }
388
388
  ],
389
389
  yAxis: [
390
390
  {
391
- min: de,
392
- max: ue || 100,
393
- valueFormatter: (d) => Lt(d).format("0a")
391
+ min: q,
392
+ max: le || 100,
393
+ valueFormatter: (d) => Et(d).format("0a")
394
394
  }
395
395
  ]
396
396
  }
397
397
  ),
398
398
  /* @__PURE__ */ e(
399
- To,
399
+ bo,
400
400
  {
401
- categoryGuids: me,
401
+ categoryGuids: ee,
402
402
  hoveredLegend: f,
403
403
  legendRef: y,
404
- onClickLegend: he,
405
- onHoverLegend: ie,
404
+ onClickLegend: de,
405
+ onHoverLegend: se,
406
406
  sx: { px: i ? 0 : 24 }
407
407
  }
408
408
  ),
409
- z && /* @__PURE__ */ e(
410
- bo,
409
+ ie && /* @__PURE__ */ e(
410
+ _o,
411
411
  {
412
- categoryGuids: j(L),
412
+ categoryGuids: te(L),
413
413
  chartContainerRef: _,
414
- cursorPosition: H,
415
- hoveredAreaData: w.map((d) => ({
414
+ cursorPosition: M,
415
+ hoveredAreaData: E.map((d) => ({
416
416
  ...d,
417
- x: Z(d.x, B.MONTH_SHORT_YEAR)
417
+ x: Y(d.x, P.MONTH_SHORT_YEAR)
418
418
  }))
419
419
  }
420
420
  )
@@ -423,10 +423,10 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
423
423
  )
424
424
  }
425
425
  );
426
- }, gt = ({ selectedTab: t, onTabChange: s }) => {
427
- const { common: n } = A();
426
+ }, ft = ({ selectedTab: t, onTabChange: s }) => {
427
+ const { common: n } = R();
428
428
  return /* @__PURE__ */ e(
429
- zt,
429
+ Yt,
430
430
  {
431
431
  "aria-label": n.view_toggle,
432
432
  exclusive: !0,
@@ -434,7 +434,7 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
434
434
  orientation: "horizontal",
435
435
  value: t,
436
436
  children: ["Chart", "Table"].map((o) => /* @__PURE__ */ e(
437
- $t,
437
+ Kt,
438
438
  {
439
439
  "aria-label": o === "Chart" ? n.view_chart : n.view_table,
440
440
  "aria-pressed": t === o,
@@ -447,21 +447,21 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
447
447
  ))
448
448
  }
449
449
  );
450
- }, pt = ({ selectedDateRange: t, selectedCategoryGuid: s }) => {
451
- const { trends: n } = A(), { isMobile: o, isDesktop: r } = q(), { getCategoryName: l } = J(), a = g.useMemo(() => {
452
- const i = t.start.getFullYear() === t.end.getFullYear() ? Z(
450
+ }, yt = ({ selectedDateRange: t, selectedCategoryGuid: s }) => {
451
+ const { trends: n } = R(), { isMobile: o, isDesktop: r } = j(), { getCategoryName: c } = U(), a = g.useMemo(() => {
452
+ const i = t.start.getFullYear() === t.end.getFullYear() ? Y(
453
453
  t.start,
454
- o ? B.MONTH_SHORT : B.MONTH_LONG
455
- ) : Z(
454
+ o ? P.MONTH_SHORT : P.MONTH_LONG
455
+ ) : Y(
456
456
  t.start,
457
- o ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
458
- ), y = Z(
457
+ o ? P.MONTH_SHORT_YEAR : P.MONTH_YEAR
458
+ ), y = Y(
459
459
  t.end,
460
- o ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
460
+ o ? P.MONTH_SHORT_YEAR : P.MONTH_YEAR
461
461
  );
462
462
  return `${i} - ${y}`;
463
- }, [t, o]), c = l(s) || (o ? n.sub_title : n.sub_title_by_category);
464
- return /* @__PURE__ */ C(W, { children: [
463
+ }, [t, o]), u = c(s) || (o ? n.sub_title : n.sub_title_by_category);
464
+ return /* @__PURE__ */ C(N, { children: [
465
465
  /* @__PURE__ */ e(
466
466
  Ge,
467
467
  {
@@ -471,43 +471,43 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
471
471
  overflow: "visible",
472
472
  textOverflow: "unset"
473
473
  },
474
- children: c
474
+ children: u
475
475
  }
476
476
  ),
477
- /* @__PURE__ */ e(Q, { variant: r ? "subtitle1" : "body2", children: a })
477
+ /* @__PURE__ */ e(F, { variant: r ? "subtitle1" : "body2", children: a })
478
478
  ] });
479
479
  }, xo = (t) => {
480
480
  const s = t.id === "total";
481
481
  return /* @__PURE__ */ C(x, { alignItems: "center", direction: "row", role: "rowheader", tabIndex: t.tabIndex, children: [
482
- !s && /* @__PURE__ */ e(W, { "aria-hidden": !0, children: /* @__PURE__ */ e(xe, { categoryGuid: t.row.top_level_category_guid, variant: "twotone" }) }),
483
- /* @__PURE__ */ e(Q, { bold: s, sx: { ml: 12 }, variant: s ? "body1" : "body2", children: t.row.category })
482
+ !s && /* @__PURE__ */ e(N, { "aria-hidden": !0, children: /* @__PURE__ */ e(we, { categoryGuid: t.row.top_level_category_guid, variant: "twotone" }) }),
483
+ /* @__PURE__ */ e(F, { bold: s, sx: { ml: 12 }, variant: s ? "body1" : "body2", children: t.row.category })
484
484
  ] });
485
- }, Ye = (t) => {
486
- const s = t.row.category_guid, n = t.row.top_level_category_guid, o = s === $e.INCOME || n === $e.INCOME, r = t.id === "total", l = t.field === "total", a = l ? t.row[t.field] : t.row.monthlyAmounts[t.field];
485
+ }, je = (t) => {
486
+ const s = t.row.category_guid, n = t.row.top_level_category_guid, o = s === ze.INCOME || n === ze.INCOME, r = t.id === "total", c = t.field === "total", a = c ? t.row[t.field] : t.row.monthlyAmounts[t.field];
487
487
  return /* @__PURE__ */ e(x, { alignItems: "flex-end", direction: "row", tabIndex: t.tabIndex, children: /* @__PURE__ */ e(
488
- we,
488
+ xe,
489
489
  {
490
490
  amount: o ? Math.abs(a) : a,
491
491
  isIncome: o,
492
- sx: { fontWeight: o || l || r ? 600 : 500 },
492
+ sx: { fontWeight: o || c || r ? 600 : 500 },
493
493
  symbol: o ? "+" : void 0,
494
494
  variant: r ? "body1" : "body2"
495
495
  }
496
496
  ) });
497
- }, je = (t, s) => {
498
- const n = Z(lt(s.isoDate), B.MONTH_LONG);
497
+ }, Ue = (t, s) => {
498
+ const n = Y(ct(s.isoDate), P.MONTH_LONG);
499
499
  return t[n] = s.amount, t;
500
- }, Ue = (t) => (s, n) => {
501
- const o = Z(lt(n.isoDate), B.MONTH_LONG);
500
+ }, Xe = (t) => (s, n) => {
501
+ const o = Y(ct(n.isoDate), P.MONTH_LONG);
502
502
  return s + (t.includes(o) ? n.amount : 0);
503
- }, vo = (t, s) => {
503
+ }, wo = (t, s) => {
504
504
  const n = [], o = new Date(t);
505
505
  for (; o <= s; ) {
506
- const r = Z(o, B.MONTH_LONG);
506
+ const r = Y(o, P.MONTH_LONG);
507
507
  n.push(r), o.setMonth(o.getMonth() + 1);
508
508
  }
509
509
  return n;
510
- }, Do = (t, s) => {
510
+ }, vo = (t, s) => {
511
511
  const n = {
512
512
  field: "category",
513
513
  flex: 1,
@@ -517,23 +517,23 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
517
517
  renderHeader: ke,
518
518
  renderCell: xo,
519
519
  sortable: !0,
520
- sortComparator: Ot,
520
+ sortComparator: Gt,
521
521
  type: "string"
522
- }, o = t.map((l) => ({
523
- field: l,
522
+ }, o = t.map((c) => ({
523
+ field: c,
524
524
  flex: 1,
525
525
  headerClassName: "trends-table-header",
526
- headerName: l,
526
+ headerName: c,
527
527
  minWidth: 100,
528
528
  renderHeader: ke,
529
- renderCell: Ye,
529
+ renderCell: je,
530
530
  align: "center",
531
531
  headerAlign: "center",
532
532
  sortable: !0,
533
533
  hideSortIcons: !1,
534
534
  type: "number",
535
- sortComparator: ze,
536
- valueGetter: (a, u) => u.monthlyAmounts?.[l] ?? 0
535
+ sortComparator: Ke,
536
+ valueGetter: (a, l) => l.monthlyAmounts?.[c] ?? 0
537
537
  })), r = {
538
538
  field: "total",
539
539
  flex: 1,
@@ -541,96 +541,96 @@ const ht = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
541
541
  headerName: s.table_column_total,
542
542
  minWidth: 100,
543
543
  renderHeader: ke,
544
- renderCell: Ye,
544
+ renderCell: je,
545
545
  align: "center",
546
546
  headerAlign: "center",
547
547
  sortable: !0,
548
548
  hideSortIcons: !1,
549
549
  type: "number",
550
- sortComparator: ze
550
+ sortComparator: Ke
551
551
  };
552
552
  return [n, ...o, r];
553
- }, Xe = (t, s, n, o, r) => {
554
- const l = t.filter((a) => a.is_income === n).map((a) => {
555
- let u = a.totalMonthlyAmounts;
556
- return r && (u = a.monthlyAmounts), {
553
+ }, Ze = (t, s, n, o, r) => {
554
+ const c = t.filter((a) => a.is_income === n).map((a) => {
555
+ let l = a.totalMonthlyAmounts;
556
+ return r && (l = a.monthlyAmounts), {
557
557
  id: a.guid,
558
558
  category: a.name,
559
559
  category_guid: a.guid,
560
560
  isParent: !1,
561
561
  top_level_category_guid: a.parent_guid || a.guid,
562
- total: u.reduce(Ue(o), 0),
563
- monthlyAmounts: u.reduce(je, {})
562
+ total: l.reduce(Xe(o), 0),
563
+ monthlyAmounts: l.reduce(Ue, {})
564
564
  };
565
565
  });
566
566
  if (r && r.is_income === n) {
567
- const a = r.monthlyAmounts.reduce(Ue(o), 0);
568
- a !== 0 && l.push({
567
+ const a = r.monthlyAmounts.reduce(Xe(o), 0);
568
+ a !== 0 && c.push({
569
569
  id: `sub-${r.guid}`,
570
- category: st(s.category_general, r.name),
570
+ category: rt(s.category_general, r.name),
571
571
  category_guid: r.guid,
572
572
  isParent: !0,
573
573
  top_level_category_guid: r.guid,
574
574
  total: a,
575
- monthlyAmounts: r.monthlyAmounts.reduce(je, {})
575
+ monthlyAmounts: r.monthlyAmounts.reduce(Ue, {})
576
576
  });
577
577
  }
578
- return l;
579
- }, Io = Et("div")({
578
+ return c;
579
+ }, Do = Mt("div")({
580
580
  display: "flex",
581
581
  visibility: "hidden",
582
582
  width: 0
583
583
  });
584
- function Lo({
584
+ function Io({
585
585
  direction: t,
586
586
  index: s,
587
587
  sortingOrder: n,
588
588
  disabled: o,
589
589
  className: r,
590
- field: l
590
+ field: c
591
591
  }) {
592
- const a = Yt(), u = jt();
593
- let c = null;
592
+ const a = Ut(), l = Xt();
593
+ let u = null;
594
594
  const i = {};
595
- if (t === "asc" ? c = u.slots.columnSortedAscendingIcon : t === "desc" ? c = u.slots.columnSortedDescendingIcon : (c = u.slots.columnUnsortedIcon ?? null, i.sortingOrder = n), !c) return null;
596
- const m = a.current.getColumn(l)?.headerName ?? l;
595
+ if (t === "asc" ? u = l.slots.columnSortedAscendingIcon : t === "desc" ? u = l.slots.columnSortedDescendingIcon : (u = l.slots.columnUnsortedIcon ?? null, i.sortingOrder = n), !u) return null;
596
+ const m = a.current.getColumn(c)?.headerName ?? c;
597
597
  let _ = "";
598
598
  t === "asc" ? _ = ", sorted ascending" : t === "desc" && (_ = ", sorted descending");
599
- const h = ["Total", "Category"].includes(m) ? "" : " category totals", p = `Sort by ${m}${h}${_}`, f = /* @__PURE__ */ e(c, { className: "MuiDataGrid-sortIcon", fontSize: "small", ...i }), T = /* @__PURE__ */ e(
600
- Zt,
599
+ const h = ["Total", "Category"].includes(m) ? "" : " category totals", p = `Sort by ${m}${h}${_}`, f = /* @__PURE__ */ e(u, { className: "MuiDataGrid-sortIcon", fontSize: "small", ...i }), T = /* @__PURE__ */ e(
600
+ qt,
601
601
  {
602
602
  disabled: o,
603
603
  size: "small",
604
604
  tabIndex: -1,
605
- ...u.slotProps?.baseIconButton,
605
+ ...l.slotProps?.baseIconButton,
606
606
  "aria-label": p,
607
607
  className: `MuiDataGrid-sortButton${r ? ` ${r}` : ""}`,
608
608
  title: p,
609
609
  children: f
610
610
  }
611
611
  );
612
- return /* @__PURE__ */ e(Io, { className: "MuiDataGrid-iconButtonContainer", children: s != null ? /* @__PURE__ */ e(Xt, { badgeContent: s, color: "default", overlap: "circular", children: T }) : T });
612
+ return /* @__PURE__ */ e(Do, { className: "MuiDataGrid-iconButtonContainer", children: s != null ? /* @__PURE__ */ e(Qt, { badgeContent: s, color: "default", overlap: "circular", children: T }) : T });
613
613
  }
614
- const Eo = g.memo(Lo), Ze = ({
614
+ const Lo = g.memo(Io), Qe = ({
615
615
  columns: t,
616
616
  onRowClick: s,
617
617
  parentCategory: n,
618
618
  rows: o,
619
619
  totalRow: r
620
620
  }) => {
621
- const l = ne(), { onEvent: a } = $(), u = l.palette.mode === "light";
621
+ const c = ae(), { onEvent: a } = $(), l = c.palette.mode === "light";
622
622
  return /* @__PURE__ */ e(
623
- Ut,
623
+ Zt,
624
624
  {
625
625
  columns: t,
626
626
  disableColumnFilter: !0,
627
627
  disableColumnMenu: !0,
628
628
  hideFooter: !0,
629
629
  initialState: { sorting: { sortModel: [{ field: "category", sort: "asc" }] } },
630
- onRowClick: (c) => {
631
- n || s?.(c.row.category_guid), a(v.TRENDS_CLICK_LIST_ITEM, {
632
- ...G,
633
- listItem: Nt[c.row.category_guid]
630
+ onRowClick: (u) => {
631
+ n || s?.(u.row.category_guid), a(v.TRENDS_CLICK_LIST_ITEM, {
632
+ ...W,
633
+ listItem: Wt[u.row.category_guid]
634
634
  });
635
635
  },
636
636
  pinnedRows: {
@@ -639,7 +639,7 @@ const Eo = g.memo(Lo), Ze = ({
639
639
  rowHeight: 64,
640
640
  rows: o,
641
641
  slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
642
- slots: { columnHeaderSortIcon: Eo },
642
+ slots: { columnHeaderSortIcon: Lo },
643
643
  sortingOrder: ["asc", "desc"],
644
644
  sx: {
645
645
  borderColor: "divider",
@@ -647,23 +647,23 @@ const Eo = g.memo(Lo), Ze = ({
647
647
  borderStyle: "solid",
648
648
  borderRadius: 2,
649
649
  "& .MuiDataGrid-columnHeaders": {
650
- bgcolor: u ? "neutral.50" : "neutral.800",
650
+ bgcolor: l ? "neutral.50" : "neutral.800",
651
651
  borderBottom: "none"
652
652
  },
653
653
  "& .trends-table-header": {
654
- bgcolor: u ? "neutral.50" : "neutral.800"
654
+ bgcolor: l ? "neutral.50" : "neutral.800"
655
655
  }
656
656
  }
657
657
  }
658
658
  );
659
- }, ft = ({
659
+ }, Ct = ({
660
660
  selectedDateRange: t,
661
661
  selectedCategory: s,
662
662
  onClickRow: n,
663
663
  height: o = "100%",
664
664
  sx: r = {}
665
665
  }) => {
666
- const { trends: l } = A(), { trendsCategories: a } = J(), u = g.useMemo(() => vo(t.start, t.end), [t]), c = g.useMemo(() => Do(u, l), [u, l]), i = g.useMemo(() => {
666
+ const { trends: c } = R(), { trendsCategories: a } = U(), l = g.useMemo(() => wo(t.start, t.end), [t]), u = g.useMemo(() => vo(l, c), [l, c]), i = g.useMemo(() => {
667
667
  if (s)
668
668
  return a.find((h) => h.guid === s);
669
669
  }, [s, a]), [y, m] = g.useMemo(() => {
@@ -671,12 +671,12 @@ const Eo = g.memo(Lo), Ze = ({
671
671
  return i && (h = i.subCategories.filter(
672
672
  (p) => p.monthlyAmounts.some((f) => f.amount !== 0)
673
673
  )), [
674
- Xe(h, l, !0, u, i),
675
- Xe(h, l, !1, u, i)
674
+ Ze(h, c, !0, l, i),
675
+ Ze(h, c, !1, l, i)
676
676
  ];
677
- }, [a, u, i, l]), _ = {
677
+ }, [a, l, i, c]), _ = {
678
678
  id: "total",
679
- category: l.table_column_total,
679
+ category: c.table_column_total,
680
680
  category_guid: "total",
681
681
  isParent: !1,
682
682
  top_level_category_guid: "total",
@@ -695,18 +695,18 @@ const Eo = g.memo(Lo), Ze = ({
695
695
  sx: { height: o, width: "100%", overflowX: "auto", boxShadow: "none", ...r },
696
696
  children: [
697
697
  (!i || i && i.is_income) && /* @__PURE__ */ e(
698
- Ze,
698
+ Qe,
699
699
  {
700
- columns: c,
700
+ columns: u,
701
701
  onRowClick: n,
702
702
  parentCategory: i,
703
703
  rows: y
704
704
  }
705
705
  ),
706
706
  (!i || i && !i.is_income) && /* @__PURE__ */ e(
707
- Ze,
707
+ Qe,
708
708
  {
709
- columns: c,
709
+ columns: u,
710
710
  onRowClick: n,
711
711
  parentCategory: i,
712
712
  rows: m,
@@ -716,118 +716,118 @@ const Eo = g.memo(Lo), Ze = ({
716
716
  ]
717
717
  }
718
718
  );
719
- }, Mo = {
719
+ }, Eo = {
720
720
  title: "Transaction List"
721
- }, Ao = ({
721
+ }, Mo = ({
722
722
  categoryGuid: t,
723
723
  dateRange: s,
724
724
  isOpen: n,
725
725
  onClose: o
726
726
  }) => {
727
- const { onEvent: r } = $(), { selectedAccountGuids: l } = ye(), { common: a } = A(), { setFilter: u, sortedTransactions: c } = ve(), [i, y] = g.useState(""), m = g.useMemo(
728
- () => c.find((h) => h.guid === i),
729
- [i, c]
727
+ const { onEvent: r } = $(), { selectedAccountGuids: c } = fe(), { common: a } = R(), { setFilter: l, sortedTransactions: u } = ve(), [i, y] = g.useState(""), m = g.useMemo(
728
+ () => u.find((h) => h.guid === i),
729
+ [i, u]
730
730
  );
731
731
  g.useEffect(() => {
732
- u({
733
- accounts: l,
732
+ l({
733
+ accounts: c,
734
734
  dateRange: s,
735
735
  custom: (h) => t === "" || t === h.category_guid || t === h.top_level_category_guid,
736
736
  showSplits: !!t
737
737
  });
738
- }, [l, t, s]), g.useEffect(() => r(v.TRENDS_VIEW_TRANSACTIONS), []);
738
+ }, [c, t, s]), g.useEffect(() => r(v.TRENDS_VIEW_TRANSACTIONS), []);
739
739
  const _ = () => {
740
740
  y(""), o();
741
741
  };
742
742
  return /* @__PURE__ */ C(
743
- We,
743
+ Pe,
744
744
  {
745
745
  ariaLabelClose: a.close_aria,
746
746
  isOpen: n,
747
747
  onClose: _,
748
- title: Mo.title,
748
+ title: Eo.title,
749
749
  children: [
750
750
  m && /* @__PURE__ */ e(dt, { transaction: m }),
751
- !m && /* @__PURE__ */ e(ct, { onClick: y })
751
+ !m && /* @__PURE__ */ e(lt, { onClick: y })
752
752
  ]
753
753
  }
754
754
  );
755
- }, Ro = M(Ao), ko = ({ onBackClick: t, sx: s }) => {
756
- const { onEvent: n } = $(), { isDesktop: o, isTablet: r, isMobile: l } = q(), { isAccountDataLoaded: a, loadAccountData: u } = De(), {
757
- categoriesLoaded: c,
755
+ }, Ao = A(Mo), Ro = ({ onBackClick: t, sx: s }) => {
756
+ const { onEvent: n } = $(), { isDesktop: o, isTablet: r, isMobile: c } = j(), { isAccountDataLoaded: a, loadAccountData: l } = De(), {
757
+ categoriesLoaded: u,
758
758
  loadCategories: i,
759
759
  loadDateRangeCategoryTotals: y,
760
760
  loadMonthlyCategoryTotals: m,
761
761
  monthlyCategoryTotals: _,
762
762
  getCategoryName: h
763
- } = J(), {
763
+ } = U(), {
764
764
  isTransactionDataLoaded: p,
765
765
  loadTransactionData: f,
766
766
  sortedTransactions: T
767
- } = ve(), { selectedDateRange: S, setSelectedDateRange: R } = Ce(), { isInitialized: L, selectedAccounts: w } = ye(), { trends: k } = A(), [H, z] = g.useState(!1), [P, K] = g.useState(!1), [E, te] = g.useState("Chart"), [O, se] = g.useState(""), [re, X] = g.useState(window.innerHeight), ue = re - (l ? 315 : 345);
767
+ } = ve(), { selectedDateRange: S, setSelectedDateRange: k } = ye(), { isInitialized: L, selectedAccounts: E } = fe(), { trends: w } = R(), [M, ie] = g.useState(!1), [X, V] = g.useState(!1), [Z, O] = g.useState("Chart"), [G, Q] = g.useState(""), [Ce, ce] = g.useState(window.innerHeight), le = Ce - (c ? 315 : 345);
768
768
  Ie({
769
769
  widgetName: "TrendsFullWidget",
770
- isLoaded: H
770
+ isLoaded: M
771
771
  }), g.useEffect(() => {
772
- const D = () => X(window.innerHeight);
773
- return window.addEventListener("resize", D), a || u().finally(), c || i().finally(), p || f().finally(), () => window.removeEventListener("resize", D);
772
+ const D = () => ce(window.innerHeight);
773
+ return window.addEventListener("resize", D), a || l().finally(), u || i().finally(), p || f().finally(), () => window.removeEventListener("resize", D);
774
774
  }, []), g.useEffect(() => {
775
- L && y(w, S.start, S.end).then(() => {
775
+ L && y(E, S.start, S.end).then(() => {
776
776
  m(
777
- w,
777
+ E,
778
778
  S.start,
779
779
  S.end
780
780
  );
781
781
  }).finally(() => {
782
- z(!0), n(v.TRENDS_LOAD_WIDGET, {
783
- ...G,
782
+ ie(!0), n(v.TRENDS_LOAD_WIDGET, {
783
+ ...W,
784
784
  time_period: `${Se(S.end, S.start)}M`
785
785
  });
786
786
  });
787
- }, [L, w, S]);
788
- const V = g.useMemo(() => {
789
- if (!H) return { stackedDatasets: [], unstackedDatasets: [] };
790
- const D = Gt(
787
+ }, [L, E, S]);
788
+ const z = g.useMemo(() => {
789
+ if (!M) return { stackedDatasets: [], unstackedDatasets: [] };
790
+ const D = Bt(
791
791
  _,
792
792
  S.start,
793
793
  S.end
794
- ), F = O.length ? D.filter(
795
- (d) => d.top_level_category_guid === O || d.category_guid === O
796
- ) : Bt(D);
794
+ ), B = G.length ? D.filter(
795
+ (d) => d.top_level_category_guid === G || d.category_guid === G
796
+ ) : Vt(D);
797
797
  return {
798
- stackedDatasets: F.filter(Pt),
799
- unstackedDatasets: F.filter(Vt)
798
+ stackedDatasets: B.filter(Ft),
799
+ unstackedDatasets: B.filter($t)
800
800
  };
801
- }, [_, O, S]), ae = (D, F) => {
802
- te(F ?? E), n(v.TRENDS_CLICK_TOGGLE_VIEW);
803
- }, Y = (D) => {
804
- const F = Je(D?.[0], 1), d = D?.[1], b = Se(d, F);
805
- R({ start: F, end: d }), n(v.TRENDS_CLICK_TIME_WINDOW, {
801
+ }, [_, G, S]), J = (D, B) => {
802
+ O(B ?? Z), n(v.TRENDS_CLICK_TOGGLE_VIEW);
803
+ }, ne = (D) => {
804
+ const B = et(D?.[0], 1), d = D?.[1], b = Se(d, B);
805
+ k({ start: B, end: d }), n(v.TRENDS_CLICK_TIME_WINDOW, {
806
806
  time_period: b + "M"
807
807
  });
808
- }, me = () => {
808
+ }, ee = () => {
809
809
  n(v.TRENDS_CLICK_FILTER);
810
- }, j = (D) => {
811
- se(D);
812
- }, ie = (D) => {
813
- se(D), n(v.TRENDS_CLICK_LEGEND, { category: h(D) });
814
- }, he = (D) => {
810
+ }, te = (D) => {
811
+ Q(D);
812
+ }, se = (D) => {
813
+ Q(D), n(v.TRENDS_CLICK_LEGEND, { category: h(D) });
814
+ }, de = (D) => {
815
815
  n(v.TRENDS_HOVER_LEGEND, { category: h(D) });
816
- }, le = (D) => {
816
+ }, ue = (D) => {
817
817
  n(v.TRENDS_HOVER_AREA, { category: D });
818
- }, ce = (D) => {
818
+ }, me = (D) => {
819
819
  n(v.TRENDS_HOVER_POINT, { category: D });
820
820
  };
821
- return !L || !H ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ C(
821
+ return !L || !M ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ C(
822
822
  ut,
823
823
  {
824
- calendarActions: { onRangeChanged: Y },
824
+ calendarActions: { onRangeChanged: ne },
825
825
  dateRange: S,
826
826
  dateRangeVariant: "timeframebuttons",
827
- onAccountsFilterClick: me,
827
+ onAccountsFilterClick: ee,
828
828
  onBackClick: t,
829
829
  sx: s,
830
- title: k.title,
830
+ title: w.title,
831
831
  children: [
832
832
  /* @__PURE__ */ C(
833
833
  x,
@@ -842,44 +842,44 @@ const Eo = g.memo(Lo), Ze = ({
842
842
  {
843
843
  flexDirection: "row",
844
844
  justifyContent: "space-between",
845
- sx: { pb: l ? 12 : 24, pt: l ? 24 : 48 },
845
+ sx: { pb: c ? 12 : 24, pt: c ? 24 : 48 },
846
846
  children: [
847
847
  /* @__PURE__ */ e(
848
- pt,
848
+ yt,
849
849
  {
850
- selectedCategoryGuid: O,
850
+ selectedCategoryGuid: G,
851
851
  selectedDateRange: S
852
852
  }
853
853
  ),
854
- /* @__PURE__ */ e(gt, { onTabChange: ae, selectedTab: E })
854
+ /* @__PURE__ */ e(ft, { onTabChange: J, selectedTab: Z })
855
855
  ]
856
856
  }
857
857
  ),
858
858
  /* @__PURE__ */ C(x, { alignItems: "center", flexDirection: "row", width: "100%", children: [
859
- /* @__PURE__ */ e(W, { flexGrow: 1, children: O && /* @__PURE__ */ C(Te, { onClick: () => se(""), sx: { p: 0, pr: 5 }, children: [
859
+ /* @__PURE__ */ e(N, { flexGrow: 1, children: G && /* @__PURE__ */ C(Te, { onClick: () => Q(""), sx: { p: 0, pr: 5 }, children: [
860
860
  /* @__PURE__ */ e(He, { name: "arrow_back" }),
861
- k.all_categories
861
+ w.all_categories
862
862
  ] }) }),
863
- /* @__PURE__ */ e(Te, { onClick: () => K(!0), sx: { px: 5 }, children: `${k.view_transactions} (${T.length})` })
863
+ /* @__PURE__ */ e(Te, { onClick: () => V(!0), sx: { px: 5 }, children: `${w.view_transactions} (${T.length})` })
864
864
  ] }),
865
- /* @__PURE__ */ C(W, { children: [
866
- E === "Chart" && /* @__PURE__ */ e(
867
- wo,
865
+ /* @__PURE__ */ C(N, { children: [
866
+ Z === "Chart" && /* @__PURE__ */ e(
867
+ So,
868
868
  {
869
- availableHeight: ue,
870
- onClickLegend: ie,
871
- onHoverArea: le,
872
- onHoverLegend: he,
873
- onHoverPoint: ce,
874
- stackedDatasets: V.stackedDatasets,
875
- unstackedDatasets: V.unstackedDatasets
869
+ availableHeight: le,
870
+ onClickLegend: se,
871
+ onHoverArea: ue,
872
+ onHoverLegend: de,
873
+ onHoverPoint: me,
874
+ stackedDatasets: z.stackedDatasets,
875
+ unstackedDatasets: z.unstackedDatasets
876
876
  }
877
877
  ),
878
- E === "Table" && /* @__PURE__ */ e(
879
- ft,
878
+ Z === "Table" && /* @__PURE__ */ e(
879
+ Ct,
880
880
  {
881
- onClickRow: j,
882
- selectedCategory: O,
881
+ onClickRow: te,
882
+ selectedCategory: G,
883
883
  selectedDateRange: S
884
884
  }
885
885
  )
@@ -888,21 +888,21 @@ const Eo = g.memo(Lo), Ze = ({
888
888
  }
889
889
  ),
890
890
  /* @__PURE__ */ e(
891
- Ro,
891
+ Ao,
892
892
  {
893
- categoryGuid: O,
893
+ categoryGuid: G,
894
894
  dateRange: S,
895
- isOpen: P,
896
- onClose: () => K(!1)
895
+ isOpen: X,
896
+ onClose: () => V(!1)
897
897
  }
898
898
  )
899
899
  ]
900
900
  }
901
901
  );
902
- }, as = M(ko), Ho = () => {
903
- const { monthlyCategoryTotals: t } = J(), { trends: s } = A(), n = ne(), { availableHeight: o = 300 } = ot(), r = g.useMemo(() => Ft(t), [t]);
902
+ }, rs = A(Ro), ko = () => {
903
+ const { monthlyCategoryTotals: t } = U(), { trends: s } = R(), n = ae(), { availableHeight: o = 300 } = nt(), r = g.useMemo(() => zt(t), [t]);
904
904
  return /* @__PURE__ */ e(
905
- Pe,
905
+ Ve,
906
906
  {
907
907
  baseline: "min",
908
908
  colors: [n.palette.primary.main],
@@ -917,39 +917,39 @@ const Eo = g.memo(Lo), Ze = ({
917
917
  valueFormatterString: "0,0"
918
918
  }
919
919
  );
920
- }, No = M(Ho), Wo = ({ onPrimaryCtaClick: t, sx: s }) => {
921
- const { isAccountDataLoaded: n, loadAccountData: o } = De(), { loadMonthlyCategoryTotals: r, monthlyTotalsLoaded: l } = J(), { isInitialized: a } = Be(), { trends: u } = A(), { selectedAccounts: c } = ye();
920
+ }, Ho = A(ko), No = ({ onPrimaryCtaClick: t, sx: s }) => {
921
+ const { isAccountDataLoaded: n, loadAccountData: o } = De(), { loadMonthlyCategoryTotals: r, monthlyTotalsLoaded: c } = U(), { isInitialized: a } = Be(), { trends: l } = R(), { selectedAccounts: u } = fe();
922
922
  return g.useEffect(() => {
923
923
  n || o().finally();
924
924
  }, []), Ie({
925
925
  widgetName: "TrendsMiniWidget",
926
- isLoaded: l
926
+ isLoaded: c
927
927
  }), g.useEffect(() => {
928
- a && n && r(c).finally();
929
- }, [n, a, c]), !n || !a || !l ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ e(
930
- Qt,
928
+ a && n && r(u).finally();
929
+ }, [n, a, u]), !n || !a || !c ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ e(
930
+ Jt,
931
931
  {
932
932
  contentStyles: { height: "calc(100% - 72px)", minHeight: 300, ":last-child": { pb: 0 } },
933
933
  onPrimaryCtaClick: t,
934
- primaryCtaLabel: u.primary_cta,
935
- subTitle: u.sub_title,
934
+ primaryCtaLabel: l.primary_cta,
935
+ subTitle: l.sub_title,
936
936
  sx: { height: "100%", ...s },
937
- title: u.mini_title,
938
- children: /* @__PURE__ */ e(No, {})
937
+ title: l.mini_title,
938
+ children: /* @__PURE__ */ e(Ho, {})
939
939
  }
940
940
  );
941
- }, is = M(Wo), Oo = 70, Qe = ({
941
+ }, as = A(No), Wo = 70, qe = ({
942
942
  title: t,
943
943
  totalAmount: s,
944
944
  transactionType: n,
945
945
  percentage: o,
946
946
  secondaryLabel: r,
947
- shouldDisplayPercentage: l
947
+ shouldDisplayPercentage: c
948
948
  }) => {
949
- const { availableWidth: a } = ot(), u = g.useRef(null), c = g.useRef(null), i = Wt(Number(Math.abs(o)), {
949
+ const { availableWidth: a } = nt(), l = g.useRef(null), u = g.useRef(null), i = Ot(Number(Math.abs(o)), {
950
950
  style: "percent",
951
951
  minimumIntegerDigits: 1
952
- }), y = a === 288 && oe(s, "0,0.00").length > 10 ? oe(s, "0,0") : oe(s, "0,0.00"), m = n === "spending" ? o > 0 : o >= 0, _ = n === "spending" ? "error.main" : "success.main", h = n === "spending" ? "success.main" : "text.secondary", p = u?.current, f = c?.current, T = p && f ? p.scrollWidth > f.clientWidth - Oo : !1;
952
+ }), y = a === 288 && re(s, "0,0.00").length > 10 ? re(s, "0,0") : re(s, "0,0.00"), m = n === "spending" ? o > 0 : o >= 0, _ = n === "spending" ? "error.main" : "success.main", h = n === "spending" ? "success.main" : "text.secondary", p = l?.current, f = u?.current, T = p && f ? p.scrollWidth > f.clientWidth - Wo : !1;
953
953
  return /* @__PURE__ */ C(
954
954
  x,
955
955
  {
@@ -972,11 +972,11 @@ const Eo = g.memo(Lo), Ze = ({
972
972
  justifyContent: "space-between"
973
973
  },
974
974
  children: [
975
- /* @__PURE__ */ e(fe, { color: "text.secondary", variant: "caption", children: t }),
976
- l && /* @__PURE__ */ C(x, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
977
- m ? /* @__PURE__ */ e(Jt, { size: 20, sx: { color: _ } }) : /* @__PURE__ */ e(eo, { size: 20, sx: { color: h } }),
975
+ /* @__PURE__ */ e(pe, { color: "text.secondary", variant: "caption", children: t }),
976
+ c && /* @__PURE__ */ C(x, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
977
+ m ? /* @__PURE__ */ e(to, { size: 20, sx: { color: _ } }) : /* @__PURE__ */ e(oo, { size: 20, sx: { color: h } }),
978
978
  /* @__PURE__ */ e(
979
- fe,
979
+ pe,
980
980
  {
981
981
  sx: {
982
982
  color: m ? _ : h,
@@ -993,7 +993,7 @@ const Eo = g.memo(Lo), Ze = ({
993
993
  /* @__PURE__ */ C(
994
994
  x,
995
995
  {
996
- ref: c,
996
+ ref: u,
997
997
  sx: {
998
998
  alignItems: "center",
999
999
  flexDirection: "row",
@@ -1001,15 +1001,15 @@ const Eo = g.memo(Lo), Ze = ({
1001
1001
  },
1002
1002
  children: [
1003
1003
  /* @__PURE__ */ e(
1004
- W,
1004
+ N,
1005
1005
  {
1006
- ref: u,
1006
+ ref: l,
1007
1007
  sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
1008
1008
  children: /* @__PURE__ */ e(Ge, { children: y })
1009
1009
  }
1010
1010
  ),
1011
- l && a >= 450 && !T && /* @__PURE__ */ e(
1012
- fe,
1011
+ c && a >= 450 && !T && /* @__PURE__ */ e(
1012
+ pe,
1013
1013
  {
1014
1014
  color: m ? _ : h,
1015
1015
  variant: "caption",
@@ -1022,29 +1022,29 @@ const Eo = g.memo(Lo), Ze = ({
1022
1022
  ]
1023
1023
  }
1024
1024
  );
1025
- }, Go = M(() => {
1026
- const { trends: t } = A();
1025
+ }, Oo = A(() => {
1026
+ const { trends: t } = R();
1027
1027
  return /* @__PURE__ */ C(x, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
1028
- /* @__PURE__ */ e(to, { size: 32 }),
1028
+ /* @__PURE__ */ e(no, { size: 32 }),
1029
1029
  /* @__PURE__ */ C(x, { children: [
1030
- /* @__PURE__ */ e(fe, { fontWeight: 600, variant: "body1", children: t.zero_state_content_header }),
1031
- /* @__PURE__ */ e(fe, { color: "text.secondary", variant: "subtitle2", children: t.zero_state_content_description })
1030
+ /* @__PURE__ */ e(pe, { fontWeight: 600, variant: "body1", children: t.zero_state_content_header }),
1031
+ /* @__PURE__ */ e(pe, { color: "text.secondary", variant: "subtitle2", children: t.zero_state_content_description })
1032
1032
  ] })
1033
1033
  ] });
1034
- }), ls = M(({ onCtaClick: t }) => {
1034
+ }), is = A(({ onCtaClick: t }) => {
1035
1035
  const { isAccountDataLoaded: s, loadAccountData: n, visibleAccounts: o } = De();
1036
1036
  g.useEffect(() => {
1037
1037
  s || n().finally();
1038
1038
  }, []);
1039
- const { onEvent: r } = $(), { monthlyCategoryTotals: l, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: u } = J(), c = {
1040
- start: qt(/* @__PURE__ */ new Date(), 1),
1039
+ const { onEvent: r } = $(), { monthlyCategoryTotals: c, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: l } = U(), u = {
1040
+ start: eo(/* @__PURE__ */ new Date(), 1),
1041
1041
  end: /* @__PURE__ */ new Date()
1042
- }, { trends: i } = A(), { selectedAccounts: y, isInitialized: m } = ye();
1042
+ }, { trends: i } = R(), { selectedAccounts: y, isInitialized: m } = fe();
1043
1043
  Ie({
1044
1044
  widgetName: "TrendsMicroWidget",
1045
- isLoaded: u
1045
+ isLoaded: l
1046
1046
  }), g.useEffect(() => {
1047
- m && a(y, c.start).then(() => {
1047
+ m && a(y, u.start).then(() => {
1048
1048
  r(v.TRENDS_LOAD_WIDGET, {
1049
1049
  state: o?.length ? "default" : "zeroState"
1050
1050
  });
@@ -1052,24 +1052,24 @@ const Eo = g.memo(Lo), Ze = ({
1052
1052
  }, [m, y]);
1053
1053
  const { spendingData: _, incomeData: h } = g.useMemo(
1054
1054
  () => ({
1055
- spendingData: at(l, c),
1056
- incomeData: it(l, c)
1055
+ spendingData: at(c, u),
1056
+ incomeData: it(c, u)
1057
1057
  }),
1058
- [l, c]
1059
- ), [p, f] = _, [T, S] = h, R = Ke(f.y, p.y), L = Ke(S.y, T.y), w = m && !o?.length, k = () => {
1058
+ [c, u]
1059
+ ), [p, f] = _, [T, S] = h, k = Ye(f.y, p.y), L = Ye(S.y, T.y), E = m && !o?.length, w = () => {
1060
1060
  r(
1061
- w ? v.TRENDS_CLICK_GET_STARTED : v.TRENDS_CLICK_VIEW_MORE
1061
+ E ? v.TRENDS_CLICK_GET_STARTED : v.TRENDS_CLICK_VIEW_MORE
1062
1062
  ), t();
1063
1063
  };
1064
- return !u || !m ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ e(
1065
- ro,
1064
+ return !l || !m ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ e(
1065
+ io,
1066
1066
  {
1067
1067
  className: "mx-trends-microwidget",
1068
1068
  ctaLabel: i.micro_primary_cta_label,
1069
- onCTAClick: k,
1070
- subHeader: w ? void 0 : i.micro_subheader,
1069
+ onCTAClick: w,
1070
+ subHeader: E ? void 0 : i.micro_subheader,
1071
1071
  title: i.title,
1072
- children: w ? /* @__PURE__ */ e(Go, {}) : /* @__PURE__ */ C(
1072
+ children: E ? /* @__PURE__ */ e(Oo, {}) : /* @__PURE__ */ C(
1073
1073
  x,
1074
1074
  {
1075
1075
  sx: {
@@ -1079,9 +1079,9 @@ const Eo = g.memo(Lo), Ze = ({
1079
1079
  },
1080
1080
  children: [
1081
1081
  /* @__PURE__ */ e(
1082
- Qe,
1082
+ qe,
1083
1083
  {
1084
- percentage: R,
1084
+ percentage: k,
1085
1085
  secondaryLabel: i.micro_secondary_label,
1086
1086
  shouldDisplayPercentage: f.y !== 0 && p.y !== 0,
1087
1087
  title: i.spending_label,
@@ -1090,7 +1090,7 @@ const Eo = g.memo(Lo), Ze = ({
1090
1090
  }
1091
1091
  ),
1092
1092
  /* @__PURE__ */ e(
1093
- Qe,
1093
+ qe,
1094
1094
  {
1095
1095
  percentage: L,
1096
1096
  secondaryLabel: i.micro_secondary_label,
@@ -1105,17 +1105,17 @@ const Eo = g.memo(Lo), Ze = ({
1105
1105
  )
1106
1106
  }
1107
1107
  );
1108
- }), Bo = M(
1108
+ }), Go = A(
1109
1109
  ({ isExpanded: t, onClick: s }) => {
1110
- const n = mt();
1111
- return /* @__PURE__ */ e(lo, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(co, { onClick: s, sx: { justifyContent: "center" }, children: /* @__PURE__ */ C(
1110
+ const n = gt();
1111
+ return /* @__PURE__ */ e(mt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(lo, { onClick: s, sx: { justifyContent: "center" }, children: /* @__PURE__ */ C(
1112
1112
  x,
1113
1113
  {
1114
1114
  sx: { color: n.palette.primary.main, flexDirection: "row", alignItems: "center" },
1115
1115
  children: [
1116
- /* @__PURE__ */ e(mo, { children: /* @__PURE__ */ e(Q, { bold: !0, variant: "body2", children: t ? "View less" : "View more" }) }),
1117
- /* @__PURE__ */ e(uo, { sx: { color: n.palette.primary.main }, children: t ? /* @__PURE__ */ e(oo, {}) : /* @__PURE__ */ e(
1118
- no,
1116
+ /* @__PURE__ */ e(ht, { children: /* @__PURE__ */ e(F, { bold: !0, variant: "body2", children: t ? "View less" : "View more" }) }),
1117
+ /* @__PURE__ */ e(uo, { sx: { color: n.palette.primary.main }, children: t ? /* @__PURE__ */ e(so, {}) : /* @__PURE__ */ e(
1118
+ ro,
1119
1119
  {
1120
1120
  sx: {
1121
1121
  transition: "transform 0.3s ease-in-out",
@@ -1127,104 +1127,107 @@ const Eo = g.memo(Lo), Ze = ({
1127
1127
  }
1128
1128
  ) }) });
1129
1129
  }
1130
- ), qe = M(
1130
+ ), Je = A(
1131
1131
  ({
1132
1132
  totalAmount: t,
1133
1133
  guid: s,
1134
1134
  name: n,
1135
1135
  transactions: o,
1136
1136
  onClick: r,
1137
- isLastItem: l = !1,
1137
+ isLastItem: c = !1,
1138
1138
  showDivider: a = !0
1139
1139
  }) => {
1140
- const { trends: u } = A(), { onEvent: c } = $(), i = ne(), y = `${o.length} ${o.length === 1 ? u.transaction : u.transactions}`, m = () => {
1141
- r?.(), c(v.TRENDS_CLICK_LIST_ITEM, {
1142
- ...G,
1140
+ const { trends: l } = R(), { onEvent: u } = $(), i = ae(), y = `${o.length} ${o.length === 1 ? l.transaction : l.transactions}`, m = () => {
1141
+ r?.(), u(v.TRENDS_CLICK_LIST_ITEM, {
1142
+ ...W,
1143
1143
  listItem: n
1144
1144
  });
1145
1145
  };
1146
1146
  return /* @__PURE__ */ C(g.Fragment, { children: [
1147
1147
  /* @__PURE__ */ e(
1148
- rt,
1148
+ Pt,
1149
1149
  {
1150
1150
  leftIcon: s ? /* @__PURE__ */ e(
1151
- xe,
1151
+ we,
1152
1152
  {
1153
1153
  categoryGuid: s,
1154
1154
  sx: {
1155
- bgcolor: Mt(Oe(s, i), 0.15),
1155
+ bgcolor: At(Oe(s, i), 0.15),
1156
1156
  border: `1px solid ${Oe(s, i)}`,
1157
1157
  color: "text.primary"
1158
1158
  }
1159
1159
  }
1160
1160
  ) : void 0,
1161
1161
  onClick: m,
1162
- rightContent: oe(Math.abs(t), "0,0.00"),
1163
- rightIcon: r ? /* @__PURE__ */ e(It, {}) : void 0,
1162
+ rightContent: re(Math.abs(t), "0,0.00"),
1163
+ rightIcon: r ? /* @__PURE__ */ e(Lt, {}) : void 0,
1164
1164
  subtitle: y,
1165
1165
  title: n
1166
1166
  }
1167
1167
  ),
1168
- a && /* @__PURE__ */ e(Ne, { sx: { ml: l ? 24 : 68 } })
1168
+ a && /* @__PURE__ */ e(Ne, { component: "li", sx: { ml: c ? 24 : 68 } })
1169
1169
  ] }, s);
1170
1170
  }
1171
- ), Po = M(
1171
+ ), Bo = A(
1172
1172
  ({ availableHeight: t = 0, onCategoryClick: s }) => {
1173
- const { collapsedCategories: n, visibleCategories: o, setVisibleListLength: r } = Ce(), { isLargeDesktop: l, isDesktop: a } = q(), { trends: u } = A(), { onEvent: c } = $(), [i, y] = g.useState(!1), m = a || l;
1173
+ const { collapsedCategories: n, visibleCategories: o, setVisibleListLength: r } = ye(), { isLargeDesktop: c, isDesktop: a } = j(), { trends: l } = R(), { onEvent: u } = $(), [i, y] = g.useState(!1), m = a || c;
1174
1174
  g.useEffect(() => {
1175
1175
  const p = Math.floor(t / 64) - 1, f = o.length + n.length;
1176
1176
  p !== o.length && (r(m ? Math.max(p, 5) : 5), y(p >= f));
1177
1177
  }, [t]);
1178
1178
  const _ = () => {
1179
- y(!i), c(v.TRENDS_CLICK_VIEW_MORE, {
1180
- ...G
1179
+ y(!i), u(v.TRENDS_CLICK_VIEW_MORE, {
1180
+ ...W
1181
1181
  });
1182
1182
  }, h = o.length + (i ? n.length : 0);
1183
- return /* @__PURE__ */ e(x, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ C(io, { children: [
1184
- /* @__PURE__ */ e(x, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Ge, { children: u.categories }) }),
1185
- o.map((p, f) => /* @__PURE__ */ e(
1186
- qe,
1187
- {
1188
- ...p,
1189
- isLastItem: f === h - 1,
1190
- onClick: p.transactions.length > 0 ? () => s(p) : void 0,
1191
- showDivider: !0
1192
- },
1193
- p.guid
1194
- )),
1195
- /* @__PURE__ */ e(
1196
- ao,
1197
- {
1198
- in: i,
1199
- sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
1200
- children: n.map((p, f) => {
1201
- const T = o.length + f;
1202
- return /* @__PURE__ */ e(
1203
- qe,
1204
- {
1205
- ...p,
1206
- isLastItem: T === h - 1,
1207
- onClick: p.transactions.length > 0 ? () => s(p) : void 0,
1208
- showDivider: !0
1209
- },
1210
- p.guid
1211
- );
1212
- })
1213
- }
1214
- ),
1215
- n.length > 0 && /* @__PURE__ */ e(Bo, { isExpanded: i, onClick: _ })
1216
- ] }) });
1183
+ return /* @__PURE__ */ C(x, { sx: { bgColor: "background.paper", width: "100%" }, children: [
1184
+ /* @__PURE__ */ e(x, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Ge, { children: l.categories }) }),
1185
+ /* @__PURE__ */ C(We, { children: [
1186
+ o.map((p, f) => /* @__PURE__ */ e(
1187
+ Je,
1188
+ {
1189
+ ...p,
1190
+ isLastItem: f === h - 1,
1191
+ onClick: p.transactions.length > 0 ? () => s(p) : void 0,
1192
+ showDivider: !0
1193
+ },
1194
+ p.guid
1195
+ )),
1196
+ /* @__PURE__ */ e(
1197
+ co,
1198
+ {
1199
+ component: "li",
1200
+ in: i,
1201
+ sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
1202
+ children: /* @__PURE__ */ e(We, { children: n.map((p, f) => {
1203
+ const T = o.length + f;
1204
+ return /* @__PURE__ */ e(
1205
+ Je,
1206
+ {
1207
+ ...p,
1208
+ isLastItem: T === h - 1,
1209
+ onClick: p.transactions.length > 0 ? () => s(p) : void 0,
1210
+ showDivider: !0
1211
+ },
1212
+ p.guid
1213
+ );
1214
+ }) })
1215
+ }
1216
+ ),
1217
+ n.length > 0 && /* @__PURE__ */ e(Go, { isExpanded: i, onClick: _ })
1218
+ ] })
1219
+ ] });
1217
1220
  }
1218
- ), Vo = ({ beats: t, onInsightCardClick: s }) => {
1219
- const { onEvent: n } = $(), { isMobile: o, isDesktop: r, isLargeDesktop: l } = q(), { beatStore: a, endpoint: u, sessionToken: c } = Be(), i = r || l, y = i || o ? 1 : 2, m = () => null, _ = (S) => {
1220
- s?.(S), n(v.TRENDS_CLICK_INSIGHT, G);
1221
+ ), Po = ({ beats: t, onInsightCardClick: s }) => {
1222
+ const { onEvent: n } = $(), { isMobile: o, isDesktop: r, isLargeDesktop: c } = j(), { beatStore: a, endpoint: l, sessionToken: u } = Be(), i = r || c, y = i || o ? 1 : 2, m = () => null, _ = (S) => {
1223
+ s?.(S), n(v.TRENDS_CLICK_INSIGHT, W);
1221
1224
  }, h = i ? 200 : 170, p = i ? 170 : 124, f = i ? 56 : 0, T = t.length > 0 ? h + f : p;
1222
- return /* @__PURE__ */ e(ho, { sx: { height: T }, children: /* @__PURE__ */ e(
1223
- Kt,
1225
+ return /* @__PURE__ */ e(mo, { sx: { height: T }, children: /* @__PURE__ */ e(
1226
+ jt,
1224
1227
  {
1225
1228
  areBeatsLoading: a.isLoading,
1226
1229
  beats: t,
1227
- endpoint: u,
1230
+ endpoint: l,
1228
1231
  headerSx: { p: 0 },
1229
1232
  logOutUser: m,
1230
1233
  onCardClick: _,
@@ -1234,18 +1237,18 @@ const Eo = g.memo(Lo), Ze = ({
1234
1237
  showHeader: i,
1235
1238
  showIcon: !0,
1236
1239
  showWithMargin: !1,
1237
- token: c,
1240
+ token: u,
1238
1241
  userHasFullInsightFeedBeats: !1,
1239
1242
  variant: "outlined",
1240
1243
  visibleCardsCount: y
1241
1244
  }
1242
1245
  ) });
1243
- }, Fo = M(Vo), $o = M(({ chartLabel: t, chartColor: s }) => {
1246
+ }, Vo = A(Po), Fo = A(({ chartLabel: t, chartColor: s }) => {
1244
1247
  const { onEvent: n } = $(), {
1245
1248
  categoryDetailsChartData: { monthlyAmounts: o, tooltipLabels: r }
1246
- } = Ce();
1249
+ } = ye();
1247
1250
  return /* @__PURE__ */ e(x, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
1248
- Pe,
1251
+ Ve,
1249
1252
  {
1250
1253
  baseline: "min",
1251
1254
  colors: [s],
@@ -1258,7 +1261,7 @@ const Eo = g.memo(Lo), Ze = ({
1258
1261
  stroke: s
1259
1262
  }),
1260
1263
  onItemClick: () => {
1261
- n(v.TRENDS_CLICK_CHART, G);
1264
+ n(v.TRENDS_CLICK_CHART, W);
1262
1265
  },
1263
1266
  showArea: !0,
1264
1267
  showAverage: !0,
@@ -1273,91 +1276,81 @@ const Eo = g.memo(Lo), Ze = ({
1273
1276
  valueFormatterString: "0,0"
1274
1277
  }
1275
1278
  ) });
1276
- }), zo = M(({ onClose: t }) => {
1277
- const s = mt(), { is_mobile_webview: n } = nt(), { isDesktop: o, isSmallTablet: r, isTablet: l } = q(), { onEvent: a } = $(), { common: u, trends: c } = A(), { selectedCategoryData: i, selectedDateRangeMonthRange: y } = Ce(), { sortedTransactions: m } = ve(), [_, h] = g.useState(null);
1278
- if (!i)
1279
+ }), $o = A(() => {
1280
+ const t = gt(), { is_mobile_webview: s } = st(), { isDesktop: n, isSmallTablet: o, isTablet: r } = j(), { common: c, trends: a } = R(), { selectedCategoryData: l, selectedDateRangeMonthRange: u } = ye(), { sortedTransactions: i } = ve(), [y, m] = g.useState(null);
1281
+ if (!l)
1279
1282
  return null;
1280
- const { guid: p, name: f, is_income: T, totalAmount: S } = i, R = T ? c.category_income : c.category_spending, L = Oe(p, s), w = T ? c.income_label : c.spending_label, k = ` ${i.transactions.length === 1 ? c.transaction : c.transactions} (${i.transactions.length})`, H = g.useMemo(
1281
- () => m.find((E) => E.guid === _),
1282
- [_, m]
1283
- ), z = m.length > 0 && !n && (o || l && !r), P = (E) => E.category_guid === p || E.top_level_category_guid === p, K = () => {
1284
- t?.(), a(v.TRENDS_CLICK_BACK, G);
1285
- };
1286
- return /* @__PURE__ */ C(
1287
- We,
1288
- {
1289
- ariaLabelClose: c.close_category_details,
1290
- isOpen: !0,
1291
- onClose: K,
1292
- shouldShowHeaderShadow: !0,
1293
- title: R,
1294
- children: [
1295
- /* @__PURE__ */ C(x, { sx: { alignItems: "center", height: "100%" }, children: [
1296
- /* @__PURE__ */ C(go, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
1297
- /* @__PURE__ */ e(
1298
- rt,
1299
- {
1300
- leftIcon: /* @__PURE__ */ e(xe, { categoryGuid: p }),
1301
- rightContent: oe(Math.abs(S), "0,0.00"),
1302
- subtitle: y,
1303
- title: f
1304
- }
1305
- ),
1306
- /* @__PURE__ */ e($o, { chartColor: L, chartLabel: w }),
1307
- /* @__PURE__ */ C(x, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
1308
- /* @__PURE__ */ e(Q, { bold: !0, variant: "body1", children: k }),
1309
- z && /* @__PURE__ */ e(po, { filter: P })
1310
- ] })
1311
- ] }),
1312
- /* @__PURE__ */ e(
1313
- ct,
1314
- {
1315
- bgcolor: "transparent",
1316
- filter: P,
1317
- height: "calc(100vh - 475px)",
1318
- onClick: h
1319
- }
1320
- )
1321
- ] }),
1283
+ const { guid: _, name: h, is_income: p, totalAmount: f } = l, T = Oe(_, t), S = p ? a.income_label : a.spending_label, k = ` ${l.transactions.length === 1 ? a.transaction : a.transactions} (${l.transactions.length})`, L = g.useMemo(
1284
+ () => i.find((M) => M.guid === y),
1285
+ [y, i]
1286
+ ), E = i.length > 0 && !s && (n || r && !o), w = (M) => M.category_guid === _ || M.top_level_category_guid === _;
1287
+ return /* @__PURE__ */ C(x, { sx: { alignItems: "center", height: "100%" }, children: [
1288
+ /* @__PURE__ */ C(x, { sx: { borderRadius: 0, pb: 4, pt: 16, px: 12, width: "100%" }, children: [
1289
+ /* @__PURE__ */ e(We, { sx: { px: 12 }, children: /* @__PURE__ */ C(mt, { children: [
1290
+ /* @__PURE__ */ e(ho, { children: /* @__PURE__ */ e(we, { categoryGuid: _ }) }),
1322
1291
  /* @__PURE__ */ e(
1323
- We,
1292
+ ht,
1324
1293
  {
1325
- ariaLabelClose: u.close_aria,
1326
- isOpen: !!H,
1327
- onClose: () => h(""),
1328
- title: c.transaction,
1329
- children: H && /* @__PURE__ */ e(dt, { transaction: H })
1294
+ primary: h,
1295
+ primaryTypographyProps: { component: "div", variant: "h3" },
1296
+ secondary: u,
1297
+ secondaryTypographyProps: { component: "div", variant: "body2" }
1330
1298
  }
1331
- )
1332
- ]
1333
- }
1334
- );
1335
- }), Ko = (t, s) => {
1299
+ ),
1300
+ /* @__PURE__ */ e(F, { component: "div", variant: "h3", children: re(Math.abs(f), "0,0.00") })
1301
+ ] }) }),
1302
+ /* @__PURE__ */ e(Fo, { chartColor: T, chartLabel: S }),
1303
+ /* @__PURE__ */ C(x, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 12 }, children: [
1304
+ /* @__PURE__ */ e(F, { bold: !0, variant: "body1", children: k }),
1305
+ E && /* @__PURE__ */ e(go, { filter: w })
1306
+ ] })
1307
+ ] }),
1308
+ /* @__PURE__ */ e(
1309
+ lt,
1310
+ {
1311
+ bgcolor: "transparent",
1312
+ filter: w,
1313
+ height: "calc(100vh - 475px)",
1314
+ onClick: m
1315
+ }
1316
+ ),
1317
+ /* @__PURE__ */ e(
1318
+ Pe,
1319
+ {
1320
+ ariaLabelClose: c.close_aria,
1321
+ isOpen: !!L,
1322
+ onClose: () => m(""),
1323
+ title: a.transaction,
1324
+ children: L && /* @__PURE__ */ e(dt, { transaction: L })
1325
+ }
1326
+ )
1327
+ ] });
1328
+ }), zo = (t, s) => {
1336
1329
  const n = it(t, s), o = at(t, s);
1337
1330
  return [n, o].filter((r) => r.length > 0);
1338
- }, Yo = (t, s) => {
1339
- const [n, o] = t, r = n, l = o ?? n, a = [];
1331
+ }, Ko = (t, s) => {
1332
+ const [n, o] = t, r = n, c = o ?? n, a = [];
1340
1333
  if (r) {
1341
- const u = r.reduce((c, i) => c + i.y, 0);
1342
- a.push({ label: s.income_label, amount: u });
1334
+ const l = r.reduce((u, i) => u + i.y, 0);
1335
+ a.push({ label: s.income_label, amount: l });
1343
1336
  }
1344
- if (l) {
1345
- const u = l.reduce((c, i) => c + i.y, 0);
1346
- a.push({ label: s.spending_label, amount: u });
1337
+ if (c) {
1338
+ const l = c.reduce((u, i) => u + i.y, 0);
1339
+ a.push({ label: s.spending_label, amount: l });
1347
1340
  }
1348
1341
  return a;
1349
- }, jo = ({
1342
+ }, Yo = ({
1350
1343
  availableHeight: t = 0,
1351
1344
  minHeight: s = 500,
1352
1345
  selectedDateRange: n,
1353
1346
  totals: o
1354
1347
  }) => {
1355
- const r = ne(), { onEvent: l } = $(), { trends: a } = A(), { isSmallMobile: u, isMobile: c, isSmallTablet: i, isTablet: y } = q(), m = [r.palette.chart?.chart1, r.palette.chart?.chart2], _ = Ko(o, n), h = Yo(_, a), [p, f] = g.useState(0), T = 458, S = 195, R = 56, L = c || u ? S : i || y ? T : p;
1348
+ const r = ae(), { onEvent: c } = $(), { trends: a } = R(), { isSmallMobile: l, isMobile: u, isSmallTablet: i, isTablet: y } = j(), m = [r.palette.chart?.chart1, r.palette.chart?.chart2], _ = zo(o, n), h = Ko(_, a), [p, f] = g.useState(0), T = 458, S = 195, k = 56, L = u || l ? S : i || y ? T : p;
1356
1349
  return g.useEffect(() => {
1357
- const k = Math.max(t - R, s);
1358
- f(k);
1350
+ const w = Math.max(t - k, s);
1351
+ f(w);
1359
1352
  }, [t]), /* @__PURE__ */ e(
1360
- Pe,
1353
+ Ve,
1361
1354
  {
1362
1355
  baseline: "min",
1363
1356
  colors: m,
@@ -1366,7 +1359,7 @@ const Eo = g.memo(Lo), Ze = ({
1366
1359
  height: L,
1367
1360
  labels: h,
1368
1361
  onItemClick: () => {
1369
- l(v.TRENDS_CLICK_CHART, G);
1362
+ c(v.TRENDS_CLICK_CHART, W);
1370
1363
  },
1371
1364
  showArea: !0,
1372
1365
  showAxisHighlight: !0,
@@ -1379,7 +1372,7 @@ const Eo = g.memo(Lo), Ze = ({
1379
1372
  valueFormatterString: "0.0a"
1380
1373
  }
1381
1374
  );
1382
- }, Uo = M(jo), Xo = [
1375
+ }, jo = A(Yo), Uo = [
1383
1376
  "BillAmountNotStandard",
1384
1377
  "CategorySpendingV2",
1385
1378
  "CostOfLivingToIncome",
@@ -1413,101 +1406,101 @@ const Eo = g.memo(Lo), Ze = ({
1413
1406
  "WeeklyNewMerchantsV2",
1414
1407
  "WeeklyNoSpendDays",
1415
1408
  "WeeklySmallPurchasesSummary"
1416
- ], Zo = (t, s, n) => ({
1409
+ ], Xo = (t, s, n) => ({
1417
1410
  description: s ? t.empty_state_sub_text : t.empty_state_sub_text_no_aggregation,
1418
1411
  header: s ? t.zero_state_content_header : t.zero_state_content_header_no_aggregation,
1419
1412
  onClickHandler: s ? n : void 0,
1420
1413
  primaryButton: s ? t.empty_state_primary : void 0
1421
- }), Qo = ({ onBackClick: t, onInsightCardClick: s, sx: n }) => {
1422
- const { onEvent: o } = $(), { config: r } = nt(), { isDesktop: l, isLargeDesktop: a, isMobile: u } = q(), { isAccountDataLoaded: c, loadAccountData: i, visibleAccounts: y } = De(), {
1414
+ }), Zo = ({ onBackClick: t, onInsightCardClick: s, sx: n }) => {
1415
+ const { onEvent: o } = $(), { config: r } = st(), { isDesktop: c, isLargeDesktop: a, isMobile: l } = j(), { isAccountDataLoaded: u, loadAccountData: i, visibleAccounts: y } = De(), {
1423
1416
  categoriesLoaded: m,
1424
1417
  loadCategories: _,
1425
1418
  loadDateRangeCategoryTotals: h,
1426
1419
  loadMonthlyCategoryTotals: p,
1427
1420
  monthlyCategoryTotals: f,
1428
1421
  monthlyTotalsLoaded: T
1429
- } = J(), { isTransactionDataLoaded: S, loadTransactionData: R, setFilter: L } = ve(), { selectedDateRange: w, setSelectedCategoryData: k, setSelectedDateRange: H } = Ce(), { isInitialized: z, selectedAccounts: P, selectedAccountGuids: K } = ye(), { trends: E, connect: te } = A(), { beatStore: O } = Be(), re = fo() && r.show_insights_widget_in_master, X = l || a, [de, ue] = g.useState(!1), [V, ae] = g.useState(!1), [Y, me] = g.useState("Chart"), [j, ie] = g.useState(""), [he, le] = g.useState(!1), [ce, D] = g.useState(window.innerHeight), F = X ? 56 : 0, d = ce - 208, b = ce - (re ? 550 + F : 266), [I, U] = g.useState(!1), Ee = r.show_connections_widget_in_master;
1422
+ } = U(), { isTransactionDataLoaded: S, loadTransactionData: k, setFilter: L } = ve(), { selectedCategoryData: E, selectedDateRange: w, setSelectedCategoryData: M, setSelectedDateRange: ie } = ye(), { isInitialized: X, selectedAccounts: V, selectedAccountGuids: Z } = fe(), { trends: O, connect: G } = R(), { beatStore: Q } = Be(), ce = po() && r.show_insights_widget_in_master, q = c || a, [le, z] = g.useState(!1), [J, ne] = g.useState(!1), [ee, te] = g.useState("Chart"), [se, de] = g.useState(""), [ue, me] = g.useState(window.innerHeight), D = q ? 56 : 0, B = ue - 208, d = ue - (ce ? 550 + D : 266), [b, I] = g.useState(!1), K = r.show_connections_widget_in_master;
1430
1423
  Ie({
1431
1424
  widgetName: "TrendsWidget",
1432
- isLoaded: de
1425
+ isLoaded: le
1433
1426
  });
1434
- const _e = g.useMemo(() => V ? O.getFilteredBeats({ templates: Xo }) : [], [V]);
1427
+ const _e = g.useMemo(() => J ? Q.getFilteredBeats({ templates: Uo }) : [], [J]);
1435
1428
  g.useEffect(() => {
1436
- const N = () => D(window.innerHeight);
1437
- return window.addEventListener("resize", N), c || i().finally(), m || _().finally(), S || R().finally(), () => window.removeEventListener("resize", N);
1429
+ const H = () => me(window.innerHeight);
1430
+ return window.addEventListener("resize", H), u || i().finally(), m || _().finally(), S || k().finally(), () => window.removeEventListener("resize", H);
1438
1431
  }, []), g.useEffect(() => {
1439
- z && c && (O.loadBeats().finally(() => ae(!0)), h(P, w.start, w.end).then(() => {
1432
+ X && u && (Q.loadBeats().finally(() => ne(!0)), h(V, w.start, w.end).then(() => {
1440
1433
  p(
1441
- P,
1434
+ V,
1442
1435
  w.start,
1443
1436
  w.end
1444
- );
1437
+ ).finally();
1445
1438
  }).finally(() => {
1446
- ue(!0), o(v.TRENDS_LOAD_WIDGET, {
1447
- ...G,
1439
+ z(!0), o(v.TRENDS_LOAD_WIDGET, {
1440
+ ...W,
1448
1441
  time_period: `${Se(w.end, w.start)}M`
1449
1442
  });
1450
1443
  }));
1451
- }, [z, c, P, w]), g.useEffect(() => {
1444
+ }, [X, u, V, w]), g.useEffect(() => {
1452
1445
  if (f.length !== 0) {
1453
- const N = {
1454
- accounts: K,
1446
+ const H = {
1447
+ accounts: Z,
1455
1448
  dateRange: { start: w.start, end: w.end }
1456
1449
  };
1457
1450
  L({
1458
- ...N,
1459
- custom: (ee) => !!f.find(
1460
- (pe) => pe.top_level_category_guid === ee.top_level_category_guid || pe.category_guid === ee.category_guid
1451
+ ...H,
1452
+ custom: (oe) => !!f.find(
1453
+ (ge) => ge.top_level_category_guid === oe.top_level_category_guid || ge.category_guid === oe.category_guid
1461
1454
  )
1462
1455
  });
1463
1456
  }
1464
1457
  }, [f]);
1465
- const ge = (N) => {
1466
- k(N), le(!0);
1458
+ const Ee = (H) => {
1459
+ M(H);
1460
+ }, he = () => {
1461
+ M(null), o(v.TRENDS_CLICK_BACK, W);
1467
1462
  }, Me = () => {
1468
- k(null), le(!1);
1469
- }, Ae = () => {
1470
- U(!0), o(v.TRENDS_CLICK_CONNECT_ACCOUNTS);
1471
- }, yt = (N, ee) => {
1472
- me(ee ?? Y), o(v.TRENDS_CLICK_TOGGLE_VIEW, {
1473
- ...G,
1474
- toggleView: ee
1463
+ I(!0), o(v.TRENDS_CLICK_CONNECT_ACCOUNTS);
1464
+ }, Ae = (H, oe) => {
1465
+ te(oe ?? ee), o(v.TRENDS_CLICK_TOGGLE_VIEW, {
1466
+ ...W,
1467
+ toggleView: oe
1475
1468
  });
1476
- }, Ct = (N) => {
1477
- const ee = Je(N?.[0], 1), pe = N?.[1], St = Se(pe, ee);
1478
- H({ start: ee, end: pe }), o(v.TRENDS_CLICK_TIME_WINDOW, {
1479
- ...G,
1480
- time_period: St + "M"
1469
+ }, _t = (H) => {
1470
+ const oe = et(H?.[0], 1), ge = H?.[1], xt = Se(ge, oe);
1471
+ ie({ start: oe, end: ge }), o(v.TRENDS_CLICK_TIME_WINDOW, {
1472
+ ...W,
1473
+ time_period: xt + "M"
1481
1474
  });
1482
- }, _t = (N) => {
1475
+ }, bt = (H) => {
1483
1476
  o(v.TRENDS_CLICK_FILTER, {
1484
- ...G,
1485
- filterValue: N
1477
+ ...W,
1478
+ filterValue: H
1486
1479
  });
1487
- }, bt = (N) => {
1488
- ie(N);
1489
- }, Tt = () => {
1490
- ie(""), o(v.TRENDS_CLICK_ALL_CATEGORIES, G);
1480
+ }, Tt = (H) => {
1481
+ de(H);
1482
+ }, St = () => {
1483
+ de(""), o(v.TRENDS_CLICK_ALL_CATEGORIES, W);
1491
1484
  };
1492
- if (!z || !c || !de || !T)
1485
+ if (!X || !u || !le || !T)
1493
1486
  return /* @__PURE__ */ e(Le, {});
1494
- const Ve = y.length === 0 || f.length === 0, be = Zo(E, Ee, Ae);
1487
+ const Fe = y.length === 0 || f.length === 0, be = Xo(O, K, Me);
1495
1488
  return /* @__PURE__ */ C(
1496
1489
  ut,
1497
1490
  {
1498
- calendarActions: { onRangeChanged: Ct },
1491
+ calendarActions: { onRangeChanged: _t },
1499
1492
  dateRange: w,
1500
- dateRangeVariant: u ? "timeframetabs" : "timeframebuttons",
1501
- onAccountsFilterClick: _t,
1493
+ dateRangeVariant: l ? "timeframetabs" : "timeframebuttons",
1494
+ onAccountsFilterClick: bt,
1502
1495
  onBackClick: t,
1503
1496
  sx: n,
1504
- title: E.title,
1497
+ title: O.title,
1505
1498
  children: [
1506
1499
  /* @__PURE__ */ C(
1507
1500
  x,
1508
1501
  {
1509
1502
  sx: {
1510
- px: u ? 0 : 48
1503
+ px: l ? 0 : 48
1511
1504
  },
1512
1505
  children: [
1513
1506
  /* @__PURE__ */ C(
@@ -1515,92 +1508,102 @@ const Eo = g.memo(Lo), Ze = ({
1515
1508
  {
1516
1509
  flexDirection: "row",
1517
1510
  justifyContent: "space-between",
1518
- sx: { px: u ? 16 : 0, py: 16 },
1511
+ sx: { px: l ? 16 : 0, py: 16 },
1519
1512
  children: [
1520
1513
  /* @__PURE__ */ e(
1521
- pt,
1514
+ yt,
1522
1515
  {
1523
- selectedCategoryGuid: j,
1516
+ selectedCategoryGuid: se,
1524
1517
  selectedDateRange: w
1525
1518
  }
1526
1519
  ),
1527
- /* @__PURE__ */ e(gt, { onTabChange: yt, selectedTab: Y })
1520
+ /* @__PURE__ */ e(ft, { onTabChange: Ae, selectedTab: ee })
1528
1521
  ]
1529
1522
  }
1530
1523
  ),
1531
- /* @__PURE__ */ e(x, { alignItems: "center", flexDirection: "row", sx: { pb: 8 }, width: "100%", children: /* @__PURE__ */ e(W, { flexGrow: 1, children: j && /* @__PURE__ */ C(Te, { onClick: Tt, sx: { p: 0, pr: 5 }, children: [
1532
- /* @__PURE__ */ e(so, {}),
1533
- E.all_categories
1524
+ /* @__PURE__ */ e(x, { alignItems: "center", flexDirection: "row", sx: { pb: 8 }, width: "100%", children: /* @__PURE__ */ e(N, { flexGrow: 1, children: se && /* @__PURE__ */ C(Te, { onClick: St, sx: { p: 0, pr: 5 }, children: [
1525
+ /* @__PURE__ */ e(ao, {}),
1526
+ O.all_categories
1534
1527
  ] }) }) }),
1535
- Ve && /* @__PURE__ */ e(
1536
- yo,
1528
+ Fe && /* @__PURE__ */ e(
1529
+ fo,
1537
1530
  {
1538
1531
  header: be.header,
1539
1532
  icon: "multiline_chart",
1540
1533
  onClick: be.onClickHandler,
1541
1534
  primaryButton: be.primaryButton,
1542
1535
  subText: be.description,
1543
- sx: { height: d, maxWidth: 432 }
1536
+ sx: { height: B, maxWidth: 432 }
1544
1537
  }
1545
1538
  ),
1546
- !Ve && /* @__PURE__ */ C(x, { flexDirection: X ? "row" : "column", gap: X ? 48 : 16, children: [
1547
- Y === "Chart" && /* @__PURE__ */ C(wt, { children: [
1548
- /* @__PURE__ */ e(W, { sx: { width: X ? "68%" : "100%" }, children: /* @__PURE__ */ e(
1549
- Uo,
1539
+ !Fe && /* @__PURE__ */ C(x, { flexDirection: q ? "row" : "column", gap: q ? 48 : 16, children: [
1540
+ ee === "Chart" && /* @__PURE__ */ C(wt, { children: [
1541
+ /* @__PURE__ */ e(N, { sx: { width: q ? "68%" : "100%" }, children: /* @__PURE__ */ e(
1542
+ jo,
1550
1543
  {
1551
- availableHeight: d,
1544
+ availableHeight: B,
1552
1545
  minHeight: 450,
1553
1546
  selectedDateRange: w,
1554
1547
  totals: f
1555
1548
  }
1556
1549
  ) }),
1557
- /* @__PURE__ */ C(x, { gap: 16, sx: { width: X ? "32%" : "100%" }, children: [
1558
- re && V && _e.length > 0 && /* @__PURE__ */ e(
1559
- Fo,
1550
+ /* @__PURE__ */ C(x, { gap: 16, sx: { width: q ? "32%" : "100%" }, children: [
1551
+ ce && J && _e.length > 0 && /* @__PURE__ */ e(
1552
+ Vo,
1560
1553
  {
1561
1554
  beats: _e,
1562
1555
  onInsightCardClick: s
1563
1556
  }
1564
1557
  ),
1565
1558
  /* @__PURE__ */ e(
1566
- Po,
1559
+ Bo,
1567
1560
  {
1568
- availableHeight: b,
1569
- onCategoryClick: ge
1561
+ availableHeight: d,
1562
+ onCategoryClick: Ee
1570
1563
  }
1571
1564
  )
1572
1565
  ] })
1573
1566
  ] }),
1574
- Y === "Table" && /* @__PURE__ */ e(W, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
1575
- ft,
1567
+ ee === "Table" && /* @__PURE__ */ e(N, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
1568
+ Ct,
1576
1569
  {
1577
1570
  height: "unset",
1578
- onClickRow: bt,
1579
- selectedCategory: j,
1571
+ onClickRow: Tt,
1572
+ selectedCategory: se,
1580
1573
  selectedDateRange: w
1581
1574
  }
1582
1575
  ) })
1583
1576
  ] }),
1584
- he && /* @__PURE__ */ e(zo, { onClose: Me })
1577
+ /* @__PURE__ */ e(
1578
+ Pe,
1579
+ {
1580
+ ariaLabelClose: O.close_category_details,
1581
+ isOpen: !!E,
1582
+ onClose: he,
1583
+ shouldShowHeaderShadow: !0,
1584
+ title: E?.is_income ? O.category_income : O.category_spending,
1585
+ children: E && /* @__PURE__ */ e($o, {})
1586
+ }
1587
+ )
1585
1588
  ]
1586
1589
  }
1587
1590
  ),
1588
1591
  /* @__PURE__ */ e(
1589
- Co,
1592
+ yo,
1590
1593
  {
1591
- onClose: () => U(!1),
1592
- showConnectWidget: I,
1593
- title: te.mini_title
1594
+ onClose: () => I(!1),
1595
+ showConnectWidget: b,
1596
+ title: G.mini_title
1594
1597
  }
1595
1598
  )
1596
1599
  ]
1597
1600
  }
1598
1601
  );
1599
- }, cs = M(Qo);
1602
+ }, cs = A(Zo);
1600
1603
  export {
1601
- as as TrendsFullWidget,
1602
- ls as TrendsMicroWidget,
1603
- is as TrendsMiniWidget,
1604
- ms as TrendsStore,
1604
+ rs as TrendsFullWidget,
1605
+ is as TrendsMicroWidget,
1606
+ as as TrendsMiniWidget,
1607
+ us as TrendsStore,
1605
1608
  cs as TrendsWidget
1606
1609
  };