@mx-cartographer/experiences 9.4.20 → 9.4.21

package/dist/investments/components/Overview.es.js

@@ -1,59 +1,67 @@
-import { useAccountStore as te, useGlobalCopyStore as oe, useGlobalUiStore as A, useHoldingStore as G } from "../../common/context/hooks.es.js";
-import { useScreenSize as re } from "../../common/hooks/useScreenSize.es.js";
-import ie from "../../common/components/Loader.es.js";
-import ne from "../../accounts/components/ConnectionsDrawer.es.js";
-import { EmptyStateFooterComponent as se } from "./EmptyStateFooterComponent.es.js";
-import ae from "./HoldingDrawer.es.js";
-import le from "./HoldingTable.es.js";
-import ce, { useState as u } from "react";
-import { observer as de } from "mobx-react-lite";
-import { InstitutionLogo as z, P as me, Text as n } from "@mxenabled/mxui";
-import T from "@mui/material/Paper";
+import { useAccountStore as le, useGlobalCopyStore as ce, useGlobalUiStore as M, useHoldingStore as N } from "../../common/context/hooks.es.js";
+import { useScreenSize as de } from "../../common/hooks/useScreenSize.es.js";
+import { getHoldingGainLoss as C, getHoldingMarketValue as me } from "../../core/utils/InvestmentUtil.es.js";
+import ge from "../../common/components/Loader.es.js";
+import ue from "../../accounts/components/ConnectionsDrawer.es.js";
+import { EmptyStateFooterComponent as pe } from "./EmptyStateFooterComponent.es.js";
+import xe from "./HoldingDrawer.es.js";
+import he from "./HoldingTable.es.js";
+import fe, { useState as g } from "react";
+import { observer as ye } from "mobx-react-lite";
+import { InstitutionLogo as V, P as be, Text as i } from "@mxenabled/mxui";
+import O from "@mui/material/Paper";
 import { Icon as x } from "@mxenabled/mx-icons";
-import { jsx as t, jsxs as r } from "react/jsx-runtime";
-import { useTheme as ue } from "@mui/material/styles";
+import { Fragment as D, jsx as t, jsxs as r } from "react/jsx-runtime";
+import { useTheme as ve } from "@mui/material/styles";
 import s from "@mui/system/Stack";
-import ge from "@mui/material/Accordion";
-import pe from "@mui/material/AccordionDetails";
-import xe from "@mui/material/AccordionSummary";
-var he = () => {
-  const { isMobile: b } = re(), [C, j] = u({}), [E, D] = u(!1), { selectedAccountGuids: N } = A(), { visibleHoldings: M, updateHoldings: O } = G(), [P, R] = ce.useState(!1), [w, S] = u({
+import Ce from "@mui/material/Accordion";
+import De from "@mui/material/AccordionDetails";
+import we from "@mui/material/AccordionSummary";
+var Se = () => {
+  const { isMobile: w } = de(), [S, P] = g({}), [R, L] = g(!1), { selectedAccountGuids: $ } = M(), { visibleHoldings: q, updateHoldings: K } = N(), [J, Q] = fe.useState(!1), [_, I] = g({
     accounts: [],
     holdings: []
-  }), { accounts: V, investments: m } = oe(), { isCopyLoaded: $ } = A(), [_, h] = u(null), [f, I] = u(""), y = ue().palette.mode === "dark", F = y ? "#0AC295" : "#09A57F", L = y ? "grey.300" : "grey.700", c = (e, o = "lesserThan") => o === "greaterThan" ? e >= 0 ? F : L : e <= 0 ? L : F, k = (e, o) => {
-    h(e), I(o.toFixed(2));
-  }, H = (e) => {
+  }), { accounts: X, investments: m } = ce(), { isCopyLoaded: Y } = M(), [F, h] = g(null), [f, H] = g(""), y = ve().palette.mode === "dark", B = y ? "#0AC295" : "#09A57F", A = y ? "grey.300" : "grey.700", d = (e, o = "lesserThan") => o === "greaterThan" ? e >= 0 ? B : A : e <= 0 ? A : B, U = (e, o) => {
+    h(e), H(o.toFixed(2));
+  }, G = (e) => {
     const o = e.target.value;
-    /^\d*\.?\d*$/.test(o) && I(o);
-  }, U = (e, o) => {
-    e.key === "Enter" ? v(o) : e.key === "Escape" && h(null);
-  }, v = (e) => {
-    const o = M.find(({ guid: l }) => l === e);
+    /^\d*\.?\d*$/.test(o) && H(o);
+  }, k = (e, o) => {
+    e.key === "Enter" ? b(o) : e.key === "Escape" && h(null);
+  }, b = (e) => {
+    const o = q.find(({ guid: l }) => l === e);
     if (!o) return;
-    const d = Number(f);
-    if (O({
+    const c = Number(f);
+    if (K({
       ...o,
-      cost_basis: d
-    }), b) {
-      const l = w.holdings.map((i) => i.id === e ? {
-        ...i,
-        costBasis: d
-      } : i);
-      S((i) => ({
-        ...i,
+      cost_basis: c
+    }), w) {
+      const l = _.holdings.map((n) => n.id === e ? {
+        ...n,
+        costBasis: c,
+        rawCostBasis: c,
+        gainLossBasis: c,
+        totalGainLoss: n.marketValue - c,
+        gainLossAvailable: !0
+      } : n);
+      I((n) => ({
+        ...n,
         holdings: l
       }));
     }
     h(null);
-  }, q = (e) => (o, d) => {
-    j((l) => ({
+  }, Z = (e) => (o, c) => {
+    P((l) => ({
       ...l,
-      [e]: d
+      [e]: c
     }));
-  }, { visibleHoldings: B } = G(), { visibleInvestmentAccounts: K } = te(), g = K.filter(({ guid: e }) => N.includes(e)), J = g.reduce((e, o) => e + (o.balance || 0), 0), Q = g.map(({ guid: e }) => e), p = B.filter(({ account_guid: e }) => Q.includes(e)).reduce((e, o) => e + (o.market_value ? o.market_value - (o.cost_basis || 0) : 0), 0), X = () => {
-    D(!1);
+  }, { visibleHoldings: W } = N(), { visibleInvestmentAccounts: ee } = le(), u = ee.filter(({ guid: e }) => $.includes(e)), te = u.reduce((e, o) => e + (o.balance || 0), 0), oe = new Set(u.map(({ guid: e }) => e)), z = W.filter(({ account_guid: e }) => oe.has(e)), p = z.reduce((e, o) => {
+    const { available: c, gainLoss: l } = C(o);
+    return c ? e + l : e;
+  }, 0), ie = z.some((e) => C(e).available), ne = () => {
+    L(!1);
   };
-  return $ ? /* @__PURE__ */ r(s, {
+  return Y ? /* @__PURE__ */ r(s, {
     sx: {
       alignItems: "center",
       gap: 48,
@@ -61,35 +69,35 @@ var he = () => {
       width: "100%"
     },
     children: [
-      !!g.length && /* @__PURE__ */ r(s, {
+      !!u.length && /* @__PURE__ */ r(s, {
         sx: { alignItems: "center" },
         children: [
-          /* @__PURE__ */ t(n, {
+          /* @__PURE__ */ t(i, {
             sx: { color: "text.secondary" },
             children: m.overview.total_portfolio
           }),
-          /* @__PURE__ */ t(me, {
+          /* @__PURE__ */ t(be, {
             variant: "h1",
-            children: J.toLocaleString("en-US", {
+            children: te.toLocaleString("en-US", {
               currency: "USD",
               maximumFractionDigits: 2,
               minimumFractionDigits: 2,
               style: "currency"
             })
           }),
-          /* @__PURE__ */ r(s, {
+          /* @__PURE__ */ t(s, {
             sx: {
               alignItems: "center",
               flexDirection: "row",
               gap: 8
             },
-            children: [/* @__PURE__ */ t(x, {
+            children: ie ? /* @__PURE__ */ r(D, { children: [/* @__PURE__ */ t(x, {
               name: p >= 0 ? "trending_up" : "trending_down",
               size: 20,
-              sx: { color: c(p, "greaterThan") }
-            }), /* @__PURE__ */ t(n, {
+              sx: { color: d(p, "greaterThan") }
+            }), /* @__PURE__ */ t(i, {
               sx: {
-                color: c(p, "greaterThan"),
+                color: d(p, "greaterThan"),
                 fontWeight: 700
               },
               variant: "body2",
@@ -99,23 +107,36 @@ var he = () => {
                 minimumFractionDigits: 2,
                 style: "currency"
               })
-            })]
+            })] }) : /* @__PURE__ */ t(i, {
+              sx: {
+                color: "text.secondary",
+                fontWeight: 700
+              },
+              variant: "body2",
+              children: "—"
+            })
           })
         ]
       }),
-      g.map((e) => {
-        const o = B.filter((a) => a.account_guid === e.guid).map((a) => ({
-          id: a.guid,
-          qty: a.shares || 0,
-          holding: a.symbol || a.description || "Unknown",
-          costBasis: a.cost_basis || 0,
-          totalGainLoss: a.market_value ? a.market_value - (a.cost_basis || 0) : 0,
-          marketValue: a.market_value || 0,
-          description: a.description || ""
-        })), d = o.length > 0, l = e.balance, i = o.reduce((a, ee) => ee.totalGainLoss + a, 0), W = l ? i / l * 100 : 0;
-        if (b) return /* @__PURE__ */ t(T, {
+      u.map((e) => {
+        const o = W.filter((a) => a.account_guid === e.guid).map((a) => {
+          const { available: v, basis: E, gainLoss: ae } = C(a);
+          return {
+            id: a.guid,
+            qty: a.shares || 0,
+            holding: a.symbol || a.description || "Unknown",
+            costBasis: E,
+            rawCostBasis: a.cost_basis || 0,
+            totalGainLoss: ae,
+            gainLossAvailable: v,
+            gainLossBasis: E,
+            marketValue: me(a),
+            description: a.description || ""
+          };
+        }), c = o.length > 0, l = e.balance, n = o.reduce((a, v) => v.totalGainLoss + a, 0), T = o.some((a) => a.gainLossAvailable), j = l ? n / l * 100 : 0;
+        if (w) return /* @__PURE__ */ t(O, {
           onClick: o.length ? () => {
-            D(!0), S({
+            L(!0), I({
               holdings: o,
               accounts: e
             });
@@ -144,7 +165,7 @@ var he = () => {
                 pl: 14,
                 pr: 14
               },
-              children: [/* @__PURE__ */ t(z, {
+              children: [/* @__PURE__ */ t(V, {
                 alt: e.institutionName || "",
                 institutionGuid: e.institution_guid || "",
                 size: 32
@@ -154,11 +175,11 @@ var he = () => {
                   pl: 13,
                   pr: 13
                 },
-                children: [/* @__PURE__ */ t(n, {
+                children: [/* @__PURE__ */ t(i, {
                   sx: { color: "text.secondary" },
                   variant: "caption",
                   children: e.memberName
-                }), /* @__PURE__ */ t(n, {
+                }), /* @__PURE__ */ t(i, {
                   sx: {
                     color: "text.primary",
                     fontWeight: 600
@@ -187,53 +208,57 @@ var he = () => {
                   pr: 7,
                   pt: 14
                 },
-                children: [/* @__PURE__ */ t(n, {
+                children: [/* @__PURE__ */ t(i, {
                   sx: {
                     color: "text.secondary",
                     fontSize: 11
                   },
                   variant: "body2",
                   children: m.overview.total_gain_Loss
-                }), /* @__PURE__ */ r(s, {
+                }), /* @__PURE__ */ t(s, {
                   sx: {
                     alignItems: "center",
                     flexDirection: "row",
                     gap: 2,
                     justifyContent: "flex-end"
                   },
-                  children: [
-                    i !== 0 && /* @__PURE__ */ t(x, {
-                      name: i > 0 ? "trending_up" : "trending_down",
+                  children: T ? /* @__PURE__ */ r(D, { children: [
+                    n !== 0 && /* @__PURE__ */ t(x, {
+                      name: n > 0 ? "trending_up" : "trending_down",
                       size: 20,
-                      sx: { color: c(i) }
+                      sx: { color: d(n) }
                     }),
-                    /* @__PURE__ */ r(n, {
+                    /* @__PURE__ */ r(i, {
                       sx: {
-                        color: c(i),
+                        color: d(n),
                         fontWeight: 600
                       },
                       variant: "body1",
-                      children: [W.toFixed(2), "%"]
+                      children: [j.toFixed(2), "%"]
                     }),
-                    /* @__PURE__ */ t(n, {
+                    /* @__PURE__ */ t(i, {
                       sx: { color: "text.secondary" },
                       variant: "caption",
                       children: "|"
                     }),
-                    /* @__PURE__ */ t(n, {
+                    /* @__PURE__ */ t(i, {
                       sx: {
-                        color: c(i),
+                        color: d(n),
                         fontWeight: 600
                       },
                       variant: "body1",
-                      children: Math.abs(i).toLocaleString("en-US", {
+                      children: Math.abs(n).toLocaleString("en-US", {
                         currency: "USD",
                         maximumFractionDigits: 2,
                         minimumFractionDigits: 2,
                         style: "currency"
                       })
                     })
-                  ]
+                  ] }) : /* @__PURE__ */ t(i, {
+                    sx: { color: "text.secondary" },
+                    variant: "body1",
+                    children: "—"
+                  })
                 })]
               }), /* @__PURE__ */ r(s, {
                 sx: {
@@ -245,11 +270,11 @@ var he = () => {
                   pr: 7,
                   pt: 14
                 },
-                children: [/* @__PURE__ */ t(n, {
+                children: [/* @__PURE__ */ t(i, {
                   sx: { color: "text.secondary" },
                   variant: "caption",
                   children: m.overview.total_value
-                }), /* @__PURE__ */ t(n, {
+                }), /* @__PURE__ */ t(i, {
                   sx: {
                     color: "text.primary",
                     fontWeight: 600
@@ -266,10 +291,10 @@ var he = () => {
             })]
           })
         }, e.guid);
-        const Y = y ? "grey.700" : "grey.400", Z = o.length ? "text.primary" : Y;
-        return /* @__PURE__ */ r(ge, {
-          expanded: C[e.guid] === !0,
-          onChange: d ? q(e.guid) : () => {
+        const re = y ? "grey.700" : "grey.400", se = o.length ? "text.primary" : re;
+        return /* @__PURE__ */ r(Ce, {
+          expanded: S[e.guid] === !0,
+          onChange: c ? Z(e.guid) : () => {
           },
           sx: {
             border: 1,
@@ -277,10 +302,10 @@ var he = () => {
             borderRadius: "4px",
             width: "100%"
           },
-          children: [/* @__PURE__ */ r(xe, {
+          children: [/* @__PURE__ */ r(we, {
             "aria-controls": "panel1a-content",
             id: "panel1a-header",
-            sx: [C[e.guid] && {
+            sx: [S[e.guid] && {
               borderBottom: 1,
               borderColor: "divider",
               maxHeight: 88
@@ -297,20 +322,20 @@ var he = () => {
                 /* @__PURE__ */ t(x, {
                   name: "expand_more",
                   size: 20,
-                  sx: { color: Z }
+                  sx: { color: se }
                 }),
-                /* @__PURE__ */ t(z, {
+                /* @__PURE__ */ t(V, {
                   alt: e.institutionName || "",
                   institutionGuid: e.institution_guid || "",
                   size: 32
                 }),
                 /* @__PURE__ */ r(s, {
                   sx: { alignItems: "flex-start" },
-                  children: [/* @__PURE__ */ t(n, {
+                  children: [/* @__PURE__ */ t(i, {
                     sx: { color: "text.secondary" },
                     variant: "caption",
                     children: e.memberName
-                  }), /* @__PURE__ */ t(n, {
+                  }), /* @__PURE__ */ t(i, {
                     sx: {
                       color: "text.primary",
                       fontWeight: 600
@@ -330,50 +355,54 @@ var he = () => {
                   pr: 24,
                   pt: 14
                 },
-                children: [/* @__PURE__ */ t(n, {
+                children: [/* @__PURE__ */ t(i, {
                   sx: { color: "text.secondary" },
                   variant: "caption",
                   children: m.overview.total_gain_Loss
-                }), /* @__PURE__ */ r(s, {
+                }), /* @__PURE__ */ t(s, {
                   sx: {
                     alignItems: "center",
                     flexDirection: "row",
                     gap: 2,
                     justifyContent: "flex-end"
                   },
-                  children: [
-                    i !== 0 && /* @__PURE__ */ t(x, {
-                      name: i >= 0 ? "trending_up" : "trending_down",
+                  children: T ? /* @__PURE__ */ r(D, { children: [
+                    n !== 0 && /* @__PURE__ */ t(x, {
+                      name: n >= 0 ? "trending_up" : "trending_down",
                       size: 20,
-                      sx: { color: c(i) }
+                      sx: { color: d(n) }
                     }),
-                    /* @__PURE__ */ r(n, {
+                    /* @__PURE__ */ r(i, {
                       sx: {
-                        color: c(i),
+                        color: d(n),
                         fontWeight: 600
                       },
                       variant: "body1",
-                      children: [W.toFixed(2), "%"]
+                      children: [j.toFixed(2), "%"]
                     }),
-                    /* @__PURE__ */ t(n, {
+                    /* @__PURE__ */ t(i, {
                       sx: { color: "text.secondary" },
                       variant: "caption",
                       children: "|"
                     }),
-                    /* @__PURE__ */ t(n, {
+                    /* @__PURE__ */ t(i, {
                       sx: {
-                        color: c(i),
+                        color: d(n),
                         fontWeight: 600
                       },
                       variant: "body1",
-                      children: Math.abs(i).toLocaleString("en-US", {
+                      children: Math.abs(n).toLocaleString("en-US", {
                         currency: "USD",
                         maximumFractionDigits: 2,
                         minimumFractionDigits: 2,
                         style: "currency"
                       })
                     })
-                  ]
+                  ] }) : /* @__PURE__ */ t(i, {
+                    sx: { color: "text.secondary" },
+                    variant: "body1",
+                    children: "—"
+                  })
                 })]
               }), /* @__PURE__ */ t(s, {
                 sx: {
@@ -386,11 +415,11 @@ var he = () => {
                 },
                 children: /* @__PURE__ */ r(s, {
                   sx: { alignItems: "flex-end" },
-                  children: [/* @__PURE__ */ t(n, {
+                  children: [/* @__PURE__ */ t(i, {
                     sx: { color: "text.secondary" },
                     variant: "caption",
                     children: m.overview.total_value
-                  }), /* @__PURE__ */ t(n, {
+                  }), /* @__PURE__ */ t(i, {
                     sx: {
                       color: "text.primary",
                       fontWeight: 600
@@ -406,51 +435,51 @@ var he = () => {
                 })
               })]
             })]
-          }), /* @__PURE__ */ t(pe, {
+          }), /* @__PURE__ */ t(De, {
             sx: {
               bgcolor: "background.default",
               p: 12
             },
-            children: /* @__PURE__ */ t(T, {
+            children: /* @__PURE__ */ t(O, {
               sx: {
                 border: 1,
                 borderColor: "neutral.light"
               },
-              children: /* @__PURE__ */ t(le, {
+              children: /* @__PURE__ */ t(he, {
                 currentEditedCostBasis: f,
                 data: o,
-                editingHoldingId: _,
-                handleCostBasisBlur: v,
-                handleCostBasisChange: H,
-                handleCostBasisClick: k,
-                handleCostBasisKeyDown: U
+                editingHoldingId: F,
+                handleCostBasisBlur: b,
+                handleCostBasisChange: G,
+                handleCostBasisClick: U,
+                handleCostBasisKeyDown: k
               })
             })
           })]
         }, e.guid);
       }),
-      /* @__PURE__ */ t(se, {}),
-      /* @__PURE__ */ t(ae, {
-        accountHoldingsData: w,
+      /* @__PURE__ */ t(pe, {}),
+      /* @__PURE__ */ t(xe, {
+        accountHoldingsData: _,
         currentEditedCostBasis: f,
-        editingHoldingId: _,
-        handleCostBasisBlur: v,
-        handleCostBasisChange: H,
-        handleCostBasisClick: k,
-        handleCostBasisKeyDown: U,
-        isOpen: E,
-        onClose: X
+        editingHoldingId: F,
+        handleCostBasisBlur: b,
+        handleCostBasisChange: G,
+        handleCostBasisClick: U,
+        handleCostBasisKeyDown: k,
+        isOpen: R,
+        onClose: ne
       }),
-      /* @__PURE__ */ t(ne, {
-        onClose: () => R(!1),
-        showConnectionsWidget: P,
-        title: V.manage_connections
+      /* @__PURE__ */ t(ue, {
+        onClose: () => Q(!1),
+        showConnectionsWidget: J,
+        title: X.manage_connections
       })
     ]
-  }) : /* @__PURE__ */ t(ie, {});
-}, Ge = de(he);
+  }) : /* @__PURE__ */ t(ge, {});
+}, Pe = ye(Se);
 export {
-  Ge as default
+  Pe as default
 };
 
 //# sourceMappingURL=Overview.es.js.map