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