@mx-cartographer/experiences 7.0.55-alpha.mm0 → 7.0.56
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 -0
- package/dist/budgets/index.es.js +409 -409
- package/package.json +1 -1
package/dist/budgets/index.es.js
CHANGED
@@ -1,10 +1,10 @@
|
|
1
|
-
import { jsxs as
|
1
|
+
import { jsxs as m, jsx as e, Fragment as je } from "react/jsx-runtime";
|
2
2
|
import l from "react";
|
3
3
|
import { observer as I } from "mobx-react-lite";
|
4
|
-
import { endOfMonth as
|
4
|
+
import { endOfMonth as me } from "date-fns/endOfMonth";
|
5
5
|
import { startOfMonth as q } from "date-fns/startOfMonth";
|
6
6
|
import F from "@mui/material/Box";
|
7
|
-
import
|
7
|
+
import S from "@mui/material/Stack";
|
8
8
|
import Q from "@mui/material/styles/useTheme";
|
9
9
|
import { Text as y, CategoryIcon as H, Icon as N, H1 as ze, H3 as xe } from "@mxenabled/mxui";
|
10
10
|
import W from "@mui/material/List";
|
@@ -24,9 +24,9 @@ import { a as $ } from "../Dialog-CWW597AF.mjs";
|
|
24
24
|
import { C as We } from "../ConnectionsDrawer-CU3E2RLw.mjs";
|
25
25
|
import * as O from "d3";
|
26
26
|
import Xe from "@mui/material/Tooltip";
|
27
|
+
import { u as se } from "../useScreenSize-B6JyS_Lj.mjs";
|
27
28
|
import { L as G } from "../Loader-DUaFpDGv.mjs";
|
28
|
-
import { E as
|
29
|
-
import { u as ge } from "../useScreenSize-B6JyS_Lj.mjs";
|
29
|
+
import { E as de } from "../EmptyState-Cu00ZWJL.mjs";
|
30
30
|
import { A as L, W as Ke } from "../WidgetContainer-B8MRJ5Y1.mjs";
|
31
31
|
import { u as Ve } from "../BudgetUtil-2EncZLBQ.mjs";
|
32
32
|
import { M as Ye } from "../MiniWidgetContainer-DTQdRK-3.mjs";
|
@@ -40,7 +40,7 @@ import { e as et } from "../exportTransactionsToCSV-D8TTNrrE.mjs";
|
|
40
40
|
import { T as Te, a as tt } from "../TransactionDetails-DAp_CPCP.mjs";
|
41
41
|
import pe from "@mui/material/Card";
|
42
42
|
import he from "@mui/material/CardContent";
|
43
|
-
import { S as
|
43
|
+
import { S as ge } from "../StatusBar-BK_uYHAB.mjs";
|
44
44
|
import { S as we } from "../SingleSegmentDonut-BgbLgwHi.mjs";
|
45
45
|
import { u as nt, b as ot } from "../CategorySelectorDrawer-BmenK5bu.mjs";
|
46
46
|
import De from "@mui/material/CardHeader";
|
@@ -48,31 +48,31 @@ import { subDays as at } from "date-fns/subDays";
|
|
48
48
|
import rt from "@mui/material/IconButton";
|
49
49
|
import { M as st } from "../ManageIncome-BX7dzGF8.mjs";
|
50
50
|
const it = I(() => {
|
51
|
-
const { budgets: t } = w(), { totalBudgeted:
|
52
|
-
return /* @__PURE__ */
|
53
|
-
/* @__PURE__ */
|
51
|
+
const { budgets: t } = w(), { totalBudgeted: o } = D(), { incomeTotal: i } = ee(), s = i - o;
|
52
|
+
return /* @__PURE__ */ m(S, { direction: "row", justifyContent: "center", my: 16, spacing: 20, children: [
|
53
|
+
/* @__PURE__ */ m(S, { alignItems: "center", children: [
|
54
54
|
/* @__PURE__ */ e(y, { bold: !0, variant: "Body", children: T(i, "0,0") }),
|
55
55
|
/* @__PURE__ */ e(y, { color: "secondary", variant: "Small", children: t.projected_income })
|
56
56
|
] }),
|
57
57
|
/* @__PURE__ */ e(y, { bold: !0, justifyContent: "center", variant: "Body", children: "-" }),
|
58
|
-
/* @__PURE__ */
|
59
|
-
/* @__PURE__ */ e(y, { bold: !0, variant: "Body", children: T(
|
58
|
+
/* @__PURE__ */ m(S, { alignItems: "center", children: [
|
59
|
+
/* @__PURE__ */ e(y, { bold: !0, variant: "Body", children: T(o, "0,0") }),
|
60
60
|
/* @__PURE__ */ e(y, { color: "secondary", variant: "Small", children: t.budgeted })
|
61
61
|
] }),
|
62
62
|
/* @__PURE__ */ e(y, { bold: !0, justifyContent: "center", variant: "Body", children: "=" }),
|
63
|
-
/* @__PURE__ */
|
63
|
+
/* @__PURE__ */ m(S, { alignItems: "center", children: [
|
64
64
|
/* @__PURE__ */ e(y, { bold: !0, variant: "Body", children: T(s, "0,0") }),
|
65
65
|
/* @__PURE__ */ e(y, { color: "secondary", variant: "Small", children: t.remaining })
|
66
66
|
] })
|
67
67
|
] });
|
68
68
|
}), ct = I(
|
69
69
|
({ category: t }) => {
|
70
|
-
const { budgets:
|
71
|
-
const
|
72
|
-
return `${
|
73
|
-
}, [
|
74
|
-
return /* @__PURE__ */
|
75
|
-
/* @__PURE__ */ e(K, { children: /* @__PURE__ */
|
70
|
+
const { budgets: o } = w(), { budgets: i } = D(), s = l.useMemo(() => {
|
71
|
+
const a = i.find((c) => c.category_guid === t.guid), n = T(t.totalAverageAmount, "0,0"), r = a ? M(o.recalculate_previous_budget, T(a.amount, "0,0")) : o.recalculate_new_budget;
|
72
|
+
return `${n} - ${r}`;
|
73
|
+
}, [o, i]);
|
74
|
+
return /* @__PURE__ */ m(l.Fragment, { children: [
|
75
|
+
/* @__PURE__ */ e(K, { children: /* @__PURE__ */ m(V, { children: [
|
76
76
|
/* @__PURE__ */ e(re, { children: /* @__PURE__ */ e(H, { categoryGuid: t.guid, variant: "filled" }) }),
|
77
77
|
/* @__PURE__ */ e(Y, { primary: t.name, secondary: s })
|
78
78
|
] }) }),
|
@@ -80,12 +80,12 @@ const it = I(() => {
|
|
80
80
|
] }, t.guid);
|
81
81
|
}
|
82
82
|
), lt = ({ onRecalculateBudgets: t }) => {
|
83
|
-
const { budgets:
|
84
|
-
await
|
83
|
+
const { budgets: o, common: i } = w(), { spendCategories: s } = j(), { recalculateBudgets: a, setAlert: n } = D(), [r, c] = l.useState(!1), d = s.filter((u) => u.totalAverageAmount > 0), g = async () => {
|
84
|
+
await a(d), c(!1), n(o.alert_recalculated_budgets), t?.();
|
85
85
|
};
|
86
|
-
return /* @__PURE__ */
|
87
|
-
/* @__PURE__ */ e(Ae, { onClick: () => c(!0), sx: { mt: 24, mx: 24 }, variant: "text", children:
|
88
|
-
/* @__PURE__ */ e(y, { sx: { mx: 24, my: 16, textAlign: "center", whiteSpace: "wrap" }, variant: "Paragraph", children:
|
86
|
+
return /* @__PURE__ */ m(l.Fragment, { children: [
|
87
|
+
/* @__PURE__ */ e(Ae, { onClick: () => c(!0), sx: { mt: 24, mx: 24 }, variant: "text", children: o.recalculate_button }),
|
88
|
+
/* @__PURE__ */ e(y, { sx: { mx: 24, my: 16, textAlign: "center", whiteSpace: "wrap" }, variant: "Paragraph", children: o.recalculate_help }),
|
89
89
|
/* @__PURE__ */ e(
|
90
90
|
k,
|
91
91
|
{
|
@@ -93,30 +93,30 @@ const it = I(() => {
|
|
93
93
|
isOpen: r,
|
94
94
|
onClose: () => c(!1),
|
95
95
|
onPrimaryAction: g,
|
96
|
-
title:
|
97
|
-
children: /* @__PURE__ */
|
98
|
-
/* @__PURE__ */
|
99
|
-
/* @__PURE__ */ e(y, { bold: !0, variant: "Body", children:
|
100
|
-
/* @__PURE__ */ e(y, { variant: "ParagraphSmall", children:
|
96
|
+
title: o.recalculate_title,
|
97
|
+
children: /* @__PURE__ */ m(S, { children: [
|
98
|
+
/* @__PURE__ */ m(S, { mx: 24, my: 16, children: [
|
99
|
+
/* @__PURE__ */ e(y, { bold: !0, variant: "Body", children: o.recalculate_description_top }),
|
100
|
+
/* @__PURE__ */ e(y, { variant: "ParagraphSmall", children: o.recalculate_description_bottom })
|
101
101
|
] }),
|
102
|
-
/* @__PURE__ */ e(F, { bgcolor: "background.paper", children: /* @__PURE__ */ e(W, { children:
|
102
|
+
/* @__PURE__ */ e(F, { bgcolor: "background.paper", children: /* @__PURE__ */ e(W, { children: d.map((u) => /* @__PURE__ */ e(ct, { category: u }, u.guid)) }) })
|
103
103
|
] })
|
104
104
|
}
|
105
105
|
)
|
106
106
|
] });
|
107
|
-
},
|
107
|
+
}, ie = ({
|
108
108
|
amount: t,
|
109
|
-
categoryName:
|
109
|
+
categoryName: o,
|
110
110
|
onAmountChanged: i
|
111
111
|
}) => {
|
112
|
-
const { budgets: s } = w(), { totalBudgeted:
|
113
|
-
return /* @__PURE__ */
|
114
|
-
/* @__PURE__ */
|
112
|
+
const { budgets: s } = w(), { totalBudgeted: a } = D(), { incomeTotal: n } = ee(), r = n - a;
|
113
|
+
return /* @__PURE__ */ m(S, { gap: 16, children: [
|
114
|
+
/* @__PURE__ */ m(S, { children: [
|
115
115
|
/* @__PURE__ */ e(y, { children: M(
|
116
116
|
s.add_description_top,
|
117
117
|
T(r, "0,0")
|
118
118
|
) }),
|
119
|
-
/* @__PURE__ */ e(y, { children: M(s.add_description_bottom,
|
119
|
+
/* @__PURE__ */ e(y, { children: M(s.add_description_bottom, o) })
|
120
120
|
] }),
|
121
121
|
/* @__PURE__ */ e(
|
122
122
|
He,
|
@@ -130,12 +130,12 @@ const it = I(() => {
|
|
130
130
|
}
|
131
131
|
)
|
132
132
|
] });
|
133
|
-
}, dt = I(({ category: t, onAddBudget:
|
134
|
-
const { budgets: i, common: s } = w(), [
|
133
|
+
}, dt = I(({ category: t, onAddBudget: o }) => {
|
134
|
+
const { budgets: i, common: s } = w(), [a, n] = l.useState(!1), [r, c] = l.useState(
|
135
135
|
`${t.totalAmount === 0 ? "" : t.totalAmount}`
|
136
136
|
);
|
137
|
-
return /* @__PURE__ */
|
138
|
-
/* @__PURE__ */ e(K, { children: /* @__PURE__ */
|
137
|
+
return /* @__PURE__ */ m(l.Fragment, { children: [
|
138
|
+
/* @__PURE__ */ e(K, { children: /* @__PURE__ */ m(V, { onClick: () => n(!0), children: [
|
139
139
|
/* @__PURE__ */ e(re, { children: /* @__PURE__ */ e(H, { categoryGuid: t.guid }) }),
|
140
140
|
/* @__PURE__ */ e(
|
141
141
|
Y,
|
@@ -151,115 +151,115 @@ const it = I(() => {
|
|
151
151
|
{
|
152
152
|
copy: { close_aria: s.close_aria, title: i.add_title },
|
153
153
|
disablePrimaryButton: Number(r) <= 0,
|
154
|
-
isOpen:
|
155
|
-
onClose: () =>
|
156
|
-
onPrimaryAction: () =>
|
154
|
+
isOpen: a,
|
155
|
+
onClose: () => n(!1),
|
156
|
+
onPrimaryAction: () => o(t, Number(r)),
|
157
157
|
primaryText: i.add_save_button,
|
158
|
-
children: /* @__PURE__ */ e(
|
158
|
+
children: /* @__PURE__ */ e(ie, { amount: r, categoryName: t.name, onAmountChanged: c })
|
159
159
|
}
|
160
160
|
)
|
161
161
|
] });
|
162
162
|
}), Ie = I(({ onRecalculateBudgets: t }) => {
|
163
|
-
const { budgets:
|
164
|
-
await i(r, c), s(M(
|
163
|
+
const { budgets: o } = w(), { addBudget: i, setAlert: s, unbudgetedCategories: a } = D(), n = async (r, c) => {
|
164
|
+
await i(r, c), s(M(o.alert_budget_created, r.name));
|
165
165
|
};
|
166
|
-
return /* @__PURE__ */
|
166
|
+
return /* @__PURE__ */ m(S, { children: [
|
167
167
|
/* @__PURE__ */ e(it, {}),
|
168
|
-
/* @__PURE__ */ e(F, { bgcolor: "background.paper", children: /* @__PURE__ */ e(W, { children:
|
168
|
+
/* @__PURE__ */ e(F, { bgcolor: "background.paper", children: /* @__PURE__ */ e(W, { children: a.map((r) => /* @__PURE__ */ e(
|
169
169
|
dt,
|
170
170
|
{
|
171
171
|
category: r,
|
172
|
-
onAddBudget:
|
172
|
+
onAddBudget: n
|
173
173
|
},
|
174
174
|
r.guid
|
175
175
|
)) }) }),
|
176
176
|
/* @__PURE__ */ e(lt, { onRecalculateBudgets: t })
|
177
177
|
] });
|
178
178
|
}), be = 5, Ee = 100, J = 25, ut = (t) => {
|
179
|
-
const
|
180
|
-
|
181
|
-
}, i = (
|
182
|
-
|
183
|
-
}, s = (
|
184
|
-
|
179
|
+
const o = (a) => {
|
180
|
+
a.active || t.alphaTarget(0.3).restart(), a.subject.fx = a.subject.x, a.subject.fy = a.subject.y;
|
181
|
+
}, i = (a) => {
|
182
|
+
a.subject.fx = a.x, a.subject.fy = a.y;
|
183
|
+
}, s = (a) => {
|
184
|
+
a.active || t.alphaTarget(0), a.subject.fx = null, a.subject.fy = null;
|
185
185
|
};
|
186
|
-
return O.drag().on("start",
|
186
|
+
return O.drag().on("start", o).on("drag", i).on("end", s);
|
187
187
|
}, mt = (t) => {
|
188
|
-
let
|
189
|
-
|
190
|
-
const i =
|
191
|
-
return (
|
188
|
+
let o = t.transaction_total / t.amount;
|
189
|
+
o < 0 ? o = 0 : o > 1 && (o = 1);
|
190
|
+
const i = o * 2 * Math.PI, s = O.interpolate(0, i), a = O.arc().cornerRadius(5).innerRadius(t.radius - be * 2).outerRadius(t.radius - be).startAngle(0).endAngle(0);
|
191
|
+
return (n) => (a.endAngle(s(n)), a(t) || "");
|
192
192
|
}, gt = (t) => {
|
193
193
|
O.selectAll(".bubble").call(ut(t));
|
194
|
-
}, Ce = (t,
|
194
|
+
}, Ce = (t, o, i) => Math.min(Math.max(t, o), i), pt = (t, o, i) => {
|
195
195
|
t.alpha(1).restart().force(
|
196
196
|
"x",
|
197
197
|
O.forceX().x(i / 2).strength(0.01)
|
198
198
|
).force(
|
199
199
|
"y",
|
200
|
-
O.forceY().y(
|
200
|
+
O.forceY().y(o / 2).strength(0.02)
|
201
201
|
).on("tick", () => {
|
202
202
|
const s = t.nodes();
|
203
|
-
s.forEach((
|
204
|
-
const
|
205
|
-
|
206
|
-
}), O.selectAll(".bubble").data(s).attr("transform", (
|
203
|
+
s.forEach((a) => {
|
204
|
+
const n = a.radius ?? J;
|
205
|
+
a.x = Ce(a.x ?? 0, n, i - n), a.y = Ce(a.y ?? 0, n, o - n);
|
206
|
+
}), O.selectAll(".bubble").data(s).attr("transform", (a) => `translate(${a.x},${a.y})`);
|
207
207
|
});
|
208
|
-
}, Oe = (t,
|
209
|
-
const
|
208
|
+
}, Oe = (t, o) => O.scaleLinear().domain([t, o]).range([J, Ee]), ht = (t) => {
|
209
|
+
const o = t.reduce((n, r) => {
|
210
210
|
const c = Math.max(r.transaction_total, r.amount);
|
211
|
-
return c >
|
212
|
-
}, 0), i = t.reduce((
|
211
|
+
return c > n ? c : n;
|
212
|
+
}, 0), i = t.reduce((n, r) => {
|
213
213
|
const c = Math.max(r.transaction_total, r.amount);
|
214
|
-
return c <
|
215
|
-
},
|
216
|
-
const r = s(Math.max(
|
214
|
+
return c < n ? c : n;
|
215
|
+
}, o), s = Oe(i, o), a = t.map((n) => {
|
216
|
+
const r = s(Math.max(n.transaction_total, n.amount)) || 25;
|
217
217
|
return {
|
218
|
-
...
|
218
|
+
...n,
|
219
219
|
radius: r
|
220
220
|
};
|
221
221
|
});
|
222
|
-
return O.forceSimulation(
|
223
|
-
}, ft = (t,
|
224
|
-
const
|
225
|
-
let
|
226
|
-
if (
|
227
|
-
const _ = Math.sqrt(g / (t * Math.PI)), p = Math.min(c,
|
228
|
-
|
222
|
+
return O.forceSimulation(a).velocityDecay(0.05).force("collide", O.forceCollide((n) => n.radius + 2).strength(0.7));
|
223
|
+
}, ft = (t, o, i) => {
|
224
|
+
const a = Math.PI * J ** 2 * t, n = i < 400 || o < 300, r = n ? 40 : 20, c = Math.max(100, i - r), d = Math.max(100, o - r), g = c * d;
|
225
|
+
let u = J;
|
226
|
+
if (a < g) {
|
227
|
+
const _ = Math.sqrt(g / (t * Math.PI)), p = Math.min(c, d) / 4;
|
228
|
+
u = Math.min(Ee, _, p);
|
229
229
|
}
|
230
|
-
return
|
231
|
-
}, _t = (t,
|
232
|
-
const { maxRadius:
|
233
|
-
return O.scaleLinear().domain([s, i]).range([r,
|
234
|
-
}, yt = (t,
|
235
|
-
const
|
230
|
+
return n && t <= 3 && (u = Math.min(u, 45)), { minRadius: Math.max(20, u * 0.6), maxRadius: u };
|
231
|
+
}, _t = (t, o, i, s, a) => {
|
232
|
+
const { maxRadius: n, minRadius: r } = ft(t, o, a);
|
233
|
+
return O.scaleLinear().domain([s, i]).range([r, n]);
|
234
|
+
}, yt = (t, o, i = !1, s, a) => {
|
235
|
+
const n = o.map((g) => Math.max(g.transaction_total, g.amount)), r = Math.min(...n), c = Math.max(...n), d = i ? _t(t.length, s, c, r, a) : Oe(r, c);
|
236
236
|
return t.map((g) => ({
|
237
237
|
...g,
|
238
|
-
radius:
|
238
|
+
radius: d(Math.max(g.transaction_total, g.amount))
|
239
239
|
}));
|
240
240
|
}, Se = 5, bt = 2e3, Ct = ({ bubble: t }) => {
|
241
|
-
const
|
241
|
+
const o = Q(), {
|
242
242
|
amount: i,
|
243
243
|
guid: s,
|
244
|
-
budgetColors: { mercury:
|
245
|
-
radius:
|
244
|
+
budgetColors: { mercury: a },
|
245
|
+
radius: n,
|
246
246
|
transaction_total: r
|
247
247
|
} = t, c = `mercury-${s}`;
|
248
248
|
l.useEffect(() => {
|
249
|
-
O.select(`.${c}`).selectAll(".status").remove(), O.select(`.${c}`).append("path").transition().duration(bt).delay(0).attr("class", "status").attr("style", `fill: ${
|
250
|
-
}, [i,
|
251
|
-
const
|
249
|
+
O.select(`.${c}`).selectAll(".status").remove(), O.select(`.${c}`).append("path").transition().duration(bt).delay(0).attr("class", "status").attr("style", `fill: ${a}; fill-opacity: 1;`).attrTween("d", () => mt(t));
|
250
|
+
}, [i, n, r]);
|
251
|
+
const d = O.arc().innerRadius((g) => g - 2 * Se).outerRadius((g) => g - Se).startAngle(0).endAngle(2 * Math.PI);
|
252
252
|
return /* @__PURE__ */ e("g", { className: c, children: /* @__PURE__ */ e(
|
253
253
|
"path",
|
254
254
|
{
|
255
|
-
d:
|
256
|
-
style: { fill:
|
255
|
+
d: d(n) || "",
|
256
|
+
style: { fill: o.palette.common.white, fillOpacity: 0.35 }
|
257
257
|
}
|
258
258
|
) });
|
259
|
-
}, St = l.memo(Ct), P = 75,
|
260
|
-
function Bt({ bubble: t, isDraggable:
|
259
|
+
}, St = l.memo(Ct), P = 75, ue = 50;
|
260
|
+
function Bt({ bubble: t, isDraggable: o, onClick: i = () => {
|
261
261
|
} }) {
|
262
|
-
const [s,
|
262
|
+
const [s, a] = l.useState(!1), { availableWidth: n } = te(), r = l.useMemo(() => {
|
263
263
|
if (t)
|
264
264
|
return {
|
265
265
|
amount: t.amount,
|
@@ -271,19 +271,19 @@ function Bt({ bubble: t, isDraggable: a, onClick: i = () => {
|
|
271
271
|
}, [t.amount, t.budgetColors, t.guid, t.radius, t.transaction_total]);
|
272
272
|
if (!t) return;
|
273
273
|
const {
|
274
|
-
budgetColors: { background: c, text:
|
275
|
-
category: { icon: g, name:
|
276
|
-
guid:
|
274
|
+
budgetColors: { background: c, text: d },
|
275
|
+
category: { icon: g, name: u },
|
276
|
+
guid: h,
|
277
277
|
description: _,
|
278
278
|
radius: p,
|
279
279
|
x: b,
|
280
|
-
y:
|
281
|
-
} = t,
|
282
|
-
let
|
283
|
-
p > P ? (
|
280
|
+
y: B
|
281
|
+
} = t, f = n < 400 ? -8 : -12;
|
282
|
+
let C = f, v = f;
|
283
|
+
p > P ? (C = -14, v = -45) : p > ue && (v = -32);
|
284
284
|
let A = 32;
|
285
|
-
p <= P && (A =
|
286
|
-
const
|
285
|
+
p <= P && (A = n < 400 ? 16 : 24);
|
286
|
+
const x = `${t.category.name}: ${_}`, E = {
|
287
287
|
modifiers: [
|
288
288
|
{
|
289
289
|
name: "offset",
|
@@ -291,18 +291,18 @@ function Bt({ bubble: t, isDraggable: a, onClick: i = () => {
|
|
291
291
|
}
|
292
292
|
]
|
293
293
|
};
|
294
|
-
return /* @__PURE__ */
|
294
|
+
return /* @__PURE__ */ m(
|
295
295
|
"g",
|
296
296
|
{
|
297
297
|
className: "bubble",
|
298
|
-
id: `bubble-${
|
298
|
+
id: `bubble-${h}`,
|
299
299
|
onClick: () => i(t),
|
300
|
-
onMouseEnter: () =>
|
301
|
-
onMouseLeave: () =>
|
302
|
-
style: { cursor:
|
300
|
+
onMouseEnter: () => a(!0),
|
301
|
+
onMouseLeave: () => a(!1),
|
302
|
+
style: { cursor: o ? "pointer" : "default" },
|
303
303
|
textAnchor: "middle",
|
304
304
|
x: b,
|
305
|
-
y:
|
305
|
+
y: B,
|
306
306
|
children: [
|
307
307
|
/* @__PURE__ */ e(
|
308
308
|
Xe,
|
@@ -310,41 +310,41 @@ function Bt({ bubble: t, isDraggable: a, onClick: i = () => {
|
|
310
310
|
followCursor: !0,
|
311
311
|
open: s,
|
312
312
|
slotProps: { popper: E },
|
313
|
-
title:
|
314
|
-
children: /* @__PURE__ */ e("circle", { fill: c, id: `circle-${
|
313
|
+
title: x,
|
314
|
+
children: /* @__PURE__ */ e("circle", { fill: c, id: `circle-${h}`, r: p })
|
315
315
|
}
|
316
316
|
),
|
317
|
-
/* @__PURE__ */ e("svg", { x, y: v, children: /* @__PURE__ */ e(N, { name: g, size: A, sx: { fill:
|
317
|
+
/* @__PURE__ */ e("svg", { x: C, y: v, children: /* @__PURE__ */ e(N, { name: g, size: A, sx: { fill: d } }) }),
|
318
318
|
p > P && /* @__PURE__ */ e(
|
319
319
|
y,
|
320
320
|
{
|
321
321
|
bold: !0,
|
322
322
|
component: "text",
|
323
|
-
id: `budget-category-${
|
324
|
-
sx: { fill:
|
323
|
+
id: `budget-category-${h}`,
|
324
|
+
sx: { fill: d },
|
325
325
|
variant: "Small",
|
326
326
|
y: 4,
|
327
|
-
children:
|
327
|
+
children: u
|
328
328
|
}
|
329
329
|
),
|
330
|
-
p >
|
330
|
+
p > ue && /* @__PURE__ */ e(
|
331
331
|
y,
|
332
332
|
{
|
333
333
|
bold: !0,
|
334
334
|
component: "text",
|
335
|
-
id: `budget-description-${
|
336
|
-
sx: { fill:
|
335
|
+
id: `budget-description-${h}-1`,
|
336
|
+
sx: { fill: d },
|
337
337
|
variant: "Body",
|
338
338
|
y: p <= P ? 12 : 24,
|
339
339
|
children: p <= P ? _.split(" ")[0] : _
|
340
340
|
}
|
341
341
|
),
|
342
|
-
p <= P && p >
|
342
|
+
p <= P && p > ue && /* @__PURE__ */ e(
|
343
343
|
y,
|
344
344
|
{
|
345
345
|
component: "text",
|
346
|
-
id: `budget-description-${
|
347
|
-
sx: { fill:
|
346
|
+
id: `budget-description-${h}-2`,
|
347
|
+
sx: { fill: d },
|
348
348
|
variant: "XSmall",
|
349
349
|
y: 28,
|
350
350
|
children: _.split(" ")[1]
|
@@ -353,123 +353,123 @@ function Bt({ bubble: t, isDraggable: a, onClick: i = () => {
|
|
353
353
|
/* @__PURE__ */ e(St, { bubble: r })
|
354
354
|
]
|
355
355
|
},
|
356
|
-
|
356
|
+
h
|
357
357
|
);
|
358
358
|
}
|
359
359
|
const xt = ({
|
360
360
|
height: t,
|
361
|
-
width:
|
361
|
+
width: o,
|
362
362
|
isDraggable: i = !1,
|
363
363
|
onClick: s = () => {
|
364
364
|
}
|
365
365
|
}) => {
|
366
|
-
const [
|
367
|
-
const
|
368
|
-
if (
|
369
|
-
const p =
|
370
|
-
_.forEach((
|
371
|
-
const
|
372
|
-
|
373
|
-
vx:
|
374
|
-
vy:
|
375
|
-
x:
|
376
|
-
y:
|
366
|
+
const [a, n] = l.useState([]), r = l.useRef(null), c = l.useRef(!1), { detailedBudgets: d } = D(), g = l.useCallback(() => {
|
367
|
+
const u = r.current, h = ht(d), _ = h.nodes();
|
368
|
+
if (u) {
|
369
|
+
const p = u.nodes(), b = new Map(p.map((B) => [B.guid, B]));
|
370
|
+
_.forEach((B) => {
|
371
|
+
const f = b.get(B.guid);
|
372
|
+
f && Object.assign(B, {
|
373
|
+
vx: f.vx,
|
374
|
+
vy: f.vy,
|
375
|
+
x: f.x,
|
376
|
+
y: f.y
|
377
377
|
});
|
378
378
|
});
|
379
379
|
}
|
380
|
-
r.current =
|
381
|
-
}, [
|
380
|
+
r.current = h, c.current = !1, n(_);
|
381
|
+
}, [d]);
|
382
382
|
return l.useEffect(() => {
|
383
383
|
g();
|
384
384
|
}, [g]), l.useEffect(() => () => {
|
385
385
|
r.current && (r.current.stop(), r.current = null);
|
386
386
|
}, []), l.useEffect(() => {
|
387
|
-
const
|
388
|
-
if (!
|
389
|
-
const
|
390
|
-
|
391
|
-
gt(
|
392
|
-
}, 0),
|
393
|
-
}, [t,
|
387
|
+
const u = r.current;
|
388
|
+
if (!u) return;
|
389
|
+
const h = u.nodes(), _ = o > 0 && o < 450 || t > 0 && t < 300, p = yt(h, d, _, t, o);
|
390
|
+
u.nodes(p), pt(u, t, o), i && setTimeout(() => {
|
391
|
+
gt(u);
|
392
|
+
}, 0), n([...p]);
|
393
|
+
}, [t, o, i, d]), /* @__PURE__ */ e("svg", { height: t, style: { overflow: "visible" }, width: Math.abs(o), children: a.map((u) => /* @__PURE__ */ e(Bt, { bubble: u, isDraggable: i, onClick: s }, u.guid)) });
|
394
394
|
}, vt = I(xt), At = ({
|
395
395
|
isMiniWidget: t = !1,
|
396
|
-
onConnectAccountsClick:
|
396
|
+
onConnectAccountsClick: o,
|
397
397
|
createBudgetOnClick: i
|
398
398
|
}) => {
|
399
|
-
const {
|
400
|
-
|
401
|
-
const { data:
|
402
|
-
|
399
|
+
const { recalculateBudgets: s } = D(), { spendCategories: a } = j(), { budgets: n } = w(), { availableWidth: r } = te(), { isMobile: c } = se(r), d = c && t, [g, u] = l.useState(!1), [h, _] = l.useState(!1), [p, b] = l.useState(!1), B = l.useMemo(() => [...a.filter((C) => C.totalAverageAmount > 0)], [a]), f = async () => {
|
400
|
+
b(!0);
|
401
|
+
const { data: C, isSuccess: v } = await s(B);
|
402
|
+
b(!1), v ? (C.length === 0 && _(!0), u(!1)) : u(!0);
|
403
403
|
};
|
404
|
-
return
|
405
|
-
|
404
|
+
return p ? /* @__PURE__ */ e(G, {}) : g ? /* @__PURE__ */ e(
|
405
|
+
de,
|
406
406
|
{
|
407
|
-
header:
|
407
|
+
header: n.autogenerate_budgets_error_header,
|
408
408
|
icon: "error",
|
409
409
|
iconColor: "#4D4D4D",
|
410
|
-
onClick: (
|
411
|
-
|
410
|
+
onClick: (C) => {
|
411
|
+
C === "primary" ? f() : i();
|
412
412
|
},
|
413
|
-
primaryButton:
|
414
|
-
secondaryButton:
|
415
|
-
subText:
|
413
|
+
primaryButton: n.autogenerate_budgets_error_primary_button,
|
414
|
+
secondaryButton: n.zero_state_generate_budgets_secondary_button,
|
415
|
+
subText: n.autogenerate_budgets_error_subheader,
|
416
416
|
sx: {
|
417
417
|
width: { sm: 468 },
|
418
418
|
".buttons-footer": {
|
419
419
|
width: 208,
|
420
|
-
...
|
420
|
+
...d && { mt: 16, button: { height: "max-content" } }
|
421
421
|
},
|
422
|
-
...
|
422
|
+
...d && { mt: 0, svg: { height: 32, width: 32 } }
|
423
423
|
}
|
424
424
|
}
|
425
|
-
) : /* @__PURE__ */ e(je, { children:
|
426
|
-
|
425
|
+
) : /* @__PURE__ */ e(je, { children: h ? /* @__PURE__ */ e(
|
426
|
+
de,
|
427
427
|
{
|
428
|
-
header:
|
428
|
+
header: n.zero_state_generate_budgets_header,
|
429
429
|
icon: "error",
|
430
430
|
iconColor: "#4D4D4D",
|
431
|
-
onClick: (
|
432
|
-
|
431
|
+
onClick: (C) => {
|
432
|
+
C === "primary" ? o() : i();
|
433
433
|
},
|
434
|
-
primaryButton:
|
435
|
-
secondaryButton:
|
436
|
-
subText:
|
434
|
+
primaryButton: n.zero_state_generate_budgets_primary_button,
|
435
|
+
secondaryButton: n.zero_state_generate_budgets_secondary_button,
|
436
|
+
subText: n.zero_state_generate_budgets_subheader,
|
437
437
|
sx: {
|
438
438
|
width: t ? "100%" : { sm: 500 },
|
439
439
|
height: t ? "100%" : { sm: 468 },
|
440
|
-
mt:
|
440
|
+
mt: d ? 0 : 50,
|
441
441
|
".buttons-footer": {
|
442
442
|
width: 208,
|
443
443
|
height: 100,
|
444
|
-
...
|
444
|
+
...d && { mt: 16, button: { height: "max-content" } }
|
445
445
|
},
|
446
446
|
padding: t ? 5 : 0,
|
447
|
-
...
|
447
|
+
...d && { svg: { height: 32, width: 32 } }
|
448
448
|
}
|
449
449
|
}
|
450
450
|
) : /* @__PURE__ */ e(
|
451
|
-
|
451
|
+
de,
|
452
452
|
{
|
453
|
-
header:
|
453
|
+
header: n.create_budgets_title,
|
454
454
|
icon: "bubble_chart",
|
455
455
|
iconColor: "#1A1A1A",
|
456
|
-
onClick: (
|
457
|
-
|
456
|
+
onClick: (C) => {
|
457
|
+
C === "primary" ? f() : i();
|
458
458
|
},
|
459
|
-
primaryButton:
|
460
|
-
secondaryButton: t ? void 0 :
|
461
|
-
subText:
|
459
|
+
primaryButton: n.empty_state_primary_button,
|
460
|
+
secondaryButton: t ? void 0 : n.empty_state_secondary_button,
|
461
|
+
subText: n.empty_state_subheader,
|
462
462
|
sx: {
|
463
463
|
width: t ? "100%" : { sm: 432 },
|
464
464
|
height: t ? "100%" : { sm: 468 },
|
465
|
-
mt:
|
465
|
+
mt: d ? 0 : 50,
|
466
466
|
".buttons-footer": {
|
467
467
|
width: 208,
|
468
468
|
height: 100,
|
469
|
-
...
|
469
|
+
...d && { mt: 24, button: { height: "max-content" } }
|
470
470
|
},
|
471
471
|
padding: t ? 4 : 0,
|
472
|
-
...
|
472
|
+
...d && { svg: { height: 32, width: 32 } }
|
473
473
|
}
|
474
474
|
}
|
475
475
|
) });
|
@@ -477,35 +477,35 @@ const xt = ({
|
|
477
477
|
({
|
478
478
|
createBudgetOnClick: t = () => {
|
479
479
|
},
|
480
|
-
height:
|
480
|
+
height: o,
|
481
481
|
isDraggable: i = !1,
|
482
482
|
isMiniWidget: s = !1,
|
483
|
-
shouldShowZeroState:
|
484
|
-
unavailableWidth:
|
483
|
+
shouldShowZeroState: a,
|
484
|
+
unavailableWidth: n = 24
|
485
485
|
}) => {
|
486
|
-
const { onEvent: r } = X(), { setSelectedBudget: c } = D(), { isLoadingCategoryTotals:
|
486
|
+
const { onEvent: r } = X(), { setSelectedBudget: c } = D(), { isLoadingCategoryTotals: d } = j(), { isInitialized: g } = ne(), { accounts: u } = w(), { availableWidth: h } = te(), { isMobile: _ } = se(), [p, b] = l.useState(!1), B = l.useMemo(() => h - n, [h]), f = (v) => {
|
487
487
|
c(v), r(L.BUDGETS_CLICK_BUDGET_CATEGORY, {
|
488
488
|
budget_category: v.category.name,
|
489
489
|
click_type: "bubble"
|
490
490
|
});
|
491
|
-
},
|
491
|
+
}, C = () => {
|
492
492
|
b(!0), r(L.ACCOUNTS_CLICK_CONNECT);
|
493
493
|
};
|
494
|
-
return
|
495
|
-
|
494
|
+
return d ? /* @__PURE__ */ e(S, { alignItems: "center", height: o, justifyContent: "center", width: Math.abs(B), children: /* @__PURE__ */ e(G, {}) }) : /* @__PURE__ */ m(F, { ml: a || _ ? 0 : 24, sx: { alignSelf: "center" }, children: [
|
495
|
+
a || !g ? /* @__PURE__ */ e(
|
496
496
|
At,
|
497
497
|
{
|
498
498
|
createBudgetOnClick: t,
|
499
499
|
isMiniWidget: s,
|
500
|
-
onConnectAccountsClick:
|
500
|
+
onConnectAccountsClick: C
|
501
501
|
}
|
502
502
|
) : /* @__PURE__ */ e(
|
503
503
|
vt,
|
504
504
|
{
|
505
|
-
height:
|
505
|
+
height: o,
|
506
506
|
isDraggable: i,
|
507
|
-
onClick:
|
508
|
-
width:
|
507
|
+
onClick: f,
|
508
|
+
width: B
|
509
509
|
}
|
510
510
|
),
|
511
511
|
/* @__PURE__ */ e(
|
@@ -513,26 +513,26 @@ const xt = ({
|
|
513
513
|
{
|
514
514
|
onClose: () => b(!1),
|
515
515
|
showConnectionsWidget: p,
|
516
|
-
title:
|
516
|
+
title: u.manage_connections
|
517
517
|
}
|
518
518
|
)
|
519
519
|
] });
|
520
520
|
}
|
521
521
|
), Tt = ({
|
522
522
|
budgetsCopy: t,
|
523
|
-
difference:
|
523
|
+
difference: o,
|
524
524
|
handleAddClick: i,
|
525
525
|
shouldShowZeroState: s
|
526
526
|
}) => {
|
527
|
-
const { availableHeight:
|
527
|
+
const { availableHeight: a = 0 } = te(), n = l.useRef(null);
|
528
528
|
l.useEffect(() => {
|
529
|
-
|
530
|
-
}, [
|
529
|
+
a > 0 && n.current === null && (n.current = a);
|
530
|
+
}, [a]);
|
531
531
|
const r = l.useMemo(() => {
|
532
|
-
const c =
|
532
|
+
const c = n.current ?? a;
|
533
533
|
return c > 0 ? Math.round(Math.max(120, Math.min(450, c * 0.8))) - 40 : 450;
|
534
|
-
}, [
|
535
|
-
return /* @__PURE__ */
|
534
|
+
}, [a]);
|
535
|
+
return /* @__PURE__ */ m(S, { sx: { height: "100%", justifyContent: "space-between" }, children: [
|
536
536
|
/* @__PURE__ */ e(
|
537
537
|
Me,
|
538
538
|
{
|
@@ -542,24 +542,24 @@ const xt = ({
|
|
542
542
|
shouldShowZeroState: s
|
543
543
|
}
|
544
544
|
),
|
545
|
-
!s && /* @__PURE__ */
|
546
|
-
/* @__PURE__ */ e(y, { bold: !0, color:
|
547
|
-
/* @__PURE__ */ e(y, { children:
|
545
|
+
!s && /* @__PURE__ */ m(F, { ml: 16, children: [
|
546
|
+
/* @__PURE__ */ e(y, { bold: !0, color: o < 0 ? "error.main" : "success.main", children: T(Math.abs(o), "0,0") }),
|
547
|
+
/* @__PURE__ */ e(y, { children: o < 0 ? t.overspent_in_budgets : t.left_in_budgets })
|
548
548
|
] })
|
549
549
|
] });
|
550
550
|
}, wt = (t) => {
|
551
|
-
const
|
552
|
-
|
553
|
-
}, v = () =>
|
551
|
+
const o = Q(), { onEvent: i } = X(), { detailedBudgets: s, isDataLoaded: a, loadBudgetData: n, setTheme: r } = D(), { budgets: c, common: d } = w(), { isCopyLoaded: g, isInitialized: u, selectedAccounts: h } = ne(), { reloadCategoryTotals: _ } = j(), p = Ve(), b = s.length === 0, [B, f] = l.useState(!1), C = () => {
|
552
|
+
f(!0), i(L.BUDGETS_CLICK_ADD);
|
553
|
+
}, v = () => f(!1);
|
554
554
|
return l.useEffect(() => {
|
555
|
-
r(
|
556
|
-
}, [
|
557
|
-
|
555
|
+
r(o);
|
556
|
+
}, [o]), l.useEffect(() => {
|
557
|
+
u && !a && _(h, q(/* @__PURE__ */ new Date()), me(/* @__PURE__ */ new Date())).then(
|
558
558
|
() => {
|
559
|
-
|
559
|
+
n().finally();
|
560
560
|
}
|
561
561
|
);
|
562
|
-
}, [
|
562
|
+
}, [u, h]), g ? /* @__PURE__ */ m(
|
563
563
|
Ye,
|
564
564
|
{
|
565
565
|
contentStyles: { height: "calc(100% - 66px)", ":last-child": { pb: 0 } },
|
@@ -568,21 +568,21 @@ const xt = ({
|
|
568
568
|
title: c.budgets_title,
|
569
569
|
...t,
|
570
570
|
children: [
|
571
|
-
|
571
|
+
a ? /* @__PURE__ */ e(
|
572
572
|
Tt,
|
573
573
|
{
|
574
574
|
budgetsCopy: c,
|
575
575
|
difference: p,
|
576
|
-
handleAddClick:
|
576
|
+
handleAddClick: C,
|
577
577
|
shouldShowZeroState: b
|
578
578
|
}
|
579
579
|
) : /* @__PURE__ */ e(G, {}),
|
580
580
|
/* @__PURE__ */ e(
|
581
581
|
k,
|
582
582
|
{
|
583
|
-
ariaLabelClose:
|
584
|
-
isOpen:
|
585
|
-
onClose: () =>
|
583
|
+
ariaLabelClose: d.close_aria,
|
584
|
+
isOpen: B,
|
585
|
+
onClose: () => f(!1),
|
586
586
|
title: c.add_new_title,
|
587
587
|
children: /* @__PURE__ */ e(Ie, { onRecalculateBudgets: v })
|
588
588
|
}
|
@@ -592,68 +592,68 @@ const xt = ({
|
|
592
592
|
) : /* @__PURE__ */ e(G, {});
|
593
593
|
}, Mn = I(wt), Re = ({ budget: t }) => {
|
594
594
|
const {
|
595
|
-
amount:
|
595
|
+
amount: o,
|
596
596
|
budgetColors: { background: i },
|
597
597
|
category: { name: s },
|
598
|
-
category_guid:
|
599
|
-
percentage:
|
598
|
+
category_guid: a,
|
599
|
+
percentage: n,
|
600
600
|
transaction_total: r
|
601
601
|
} = t, c = [
|
602
602
|
{
|
603
603
|
color: i,
|
604
|
-
percentage: `${
|
604
|
+
percentage: `${n}%`
|
605
605
|
}
|
606
606
|
];
|
607
|
-
return /* @__PURE__ */ e(pe, { sx: { mt: 24, mx: 24 }, children: /* @__PURE__ */ e(he, { children: /* @__PURE__ */
|
608
|
-
/* @__PURE__ */ e(H, { categoryGuid:
|
609
|
-
/* @__PURE__ */ e(ze, { children: `${T(r, "0,0")} / ${T(
|
607
|
+
return /* @__PURE__ */ e(pe, { sx: { mt: 24, mx: 24 }, children: /* @__PURE__ */ e(he, { children: /* @__PURE__ */ m(S, { alignItems: "center", gap: 16, children: [
|
608
|
+
/* @__PURE__ */ e(H, { categoryGuid: a, size: 56 }),
|
609
|
+
/* @__PURE__ */ e(ze, { children: `${T(r, "0,0")} / ${T(o, "0,0")}` }),
|
610
610
|
/* @__PURE__ */ e(y, { bold: !0, variant: "XSmall", children: s }),
|
611
|
-
/* @__PURE__ */ e(
|
611
|
+
/* @__PURE__ */ e(ge, { data: c, height: 10 })
|
612
612
|
] }) }) });
|
613
613
|
}, Dt = I(() => {
|
614
614
|
const { budgets: t } = w();
|
615
|
-
return /* @__PURE__ */
|
615
|
+
return /* @__PURE__ */ m(S, { alignItems: "center", gap: 12, height: "auto", mb: 24, mt: 24, children: [
|
616
616
|
/* @__PURE__ */ e(N, { color: "secondary", name: "bubble_chart", sx: { fontSize: 32 } }),
|
617
617
|
/* @__PURE__ */ e(y, { bold: !0, color: "secondary", variant: "Small", children: t.zero_state_no_sub_budgets }),
|
618
618
|
/* @__PURE__ */ e(y, { color: "text.secondary", variant: "XSmall", children: t.zero_state_no_sub_budgets_description })
|
619
619
|
] });
|
620
620
|
}), It = I(({ budget: t }) => {
|
621
621
|
const {
|
622
|
-
amount:
|
622
|
+
amount: o,
|
623
623
|
budgetColors: { background: i },
|
624
624
|
category: s,
|
625
|
-
percentage:
|
626
|
-
transaction_total:
|
625
|
+
percentage: a,
|
626
|
+
transaction_total: n
|
627
627
|
} = t, { setSelectedSubBudget: r } = D();
|
628
|
-
return /* @__PURE__ */ e(K, { children: /* @__PURE__ */
|
629
|
-
/* @__PURE__ */ e(re, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(we, { color: i, percent:
|
628
|
+
return /* @__PURE__ */ e(K, { children: /* @__PURE__ */ m(V, { onClick: () => r(t), children: [
|
629
|
+
/* @__PURE__ */ e(re, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(we, { color: i, percent: a, size: 40, children: /* @__PURE__ */ e(H, { categoryGuid: s.parent_guid, variant: "basic" }) }) }),
|
630
630
|
/* @__PURE__ */ e(
|
631
631
|
Y,
|
632
632
|
{
|
633
|
-
primary: /* @__PURE__ */ e(
|
634
|
-
secondary: /* @__PURE__ */ e(
|
635
|
-
${T(
|
636
|
-
${T(
|
633
|
+
primary: /* @__PURE__ */ e(S, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(y, { bold: !0, variant: "Body", children: t.category.name }) }),
|
634
|
+
secondary: /* @__PURE__ */ e(S, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(y, { fontWeight: 400, variant: "Body", children: `
|
635
|
+
${T(n, "0,0")} /
|
636
|
+
${T(o, "0,0")}
|
637
637
|
` }) })
|
638
638
|
}
|
639
639
|
)
|
640
640
|
] }) });
|
641
|
-
}), Et = I(({ category: t, parentBudget:
|
642
|
-
const { budgets: i, common: s } = w(), { setExpandedGuid:
|
641
|
+
}), Et = I(({ category: t, parentBudget: o }) => {
|
642
|
+
const { budgets: i, common: s } = w(), { setExpandedGuid: a, setOnSelect: n } = nt(), { addBudget: r } = D(), [c, d] = l.useState(!1), [g, u] = l.useState(!1), [h, _] = l.useState(""), [p, b] = l.useState(void 0);
|
643
643
|
l.useEffect(() => {
|
644
|
-
|
645
|
-
const v = t.subCategories.find((A) => A.guid ===
|
646
|
-
v && (b(v), _(`${v.currentAmount === 0 ? "" : v.currentAmount}`),
|
644
|
+
n((C) => {
|
645
|
+
const v = t.subCategories.find((A) => A.guid === C);
|
646
|
+
v && (b(v), _(`${v.currentAmount === 0 ? "" : v.currentAmount}`), u(!0));
|
647
647
|
});
|
648
648
|
}, []);
|
649
|
-
const
|
650
|
-
|
651
|
-
},
|
652
|
-
p && Number(
|
649
|
+
const B = () => {
|
650
|
+
a(t.guid), d(!0);
|
651
|
+
}, f = async () => {
|
652
|
+
p && Number(h) > 0 && (await r(p, Number(h), o.guid), u(!1), d(!1), b(void 0));
|
653
653
|
};
|
654
|
-
return /* @__PURE__ */
|
655
|
-
/* @__PURE__ */ e(K, { disableGutters: !0, disablePadding: !0, sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(V, { onClick:
|
656
|
-
/* @__PURE__ */
|
654
|
+
return /* @__PURE__ */ m(F, { children: [
|
655
|
+
/* @__PURE__ */ e(K, { disableGutters: !0, disablePadding: !0, sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(V, { onClick: B, children: /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ m(S, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
|
656
|
+
/* @__PURE__ */ m(S, { alignItems: "center", direction: "row", gap: 8, children: [
|
657
657
|
/* @__PURE__ */ e(N, { fill: !0, name: "add_box", size: 24, sx: { color: "primary.light" } }),
|
658
658
|
/* @__PURE__ */ e(y, { bold: !0, sx: { color: "primary.light" }, variant: "Body", children: i.add_sub_budget_button })
|
659
659
|
] }),
|
@@ -665,7 +665,7 @@ const xt = ({
|
|
665
665
|
{
|
666
666
|
ariaLabelClose: s.close_aria,
|
667
667
|
isOpen: c,
|
668
|
-
onClose: () =>
|
668
|
+
onClose: () => d(!1),
|
669
669
|
title: i.add_sub_budget_title,
|
670
670
|
children: /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(ot, { category: t, subCategories: t.subCategories }) })
|
671
671
|
}
|
@@ -674,15 +674,15 @@ const xt = ({
|
|
674
674
|
$,
|
675
675
|
{
|
676
676
|
copy: { close_aria: s.close_aria, title: i.add_title },
|
677
|
-
disablePrimaryButton: Number(
|
677
|
+
disablePrimaryButton: Number(h) <= 0,
|
678
678
|
isOpen: g,
|
679
|
-
onClose: () =>
|
680
|
-
onPrimaryAction:
|
679
|
+
onClose: () => u(!1),
|
680
|
+
onPrimaryAction: f,
|
681
681
|
primaryText: i.add_save_button,
|
682
682
|
children: /* @__PURE__ */ e(
|
683
|
-
|
683
|
+
ie,
|
684
684
|
{
|
685
|
-
amount:
|
685
|
+
amount: h,
|
686
686
|
categoryName: p?.name || "",
|
687
687
|
onAmountChanged: _
|
688
688
|
}
|
@@ -691,38 +691,38 @@ const xt = ({
|
|
691
691
|
)
|
692
692
|
] });
|
693
693
|
}), Ot = I(({ budget: t }) => {
|
694
|
-
const { category:
|
694
|
+
const { category: o, subBudgets: i } = t, { budgets: s, common: a } = w(), { deleteBudget: n, selectedSubBudget: r, setSelectedSubBudget: c, updateBudget: d } = D(), { filter: g, setFilter: u } = oe(), [h, _] = l.useState(!1), [p, b] = l.useState(!1), [B, f] = l.useState("");
|
695
695
|
l.useEffect(() => {
|
696
|
-
r && (
|
696
|
+
r && (f(`${r.amount}`), u({
|
697
697
|
...g,
|
698
|
-
custom: (
|
698
|
+
custom: (x) => x.category_guid === r.category_guid
|
699
699
|
}));
|
700
700
|
}, [r]);
|
701
|
-
const
|
702
|
-
r && await
|
701
|
+
const C = async () => {
|
702
|
+
r && await d({
|
703
703
|
...r,
|
704
|
-
amount: Number(
|
704
|
+
amount: Number(B)
|
705
705
|
});
|
706
706
|
}, v = async () => {
|
707
|
-
r && await
|
707
|
+
r && await n(r.guid), b(!1), A();
|
708
708
|
}, A = () => {
|
709
|
-
|
709
|
+
u({
|
710
710
|
...g,
|
711
|
-
custom: (
|
711
|
+
custom: (x) => x.category_guid === t.category_guid || x.top_level_category_guid === t.category_guid
|
712
712
|
}), c(void 0);
|
713
713
|
};
|
714
|
-
return /* @__PURE__ */
|
715
|
-
/* @__PURE__ */
|
716
|
-
i.length === 0 ? /* @__PURE__ */ e(Dt, {}) : i.map((
|
717
|
-
/* @__PURE__ */ e(It, { budget:
|
714
|
+
return /* @__PURE__ */ m(l.Fragment, { children: [
|
715
|
+
/* @__PURE__ */ m(W, { sx: { bgcolor: "background.paper" }, children: [
|
716
|
+
i.length === 0 ? /* @__PURE__ */ e(Dt, {}) : i.map((x) => /* @__PURE__ */ m(l.Fragment, { children: [
|
717
|
+
/* @__PURE__ */ e(It, { budget: x }),
|
718
718
|
/* @__PURE__ */ e(ae, {})
|
719
|
-
] },
|
720
|
-
/* @__PURE__ */ e(Et, { category:
|
719
|
+
] }, x.guid)),
|
720
|
+
/* @__PURE__ */ e(Et, { category: o, parentBudget: t })
|
721
721
|
] }),
|
722
722
|
/* @__PURE__ */ e(
|
723
723
|
k,
|
724
724
|
{
|
725
|
-
ariaLabelClose:
|
725
|
+
ariaLabelClose: a.close_aria,
|
726
726
|
isOpen: !!r,
|
727
727
|
onClose: A,
|
728
728
|
onPrimaryAction: () => _(!0),
|
@@ -730,28 +730,28 @@ const xt = ({
|
|
730
730
|
primaryText: s.details_edit_button,
|
731
731
|
secondaryText: s.details_delete_button,
|
732
732
|
title: s.details_title,
|
733
|
-
children: r && /* @__PURE__ */
|
733
|
+
children: r && /* @__PURE__ */ m(S, { gap: 24, children: [
|
734
734
|
/* @__PURE__ */ e(Re, { budget: r }),
|
735
735
|
/* @__PURE__ */ e(Te, { height: "100%" })
|
736
736
|
] })
|
737
737
|
}
|
738
738
|
),
|
739
|
-
r && /* @__PURE__ */
|
739
|
+
r && /* @__PURE__ */ m(l.Fragment, { children: [
|
740
740
|
/* @__PURE__ */ e(
|
741
741
|
$,
|
742
742
|
{
|
743
|
-
copy: { close_aria:
|
744
|
-
disablePrimaryButton: Number(
|
745
|
-
isOpen:
|
743
|
+
copy: { close_aria: a.close_aria, title: s.details_edit_title },
|
744
|
+
disablePrimaryButton: Number(B) <= 0,
|
745
|
+
isOpen: h,
|
746
746
|
onClose: () => _(!1),
|
747
|
-
onPrimaryAction:
|
747
|
+
onPrimaryAction: C,
|
748
748
|
primaryText: s.edit_save_button,
|
749
749
|
children: /* @__PURE__ */ e(
|
750
|
-
|
750
|
+
ie,
|
751
751
|
{
|
752
|
-
amount:
|
752
|
+
amount: B,
|
753
753
|
categoryName: r.category.name,
|
754
|
-
onAmountChanged:
|
754
|
+
onAmountChanged: f
|
755
755
|
}
|
756
756
|
)
|
757
757
|
}
|
@@ -759,7 +759,7 @@ const xt = ({
|
|
759
759
|
/* @__PURE__ */ e(
|
760
760
|
$,
|
761
761
|
{
|
762
|
-
copy: { close_aria:
|
762
|
+
copy: { close_aria: a.close_aria, title: s.delete_title },
|
763
763
|
isOpen: p,
|
764
764
|
onClose: () => b(!1),
|
765
765
|
onPrimaryAction: v,
|
@@ -772,25 +772,25 @@ const xt = ({
|
|
772
772
|
] })
|
773
773
|
] });
|
774
774
|
}), Mt = I(({ budget: t }) => {
|
775
|
-
const { is_mobile_webview:
|
775
|
+
const { is_mobile_webview: o } = Ue(), { setAlert: i } = D(), { budgets: s, common: a, transactions: n } = w(), { isDesktop: r, isSmallTablet: c, isTablet: d } = se(), {
|
776
776
|
sortedTransactions: g,
|
777
|
-
sortedTransactionsWithSplits:
|
778
|
-
tags:
|
779
|
-
} = oe(), [_, p] = l.useState(0), [b,
|
780
|
-
() => g.find((
|
777
|
+
sortedTransactionsWithSplits: u,
|
778
|
+
tags: h
|
779
|
+
} = oe(), [_, p] = l.useState(0), [b, B] = l.useState(""), f = l.useMemo(
|
780
|
+
() => g.find((x) => x.guid === b),
|
781
781
|
[b, g]
|
782
|
-
),
|
782
|
+
), C = (x, E) => {
|
783
783
|
p(E);
|
784
784
|
}, v = () => {
|
785
|
-
et(
|
786
|
-
}, A = g.length > 0 && !
|
787
|
-
return /* @__PURE__ */
|
785
|
+
et(u, h), i(s.alert_csv_downloaded);
|
786
|
+
}, A = g.length > 0 && !o && (r || d && !c);
|
787
|
+
return /* @__PURE__ */ m(S, { gap: 24, children: [
|
788
788
|
/* @__PURE__ */ e(Re, { budget: t }),
|
789
|
-
/* @__PURE__ */
|
790
|
-
/* @__PURE__ */
|
789
|
+
/* @__PURE__ */ m(S, { children: [
|
790
|
+
/* @__PURE__ */ m(
|
791
791
|
Qe,
|
792
792
|
{
|
793
|
-
onChange:
|
793
|
+
onChange: C,
|
794
794
|
sx: { width: "100%" },
|
795
795
|
textColor: "primary",
|
796
796
|
value: _,
|
@@ -801,93 +801,93 @@ const xt = ({
|
|
801
801
|
]
|
802
802
|
}
|
803
803
|
),
|
804
|
-
_ === 0 && /* @__PURE__ */
|
805
|
-
A && /* @__PURE__ */ e(
|
804
|
+
_ === 0 && /* @__PURE__ */ m(S, { children: [
|
805
|
+
A && /* @__PURE__ */ e(S, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ e(
|
806
806
|
Ae,
|
807
807
|
{
|
808
808
|
onClick: v,
|
809
809
|
startIcon: /* @__PURE__ */ e(N, { name: "ios_share" }),
|
810
810
|
variant: "text",
|
811
|
-
children:
|
811
|
+
children: n.export_csv_btn
|
812
812
|
}
|
813
813
|
) }),
|
814
|
-
/* @__PURE__ */ e(Te, { height: "100%", onClick:
|
814
|
+
/* @__PURE__ */ e(Te, { height: "100%", onClick: B })
|
815
815
|
] }),
|
816
816
|
_ === 1 && /* @__PURE__ */ e(Ot, { budget: t }),
|
817
817
|
/* @__PURE__ */ e(
|
818
818
|
k,
|
819
819
|
{
|
820
|
-
ariaLabelClose:
|
821
|
-
isOpen: !!
|
822
|
-
onClose: () =>
|
820
|
+
ariaLabelClose: a.close_aria,
|
821
|
+
isOpen: !!f,
|
822
|
+
onClose: () => B(""),
|
823
823
|
title: s.details_transaction_drawer,
|
824
|
-
children:
|
824
|
+
children: f && /* @__PURE__ */ e(tt, { transaction: f })
|
825
825
|
}
|
826
826
|
)
|
827
827
|
] })
|
828
828
|
] });
|
829
829
|
}), Rt = I(() => {
|
830
|
-
const { selectedAccountGuids: t } = ne(), { budgets:
|
830
|
+
const { selectedAccountGuids: t } = ne(), { budgets: o, common: i } = w(), {
|
831
831
|
dateRange: s,
|
832
|
-
deleteBudget:
|
833
|
-
selectedBudget:
|
832
|
+
deleteBudget: a,
|
833
|
+
selectedBudget: n,
|
834
834
|
selectedSubBudget: r,
|
835
835
|
setAlert: c,
|
836
|
-
setSelectedBudget:
|
836
|
+
setSelectedBudget: d,
|
837
837
|
updateBudget: g
|
838
|
-
} = D(), { setFilter:
|
838
|
+
} = D(), { setFilter: u } = oe(), [h, _] = l.useState(!1), [p, b] = l.useState(!1), [B, f] = l.useState(!1), [C, v] = l.useState("");
|
839
839
|
l.useEffect(() => {
|
840
|
-
|
840
|
+
n && !r && (v(`${n.amount}`), _(!0), u({
|
841
841
|
accounts: t,
|
842
842
|
dateRange: s,
|
843
|
-
custom: (R) => R.category_guid ===
|
843
|
+
custom: (R) => R.category_guid === n.category_guid || R.top_level_category_guid === n.category_guid,
|
844
844
|
showSplits: !0
|
845
845
|
}));
|
846
|
-
}, [
|
846
|
+
}, [n]);
|
847
847
|
const A = async () => {
|
848
|
-
|
849
|
-
...
|
850
|
-
amount: Number(
|
851
|
-
percentage:
|
852
|
-
}), c(M(
|
853
|
-
},
|
854
|
-
|
848
|
+
n && (await g({
|
849
|
+
...n,
|
850
|
+
amount: Number(C),
|
851
|
+
percentage: n.category.totalAmount / Number(C) * 100
|
852
|
+
}), c(M(o.alert_budget_updated, n.category.name)));
|
853
|
+
}, x = async () => {
|
854
|
+
n && (await a(n.guid), c(M(o.alert_budget_deleted, n.category.name))), f(!1), E();
|
855
855
|
}, E = () => {
|
856
856
|
_(!1), setTimeout(() => {
|
857
|
-
|
857
|
+
d(void 0);
|
858
858
|
}, 250);
|
859
859
|
};
|
860
|
-
if (
|
861
|
-
return /* @__PURE__ */
|
860
|
+
if (n)
|
861
|
+
return /* @__PURE__ */ m(l.Fragment, { children: [
|
862
862
|
/* @__PURE__ */ e(
|
863
863
|
k,
|
864
864
|
{
|
865
865
|
ariaLabelClose: i.close_aria,
|
866
|
-
isOpen:
|
866
|
+
isOpen: h,
|
867
867
|
onClose: E,
|
868
868
|
onPrimaryAction: () => b(!0),
|
869
|
-
onSecondaryAction: () =>
|
870
|
-
primaryText:
|
869
|
+
onSecondaryAction: () => f(!0),
|
870
|
+
primaryText: o.details_edit_button,
|
871
871
|
secondaryColor: "error",
|
872
|
-
secondaryText:
|
873
|
-
title:
|
874
|
-
children: /* @__PURE__ */ e(Mt, { budget:
|
872
|
+
secondaryText: o.details_delete_button,
|
873
|
+
title: o.details_title,
|
874
|
+
children: /* @__PURE__ */ e(Mt, { budget: n })
|
875
875
|
}
|
876
876
|
),
|
877
877
|
/* @__PURE__ */ e(
|
878
878
|
$,
|
879
879
|
{
|
880
|
-
copy: { close_aria: i.close_aria, title:
|
881
|
-
disablePrimaryButton: Number(
|
880
|
+
copy: { close_aria: i.close_aria, title: o.details_edit_title },
|
881
|
+
disablePrimaryButton: Number(C) <= 0,
|
882
882
|
isOpen: p,
|
883
883
|
onClose: () => b(!1),
|
884
884
|
onPrimaryAction: A,
|
885
|
-
primaryText:
|
885
|
+
primaryText: o.edit_save_button,
|
886
886
|
children: /* @__PURE__ */ e(
|
887
|
-
|
887
|
+
ie,
|
888
888
|
{
|
889
|
-
amount:
|
890
|
-
categoryName:
|
889
|
+
amount: C,
|
890
|
+
categoryName: n.category.name,
|
891
891
|
onAmountChanged: v
|
892
892
|
}
|
893
893
|
)
|
@@ -896,175 +896,175 @@ const xt = ({
|
|
896
896
|
/* @__PURE__ */ e(
|
897
897
|
$,
|
898
898
|
{
|
899
|
-
copy: { close_aria: i.close_aria, title:
|
900
|
-
isOpen:
|
901
|
-
onClose: () =>
|
902
|
-
onPrimaryAction:
|
899
|
+
copy: { close_aria: i.close_aria, title: o.delete_title },
|
900
|
+
isOpen: B,
|
901
|
+
onClose: () => f(!1),
|
902
|
+
onPrimaryAction: x,
|
903
903
|
primaryColor: "error",
|
904
|
-
primaryText:
|
904
|
+
primaryText: o.details_delete_button,
|
905
905
|
secondaryColor: "secondary",
|
906
|
-
children: /* @__PURE__ */ e(y, { variant: "Paragraph", children: M(
|
906
|
+
children: /* @__PURE__ */ e(y, { variant: "Paragraph", children: M(o.delete_description, n.category.name) })
|
907
907
|
}
|
908
908
|
)
|
909
909
|
] });
|
910
|
-
}), Lt = ({ budget: t, onClick:
|
910
|
+
}), Lt = ({ budget: t, onClick: o }) => {
|
911
911
|
const {
|
912
912
|
amount: i,
|
913
|
-
budgetColors: { background: s, description:
|
914
|
-
category_guid:
|
913
|
+
budgetColors: { background: s, description: a },
|
914
|
+
category_guid: n,
|
915
915
|
description: r,
|
916
916
|
percentage: c,
|
917
|
-
subBudgets:
|
917
|
+
subBudgets: d,
|
918
918
|
transaction_total: g
|
919
919
|
} = t;
|
920
|
-
return /* @__PURE__ */ e(K, { children: /* @__PURE__ */
|
921
|
-
/* @__PURE__ */ e(re, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(we, { color: s, percent: c, size: 40, children: /* @__PURE__ */ e(H, { categoryGuid:
|
920
|
+
return /* @__PURE__ */ e(K, { children: /* @__PURE__ */ m(V, { onClick: () => o?.(t), children: [
|
921
|
+
/* @__PURE__ */ e(re, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(we, { color: s, percent: c, size: 40, children: /* @__PURE__ */ e(H, { categoryGuid: n, variant: "basic" }) }) }),
|
922
922
|
/* @__PURE__ */ e(
|
923
923
|
Y,
|
924
924
|
{
|
925
|
-
primary: /* @__PURE__ */
|
925
|
+
primary: /* @__PURE__ */ m(S, { component: "span", direction: "row", justifyContent: "space-between", children: [
|
926
926
|
/* @__PURE__ */ e(y, { bold: !0, variant: "Body", children: t.category.name }),
|
927
927
|
/* @__PURE__ */ e(y, { fontWeight: 400, variant: "Body", children: `
|
928
928
|
${T(g, "0,0")} /
|
929
929
|
${T(i, "0,0")}
|
930
930
|
` })
|
931
931
|
] }),
|
932
|
-
secondary: /* @__PURE__ */
|
933
|
-
/* @__PURE__ */ e(y, { variant: "XSmall", children: `${
|
934
|
-
/* @__PURE__ */ e(y, { bold: c > 100, color:
|
932
|
+
secondary: /* @__PURE__ */ m(S, { component: "span", direction: "row", justifyContent: "space-between", children: [
|
933
|
+
/* @__PURE__ */ e(y, { variant: "XSmall", children: `${d.length} Sub-budgets` }),
|
934
|
+
/* @__PURE__ */ e(y, { bold: c > 100, color: a, variant: "XSmall", children: r })
|
935
935
|
] })
|
936
936
|
}
|
937
937
|
)
|
938
938
|
] }) });
|
939
939
|
}, kt = I(() => {
|
940
|
-
const { onEvent: t } = X(), { budgets:
|
941
|
-
s(
|
942
|
-
budget_category:
|
940
|
+
const { onEvent: t } = X(), { budgets: o } = w(), { detailedBudgets: i, setSelectedBudget: s } = D(), a = (n) => {
|
941
|
+
s(n), t(L.BUDGETS_CLICK_BUDGET_CATEGORY, {
|
942
|
+
budget_category: n.category.name,
|
943
943
|
click_type: "list"
|
944
944
|
});
|
945
945
|
};
|
946
|
-
return /* @__PURE__ */
|
947
|
-
/* @__PURE__ */ e(De, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(xe, { children:
|
948
|
-
/* @__PURE__ */ e(he, { sx: { p: 0, ":last-child": { p: 0 } }, children: /* @__PURE__ */ e(W, { children: i.map((
|
949
|
-
/* @__PURE__ */ e(Lt, { budget:
|
946
|
+
return /* @__PURE__ */ m(pe, { elevation: 2, children: [
|
947
|
+
/* @__PURE__ */ e(De, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(xe, { children: o.budget_categories_title }) }),
|
948
|
+
/* @__PURE__ */ e(he, { sx: { p: 0, ":last-child": { p: 0 } }, children: /* @__PURE__ */ e(W, { children: i.map((n) => /* @__PURE__ */ m(l.Fragment, { children: [
|
949
|
+
/* @__PURE__ */ e(Lt, { budget: n, onClick: a }),
|
950
950
|
/* @__PURE__ */ e(ae, {})
|
951
|
-
] },
|
951
|
+
] }, n.guid)) }) })
|
952
952
|
] });
|
953
953
|
}), Nt = I(() => {
|
954
|
-
const t = Q(), { onEvent:
|
955
|
-
const A = c.reduce((z,
|
956
|
-
let
|
957
|
-
|
954
|
+
const t = Q(), { onEvent: o } = X(), { visibleAccounts: i } = ve(), { budgets: s, common: a, recurring: n } = w(), { incomeCategories: r, spendCategories: c } = j(), { detailedBudgets: d, totalBudgeted: g } = D(), { incomeTotal: u } = ee(), { setFilter: h } = oe(), [_, p] = l.useState(!1), [b, B] = l.useMemo(() => {
|
955
|
+
const A = c.reduce((z, ce) => z + ce.totalAmount, 0);
|
956
|
+
let x = A / g;
|
957
|
+
x > 1 && (x = 1);
|
958
958
|
let E = t.palette.success.main;
|
959
|
-
|
959
|
+
x > 0.8 && x < 1 ? E = t.palette.warning.main : x >= 1 && (E = t.palette.error.main);
|
960
960
|
const R = [
|
961
961
|
{
|
962
962
|
color: E,
|
963
|
-
percentage: `${
|
963
|
+
percentage: `${x}`
|
964
964
|
}
|
965
965
|
];
|
966
966
|
return [A, R];
|
967
|
-
}, [
|
967
|
+
}, [d, c]), [f, C] = l.useMemo(() => {
|
968
968
|
const A = Math.abs(
|
969
969
|
r.reduce((R, z) => R + z.totalAmount, 0)
|
970
970
|
);
|
971
|
-
let
|
972
|
-
|
971
|
+
let x = A / u;
|
972
|
+
x > 1 && (x = 1);
|
973
973
|
const E = [
|
974
974
|
{
|
975
975
|
color: t.palette.secondary.main,
|
976
|
-
percentage: `${
|
976
|
+
percentage: `${x}`
|
977
977
|
}
|
978
978
|
];
|
979
979
|
return [A, E];
|
980
|
-
}, [r,
|
981
|
-
|
980
|
+
}, [r, u]), v = () => {
|
981
|
+
h({
|
982
982
|
accounts: i.map((A) => A.guid),
|
983
983
|
dateRange: {
|
984
984
|
start: at(/* @__PURE__ */ new Date(), 90),
|
985
985
|
end: /* @__PURE__ */ new Date()
|
986
986
|
}
|
987
|
-
}), p(!0),
|
987
|
+
}), p(!0), o(L.BUDGETS_CLICK_EDIT_INCOME);
|
988
988
|
};
|
989
|
-
return /* @__PURE__ */
|
989
|
+
return /* @__PURE__ */ m(pe, { elevation: 2, sx: { overflow: "visible" }, children: [
|
990
990
|
/* @__PURE__ */ e(De, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(xe, { children: s.overview_title }) }),
|
991
|
-
/* @__PURE__ */ e(he, { sx: { pt: 12, px: 24 }, children: /* @__PURE__ */
|
992
|
-
/* @__PURE__ */
|
991
|
+
/* @__PURE__ */ e(he, { sx: { pt: 12, px: 24 }, children: /* @__PURE__ */ m(S, { gap: 24, children: [
|
992
|
+
/* @__PURE__ */ m(S, { gap: 8, children: [
|
993
993
|
/* @__PURE__ */ e(y, { bold: !0, sx: { mb: 8 }, variant: "Body", children: s.spending_title }),
|
994
|
-
/* @__PURE__ */ e(
|
994
|
+
/* @__PURE__ */ e(ge, { data: B, height: 16 }),
|
995
995
|
/* @__PURE__ */ e(y, { variant: "Small", children: M(
|
996
996
|
s.spending_description,
|
997
997
|
T(b, "0,0"),
|
998
998
|
T(g, "0,0")
|
999
999
|
) })
|
1000
1000
|
] }),
|
1001
|
-
/* @__PURE__ */
|
1002
|
-
/* @__PURE__ */
|
1001
|
+
/* @__PURE__ */ m(S, { gap: 8, children: [
|
1002
|
+
/* @__PURE__ */ m(S, { alignItems: "center", direction: "row", gap: 4, mb: -4, children: [
|
1003
1003
|
/* @__PURE__ */ e(y, { bold: !0, variant: "Body", children: s.income_title }),
|
1004
1004
|
/* @__PURE__ */ e(
|
1005
1005
|
rt,
|
1006
1006
|
{
|
1007
|
-
"aria-label":
|
1007
|
+
"aria-label": n.manage_income,
|
1008
1008
|
onClick: v,
|
1009
1009
|
sx: { p: 0 },
|
1010
1010
|
children: /* @__PURE__ */ e(N, { color: "primary", name: "edit" })
|
1011
1011
|
}
|
1012
1012
|
)
|
1013
1013
|
] }),
|
1014
|
-
/* @__PURE__ */ e(
|
1014
|
+
/* @__PURE__ */ e(ge, { data: C, height: 16 }),
|
1015
1015
|
/* @__PURE__ */ e(y, { variant: "Small", children: M(
|
1016
1016
|
s.income_description,
|
1017
|
-
T(
|
1018
|
-
T(
|
1017
|
+
T(f, "0,0"),
|
1018
|
+
T(u, "0,0")
|
1019
1019
|
) })
|
1020
1020
|
] })
|
1021
1021
|
] }) }),
|
1022
1022
|
/* @__PURE__ */ e(
|
1023
1023
|
k,
|
1024
1024
|
{
|
1025
|
-
ariaLabelClose:
|
1025
|
+
ariaLabelClose: a.close_aria,
|
1026
1026
|
isOpen: _,
|
1027
1027
|
onClose: () => p(!1),
|
1028
|
-
title:
|
1028
|
+
title: n.manage_income,
|
1029
1029
|
children: /* @__PURE__ */ e(st, { forOverview: !0 })
|
1030
1030
|
}
|
1031
1031
|
)
|
1032
1032
|
] });
|
1033
|
-
}), Be = 480, Rn = I(({ onBackClick: t, sx:
|
1034
|
-
const i = Q(), { onEvent: s } = X(), { visibleAccounts:
|
1033
|
+
}), Be = 480, Rn = I(({ onBackClick: t, sx: o }) => {
|
1034
|
+
const i = Q(), { onEvent: s } = X(), { visibleAccounts: a } = ve(), { budgets: n, common: r } = w(), { isCopyLoaded: c, isInitialized: d, selectedAccounts: g, setDisplayedDate: u, setSelectedAccounts: h } = ne(), {
|
1035
1035
|
alert: _,
|
1036
1036
|
dateRange: p,
|
1037
1037
|
isDataLoaded: b,
|
1038
|
-
loadBudgetData:
|
1039
|
-
setDateRange:
|
1040
|
-
setAlert:
|
1038
|
+
loadBudgetData: B,
|
1039
|
+
setDateRange: f,
|
1040
|
+
setAlert: C,
|
1041
1041
|
setTheme: v,
|
1042
1042
|
detailedBudgets: A
|
1043
|
-
} = D(), { loadRepeatingTransactions:
|
1044
|
-
l.useEffect(() => (v(i),
|
1045
|
-
|
1043
|
+
} = D(), { loadRepeatingTransactions: x, setDateRange: E } = ee(), { reloadCategoryTotals: R } = j(), { isSmallTablet: z, isMobile: ce, isSmallMobile: Le } = se(), U = z || ce || Le, [ke, le] = l.useState(!1);
|
1044
|
+
l.useEffect(() => (v(i), h(a), f({ start: q(Z()), end: me(Z()) }), s(L.BUDGETS_VIEW), () => {
|
1045
|
+
f({ start: q(Z()), end: me(Z()) });
|
1046
1046
|
}), []), l.useEffect(() => {
|
1047
|
-
|
1048
|
-
}, [
|
1049
|
-
|
1050
|
-
}, [
|
1047
|
+
h(a);
|
1048
|
+
}, [a]), l.useEffect(() => {
|
1049
|
+
d && (u(p.start, p.end), R(g, p.start, p.end).finally(), E(p), b || (x().finally(), B().finally()));
|
1050
|
+
}, [d, g, p]);
|
1051
1051
|
const Ne = (_e) => {
|
1052
|
-
|
1052
|
+
f({ start: _e[0] || /* @__PURE__ */ new Date(), end: _e[1] || /* @__PURE__ */ new Date() });
|
1053
1053
|
}, Pe = () => {
|
1054
1054
|
s(L.BUDGETS_CLICK_FILTER);
|
1055
1055
|
}, fe = () => {
|
1056
|
-
|
1056
|
+
le(!0), s(L.BUDGETS_CLICK_ADD);
|
1057
1057
|
}, $e = () => {
|
1058
|
-
|
1058
|
+
le(!1);
|
1059
1059
|
}, Ge = Ze(p.end, q(/* @__PURE__ */ new Date()));
|
1060
|
-
return !c || !
|
1060
|
+
return !c || !d || !b ? /* @__PURE__ */ e(G, {}) : /* @__PURE__ */ m(
|
1061
1061
|
Ke,
|
1062
1062
|
{
|
1063
|
-
accountOptions:
|
1063
|
+
accountOptions: a,
|
1064
1064
|
actions: [
|
1065
1065
|
{
|
1066
1066
|
iconName: "add",
|
1067
|
-
label:
|
1067
|
+
label: n.add_title,
|
1068
1068
|
onClick: fe
|
1069
1069
|
}
|
1070
1070
|
],
|
@@ -1075,19 +1075,19 @@ const xt = ({
|
|
1075
1075
|
},
|
1076
1076
|
onAccountsFilterClick: Pe,
|
1077
1077
|
onBackClick: t,
|
1078
|
-
sx:
|
1079
|
-
title:
|
1078
|
+
sx: o,
|
1079
|
+
title: n.budgets_title,
|
1080
1080
|
children: [
|
1081
|
-
(!
|
1082
|
-
|
1083
|
-
|
1081
|
+
(!d || !b) && /* @__PURE__ */ e(G, {}),
|
1082
|
+
d && b && /* @__PURE__ */ m(
|
1083
|
+
S,
|
1084
1084
|
{
|
1085
1085
|
direction: U ? "column" : "row",
|
1086
1086
|
height: "100%",
|
1087
1087
|
sx: { justifyContent: "center" },
|
1088
1088
|
width: "100%",
|
1089
1089
|
children: [
|
1090
|
-
/* @__PURE__ */ e(
|
1090
|
+
/* @__PURE__ */ e(S, { height: U ? 450 : "calc(100dvh - 150px)", children: /* @__PURE__ */ e(
|
1091
1091
|
Me,
|
1092
1092
|
{
|
1093
1093
|
createBudgetOnClick: fe,
|
@@ -1097,8 +1097,8 @@ const xt = ({
|
|
1097
1097
|
unavailableWidth: U ? 0 : Be
|
1098
1098
|
}
|
1099
1099
|
) }),
|
1100
|
-
A.length !== 0 && /* @__PURE__ */
|
1101
|
-
|
1100
|
+
A.length !== 0 && /* @__PURE__ */ m(
|
1101
|
+
S,
|
1102
1102
|
{
|
1103
1103
|
gap: 24,
|
1104
1104
|
height: "100%",
|
@@ -1119,8 +1119,8 @@ const xt = ({
|
|
1119
1119
|
{
|
1120
1120
|
ariaLabelClose: r.close_aria,
|
1121
1121
|
isOpen: ke,
|
1122
|
-
onClose: () =>
|
1123
|
-
title:
|
1122
|
+
onClose: () => le(!1),
|
1123
|
+
title: n.add_new_title,
|
1124
1124
|
children: /* @__PURE__ */ e(Ie, { onRecalculateBudgets: $e })
|
1125
1125
|
}
|
1126
1126
|
),
|
@@ -1130,14 +1130,14 @@ const xt = ({
|
|
1130
1130
|
anchorOrigin: { vertical: "bottom", horizontal: "right" },
|
1131
1131
|
autoHideDuration: 3500,
|
1132
1132
|
onClose: () => {
|
1133
|
-
|
1133
|
+
C("");
|
1134
1134
|
},
|
1135
1135
|
open: !!_,
|
1136
1136
|
children: /* @__PURE__ */ e(
|
1137
1137
|
qe,
|
1138
1138
|
{
|
1139
1139
|
onClose: () => {
|
1140
|
-
|
1140
|
+
C("");
|
1141
1141
|
},
|
1142
1142
|
severity: "success",
|
1143
1143
|
variant: "filled",
|