@mx-cartographer/experiences 7.0.23-alpha.al12 → 7.0.23-alpha.al14
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.
|
@@ -118,30 +118,30 @@ class N {
|
|
|
118
118
|
n,
|
|
119
119
|
"MD_EXCLUDE_EXTERNAL_ACCOUNTS"
|
|
120
120
|
);
|
|
121
|
-
for (const
|
|
122
|
-
if (c &&
|
|
123
|
-
const
|
|
124
|
-
if (!
|
|
121
|
+
for (const r of t) {
|
|
122
|
+
if (c && r.member_is_managed_by_user) continue;
|
|
123
|
+
const o = this.members.find((m) => m.guid === r.member_guid);
|
|
124
|
+
if (!o) continue;
|
|
125
125
|
let u = h.Connected;
|
|
126
|
-
p.includes(
|
|
126
|
+
p.includes(o.connection_status) ? u = h.Error : y.includes(o.connection_status) ? u = h.Processing : I.includes(o.connection_status) && (u = h.RequiresMfa);
|
|
127
127
|
const A = [
|
|
128
|
-
|
|
129
|
-
|
|
128
|
+
r.user_name || r.feed_name || "",
|
|
129
|
+
r.account_number ? `*${r.account_number}` : ""
|
|
130
130
|
].join(" ").trim();
|
|
131
131
|
e.push({
|
|
132
|
-
...
|
|
132
|
+
...r,
|
|
133
133
|
connectionStatus: u,
|
|
134
134
|
institutionName: A,
|
|
135
|
-
memberName:
|
|
136
|
-
}),
|
|
135
|
+
memberName: o.name
|
|
136
|
+
}), o.connectionStatus = u;
|
|
137
137
|
}
|
|
138
138
|
return e;
|
|
139
139
|
};
|
|
140
140
|
loadAccounts = async (t) => {
|
|
141
|
-
await this.loadMembers()
|
|
141
|
+
await this.loadMembers();
|
|
142
142
|
try {
|
|
143
143
|
const e = t || await this.api.getAccounts();
|
|
144
|
-
|
|
144
|
+
a(() => {
|
|
145
145
|
this.accounts = this.sortAccounts(this.augmentAccounts(e));
|
|
146
146
|
});
|
|
147
147
|
} catch (e) {
|
|
@@ -172,10 +172,10 @@ class N {
|
|
|
172
172
|
try {
|
|
173
173
|
const e = await this.api.mergeAccounts(t), n = e[Object.keys(e)[0]];
|
|
174
174
|
a(() => {
|
|
175
|
-
const c = this.accounts.findIndex((
|
|
175
|
+
const c = this.accounts.findIndex((o) => o.guid === t[1]);
|
|
176
176
|
this.accounts.splice(c, 1);
|
|
177
|
-
const
|
|
178
|
-
this.accounts.splice(
|
|
177
|
+
const r = this.accounts.findIndex((o) => o.guid === t[0]);
|
|
178
|
+
this.accounts.splice(r, 1, n);
|
|
179
179
|
});
|
|
180
180
|
} catch (e) {
|
|
181
181
|
console.error(`Error occurred while merging accounts: ${e}`);
|
|
@@ -217,13 +217,13 @@ class N {
|
|
|
217
217
|
};
|
|
218
218
|
updateAccountFiltering = async (t, e) => {
|
|
219
219
|
for (const n of t) {
|
|
220
|
-
const c = this.accounts.find((
|
|
220
|
+
const c = this.accounts.find((r) => r.guid === n);
|
|
221
221
|
if (c) {
|
|
222
222
|
c.is_excluded_from_accounts = e, c.is_excluded_from_budgets = e, c.is_excluded_from_cash_flow = e, c.is_excluded_from_debts = e, c.is_excluded_from_goals = e, c.is_excluded_from_investments = e, c.is_excluded_from_net_worth = e, c.is_excluded_from_spending = e, c.is_excluded_from_transactions = e, c.is_excluded_from_trends = e;
|
|
223
223
|
try {
|
|
224
224
|
this.updateAccount(c);
|
|
225
|
-
} catch (
|
|
226
|
-
console.error(`Failed to update account ${n} (added):`,
|
|
225
|
+
} catch (r) {
|
|
226
|
+
console.error(`Failed to update account ${n} (added):`, r);
|
|
227
227
|
}
|
|
228
228
|
}
|
|
229
229
|
}
|
|
@@ -24,7 +24,7 @@ import X from "@mui/material/ListItem";
|
|
|
24
24
|
import { M as U } from "../MiniWidgetContainer-CTyjmE1h.mjs";
|
|
25
25
|
import e1 from "@mui/material/Stack";
|
|
26
26
|
import { g as U1, a as j1 } from "../AccountFields-CIz-r3gP.mjs";
|
|
27
|
-
import { A as G1, a as K1 } from "../AccountStore-
|
|
27
|
+
import { A as G1, a as K1 } from "../AccountStore-BaMynkQT.mjs";
|
|
28
28
|
const t1 = () => {
|
|
29
29
|
const [c, L] = d.useState(""), { accounts: o } = g(), { selectedAccounts: l } = y(), { setSelectedAccount: u, setSelectedMember: r } = K(), { members: s } = O(), { onEvent: p } = N(), a = [...new Set(l.map((t) => t.account_type))], H = l.find((t) => c === t.guid), h = d.useMemo(
|
|
30
30
|
() => l.filter((t) => t.is_hidden),
|
package/dist/common/index.es.js
CHANGED
|
@@ -53,7 +53,7 @@ import { S as hr, T as gr } from "../RecurringTransactionsStore-D62XJtdL.mjs";
|
|
|
53
53
|
import { G as mr, A as _r, B as yr, W as fr, c as Sr, m as br, g as wr, t as xr, k as Cr, x as Dr, e as vr, w as Ar, u as Er, l as Tr, a as Br, j as Ir, y as Nr, s as Fr, b as Mr, q as $r, n as Rr, z as Ur, h as kr, r as Lr, f as Or, v as Gr, o as Hr, p as Pr } from "../hooks-DkUqN6JE.mjs";
|
|
54
54
|
import { u as Wr } from "../useScreenSize-B6JyS_Lj.mjs";
|
|
55
55
|
import { makeAutoObservable as m, runInAction as p, reaction as _t } from "mobx";
|
|
56
|
-
import { a as yt } from "../AccountStore-
|
|
56
|
+
import { a as yt } from "../AccountStore-BaMynkQT.mjs";
|
|
57
57
|
import ft from "posthog-js";
|
|
58
58
|
import { B as St } from "../BeatStore-By4aGoRM.mjs";
|
|
59
59
|
import { endOfMonth as Z } from "date-fns/endOfMonth";
|
package/dist/trends/index.es.js
CHANGED
|
@@ -1,36 +1,36 @@
|
|
|
1
1
|
import { jsx as e, jsxs as f, Fragment as Pe } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import { observer as
|
|
4
|
-
import { Icon as
|
|
2
|
+
import r from "react";
|
|
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 Ke } from "@mxenabled/mxui";
|
|
5
5
|
import O from "@mui/material/Box";
|
|
6
6
|
import _ from "@mui/material/Stack";
|
|
7
|
-
import
|
|
7
|
+
import pe from "@mui/material/Button";
|
|
8
8
|
import { addSeconds as Ie } from "date-fns/addSeconds";
|
|
9
|
-
import { differenceInCalendarMonths as
|
|
9
|
+
import { differenceInCalendarMonths as Ce } from "date-fns/differenceInCalendarMonths";
|
|
10
10
|
import { a as $e, g as je, S as Ye, L as Ee, u as Ue } from "../TrendsStore-WrHxzdbQ.mjs";
|
|
11
11
|
import { T as to } from "../TrendsStore-WrHxzdbQ.mjs";
|
|
12
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
13
|
import tt from "@mui/material/ToggleButton";
|
|
14
14
|
import nt from "@mui/material/ToggleButtonGroup";
|
|
15
|
-
import { u as R, k as
|
|
16
|
-
import { u as
|
|
17
|
-
import { f as
|
|
18
|
-
import { DataGridPro as
|
|
19
|
-
import { C as
|
|
15
|
+
import { u as R, k as F, e as H, a as P, f as ie, c as ce, v as q, l as ve, p as ot, m as st } from "../hooks-DkUqN6JE.mjs";
|
|
16
|
+
import { u as K } from "../useScreenSize-B6JyS_Lj.mjs";
|
|
17
|
+
import { f as Z, D as B } from "../Dialog-CWW597AF.mjs";
|
|
18
|
+
import { DataGridPro as at } from "@mui/x-data-grid-pro";
|
|
19
|
+
import { C as rt } from "../CurrencyText-YUhH2caW.mjs";
|
|
20
20
|
import { c as Me } from "../Category-CevNQ03n.mjs";
|
|
21
21
|
import { b as it } from "../Localization-2MODESHW.mjs";
|
|
22
22
|
import { H as be } from "../HeaderCell-DjuifqHJ.mjs";
|
|
23
|
-
import { T as
|
|
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
|
-
import { L as
|
|
28
|
-
import { useTheme as
|
|
27
|
+
import { L as Q } from "../Loader-DUaFpDGv.mjs";
|
|
28
|
+
import { useTheme as He } from "@mui/material/styles";
|
|
29
29
|
import { L as ye } from "../LineChart-BWWmmJxV.mjs";
|
|
30
30
|
import { M as lt } from "../MiniWidgetContainer-CTyjmE1h.mjs";
|
|
31
31
|
import { subMonths as dt } from "date-fns";
|
|
32
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
|
|
33
|
+
import { a as Ct, f as U } from "../NumberFormatting-CtWHhyBX.mjs";
|
|
34
34
|
import { M as ft } from "../MicroWidgetContainer-Dxz8uBN9.mjs";
|
|
35
35
|
import Tt from "@mui/material/Collapse";
|
|
36
36
|
import yt from "@mui/material/List";
|
|
@@ -38,7 +38,7 @@ import _t from "@mui/material/ListItem";
|
|
|
38
38
|
import bt from "@mui/material/ListItemButton";
|
|
39
39
|
import St from "@mui/material/ListItemIcon";
|
|
40
40
|
import wt from "@mui/material/ListItemText";
|
|
41
|
-
import
|
|
41
|
+
import Ne from "@mui/material/styles/useTheme";
|
|
42
42
|
import Dt from "@mui/material/Divider";
|
|
43
43
|
import { useTheme as It, Stack as Et } from "@mui/material";
|
|
44
44
|
import Lt from "@mui/material/Paper";
|
|
@@ -52,14 +52,14 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
52
52
|
onChange: o,
|
|
53
53
|
orientation: "horizontal",
|
|
54
54
|
value: n,
|
|
55
|
-
children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(tt, { color: "primary", sx: { width: 56 }, value: t, children: t === "Chart" ? /* @__PURE__ */ e(
|
|
55
|
+
children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(tt, { color: "primary", sx: { width: 56 }, value: t, children: t === "Chart" ? /* @__PURE__ */ e(re, { name: "table_chart_view" }) : /* @__PURE__ */ e(re, { name: "format_list_bulleted" }) }, t))
|
|
56
56
|
}
|
|
57
57
|
), Oe = ({ selectedDateRange: n, selectedCategoryGuid: o }) => {
|
|
58
|
-
const { trends: t } = R(), { isMobile: s, isDesktop: i } =
|
|
59
|
-
const l =
|
|
58
|
+
const { trends: t } = R(), { isMobile: s, isDesktop: i } = K(), { getCategoryName: h } = F(), d = r.useMemo(() => {
|
|
59
|
+
const l = Z(
|
|
60
60
|
n.start,
|
|
61
61
|
s ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
|
|
62
|
-
), c =
|
|
62
|
+
), c = Z(
|
|
63
63
|
n.end,
|
|
64
64
|
s ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
|
|
65
65
|
);
|
|
@@ -67,7 +67,7 @@ const We = ({ 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,11 +80,11 @@ const We = ({ 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: i ? "Body" : "Small", children: d })
|
|
84
84
|
] });
|
|
85
85
|
}, At = (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
|
}, 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: [
|
|
@@ -96,7 +96,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
96
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
|
}, kt = (n) => /* @__PURE__ */ e(_, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
|
|
102
102
|
Rt,
|
|
@@ -104,10 +104,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
104
104
|
categoryGuid: n.row.category,
|
|
105
105
|
topLevelCategoryGuid: n.row.top_level_category_guid
|
|
106
106
|
}
|
|
107
|
-
) }),
|
|
107
|
+
) }), Ht = (n, o) => {
|
|
108
108
|
const t = [], s = new Date(n);
|
|
109
109
|
for (; s <= o; ) {
|
|
110
|
-
const i =
|
|
110
|
+
const i = Z(s, B.MONTH);
|
|
111
111
|
t.push(i), s.setMonth(s.getMonth() + 1);
|
|
112
112
|
}
|
|
113
113
|
return t;
|
|
@@ -119,9 +119,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
119
119
|
height: i = "100dvh",
|
|
120
120
|
sx: h = {}
|
|
121
121
|
}) => {
|
|
122
|
-
const { onEvent: d } =
|
|
122
|
+
const { onEvent: d } = H(), l = Z(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [c, m] = r.useState([
|
|
123
123
|
{ field: l, sort: "desc" }
|
|
124
|
-
]), C =
|
|
124
|
+
]), C = r.useMemo(() => Ht(o.start, o.end), [o]), u = [
|
|
125
125
|
{
|
|
126
126
|
field: "category",
|
|
127
127
|
flex: 1,
|
|
@@ -133,10 +133,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
133
133
|
type: "string"
|
|
134
134
|
},
|
|
135
135
|
...C.map(
|
|
136
|
-
(
|
|
137
|
-
field:
|
|
136
|
+
(a) => ({
|
|
137
|
+
field: a,
|
|
138
138
|
flex: 1,
|
|
139
|
-
headerName:
|
|
139
|
+
headerName: a,
|
|
140
140
|
minWidth: 100,
|
|
141
141
|
renderHeader: be,
|
|
142
142
|
renderCell: At,
|
|
@@ -148,43 +148,43 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
148
148
|
sortComparator: $e
|
|
149
149
|
})
|
|
150
150
|
)
|
|
151
|
-
], b =
|
|
152
|
-
const
|
|
151
|
+
], b = r.useMemo(() => {
|
|
152
|
+
const a = n.filter(
|
|
153
153
|
(p) => !Xe(p) && !Ze(p)
|
|
154
|
-
), T = (t ?
|
|
154
|
+
), T = (t ? a.filter(
|
|
155
155
|
(p) => p.category_guid === t || p.top_level_category_guid === t
|
|
156
|
-
) :
|
|
157
|
-
(p,
|
|
158
|
-
const { category_guid:
|
|
159
|
-
p[
|
|
160
|
-
id:
|
|
161
|
-
category:
|
|
162
|
-
category_guid:
|
|
156
|
+
) : a).reduce(
|
|
157
|
+
(p, L) => {
|
|
158
|
+
const { category_guid: w, top_level_category_guid: E, month: k, total: D, year: N } = L, x = t ? w : E;
|
|
159
|
+
p[x] || (p[x] = {
|
|
160
|
+
id: x,
|
|
161
|
+
category: x,
|
|
162
|
+
category_guid: w,
|
|
163
163
|
top_level_category_guid: E
|
|
164
164
|
});
|
|
165
|
-
const
|
|
166
|
-
return p[
|
|
165
|
+
const I = Z(new Date(N, k - 1), B.MONTH_SHORT);
|
|
166
|
+
return p[x][I] || (p[x][I] = 0), p[x][I] = p[x][I] + Math.abs(D), p;
|
|
167
167
|
},
|
|
168
168
|
{}
|
|
169
169
|
);
|
|
170
170
|
return Object.values(T);
|
|
171
171
|
}, [n, t]);
|
|
172
172
|
return /* @__PURE__ */ e(O, { sx: { height: i, width: "100%", overflowX: "auto", boxShadow: "none", ...h }, children: /* @__PURE__ */ e(
|
|
173
|
-
|
|
173
|
+
at,
|
|
174
174
|
{
|
|
175
175
|
columns: u,
|
|
176
176
|
disableColumnFilter: !0,
|
|
177
177
|
disableColumnMenu: !0,
|
|
178
178
|
hideFooter: !0,
|
|
179
179
|
initialState: { sorting: { sortModel: c } },
|
|
180
|
-
onRowClick: (
|
|
181
|
-
s?.(
|
|
182
|
-
...
|
|
183
|
-
listItem: Me[
|
|
180
|
+
onRowClick: (a) => {
|
|
181
|
+
s?.(a.row.category), d(y.TRENDS_CLICK_LIST_ITEM, {
|
|
182
|
+
...A,
|
|
183
|
+
listItem: Me[a.row.category]
|
|
184
184
|
});
|
|
185
185
|
},
|
|
186
|
-
onSortModelChange: (
|
|
187
|
-
m(
|
|
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 } } },
|
|
@@ -192,7 +192,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
192
192
|
sortingOrder: ["asc", "desc"]
|
|
193
193
|
}
|
|
194
194
|
) });
|
|
195
|
-
},
|
|
195
|
+
}, Nt = {
|
|
196
196
|
title: "Transaction List"
|
|
197
197
|
}, Wt = ({
|
|
198
198
|
categoryGuid: n,
|
|
@@ -200,18 +200,18 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
200
200
|
isOpen: t,
|
|
201
201
|
onClose: s
|
|
202
202
|
}) => {
|
|
203
|
-
const { onEvent: i } =
|
|
204
|
-
() => c.find((
|
|
203
|
+
const { onEvent: i } = H(), { selectedAccountGuids: h } = P(), { common: d } = R(), { setFilter: l, sortedTransactions: c } = ie(), [m, C] = r.useState(""), u = r.useMemo(
|
|
204
|
+
() => c.find((a) => a.guid === m),
|
|
205
205
|
[m, c]
|
|
206
206
|
);
|
|
207
|
-
|
|
207
|
+
r.useEffect(() => {
|
|
208
208
|
l({
|
|
209
209
|
accounts: h,
|
|
210
210
|
dateRange: o,
|
|
211
|
-
custom: (
|
|
211
|
+
custom: (a) => n === "" || n === a.category_guid || n === a.top_level_category_guid,
|
|
212
212
|
showSplits: !!n
|
|
213
213
|
});
|
|
214
|
-
}, [h, n, o]),
|
|
214
|
+
}, [h, n, o]), r.useEffect(() => i(y.TRENDS_VIEW_TRANSACTIONS), []);
|
|
215
215
|
const b = () => {
|
|
216
216
|
C(""), s();
|
|
217
217
|
};
|
|
@@ -221,21 +221,21 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
221
221
|
ariaLabelClose: d.close_aria,
|
|
222
222
|
isOpen: t,
|
|
223
223
|
onClose: b,
|
|
224
|
-
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
|
-
}, Ot =
|
|
232
|
-
const { onEvent: t } =
|
|
233
|
-
|
|
234
|
-
const S = () =>
|
|
231
|
+
}, Ot = M(Wt), Vt = ({ onBackClick: n, sx: o }) => {
|
|
232
|
+
const { onEvent: t } = H(), { isDesktop: s, isTablet: i, isMobile: h } = K(), { visibleAccounts: d } = ce(), { loadMonthlyCategoryTotals: l, monthlyCategoryTotals: c, getCategoryName: m } = F(), { sortedTransactions: C } = ie(), { selectedDateRange: u, setSelectedDateRange: b } = q(), { isCopyLoaded: a, isInitialized: g, selectedAccounts: T, setSelectedAccounts: p } = P(), { trends: L } = R(), [w, E] = r.useState(!1), [k, D] = r.useState(!1), [N, x] = r.useState("Chart"), [I, $] = r.useState(""), [z, le] = r.useState(window.innerHeight), ee = z - (h ? 315 : 345);
|
|
233
|
+
r.useEffect(() => {
|
|
234
|
+
const S = () => le(window.innerHeight);
|
|
235
235
|
return window.addEventListener("resize", S), () => window.removeEventListener("resize", S);
|
|
236
|
-
}, []),
|
|
236
|
+
}, []), r.useEffect(() => {
|
|
237
237
|
p(d);
|
|
238
|
-
}, [d]),
|
|
238
|
+
}, [d]), r.useEffect(() => {
|
|
239
239
|
g && l(
|
|
240
240
|
T,
|
|
241
241
|
u.start,
|
|
@@ -244,50 +244,50 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
244
244
|
E(!0);
|
|
245
245
|
});
|
|
246
246
|
}, [g, T, u]);
|
|
247
|
-
const
|
|
248
|
-
if (!
|
|
247
|
+
const te = r.useMemo(() => {
|
|
248
|
+
if (!w) return { stackedDatasets: [], unstackedDatasets: [] };
|
|
249
249
|
const S = je(
|
|
250
250
|
c,
|
|
251
251
|
u.start,
|
|
252
252
|
u.end
|
|
253
|
-
), W =
|
|
254
|
-
(G) => G.top_level_category_guid ===
|
|
253
|
+
), W = I.length ? S.filter(
|
|
254
|
+
(G) => G.top_level_category_guid === I || G.category_guid === I
|
|
255
255
|
) : Qe(S);
|
|
256
256
|
return {
|
|
257
257
|
stackedDatasets: W.filter(qe),
|
|
258
258
|
unstackedDatasets: W.filter(Je)
|
|
259
259
|
};
|
|
260
|
-
}, [c,
|
|
261
|
-
|
|
262
|
-
},
|
|
263
|
-
const W = Ie(S?.[0], 1), G = S?.[1],
|
|
260
|
+
}, [c, I, 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
264
|
b({ start: W, end: G }), t(y.TRENDS_CLICK_TIME_WINDOW, {
|
|
265
|
-
time_period:
|
|
265
|
+
time_period: ge + "M"
|
|
266
266
|
});
|
|
267
|
-
},
|
|
267
|
+
}, de = () => {
|
|
268
268
|
t(y.TRENDS_CLICK_FILTER);
|
|
269
|
-
}, oe = (S) => {
|
|
270
|
-
z(S);
|
|
271
|
-
}, ue = (S) => {
|
|
272
|
-
z(S), t(y.TRENDS_CLICK_LEGEND, { category: m(S) });
|
|
273
269
|
}, se = (S) => {
|
|
270
|
+
$(S);
|
|
271
|
+
}, he = (S) => {
|
|
272
|
+
$(S), t(y.TRENDS_CLICK_LEGEND, { category: m(S) });
|
|
273
|
+
}, ae = (S) => {
|
|
274
274
|
t(y.TRENDS_HOVER_LEGEND, { category: m(S) });
|
|
275
|
-
},
|
|
275
|
+
}, ue = (S) => {
|
|
276
276
|
t(y.TRENDS_HOVER_AREA, { category: S });
|
|
277
|
-
},
|
|
277
|
+
}, me = (S) => {
|
|
278
278
|
t(y.TRENDS_HOVER_POINT, { category: S });
|
|
279
279
|
};
|
|
280
|
-
return !
|
|
280
|
+
return !a || !g || !w ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ f(
|
|
281
281
|
Ae,
|
|
282
282
|
{
|
|
283
283
|
accountOptions: d,
|
|
284
|
-
calendarActions: { onRangeChanged:
|
|
284
|
+
calendarActions: { onRangeChanged: oe },
|
|
285
285
|
dateRange: u,
|
|
286
286
|
dateRangeVariant: "timeframebuttons",
|
|
287
|
-
onAccountsFilterClick:
|
|
287
|
+
onAccountsFilterClick: de,
|
|
288
288
|
onBackClick: n,
|
|
289
289
|
sx: o,
|
|
290
|
-
title:
|
|
290
|
+
title: L.title,
|
|
291
291
|
children: [
|
|
292
292
|
/* @__PURE__ */ f(
|
|
293
293
|
_,
|
|
@@ -307,40 +307,40 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
307
307
|
/* @__PURE__ */ e(
|
|
308
308
|
Oe,
|
|
309
309
|
{
|
|
310
|
-
selectedCategoryGuid:
|
|
310
|
+
selectedCategoryGuid: I,
|
|
311
311
|
selectedDateRange: u
|
|
312
312
|
}
|
|
313
313
|
),
|
|
314
|
-
/* @__PURE__ */ e(We, { onTabChange:
|
|
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
|
-
/* @__PURE__ */ e(O, { flexGrow: 1, children:
|
|
320
|
-
/* @__PURE__ */ e(
|
|
321
|
-
|
|
319
|
+
/* @__PURE__ */ e(O, { flexGrow: 1, children: I && /* @__PURE__ */ f(pe, { onClick: () => $(""), sx: { p: 0, pr: 5 }, children: [
|
|
320
|
+
/* @__PURE__ */ e(re, { name: "arrow_back" }),
|
|
321
|
+
L.all_categories
|
|
322
322
|
] }) }),
|
|
323
|
-
/* @__PURE__ */ e(
|
|
323
|
+
/* @__PURE__ */ e(pe, { onClick: () => D(!0), sx: { px: 5 }, children: `${L.view_transactions} (${C.length})` })
|
|
324
324
|
] }),
|
|
325
325
|
/* @__PURE__ */ f(O, { children: [
|
|
326
|
-
|
|
326
|
+
N === "Chart" && /* @__PURE__ */ e(
|
|
327
327
|
Ye,
|
|
328
328
|
{
|
|
329
|
-
availableHeight:
|
|
330
|
-
onClickLegend:
|
|
331
|
-
onHoverArea:
|
|
332
|
-
onHoverLegend:
|
|
333
|
-
onHoverPoint:
|
|
334
|
-
stackedDatasets:
|
|
335
|
-
unstackedDatasets:
|
|
329
|
+
availableHeight: ee,
|
|
330
|
+
onClickLegend: he,
|
|
331
|
+
onHoverArea: ue,
|
|
332
|
+
onHoverLegend: ae,
|
|
333
|
+
onHoverPoint: me,
|
|
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: c,
|
|
342
|
-
onClickRow:
|
|
343
|
-
selectedCategory:
|
|
342
|
+
onClickRow: se,
|
|
343
|
+
selectedCategory: I,
|
|
344
344
|
selectedDateRange: u
|
|
345
345
|
}
|
|
346
346
|
)
|
|
@@ -351,17 +351,17 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
351
351
|
/* @__PURE__ */ e(
|
|
352
352
|
Ot,
|
|
353
353
|
{
|
|
354
|
-
categoryGuid:
|
|
354
|
+
categoryGuid: I,
|
|
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
|
-
}, Xn =
|
|
364
|
-
const n =
|
|
363
|
+
}, Xn = M(Vt), Gt = () => {
|
|
364
|
+
const n = He(), { monthlyCategoryTotals: o } = F(), { trends: t } = R(), s = et(o);
|
|
365
365
|
return /* @__PURE__ */ e(
|
|
366
366
|
ye,
|
|
367
367
|
{
|
|
@@ -378,13 +378,13 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
378
378
|
valueFormatterString: "0,0"
|
|
379
379
|
}
|
|
380
380
|
);
|
|
381
|
-
}, Bt =
|
|
382
|
-
const { visibleAccounts: t } = ce(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: i } =
|
|
383
|
-
return
|
|
381
|
+
}, Bt = M(Gt), zt = ({ onPrimaryCtaClick: n, sx: o }) => {
|
|
382
|
+
const { visibleAccounts: t } = ce(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: i } = F(), { isInitialized: h } = ve(), { trends: d } = R(), { isCopyLoaded: l, selectedAccounts: c, setSelectedAccounts: m } = P();
|
|
383
|
+
return r.useEffect(() => {
|
|
384
384
|
m(t);
|
|
385
|
-
}, [t]),
|
|
385
|
+
}, [t]), r.useEffect(() => {
|
|
386
386
|
h && s(c).finally();
|
|
387
|
-
}, [h, c]), !l || !h ? /* @__PURE__ */ e(
|
|
387
|
+
}, [h, c]), !l || !h ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
|
|
388
388
|
lt,
|
|
389
389
|
{
|
|
390
390
|
onPrimaryCtaClick: n,
|
|
@@ -392,10 +392,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
392
392
|
subTitle: d.sub_title,
|
|
393
393
|
sx: o,
|
|
394
394
|
title: d.mini_title,
|
|
395
|
-
children: i ? /* @__PURE__ */ e(Bt, {}) : /* @__PURE__ */ e(
|
|
395
|
+
children: i ? /* @__PURE__ */ e(Bt, {}) : /* @__PURE__ */ e(Q, {})
|
|
396
396
|
}
|
|
397
397
|
);
|
|
398
|
-
}, Zn =
|
|
398
|
+
}, Zn = M(zt), Ft = 70, Se = ({
|
|
399
399
|
title: n,
|
|
400
400
|
totalAmount: o,
|
|
401
401
|
transactionType: t,
|
|
@@ -403,10 +403,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
403
403
|
secondaryLabel: i,
|
|
404
404
|
shouldDisplayPercentage: h
|
|
405
405
|
}) => {
|
|
406
|
-
const { availableWidth: d } = ot(), l =
|
|
406
|
+
const { availableWidth: d } = ot(), l = r.useRef(null), c = r.useRef(null), m = Ct(Number(Math.abs(s)), {
|
|
407
407
|
style: "percent",
|
|
408
408
|
minimumIntegerDigits: 1
|
|
409
|
-
}), C = d === 288 &&
|
|
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 = l?.current, T = c?.current, p = g && T ? g.scrollWidth > T.clientWidth - Ft : !1;
|
|
410
410
|
return /* @__PURE__ */ f(
|
|
411
411
|
_,
|
|
412
412
|
{
|
|
@@ -429,14 +429,14 @@ const We = ({ 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(ht, { size: 20, sx: { color: b } }) : /* @__PURE__ */ e(ut, { size: 20, sx: { color:
|
|
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 :
|
|
439
|
+
color: u ? b : a,
|
|
440
440
|
fontWeight: 600
|
|
441
441
|
},
|
|
442
442
|
variant: "body2",
|
|
@@ -466,9 +466,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
466
466
|
}
|
|
467
467
|
),
|
|
468
468
|
h && d >= 450 && !p && /* @__PURE__ */ e(
|
|
469
|
-
|
|
469
|
+
Y,
|
|
470
470
|
{
|
|
471
|
-
color: u ? b :
|
|
471
|
+
color: u ? b : a,
|
|
472
472
|
variant: "caption",
|
|
473
473
|
children: i
|
|
474
474
|
}
|
|
@@ -479,41 +479,41 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
479
479
|
]
|
|
480
480
|
}
|
|
481
481
|
);
|
|
482
|
-
}, Pt =
|
|
482
|
+
}, Pt = M(() => {
|
|
483
483
|
const { trends: n } = R();
|
|
484
484
|
return /* @__PURE__ */ f(_, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
|
|
485
485
|
/* @__PURE__ */ e(mt, { 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
|
-
}), Qn =
|
|
492
|
-
const { visibleAccounts: o } = ce(), { onEvent: t } =
|
|
491
|
+
}), Qn = M(({ onCtaClick: n }) => {
|
|
492
|
+
const { visibleAccounts: o } = ce(), { onEvent: t } = H(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: i, monthlyTotalsLoaded: h } = F(), d = {
|
|
493
493
|
start: dt(/* @__PURE__ */ new Date(), 1),
|
|
494
494
|
end: /* @__PURE__ */ new Date()
|
|
495
|
-
}, { trends: l } = R(), { selectedAccounts: c, setSelectedAccounts: m, isInitialized: C } =
|
|
496
|
-
|
|
495
|
+
}, { trends: l } = R(), { selectedAccounts: c, setSelectedAccounts: m, isInitialized: C } = P();
|
|
496
|
+
r.useEffect(() => {
|
|
497
497
|
m(o);
|
|
498
|
-
}, [o]),
|
|
498
|
+
}, [o]), r.useEffect(() => {
|
|
499
499
|
C && i(c, d.start).then(() => {
|
|
500
500
|
t(y.TRENDS_LOAD_WIDGET, {
|
|
501
501
|
state: o?.length ? "default" : "zeroState"
|
|
502
502
|
});
|
|
503
503
|
});
|
|
504
504
|
}, [C, c]);
|
|
505
|
-
const { spendingData: u, incomeData: b } =
|
|
505
|
+
const { spendingData: u, incomeData: b } = r.useMemo(
|
|
506
506
|
() => ({
|
|
507
507
|
spendingData: Le(s, d),
|
|
508
508
|
incomeData: xe(s, d)
|
|
509
509
|
}),
|
|
510
510
|
[s, d]
|
|
511
|
-
), [
|
|
511
|
+
), [a, g] = u, [T, p] = b, L = _e(g.y, a.y), w = _e(p.y, T.y), E = C && !o?.length, k = () => {
|
|
512
512
|
t(
|
|
513
513
|
E ? y.TRENDS_CLICK_GET_STARTED : y.TRENDS_CLICK_VIEW_MORE
|
|
514
514
|
), n();
|
|
515
515
|
};
|
|
516
|
-
return !h || !C ? /* @__PURE__ */ e(
|
|
516
|
+
return !h || !C ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
|
|
517
517
|
ft,
|
|
518
518
|
{
|
|
519
519
|
className: "mx-trends-microwidget",
|
|
@@ -533,9 +533,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
533
533
|
/* @__PURE__ */ e(
|
|
534
534
|
Se,
|
|
535
535
|
{
|
|
536
|
-
percentage:
|
|
536
|
+
percentage: L,
|
|
537
537
|
secondaryLabel: l.micro_secondary_label,
|
|
538
|
-
shouldDisplayPercentage: g.y !== 0 &&
|
|
538
|
+
shouldDisplayPercentage: g.y !== 0 && a.y !== 0,
|
|
539
539
|
title: l.spending_label,
|
|
540
540
|
totalAmount: g.y,
|
|
541
541
|
transactionType: "spending"
|
|
@@ -544,7 +544,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
544
544
|
/* @__PURE__ */ e(
|
|
545
545
|
Se,
|
|
546
546
|
{
|
|
547
|
-
percentage:
|
|
547
|
+
percentage: w,
|
|
548
548
|
secondaryLabel: l.micro_secondary_label,
|
|
549
549
|
shouldDisplayPercentage: p.y !== 0 && T.y !== 0,
|
|
550
550
|
title: l.income_label,
|
|
@@ -557,15 +557,15 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
557
557
|
)
|
|
558
558
|
}
|
|
559
559
|
);
|
|
560
|
-
}), Kt =
|
|
560
|
+
}), Kt = M(
|
|
561
561
|
({ isExpanded: n, onClick: o }) => {
|
|
562
|
-
const t =
|
|
562
|
+
const t = Ne();
|
|
563
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(wt, { children: /* @__PURE__ */ e(
|
|
568
|
+
/* @__PURE__ */ e(wt, { children: /* @__PURE__ */ e(X, { bold: !0, variant: "body2", children: n ? "View less" : "View more" }) }),
|
|
569
569
|
/* @__PURE__ */ e(St, { sx: { color: t.palette.primary.main }, children: n ? /* @__PURE__ */ e(gt, {}) : /* @__PURE__ */ e(
|
|
570
570
|
pt,
|
|
571
571
|
{
|
|
@@ -579,7 +579,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
579
579
|
}
|
|
580
580
|
) }) });
|
|
581
581
|
}
|
|
582
|
-
), we =
|
|
582
|
+
), we = M(
|
|
583
583
|
({
|
|
584
584
|
totalAmount: n,
|
|
585
585
|
guid: o,
|
|
@@ -589,19 +589,19 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
589
589
|
isLastItem: h = !1,
|
|
590
590
|
showDivider: d = !0
|
|
591
591
|
}) => {
|
|
592
|
-
const { trends: l } = R(), { onEvent: c } =
|
|
592
|
+
const { trends: l } = R(), { onEvent: c } = H(), m = `${s.length} ${s.length === 1 ? l.transaction : l.transactions}`, C = () => {
|
|
593
593
|
i?.(), c(y.TRENDS_CLICK_LIST_ITEM, {
|
|
594
|
-
...
|
|
594
|
+
...A,
|
|
595
595
|
listItem: t
|
|
596
596
|
});
|
|
597
597
|
};
|
|
598
|
-
return /* @__PURE__ */ f(
|
|
598
|
+
return /* @__PURE__ */ f(r.Fragment, { children: [
|
|
599
599
|
/* @__PURE__ */ e(
|
|
600
600
|
Ee,
|
|
601
601
|
{
|
|
602
602
|
leftIcon: o ? /* @__PURE__ */ e(Te, { categoryGuid: o }) : void 0,
|
|
603
603
|
onClick: C,
|
|
604
|
-
rightContent:
|
|
604
|
+
rightContent: U(Math.abs(n), "0,0.00"),
|
|
605
605
|
rightIcon: i ? /* @__PURE__ */ e(Ke, {}) : void 0,
|
|
606
606
|
subtitle: m,
|
|
607
607
|
title: t
|
|
@@ -610,25 +610,25 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
610
610
|
d && /* @__PURE__ */ e(Dt, { sx: { ml: h ? 24 : 68 } })
|
|
611
611
|
] }, o);
|
|
612
612
|
}
|
|
613
|
-
), $t =
|
|
613
|
+
), $t = M(
|
|
614
614
|
({ availableHeight: n = 0, onCategoryClick: o }) => {
|
|
615
|
-
const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: i } =
|
|
616
|
-
|
|
615
|
+
const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: i } = q(), { isLargeDesktop: h, isDesktop: d } = K(), { trends: l } = R(), { onEvent: c } = H(), [m, C] = r.useState(!1), u = d || h;
|
|
616
|
+
r.useEffect(() => {
|
|
617
617
|
const g = Math.floor(n / 64) - 1, T = s.length + t.length;
|
|
618
618
|
g !== s.length && (i(u ? Math.max(g, 5) : 5), C(g >= T));
|
|
619
619
|
}, [n]);
|
|
620
620
|
const b = () => {
|
|
621
621
|
C(!m), c(y.TRENDS_CLICK_VIEW_MORE, {
|
|
622
|
-
...
|
|
622
|
+
...A
|
|
623
623
|
});
|
|
624
|
-
},
|
|
624
|
+
}, a = s.length + (m ? t.length : 0);
|
|
625
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: l.categories }) }),
|
|
627
627
|
s.map((g, T) => /* @__PURE__ */ e(
|
|
628
628
|
we,
|
|
629
629
|
{
|
|
630
630
|
...g,
|
|
631
|
-
isLastItem: T ===
|
|
631
|
+
isLastItem: T === a - 1,
|
|
632
632
|
onClick: g.transactions.length > 0 ? () => o(g) : void 0,
|
|
633
633
|
showDivider: !0
|
|
634
634
|
},
|
|
@@ -645,7 +645,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
645
645
|
we,
|
|
646
646
|
{
|
|
647
647
|
...g,
|
|
648
|
-
isLastItem: p ===
|
|
648
|
+
isLastItem: p === a - 1,
|
|
649
649
|
onClick: g.transactions.length > 0 ? () => o(g) : void 0,
|
|
650
650
|
showDivider: !0
|
|
651
651
|
},
|
|
@@ -692,13 +692,13 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
692
692
|
"WeeklyNoSpendDays",
|
|
693
693
|
"WeeklySmallPurchasesSummary"
|
|
694
694
|
], Yt = ({ onInsightCardClick: n }) => {
|
|
695
|
-
const o = It(), { onEvent: t } =
|
|
696
|
-
|
|
695
|
+
const o = It(), { onEvent: t } = H(), { isMobile: s, isDesktop: i, isLargeDesktop: h } = K(), { beatStore: d, endpoint: l, sessionToken: c } = ve(), { isInitialized: m } = P(), [C, u] = r.useState(!1), b = o.palette.mode === "dark", a = i || h, g = a || s ? 1 : 2;
|
|
696
|
+
r.useEffect(() => {
|
|
697
697
|
m && d.loadBeats().finally(() => u(!0));
|
|
698
698
|
}, [m]);
|
|
699
|
-
const T =
|
|
700
|
-
n?.(
|
|
701
|
-
},
|
|
699
|
+
const T = r.useMemo(() => C ? d.getFilteredBeats({ templates: jt }) : [], [C]), p = () => null, L = (D) => {
|
|
700
|
+
n?.(D), t(y.TRENDS_CLICK_INSIGHT, A);
|
|
701
|
+
}, w = a ? 200 : 170, E = a ? 170 : 124, k = T.length > 0 ? w : E;
|
|
702
702
|
return /* @__PURE__ */ e(Et, { sx: { height: k }, children: /* @__PURE__ */ e(
|
|
703
703
|
ct,
|
|
704
704
|
{
|
|
@@ -706,11 +706,11 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
706
706
|
beats: T,
|
|
707
707
|
endpoint: l,
|
|
708
708
|
logOutUser: p,
|
|
709
|
-
onCardClick:
|
|
709
|
+
onCardClick: L,
|
|
710
710
|
showBorder: !0,
|
|
711
711
|
showCTAColocatedWithText: !1,
|
|
712
712
|
showCarouselControls: !0,
|
|
713
|
-
showHeader:
|
|
713
|
+
showHeader: a,
|
|
714
714
|
showIcon: !0,
|
|
715
715
|
showWithMargin: !1,
|
|
716
716
|
token: c,
|
|
@@ -720,10 +720,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
720
720
|
visibleCardsCount: g
|
|
721
721
|
}
|
|
722
722
|
) });
|
|
723
|
-
}, Ut =
|
|
724
|
-
const { onEvent: t } =
|
|
723
|
+
}, Ut = M(Yt), Xt = M(({ chartLabel: n, chartColor: o }) => {
|
|
724
|
+
const { onEvent: t } = H(), {
|
|
725
725
|
categoryDetailsChartData: { monthlyAmounts: s, tooltipLabels: i }
|
|
726
|
-
} =
|
|
726
|
+
} = q();
|
|
727
727
|
return /* @__PURE__ */ e(_, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
|
|
728
728
|
ye,
|
|
729
729
|
{
|
|
@@ -738,7 +738,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
738
738
|
stroke: o
|
|
739
739
|
}),
|
|
740
740
|
onItemClick: () => {
|
|
741
|
-
t(y.TRENDS_CLICK_CHART,
|
|
741
|
+
t(y.TRENDS_CLICK_CHART, A);
|
|
742
742
|
},
|
|
743
743
|
showArea: !0,
|
|
744
744
|
showAverage: !0,
|
|
@@ -753,15 +753,15 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
753
753
|
valueFormatterString: "0,0"
|
|
754
754
|
}
|
|
755
755
|
) });
|
|
756
|
-
}), Zt =
|
|
757
|
-
const o =
|
|
756
|
+
}), Zt = M(({ onClose: n }) => {
|
|
757
|
+
const o = Ne(), { onEvent: t } = H(), { common: s, trends: i } = R(), { selectedCategoryData: h, selectedDateRangeMonthRange: d } = q(), { sortedTransactions: l } = ie(), [c, m] = r.useState(null);
|
|
758
758
|
if (!h)
|
|
759
759
|
return null;
|
|
760
|
-
const { guid: C, name: u, is_income: b, totalAmount:
|
|
761
|
-
() => l.find((
|
|
760
|
+
const { guid: C, name: u, is_income: b, totalAmount: a } = h, g = b ? i.category_income : i.category_spending, T = xt(C, o), p = b ? i.income_label : i.spending_label, L = ` ${h.transactions.length === 1 ? i.transaction : i.transactions} (${h.transactions.length})`, w = r.useMemo(
|
|
761
|
+
() => l.find((D) => D.guid === c),
|
|
762
762
|
[c, l]
|
|
763
|
-
), E = (
|
|
764
|
-
n?.(), t(y.TRENDS_CLICK_BACK,
|
|
763
|
+
), E = (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,
|
|
@@ -778,14 +778,14 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
778
778
|
Ee,
|
|
779
779
|
{
|
|
780
780
|
leftIcon: /* @__PURE__ */ e(Te, { categoryGuid: C }),
|
|
781
|
-
rightContent:
|
|
781
|
+
rightContent: U(Math.abs(a), "0,0.00"),
|
|
782
782
|
subtitle: d,
|
|
783
783
|
title: u
|
|
784
784
|
}
|
|
785
785
|
),
|
|
786
786
|
/* @__PURE__ */ e(Xt, { chartColor: T, chartLabel: p }),
|
|
787
787
|
/* @__PURE__ */ f(_, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
|
|
788
|
-
/* @__PURE__ */ e(
|
|
788
|
+
/* @__PURE__ */ e(X, { bold: !0, variant: "body1", children: L }),
|
|
789
789
|
/* @__PURE__ */ e(vt, { filter: E })
|
|
790
790
|
] })
|
|
791
791
|
] }),
|
|
@@ -803,10 +803,10 @@ const We = ({ 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: i.transaction,
|
|
809
|
-
children:
|
|
809
|
+
children: w && /* @__PURE__ */ e(Re, { transaction: w })
|
|
810
810
|
}
|
|
811
811
|
)
|
|
812
812
|
]
|
|
@@ -832,10 +832,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
832
832
|
selectedDateRange: t,
|
|
833
833
|
totals: s
|
|
834
834
|
}) => {
|
|
835
|
-
const i =
|
|
836
|
-
return
|
|
837
|
-
const
|
|
838
|
-
T(
|
|
835
|
+
const i = He(), { onEvent: h } = H(), { trends: d } = R(), { isSmallMobile: l, isMobile: c, isSmallTablet: m, isTablet: C } = K(), u = [i.palette.chart?.chart1, i.palette.chart?.chart2], b = Qt(s, t), a = qt(b, d), [g, T] = r.useState(0), p = 458, L = 195, w = 56, E = c || l ? L : m || C ? p : g;
|
|
836
|
+
return r.useEffect(() => {
|
|
837
|
+
const D = Math.max(n - w, o);
|
|
838
|
+
T(D);
|
|
839
839
|
}, [n]), /* @__PURE__ */ e(
|
|
840
840
|
ye,
|
|
841
841
|
{
|
|
@@ -844,9 +844,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
844
844
|
curveType: "bump",
|
|
845
845
|
datasets: b,
|
|
846
846
|
height: E,
|
|
847
|
-
labels:
|
|
847
|
+
labels: a,
|
|
848
848
|
onItemClick: () => {
|
|
849
|
-
h(y.TRENDS_CLICK_CHART,
|
|
849
|
+
h(y.TRENDS_CLICK_CHART, A);
|
|
850
850
|
},
|
|
851
851
|
showArea: !0,
|
|
852
852
|
showAxisHighlight: !0,
|
|
@@ -859,168 +859,168 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
859
859
|
valueFormatterString: "0,0"
|
|
860
860
|
}
|
|
861
861
|
);
|
|
862
|
-
}, en =
|
|
863
|
-
const { onEvent: s } =
|
|
862
|
+
}, en = M(Jt), tn = ({ onBackClick: n, onInsightCardClick: o, sx: t }) => {
|
|
863
|
+
const { onEvent: s } = H(), { config: i } = st(), { isLargeDesktop: h, isDesktop: d, isMobile: l } = K(), { visibleAccounts: c } = ce(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: C, monthlyCategoryTotals: u } = F(), { setFilter: b } = ie(), { selectedDateRange: a, setSelectedCategoryData: g, setSelectedDateRange: T } = q(), {
|
|
864
864
|
isCopyLoaded: p,
|
|
865
|
-
isInitialized:
|
|
866
|
-
selectedAccounts:
|
|
865
|
+
isInitialized: L,
|
|
866
|
+
selectedAccounts: w,
|
|
867
867
|
selectedAccountGuids: E,
|
|
868
868
|
setSelectedAccounts: k
|
|
869
|
-
} =
|
|
870
|
-
|
|
871
|
-
const v = () =>
|
|
869
|
+
} = P(), { trends: D } = R(), N = Ue(), x = d || h, [I, $] = r.useState(!1), [z, le] = r.useState("Chart"), [J, ee] = r.useState(""), [te, ne] = r.useState(!1), [oe, de] = r.useState(!0), [se, he] = r.useState(window.innerHeight), ae = se - 208, ue = se - (N ? 494 : 266);
|
|
870
|
+
r.useEffect(() => {
|
|
871
|
+
const v = () => he(window.innerHeight);
|
|
872
872
|
return window.addEventListener("resize", v), () => window.removeEventListener("resize", v);
|
|
873
|
-
}, []),
|
|
873
|
+
}, []), r.useEffect(() => {
|
|
874
874
|
k(c);
|
|
875
|
-
}, [c]),
|
|
876
|
-
|
|
875
|
+
}, [c]), r.useEffect(() => {
|
|
876
|
+
L && m(w, a.start, a.end).then(() => {
|
|
877
877
|
C(
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
878
|
+
w,
|
|
879
|
+
a.start,
|
|
880
|
+
a.end
|
|
881
881
|
);
|
|
882
882
|
}).finally(() => {
|
|
883
|
-
|
|
884
|
-
...
|
|
885
|
-
time_period: `${
|
|
883
|
+
$(!0), s(y.TRENDS_LOAD_WIDGET, {
|
|
884
|
+
...A,
|
|
885
|
+
time_period: `${Ce(a.end, a.start)}M`
|
|
886
886
|
});
|
|
887
|
-
})
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
}, [w, D, r]), a.useEffect(() => {
|
|
892
|
-
w && !c?.length ? F(!0) : c?.length && F(!1);
|
|
893
|
-
}, [w, c]), a.useEffect(() => {
|
|
887
|
+
});
|
|
888
|
+
}, [L, w, a]), r.useEffect(() => {
|
|
889
|
+
console.log("inside new use effect"), console.log(I && (c?.length ?? 0) > 0), I && (c?.length ?? 0) > 0 && de(!1);
|
|
890
|
+
}, [I, c]), r.useEffect(() => {
|
|
894
891
|
if (u.length !== 0) {
|
|
895
892
|
const v = {
|
|
896
893
|
accounts: E,
|
|
897
|
-
dateRange: { start:
|
|
894
|
+
dateRange: { start: a.start, end: a.end }
|
|
898
895
|
};
|
|
899
896
|
b({
|
|
900
897
|
...v,
|
|
901
898
|
custom: (V) => !!u.find(
|
|
902
|
-
(
|
|
899
|
+
(j) => j.top_level_category_guid === V.top_level_category_guid || j.category_guid === V.category_guid
|
|
903
900
|
)
|
|
904
901
|
});
|
|
905
902
|
}
|
|
906
903
|
}, [u]);
|
|
907
|
-
const
|
|
904
|
+
const me = (v) => {
|
|
908
905
|
g(v), ne(!0);
|
|
909
906
|
}, S = () => {
|
|
910
907
|
g(null), ne(!1);
|
|
911
908
|
}, W = (v, V) => {
|
|
912
|
-
|
|
913
|
-
...
|
|
909
|
+
le(V ?? z), s(y.TRENDS_CLICK_TOGGLE_VIEW, {
|
|
910
|
+
...A,
|
|
914
911
|
toggleView: V
|
|
915
912
|
});
|
|
916
913
|
}, G = (v) => {
|
|
917
|
-
const V = Ie(v?.[0], 1),
|
|
918
|
-
T({ start: V, end:
|
|
919
|
-
...
|
|
914
|
+
const V = Ie(v?.[0], 1), j = v?.[1], Fe = Ce(j, V);
|
|
915
|
+
T({ start: V, end: j }), s(y.TRENDS_CLICK_TIME_WINDOW, {
|
|
916
|
+
...A,
|
|
920
917
|
time_period: Fe + "M"
|
|
921
918
|
});
|
|
922
|
-
},
|
|
919
|
+
}, ge = (v) => {
|
|
923
920
|
s(y.TRENDS_CLICK_FILTER, {
|
|
924
|
-
...
|
|
921
|
+
...A,
|
|
925
922
|
filterValue: v
|
|
926
923
|
});
|
|
927
924
|
}, Ge = (v) => {
|
|
928
|
-
|
|
925
|
+
ee(v);
|
|
929
926
|
}, Be = () => {
|
|
930
|
-
|
|
927
|
+
ee(""), s(y.TRENDS_CLICK_ALL_CATEGORIES, A);
|
|
931
928
|
}, ze = i.show_connections_widget_in_master ? "buttons" : "no-buttons";
|
|
932
|
-
return !p || !
|
|
929
|
+
return !p || !I ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ f(
|
|
933
930
|
Ae,
|
|
934
931
|
{
|
|
935
932
|
accountOptions: c,
|
|
936
933
|
calendarActions: { onRangeChanged: G },
|
|
937
|
-
dateRange:
|
|
934
|
+
dateRange: a,
|
|
938
935
|
dateRangeVariant: l ? "timeframetabs" : "timeframebuttons",
|
|
939
|
-
onAccountsFilterClick:
|
|
936
|
+
onAccountsFilterClick: ge,
|
|
940
937
|
onBackClick: n,
|
|
941
938
|
sx: t,
|
|
942
|
-
title:
|
|
943
|
-
children:
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
939
|
+
title: D.title,
|
|
940
|
+
children: [
|
|
941
|
+
oe && /* @__PURE__ */ e(
|
|
942
|
+
Mt,
|
|
943
|
+
{
|
|
944
|
+
header: D.zero_state_content_header,
|
|
945
|
+
icon: "",
|
|
946
|
+
onClick: () => {
|
|
947
|
+
},
|
|
948
|
+
primaryButton: D.empty_state_primary,
|
|
949
|
+
subText: D.empty_state_sub_text,
|
|
950
|
+
sx: { height: ae },
|
|
951
|
+
variant: ze
|
|
952
|
+
}
|
|
953
|
+
),
|
|
954
|
+
!oe && /* @__PURE__ */ f(
|
|
955
|
+
_,
|
|
956
|
+
{
|
|
957
|
+
sx: {
|
|
958
|
+
px: l ? 0 : 48
|
|
959
|
+
},
|
|
960
|
+
children: [
|
|
961
|
+
/* @__PURE__ */ f(
|
|
962
|
+
_,
|
|
963
|
+
{
|
|
964
|
+
flexDirection: "row",
|
|
965
|
+
justifyContent: "space-between",
|
|
966
|
+
sx: { pb: l ? 12 : 24, pt: l ? 24 : 48 },
|
|
967
|
+
children: [
|
|
968
|
+
/* @__PURE__ */ e(
|
|
969
|
+
Oe,
|
|
970
|
+
{
|
|
971
|
+
selectedCategoryGuid: J,
|
|
972
|
+
selectedDateRange: a
|
|
973
|
+
}
|
|
974
|
+
),
|
|
975
|
+
/* @__PURE__ */ e(We, { onTabChange: W, selectedTab: z })
|
|
976
|
+
]
|
|
977
|
+
}
|
|
978
|
+
),
|
|
979
|
+
/* @__PURE__ */ e(_, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(O, { flexGrow: 1, children: J && /* @__PURE__ */ f(pe, { onClick: Be, sx: { p: 0, pr: 5 }, children: [
|
|
980
|
+
/* @__PURE__ */ e(re, { name: "arrow_back" }),
|
|
981
|
+
D.all_categories
|
|
982
|
+
] }) }) }),
|
|
983
|
+
/* @__PURE__ */ f(_, { flexDirection: x ? "row" : "column", gap: x ? 48 : 16, children: [
|
|
984
|
+
z === "Chart" && /* @__PURE__ */ f(Pe, { children: [
|
|
985
|
+
/* @__PURE__ */ e(O, { sx: { width: x ? "68%" : "100%" }, children: /* @__PURE__ */ e(
|
|
986
|
+
en,
|
|
971
987
|
{
|
|
972
|
-
|
|
973
|
-
|
|
988
|
+
availableHeight: ae,
|
|
989
|
+
minHeight: 450,
|
|
990
|
+
selectedDateRange: a,
|
|
991
|
+
totals: u
|
|
974
992
|
}
|
|
975
|
-
),
|
|
976
|
-
/* @__PURE__ */
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
993
|
+
) }),
|
|
994
|
+
/* @__PURE__ */ f(_, { gap: 16, sx: { width: x ? "32%" : "100%" }, children: [
|
|
995
|
+
N && /* @__PURE__ */ e(Ut, { onInsightCardClick: o }),
|
|
996
|
+
/* @__PURE__ */ e(
|
|
997
|
+
$t,
|
|
998
|
+
{
|
|
999
|
+
availableHeight: ue,
|
|
1000
|
+
onCategoryClick: me
|
|
1001
|
+
}
|
|
1002
|
+
)
|
|
1003
|
+
] })
|
|
1004
|
+
] }),
|
|
1005
|
+
z === "Table" && /* @__PURE__ */ e(O, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
|
|
1006
|
+
Ve,
|
|
988
1007
|
{
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
1008
|
+
height: "unset",
|
|
1009
|
+
monthlyCategoryTotals: u,
|
|
1010
|
+
onClickRow: Ge,
|
|
1011
|
+
selectedCategory: J,
|
|
1012
|
+
selectedDateRange: a
|
|
993
1013
|
}
|
|
994
|
-
) })
|
|
995
|
-
/* @__PURE__ */ f(_, { gap: 16, sx: { width: L ? "32%" : "100%" }, children: [
|
|
996
|
-
H && /* @__PURE__ */ e(Ut, { onInsightCardClick: o }),
|
|
997
|
-
/* @__PURE__ */ e(
|
|
998
|
-
$t,
|
|
999
|
-
{
|
|
1000
|
-
availableHeight: me,
|
|
1001
|
-
onCategoryClick: ge
|
|
1002
|
-
}
|
|
1003
|
-
)
|
|
1004
|
-
] })
|
|
1014
|
+
) })
|
|
1005
1015
|
] }),
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
onClickRow: Ge,
|
|
1012
|
-
selectedCategory: P,
|
|
1013
|
-
selectedDateRange: r
|
|
1014
|
-
}
|
|
1015
|
-
) })
|
|
1016
|
-
] }),
|
|
1017
|
-
he && /* @__PURE__ */ e(Zt, { onClose: S })
|
|
1018
|
-
]
|
|
1019
|
-
}
|
|
1020
|
-
)
|
|
1016
|
+
te && /* @__PURE__ */ e(Zt, { onClose: S })
|
|
1017
|
+
]
|
|
1018
|
+
}
|
|
1019
|
+
)
|
|
1020
|
+
]
|
|
1021
1021
|
}
|
|
1022
1022
|
);
|
|
1023
|
-
}, qn =
|
|
1023
|
+
}, qn = M(tn);
|
|
1024
1024
|
export {
|
|
1025
1025
|
Xn as TrendsFullWidget,
|
|
1026
1026
|
Qn as TrendsMicroWidget,
|