@mx-cartographer/experiences 7.0.23-alpha.al9 → 7.0.23
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.
- package/CHANGELOG.md +1 -1
- package/dist/{AccountStore-DRJfrlJa.mjs → AccountStore-BaMynkQT.mjs} +17 -17
- package/dist/{ExportCsvAction-CbMfQ2Wa.mjs → ExportCsvAction-CbdFfDV5.mjs} +1 -1
- package/dist/{TransactionStore-0tLtBEIC.mjs → TransactionStore-Cep_Eeql.mjs} +1 -1
- package/dist/accounts/index.es.js +1 -1
- package/dist/budgets/index.es.js +1 -1
- package/dist/common/index.es.js +3 -3
- package/dist/exportTransactionsToCSV-B5qAKd6C.mjs +47 -0
- package/dist/goals/index.es.js +494 -493
- package/dist/transactions/index.es.js +4 -4
- package/dist/trends/index.es.js +251 -262
- package/package.json +1 -1
- package/dist/exportTransactionsToCSV-BDlt8u0n.mjs +0 -47
package/dist/trends/index.es.js
CHANGED
|
@@ -1,65 +1,65 @@
|
|
|
1
|
-
import { jsx as e, jsxs as f, Fragment as
|
|
1
|
+
import { jsx as e, jsxs as f, Fragment as Fe } from "react/jsx-runtime";
|
|
2
2
|
import i from "react";
|
|
3
3
|
import { observer as M } from "mobx-react-lite";
|
|
4
|
-
import { Icon as
|
|
4
|
+
import { Icon as se, Text as X, CategoryIcon as Te, P as Y, H3 as De, ChevronRightIcon as Pe } 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
|
-
import { addSeconds as
|
|
8
|
+
import { addSeconds as Ie } from "date-fns/addSeconds";
|
|
9
9
|
import { differenceInCalendarMonths as Ce } from "date-fns/differenceInCalendarMonths";
|
|
10
|
-
import { a as
|
|
10
|
+
import { a as Ke, g as $e, S as je, L as Ee, u as Ye } from "../TrendsStore-WrHxzdbQ.mjs";
|
|
11
11
|
import { T as eo } from "../TrendsStore-WrHxzdbQ.mjs";
|
|
12
|
-
import { i as
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import { u as R, k as F, e as H, a as P, f as
|
|
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 re, c as ae, v as q, l as ve, p as nt, m as ot } from "../hooks-DkUqN6JE.mjs";
|
|
16
16
|
import { u as K } from "../useScreenSize-B6JyS_Lj.mjs";
|
|
17
|
-
import { f as
|
|
18
|
-
import { DataGridPro as
|
|
19
|
-
import { C as
|
|
20
|
-
import { c as
|
|
21
|
-
import { b as
|
|
22
|
-
import { H as
|
|
23
|
-
import { T as A, b as
|
|
24
|
-
import { A as
|
|
25
|
-
import { a as
|
|
17
|
+
import { f as Z, D as B } from "../Dialog-CWW597AF.mjs";
|
|
18
|
+
import { DataGridPro as st } from "@mui/x-data-grid-pro";
|
|
19
|
+
import { C as rt } from "../CurrencyText-YUhH2caW.mjs";
|
|
20
|
+
import { c as Me } from "../Category-CevNQ03n.mjs";
|
|
21
|
+
import { b as at } from "../Localization-2MODESHW.mjs";
|
|
22
|
+
import { H as be } from "../HeaderCell-DjuifqHJ.mjs";
|
|
23
|
+
import { T as A, b as it } from "../ViewMoreMicroCard-DFAY0tA8.mjs";
|
|
24
|
+
import { A as y, W as Ae } from "../WidgetContainer-CdBs9WOZ.mjs";
|
|
25
|
+
import { a as Re, T as ke } from "../TransactionDetails-C-z3HGTT.mjs";
|
|
26
26
|
import { D as fe } from "../Drawer-kEE73B87.mjs";
|
|
27
|
-
import { L as
|
|
28
|
-
import { useTheme as
|
|
29
|
-
import { L as
|
|
30
|
-
import { M as
|
|
31
|
-
import { subMonths as
|
|
32
|
-
import { TrendingUp as
|
|
33
|
-
import { a as
|
|
34
|
-
import { M as
|
|
35
|
-
import
|
|
27
|
+
import { L as Q } from "../Loader-DUaFpDGv.mjs";
|
|
28
|
+
import { useTheme as He } from "@mui/material/styles";
|
|
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
36
|
import Tt from "@mui/material/List";
|
|
37
|
-
import
|
|
38
|
-
import
|
|
39
|
-
import
|
|
40
|
-
import
|
|
41
|
-
import
|
|
42
|
-
import
|
|
43
|
-
import { useTheme as
|
|
44
|
-
import
|
|
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";
|
|
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
45
|
import { b as Lt } from "../CategoryUtil-BR3H5i6n.mjs";
|
|
46
|
-
import { E as
|
|
47
|
-
import { E as
|
|
48
|
-
const
|
|
49
|
-
|
|
46
|
+
import { E as xt } from "../ExportCsvAction-CbdFfDV5.mjs";
|
|
47
|
+
import { E as vt } from "../EmptyState-C0lr9E5T.mjs";
|
|
48
|
+
const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
49
|
+
tt,
|
|
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(
|
|
55
|
+
children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(et, { color: "primary", sx: { width: 56 }, value: t, children: t === "Chart" ? /* @__PURE__ */ e(se, { name: "table_chart_view" }) : /* @__PURE__ */ e(se, { name: "format_list_bulleted" }) }, t))
|
|
56
56
|
}
|
|
57
|
-
),
|
|
57
|
+
), Oe = ({ selectedDateRange: n, selectedCategoryGuid: o }) => {
|
|
58
58
|
const { trends: t } = R(), { isMobile: s, isDesktop: a } = K(), { getCategoryName: h } = F(), l = i.useMemo(() => {
|
|
59
|
-
const c =
|
|
59
|
+
const c = Z(
|
|
60
60
|
n.start,
|
|
61
61
|
s ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
|
|
62
|
-
), d =
|
|
62
|
+
), d = Z(
|
|
63
63
|
n.end,
|
|
64
64
|
s ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
|
|
65
65
|
);
|
|
@@ -67,7 +67,7 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
67
67
|
}, [n, s]);
|
|
68
68
|
return /* @__PURE__ */ f(O, { sx: { mr: 10, minWidth: "60%" }, children: [
|
|
69
69
|
/* @__PURE__ */ e(
|
|
70
|
-
|
|
70
|
+
X,
|
|
71
71
|
{
|
|
72
72
|
display: "block",
|
|
73
73
|
fontWeight: 700,
|
|
@@ -80,23 +80,23 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
80
80
|
children: h(o) || t.sub_title
|
|
81
81
|
}
|
|
82
82
|
),
|
|
83
|
-
/* @__PURE__ */ e(
|
|
83
|
+
/* @__PURE__ */ e(X, { variant: a ? "Body" : "Small", children: l })
|
|
84
84
|
] });
|
|
85
85
|
}, Mt = (n) => {
|
|
86
86
|
const o = n.row[n.field];
|
|
87
|
-
return /* @__PURE__ */ e(_, { alignItems: "flex-end", tabIndex: n.tabIndex, children: /* @__PURE__ */ e(
|
|
87
|
+
return /* @__PURE__ */ e(_, { alignItems: "flex-end", tabIndex: n.tabIndex, children: /* @__PURE__ */ e(rt, { amount: o, variant: "Small" }) });
|
|
88
88
|
}, At = ({ categoryGuid: n, topLevelCategoryGuid: o }) => {
|
|
89
|
-
const { categories: t } = R(), s = t.default_categories[n]?.replace(/&/g, "&") ??
|
|
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":
|
|
94
|
+
"aria-label": at(t.category_icon_label_aria, s),
|
|
95
95
|
role: "img",
|
|
96
|
-
children: /* @__PURE__ */ e(
|
|
96
|
+
children: /* @__PURE__ */ e(Te, { categoryGuid: o })
|
|
97
97
|
}
|
|
98
98
|
),
|
|
99
|
-
/* @__PURE__ */ e(
|
|
99
|
+
/* @__PURE__ */ e(X, { sx: { ml: 12, pb: 6 }, variant: "Small", children: s })
|
|
100
100
|
] });
|
|
101
101
|
}, Rt = (n) => /* @__PURE__ */ e(_, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
|
|
102
102
|
At,
|
|
@@ -107,11 +107,11 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
107
107
|
) }), kt = (n, o) => {
|
|
108
108
|
const t = [], s = new Date(n);
|
|
109
109
|
for (; s <= o; ) {
|
|
110
|
-
const a =
|
|
110
|
+
const a = Z(s, B.MONTH);
|
|
111
111
|
t.push(a), s.setMonth(s.getMonth() + 1);
|
|
112
112
|
}
|
|
113
113
|
return t;
|
|
114
|
-
},
|
|
114
|
+
}, Ve = ({
|
|
115
115
|
monthlyCategoryTotals: n,
|
|
116
116
|
selectedDateRange: o,
|
|
117
117
|
selectedCategory: t,
|
|
@@ -119,7 +119,7 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
119
119
|
height: a = "100dvh",
|
|
120
120
|
sx: h = {}
|
|
121
121
|
}) => {
|
|
122
|
-
const { onEvent: l } = H(), c =
|
|
122
|
+
const { onEvent: l } = H(), c = Z(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [d, m] = i.useState([
|
|
123
123
|
{ field: c, sort: "desc" }
|
|
124
124
|
]), C = i.useMemo(() => kt(o.start, o.end), [o]), u = [
|
|
125
125
|
{
|
|
@@ -127,7 +127,7 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
127
127
|
flex: 1,
|
|
128
128
|
headerName: "Category",
|
|
129
129
|
minWidth: 175,
|
|
130
|
-
renderHeader:
|
|
130
|
+
renderHeader: be,
|
|
131
131
|
renderCell: Rt,
|
|
132
132
|
sortable: !0,
|
|
133
133
|
type: "string"
|
|
@@ -138,39 +138,39 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
138
138
|
flex: 1,
|
|
139
139
|
headerName: r,
|
|
140
140
|
minWidth: 100,
|
|
141
|
-
renderHeader:
|
|
141
|
+
renderHeader: be,
|
|
142
142
|
renderCell: Mt,
|
|
143
143
|
align: "right",
|
|
144
144
|
headerAlign: "right",
|
|
145
145
|
sortable: !0,
|
|
146
146
|
hideSortIcons: !1,
|
|
147
147
|
type: "number",
|
|
148
|
-
sortComparator:
|
|
148
|
+
sortComparator: Ke
|
|
149
149
|
})
|
|
150
150
|
)
|
|
151
151
|
], b = i.useMemo(() => {
|
|
152
152
|
const r = n.filter(
|
|
153
|
-
(p) => !
|
|
154
|
-
),
|
|
153
|
+
(p) => !Ue(p) && !Xe(p)
|
|
154
|
+
), T = (t ? r.filter(
|
|
155
155
|
(p) => p.category_guid === t || p.top_level_category_guid === t
|
|
156
156
|
) : r).reduce(
|
|
157
157
|
(p, E) => {
|
|
158
|
-
const { category_guid:
|
|
158
|
+
const { category_guid: w, top_level_category_guid: I, month: k, total: D, year: N } = E, x = t ? w : I;
|
|
159
159
|
p[x] || (p[x] = {
|
|
160
160
|
id: x,
|
|
161
161
|
category: x,
|
|
162
|
-
category_guid:
|
|
162
|
+
category_guid: w,
|
|
163
163
|
top_level_category_guid: I
|
|
164
164
|
});
|
|
165
|
-
const L =
|
|
166
|
-
return p[x][L] || (p[x][L] = 0), p[x][L] = p[x][L] + Math.abs(
|
|
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
|
-
return Object.values(
|
|
170
|
+
return Object.values(T);
|
|
171
171
|
}, [n, t]);
|
|
172
172
|
return /* @__PURE__ */ e(O, { sx: { height: a, width: "100%", overflowX: "auto", boxShadow: "none", ...h }, children: /* @__PURE__ */ e(
|
|
173
|
-
|
|
173
|
+
st,
|
|
174
174
|
{
|
|
175
175
|
columns: u,
|
|
176
176
|
disableColumnFilter: !0,
|
|
@@ -178,13 +178,13 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
178
178
|
hideFooter: !0,
|
|
179
179
|
initialState: { sorting: { sortModel: d } },
|
|
180
180
|
onRowClick: (r) => {
|
|
181
|
-
s?.(r.row.category), l(
|
|
181
|
+
s?.(r.row.category), l(y.TRENDS_CLICK_LIST_ITEM, {
|
|
182
182
|
...A,
|
|
183
|
-
listItem:
|
|
183
|
+
listItem: Me[r.row.category]
|
|
184
184
|
});
|
|
185
185
|
},
|
|
186
186
|
onSortModelChange: (r) => {
|
|
187
|
-
m(r), l(
|
|
187
|
+
m(r), l(y.TRENDS_CLICK_TABLE_SORT, A);
|
|
188
188
|
},
|
|
189
189
|
rows: b,
|
|
190
190
|
slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
|
|
@@ -200,7 +200,7 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
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 } =
|
|
203
|
+
const { onEvent: a } = H(), { selectedAccountGuids: h } = P(), { common: l } = R(), { setFilter: c, sortedTransactions: d } = re(), [m, C] = i.useState(""), u = i.useMemo(
|
|
204
204
|
() => d.find((r) => r.guid === m),
|
|
205
205
|
[m, d]
|
|
206
206
|
);
|
|
@@ -211,7 +211,7 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
211
211
|
custom: (r) => n === "" || n === r.category_guid || n === r.top_level_category_guid,
|
|
212
212
|
showSplits: !!n
|
|
213
213
|
});
|
|
214
|
-
}, [h, n, o]), i.useEffect(() => a(
|
|
214
|
+
}, [h, n, o]), i.useEffect(() => a(y.TRENDS_VIEW_TRANSACTIONS), []);
|
|
215
215
|
const b = () => {
|
|
216
216
|
C(""), s();
|
|
217
217
|
};
|
|
@@ -223,68 +223,68 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
223
223
|
onClose: b,
|
|
224
224
|
title: Ht.title,
|
|
225
225
|
children: [
|
|
226
|
-
u && /* @__PURE__ */ e(
|
|
227
|
-
!u && /* @__PURE__ */ e(
|
|
226
|
+
u && /* @__PURE__ */ e(Re, { transaction: u }),
|
|
227
|
+
!u && /* @__PURE__ */ e(ke, { onClick: C })
|
|
228
228
|
]
|
|
229
229
|
}
|
|
230
230
|
);
|
|
231
231
|
}, Wt = M(Nt), Ot = ({ onBackClick: n, sx: o }) => {
|
|
232
|
-
const { onEvent: t } = H(), { isDesktop: s, isTablet: a, isMobile: h } = K(), { visibleAccounts: l } =
|
|
232
|
+
const { onEvent: t } = H(), { isDesktop: s, isTablet: a, isMobile: h } = K(), { visibleAccounts: l } = ae(), { loadMonthlyCategoryTotals: c, monthlyCategoryTotals: d, getCategoryName: m } = F(), { sortedTransactions: C } = re(), { 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, ie] = i.useState(window.innerHeight), ee = z - (h ? 315 : 345);
|
|
233
233
|
i.useEffect(() => {
|
|
234
|
-
const
|
|
235
|
-
return window.addEventListener("resize",
|
|
234
|
+
const S = () => ie(window.innerHeight);
|
|
235
|
+
return window.addEventListener("resize", S), () => window.removeEventListener("resize", S);
|
|
236
236
|
}, []), i.useEffect(() => {
|
|
237
237
|
p(l);
|
|
238
238
|
}, [l]), i.useEffect(() => {
|
|
239
239
|
g && c(
|
|
240
|
-
|
|
240
|
+
T,
|
|
241
241
|
u.start,
|
|
242
242
|
u.end
|
|
243
243
|
).finally(() => {
|
|
244
244
|
I(!0);
|
|
245
245
|
});
|
|
246
|
-
}, [g,
|
|
247
|
-
const
|
|
248
|
-
if (!
|
|
249
|
-
const
|
|
246
|
+
}, [g, T, u]);
|
|
247
|
+
const te = i.useMemo(() => {
|
|
248
|
+
if (!w) return { stackedDatasets: [], unstackedDatasets: [] };
|
|
249
|
+
const S = $e(
|
|
250
250
|
d,
|
|
251
251
|
u.start,
|
|
252
252
|
u.end
|
|
253
|
-
), W = L.length ?
|
|
253
|
+
), W = L.length ? S.filter(
|
|
254
254
|
(G) => G.top_level_category_guid === L || G.category_guid === L
|
|
255
|
-
) :
|
|
255
|
+
) : Ze(S);
|
|
256
256
|
return {
|
|
257
|
-
stackedDatasets: W.filter(
|
|
258
|
-
unstackedDatasets: W.filter(
|
|
257
|
+
stackedDatasets: W.filter(Qe),
|
|
258
|
+
unstackedDatasets: W.filter(qe)
|
|
259
259
|
};
|
|
260
|
-
}, [d, L, u]),
|
|
261
|
-
x(W ?? N), t(
|
|
262
|
-
},
|
|
263
|
-
const W =
|
|
264
|
-
b({ start: W, end: G }), t(
|
|
260
|
+
}, [d, L, u]), ne = (S, W) => {
|
|
261
|
+
x(W ?? N), t(y.TRENDS_CLICK_TOGGLE_VIEW);
|
|
262
|
+
}, oe = (S) => {
|
|
263
|
+
const W = Ie(S?.[0], 1), G = S?.[1], ge = Ce(G, W);
|
|
264
|
+
b({ start: W, end: G }), t(y.TRENDS_CLICK_TIME_WINDOW, {
|
|
265
265
|
time_period: ge + "M"
|
|
266
266
|
});
|
|
267
|
-
},
|
|
268
|
-
t(
|
|
269
|
-
},
|
|
270
|
-
$(
|
|
271
|
-
}, de = (
|
|
272
|
-
$(
|
|
273
|
-
}, he = (
|
|
274
|
-
t(
|
|
275
|
-
}, ue = (
|
|
276
|
-
t(
|
|
277
|
-
}, me = (
|
|
278
|
-
t(
|
|
267
|
+
}, ce = () => {
|
|
268
|
+
t(y.TRENDS_CLICK_FILTER);
|
|
269
|
+
}, le = (S) => {
|
|
270
|
+
$(S);
|
|
271
|
+
}, de = (S) => {
|
|
272
|
+
$(S), t(y.TRENDS_CLICK_LEGEND, { category: m(S) });
|
|
273
|
+
}, he = (S) => {
|
|
274
|
+
t(y.TRENDS_HOVER_LEGEND, { category: m(S) });
|
|
275
|
+
}, ue = (S) => {
|
|
276
|
+
t(y.TRENDS_HOVER_AREA, { category: S });
|
|
277
|
+
}, me = (S) => {
|
|
278
|
+
t(y.TRENDS_HOVER_POINT, { category: S });
|
|
279
279
|
};
|
|
280
|
-
return !r || !g || !
|
|
281
|
-
|
|
280
|
+
return !r || !g || !w ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ f(
|
|
281
|
+
Ae,
|
|
282
282
|
{
|
|
283
283
|
accountOptions: l,
|
|
284
|
-
calendarActions: { onRangeChanged:
|
|
284
|
+
calendarActions: { onRangeChanged: oe },
|
|
285
285
|
dateRange: u,
|
|
286
286
|
dateRangeVariant: "timeframebuttons",
|
|
287
|
-
onAccountsFilterClick:
|
|
287
|
+
onAccountsFilterClick: ce,
|
|
288
288
|
onBackClick: n,
|
|
289
289
|
sx: o,
|
|
290
290
|
title: E.title,
|
|
@@ -305,41 +305,41 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
305
305
|
sx: { pb: h ? 12 : 24, pt: h ? 24 : 48 },
|
|
306
306
|
children: [
|
|
307
307
|
/* @__PURE__ */ e(
|
|
308
|
-
|
|
308
|
+
Oe,
|
|
309
309
|
{
|
|
310
310
|
selectedCategoryGuid: L,
|
|
311
311
|
selectedDateRange: u
|
|
312
312
|
}
|
|
313
313
|
),
|
|
314
|
-
/* @__PURE__ */ e(
|
|
314
|
+
/* @__PURE__ */ e(We, { onTabChange: ne, selectedTab: N })
|
|
315
315
|
]
|
|
316
316
|
}
|
|
317
317
|
),
|
|
318
318
|
/* @__PURE__ */ f(_, { alignItems: "center", flexDirection: "row", width: "100%", children: [
|
|
319
319
|
/* @__PURE__ */ e(O, { flexGrow: 1, children: L && /* @__PURE__ */ f(pe, { onClick: () => $(""), sx: { p: 0, pr: 5 }, children: [
|
|
320
|
-
/* @__PURE__ */ e(
|
|
320
|
+
/* @__PURE__ */ e(se, { name: "arrow_back" }),
|
|
321
321
|
E.all_categories
|
|
322
322
|
] }) }),
|
|
323
|
-
/* @__PURE__ */ e(pe, { onClick: () =>
|
|
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
|
-
|
|
327
|
+
je,
|
|
328
328
|
{
|
|
329
|
-
availableHeight:
|
|
329
|
+
availableHeight: ee,
|
|
330
330
|
onClickLegend: de,
|
|
331
331
|
onHoverArea: ue,
|
|
332
332
|
onHoverLegend: he,
|
|
333
333
|
onHoverPoint: me,
|
|
334
|
-
stackedDatasets:
|
|
335
|
-
unstackedDatasets:
|
|
334
|
+
stackedDatasets: te.stackedDatasets,
|
|
335
|
+
unstackedDatasets: te.unstackedDatasets
|
|
336
336
|
}
|
|
337
337
|
),
|
|
338
338
|
N === "Table" && /* @__PURE__ */ e(
|
|
339
|
-
|
|
339
|
+
Ve,
|
|
340
340
|
{
|
|
341
341
|
monthlyCategoryTotals: d,
|
|
342
|
-
onClickRow:
|
|
342
|
+
onClickRow: le,
|
|
343
343
|
selectedCategory: L,
|
|
344
344
|
selectedDateRange: u
|
|
345
345
|
}
|
|
@@ -354,16 +354,16 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
354
354
|
categoryGuid: L,
|
|
355
355
|
dateRange: u,
|
|
356
356
|
isOpen: k,
|
|
357
|
-
onClose: () =>
|
|
357
|
+
onClose: () => D(!1)
|
|
358
358
|
}
|
|
359
359
|
)
|
|
360
360
|
]
|
|
361
361
|
}
|
|
362
362
|
);
|
|
363
363
|
}, Un = M(Ot), Vt = () => {
|
|
364
|
-
const n =
|
|
364
|
+
const n = He(), { monthlyCategoryTotals: o } = F(), { trends: t } = R(), s = Je(o);
|
|
365
365
|
return /* @__PURE__ */ e(
|
|
366
|
-
|
|
366
|
+
ye,
|
|
367
367
|
{
|
|
368
368
|
baseline: "min",
|
|
369
369
|
colors: [n.palette.primary.main],
|
|
@@ -379,23 +379,23 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
379
379
|
}
|
|
380
380
|
);
|
|
381
381
|
}, Gt = M(Vt), Bt = ({ onPrimaryCtaClick: n, sx: o }) => {
|
|
382
|
-
const { visibleAccounts: t } =
|
|
382
|
+
const { visibleAccounts: t } = ae(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: a } = F(), { isInitialized: h } = ve(), { trends: l } = R(), { isCopyLoaded: c, selectedAccounts: d, setSelectedAccounts: m } = P();
|
|
383
383
|
return i.useEffect(() => {
|
|
384
384
|
m(t);
|
|
385
385
|
}, [t]), i.useEffect(() => {
|
|
386
386
|
h && s(d).finally();
|
|
387
|
-
}, [h, d]), !c || !h ? /* @__PURE__ */ e(
|
|
388
|
-
|
|
387
|
+
}, [h, d]), !c || !h ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
|
|
388
|
+
ct,
|
|
389
389
|
{
|
|
390
390
|
onPrimaryCtaClick: n,
|
|
391
391
|
primaryCtaLabel: l.primary_cta,
|
|
392
392
|
subTitle: l.sub_title,
|
|
393
393
|
sx: o,
|
|
394
394
|
title: l.mini_title,
|
|
395
|
-
children: a ? /* @__PURE__ */ e(Gt, {}) : /* @__PURE__ */ e(
|
|
395
|
+
children: a ? /* @__PURE__ */ e(Gt, {}) : /* @__PURE__ */ e(Q, {})
|
|
396
396
|
}
|
|
397
397
|
);
|
|
398
|
-
}, Xn = M(Bt), zt = 70,
|
|
398
|
+
}, Xn = M(Bt), zt = 70, Se = ({
|
|
399
399
|
title: n,
|
|
400
400
|
totalAmount: o,
|
|
401
401
|
transactionType: t,
|
|
@@ -403,10 +403,10 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
403
403
|
secondaryLabel: a,
|
|
404
404
|
shouldDisplayPercentage: h
|
|
405
405
|
}) => {
|
|
406
|
-
const { availableWidth: l } =
|
|
406
|
+
const { availableWidth: l } = nt(), c = i.useRef(null), d = i.useRef(null), m = pt(Number(Math.abs(s)), {
|
|
407
407
|
style: "percent",
|
|
408
408
|
minimumIntegerDigits: 1
|
|
409
|
-
}), C = l === 288 &&
|
|
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;
|
|
410
410
|
return /* @__PURE__ */ f(
|
|
411
411
|
_,
|
|
412
412
|
{
|
|
@@ -429,11 +429,11 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
429
429
|
justifyContent: "space-between"
|
|
430
430
|
},
|
|
431
431
|
children: [
|
|
432
|
-
/* @__PURE__ */ e(
|
|
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(
|
|
434
|
+
u ? /* @__PURE__ */ e(dt, { size: 20, sx: { color: b } }) : /* @__PURE__ */ e(ht, { size: 20, sx: { color: r } }),
|
|
435
435
|
/* @__PURE__ */ e(
|
|
436
|
-
|
|
436
|
+
Y,
|
|
437
437
|
{
|
|
438
438
|
sx: {
|
|
439
439
|
color: u ? b : r,
|
|
@@ -462,11 +462,11 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
462
462
|
{
|
|
463
463
|
ref: c,
|
|
464
464
|
sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
|
|
465
|
-
children: /* @__PURE__ */ e(
|
|
465
|
+
children: /* @__PURE__ */ e(De, { children: C })
|
|
466
466
|
}
|
|
467
467
|
),
|
|
468
468
|
h && l >= 450 && !p && /* @__PURE__ */ e(
|
|
469
|
-
|
|
469
|
+
Y,
|
|
470
470
|
{
|
|
471
471
|
color: u ? b : r,
|
|
472
472
|
variant: "caption",
|
|
@@ -482,39 +482,39 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
482
482
|
}, Ft = M(() => {
|
|
483
483
|
const { trends: n } = R();
|
|
484
484
|
return /* @__PURE__ */ f(_, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
|
|
485
|
-
/* @__PURE__ */ e(
|
|
485
|
+
/* @__PURE__ */ e(ut, { size: 32 }),
|
|
486
486
|
/* @__PURE__ */ f(_, { children: [
|
|
487
|
-
/* @__PURE__ */ e(
|
|
488
|
-
/* @__PURE__ */ e(
|
|
487
|
+
/* @__PURE__ */ e(Y, { fontWeight: 600, variant: "body1", children: n.zero_state_content_header }),
|
|
488
|
+
/* @__PURE__ */ e(Y, { color: "text.secondary", variant: "subtitle2", children: n.zero_state_content_description })
|
|
489
489
|
] })
|
|
490
490
|
] });
|
|
491
491
|
}), Zn = M(({ onCtaClick: n }) => {
|
|
492
|
-
const { visibleAccounts: o } =
|
|
493
|
-
start:
|
|
492
|
+
const { visibleAccounts: o } = ae(), { onEvent: t } = H(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: h } = F(), l = {
|
|
493
|
+
start: lt(/* @__PURE__ */ new Date(), 1),
|
|
494
494
|
end: /* @__PURE__ */ new Date()
|
|
495
495
|
}, { trends: c } = R(), { selectedAccounts: d, setSelectedAccounts: m, isInitialized: C } = P();
|
|
496
496
|
i.useEffect(() => {
|
|
497
497
|
m(o);
|
|
498
498
|
}, [o]), i.useEffect(() => {
|
|
499
499
|
C && a(d, l.start).then(() => {
|
|
500
|
-
t(
|
|
500
|
+
t(y.TRENDS_LOAD_WIDGET, {
|
|
501
501
|
state: o?.length ? "default" : "zeroState"
|
|
502
502
|
});
|
|
503
503
|
});
|
|
504
504
|
}, [C, d]);
|
|
505
505
|
const { spendingData: u, incomeData: b } = i.useMemo(
|
|
506
506
|
() => ({
|
|
507
|
-
spendingData:
|
|
508
|
-
incomeData:
|
|
507
|
+
spendingData: Le(s, l),
|
|
508
|
+
incomeData: xe(s, l)
|
|
509
509
|
}),
|
|
510
510
|
[s, l]
|
|
511
|
-
), [r, g] = u, [
|
|
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
|
-
I ?
|
|
513
|
+
I ? y.TRENDS_CLICK_GET_STARTED : y.TRENDS_CLICK_VIEW_MORE
|
|
514
514
|
), n();
|
|
515
515
|
};
|
|
516
|
-
return !h || !C ? /* @__PURE__ */ e(
|
|
517
|
-
|
|
516
|
+
return !h || !C ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
|
|
517
|
+
Ct,
|
|
518
518
|
{
|
|
519
519
|
className: "mx-trends-microwidget",
|
|
520
520
|
ctaLabel: c.micro_primary_cta_label,
|
|
@@ -531,7 +531,7 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
531
531
|
},
|
|
532
532
|
children: [
|
|
533
533
|
/* @__PURE__ */ e(
|
|
534
|
-
|
|
534
|
+
Se,
|
|
535
535
|
{
|
|
536
536
|
percentage: E,
|
|
537
537
|
secondaryLabel: c.micro_secondary_label,
|
|
@@ -542,11 +542,11 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
542
542
|
}
|
|
543
543
|
),
|
|
544
544
|
/* @__PURE__ */ e(
|
|
545
|
-
|
|
545
|
+
Se,
|
|
546
546
|
{
|
|
547
|
-
percentage:
|
|
547
|
+
percentage: w,
|
|
548
548
|
secondaryLabel: c.micro_secondary_label,
|
|
549
|
-
shouldDisplayPercentage: p.y !== 0 &&
|
|
549
|
+
shouldDisplayPercentage: p.y !== 0 && T.y !== 0,
|
|
550
550
|
title: c.income_label,
|
|
551
551
|
totalAmount: p.y,
|
|
552
552
|
transactionType: "income"
|
|
@@ -559,15 +559,15 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
559
559
|
);
|
|
560
560
|
}), Pt = M(
|
|
561
561
|
({ isExpanded: n, onClick: o }) => {
|
|
562
|
-
const t =
|
|
563
|
-
return /* @__PURE__ */ e(
|
|
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(
|
|
564
564
|
_,
|
|
565
565
|
{
|
|
566
566
|
sx: { color: t.palette.primary.main, flexDirection: "row", alignItems: "center" },
|
|
567
567
|
children: [
|
|
568
|
-
/* @__PURE__ */ e(
|
|
569
|
-
/* @__PURE__ */ e(
|
|
570
|
-
|
|
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,
|
|
571
571
|
{
|
|
572
572
|
sx: {
|
|
573
573
|
transition: "transform 0.3s ease-in-out",
|
|
@@ -579,7 +579,7 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
579
579
|
}
|
|
580
580
|
) }) });
|
|
581
581
|
}
|
|
582
|
-
),
|
|
582
|
+
), we = M(
|
|
583
583
|
({
|
|
584
584
|
totalAmount: n,
|
|
585
585
|
guid: o,
|
|
@@ -590,59 +590,59 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
590
590
|
showDivider: l = !0
|
|
591
591
|
}) => {
|
|
592
592
|
const { trends: c } = R(), { onEvent: d } = H(), m = `${s.length} ${s.length === 1 ? c.transaction : c.transactions}`, C = () => {
|
|
593
|
-
a?.(), d(
|
|
593
|
+
a?.(), d(y.TRENDS_CLICK_LIST_ITEM, {
|
|
594
594
|
...A,
|
|
595
595
|
listItem: t
|
|
596
596
|
});
|
|
597
597
|
};
|
|
598
598
|
return /* @__PURE__ */ f(i.Fragment, { children: [
|
|
599
599
|
/* @__PURE__ */ e(
|
|
600
|
-
|
|
600
|
+
Ee,
|
|
601
601
|
{
|
|
602
|
-
leftIcon: o ? /* @__PURE__ */ e(
|
|
602
|
+
leftIcon: o ? /* @__PURE__ */ e(Te, { categoryGuid: o }) : void 0,
|
|
603
603
|
onClick: C,
|
|
604
|
-
rightContent:
|
|
605
|
-
rightIcon: a ? /* @__PURE__ */ e(
|
|
604
|
+
rightContent: U(Math.abs(n), "0,0.00"),
|
|
605
|
+
rightIcon: a ? /* @__PURE__ */ e(Pe, {}) : void 0,
|
|
606
606
|
subtitle: m,
|
|
607
607
|
title: t
|
|
608
608
|
}
|
|
609
609
|
),
|
|
610
|
-
l && /* @__PURE__ */ e(
|
|
610
|
+
l && /* @__PURE__ */ e(wt, { sx: { ml: h ? 24 : 68 } })
|
|
611
611
|
] }, o);
|
|
612
612
|
}
|
|
613
613
|
), Kt = M(
|
|
614
614
|
({ availableHeight: n = 0, onCategoryClick: o }) => {
|
|
615
|
-
const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: a } =
|
|
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;
|
|
616
616
|
i.useEffect(() => {
|
|
617
|
-
const g = Math.floor(n / 64) - 1,
|
|
618
|
-
g !== s.length && (a(u ? Math.max(g, 5) : 5), C(g >=
|
|
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(!m), d(
|
|
621
|
+
C(!m), d(y.TRENDS_CLICK_VIEW_MORE, {
|
|
622
622
|
...A
|
|
623
623
|
});
|
|
624
624
|
}, r = s.length + (m ? t.length : 0);
|
|
625
625
|
return /* @__PURE__ */ e(_, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ f(Tt, { children: [
|
|
626
|
-
/* @__PURE__ */ e(_, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(
|
|
627
|
-
s.map((g,
|
|
628
|
-
|
|
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
|
+
we,
|
|
629
629
|
{
|
|
630
630
|
...g,
|
|
631
|
-
isLastItem:
|
|
631
|
+
isLastItem: T === r - 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
|
-
|
|
638
|
+
ft,
|
|
639
639
|
{
|
|
640
640
|
in: m,
|
|
641
641
|
sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
|
|
642
|
-
children: t.map((g,
|
|
643
|
-
const p = s.length +
|
|
642
|
+
children: t.map((g, T) => {
|
|
643
|
+
const p = s.length + T;
|
|
644
644
|
return /* @__PURE__ */ e(
|
|
645
|
-
|
|
645
|
+
we,
|
|
646
646
|
{
|
|
647
647
|
...g,
|
|
648
648
|
isLastItem: p === r - 1,
|
|
@@ -692,18 +692,18 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
692
692
|
"WeeklyNoSpendDays",
|
|
693
693
|
"WeeklySmallPurchasesSummary"
|
|
694
694
|
], jt = ({ onInsightCardClick: n }) => {
|
|
695
|
-
const o =
|
|
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;
|
|
696
696
|
i.useEffect(() => {
|
|
697
697
|
m && l.loadBeats().finally(() => u(!0));
|
|
698
698
|
}, [m]);
|
|
699
|
-
const
|
|
700
|
-
n?.(
|
|
701
|
-
},
|
|
702
|
-
return /* @__PURE__ */ e(
|
|
703
|
-
|
|
699
|
+
const T = i.useMemo(() => C ? l.getFilteredBeats({ templates: $t }) : [], [C]), p = () => null, E = (D) => {
|
|
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,
|
|
704
704
|
{
|
|
705
705
|
areBeatsLoading: l.isLoading,
|
|
706
|
-
beats:
|
|
706
|
+
beats: T,
|
|
707
707
|
endpoint: c,
|
|
708
708
|
logOutUser: p,
|
|
709
709
|
onCardClick: E,
|
|
@@ -723,9 +723,9 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
723
723
|
}, Yt = M(jt), Ut = M(({ chartLabel: n, chartColor: o }) => {
|
|
724
724
|
const { onEvent: t } = H(), {
|
|
725
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,
|
|
729
729
|
{
|
|
730
730
|
baseline: "min",
|
|
731
731
|
colors: [o],
|
|
@@ -738,7 +738,7 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
738
738
|
stroke: o
|
|
739
739
|
}),
|
|
740
740
|
onItemClick: () => {
|
|
741
|
-
t(
|
|
741
|
+
t(y.TRENDS_CLICK_CHART, A);
|
|
742
742
|
},
|
|
743
743
|
showArea: !0,
|
|
744
744
|
showAverage: !0,
|
|
@@ -754,14 +754,14 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
754
754
|
}
|
|
755
755
|
) });
|
|
756
756
|
}), Xt = M(({ onClose: n }) => {
|
|
757
|
-
const o =
|
|
757
|
+
const o = Ne(), { onEvent: t } = H(), { common: s, trends: a } = R(), { selectedCategoryData: h, selectedDateRangeMonthRange: l } = q(), { sortedTransactions: c } = re(), [d, 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,
|
|
761
|
-
() => c.find((
|
|
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
762
|
[d, c]
|
|
763
|
-
), I = (
|
|
764
|
-
n?.(), t(
|
|
763
|
+
), I = (D) => D.category_guid === C || D.top_level_category_guid === C, k = () => {
|
|
764
|
+
n?.(), t(y.TRENDS_CLICK_BACK, A);
|
|
765
765
|
};
|
|
766
766
|
return /* @__PURE__ */ f(
|
|
767
767
|
fe,
|
|
@@ -773,24 +773,24 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
773
773
|
title: g,
|
|
774
774
|
children: [
|
|
775
775
|
/* @__PURE__ */ f(_, { sx: { alignItems: "center", height: "100%" }, children: [
|
|
776
|
-
/* @__PURE__ */ f(
|
|
776
|
+
/* @__PURE__ */ f(Et, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
|
|
777
777
|
/* @__PURE__ */ e(
|
|
778
|
-
|
|
778
|
+
Ee,
|
|
779
779
|
{
|
|
780
|
-
leftIcon: /* @__PURE__ */ e(
|
|
781
|
-
rightContent:
|
|
780
|
+
leftIcon: /* @__PURE__ */ e(Te, { categoryGuid: C }),
|
|
781
|
+
rightContent: U(Math.abs(r), "0,0.00"),
|
|
782
782
|
subtitle: l,
|
|
783
783
|
title: u
|
|
784
784
|
}
|
|
785
785
|
),
|
|
786
|
-
/* @__PURE__ */ e(Ut, { chartColor:
|
|
786
|
+
/* @__PURE__ */ e(Ut, { chartColor: T, chartLabel: p }),
|
|
787
787
|
/* @__PURE__ */ f(_, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
|
|
788
|
-
/* @__PURE__ */ e(
|
|
789
|
-
/* @__PURE__ */ e(
|
|
788
|
+
/* @__PURE__ */ e(X, { bold: !0, variant: "body1", children: E }),
|
|
789
|
+
/* @__PURE__ */ e(xt, { filter: I })
|
|
790
790
|
] })
|
|
791
791
|
] }),
|
|
792
792
|
/* @__PURE__ */ e(
|
|
793
|
-
|
|
793
|
+
ke,
|
|
794
794
|
{
|
|
795
795
|
bgcolor: "transparent",
|
|
796
796
|
filter: I,
|
|
@@ -803,17 +803,17 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
803
803
|
fe,
|
|
804
804
|
{
|
|
805
805
|
ariaLabelClose: s.close_aria,
|
|
806
|
-
isOpen: !!
|
|
806
|
+
isOpen: !!w,
|
|
807
807
|
onClose: () => m(""),
|
|
808
808
|
title: a.transaction,
|
|
809
|
-
children:
|
|
809
|
+
children: w && /* @__PURE__ */ e(Re, { transaction: w })
|
|
810
810
|
}
|
|
811
811
|
)
|
|
812
812
|
]
|
|
813
813
|
}
|
|
814
814
|
);
|
|
815
815
|
}), Zt = (n, o) => {
|
|
816
|
-
const t =
|
|
816
|
+
const t = xe(n, o), s = Le(n, o);
|
|
817
817
|
return [t, s].filter((a) => a.length > 0);
|
|
818
818
|
}, Qt = (n, o) => {
|
|
819
819
|
const [t, s] = n, a = t, h = s ?? t, l = [];
|
|
@@ -832,12 +832,12 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
832
832
|
selectedDateRange: t,
|
|
833
833
|
totals: s
|
|
834
834
|
}) => {
|
|
835
|
-
const a =
|
|
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;
|
|
836
836
|
return i.useEffect(() => {
|
|
837
|
-
const
|
|
838
|
-
|
|
837
|
+
const D = Math.max(n - w, o);
|
|
838
|
+
T(D);
|
|
839
839
|
}, [n]), /* @__PURE__ */ e(
|
|
840
|
-
|
|
840
|
+
ye,
|
|
841
841
|
{
|
|
842
842
|
baseline: "min",
|
|
843
843
|
colors: u,
|
|
@@ -846,7 +846,7 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
846
846
|
height: I,
|
|
847
847
|
labels: r,
|
|
848
848
|
onItemClick: () => {
|
|
849
|
-
h(
|
|
849
|
+
h(y.TRENDS_CLICK_CHART, A);
|
|
850
850
|
},
|
|
851
851
|
showArea: !0,
|
|
852
852
|
showAxisHighlight: !0,
|
|
@@ -860,32 +860,32 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
860
860
|
}
|
|
861
861
|
);
|
|
862
862
|
}, Jt = M(qt), en = ({ onBackClick: n, onInsightCardClick: o, sx: t }) => {
|
|
863
|
-
const { onEvent: s } = H(), { config: a } =
|
|
863
|
+
const { onEvent: s } = H(), { config: a } = ot(), { isLargeDesktop: h, isDesktop: l, isMobile: c } = K(), { visibleAccounts: d } = ae(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: C, monthlyCategoryTotals: u } = F(), { setFilter: b } = re(), { selectedDateRange: r, setSelectedCategoryData: g, setSelectedDateRange: T } = q(), {
|
|
864
864
|
isCopyLoaded: p,
|
|
865
865
|
isInitialized: E,
|
|
866
|
-
selectedAccounts:
|
|
866
|
+
selectedAccounts: w,
|
|
867
867
|
selectedAccountGuids: I,
|
|
868
868
|
setSelectedAccounts: k
|
|
869
|
-
} = P(), { trends:
|
|
869
|
+
} = P(), { trends: D } = R(), N = Ye(), x = l || h, [L, $] = i.useState(!1), [z, ie] = i.useState("Chart"), [J, ee] = i.useState(""), [te, ne] = i.useState(!1), [oe, ce] = i.useState(window.innerHeight), le = oe - 208, de = oe - (N ? 494 : 266);
|
|
870
870
|
i.useEffect(() => {
|
|
871
|
-
const v = () =>
|
|
871
|
+
const v = () => ce(window.innerHeight);
|
|
872
872
|
return window.addEventListener("resize", v), () => window.removeEventListener("resize", v);
|
|
873
873
|
}, []), i.useEffect(() => {
|
|
874
874
|
k(d);
|
|
875
875
|
}, [d]), i.useEffect(() => {
|
|
876
|
-
E && m(
|
|
876
|
+
E && m(w, r.start, r.end).then(() => {
|
|
877
877
|
C(
|
|
878
|
-
|
|
878
|
+
w,
|
|
879
879
|
r.start,
|
|
880
880
|
r.end
|
|
881
881
|
);
|
|
882
882
|
}).finally(() => {
|
|
883
|
-
$(!0), s(
|
|
883
|
+
$(!0), s(y.TRENDS_LOAD_WIDGET, {
|
|
884
884
|
...A,
|
|
885
885
|
time_period: `${Ce(r.end, r.start)}M`
|
|
886
886
|
});
|
|
887
887
|
});
|
|
888
|
-
}, [E,
|
|
888
|
+
}, [E, w, r]), i.useEffect(() => {
|
|
889
889
|
if (u.length !== 0) {
|
|
890
890
|
const v = {
|
|
891
891
|
accounts: I,
|
|
@@ -894,74 +894,51 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
894
894
|
b({
|
|
895
895
|
...v,
|
|
896
896
|
custom: (V) => !!u.find(
|
|
897
|
-
(
|
|
897
|
+
(j) => j.top_level_category_guid === V.top_level_category_guid || j.category_guid === V.category_guid
|
|
898
898
|
)
|
|
899
899
|
});
|
|
900
900
|
}
|
|
901
901
|
}, [u]);
|
|
902
902
|
const he = (v) => {
|
|
903
|
-
g(v),
|
|
903
|
+
g(v), ne(!0);
|
|
904
904
|
}, ue = () => {
|
|
905
|
-
g(null),
|
|
905
|
+
g(null), ne(!1);
|
|
906
906
|
}, me = (v, V) => {
|
|
907
|
-
|
|
907
|
+
ie(V ?? z), s(y.TRENDS_CLICK_TOGGLE_VIEW, {
|
|
908
908
|
...A,
|
|
909
909
|
toggleView: V
|
|
910
910
|
});
|
|
911
|
-
},
|
|
912
|
-
const V =
|
|
913
|
-
|
|
911
|
+
}, S = (v) => {
|
|
912
|
+
const V = Ie(v?.[0], 1), j = v?.[1], ze = Ce(j, V);
|
|
913
|
+
T({ start: V, end: j }), s(y.TRENDS_CLICK_TIME_WINDOW, {
|
|
914
914
|
...A,
|
|
915
|
-
time_period:
|
|
915
|
+
time_period: ze + "M"
|
|
916
916
|
});
|
|
917
917
|
}, W = (v) => {
|
|
918
|
-
s(
|
|
918
|
+
s(y.TRENDS_CLICK_FILTER, {
|
|
919
919
|
...A,
|
|
920
920
|
filterValue: v
|
|
921
921
|
});
|
|
922
922
|
}, G = (v) => {
|
|
923
|
-
|
|
923
|
+
ee(v);
|
|
924
924
|
}, ge = () => {
|
|
925
|
-
|
|
926
|
-
}
|
|
927
|
-
|
|
928
|
-
|
|
925
|
+
ee(""), s(y.TRENDS_CLICK_ALL_CATEGORIES, A);
|
|
926
|
+
};
|
|
927
|
+
if (!p || !L) return /* @__PURE__ */ e(Q, {});
|
|
928
|
+
const Ge = a.show_connections_widget_in_master ? "buttons" : "no-buttons", Be = L && d.length === 0;
|
|
929
|
+
return /* @__PURE__ */ f(
|
|
930
|
+
Ae,
|
|
929
931
|
{
|
|
930
932
|
accountOptions: d,
|
|
931
|
-
calendarActions: { onRangeChanged:
|
|
933
|
+
calendarActions: { onRangeChanged: S },
|
|
932
934
|
dateRange: r,
|
|
933
935
|
dateRangeVariant: c ? "timeframetabs" : "timeframebuttons",
|
|
934
936
|
onAccountsFilterClick: W,
|
|
935
937
|
onBackClick: n,
|
|
936
938
|
sx: t,
|
|
937
|
-
title:
|
|
939
|
+
title: D.title,
|
|
938
940
|
children: [
|
|
939
|
-
/* @__PURE__ */
|
|
940
|
-
we,
|
|
941
|
-
{
|
|
942
|
-
header: S.zero_state_content_header,
|
|
943
|
-
icon: "",
|
|
944
|
-
onClick: () => {
|
|
945
|
-
},
|
|
946
|
-
primaryButton: S.empty_state_primary,
|
|
947
|
-
subText: S.empty_state_sub_text,
|
|
948
|
-
sx: { height: j },
|
|
949
|
-
variant: _e
|
|
950
|
-
}
|
|
951
|
-
),
|
|
952
|
-
ze ? /* @__PURE__ */ e(
|
|
953
|
-
we,
|
|
954
|
-
{
|
|
955
|
-
header: S.zero_state_content_header,
|
|
956
|
-
icon: "",
|
|
957
|
-
onClick: () => {
|
|
958
|
-
},
|
|
959
|
-
primaryButton: S.empty_state_primary,
|
|
960
|
-
subText: S.empty_state_sub_text,
|
|
961
|
-
sx: { height: j },
|
|
962
|
-
variant: _e
|
|
963
|
-
}
|
|
964
|
-
) : /* @__PURE__ */ f(
|
|
941
|
+
/* @__PURE__ */ f(
|
|
965
942
|
_,
|
|
966
943
|
{
|
|
967
944
|
sx: {
|
|
@@ -976,26 +953,38 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
976
953
|
sx: { pb: c ? 12 : 24, pt: c ? 24 : 48 },
|
|
977
954
|
children: [
|
|
978
955
|
/* @__PURE__ */ e(
|
|
979
|
-
|
|
956
|
+
Oe,
|
|
980
957
|
{
|
|
981
|
-
selectedCategoryGuid:
|
|
958
|
+
selectedCategoryGuid: J,
|
|
982
959
|
selectedDateRange: r
|
|
983
960
|
}
|
|
984
961
|
),
|
|
985
|
-
/* @__PURE__ */ e(
|
|
962
|
+
/* @__PURE__ */ e(We, { onTabChange: me, selectedTab: z })
|
|
986
963
|
]
|
|
987
964
|
}
|
|
988
965
|
),
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
966
|
+
Be && /* @__PURE__ */ e(
|
|
967
|
+
vt,
|
|
968
|
+
{
|
|
969
|
+
header: "",
|
|
970
|
+
icon: "",
|
|
971
|
+
onClick: () => {
|
|
972
|
+
},
|
|
973
|
+
primaryButton: D.empty_state_primary,
|
|
974
|
+
subText: D.empty_state_sub_text,
|
|
975
|
+
variant: Ge
|
|
976
|
+
}
|
|
977
|
+
),
|
|
978
|
+
/* @__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: [
|
|
979
|
+
/* @__PURE__ */ e(se, { name: "arrow_back" }),
|
|
980
|
+
D.all_categories
|
|
992
981
|
] }) }) }),
|
|
993
982
|
/* @__PURE__ */ f(_, { flexDirection: x ? "row" : "column", gap: x ? 48 : 16, children: [
|
|
994
|
-
z === "Chart" && /* @__PURE__ */ f(
|
|
983
|
+
z === "Chart" && /* @__PURE__ */ f(Fe, { children: [
|
|
995
984
|
/* @__PURE__ */ e(O, { sx: { width: x ? "68%" : "100%" }, children: /* @__PURE__ */ e(
|
|
996
985
|
Jt,
|
|
997
986
|
{
|
|
998
|
-
availableHeight:
|
|
987
|
+
availableHeight: le,
|
|
999
988
|
minHeight: 450,
|
|
1000
989
|
selectedDateRange: r,
|
|
1001
990
|
totals: u
|
|
@@ -1013,20 +1002,20 @@ const Ve = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
1013
1002
|
] })
|
|
1014
1003
|
] }),
|
|
1015
1004
|
z === "Table" && /* @__PURE__ */ e(O, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
|
|
1016
|
-
|
|
1005
|
+
Ve,
|
|
1017
1006
|
{
|
|
1018
1007
|
height: "unset",
|
|
1019
1008
|
monthlyCategoryTotals: u,
|
|
1020
1009
|
onClickRow: G,
|
|
1021
|
-
selectedCategory:
|
|
1010
|
+
selectedCategory: J,
|
|
1022
1011
|
selectedDateRange: r
|
|
1023
1012
|
}
|
|
1024
1013
|
) })
|
|
1025
|
-
] })
|
|
1026
|
-
ne && /* @__PURE__ */ e(Xt, { onClose: ue })
|
|
1014
|
+
] })
|
|
1027
1015
|
]
|
|
1028
1016
|
}
|
|
1029
|
-
)
|
|
1017
|
+
),
|
|
1018
|
+
te && /* @__PURE__ */ e(Xt, { onClose: ue })
|
|
1030
1019
|
]
|
|
1031
1020
|
}
|
|
1032
1021
|
);
|