@mx-cartographer/experiences 7.0.23-alpha.al2 → 7.0.23-alpha.al4

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 (2) hide show
  1. package/dist/trends/index.es.js +313 -315
  2. package/package.json +1 -1
package/dist/trends/index.es.js CHANGED
@@ -1,69 +1,69 @@
1
- import { jsx as e, jsxs as f, Fragment as Pe } from "react/jsx-runtime";
2
- import r from "react";
1
+ import { jsx as e, jsxs as f, Fragment as ze } from "react/jsx-runtime";
2
+ import i from "react";
3
3
  import { observer as M } from "mobx-react-lite";
4
- import { Icon as ae, Text as X, CategoryIcon as Te, P as Y, H3 as De, ChevronRightIcon as Ke } from "@mxenabled/mxui";
4
+ import { Icon as re, Text as X, CategoryIcon as Te, P as Y, H3 as De, ChevronRightIcon as Fe } from "@mxenabled/mxui";
5
5
  import O from "@mui/material/Box";
6
6
  import _ from "@mui/material/Stack";
7
7
  import pe from "@mui/material/Button";
8
8
  import { addSeconds as Ie } from "date-fns/addSeconds";
9
9
  import { differenceInCalendarMonths as Ce } from "date-fns/differenceInCalendarMonths";
10
- import { a as $e, g as je, S as Ye, L as Ee, u as Ue } from "../TrendsStore-WrHxzdbQ.mjs";
11
- import { T as to } from "../TrendsStore-WrHxzdbQ.mjs";
12
- import { i as Xe, c as Ze, d as Qe, e as qe, f as Je, h as et, b as Le, g as xe, j as _e } from "../SpendingData-D5vsfYKo.mjs";
13
- import tt from "@mui/material/ToggleButton";
14
- import nt from "@mui/material/ToggleButtonGroup";
15
- import { u as R, k as F, e as H, a as P, f as re, c as ie, v as q, l as ve, p as ot, m as st } from "../hooks-DkUqN6JE.mjs";
10
+ import { a as Pe, g as Ke, S as $e, L as Ee, u as je } from "../TrendsStore-WrHxzdbQ.mjs";
11
+ import { T as Jn } from "../TrendsStore-WrHxzdbQ.mjs";
12
+ import { i as Ye, c as Ue, d as Xe, e as Ze, f as Qe, h as qe, b as Le, g as xe, j as _e } from "../SpendingData-D5vsfYKo.mjs";
13
+ import Je from "@mui/material/ToggleButton";
14
+ import et from "@mui/material/ToggleButtonGroup";
15
+ import { u as R, k as F, e as H, a as P, f as ae, c as ie, v as q, l as ve, p as tt, m as nt } from "../hooks-DkUqN6JE.mjs";
16
16
  import { u as K } from "../useScreenSize-B6JyS_Lj.mjs";
17
17
  import { f as Z, D as B } from "../Dialog-CWW597AF.mjs";
18
- import { DataGridPro as at } from "@mui/x-data-grid-pro";
19
- import { C as rt } from "../CurrencyText-YUhH2caW.mjs";
18
+ import { DataGridPro as ot } from "@mui/x-data-grid-pro";
19
+ import { C as st } from "../CurrencyText-YUhH2caW.mjs";
20
20
  import { c as Me } from "../Category-CevNQ03n.mjs";
21
- import { b as it } from "../Localization-2MODESHW.mjs";
21
+ import { b as rt } from "../Localization-2MODESHW.mjs";
22
22
  import { H as be } from "../HeaderCell-DjuifqHJ.mjs";
23
- import { T as A, b as ct } from "../ViewMoreMicroCard-DFAY0tA8.mjs";
23
+ import { T as A, b as at } from "../ViewMoreMicroCard-DFAY0tA8.mjs";
24
24
  import { A as y, W as Ae } from "../WidgetContainer-CdBs9WOZ.mjs";
25
25
  import { a as Re, T as ke } from "../TransactionDetails-C-z3HGTT.mjs";
26
26
  import { D as fe } from "../Drawer-kEE73B87.mjs";
27
27
  import { L as Q } from "../Loader-DUaFpDGv.mjs";
28
28
  import { useTheme as He } from "@mui/material/styles";
29
29
  import { L as ye } from "../LineChart-BWWmmJxV.mjs";
30
- import { M as lt } from "../MiniWidgetContainer-CTyjmE1h.mjs";
31
- import { subMonths as dt } from "date-fns";
32
- import { TrendingUp as ht, TrendingDown as ut, MultilineChart as gt, ExpandLess as mt, ExpandMore as pt } from "@mxenabled/mx-icons";
33
- import { a as Ct, f as U } from "../NumberFormatting-CtWHhyBX.mjs";
34
- import { M as ft } from "../MicroWidgetContainer-Dxz8uBN9.mjs";
35
- import Tt from "@mui/material/Collapse";
36
- import yt from "@mui/material/List";
37
- import _t from "@mui/material/ListItem";
38
- import bt from "@mui/material/ListItemButton";
39
- import St from "@mui/material/ListItemIcon";
40
- import wt from "@mui/material/ListItemText";
30
+ import { M as it } from "../MiniWidgetContainer-CTyjmE1h.mjs";
31
+ import { subMonths as ct } from "date-fns";
32
+ import { TrendingUp as lt, TrendingDown as dt, MultilineChart as ht, ExpandLess as ut, ExpandMore as mt } from "@mxenabled/mx-icons";
33
+ import { a as gt, f as U } from "../NumberFormatting-CtWHhyBX.mjs";
34
+ import { M as pt } from "../MicroWidgetContainer-Dxz8uBN9.mjs";
35
+ import Ct from "@mui/material/Collapse";
36
+ import ft from "@mui/material/List";
37
+ import Tt from "@mui/material/ListItem";
38
+ import yt from "@mui/material/ListItemButton";
39
+ import _t from "@mui/material/ListItemIcon";
40
+ import bt from "@mui/material/ListItemText";
41
41
  import Ne from "@mui/material/styles/useTheme";
42
- import Dt from "@mui/material/Divider";
43
- import { useTheme as It, Stack as Et } from "@mui/material";
44
- import Lt from "@mui/material/Paper";
45
- import { b as xt } from "../CategoryUtil-BR3H5i6n.mjs";
46
- import { E as vt } from "../ExportCsvAction-CbMfQ2Wa.mjs";
47
- import { E as Mt } from "../EmptyState-C0lr9E5T.mjs";
42
+ import St from "@mui/material/Divider";
43
+ import { useTheme as wt, Stack as Dt } from "@mui/material";
44
+ import It from "@mui/material/Paper";
45
+ import { b as Et } from "../CategoryUtil-BR3H5i6n.mjs";
46
+ import { E as Lt } from "../ExportCsvAction-CbMfQ2Wa.mjs";
47
+ import { E as xt } from "../EmptyState-C0lr9E5T.mjs";
48
48
  const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
49
- nt,
49
+ et,
50
50
  {
51
51
  exclusive: !0,
52
52
  onChange: o,
53
53
  orientation: "horizontal",
54
54
  value: n,
55
- children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(tt, { color: "primary", sx: { width: 56 }, value: t, children: t === "Chart" ? /* @__PURE__ */ e(ae, { name: "table_chart_view" }) : /* @__PURE__ */ e(ae, { name: "format_list_bulleted" }) }, t))
55
+ children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(Je, { color: "primary", sx: { width: 56 }, value: t, children: t === "Chart" ? /* @__PURE__ */ e(re, { name: "table_chart_view" }) : /* @__PURE__ */ e(re, { name: "format_list_bulleted" }) }, t))
56
56
  }
57
57
  ), Oe = ({ selectedDateRange: n, selectedCategoryGuid: o }) => {
58
- const { trends: t } = R(), { isMobile: s, isDesktop: i } = K(), { getCategoryName: h } = F(), d = r.useMemo(() => {
59
- const l = Z(
58
+ const { trends: t } = R(), { isMobile: s, isDesktop: a } = K(), { getCategoryName: h } = F(), d = i.useMemo(() => {
59
+ const c = Z(
60
60
  n.start,
61
61
  s ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
62
- ), c = Z(
62
+ ), l = Z(
63
63
  n.end,
64
64
  s ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
65
65
  );
66
- return `${l} - ${c}`;
66
+ return `${c} - ${l}`;
67
67
  }, [n, s]);
68
68
  return /* @__PURE__ */ f(O, { sx: { mr: 10, minWidth: "60%" }, children: [
69
69
  /* @__PURE__ */ e(
@@ -76,39 +76,39 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
76
76
  overflow: "visible",
77
77
  textOverflow: "unset"
78
78
  },
79
- variant: i ? "H3" : "Body",
79
+ variant: a ? "H3" : "Body",
80
80
  children: h(o) || t.sub_title
81
81
  }
82
82
  ),
83
- /* @__PURE__ */ e(X, { variant: i ? "Body" : "Small", children: d })
83
+ /* @__PURE__ */ e(X, { variant: a ? "Body" : "Small", children: d })
84
84
  ] });
85
- }, At = (n) => {
85
+ }, vt = (n) => {
86
86
  const o = n.row[n.field];
87
- return /* @__PURE__ */ e(_, { alignItems: "flex-end", tabIndex: n.tabIndex, children: /* @__PURE__ */ e(rt, { amount: o, variant: "Small" }) });
88
- }, Rt = ({ categoryGuid: n, topLevelCategoryGuid: o }) => {
87
+ return /* @__PURE__ */ e(_, { alignItems: "flex-end", tabIndex: n.tabIndex, children: /* @__PURE__ */ e(st, { amount: o, variant: "Small" }) });
88
+ }, Mt = ({ categoryGuid: n, topLevelCategoryGuid: o }) => {
89
89
  const { categories: t } = R(), s = t.default_categories[n]?.replace(/&/g, "&") ?? Me[n];
90
90
  return /* @__PURE__ */ f(_, { alignItems: "center", direction: "row", justifyContent: "center", children: [
91
91
  /* @__PURE__ */ e(
92
92
  O,
93
93
  {
94
- "aria-label": it(t.category_icon_label_aria, s),
94
+ "aria-label": rt(t.category_icon_label_aria, s),
95
95
  role: "img",
96
96
  children: /* @__PURE__ */ e(Te, { categoryGuid: o })
97
97
  }
98
98
  ),
99
99
  /* @__PURE__ */ e(X, { sx: { ml: 12, pb: 6 }, variant: "Small", children: s })
100
100
  ] });
101
- }, kt = (n) => /* @__PURE__ */ e(_, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
102
- Rt,
101
+ }, At = (n) => /* @__PURE__ */ e(_, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
102
+ Mt,
103
103
  {
104
104
  categoryGuid: n.row.category,
105
105
  topLevelCategoryGuid: n.row.top_level_category_guid
106
106
  }
107
- ) }), Ht = (n, o) => {
107
+ ) }), Rt = (n, o) => {
108
108
  const t = [], s = new Date(n);
109
109
  for (; s <= o; ) {
110
- const i = Z(s, B.MONTH);
111
- t.push(i), s.setMonth(s.getMonth() + 1);
110
+ const a = Z(s, B.MONTH);
111
+ t.push(a), s.setMonth(s.getMonth() + 1);
112
112
  }
113
113
  return t;
114
114
  }, Ve = ({
@@ -116,102 +116,102 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
116
116
  selectedDateRange: o,
117
117
  selectedCategory: t,
118
118
  onClickRow: s,
119
- height: i = "100dvh",
119
+ height: a = "100dvh",
120
120
  sx: h = {}
121
121
  }) => {
122
- const { onEvent: d } = H(), l = Z(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [c, g] = r.useState([
123
- { field: l, sort: "desc" }
124
- ]), C = r.useMemo(() => Ht(o.start, o.end), [o]), u = [
122
+ const { onEvent: d } = H(), c = Z(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [l, m] = i.useState([
123
+ { field: c, sort: "desc" }
124
+ ]), C = i.useMemo(() => Rt(o.start, o.end), [o]), u = [
125
125
  {
126
126
  field: "category",
127
127
  flex: 1,
128
128
  headerName: "Category",
129
129
  minWidth: 175,
130
130
  renderHeader: be,
131
- renderCell: kt,
131
+ renderCell: At,
132
132
  sortable: !0,
133
133
  type: "string"
134
134
  },
135
135
  ...C.map(
136
- (a) => ({
137
- field: a,
136
+ (r) => ({
137
+ field: r,
138
138
  flex: 1,
139
- headerName: a,
139
+ headerName: r,
140
140
  minWidth: 100,
141
141
  renderHeader: be,
142
- renderCell: At,
142
+ renderCell: vt,
143
143
  align: "right",
144
144
  headerAlign: "right",
145
145
  sortable: !0,
146
146
  hideSortIcons: !1,
147
147
  type: "number",
148
- sortComparator: $e
148
+ sortComparator: Pe
149
149
  })
150
150
  )
151
- ], b = r.useMemo(() => {
152
- const a = n.filter(
153
- (p) => !Xe(p) && !Ze(p)
154
- ), T = (t ? a.filter(
151
+ ], b = i.useMemo(() => {
152
+ const r = n.filter(
153
+ (p) => !Ye(p) && !Ue(p)
154
+ ), T = (t ? r.filter(
155
155
  (p) => p.category_guid === t || p.top_level_category_guid === t
156
- ) : a).reduce(
156
+ ) : r).reduce(
157
157
  (p, E) => {
158
- const { category_guid: w, top_level_category_guid: I, month: k, total: D, year: N } = E, L = t ? w : I;
159
- p[L] || (p[L] = {
160
- id: L,
161
- category: L,
158
+ const { category_guid: w, top_level_category_guid: I, month: k, total: D, year: N } = E, x = t ? w : I;
159
+ p[x] || (p[x] = {
160
+ id: x,
161
+ category: x,
162
162
  category_guid: w,
163
163
  top_level_category_guid: I
164
164
  });
165
- const x = Z(new Date(N, k - 1), B.MONTH_SHORT);
166
- return p[L][x] || (p[L][x] = 0), p[L][x] = p[L][x] + Math.abs(D), p;
165
+ const L = Z(new Date(N, k - 1), B.MONTH_SHORT);
166
+ return p[x][L] || (p[x][L] = 0), p[x][L] = p[x][L] + Math.abs(D), p;
167
167
  },
168
168
  {}
169
169
  );
170
170
  return Object.values(T);
171
171
  }, [n, t]);
172
- return /* @__PURE__ */ e(O, { sx: { height: i, width: "100%", overflowX: "auto", boxShadow: "none", ...h }, children: /* @__PURE__ */ e(
173
- at,
172
+ return /* @__PURE__ */ e(O, { sx: { height: a, width: "100%", overflowX: "auto", boxShadow: "none", ...h }, children: /* @__PURE__ */ e(
173
+ ot,
174
174
  {
175
175
  columns: u,
176
176
  disableColumnFilter: !0,
177
177
  disableColumnMenu: !0,
178
178
  hideFooter: !0,
179
- initialState: { sorting: { sortModel: c } },
180
- onRowClick: (a) => {
181
- s?.(a.row.category), d(y.TRENDS_CLICK_LIST_ITEM, {
179
+ initialState: { sorting: { sortModel: l } },
180
+ onRowClick: (r) => {
181
+ s?.(r.row.category), d(y.TRENDS_CLICK_LIST_ITEM, {
182
182
  ...A,
183
- listItem: Me[a.row.category]
183
+ listItem: Me[r.row.category]
184
184
  });
185
185
  },
186
- onSortModelChange: (a) => {
187
- g(a), d(y.TRENDS_CLICK_TABLE_SORT, A);
186
+ onSortModelChange: (r) => {
187
+ m(r), d(y.TRENDS_CLICK_TABLE_SORT, A);
188
188
  },
189
189
  rows: b,
190
190
  slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
191
- sortModel: c,
191
+ sortModel: l,
192
192
  sortingOrder: ["asc", "desc"]
193
193
  }
194
194
  ) });
195
- }, Nt = {
195
+ }, kt = {
196
196
  title: "Transaction List"
197
- }, Wt = ({
197
+ }, Ht = ({
198
198
  categoryGuid: n,
199
199
  dateRange: o,
200
200
  isOpen: t,
201
201
  onClose: s
202
202
  }) => {
203
- const { onEvent: i } = H(), { selectedAccountGuids: h } = P(), { common: d } = R(), { setFilter: l, sortedTransactions: c } = re(), [g, C] = r.useState(""), u = r.useMemo(
204
- () => c.find((a) => a.guid === g),
205
- [g, c]
203
+ const { onEvent: a } = H(), { selectedAccountGuids: h } = P(), { common: d } = R(), { setFilter: c, sortedTransactions: l } = ae(), [m, C] = i.useState(""), u = i.useMemo(
204
+ () => l.find((r) => r.guid === m),
205
+ [m, l]
206
206
  );
207
- r.useEffect(() => {
208
- l({
207
+ i.useEffect(() => {
208
+ c({
209
209
  accounts: h,
210
210
  dateRange: o,
211
- custom: (a) => n === "" || n === a.category_guid || n === a.top_level_category_guid,
211
+ custom: (r) => n === "" || n === r.category_guid || n === r.top_level_category_guid,
212
212
  showSplits: !!n
213
213
  });
214
- }, [h, n, o]), r.useEffect(() => i(y.TRENDS_VIEW_TRANSACTIONS), []);
214
+ }, [h, n, o]), i.useEffect(() => a(y.TRENDS_VIEW_TRANSACTIONS), []);
215
215
  const b = () => {
216
216
  C(""), s();
217
217
  };
@@ -221,63 +221,63 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
221
221
  ariaLabelClose: d.close_aria,
222
222
  isOpen: t,
223
223
  onClose: b,
224
- title: Nt.title,
224
+ title: kt.title,
225
225
  children: [
226
226
  u && /* @__PURE__ */ e(Re, { transaction: u }),
227
227
  !u && /* @__PURE__ */ e(ke, { onClick: C })
228
228
  ]
229
229
  }
230
230
  );
231
- }, Ot = M(Wt), Vt = ({ onBackClick: n, sx: o }) => {
232
- const { onEvent: t } = H(), { isDesktop: s, isTablet: i, isMobile: h } = K(), { visibleAccounts: d } = ie(), { loadMonthlyCategoryTotals: l, monthlyCategoryTotals: c, getCategoryName: g } = F(), { sortedTransactions: C } = re(), { selectedDateRange: u, setSelectedDateRange: b } = q(), { isCopyLoaded: a, isInitialized: m, selectedAccounts: T, setSelectedAccounts: p } = P(), { trends: E } = R(), [w, I] = r.useState(!1), [k, D] = r.useState(!1), [N, L] = r.useState("Chart"), [x, $] = r.useState(""), [z, ce] = r.useState(window.innerHeight), ee = z - (h ? 315 : 345);
233
- r.useEffect(() => {
231
+ }, Nt = M(Ht), Wt = ({ onBackClick: n, sx: o }) => {
232
+ const { onEvent: t } = H(), { isDesktop: s, isTablet: a, isMobile: h } = K(), { visibleAccounts: d } = ie(), { loadMonthlyCategoryTotals: c, monthlyCategoryTotals: l, getCategoryName: m } = F(), { sortedTransactions: C } = ae(), { selectedDateRange: u, setSelectedDateRange: b } = q(), { isCopyLoaded: r, isInitialized: g, selectedAccounts: T, setSelectedAccounts: p } = P(), { trends: E } = R(), [w, I] = i.useState(!1), [k, D] = i.useState(!1), [N, x] = i.useState("Chart"), [L, $] = i.useState(""), [z, ce] = i.useState(window.innerHeight), ee = z - (h ? 315 : 345);
233
+ i.useEffect(() => {
234
234
  const S = () => ce(window.innerHeight);
235
235
  return window.addEventListener("resize", S), () => window.removeEventListener("resize", S);
236
- }, []), r.useEffect(() => {
236
+ }, []), i.useEffect(() => {
237
237
  p(d);
238
- }, [d]), r.useEffect(() => {
239
- m && l(
238
+ }, [d]), i.useEffect(() => {
239
+ g && c(
240
240
  T,
241
241
  u.start,
242
242
  u.end
243
243
  ).finally(() => {
244
244
  I(!0);
245
245
  });
246
- }, [m, T, u]);
247
- const te = r.useMemo(() => {
246
+ }, [g, T, u]);
247
+ const te = i.useMemo(() => {
248
248
  if (!w) return { stackedDatasets: [], unstackedDatasets: [] };
249
- const S = je(
250
- c,
249
+ const S = Ke(
250
+ l,
251
251
  u.start,
252
252
  u.end
253
- ), W = x.length ? S.filter(
254
- (G) => G.top_level_category_guid === x || G.category_guid === x
255
- ) : Qe(S);
253
+ ), W = L.length ? S.filter(
254
+ (G) => G.top_level_category_guid === L || G.category_guid === L
255
+ ) : Xe(S);
256
256
  return {
257
- stackedDatasets: W.filter(qe),
258
- unstackedDatasets: W.filter(Je)
257
+ stackedDatasets: W.filter(Ze),
258
+ unstackedDatasets: W.filter(Qe)
259
259
  };
260
- }, [c, x, u]), ne = (S, W) => {
261
- L(W ?? N), t(y.TRENDS_CLICK_TOGGLE_VIEW);
260
+ }, [l, L, u]), ne = (S, W) => {
261
+ x(W ?? N), t(y.TRENDS_CLICK_TOGGLE_VIEW);
262
262
  }, oe = (S) => {
263
- const W = Ie(S?.[0], 1), G = S?.[1], me = Ce(G, W);
263
+ const W = Ie(S?.[0], 1), G = S?.[1], ge = Ce(G, W);
264
264
  b({ start: W, end: G }), t(y.TRENDS_CLICK_TIME_WINDOW, {
265
- time_period: me + "M"
265
+ time_period: ge + "M"
266
266
  });
267
267
  }, le = () => {
268
268
  t(y.TRENDS_CLICK_FILTER);
269
269
  }, se = (S) => {
270
270
  $(S);
271
271
  }, de = (S) => {
272
- $(S), t(y.TRENDS_CLICK_LEGEND, { category: g(S) });
272
+ $(S), t(y.TRENDS_CLICK_LEGEND, { category: m(S) });
273
273
  }, he = (S) => {
274
- t(y.TRENDS_HOVER_LEGEND, { category: g(S) });
274
+ t(y.TRENDS_HOVER_LEGEND, { category: m(S) });
275
275
  }, ue = (S) => {
276
276
  t(y.TRENDS_HOVER_AREA, { category: S });
277
- }, ge = (S) => {
277
+ }, me = (S) => {
278
278
  t(y.TRENDS_HOVER_POINT, { category: S });
279
279
  };
280
- return !a || !m || !w ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ f(
280
+ return !r || !g || !w ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ f(
281
281
  Ae,
282
282
  {
283
283
  accountOptions: d,
@@ -294,7 +294,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
294
294
  {
295
295
  sx: {
296
296
  // eslint-disable-next-line no-nested-ternary
297
- px: s ? 48 : i ? 24 : 12
297
+ px: s ? 48 : a ? 24 : 12
298
298
  },
299
299
  children: [
300
300
  /* @__PURE__ */ f(
@@ -307,7 +307,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
307
307
  /* @__PURE__ */ e(
308
308
  Oe,
309
309
  {
310
- selectedCategoryGuid: x,
310
+ selectedCategoryGuid: L,
311
311
  selectedDateRange: u
312
312
  }
313
313
  ),
@@ -316,21 +316,21 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
316
316
  }
317
317
  ),
318
318
  /* @__PURE__ */ f(_, { alignItems: "center", flexDirection: "row", width: "100%", children: [
319
- /* @__PURE__ */ e(O, { flexGrow: 1, children: x && /* @__PURE__ */ f(pe, { onClick: () => $(""), sx: { p: 0, pr: 5 }, children: [
320
- /* @__PURE__ */ e(ae, { name: "arrow_back" }),
319
+ /* @__PURE__ */ e(O, { flexGrow: 1, children: L && /* @__PURE__ */ f(pe, { onClick: () => $(""), sx: { p: 0, pr: 5 }, children: [
320
+ /* @__PURE__ */ e(re, { name: "arrow_back" }),
321
321
  E.all_categories
322
322
  ] }) }),
323
323
  /* @__PURE__ */ e(pe, { onClick: () => D(!0), sx: { px: 5 }, children: `${E.view_transactions} (${C.length})` })
324
324
  ] }),
325
325
  /* @__PURE__ */ f(O, { children: [
326
326
  N === "Chart" && /* @__PURE__ */ e(
327
- Ye,
327
+ $e,
328
328
  {
329
329
  availableHeight: ee,
330
330
  onClickLegend: de,
331
331
  onHoverArea: ue,
332
332
  onHoverLegend: he,
333
- onHoverPoint: ge,
333
+ onHoverPoint: me,
334
334
  stackedDatasets: te.stackedDatasets,
335
335
  unstackedDatasets: te.unstackedDatasets
336
336
  }
@@ -338,9 +338,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
338
338
  N === "Table" && /* @__PURE__ */ e(
339
339
  Ve,
340
340
  {
341
- monthlyCategoryTotals: c,
341
+ monthlyCategoryTotals: l,
342
342
  onClickRow: se,
343
- selectedCategory: x,
343
+ selectedCategory: L,
344
344
  selectedDateRange: u
345
345
  }
346
346
  )
@@ -349,9 +349,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
349
349
  }
350
350
  ),
351
351
  /* @__PURE__ */ e(
352
- Ot,
352
+ Nt,
353
353
  {
354
- categoryGuid: x,
354
+ categoryGuid: L,
355
355
  dateRange: u,
356
356
  isOpen: k,
357
357
  onClose: () => D(!1)
@@ -360,8 +360,8 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
360
360
  ]
361
361
  }
362
362
  );
363
- }, Xn = M(Vt), Gt = () => {
364
- const n = He(), { monthlyCategoryTotals: o } = F(), { trends: t } = R(), s = et(o);
363
+ }, Yn = M(Wt), Ot = () => {
364
+ const n = He(), { monthlyCategoryTotals: o } = F(), { trends: t } = R(), s = qe(o);
365
365
  return /* @__PURE__ */ e(
366
366
  ye,
367
367
  {
@@ -378,35 +378,35 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
378
378
  valueFormatterString: "0,0"
379
379
  }
380
380
  );
381
- }, Bt = M(Gt), zt = ({ onPrimaryCtaClick: n, sx: o }) => {
382
- const { visibleAccounts: t } = ie(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: i } = F(), { isInitialized: h } = ve(), { trends: d } = R(), { isCopyLoaded: l, selectedAccounts: c, setSelectedAccounts: g } = P();
383
- return r.useEffect(() => {
384
- g(t);
385
- }, [t]), r.useEffect(() => {
386
- h && s(c).finally();
387
- }, [h, c]), !l || !h ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
388
- lt,
381
+ }, Vt = M(Ot), Gt = ({ onPrimaryCtaClick: n, sx: o }) => {
382
+ const { visibleAccounts: t } = ie(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: a } = F(), { isInitialized: h } = ve(), { trends: d } = R(), { isCopyLoaded: c, selectedAccounts: l, setSelectedAccounts: m } = P();
383
+ return i.useEffect(() => {
384
+ m(t);
385
+ }, [t]), i.useEffect(() => {
386
+ h && s(l).finally();
387
+ }, [h, l]), !c || !h ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
388
+ it,
389
389
  {
390
390
  onPrimaryCtaClick: n,
391
391
  primaryCtaLabel: d.primary_cta,
392
392
  subTitle: d.sub_title,
393
393
  sx: o,
394
394
  title: d.mini_title,
395
- children: i ? /* @__PURE__ */ e(Bt, {}) : /* @__PURE__ */ e(Q, {})
395
+ children: a ? /* @__PURE__ */ e(Vt, {}) : /* @__PURE__ */ e(Q, {})
396
396
  }
397
397
  );
398
- }, Zn = M(zt), Ft = 70, Se = ({
398
+ }, Un = M(Gt), Bt = 70, Se = ({
399
399
  title: n,
400
400
  totalAmount: o,
401
401
  transactionType: t,
402
402
  percentage: s,
403
- secondaryLabel: i,
403
+ secondaryLabel: a,
404
404
  shouldDisplayPercentage: h
405
405
  }) => {
406
- const { availableWidth: d } = ot(), l = r.useRef(null), c = r.useRef(null), g = Ct(Number(Math.abs(s)), {
406
+ const { availableWidth: d } = tt(), c = i.useRef(null), l = i.useRef(null), m = gt(Number(Math.abs(s)), {
407
407
  style: "percent",
408
408
  minimumIntegerDigits: 1
409
- }), C = d === 288 && U(o, "0,0.00").length > 10 ? U(o, "0,0") : U(o, "0,0.00"), u = t === "spending" ? s > 0 : s >= 0, b = t === "spending" ? "error.main" : "success.main", a = t === "spending" ? "success.main" : "text.secondary", m = l?.current, T = c?.current, p = m && T ? m.scrollWidth > T.clientWidth - Ft : !1;
409
+ }), C = d === 288 && U(o, "0,0.00").length > 10 ? U(o, "0,0") : U(o, "0,0.00"), u = t === "spending" ? s > 0 : s >= 0, b = t === "spending" ? "error.main" : "success.main", r = t === "spending" ? "success.main" : "text.secondary", g = c?.current, T = l?.current, p = g && T ? g.scrollWidth > T.clientWidth - Bt : !1;
410
410
  return /* @__PURE__ */ f(
411
411
  _,
412
412
  {
@@ -431,16 +431,16 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
431
431
  children: [
432
432
  /* @__PURE__ */ e(Y, { color: "text.secondary", variant: "caption", children: n }),
433
433
  h && /* @__PURE__ */ f(_, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
434
- u ? /* @__PURE__ */ e(ht, { size: 20, sx: { color: b } }) : /* @__PURE__ */ e(ut, { size: 20, sx: { color: a } }),
434
+ u ? /* @__PURE__ */ e(lt, { size: 20, sx: { color: b } }) : /* @__PURE__ */ e(dt, { size: 20, sx: { color: r } }),
435
435
  /* @__PURE__ */ e(
436
436
  Y,
437
437
  {
438
438
  sx: {
439
- color: u ? b : a,
439
+ color: u ? b : r,
440
440
  fontWeight: 600
441
441
  },
442
442
  variant: "body2",
443
- children: g
443
+ children: m
444
444
  }
445
445
  )
446
446
  ] })
@@ -450,7 +450,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
450
450
  /* @__PURE__ */ f(
451
451
  _,
452
452
  {
453
- ref: c,
453
+ ref: l,
454
454
  sx: {
455
455
  alignItems: "center",
456
456
  flexDirection: "row",
@@ -460,7 +460,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
460
460
  /* @__PURE__ */ e(
461
461
  O,
462
462
  {
463
- ref: l,
463
+ ref: c,
464
464
  sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
465
465
  children: /* @__PURE__ */ e(De, { children: C })
466
466
  }
@@ -468,9 +468,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
468
468
  h && d >= 450 && !p && /* @__PURE__ */ e(
469
469
  Y,
470
470
  {
471
- color: u ? b : a,
471
+ color: u ? b : r,
472
472
  variant: "caption",
473
- children: i
473
+ children: a
474
474
  }
475
475
  )
476
476
  ]
@@ -479,49 +479,49 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
479
479
  ]
480
480
  }
481
481
  );
482
- }, Pt = M(() => {
482
+ }, zt = M(() => {
483
483
  const { trends: n } = R();
484
484
  return /* @__PURE__ */ f(_, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
485
- /* @__PURE__ */ e(gt, { size: 32 }),
485
+ /* @__PURE__ */ e(ht, { size: 32 }),
486
486
  /* @__PURE__ */ f(_, { children: [
487
487
  /* @__PURE__ */ e(Y, { fontWeight: 600, variant: "body1", children: n.zero_state_content_header }),
488
488
  /* @__PURE__ */ e(Y, { color: "text.secondary", variant: "subtitle2", children: n.zero_state_content_description })
489
489
  ] })
490
490
  ] });
491
- }), Qn = M(({ onCtaClick: n }) => {
492
- const { visibleAccounts: o } = ie(), { onEvent: t } = H(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: i, monthlyTotalsLoaded: h } = F(), d = {
493
- start: dt(/* @__PURE__ */ new Date(), 1),
491
+ }), Xn = M(({ onCtaClick: n }) => {
492
+ const { visibleAccounts: o } = ie(), { onEvent: t } = H(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: h } = F(), d = {
493
+ start: ct(/* @__PURE__ */ new Date(), 1),
494
494
  end: /* @__PURE__ */ new Date()
495
- }, { trends: l } = R(), { selectedAccounts: c, setSelectedAccounts: g, isInitialized: C } = P();
496
- r.useEffect(() => {
497
- g(o);
498
- }, [o]), r.useEffect(() => {
499
- C && i(c, d.start).then(() => {
495
+ }, { trends: c } = R(), { selectedAccounts: l, setSelectedAccounts: m, isInitialized: C } = P();
496
+ i.useEffect(() => {
497
+ m(o);
498
+ }, [o]), i.useEffect(() => {
499
+ C && a(l, d.start).then(() => {
500
500
  t(y.TRENDS_LOAD_WIDGET, {
501
501
  state: o?.length ? "default" : "zeroState"
502
502
  });
503
503
  });
504
- }, [C, c]);
505
- const { spendingData: u, incomeData: b } = r.useMemo(
504
+ }, [C, l]);
505
+ const { spendingData: u, incomeData: b } = i.useMemo(
506
506
  () => ({
507
507
  spendingData: Le(s, d),
508
508
  incomeData: xe(s, d)
509
509
  }),
510
510
  [s, d]
511
- ), [a, m] = u, [T, p] = b, E = _e(m.y, a.y), w = _e(p.y, T.y), I = C && !o?.length, k = () => {
511
+ ), [r, g] = u, [T, p] = b, E = _e(g.y, r.y), w = _e(p.y, T.y), I = C && !o?.length, k = () => {
512
512
  t(
513
513
  I ? y.TRENDS_CLICK_GET_STARTED : y.TRENDS_CLICK_VIEW_MORE
514
514
  ), n();
515
515
  };
516
516
  return !h || !C ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
517
- ft,
517
+ pt,
518
518
  {
519
519
  className: "mx-trends-microwidget",
520
- ctaLabel: l.micro_primary_cta_label,
520
+ ctaLabel: c.micro_primary_cta_label,
521
521
  onCTAClick: k,
522
- subHeader: I ? void 0 : l.micro_subheader,
523
- title: l.title,
524
- children: I ? /* @__PURE__ */ e(Pt, {}) : /* @__PURE__ */ f(
522
+ subHeader: I ? void 0 : c.micro_subheader,
523
+ title: c.title,
524
+ children: I ? /* @__PURE__ */ e(zt, {}) : /* @__PURE__ */ f(
525
525
  _,
526
526
  {
527
527
  sx: {
@@ -534,10 +534,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
534
534
  Se,
535
535
  {
536
536
  percentage: E,
537
- secondaryLabel: l.micro_secondary_label,
538
- shouldDisplayPercentage: m.y !== 0 && a.y !== 0,
539
- title: l.spending_label,
540
- totalAmount: m.y,
537
+ secondaryLabel: c.micro_secondary_label,
538
+ shouldDisplayPercentage: g.y !== 0 && r.y !== 0,
539
+ title: c.spending_label,
540
+ totalAmount: g.y,
541
541
  transactionType: "spending"
542
542
  }
543
543
  ),
@@ -545,9 +545,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
545
545
  Se,
546
546
  {
547
547
  percentage: w,
548
- secondaryLabel: l.micro_secondary_label,
548
+ secondaryLabel: c.micro_secondary_label,
549
549
  shouldDisplayPercentage: p.y !== 0 && T.y !== 0,
550
- title: l.income_label,
550
+ title: c.income_label,
551
551
  totalAmount: p.y,
552
552
  transactionType: "income"
553
553
  }
@@ -557,17 +557,17 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
557
557
  )
558
558
  }
559
559
  );
560
- }), Kt = M(
560
+ }), Ft = M(
561
561
  ({ isExpanded: n, onClick: o }) => {
562
562
  const t = Ne();
563
- return /* @__PURE__ */ e(_t, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(bt, { onClick: o, sx: { justifyContent: "center" }, children: /* @__PURE__ */ f(
563
+ return /* @__PURE__ */ e(Tt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(yt, { onClick: o, sx: { justifyContent: "center" }, children: /* @__PURE__ */ f(
564
564
  _,
565
565
  {
566
566
  sx: { color: t.palette.primary.main, flexDirection: "row", alignItems: "center" },
567
567
  children: [
568
- /* @__PURE__ */ e(wt, { children: /* @__PURE__ */ e(X, { bold: !0, variant: "body2", children: n ? "View less" : "View more" }) }),
569
- /* @__PURE__ */ e(St, { sx: { color: t.palette.primary.main }, children: n ? /* @__PURE__ */ e(mt, {}) : /* @__PURE__ */ e(
570
- pt,
568
+ /* @__PURE__ */ e(bt, { children: /* @__PURE__ */ e(X, { bold: !0, variant: "body2", children: n ? "View less" : "View more" }) }),
569
+ /* @__PURE__ */ e(_t, { sx: { color: t.palette.primary.main }, children: n ? /* @__PURE__ */ e(ut, {}) : /* @__PURE__ */ e(
570
+ mt,
571
571
  {
572
572
  sx: {
573
573
  transition: "transform 0.3s ease-in-out",
@@ -585,79 +585,79 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
585
585
  guid: o,
586
586
  name: t,
587
587
  transactions: s,
588
- onClick: i,
588
+ onClick: a,
589
589
  isLastItem: h = !1,
590
590
  showDivider: d = !0
591
591
  }) => {
592
- const { trends: l } = R(), { onEvent: c } = H(), g = `${s.length} ${s.length === 1 ? l.transaction : l.transactions}`, C = () => {
593
- i?.(), c(y.TRENDS_CLICK_LIST_ITEM, {
592
+ const { trends: c } = R(), { onEvent: l } = H(), m = `${s.length} ${s.length === 1 ? c.transaction : c.transactions}`, C = () => {
593
+ a?.(), l(y.TRENDS_CLICK_LIST_ITEM, {
594
594
  ...A,
595
595
  listItem: t
596
596
  });
597
597
  };
598
- return /* @__PURE__ */ f(r.Fragment, { children: [
598
+ return /* @__PURE__ */ f(i.Fragment, { children: [
599
599
  /* @__PURE__ */ e(
600
600
  Ee,
601
601
  {
602
602
  leftIcon: o ? /* @__PURE__ */ e(Te, { categoryGuid: o }) : void 0,
603
603
  onClick: C,
604
604
  rightContent: U(Math.abs(n), "0,0.00"),
605
- rightIcon: i ? /* @__PURE__ */ e(Ke, {}) : void 0,
606
- subtitle: g,
605
+ rightIcon: a ? /* @__PURE__ */ e(Fe, {}) : void 0,
606
+ subtitle: m,
607
607
  title: t
608
608
  }
609
609
  ),
610
- d && /* @__PURE__ */ e(Dt, { sx: { ml: h ? 24 : 68 } })
610
+ d && /* @__PURE__ */ e(St, { sx: { ml: h ? 24 : 68 } })
611
611
  ] }, o);
612
612
  }
613
- ), $t = M(
613
+ ), Pt = M(
614
614
  ({ availableHeight: n = 0, onCategoryClick: o }) => {
615
- const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: i } = q(), { isLargeDesktop: h, isDesktop: d } = K(), { trends: l } = R(), { onEvent: c } = H(), [g, C] = r.useState(!1), u = d || h;
616
- r.useEffect(() => {
617
- const m = Math.floor(n / 64) - 1, T = s.length + t.length;
618
- m !== s.length && (i(u ? Math.max(m, 5) : 5), C(m >= T));
615
+ const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: a } = q(), { isLargeDesktop: h, isDesktop: d } = K(), { trends: c } = R(), { onEvent: l } = H(), [m, C] = i.useState(!1), u = d || h;
616
+ i.useEffect(() => {
617
+ const g = Math.floor(n / 64) - 1, T = s.length + t.length;
618
+ g !== s.length && (a(u ? Math.max(g, 5) : 5), C(g >= T));
619
619
  }, [n]);
620
620
  const b = () => {
621
- C(!g), c(y.TRENDS_CLICK_VIEW_MORE, {
621
+ C(!m), l(y.TRENDS_CLICK_VIEW_MORE, {
622
622
  ...A
623
623
  });
624
- }, a = s.length + (g ? t.length : 0);
625
- return /* @__PURE__ */ e(_, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ f(yt, { children: [
626
- /* @__PURE__ */ e(_, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(De, { children: l.categories }) }),
627
- s.map((m, T) => /* @__PURE__ */ e(
624
+ }, r = s.length + (m ? t.length : 0);
625
+ return /* @__PURE__ */ e(_, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ f(ft, { children: [
626
+ /* @__PURE__ */ e(_, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(De, { children: c.categories }) }),
627
+ s.map((g, T) => /* @__PURE__ */ e(
628
628
  we,
629
629
  {
630
- ...m,
631
- isLastItem: T === a - 1,
632
- onClick: m.transactions.length > 0 ? () => o(m) : void 0,
630
+ ...g,
631
+ isLastItem: T === r - 1,
632
+ onClick: g.transactions.length > 0 ? () => o(g) : void 0,
633
633
  showDivider: !0
634
634
  },
635
- m.guid
635
+ g.guid
636
636
  )),
637
637
  /* @__PURE__ */ e(
638
- Tt,
638
+ Ct,
639
639
  {
640
- in: g,
640
+ in: m,
641
641
  sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
642
- children: t.map((m, T) => {
642
+ children: t.map((g, T) => {
643
643
  const p = s.length + T;
644
644
  return /* @__PURE__ */ e(
645
645
  we,
646
646
  {
647
- ...m,
648
- isLastItem: p === a - 1,
649
- onClick: m.transactions.length > 0 ? () => o(m) : void 0,
647
+ ...g,
648
+ isLastItem: p === r - 1,
649
+ onClick: g.transactions.length > 0 ? () => o(g) : void 0,
650
650
  showDivider: !0
651
651
  },
652
- m.guid
652
+ g.guid
653
653
  );
654
654
  })
655
655
  }
656
656
  ),
657
- t.length > 0 && /* @__PURE__ */ e(Kt, { isExpanded: g, onClick: b })
657
+ t.length > 0 && /* @__PURE__ */ e(Ft, { isExpanded: m, onClick: b })
658
658
  ] }) });
659
659
  }
660
- ), jt = [
660
+ ), Kt = [
661
661
  "BillAmountNotStandard",
662
662
  "CategorySpendingV2",
663
663
  "CostOfLivingToIncome",
@@ -691,38 +691,38 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
691
691
  "WeeklyNewMerchantsV2",
692
692
  "WeeklyNoSpendDays",
693
693
  "WeeklySmallPurchasesSummary"
694
- ], Yt = ({ onInsightCardClick: n }) => {
695
- const o = It(), { onEvent: t } = H(), { isMobile: s, isDesktop: i, isLargeDesktop: h } = K(), { beatStore: d, endpoint: l, sessionToken: c } = ve(), { isInitialized: g } = P(), [C, u] = r.useState(!1), b = o.palette.mode === "dark", a = i || h, m = a || s ? 1 : 2;
696
- r.useEffect(() => {
697
- g && d.loadBeats().finally(() => u(!0));
698
- }, [g]);
699
- const T = r.useMemo(() => C ? d.getFilteredBeats({ templates: jt }) : [], [C]), p = () => null, E = (D) => {
694
+ ], $t = ({ onInsightCardClick: n }) => {
695
+ const o = wt(), { onEvent: t } = H(), { isMobile: s, isDesktop: a, isLargeDesktop: h } = K(), { beatStore: d, endpoint: c, sessionToken: l } = ve(), { isInitialized: m } = P(), [C, u] = i.useState(!1), b = o.palette.mode === "dark", r = a || h, g = r || s ? 1 : 2;
696
+ i.useEffect(() => {
697
+ m && d.loadBeats().finally(() => u(!0));
698
+ }, [m]);
699
+ const T = i.useMemo(() => C ? d.getFilteredBeats({ templates: Kt }) : [], [C]), p = () => null, E = (D) => {
700
700
  n?.(D), t(y.TRENDS_CLICK_INSIGHT, A);
701
- }, w = a ? 200 : 170, I = a ? 170 : 124, k = T.length > 0 ? w : I;
702
- return /* @__PURE__ */ e(Et, { sx: { height: k }, children: /* @__PURE__ */ e(
703
- ct,
701
+ }, w = r ? 200 : 170, I = r ? 170 : 124, k = T.length > 0 ? w : I;
702
+ return /* @__PURE__ */ e(Dt, { sx: { height: k }, children: /* @__PURE__ */ e(
703
+ at,
704
704
  {
705
705
  areBeatsLoading: d.isLoading,
706
706
  beats: T,
707
- endpoint: l,
707
+ endpoint: c,
708
708
  logOutUser: p,
709
709
  onCardClick: E,
710
710
  showBorder: !0,
711
711
  showCTAColocatedWithText: !1,
712
712
  showCarouselControls: !0,
713
- showHeader: a,
713
+ showHeader: r,
714
714
  showIcon: !0,
715
715
  showWithMargin: !1,
716
- token: c,
716
+ token: l,
717
717
  useDarkMode: b,
718
718
  userHasFullInsightFeedBeats: !1,
719
719
  variant: "outlined",
720
- visibleCardsCount: m
720
+ visibleCardsCount: g
721
721
  }
722
722
  ) });
723
- }, Ut = M(Yt), Xt = M(({ chartLabel: n, chartColor: o }) => {
723
+ }, jt = M($t), Yt = M(({ chartLabel: n, chartColor: o }) => {
724
724
  const { onEvent: t } = H(), {
725
- categoryDetailsChartData: { monthlyAmounts: s, tooltipLabels: i }
725
+ categoryDetailsChartData: { monthlyAmounts: s, tooltipLabels: a }
726
726
  } = q();
727
727
  return /* @__PURE__ */ e(_, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
728
728
  ye,
@@ -730,7 +730,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
730
730
  baseline: "min",
731
731
  colors: [o],
732
732
  curveType: "bump",
733
- customTooltipLabels: i,
733
+ customTooltipLabels: a,
734
734
  datasets: [s],
735
735
  height: 265,
736
736
  labels: [n],
@@ -753,40 +753,40 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
753
753
  valueFormatterString: "0,0"
754
754
  }
755
755
  ) });
756
- }), Zt = M(({ onClose: n }) => {
757
- const o = Ne(), { onEvent: t } = H(), { common: s, trends: i } = R(), { selectedCategoryData: h, selectedDateRangeMonthRange: d } = q(), { sortedTransactions: l } = re(), [c, g] = r.useState(null);
756
+ }), Ut = M(({ onClose: n }) => {
757
+ const o = Ne(), { onEvent: t } = H(), { common: s, trends: a } = R(), { selectedCategoryData: h, selectedDateRangeMonthRange: d } = q(), { sortedTransactions: c } = ae(), [l, m] = i.useState(null);
758
758
  if (!h)
759
759
  return null;
760
- const { guid: C, name: u, is_income: b, totalAmount: a } = h, m = b ? i.category_income : i.category_spending, T = xt(C, o), p = b ? i.income_label : i.spending_label, E = ` ${h.transactions.length === 1 ? i.transaction : i.transactions} (${h.transactions.length})`, w = r.useMemo(
761
- () => l.find((D) => D.guid === c),
762
- [c, l]
760
+ const { guid: C, name: u, is_income: b, totalAmount: r } = h, g = b ? a.category_income : a.category_spending, T = Et(C, o), p = b ? a.income_label : a.spending_label, E = ` ${h.transactions.length === 1 ? a.transaction : a.transactions} (${h.transactions.length})`, w = i.useMemo(
761
+ () => c.find((D) => D.guid === l),
762
+ [l, c]
763
763
  ), I = (D) => D.category_guid === C || D.top_level_category_guid === C, k = () => {
764
764
  n?.(), t(y.TRENDS_CLICK_BACK, A);
765
765
  };
766
766
  return /* @__PURE__ */ f(
767
767
  fe,
768
768
  {
769
- ariaLabelClose: i.close_category_details,
769
+ ariaLabelClose: a.close_category_details,
770
770
  isOpen: !0,
771
771
  onClose: k,
772
772
  shouldShowHeaderShadow: !0,
773
- title: m,
773
+ title: g,
774
774
  children: [
775
775
  /* @__PURE__ */ f(_, { sx: { alignItems: "center", height: "100%" }, children: [
776
- /* @__PURE__ */ f(Lt, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
776
+ /* @__PURE__ */ f(It, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
777
777
  /* @__PURE__ */ e(
778
778
  Ee,
779
779
  {
780
780
  leftIcon: /* @__PURE__ */ e(Te, { categoryGuid: C }),
781
- rightContent: U(Math.abs(a), "0,0.00"),
781
+ rightContent: U(Math.abs(r), "0,0.00"),
782
782
  subtitle: d,
783
783
  title: u
784
784
  }
785
785
  ),
786
- /* @__PURE__ */ e(Xt, { chartColor: T, chartLabel: p }),
786
+ /* @__PURE__ */ e(Yt, { chartColor: T, chartLabel: p }),
787
787
  /* @__PURE__ */ f(_, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
788
788
  /* @__PURE__ */ e(X, { bold: !0, variant: "body1", children: E }),
789
- /* @__PURE__ */ e(vt, { filter: I })
789
+ /* @__PURE__ */ e(Lt, { filter: I })
790
790
  ] })
791
791
  ] }),
792
792
  /* @__PURE__ */ e(
@@ -795,7 +795,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
795
795
  bgcolor: "transparent",
796
796
  filter: I,
797
797
  height: "calc(100vh - 475px)",
798
- onClick: g
798
+ onClick: m
799
799
  }
800
800
  )
801
801
  ] }),
@@ -804,36 +804,36 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
804
804
  {
805
805
  ariaLabelClose: s.close_aria,
806
806
  isOpen: !!w,
807
- onClose: () => g(""),
808
- title: i.transaction,
807
+ onClose: () => m(""),
808
+ title: a.transaction,
809
809
  children: w && /* @__PURE__ */ e(Re, { transaction: w })
810
810
  }
811
811
  )
812
812
  ]
813
813
  }
814
814
  );
815
- }), Qt = (n, o) => {
815
+ }), Xt = (n, o) => {
816
816
  const t = xe(n, o), s = Le(n, o);
817
- return [t, s].filter((i) => i.length > 0);
818
- }, qt = (n, o) => {
819
- const [t, s] = n, i = t, h = s ?? t, d = [];
820
- if (i) {
821
- const l = i.reduce((c, g) => c + g.y, 0);
822
- d.push({ label: o.income_label, amount: l });
817
+ return [t, s].filter((a) => a.length > 0);
818
+ }, Zt = (n, o) => {
819
+ const [t, s] = n, a = t, h = s ?? t, d = [];
820
+ if (a) {
821
+ const c = a.reduce((l, m) => l + m.y, 0);
822
+ d.push({ label: o.income_label, amount: c });
823
823
  }
824
824
  if (h) {
825
- const l = h.reduce((c, g) => c + g.y, 0);
826
- d.push({ label: o.spending_label, amount: l });
825
+ const c = h.reduce((l, m) => l + m.y, 0);
826
+ d.push({ label: o.spending_label, amount: c });
827
827
  }
828
828
  return d;
829
- }, Jt = ({
829
+ }, Qt = ({
830
830
  availableHeight: n = 0,
831
831
  minHeight: o = 500,
832
832
  selectedDateRange: t,
833
833
  totals: s
834
834
  }) => {
835
- const i = He(), { onEvent: h } = H(), { trends: d } = R(), { isSmallMobile: l, isMobile: c, isSmallTablet: g, isTablet: C } = K(), u = [i.palette.chart?.chart1, i.palette.chart?.chart2], b = Qt(s, t), a = qt(b, d), [m, T] = r.useState(0), p = 458, E = 195, w = 56, I = c || l ? E : g || C ? p : m;
836
- return r.useEffect(() => {
835
+ const a = He(), { onEvent: h } = H(), { trends: d } = R(), { isSmallMobile: c, isMobile: l, isSmallTablet: m, isTablet: C } = K(), u = [a.palette.chart?.chart1, a.palette.chart?.chart2], b = Xt(s, t), r = Zt(b, d), [g, T] = i.useState(0), p = 458, E = 195, w = 56, I = l || c ? E : m || C ? p : g;
836
+ return i.useEffect(() => {
837
837
  const D = Math.max(n - w, o);
838
838
  T(D);
839
839
  }, [n]), /* @__PURE__ */ e(
@@ -844,7 +844,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
844
844
  curveType: "bump",
845
845
  datasets: b,
846
846
  height: I,
847
- labels: a,
847
+ labels: r,
848
848
  onItemClick: () => {
849
849
  h(y.TRENDS_CLICK_CHART, A);
850
850
  },
@@ -859,39 +859,37 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
859
859
  valueFormatterString: "0,0"
860
860
  }
861
861
  );
862
- }, en = M(Jt), tn = ({ onBackClick: n, onInsightCardClick: o, sx: t }) => {
863
- const { onEvent: s } = H(), { config: i } = st(), { isLargeDesktop: h, isDesktop: d, isMobile: l } = K(), { visibleAccounts: c } = ie(), { loadDateRangeCategoryTotals: g, loadMonthlyCategoryTotals: C, monthlyCategoryTotals: u } = F(), { setFilter: b } = re(), { selectedDateRange: a, setSelectedCategoryData: m, setSelectedDateRange: T } = q(), {
862
+ }, qt = M(Qt), Jt = ({ onBackClick: n, onInsightCardClick: o, sx: t }) => {
863
+ const { onEvent: s } = H(), { config: a } = nt(), { isLargeDesktop: h, isDesktop: d, isMobile: c } = K(), { visibleAccounts: l } = ie(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: C, monthlyCategoryTotals: u } = F(), { setFilter: b } = ae(), { selectedDateRange: r, setSelectedCategoryData: g, setSelectedDateRange: T } = q(), {
864
864
  isCopyLoaded: p,
865
865
  isInitialized: E,
866
866
  selectedAccounts: w,
867
867
  selectedAccountGuids: I,
868
868
  setSelectedAccounts: k
869
- } = P(), { trends: D } = R(), N = Ue(), L = d || h, [x, $] = r.useState(!1), [z, ce] = r.useState("Chart"), [J, ee] = r.useState(""), [te, ne] = r.useState(!1), [oe, le] = r.useState(window.innerHeight), se = oe - 208, de = oe - (N ? 494 : 266), [he, ue] = r.useState(!1);
870
- r.useEffect(() => {
869
+ } = P(), { trends: D } = R(), N = je(), x = d || h, [L, $] = i.useState(!1), [z, ce] = i.useState("Chart"), [J, ee] = i.useState(""), [te, ne] = i.useState(!1), [oe, le] = i.useState(window.innerHeight), se = oe - 208, de = oe - (N ? 494 : 266);
870
+ i.useEffect(() => {
871
871
  const v = () => le(window.innerHeight);
872
872
  return window.addEventListener("resize", v), () => window.removeEventListener("resize", v);
873
- }, []), r.useEffect(() => {
874
- console.log("accounts changed: ", c.length), k(c);
875
- }, [c]), r.useEffect(() => {
876
- console.log("first load: ", c.length), c || ue(!0);
877
- }, []), r.useEffect(() => {
878
- E && g(w, a.start, a.end).then(() => {
873
+ }, []), i.useEffect(() => {
874
+ k(l);
875
+ }, [l]), i.useEffect(() => {
876
+ E && m(w, r.start, r.end).then(() => {
879
877
  C(
880
878
  w,
881
- a.start,
882
- a.end
879
+ r.start,
880
+ r.end
883
881
  );
884
882
  }).finally(() => {
885
883
  $(!0), s(y.TRENDS_LOAD_WIDGET, {
886
884
  ...A,
887
- time_period: `${Ce(a.end, a.start)}M`
885
+ time_period: `${Ce(r.end, r.start)}M`
888
886
  });
889
887
  });
890
- }, [E, w, a]), r.useEffect(() => {
888
+ }, [E, w, r]), i.useEffect(() => {
891
889
  if (u.length !== 0) {
892
890
  const v = {
893
891
  accounts: I,
894
- dateRange: { start: a.start, end: a.end }
892
+ dateRange: { start: r.start, end: r.end }
895
893
  };
896
894
  b({
897
895
  ...v,
@@ -901,61 +899,48 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
901
899
  });
902
900
  }
903
901
  }, [u]);
904
- const ge = (v) => {
905
- m(v), ne(!0);
906
- }, S = () => {
907
- m(null), ne(!1);
908
- }, W = (v, V) => {
902
+ const he = (v) => {
903
+ g(v), ne(!0);
904
+ }, ue = () => {
905
+ g(null), ne(!1);
906
+ }, me = (v, V) => {
909
907
  ce(V ?? z), s(y.TRENDS_CLICK_TOGGLE_VIEW, {
910
908
  ...A,
911
909
  toggleView: V
912
910
  });
913
- }, G = (v) => {
914
- const V = Ie(v?.[0], 1), j = v?.[1], Fe = Ce(j, V);
911
+ }, S = (v) => {
912
+ const V = Ie(v?.[0], 1), j = v?.[1], Be = Ce(j, V);
915
913
  T({ start: V, end: j }), s(y.TRENDS_CLICK_TIME_WINDOW, {
916
914
  ...A,
917
- time_period: Fe + "M"
915
+ time_period: Be + "M"
918
916
  });
919
- }, me = (v) => {
917
+ }, W = (v) => {
920
918
  s(y.TRENDS_CLICK_FILTER, {
921
919
  ...A,
922
920
  filterValue: v
923
921
  });
924
- }, Ge = (v) => {
922
+ }, G = (v) => {
925
923
  ee(v);
926
- }, Be = () => {
924
+ }, ge = () => {
927
925
  ee(""), s(y.TRENDS_CLICK_ALL_CATEGORIES, A);
928
- }, ze = i.show_connections_widget_in_master ? "buttons" : "no-buttons";
929
- return /* @__PURE__ */ f(
926
+ }, Ge = a.show_connections_widget_in_master ? "buttons" : "no-buttons";
927
+ return !p || !L ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ f(
930
928
  Ae,
931
929
  {
932
- accountOptions: c,
933
- calendarActions: { onRangeChanged: G },
934
- dateRange: a,
935
- dateRangeVariant: l ? "timeframetabs" : "timeframebuttons",
936
- onAccountsFilterClick: me,
930
+ accountOptions: l,
931
+ calendarActions: { onRangeChanged: S },
932
+ dateRange: r,
933
+ dateRangeVariant: c ? "timeframetabs" : "timeframebuttons",
934
+ onAccountsFilterClick: W,
937
935
  onBackClick: n,
938
936
  sx: t,
939
937
  title: D.title,
940
938
  children: [
941
- !p || !x && /* @__PURE__ */ e(Q, {}),
942
- he ? /* @__PURE__ */ e(
943
- Mt,
944
- {
945
- header: D.zero_state_content_header,
946
- icon: "",
947
- onClick: () => {
948
- },
949
- primaryButton: D.empty_state_primary,
950
- subText: D.empty_state_sub_text,
951
- sx: { height: se },
952
- variant: ze
953
- }
954
- ) : /* @__PURE__ */ f(
939
+ l && L && /* @__PURE__ */ f(
955
940
  _,
956
941
  {
957
942
  sx: {
958
- px: l ? 0 : 48
943
+ px: c ? 0 : 48
959
944
  },
960
945
  children: [
961
946
  /* @__PURE__ */ f(
@@ -963,41 +948,41 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
963
948
  {
964
949
  flexDirection: "row",
965
950
  justifyContent: "space-between",
966
- sx: { pb: l ? 12 : 24, pt: l ? 24 : 48 },
951
+ sx: { pb: c ? 12 : 24, pt: c ? 24 : 48 },
967
952
  children: [
968
953
  /* @__PURE__ */ e(
969
954
  Oe,
970
955
  {
971
956
  selectedCategoryGuid: J,
972
- selectedDateRange: a
957
+ selectedDateRange: r
973
958
  }
974
959
  ),
975
- /* @__PURE__ */ e(We, { onTabChange: W, selectedTab: z })
960
+ /* @__PURE__ */ e(We, { onTabChange: me, selectedTab: z })
976
961
  ]
977
962
  }
978
963
  ),
979
- /* @__PURE__ */ e(_, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(O, { flexGrow: 1, children: J && /* @__PURE__ */ f(pe, { onClick: Be, sx: { p: 0, pr: 5 }, children: [
980
- /* @__PURE__ */ e(ae, { name: "arrow_back" }),
964
+ /* @__PURE__ */ e(_, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(O, { flexGrow: 1, children: J && /* @__PURE__ */ f(pe, { onClick: ge, sx: { p: 0, pr: 5 }, children: [
965
+ /* @__PURE__ */ e(re, { name: "arrow_back" }),
981
966
  D.all_categories
982
967
  ] }) }) }),
983
- /* @__PURE__ */ f(_, { flexDirection: L ? "row" : "column", gap: L ? 48 : 16, children: [
984
- z === "Chart" && /* @__PURE__ */ f(Pe, { children: [
985
- /* @__PURE__ */ e(O, { sx: { width: L ? "68%" : "100%" }, children: /* @__PURE__ */ e(
986
- en,
968
+ /* @__PURE__ */ f(_, { flexDirection: x ? "row" : "column", gap: x ? 48 : 16, children: [
969
+ z === "Chart" && /* @__PURE__ */ f(ze, { children: [
970
+ /* @__PURE__ */ e(O, { sx: { width: x ? "68%" : "100%" }, children: /* @__PURE__ */ e(
971
+ qt,
987
972
  {
988
973
  availableHeight: se,
989
974
  minHeight: 450,
990
- selectedDateRange: a,
975
+ selectedDateRange: r,
991
976
  totals: u
992
977
  }
993
978
  ) }),
994
- /* @__PURE__ */ f(_, { gap: 16, sx: { width: L ? "32%" : "100%" }, children: [
995
- N && /* @__PURE__ */ e(Ut, { onInsightCardClick: o }),
979
+ /* @__PURE__ */ f(_, { gap: 16, sx: { width: x ? "32%" : "100%" }, children: [
980
+ N && /* @__PURE__ */ e(jt, { onInsightCardClick: o }),
996
981
  /* @__PURE__ */ e(
997
- $t,
982
+ Pt,
998
983
  {
999
984
  availableHeight: de,
1000
- onCategoryClick: ge
985
+ onCategoryClick: he
1001
986
  }
1002
987
  )
1003
988
  ] })
@@ -1007,24 +992,37 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
1007
992
  {
1008
993
  height: "unset",
1009
994
  monthlyCategoryTotals: u,
1010
- onClickRow: Ge,
995
+ onClickRow: G,
1011
996
  selectedCategory: J,
1012
- selectedDateRange: a
997
+ selectedDateRange: r
1013
998
  }
1014
999
  ) })
1015
1000
  ] }),
1016
- te && /* @__PURE__ */ e(Zt, { onClose: S })
1001
+ te && /* @__PURE__ */ e(Ut, { onClose: ue })
1017
1002
  ]
1018
1003
  }
1004
+ ),
1005
+ l === void 0 && /* @__PURE__ */ e(
1006
+ xt,
1007
+ {
1008
+ header: D.zero_state_content_header,
1009
+ icon: "",
1010
+ onClick: () => {
1011
+ },
1012
+ primaryButton: D.empty_state_primary,
1013
+ subText: D.empty_state_sub_text,
1014
+ sx: { height: se },
1015
+ variant: Ge
1016
+ }
1019
1017
  )
1020
1018
  ]
1021
1019
  }
1022
1020
  );
1023
- }, qn = M(tn);
1021
+ }, Zn = M(Jt);
1024
1022
  export {
1025
- Xn as TrendsFullWidget,
1026
- Qn as TrendsMicroWidget,
1027
- Zn as TrendsMiniWidget,
1028
- to as TrendsStore,
1029
- qn as TrendsWidget
1023
+ Yn as TrendsFullWidget,
1024
+ Xn as TrendsMicroWidget,
1025
+ Un as TrendsMiniWidget,
1026
+ Jn as TrendsStore,
1027
+ Zn as TrendsWidget
1030
1028
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mx-cartographer/experiences",
3
- "version": "7.0.23-alpha.al2",
3
+ "version": "7.0.23-alpha.al4",
4
4
  "description": "Library containing experience widgets",
5
5
  "author": "MX",
6
6
  "license": "MIT",