@mx-cartographer/experiences 7.0.23-alpha.al0 → 7.0.23-alpha.al1

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