@mx-cartographer/experiences 6.26.1-alpha.mega1 → 6.26.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (92) hide show
  1. package/CHANGELOG.md +9 -5
  2. package/dist/categories/util/CategoryUtil.d.ts +2 -3
  3. package/dist/common/context/hooks.d.ts +13 -13
  4. package/dist/common/types/Category.d.ts +8 -2
  5. package/dist/common/types/index.d.ts +1 -1
  6. package/dist/help/components/content/section/index.d.ts +15 -15
  7. package/dist/index.d.ts +22 -0
  8. package/dist/index.es.js +29896 -0
  9. package/dist/index.es.js.map +1 -0
  10. package/dist/trends/components/CategoriesList.d.ts +5 -5
  11. package/dist/trends/components/CategoriesListItem.d.ts +4 -7
  12. package/dist/trends/components/CategoryDetailChart.d.ts +1 -5
  13. package/dist/trends/stores/TrendsStore.d.ts +16 -11
  14. package/package.json +3 -91
  15. package/dist/AccountStore-DkL93tXL.mjs +0 -317
  16. package/dist/AccountStore-DkL93tXL.mjs.map +0 -1
  17. package/dist/BudgetUtil-CVqAdv-j.mjs +0 -187
  18. package/dist/BudgetUtil-CVqAdv-j.mjs.map +0 -1
  19. package/dist/CashflowStore-gPEEBiXo.mjs +0 -53
  20. package/dist/CashflowStore-gPEEBiXo.mjs.map +0 -1
  21. package/dist/CategoryStore-m7oieLzP.mjs +0 -260
  22. package/dist/CategoryStore-m7oieLzP.mjs.map +0 -1
  23. package/dist/ConnectMiniWidget-CQWafYtQ.mjs +0 -22966
  24. package/dist/ConnectMiniWidget-CQWafYtQ.mjs.map +0 -1
  25. package/dist/DebtsStore-cUhIgJx6.mjs +0 -145
  26. package/dist/DebtsStore-cUhIgJx6.mjs.map +0 -1
  27. package/dist/Donut-CGNFni9y.mjs +0 -58
  28. package/dist/Donut-CGNFni9y.mjs.map +0 -1
  29. package/dist/FinstrongStore-BDG7l0nI.mjs +0 -183
  30. package/dist/FinstrongStore-BDG7l0nI.mjs.map +0 -1
  31. package/dist/GoalStore-o2waGeyf.mjs +0 -293
  32. package/dist/GoalStore-o2waGeyf.mjs.map +0 -1
  33. package/dist/Loader-CwdK8lfx.mjs +0 -147
  34. package/dist/Loader-CwdK8lfx.mjs.map +0 -1
  35. package/dist/MerchantStore-Cck9IGIH.mjs +0 -125
  36. package/dist/MerchantStore-Cck9IGIH.mjs.map +0 -1
  37. package/dist/NetWorthStore-D5eUfGQt.mjs +0 -66
  38. package/dist/NetWorthStore-D5eUfGQt.mjs.map +0 -1
  39. package/dist/NotificationStore-DCxw8W7u.mjs +0 -141
  40. package/dist/NotificationStore-DCxw8W7u.mjs.map +0 -1
  41. package/dist/RecurringTransactionsStore-Bijrgllq.mjs +0 -337
  42. package/dist/RecurringTransactionsStore-Bijrgllq.mjs.map +0 -1
  43. package/dist/SettingsStore-BhOYgUOa.mjs +0 -352
  44. package/dist/SettingsStore-BhOYgUOa.mjs.map +0 -1
  45. package/dist/TransactionApi-Dnbyi1JL.mjs +0 -175
  46. package/dist/TransactionApi-Dnbyi1JL.mjs.map +0 -1
  47. package/dist/TransactionStore-CiEtt5XJ.mjs +0 -417
  48. package/dist/TransactionStore-CiEtt5XJ.mjs.map +0 -1
  49. package/dist/TrendsStore-Idq3QfoA.mjs +0 -131
  50. package/dist/TrendsStore-Idq3QfoA.mjs.map +0 -1
  51. package/dist/accounts/index.es.js +0 -18
  52. package/dist/accounts/index.es.js.map +0 -1
  53. package/dist/analytics/index.es.js +0 -170
  54. package/dist/analytics/index.es.js.map +0 -1
  55. package/dist/budgets/index.es.js +0 -1116
  56. package/dist/budgets/index.es.js.map +0 -1
  57. package/dist/cashflow/index.es.js +0 -118
  58. package/dist/cashflow/index.es.js.map +0 -1
  59. package/dist/categories/index.es.js +0 -10
  60. package/dist/categories/index.es.js.map +0 -1
  61. package/dist/common/index.es.js +0 -1549
  62. package/dist/common/index.es.js.map +0 -1
  63. package/dist/dashboard/index.es.js +0 -257
  64. package/dist/dashboard/index.es.js.map +0 -1
  65. package/dist/debts/index.es.js +0 -9
  66. package/dist/debts/index.es.js.map +0 -1
  67. package/dist/finstrong/index.es.js +0 -11
  68. package/dist/finstrong/index.es.js.map +0 -1
  69. package/dist/goals/index.es.js +0 -9
  70. package/dist/goals/index.es.js.map +0 -1
  71. package/dist/help/index.es.js +0 -6
  72. package/dist/help/index.es.js.map +0 -1
  73. package/dist/investments/index.es.js +0 -1694
  74. package/dist/investments/index.es.js.map +0 -1
  75. package/dist/merchants/index.es.js +0 -7
  76. package/dist/merchants/index.es.js.map +0 -1
  77. package/dist/microinsights/index.es.js +0 -21
  78. package/dist/microinsights/index.es.js.map +0 -1
  79. package/dist/networth/index.es.js +0 -11
  80. package/dist/networth/index.es.js.map +0 -1
  81. package/dist/notifications/index.es.js +0 -116
  82. package/dist/notifications/index.es.js.map +0 -1
  83. package/dist/recurringtransactions/index.es.js +0 -14
  84. package/dist/recurringtransactions/index.es.js.map +0 -1
  85. package/dist/settings/index.es.js +0 -112
  86. package/dist/settings/index.es.js.map +0 -1
  87. package/dist/spending/index.es.js +0 -632
  88. package/dist/spending/index.es.js.map +0 -1
  89. package/dist/transactions/index.es.js +0 -19
  90. package/dist/transactions/index.es.js.map +0 -1
  91. package/dist/trends/index.es.js +0 -10
  92. package/dist/trends/index.es.js.map +0 -1
@@ -1,1694 +0,0 @@
1
- import { jsxs as o, jsx as e, Fragment as ae } from "react/jsx-runtime";
2
- import A, { useState as O } from "react";
3
- import { observer as P } from "mobx-react-lite";
4
- import _ from "@mui/material/Stack";
5
- import Me from "@mui/material/Tab";
6
- import Ee from "@mui/material/Tabs";
7
- import "bowser";
8
- import "date-fns/getUnixTime";
9
- import { b9 as z, ba as Ge, aM as ee, av as H, bb as Ne, bc as V, b8 as He, bd as he, aw as Ue, be as je } from "../ConnectMiniWidget-CQWafYtQ.mjs";
10
- import "date-fns/intlFormat";
11
- import "date-fns/addMonths";
12
- import "date-fns/addQuarters";
13
- import "date-fns/addWeeks";
14
- import "date-fns/addYears";
15
- import "date-fns/getDay";
16
- import "date-fns/isBefore";
17
- import "date-fns/nextDay";
18
- import "date-fns/setDate";
19
- import "date-fns/startOfToday";
20
- import "date-fns/fromUnixTime";
21
- import "numeral";
22
- import { Stack as ze } from "@mui/material";
23
- import Oe from "@mui/material/Button";
24
- import { Text as r, H1 as ge, P as xe, InstitutionLogo as te } from "@mxenabled/mxui";
25
- import Ve from "@mui/material/Tooltip";
26
- import Re from "@mui/material/Box";
27
- import se from "@mui/material/IconButton";
28
- import { b as M, c as ye, j as U, d as Q, f as le, L as fe } from "../Loader-CwdK8lfx.mjs";
29
- import "@mxenabled/cssinjs";
30
- import "date-fns/addDays";
31
- import "date-fns/eachDayOfInterval";
32
- import "date-fns/eachWeekOfInterval";
33
- import "date-fns/endOfMonth";
34
- import "date-fns/format";
35
- import "date-fns/isSameMonth";
36
- import "date-fns/startOfMonth";
37
- import "date-fns/subMonths";
38
- import ne from "@mui/material/Paper";
39
- import { Icon as k } from "@mxenabled/mx-icons";
40
- import "date-fns/isSameDay";
41
- import "date-fns/isWithinInterval";
42
- import ce from "@mui/material/styles/useTheme";
43
- import "d3";
44
- import { useTheme as Pe } from "@mui/material/styles";
45
- import "@mui/x-charts";
46
- import ve from "@mui/material/useMediaQuery";
47
- import "@mui/x-charts/ChartsTooltip";
48
- import "date-fns/differenceInCalendarDays";
49
- import "date-fns/endOfToday";
50
- import "date-fns/endOfYear";
51
- import "date-fns/startOfYear";
52
- import "date-fns/subDays";
53
- import "date-fns/subYears";
54
- import "@mui/material/ButtonGroup";
55
- import be from "@mui/material/ToggleButton";
56
- import _e from "@mui/material/ToggleButtonGroup";
57
- import "@mui/material/Dialog";
58
- import "@mui/material/DialogContent";
59
- import "@mui/material/Card";
60
- import "@mui/material/CardContent";
61
- import "@mui/material/CardHeader";
62
- import "uuid";
63
- import "@mui/material/FormControlLabel";
64
- import "@mui/material/Radio";
65
- import "@mui/material/Avatar";
66
- import oe from "@mui/material/ListItem";
67
- import "@mui/material/ListItemAvatar";
68
- import Xe from "@mui/material/ListItemButton";
69
- import $e from "@mui/material/ListItemText";
70
- import "@mui/material/ListItemIcon";
71
- import "@mui/material/MenuItem";
72
- import we from "@mui/material/TextField";
73
- import "@mui/material/Switch";
74
- import "mobx";
75
- import "posthog-js";
76
- import "date-fns/differenceInDays";
77
- import { DataGridPro as qe } from "@mui/x-data-grid-pro";
78
- import "date-fns";
79
- import K from "@mui/material/Divider";
80
- import ie from "@mui/material/List";
81
- import "date-fns/formatISO";
82
- import "date-fns/isAfter";
83
- import "date-fns/parseISO";
84
- import "date-fns/subQuarters";
85
- import "date-fns/lastDayOfMonth";
86
- import "date-fns/setDayOfYear";
87
- import "date-fns/addSeconds";
88
- import "date-fns/differenceInCalendarMonths";
89
- import "date-fns/getMonth";
90
- import Ke from "@mui/material/Collapse";
91
- import "@mui/material/CircularProgress";
92
- import { D as Ye } from "../Donut-CGNFni9y.mjs";
93
- import Ce from "@mui/material/Accordion";
94
- import Se from "@mui/material/AccordionDetails";
95
- import De from "@mui/material/AccordionSummary";
96
- import g from "@mui/system/Stack";
97
- const de = ({ sx: t = {} }) => {
98
- const { investments: p } = M(), { onEvent: c } = ye(), { setShowConnectionsWidget: u } = U();
99
- return /* @__PURE__ */ o(_, { sx: { alignItems: "center", gap: 24, height: 164, p: 24, width: "100%", ...t }, children: [
100
- /* @__PURE__ */ o(
101
- _,
102
- {
103
- className: "inner-container",
104
- sx: {
105
- alignItems: "center",
106
- gap: 8,
107
- width: "100%",
108
- textAlign: "center"
109
- },
110
- children: [
111
- /* @__PURE__ */ e(r, { sx: { fontWeight: 600, whiteSpace: "normal" }, variant: "Body", children: p.overview.investment_accounts_footer }),
112
- /* @__PURE__ */ e(
113
- r,
114
- {
115
- sx: {
116
- color: "text.secondary",
117
- whiteSpace: "normal",
118
- fontWeight: 400
119
- },
120
- variant: "ParagraphSmall",
121
- children: p.overview.connect_more_accounts_description
122
- }
123
- )
124
- ]
125
- }
126
- ),
127
- /* @__PURE__ */ e(
128
- Oe,
129
- {
130
- onClick: () => {
131
- u(!0), c(z.ACCOUNTS_CLICK_CONNECT);
132
- },
133
- sx: { fontWeight: 600 },
134
- variant: "outlined",
135
- children: p.overview.connect_accounts
136
- }
137
- )
138
- ] });
139
- }, Qe = {
140
- allocations_cash: "#AEDCCC",
141
- allocations_convertible: "#80CAD0",
142
- allocations_foreign_bond: "#51B9D4",
143
- allocations_foreign_stock: "#3DA0C9",
144
- allocations_other: "#3583B8",
145
- allocations_preferred: "#2D66A7",
146
- allocations_unknown: "#161D6A",
147
- allocations_us_bond: "#254995",
148
- allocations_us_stock: "#1E2D84"
149
- }, Je = [
150
- {
151
- name: "allocations_cash"
152
- },
153
- {
154
- name: "allocations_convertible"
155
- },
156
- {
157
- name: "allocations_foreign_bond"
158
- },
159
- {
160
- name: "allocations_foreign_stock"
161
- },
162
- {
163
- name: "allocations_other"
164
- },
165
- {
166
- name: "allocations_preferred"
167
- },
168
- {
169
- name: "allocations_us_bond"
170
- },
171
- {
172
- name: "allocations_us_stock"
173
- },
174
- {
175
- name: "allocations_unknown"
176
- }
177
- ], Ze = (t, p, c) => {
178
- const u = p, x = c;
179
- return t >= Math.min(u, x) && t < Math.max(u, x);
180
- }, et = (t, p, c) => {
181
- const u = [
182
- ...new Set(t.map((d) => d.name.toLowerCase()))
183
- ];
184
- let x;
185
- return u.map((d) => {
186
- const l = t.reduce((m, y) => {
187
- const b = y.name;
188
- return b.toLowerCase() === d ? (x = b, Y(y) * y[p] / 100 + m) : m;
189
- }, 0);
190
- return {
191
- displayName: x,
192
- name: x,
193
- value: l,
194
- percentage: l / c
195
- };
196
- });
197
- }, Y = (t) => t.calculated_market_value ? t.calculated_market_value : t.market_value, tt = (t, p, c) => {
198
- const u = Object.values(p.allocations_list), x = [];
199
- let v = 0;
200
- const d = t.map(({ guid: n }) => n), l = c.filter(({ account_guid: n }) => d.includes(n)).map((n) => ({
201
- ...n,
202
- name: n.symbol || n.description,
203
- gainLoss: n.cost_basis || n.cost_basis === 0 ? Y(n) - n.cost_basis : 0
204
- })), { cashBalance: m, totalAccountBalance: y } = t.reduce(
205
- (n, h) => ({
206
- cashBalance: n.cashBalance + (h.cash_balance || 0),
207
- totalAccountBalance: n.totalAccountBalance + (h.balance || 0)
208
- }),
209
- { cashBalance: 0, totalAccountBalance: 0 }
210
- ), { marketValue: b, totalGainLoss: s } = l.reduce(
211
- (n, h) => ({
212
- marketValue: n.marketValue + Y(h),
213
- totalGainLoss: n.totalGainLoss + h.gainLoss
214
- }),
215
- { marketValue: 0, totalGainLoss: 0 }
216
- ), f = b + m;
217
- Je.forEach((n, h) => {
218
- const C = l.filter(
219
- (W) => !!W[n.name]
220
- );
221
- let S = C.reduce(
222
- (W, B) => W + Y(B) * B[n.name] / 100,
223
- 0
224
- );
225
- const L = et(
226
- C,
227
- n.name,
228
- S
229
- );
230
- if (n.name === "allocations_cash" && m > 0) {
231
- S += m;
232
- const W = {
233
- displayName: p.cash_balance_display_name,
234
- name: "allocations_name",
235
- value: m,
236
- percentage: m / f
237
- };
238
- L.push(W);
239
- }
240
- S > 0 && (x.push({
241
- name: n.name,
242
- displayName: u[h],
243
- guid: `${n.name}-${h}`,
244
- holdings: L,
245
- percentage: S / f,
246
- value: S,
247
- color: Qe[n.name]
248
- }), v += S);
249
- });
250
- const i = x.map(
251
- ({ displayName: n, guid: h, color: C, value: S }) => ({
252
- id: h,
253
- color: C,
254
- label: n,
255
- value: S / v * 100
256
- })
257
- );
258
- return {
259
- investmentsData: x,
260
- donutData: i,
261
- totalAmount: v,
262
- totalGainLoss: s,
263
- totalMarketValue: f,
264
- totalGainLossPercentage: s / y
265
- };
266
- }, re = (t) => t < 1e-3 ? "< 0.1%" : Ge(t), R = (t) => t === 0 ? ee(t, "0,0.00") : Ze(t, -0.01, 0.01) ? "< $0.01" : ee(t, "0,0.00"), nt = ({
267
- data: t,
268
- onSelected: p,
269
- selectedId: c,
270
- selectedTabs: u,
271
- setSelectedTabs: x
272
- }) => {
273
- const v = (s, f) => {
274
- f !== null && x(f);
275
- }, { isMobile: d } = H(), {
276
- investments: { allocation: l }
277
- } = M(), m = [
278
- { label: l.tabs_label_dollar, value: 0 },
279
- { label: l.tabs_label_percent, value: 1 }
280
- ], y = !t?.investmentsData.length, { isSmallMobile: b } = H();
281
- return /* @__PURE__ */ o(_, { sx: { mt: 15, gap: 12, width: d ? 250 : 412 }, children: [
282
- /* @__PURE__ */ e(
283
- _e,
284
- {
285
- exclusive: !0,
286
- fullWidth: !0,
287
- onChange: v,
288
- value: y ? -1 : u,
289
- children: m.map(({ label: s, value: f }) => /* @__PURE__ */ e(be, { color: "primary", value: f, children: /* @__PURE__ */ e(r, { bold: !0, textTransform: "capitalize", variant: "Body", children: s }) }, s))
290
- }
291
- ),
292
- /* @__PURE__ */ e(ie, { sx: { px: 12 }, children: t.investmentsData.map((s) => /* @__PURE__ */ o(A.Fragment, { children: [
293
- /* @__PURE__ */ e(
294
- oe,
295
- {
296
- disableGutters: !0,
297
- disablePadding: !0,
298
- sx: {
299
- minHeight: 44
300
- },
301
- children: /* @__PURE__ */ o(
302
- Xe,
303
- {
304
- "aria-expanded": c === s.guid,
305
- onClick: () => p(s.guid),
306
- sx: { minHeight: 44, px: 12, py: 0 },
307
- children: [
308
- /* @__PURE__ */ e(
309
- Re,
310
- {
311
- borderRadius: 4,
312
- flexShrink: 0,
313
- height: 8,
314
- sx: { backgroundColor: s.color, mr: 8 },
315
- width: 8
316
- }
317
- ),
318
- /* @__PURE__ */ o(
319
- _,
320
- {
321
- alignItems: "center",
322
- direction: "row",
323
- justifyContent: "space-between",
324
- width: "100%",
325
- children: [
326
- /* @__PURE__ */ e(r, { bold: c === s.guid, children: s.displayName }),
327
- /* @__PURE__ */ e(r, { bold: c === s.guid, variant: "Body", children: u === 0 ? R(s.value) : re(s.percentage) })
328
- ]
329
- }
330
- )
331
- ]
332
- }
333
- )
334
- }
335
- ),
336
- /* @__PURE__ */ e(K, {}),
337
- s.holdings && s.holdings.length > 0 && /* @__PURE__ */ e(Ke, { in: c === s.guid, unmountOnExit: !0, children: /* @__PURE__ */ o(ie, { children: [
338
- s?.holdings?.map((f) => /* @__PURE__ */ e(
339
- oe,
340
- {
341
- sx: {
342
- pl: 24,
343
- pr: 8,
344
- py: 0
345
- },
346
- children: /* @__PURE__ */ o(_, { direction: "row", justifyContent: "space-between", width: "100%", children: [
347
- /* @__PURE__ */ o(r, { children: [
348
- f.displayName,
349
- " "
350
- ] }),
351
- /* @__PURE__ */ e(r, { children: u === 0 ? R(f.value) : re(f.percentage) })
352
- ] })
353
- },
354
- f.displayName
355
- )),
356
- /* @__PURE__ */ e(K, {})
357
- ] }) })
358
- ] }, s.guid)) }),
359
- y ? /* @__PURE__ */ o(ae, { children: [
360
- /* @__PURE__ */ e(r, { sx: { color: "secondary.main", p: 8, textAlign: "center" }, children: l.empty_data }),
361
- /* @__PURE__ */ e(K, { sx: { borderColor: "border.light" } }),
362
- /* @__PURE__ */ e(
363
- de,
364
- {
365
- sx: {
366
- ".inner-container": { width: b ? "100%" : 364 }
367
- }
368
- }
369
- )
370
- ] }) : u === 0 && /* @__PURE__ */ e(r, { bold: !0, sx: { textAlign: "right", pr: 24 }, children: `${l.total_label_text} ${R(t.totalAmount)}` })
371
- ] });
372
- }, ot = ({
373
- data: t,
374
- hoveredId: p,
375
- isPercentage: c,
376
- onMouseEnter: u,
377
- onMouseLeave: x,
378
- onSelected: v,
379
- selectedId: d,
380
- size: l = 150,
381
- totalLabel: m
382
- }) => {
383
- const y = ce(), b = y.palette.mode === "dark", s = A.useMemo(
384
- () => d ? t.investmentsData.find(({ guid: L }) => L === d) : void 0,
385
- [d]
386
- ), {
387
- investments: { allocation: f }
388
- } = M(), i = A.useMemo(() => t.donutData.length > 0 ? t.donutData : [{ id: "0", color: y.palette.border.light, value: 100 }], [t, y]), n = b ? "#0AC295" : "#09A57F", h = b ? "grey.300" : "grey.700", C = () => s ? f.pie_chart_centered_click_for_details : c ? re(t.totalGainLossPercentage) : R(t.totalGainLoss), S = t.totalGainLoss >= 0 ? n : h;
389
- return /* @__PURE__ */ e(
390
- Ye,
391
- {
392
- data: i,
393
- hoveredId: p,
394
- onClick: v,
395
- onMouseEnter: u,
396
- onMouseLeave: x,
397
- selectedId: d,
398
- size: l,
399
- children: /* @__PURE__ */ e(_, { alignItems: "center", height: "100%", justifyContent: "center", width: "100%", children: /* @__PURE__ */ e(_, { alignItems: "center", justifyContent: "center", minHeight: l, minWidth: l, children: /* @__PURE__ */ o(_, { alignItems: "center", sx: { gap: { xs: 4, xl: 8 }, mb: { xs: 4, xl: 8 } }, children: [
400
- /* @__PURE__ */ e(r, { color: "text.secondary", noWrap: !0, children: s?.displayName ?? m }),
401
- /* @__PURE__ */ e(ge, { color: "text.primary", children: R(s?.value ?? t.totalMarketValue) }),
402
- /* @__PURE__ */ o(_, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
403
- !s && /* @__PURE__ */ e(
404
- k,
405
- {
406
- name: t.totalGainLoss >= 0 ? "trending_up" : "trending_down",
407
- size: 20,
408
- sx: { color: S }
409
- }
410
- ),
411
- /* @__PURE__ */ e(
412
- r,
413
- {
414
- sx: {
415
- color: S,
416
- fontWeight: 700
417
- },
418
- variant: "Small",
419
- children: C()
420
- }
421
- )
422
- ] })
423
- ] }) }) })
424
- }
425
- );
426
- }, it = () => {
427
- const [t, p] = A.useState(0), [c, u] = A.useState(""), [x, v] = A.useState(""), d = (n) => {
428
- c !== n ? u(n) : (u(""), v(""));
429
- }, { selectedAccountGuids: l } = Q(), { visibleHoldings: m } = U(), { visibleInvestmentAccounts: y } = le(), {
430
- investments: { allocation: b }
431
- } = M(), s = tt(
432
- y.filter(({ guid: n }) => l.includes(n)),
433
- b,
434
- m
435
- ), { isMobile: f } = H(), i = ve("(max-width:768px)");
436
- return /* @__PURE__ */ o(
437
- _,
438
- {
439
- alignItems: i ? "center" : "flex-start",
440
- direction: i ? "column" : "row",
441
- gap: { xs: 16, md: 64, xl: 100 },
442
- sx: {
443
- justifyContent: "center",
444
- mt: 50,
445
- width: "100%"
446
- },
447
- children: [
448
- /* @__PURE__ */ e(
449
- ot,
450
- {
451
- data: s,
452
- hoveredId: x,
453
- isPercentage: t === 1,
454
- onMouseEnter: (n) => {
455
- c === n ? v("") : c || v(n);
456
- },
457
- onMouseLeave: () => {
458
- v("");
459
- },
460
- onSelected: d,
461
- selectedId: c,
462
- size: f ? 280 : 400,
463
- totalLabel: b.pie_chart_centered_text
464
- }
465
- ),
466
- /* @__PURE__ */ e(
467
- nt,
468
- {
469
- data: s,
470
- onSelected: d,
471
- selectedId: c,
472
- selectedTabs: t,
473
- setSelectedTabs: p
474
- }
475
- )
476
- ]
477
- }
478
- );
479
- }, rt = P(it), at = ({
480
- analysisDetails: t,
481
- analysisType: p,
482
- copy: c,
483
- setAnalysisType: u
484
- }) => {
485
- const { isSmallMobile: x } = H(), v = A.useMemo(() => Object.keys(t).filter((l) => t[l] >= 1).map((l) => ({
486
- key: l,
487
- value: ee(t[l], "0,0"),
488
- formattedKey: Ne(l)
489
- })), [t]), d = [
490
- { label: c.equities, value: V.Stocks },
491
- { label: c.bonds, value: V.Bonds }
492
- ];
493
- return /* @__PURE__ */ o(_, { sx: { gap: 12, width: { md: 412 } }, children: [
494
- /* @__PURE__ */ e(
495
- _e,
496
- {
497
- color: "primary",
498
- exclusive: !0,
499
- onChange: (l, m) => m && u(m),
500
- sx: {
501
- width: "100%",
502
- "& .MuiToggleButton-root": {
503
- color: "secondary.main",
504
- fontWeight: 600,
505
- textTransform: "capitalize"
506
- }
507
- },
508
- value: v.length ? p : -1,
509
- children: d.map(({ label: l, value: m }) => /* @__PURE__ */ e(be, { sx: { width: "100%" }, value: m, children: l }, m))
510
- }
511
- ),
512
- v.length ? /* @__PURE__ */ e(
513
- ie,
514
- {
515
- sx: {
516
- "& .MuiListItemSecondaryAction-root": { pr: 12 },
517
- "& .MuiListItem-divider": { borderColor: "border.light" },
518
- "& .MuiListItem-root": { minHeight: 44, px: 12 }
519
- },
520
- children: v.map(({ value: l, formattedKey: m }) => /* @__PURE__ */ e(oe, { divider: !0, secondaryAction: /* @__PURE__ */ e(r, { children: l }), children: /* @__PURE__ */ e(
521
- $e,
522
- {
523
- primary: m,
524
- primaryTypographyProps: { fontStyle: "normal" }
525
- }
526
- ) }, m))
527
- }
528
- ) : /* @__PURE__ */ o(ae, { children: [
529
- /* @__PURE__ */ e(r, { sx: { color: "secondary.main", p: 8, textAlign: "center" }, children: c.empty_data }),
530
- /* @__PURE__ */ e(K, { sx: { borderColor: "border.light" } }),
531
- /* @__PURE__ */ e(
532
- de,
533
- {
534
- sx: {
535
- ".inner-container": { width: x ? "100%" : 364 }
536
- }
537
- }
538
- )
539
- ] })
540
- ] });
541
- }, st = ({ body: t, title: p }) => /* @__PURE__ */ o(_, { sx: { gap: 4, p: 12 }, children: [
542
- /* @__PURE__ */ e(r, { bold: !0, variant: "Body", children: p }),
543
- /* @__PURE__ */ e(xe, { variant: "ParagraphSmall", children: t })
544
- ] }), lt = ({
545
- placement: t = "bottom",
546
- tooltip_info_body: p,
547
- tooltip_info_title: c
548
- }) => /* @__PURE__ */ e(
549
- Ve,
550
- {
551
- enterTouchDelay: 500,
552
- placement: t,
553
- title: /* @__PURE__ */ e(st, { body: p, title: c }),
554
- children: /* @__PURE__ */ e(se, { "aria-label": c, sx: { minHeight: 0, minWidth: 0, p: 0 }, children: /* @__PURE__ */ e(k, { name: "info", sx: { color: "info.main" } }) })
555
- }
556
- ), ct = () => {
557
- const {
558
- investments: { analysis: t }
559
- } = M(), { analysisChartData: p, analysisDetails: c, analysisType: u, setAnalysisType: x } = U(), v = ve("(min-width:320px) and (max-width:375px)"), { isMobile: d } = H(), m = Pe().palette.mode === "dark", { cellDimension: y, columns: b, rows: s, textVariant: f } = A.useMemo(() => {
560
- const i = u === V.Stocks, n = Object.values(i ? t.stock_column_labels : t.bond_column_labels), h = Object.values(i ? t.stock_row_labels : t.bond_row_labels);
561
- return { cellDimension: d ? 72 : 100, columns: n, rows: h, textVariant: d ? "XSmall" : "Body" };
562
- }, [t, d, u]);
563
- return /* @__PURE__ */ o(
564
- _,
565
- {
566
- sx: {
567
- flexDirection: { md: "row" },
568
- gap: d ? 48 : 64,
569
- justifyContent: "center",
570
- pt: 48,
571
- px: 16
572
- },
573
- children: [
574
- /* @__PURE__ */ o(
575
- _,
576
- {
577
- sx: {
578
- alignItems: "center",
579
- flexDirection: "row",
580
- justifyContent: "center",
581
- pr: { lg: 72 }
582
- },
583
- children: [
584
- /* @__PURE__ */ o(
585
- _,
586
- {
587
- sx: {
588
- alignItems: "center",
589
- bottom: d ? 10 : 24,
590
- gap: d ? 0 : 24,
591
- position: "relative",
592
- transform: "rotate(-180deg)",
593
- writingMode: "vertical-rl"
594
- },
595
- children: [
596
- /* @__PURE__ */ e(xe, { bold: !0, color: "secondary.main", variant: f, children: u === V.Stocks ? t.market_capitalization : t.credit_quality }),
597
- /* @__PURE__ */ e(
598
- _,
599
- {
600
- sx: {
601
- flexDirection: "row",
602
- height: d ? 224 : 308,
603
- justifyContent: "space-around"
604
- },
605
- children: b.map((i) => /* @__PURE__ */ e(
606
- r,
607
- {
608
- sx: {
609
- color: "secondary.main",
610
- pl: 12,
611
- pr: d ? 4 : 0
612
- },
613
- variant: f,
614
- children: i
615
- },
616
- i
617
- ))
618
- }
619
- )
620
- ]
621
- }
622
- ),
623
- /* @__PURE__ */ o(_, { sx: { gap: 4 }, children: [
624
- /* @__PURE__ */ o(
625
- _,
626
- {
627
- sx: {
628
- alignSelf: v ? "start" : "center",
629
- flexDirection: "row",
630
- gap: 8,
631
- pb: 12
632
- },
633
- children: [
634
- /* @__PURE__ */ e(r, { bold: !0, children: t.invest_analysis }),
635
- /* @__PURE__ */ e(
636
- lt,
637
- {
638
- tooltip_info_body: t.tooltip_info_body,
639
- tooltip_info_title: t.tooltip_info_title
640
- }
641
- )
642
- ]
643
- }
644
- ),
645
- p.map((i, n, h) => /* @__PURE__ */ e(_, { sx: { flexDirection: "row", gap: 4 }, children: i.map((C, S) => {
646
- const L = n === 0, W = n === h.length - 1, B = S === 0, E = S === i.length - 1, N = Number(C.replace("%", "")) >= 25;
647
- let T = "grey.200", j = "grey.900";
648
- return m ? (T = N ? "grey.200" : "grey.700", j = N ? "grey.900" : "common.white") : (T = N ? "grey.700" : "grey.200", j = N ? "common.white" : "grey.900"), /* @__PURE__ */ e(
649
- _,
650
- {
651
- sx: {
652
- ...{
653
- borderBottomLeftRadius: W && B ? 4 : 0,
654
- borderBottomRightRadius: W && E ? 4 : 0,
655
- borderTopLeftRadius: L && B ? 4 : 0,
656
- borderTopRightRadius: L && E ? 4 : 0
657
- },
658
- alignItems: "center",
659
- bgcolor: T,
660
- height: y,
661
- justifyContent: "center",
662
- width: y
663
- },
664
- children: /* @__PURE__ */ e(
665
- r,
666
- {
667
- sx: {
668
- color: j,
669
- fontWeight: d ? 600 : 700
670
- },
671
- variant: d ? "Body" : "H3",
672
- children: C
673
- }
674
- )
675
- },
676
- S
677
- );
678
- }) }, n)),
679
- /* @__PURE__ */ e(_, { sx: { alignSelf: "center", flexDirection: "row", pt: 12 }, children: s.map((i) => /* @__PURE__ */ e(_, { sx: { alignItems: "center", width: y }, children: /* @__PURE__ */ e(r, { color: "secondary.main", variant: f, children: i }) }, i)) }),
680
- /* @__PURE__ */ e(
681
- r,
682
- {
683
- bold: !0,
684
- sx: { color: "secondary.main", pt: d ? 4 : 24, textAlign: "center" },
685
- variant: f,
686
- children: u === V.Stocks ? t.valuation : t.duration
687
- }
688
- )
689
- ] })
690
- ]
691
- }
692
- ),
693
- /* @__PURE__ */ e(
694
- at,
695
- {
696
- analysisDetails: c,
697
- analysisType: u,
698
- copy: {
699
- empty_data: t.empty_data,
700
- equities: t.equities,
701
- bonds: t.bonds
702
- },
703
- setAnalysisType: x
704
- }
705
- )
706
- ]
707
- }
708
- );
709
- }, dt = P(ct), mt = ({
710
- accountHoldingsData: t,
711
- currentEditedCostBasis: p,
712
- editingHoldingId: c,
713
- handleCostBasisBlur: u,
714
- handleCostBasisClick: x,
715
- handleCostBasisChange: v,
716
- handleCostBasisKeyDown: d,
717
- isOpen: l,
718
- onClose: m
719
- }) => {
720
- const { investments: y } = M(), [b, s] = A.useState({}), f = (i) => (n, h) => {
721
- s((C) => ({
722
- ...C,
723
- [i]: h
724
- }));
725
- };
726
- return /* @__PURE__ */ o(
727
- He,
728
- {
729
- ariaLabelClose: y.overview.close_investment_drawer,
730
- isOpen: l,
731
- onClose: m,
732
- title: y.overview.investment_details,
733
- children: [
734
- /* @__PURE__ */ o(g, { sx: { gap: 8, p: 24 }, children: [
735
- /* @__PURE__ */ e(
736
- te,
737
- {
738
- alt: t.accounts.institutionName || "",
739
- institutionGuid: t.accounts.institution_guid || "",
740
- size: 64
741
- }
742
- ),
743
- /* @__PURE__ */ e(r, { sx: { color: "text.primary" }, variant: "Small", children: t.accounts.memberName }),
744
- /* @__PURE__ */ e(r, { sx: { color: "text.primary" }, variant: "H2", children: t.accounts.user_name || t.accounts.name }),
745
- /* @__PURE__ */ o(g, { sx: { alignItems: "center", flexDirection: "row", justifyContent: "space-between" }, children: [
746
- /* @__PURE__ */ e(r, { sx: { color: "text.primary", fontWeight: 600 }, variant: "Body", children: y.overview.current_balance }),
747
- /* @__PURE__ */ e(r, { sx: { color: "text.primary", fontWeight: 600 }, variant: "Body", children: t.accounts.balance?.toLocaleString("en-US", {
748
- currency: "USD",
749
- maximumFractionDigits: 2,
750
- minimumFractionDigits: 2,
751
- style: "currency"
752
- }) })
753
- ] })
754
- ] }),
755
- /* @__PURE__ */ o(
756
- g,
757
- {
758
- sx: {
759
- bgcolor: "background.default",
760
- flexDirection: "row",
761
- justifyContent: "space-between",
762
- px: 24,
763
- py: 10
764
- },
765
- children: [
766
- /* @__PURE__ */ e(r, { sx: { color: "text.primary", fontWeight: 700 }, variant: "XSmall", children: y.overview.holding }),
767
- /* @__PURE__ */ e(r, { sx: { color: "text.primary", fontWeight: 700 }, variant: "XSmall", children: y.overview.market_value })
768
- ]
769
- }
770
- ),
771
- t.holdings?.map((i, n) => {
772
- const h = c === i.id;
773
- return /* @__PURE__ */ o(
774
- Ce,
775
- {
776
- disableGutters: !0,
777
- expanded: b[i.id] === !0,
778
- onChange: i ? f(i?.id) : () => {
779
- },
780
- sx: {
781
- ":before": n === 0 ? { opacity: 0 } : {},
782
- ".MuiAccordionDetails-root": { p: 0 }
783
- },
784
- children: [
785
- /* @__PURE__ */ e(
786
- De,
787
- {
788
- "aria-controls": "panel1a-content",
789
- id: "panel1a-header",
790
- sx: [
791
- { height: 64 },
792
- b[i.id] && n > 0 && {
793
- borderTop: 1,
794
- borderColor: "border.main"
795
- }
796
- ],
797
- children: /* @__PURE__ */ o(g, { sx: { flexDirection: "row", width: "100%" }, children: [
798
- /* @__PURE__ */ e("div", { style: { width: 24 } }),
799
- /* @__PURE__ */ o(
800
- g,
801
- {
802
- sx: [
803
- {
804
- alignItems: "center",
805
- flexDirection: "row",
806
- justifyContent: "space-between",
807
- pr: 24,
808
- py: 14,
809
- width: "100%"
810
- },
811
- b[i.id] && {
812
- borderBottom: 1,
813
- borderColor: "border.main"
814
- }
815
- ],
816
- children: [
817
- /* @__PURE__ */ e(
818
- g,
819
- {
820
- sx: {
821
- alignItems: "center",
822
- flexDirection: "row",
823
- gap: 12
824
- },
825
- children: /* @__PURE__ */ o(g, { sx: { overflow: "hidden", width: 98 }, children: [
826
- /* @__PURE__ */ e(r, { sx: { fontWeight: 600 }, variant: "Body", children: i.holding }),
827
- /* @__PURE__ */ e(r, { variant: "XSmall", children: i.description })
828
- ] })
829
- }
830
- ),
831
- /* @__PURE__ */ o(
832
- g,
833
- {
834
- sx: {
835
- alignItems: "center",
836
- flex: 1,
837
- flexDirection: "row",
838
- gap: 12,
839
- justifyContent: "flex-end"
840
- },
841
- children: [
842
- /* @__PURE__ */ o(g, { children: [
843
- /* @__PURE__ */ e(r, { sx: { fontWeight: 600, textAlign: "right" }, variant: "Body", children: i.marketValue?.toLocaleString("en-US", {
844
- currency: "USD",
845
- maximumFractionDigits: 2,
846
- minimumFractionDigits: 2,
847
- style: "currency"
848
- }) }),
849
- /* @__PURE__ */ o(g, { sx: { alignItems: "center", gap: 2, flexDirection: "row" }, children: [
850
- i.totalGainLoss !== 0 && /* @__PURE__ */ e(
851
- k,
852
- {
853
- name: i.totalGainLoss >= 0 ? "trending_up" : "trending_down",
854
- size: 12,
855
- sx: {
856
- verticalAlign: "middle",
857
- mr: 1,
858
- color: i.totalGainLoss >= 0 ? "success.main" : "grey.700"
859
- }
860
- }
861
- ),
862
- /* @__PURE__ */ e(
863
- r,
864
- {
865
- sx: {
866
- color: i.totalGainLoss <= 0 ? "grey.700" : "success.main",
867
- fontWeight: i.totalGainLoss <= 0 ? 400 : 700
868
- },
869
- variant: "XSmall",
870
- children: i.costBasis ? `${(i.totalGainLoss / i.costBasis * 100).toFixed(2)}%` : "0.00%"
871
- }
872
- ),
873
- /* @__PURE__ */ e(r, { sx: { color: "grey.700" }, variant: "XSmall", children: "|" }),
874
- /* @__PURE__ */ e(
875
- r,
876
- {
877
- sx: {
878
- color: i.totalGainLoss <= 0 ? "grey.700" : "success.main",
879
- fontWeight: i.totalGainLoss <= 0 ? 400 : 700
880
- },
881
- variant: "XSmall",
882
- children: Math.abs(i.totalGainLoss).toLocaleString("en-US", {
883
- currency: "USD",
884
- maximumFractionDigits: 2,
885
- minimumFractionDigits: 2,
886
- style: "currency"
887
- })
888
- }
889
- )
890
- ] })
891
- ] }),
892
- /* @__PURE__ */ e(
893
- k,
894
- {
895
- name: b[i.id] ? "expand_less" : "expand_more",
896
- size: 20
897
- }
898
- )
899
- ]
900
- }
901
- )
902
- ]
903
- }
904
- )
905
- ] })
906
- }
907
- ),
908
- /* @__PURE__ */ e(Se, { children: /* @__PURE__ */ o(
909
- g,
910
- {
911
- sx: {
912
- alignItems: "center",
913
- bgcolor: "background.default",
914
- flexDirection: "row",
915
- pl: 24
916
- },
917
- children: [
918
- /* @__PURE__ */ e(g, { sx: { width: 32 } }),
919
- /* @__PURE__ */ o(g, { sx: { flex: 1 }, children: [
920
- /* @__PURE__ */ o(
921
- g,
922
- {
923
- sx: {
924
- alignItems: "center",
925
- borderBottom: 1,
926
- borderColor: "border.main",
927
- flexDirection: "row",
928
- height: 48,
929
- justifyContent: "space-between",
930
- pr: 24
931
- },
932
- children: [
933
- /* @__PURE__ */ e(r, { sx: { color: "text.primary" }, variant: "Body", children: y.overview.quantity }),
934
- /* @__PURE__ */ e(r, { sx: { color: "text.primary" }, variant: "Small", children: i.qty })
935
- ]
936
- }
937
- ),
938
- /* @__PURE__ */ o(
939
- g,
940
- {
941
- sx: {
942
- alignItems: "center",
943
- flexDirection: "row",
944
- height: 48,
945
- justifyContent: "space-between",
946
- pr: 24
947
- },
948
- children: [
949
- /* @__PURE__ */ e(r, { sx: { color: "text.primary" }, variant: "Body", children: y.overview.cost_basis_header }),
950
- /* @__PURE__ */ o(
951
- g,
952
- {
953
- direction: "row",
954
- sx: {
955
- alignItems: "center",
956
- gap: 4
957
- },
958
- children: [
959
- h ? /* @__PURE__ */ e(
960
- we,
961
- {
962
- autoFocus: !0,
963
- onBlur: () => u(i.id),
964
- onChange: v,
965
- onKeyDown: (C) => d(C, i.id),
966
- size: "small",
967
- sx: {
968
- fontSize: 14,
969
- width: 58,
970
- "& .MuiInputBase-input": {
971
- padding: "4px 0",
972
- textAlign: "center",
973
- fontWeight: 600,
974
- color: "text.primary"
975
- },
976
- "& .MuiOutlinedInput-notchedOutline": {
977
- border: "none"
978
- }
979
- },
980
- value: p
981
- }
982
- ) : /* @__PURE__ */ e(r, { sx: { fontSize: 14, width: 58 }, variant: "Small", children: i.costBasis?.toLocaleString("en-US", {
983
- currency: "USD",
984
- maximumFractionDigits: 2,
985
- minimumFractionDigits: 2,
986
- style: "currency"
987
- }) }),
988
- /* @__PURE__ */ e(
989
- se,
990
- {
991
- onClick: () => x(i.id, i.costBasis),
992
- sx: { minWidth: 16, minHeight: 16 },
993
- children: /* @__PURE__ */ e(k, { name: "stylus", size: 16, sx: { color: "grey.700" } })
994
- }
995
- )
996
- ]
997
- }
998
- )
999
- ]
1000
- }
1001
- )
1002
- ] })
1003
- ]
1004
- }
1005
- ) })
1006
- ]
1007
- },
1008
- i.id
1009
- );
1010
- })
1011
- ]
1012
- }
1013
- );
1014
- }, ut = P(mt), q = (t) => /* @__PURE__ */ o(ze, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
1015
- /* @__PURE__ */ e(r, { sx: { color: "text.primary", fontWeight: 600, fontSize: 14 }, variant: "Small", children: t.colDef.headerName }),
1016
- /* @__PURE__ */ e(k, { name: "expand_all", size: 12 })
1017
- ] }), pt = ({
1018
- data: t,
1019
- editingHoldingId: p,
1020
- currentEditedCostBasis: c,
1021
- handleCostBasisClick: u,
1022
- handleCostBasisChange: x,
1023
- handleCostBasisKeyDown: v,
1024
- handleCostBasisBlur: d
1025
- }) => {
1026
- const { investments: l } = M(), y = ce().palette.mode === "dark", b = "success.main", s = y ? "grey.300" : "grey.700", f = (n, h = "lesserThan") => h === "greaterThan" ? n >= 0 ? b : s : n <= 0 ? s : b, i = [
1027
- {
1028
- field: "qty",
1029
- headerName: l.overview.qty_header,
1030
- sortable: !1,
1031
- width: 48,
1032
- align: "center",
1033
- headerAlign: "center"
1034
- },
1035
- {
1036
- field: "holding",
1037
- headerName: l.overview.holding_header,
1038
- flex: 1,
1039
- renderHeader: q,
1040
- renderCell: (n) => /* @__PURE__ */ e(_, { sx: { alignItems: "center", gap: 16, flexDirection: "row" }, children: /* @__PURE__ */ o(_, { children: [
1041
- /* @__PURE__ */ e(r, { sx: { fontWeight: 700 }, children: n.row.holding }),
1042
- /* @__PURE__ */ e(r, { sx: { color: "text.secondary", fontWeight: 400 }, variant: "tiny", children: n.row.description })
1043
- ] }) })
1044
- },
1045
- {
1046
- field: "costBasis",
1047
- headerName: l.overview.cost_basis_header,
1048
- width: 132,
1049
- renderHeader: q,
1050
- renderCell: (n) => {
1051
- const h = p === n.row.id;
1052
- return /* @__PURE__ */ o(_, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
1053
- h ? /* @__PURE__ */ e(
1054
- we,
1055
- {
1056
- autoFocus: !0,
1057
- onBlur: () => d(n.row.id),
1058
- onChange: x,
1059
- onKeyDown: (C) => v(C, n.row.id),
1060
- size: "small",
1061
- sx: {
1062
- fontSize: 14,
1063
- width: 57,
1064
- "& .MuiInputBase-input": {
1065
- padding: "4px 0",
1066
- textAlign: "center",
1067
- fontWeight: 600,
1068
- color: "text.primary"
1069
- },
1070
- "& .MuiOutlinedInput-notchedOutline": {
1071
- border: "none"
1072
- }
1073
- },
1074
- value: c
1075
- }
1076
- ) : /* @__PURE__ */ e(r, { sx: { fontSize: 14, width: 57 }, variant: "Small", children: n.value?.toLocaleString("en-US", {
1077
- currency: "USD",
1078
- maximumFractionDigits: 2,
1079
- minimumFractionDigits: 2,
1080
- style: "currency"
1081
- }) }),
1082
- /* @__PURE__ */ e(
1083
- se,
1084
- {
1085
- onClick: () => u(n.row.id, n.row.costBasis),
1086
- sx: { minWidth: 12, minHeight: 12 },
1087
- children: /* @__PURE__ */ e(k, { name: "stylus", size: 12, sx: { color: "grey.700" } })
1088
- }
1089
- )
1090
- ] });
1091
- },
1092
- align: "center",
1093
- headerAlign: "center"
1094
- },
1095
- {
1096
- field: "totalGainLoss",
1097
- headerName: l.overview.total_gain_loss_header,
1098
- width: 196,
1099
- renderHeader: q,
1100
- renderCell: (n) => {
1101
- const h = n.row.costBasis, C = h ? n.row.totalGainLoss / h * 100 : 0;
1102
- return /* @__PURE__ */ o(_, { sx: { alignItems: "center", flexDirection: "row", gap: 2 }, children: [
1103
- n.value !== 0 && /* @__PURE__ */ e(
1104
- k,
1105
- {
1106
- name: n.value > 0 ? "trending_up" : "trending_down",
1107
- size: 16,
1108
- sx: {
1109
- color: f(n.value),
1110
- mr: 1,
1111
- verticalAlign: "middle"
1112
- }
1113
- }
1114
- ),
1115
- /* @__PURE__ */ e(
1116
- r,
1117
- {
1118
- sx: {
1119
- color: f(n.value),
1120
- fontWeight: n.value > 0 ? 700 : 400
1121
- },
1122
- variant: "Small",
1123
- children: h ? `${C.toFixed(2)}%` : "0.00%"
1124
- }
1125
- ),
1126
- /* @__PURE__ */ e(r, { sx: { color: "text.secondary" }, variant: "XSmall", children: "|" }),
1127
- /* @__PURE__ */ e(
1128
- r,
1129
- {
1130
- sx: {
1131
- color: f(n.value),
1132
- fontWeight: n.value > 0 ? 700 : 400
1133
- },
1134
- variant: "Small",
1135
- children: Math.abs(n.value).toLocaleString("en-US", {
1136
- currency: "USD",
1137
- maximumFractionDigits: 2,
1138
- minimumFractionDigits: 2,
1139
- style: "currency"
1140
- })
1141
- }
1142
- )
1143
- ] });
1144
- },
1145
- align: "right",
1146
- headerAlign: "right",
1147
- sortable: !1
1148
- },
1149
- {
1150
- field: "marketValue",
1151
- headerName: l.overview.market_value_header,
1152
- width: 132,
1153
- renderHeader: q,
1154
- renderCell: (n) => /* @__PURE__ */ e(r, { sx: { fontWeight: 700 }, variant: "Small", children: n.value?.toLocaleString("en-US", {
1155
- currency: "USD",
1156
- maximumFractionDigits: 2,
1157
- minimumFractionDigits: 2,
1158
- style: "currency"
1159
- }) }),
1160
- align: "right",
1161
- headerAlign: "right"
1162
- }
1163
- ];
1164
- return /* @__PURE__ */ e(
1165
- ne,
1166
- {
1167
- sx: {
1168
- boxShadow: "none",
1169
- width: "100%"
1170
- },
1171
- children: /* @__PURE__ */ e(
1172
- qe,
1173
- {
1174
- columns: i,
1175
- disableColumnFilter: !0,
1176
- disableColumnMenu: !0,
1177
- disableRowSelectionOnClick: !0,
1178
- hideFooter: !0,
1179
- rows: t,
1180
- slotProps: { baseIconButton: { sx: { display: "none" } } }
1181
- }
1182
- )
1183
- }
1184
- );
1185
- }, ht = () => {
1186
- const { isMobile: t } = H(), [p, c] = O({}), [u, x] = O(!1), { selectedAccountGuids: v } = Q(), { visibleHoldings: d, updateHoldings: l } = U(), [m, y] = A.useState(!1), [b, s] = O({
1187
- accounts: [],
1188
- holdings: []
1189
- }), { accounts: f, investments: i } = M(), { isCopyLoaded: n } = Q(), [h, C] = O(null), [S, L] = O(""), B = ce().palette.mode === "dark", E = B ? "#0AC295" : "#09A57F", N = B ? "grey.300" : "grey.700", T = (a, w = "lesserThan") => w === "greaterThan" ? a >= 0 ? E : N : a <= 0 ? N : E, j = (a, w) => {
1190
- C(a), L(w.toFixed(2));
1191
- }, J = (a) => {
1192
- const w = a.target.value;
1193
- /^\d*\.?\d*$/.test(w) && L(w);
1194
- }, me = (a, w) => {
1195
- a.key === "Enter" ? Z(w) : a.key === "Escape" && C(null);
1196
- }, Z = (a) => {
1197
- const w = d.find(({ guid: F }) => F === a);
1198
- if (!w) return;
1199
- const G = Number(S);
1200
- if (l({ ...w, cost_basis: G }), t) {
1201
- const F = b.holdings.map(
1202
- (D) => D.id === a ? { ...D, costBasis: G } : D
1203
- );
1204
- s((D) => ({
1205
- ...D,
1206
- holdings: F
1207
- }));
1208
- }
1209
- C(null);
1210
- }, Le = (a) => (w, G) => {
1211
- c((F) => ({
1212
- ...F,
1213
- [a]: G
1214
- }));
1215
- }, { visibleHoldings: ue } = U(), { visibleInvestmentAccounts: Ie } = le(), X = Ie.filter(
1216
- ({ guid: a }) => v.includes(a)
1217
- ), Be = X.reduce((a, w) => a + (w.balance || 0), 0), Ae = X.map(({ guid: a }) => a), $ = ue.filter(
1218
- ({ account_guid: a }) => Ae.includes(a)
1219
- ).reduce((a, w) => {
1220
- const G = w.market_value ? w.market_value - (w.cost_basis || 0) : 0;
1221
- return a + G;
1222
- }, 0), Te = () => {
1223
- x(!1);
1224
- };
1225
- return n ? /* @__PURE__ */ o(g, { sx: { alignItems: "center", gap: 48, pt: 48, width: "100%" }, children: [
1226
- !!X.length && /* @__PURE__ */ o(g, { sx: { alignItems: "center" }, children: [
1227
- /* @__PURE__ */ e(r, { sx: { color: "text.secondary" }, children: i.overview.total_portfolio }),
1228
- /* @__PURE__ */ e(ge, { children: Be.toLocaleString("en-US", {
1229
- currency: "USD",
1230
- maximumFractionDigits: 2,
1231
- minimumFractionDigits: 2,
1232
- style: "currency"
1233
- }) }),
1234
- /* @__PURE__ */ o(g, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
1235
- /* @__PURE__ */ e(
1236
- k,
1237
- {
1238
- name: $ >= 0 ? "trending_up" : "trending_down",
1239
- size: 20,
1240
- sx: { color: T($, "greaterThan") }
1241
- }
1242
- ),
1243
- /* @__PURE__ */ e(
1244
- r,
1245
- {
1246
- sx: { color: T($, "greaterThan"), fontWeight: 700 },
1247
- variant: "Small",
1248
- children: $.toLocaleString("en-US", {
1249
- currency: "USD",
1250
- maximumFractionDigits: 2,
1251
- minimumFractionDigits: 2,
1252
- style: "currency"
1253
- })
1254
- }
1255
- )
1256
- ] })
1257
- ] }),
1258
- X.map((a) => {
1259
- const w = ue.filter((I) => I.account_guid === a.guid).map((I) => ({
1260
- id: I.guid,
1261
- qty: I.shares || 0,
1262
- holding: I.symbol || I.description || "Unknown",
1263
- costBasis: I.cost_basis || 0,
1264
- totalGainLoss: I.market_value ? I.market_value - (I.cost_basis || 0) : 0,
1265
- marketValue: I.market_value || 0,
1266
- description: I.description || ""
1267
- })), G = w.length > 0, F = a.balance, D = w.reduce(
1268
- (I, Fe) => Fe.totalGainLoss + I,
1269
- 0
1270
- ), pe = F ? D / F * 100 : 0;
1271
- if (t)
1272
- return /* @__PURE__ */ e(
1273
- ne,
1274
- {
1275
- onClick: w.length ? () => {
1276
- x(!0), s({
1277
- holdings: w,
1278
- accounts: a
1279
- });
1280
- } : void 0,
1281
- sx: {
1282
- width: "100%",
1283
- overflow: "hidden"
1284
- },
1285
- children: /* @__PURE__ */ o(
1286
- g,
1287
- {
1288
- sx: {
1289
- border: 1,
1290
- borderColor: "border.main",
1291
- borderRadius: "8px",
1292
- ml: 16,
1293
- mr: 16,
1294
- overflow: "hidden",
1295
- pt: 14
1296
- },
1297
- children: [
1298
- /* @__PURE__ */ o(
1299
- g,
1300
- {
1301
- sx: {
1302
- alignItems: "center",
1303
- borderBottom: 1,
1304
- borderColor: "border.main",
1305
- flexDirection: "row",
1306
- pb: 14,
1307
- pl: 14,
1308
- pr: 14
1309
- },
1310
- children: [
1311
- /* @__PURE__ */ e(
1312
- te,
1313
- {
1314
- alt: a.institutionName || "",
1315
- institutionGuid: a.institution_guid || "",
1316
- size: 32
1317
- }
1318
- ),
1319
- /* @__PURE__ */ o(g, { sx: { overflow: "hidden", pl: 13, pr: 13 }, children: [
1320
- /* @__PURE__ */ e(r, { sx: { color: "text.secondary" }, variant: "XSmall", children: a.memberName }),
1321
- /* @__PURE__ */ e(r, { sx: { color: "text.primary", fontWeight: 600 }, variant: "Body", children: a.user_name || a.name })
1322
- ] })
1323
- ]
1324
- }
1325
- ),
1326
- /* @__PURE__ */ o(
1327
- g,
1328
- {
1329
- sx: {
1330
- alignItems: "center",
1331
- flexDirection: "row",
1332
- justifyContent: "space-between",
1333
- pb: 8,
1334
- pt: 8
1335
- },
1336
- children: [
1337
- /* @__PURE__ */ o(
1338
- g,
1339
- {
1340
- sx: {
1341
- alignItems: "center",
1342
- borderRight: 1,
1343
- borderColor: "border.main",
1344
- flex: 1,
1345
- justifyContent: "center",
1346
- pb: 14,
1347
- pl: 7,
1348
- pr: 7,
1349
- pt: 14
1350
- },
1351
- children: [
1352
- /* @__PURE__ */ e(r, { sx: { color: "text.secondary", fontSize: 11 }, variant: "Small", children: i.overview.total_gain_Loss }),
1353
- /* @__PURE__ */ o(
1354
- g,
1355
- {
1356
- sx: {
1357
- alignItems: "center",
1358
- flexDirection: "row",
1359
- gap: 2,
1360
- justifyContent: "flex-end"
1361
- },
1362
- children: [
1363
- D !== 0 && /* @__PURE__ */ e(
1364
- k,
1365
- {
1366
- name: D > 0 ? "trending_up" : "trending_down",
1367
- size: 20,
1368
- sx: { color: T(D) }
1369
- }
1370
- ),
1371
- /* @__PURE__ */ o(
1372
- r,
1373
- {
1374
- sx: {
1375
- color: T(D),
1376
- fontWeight: 600
1377
- },
1378
- variant: "Body",
1379
- children: [
1380
- pe.toFixed(2),
1381
- "%"
1382
- ]
1383
- }
1384
- ),
1385
- /* @__PURE__ */ e(r, { sx: { color: "text.secondary" }, variant: "XSmall", children: "|" }),
1386
- /* @__PURE__ */ e(
1387
- r,
1388
- {
1389
- sx: {
1390
- color: T(D),
1391
- fontWeight: 600
1392
- },
1393
- variant: "Body",
1394
- children: Math.abs(D).toLocaleString("en-US", {
1395
- currency: "USD",
1396
- maximumFractionDigits: 2,
1397
- minimumFractionDigits: 2,
1398
- style: "currency"
1399
- })
1400
- }
1401
- )
1402
- ]
1403
- }
1404
- )
1405
- ]
1406
- }
1407
- ),
1408
- /* @__PURE__ */ o(
1409
- g,
1410
- {
1411
- sx: {
1412
- alignItems: "center",
1413
- flex: 1,
1414
- justifyContent: "center",
1415
- pb: 14,
1416
- pl: 7,
1417
- pr: 7,
1418
- pt: 14
1419
- },
1420
- children: [
1421
- /* @__PURE__ */ e(r, { sx: { color: "text.secondary" }, variant: "XSmall", children: i.overview.total_value }),
1422
- /* @__PURE__ */ e(r, { sx: { color: "text.primary", fontWeight: 600 }, variant: "Body", children: F?.toLocaleString("en-US", {
1423
- currency: "USD",
1424
- maximumFractionDigits: 2,
1425
- minimumFractionDigits: 2,
1426
- style: "currency"
1427
- }) })
1428
- ]
1429
- }
1430
- )
1431
- ]
1432
- }
1433
- )
1434
- ]
1435
- }
1436
- )
1437
- },
1438
- a.guid
1439
- );
1440
- const ke = B ? "grey.700" : "grey.400", We = w.length ? "text.primary" : ke;
1441
- return /* @__PURE__ */ o(
1442
- Ce,
1443
- {
1444
- expanded: p[a.guid] === !0,
1445
- onChange: G ? Le(a.guid) : () => {
1446
- },
1447
- sx: {
1448
- border: 1,
1449
- borderColor: "divider",
1450
- borderRadius: "4px",
1451
- width: "100%"
1452
- },
1453
- children: [
1454
- /* @__PURE__ */ o(
1455
- De,
1456
- {
1457
- "aria-controls": "panel1a-content",
1458
- id: "panel1a-header",
1459
- sx: [
1460
- p[a.guid] && {
1461
- borderBottom: 1,
1462
- borderColor: "border.main",
1463
- maxHeight: 88
1464
- }
1465
- ],
1466
- children: [
1467
- /* @__PURE__ */ o(
1468
- g,
1469
- {
1470
- sx: {
1471
- alignItems: "center",
1472
- flexDirection: "row",
1473
- gap: 13,
1474
- p: 14,
1475
- width: "100%"
1476
- },
1477
- children: [
1478
- /* @__PURE__ */ e(k, { name: "expand_more", size: 20, sx: { color: We } }),
1479
- /* @__PURE__ */ e(
1480
- te,
1481
- {
1482
- alt: a.institutionName || "",
1483
- institutionGuid: a.institution_guid || "",
1484
- size: 32
1485
- }
1486
- ),
1487
- /* @__PURE__ */ o(g, { sx: { alignItems: "flex-start" }, children: [
1488
- /* @__PURE__ */ e(r, { sx: { color: "text.secondary" }, variant: "XSmall", children: a.memberName }),
1489
- /* @__PURE__ */ e(r, { sx: { color: "text.primary", fontWeight: 600 }, variant: "Body", children: a.user_name || a.name })
1490
- ] })
1491
- ]
1492
- }
1493
- ),
1494
- /* @__PURE__ */ o(g, { sx: { flexDirection: "row" }, children: [
1495
- /* @__PURE__ */ o(g, { sx: { alignItems: "flex-end", pb: 14, pl: 24, pr: 24, pt: 14 }, children: [
1496
- /* @__PURE__ */ e(r, { sx: { color: "text.secondary" }, variant: "XSmall", children: i.overview.total_gain_Loss }),
1497
- /* @__PURE__ */ o(
1498
- g,
1499
- {
1500
- sx: {
1501
- alignItems: "center",
1502
- flexDirection: "row",
1503
- gap: 2,
1504
- justifyContent: "flex-end"
1505
- },
1506
- children: [
1507
- D !== 0 && /* @__PURE__ */ e(
1508
- k,
1509
- {
1510
- name: D >= 0 ? "trending_up" : "trending_down",
1511
- size: 20,
1512
- sx: { color: T(D) }
1513
- }
1514
- ),
1515
- /* @__PURE__ */ o(
1516
- r,
1517
- {
1518
- sx: {
1519
- color: T(D),
1520
- fontWeight: 600
1521
- },
1522
- variant: "Body",
1523
- children: [
1524
- pe.toFixed(2),
1525
- "%"
1526
- ]
1527
- }
1528
- ),
1529
- /* @__PURE__ */ e(r, { sx: { color: "text.secondary" }, variant: "XSmall", children: "|" }),
1530
- /* @__PURE__ */ e(
1531
- r,
1532
- {
1533
- sx: {
1534
- color: T(D),
1535
- fontWeight: 600
1536
- },
1537
- variant: "Body",
1538
- children: Math.abs(D).toLocaleString("en-US", {
1539
- currency: "USD",
1540
- maximumFractionDigits: 2,
1541
- minimumFractionDigits: 2,
1542
- style: "currency"
1543
- })
1544
- }
1545
- )
1546
- ]
1547
- }
1548
- )
1549
- ] }),
1550
- /* @__PURE__ */ e(g, { sx: { alignItems: "flex-end", gap: 12, pb: 14, pl: 16, pr: 16, pt: 14 }, children: /* @__PURE__ */ o(g, { sx: { alignItems: "flex-end" }, children: [
1551
- /* @__PURE__ */ e(r, { sx: { color: "text.secondary" }, variant: "XSmall", children: i.overview.total_value }),
1552
- /* @__PURE__ */ e(r, { sx: { color: "text.primary", fontWeight: 600 }, variant: "Body", children: F?.toLocaleString("en-US", {
1553
- currency: "USD",
1554
- maximumFractionDigits: 2,
1555
- minimumFractionDigits: 2,
1556
- style: "currency"
1557
- }) })
1558
- ] }) })
1559
- ] })
1560
- ]
1561
- }
1562
- ),
1563
- /* @__PURE__ */ e(Se, { sx: { bgcolor: "background.default", p: 12 }, children: /* @__PURE__ */ e(ne, { sx: { border: 1, borderColor: "border.light" }, children: /* @__PURE__ */ e(
1564
- pt,
1565
- {
1566
- currentEditedCostBasis: S,
1567
- data: w,
1568
- editingHoldingId: h,
1569
- handleCostBasisBlur: Z,
1570
- handleCostBasisChange: J,
1571
- handleCostBasisClick: j,
1572
- handleCostBasisKeyDown: me
1573
- }
1574
- ) }) })
1575
- ]
1576
- },
1577
- a.guid
1578
- );
1579
- }),
1580
- /* @__PURE__ */ e(de, {}),
1581
- /* @__PURE__ */ e(
1582
- ut,
1583
- {
1584
- accountHoldingsData: b,
1585
- currentEditedCostBasis: S,
1586
- editingHoldingId: h,
1587
- handleCostBasisBlur: Z,
1588
- handleCostBasisChange: J,
1589
- handleCostBasisClick: j,
1590
- handleCostBasisKeyDown: me,
1591
- isOpen: u,
1592
- onClose: Te
1593
- }
1594
- ),
1595
- /* @__PURE__ */ e(
1596
- he,
1597
- {
1598
- onClose: () => y(!1),
1599
- showConnectionsWidget: m,
1600
- title: f.manage_connections
1601
- }
1602
- )
1603
- ] }) : /* @__PURE__ */ e(fe, {});
1604
- }, gt = P(ht), xt = ({ title: t }) => /* @__PURE__ */ e(r, { bold: !0, variant: "Body", children: t }), so = P(({ onBackClick: t, sx: p }) => {
1605
- const { onEvent: c } = ye(), { isMobile: u } = H(), { visibleInvestmentAccounts: x } = le(), {
1606
- visibleHoldings: v,
1607
- setShowConnectionsWidget: d,
1608
- showConnectionsWidget: l
1609
- } = U(), { investments: m, accounts: y } = M(), { isCopyLoaded: b, isInitialized: s, setSelectedAccounts: f } = Q(), [i, n] = A.useState(0), { loadHoldings: h } = U();
1610
- A.useEffect(() => {
1611
- f(x);
1612
- }, [x]), A.useEffect(() => {
1613
- s && h().finally();
1614
- }, [s]);
1615
- const C = () => {
1616
- c(z.INVESTMENT_WIDGET_ACCOUNT_FILTER_CLICK);
1617
- };
1618
- if (!b || !s) return /* @__PURE__ */ e(fe, {});
1619
- const S = [
1620
- z.INVESTMENT_WIDGET_DETAILS_CLICK,
1621
- z.INVESTMENT_WIDGET_ALLOCATION_CLICK,
1622
- z.INVESTMENT_WIDGET_ANALYSIS_CLICK
1623
- ], L = x.length === 0 && v.length === 0, W = [
1624
- m.tab_overview_title,
1625
- m.tab_allocation_title,
1626
- m.tab_analysis_title
1627
- ];
1628
- return /* @__PURE__ */ o(
1629
- Ue,
1630
- {
1631
- accountOptions: x,
1632
- onAccountsFilterClick: C,
1633
- onBackClick: t,
1634
- sx: p,
1635
- title: m.title,
1636
- children: [
1637
- /* @__PURE__ */ o(_, { mx: u ? 0 : 48, my: 24, children: [
1638
- /* @__PURE__ */ e(
1639
- Ee,
1640
- {
1641
- onChange: (B, E) => {
1642
- n(E), c(S[E]);
1643
- },
1644
- sx: { bgcolor: "background.paper" },
1645
- textColor: "primary",
1646
- value: L ? -1 : i,
1647
- variant: "fullWidth",
1648
- children: W.map((B) => /* @__PURE__ */ e(Me, { disabled: L, label: /* @__PURE__ */ e(xt, { title: B }) }, B))
1649
- }
1650
- ),
1651
- L ? /* @__PURE__ */ e(
1652
- je,
1653
- {
1654
- header: m.empty_state_header,
1655
- icon: "bid_landscape",
1656
- onClick: () => {
1657
- d(!0), c(z.ACCOUNTS_CLICK_CONNECT);
1658
- },
1659
- primaryButton: m.overview.connect_accounts,
1660
- subText: m.empty_state_description,
1661
- sx: {
1662
- width: { sm: 432 },
1663
- ".buttons-footer": {
1664
- width: 167
1665
- },
1666
- ".MuiTypography-h2": {
1667
- mt: 20,
1668
- mb: 4
1669
- },
1670
- px: 16
1671
- }
1672
- }
1673
- ) : /* @__PURE__ */ o(ae, { children: [
1674
- i === 0 && /* @__PURE__ */ e(gt, {}),
1675
- i === 1 && /* @__PURE__ */ e(rt, {}),
1676
- i === 2 && /* @__PURE__ */ e(dt, {})
1677
- ] })
1678
- ] }),
1679
- /* @__PURE__ */ e(
1680
- he,
1681
- {
1682
- onClose: () => d(!1),
1683
- showConnectionsWidget: l,
1684
- title: y.manage_connections
1685
- }
1686
- )
1687
- ]
1688
- }
1689
- );
1690
- });
1691
- export {
1692
- so as InvestmentsWidget
1693
- };
1694
- //# sourceMappingURL=index.es.js.map