@mx-cartographer/experiences 6.26.18-alpha.mega4 → 6.26.18-alpha.sms1

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