@mx-cartographer/experiences 6.26.18-alpha.mega2 → 6.26.18-alpha.mega3

package/dist/investments/components/EmptyStateFooterComponent/index.es.js

@@ -0,0 +1,52 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import a from "@mui/material/Button";
+import n from "@mui/material/Stack";
+import { Text as r } from "@mxenabled/mxui";
+import { useGlobalCopyStore as m, useEvent as l, useHoldingStore as p } from "../../../common/context/hooks/index.es.js";
+import { ANALYTICS_EVENTS as h } from "../../../common/constants/Analytics/index.es.js";
+const f = ({ sx: i = {} }) => {
+  const { investments: t } = m(), { onEvent: c } = l(), { setShowConnectionsWidget: s } = p();
+  return /* @__PURE__ */ o(n, { sx: { alignItems: "center", gap: 24, height: 164, p: 24, width: "100%", ...i }, children: [
+    /* @__PURE__ */ o(
+      n,
+      {
+        className: "inner-container",
+        sx: {
+          alignItems: "center",
+          gap: 8,
+          width: "100%",
+          textAlign: "center"
+        },
+        children: [
+          /* @__PURE__ */ e(r, { sx: { fontWeight: 600, whiteSpace: "normal" }, variant: "Body", children: t.overview.investment_accounts_footer }),
+          /* @__PURE__ */ e(
+            r,
+            {
+              sx: {
+                color: "text.secondary",
+                whiteSpace: "normal",
+                fontWeight: 400
+              },
+              variant: "ParagraphSmall",
+              children: t.overview.connect_more_accounts_description
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      a,
+      {
+        onClick: () => {
+          s(!0), c(h.ACCOUNTS_CLICK_CONNECT);
+        },
+        sx: { fontWeight: 600 },
+        variant: "outlined",
+        children: t.overview.connect_accounts
+      }
+    )
+  ] });
+};
+export {
+  f as EmptyStateFooterComponent
+};

package/dist/investments/components/HeaderCell/index.es.js

@@ -0,0 +1,11 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { Text as t } from "@mxenabled/mxui";
+import { Icon as i } from "@mxenabled/mx-icons";
+import { Stack as a } from "@mui/material";
+const x = (r) => /* @__PURE__ */ o(a, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
+  /* @__PURE__ */ e(t, { sx: { color: "text.primary", fontWeight: 600, fontSize: 14 }, variant: "Small", children: r.colDef.headerName }),
+  /* @__PURE__ */ e(i, { name: "expand_all", size: 12 })
+] });
+export {
+  x as HeaderCell
+};

package/dist/investments/components/HoldingDrawer/index.es.js

@@ -0,0 +1,322 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import S from "react";
+import { observer as D } from "mobx-react-lite";
+import C from "@mui/material/Accordion";
+import I from "@mui/material/AccordionDetails";
+import B from "@mui/material/AccordionSummary";
+import L from "@mui/material/IconButton";
+import _ from "@mui/material/TextField";
+import i from "@mui/system/Stack";
+import { Icon as d } from "@mxenabled/mx-icons";
+import { InstitutionLogo as G, Text as n } from "@mxenabled/mxui";
+import { useGlobalCopyStore as F } from "../../../common/context/hooks/index.es.js";
+import W from "../../../common/components/drawer/Drawer/index.es.js";
+const j = ({
+  accountHoldingsData: o,
+  currentEditedCostBasis: x,
+  editingHoldingId: u,
+  handleCostBasisBlur: p,
+  handleCostBasisClick: y,
+  handleCostBasisChange: f,
+  handleCostBasisKeyDown: h,
+  isOpen: v,
+  onClose: w
+}) => {
+  const { investments: a } = F(), [s, g] = S.useState({}), b = (e) => (c, l) => {
+    g((m) => ({
+      ...m,
+      [e]: l
+    }));
+  };
+  return /* @__PURE__ */ r(
+    W,
+    {
+      ariaLabelClose: a.overview.close_investment_drawer,
+      isOpen: v,
+      onClose: w,
+      title: a.overview.investment_details,
+      children: [
+        /* @__PURE__ */ r(i, { sx: { gap: 8, p: 24 }, children: [
+          /* @__PURE__ */ t(
+            G,
+            {
+              alt: o.accounts.institutionName || "",
+              institutionGuid: o.accounts.institution_guid || "",
+              size: 64
+            }
+          ),
+          /* @__PURE__ */ t(n, { sx: { color: "text.primary" }, variant: "Small", children: o.accounts.memberName }),
+          /* @__PURE__ */ t(n, { sx: { color: "text.primary" }, variant: "H2", children: o.accounts.user_name || o.accounts.name }),
+          /* @__PURE__ */ r(i, { sx: { alignItems: "center", flexDirection: "row", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ t(n, { sx: { color: "text.primary", fontWeight: 600 }, variant: "Body", children: a.overview.current_balance }),
+            /* @__PURE__ */ t(n, { sx: { color: "text.primary", fontWeight: 600 }, variant: "Body", children: o.accounts.balance?.toLocaleString("en-US", {
+              currency: "USD",
+              maximumFractionDigits: 2,
+              minimumFractionDigits: 2,
+              style: "currency"
+            }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ r(
+          i,
+          {
+            sx: {
+              bgcolor: "background.default",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              px: 24,
+              py: 10
+            },
+            children: [
+              /* @__PURE__ */ t(n, { sx: { color: "text.primary", fontWeight: 700 }, variant: "XSmall", children: a.overview.holding }),
+              /* @__PURE__ */ t(n, { sx: { color: "text.primary", fontWeight: 700 }, variant: "XSmall", children: a.overview.market_value })
+            ]
+          }
+        ),
+        o.holdings?.map((e, c) => {
+          const l = u === e.id;
+          return /* @__PURE__ */ r(
+            C,
+            {
+              disableGutters: !0,
+              expanded: s[e.id] === !0,
+              onChange: e ? b(e?.id) : () => {
+              },
+              sx: {
+                ":before": c === 0 ? { opacity: 0 } : {},
+                ".MuiAccordionDetails-root": { p: 0 }
+              },
+              children: [
+                /* @__PURE__ */ t(
+                  B,
+                  {
+                    "aria-controls": "panel1a-content",
+                    id: "panel1a-header",
+                    sx: [
+                      { height: 64 },
+                      s[e.id] && c > 0 && {
+                        borderTop: 1,
+                        borderColor: "border.main"
+                      }
+                    ],
+                    children: /* @__PURE__ */ r(i, { sx: { flexDirection: "row", width: "100%" }, children: [
+                      /* @__PURE__ */ t("div", { style: { width: 24 } }),
+                      /* @__PURE__ */ r(
+                        i,
+                        {
+                          sx: [
+                            {
+                              alignItems: "center",
+                              flexDirection: "row",
+                              justifyContent: "space-between",
+                              pr: 24,
+                              py: 14,
+                              width: "100%"
+                            },
+                            s[e.id] && {
+                              borderBottom: 1,
+                              borderColor: "border.main"
+                            }
+                          ],
+                          children: [
+                            /* @__PURE__ */ t(
+                              i,
+                              {
+                                sx: {
+                                  alignItems: "center",
+                                  flexDirection: "row",
+                                  gap: 12
+                                },
+                                children: /* @__PURE__ */ r(i, { sx: { overflow: "hidden", width: 98 }, children: [
+                                  /* @__PURE__ */ t(n, { sx: { fontWeight: 600 }, variant: "Body", children: e.holding }),
+                                  /* @__PURE__ */ t(n, { variant: "XSmall", children: e.description })
+                                ] })
+                              }
+                            ),
+                            /* @__PURE__ */ r(
+                              i,
+                              {
+                                sx: {
+                                  alignItems: "center",
+                                  flex: 1,
+                                  flexDirection: "row",
+                                  gap: 12,
+                                  justifyContent: "flex-end"
+                                },
+                                children: [
+                                  /* @__PURE__ */ r(i, { children: [
+                                    /* @__PURE__ */ t(n, { sx: { fontWeight: 600, textAlign: "right" }, variant: "Body", children: e.marketValue?.toLocaleString("en-US", {
+                                      currency: "USD",
+                                      maximumFractionDigits: 2,
+                                      minimumFractionDigits: 2,
+                                      style: "currency"
+                                    }) }),
+                                    /* @__PURE__ */ r(i, { sx: { alignItems: "center", gap: 2, flexDirection: "row" }, children: [
+                                      e.totalGainLoss !== 0 && /* @__PURE__ */ t(
+                                        d,
+                                        {
+                                          name: e.totalGainLoss >= 0 ? "trending_up" : "trending_down",
+                                          size: 12,
+                                          sx: {
+                                            verticalAlign: "middle",
+                                            mr: 1,
+                                            color: e.totalGainLoss >= 0 ? "success.main" : "grey.700"
+                                          }
+                                        }
+                                      ),
+                                      /* @__PURE__ */ t(
+                                        n,
+                                        {
+                                          sx: {
+                                            color: e.totalGainLoss <= 0 ? "grey.700" : "success.main",
+                                            fontWeight: e.totalGainLoss <= 0 ? 400 : 700
+                                          },
+                                          variant: "XSmall",
+                                          children: e.costBasis ? `${(e.totalGainLoss / e.costBasis * 100).toFixed(2)}%` : "0.00%"
+                                        }
+                                      ),
+                                      /* @__PURE__ */ t(n, { sx: { color: "grey.700" }, variant: "XSmall", children: "|" }),
+                                      /* @__PURE__ */ t(
+                                        n,
+                                        {
+                                          sx: {
+                                            color: e.totalGainLoss <= 0 ? "grey.700" : "success.main",
+                                            fontWeight: e.totalGainLoss <= 0 ? 400 : 700
+                                          },
+                                          variant: "XSmall",
+                                          children: Math.abs(e.totalGainLoss).toLocaleString("en-US", {
+                                            currency: "USD",
+                                            maximumFractionDigits: 2,
+                                            minimumFractionDigits: 2,
+                                            style: "currency"
+                                          })
+                                        }
+                                      )
+                                    ] })
+                                  ] }),
+                                  /* @__PURE__ */ t(
+                                    d,
+                                    {
+                                      name: s[e.id] ? "expand_less" : "expand_more",
+                                      size: 20
+                                    }
+                                  )
+                                ]
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ t(I, { children: /* @__PURE__ */ r(
+                  i,
+                  {
+                    sx: {
+                      alignItems: "center",
+                      bgcolor: "background.default",
+                      flexDirection: "row",
+                      pl: 24
+                    },
+                    children: [
+                      /* @__PURE__ */ t(i, { sx: { width: 32 } }),
+                      /* @__PURE__ */ r(i, { sx: { flex: 1 }, children: [
+                        /* @__PURE__ */ r(
+                          i,
+                          {
+                            sx: {
+                              alignItems: "center",
+                              borderBottom: 1,
+                              borderColor: "border.main",
+                              flexDirection: "row",
+                              height: 48,
+                              justifyContent: "space-between",
+                              pr: 24
+                            },
+                            children: [
+                              /* @__PURE__ */ t(n, { sx: { color: "text.primary" }, variant: "Body", children: a.overview.quantity }),
+                              /* @__PURE__ */ t(n, { sx: { color: "text.primary" }, variant: "Small", children: e.qty })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ r(
+                          i,
+                          {
+                            sx: {
+                              alignItems: "center",
+                              flexDirection: "row",
+                              height: 48,
+                              justifyContent: "space-between",
+                              pr: 24
+                            },
+                            children: [
+                              /* @__PURE__ */ t(n, { sx: { color: "text.primary" }, variant: "Body", children: a.overview.cost_basis_header }),
+                              /* @__PURE__ */ r(
+                                i,
+                                {
+                                  direction: "row",
+                                  sx: {
+                                    alignItems: "center",
+                                    gap: 4
+                                  },
+                                  children: [
+                                    l ? /* @__PURE__ */ t(
+                                      _,
+                                      {
+                                        autoFocus: !0,
+                                        onBlur: () => p(e.id),
+                                        onChange: f,
+                                        onKeyDown: (m) => h(m, e.id),
+                                        size: "small",
+                                        sx: {
+                                          fontSize: 14,
+                                          width: 58,
+                                          "& .MuiInputBase-input": {
+                                            padding: "4px 0",
+                                            textAlign: "center",
+                                            fontWeight: 600,
+                                            color: "text.primary"
+                                          },
+                                          "& .MuiOutlinedInput-notchedOutline": {
+                                            border: "none"
+                                          }
+                                        },
+                                        value: x
+                                      }
+                                    ) : /* @__PURE__ */ t(n, { sx: { fontSize: 14, width: 58 }, variant: "Small", children: e.costBasis?.toLocaleString("en-US", {
+                                      currency: "USD",
+                                      maximumFractionDigits: 2,
+                                      minimumFractionDigits: 2,
+                                      style: "currency"
+                                    }) }),
+                                    /* @__PURE__ */ t(
+                                      L,
+                                      {
+                                        onClick: () => y(e.id, e.costBasis),
+                                        sx: { minWidth: 16, minHeight: 16 },
+                                        children: /* @__PURE__ */ t(d, { name: "stylus", size: 16, sx: { color: "grey.700" } })
+                                      }
+                                    )
+                                  ]
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ) })
+              ]
+            },
+            e.id
+          );
+        })
+      ]
+    }
+  );
+}, R = D(j);
+export {
+  R as default
+};

package/dist/investments/components/HoldingTable/index.es.js

@@ -0,0 +1,183 @@
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import o from "@mui/material/Stack";
+import p from "@mui/material/Paper";
+import C from "@mui/material/IconButton";
+import b from "@mui/material/TextField";
+import F from "@mui/material/styles/useTheme";
+import { DataGridPro as _ } from "@mui/x-data-grid-pro";
+import { Icon as m } from "@mxenabled/mx-icons";
+import { Text as t } from "@mxenabled/mxui";
+import { HeaderCell as l } from "../HeaderCell/index.es.js";
+import { useGlobalCopyStore as B } from "../../../common/context/hooks/index.es.js";
+const P = ({
+  data: u,
+  editingHoldingId: g,
+  currentEditedCostBasis: x,
+  handleCostBasisClick: f,
+  handleCostBasisChange: v,
+  handleCostBasisKeyDown: w,
+  handleCostBasisBlur: y
+}) => {
+  const { investments: n } = B(), S = F().palette.mode === "dark", c = "success.main", h = S ? "grey.300" : "grey.700", a = (e, i = "lesserThan") => i === "greaterThan" ? e >= 0 ? c : h : e <= 0 ? h : c, D = [
+    {
+      field: "qty",
+      headerName: n.overview.qty_header,
+      sortable: !1,
+      width: 48,
+      align: "center",
+      headerAlign: "center"
+    },
+    {
+      field: "holding",
+      headerName: n.overview.holding_header,
+      flex: 1,
+      renderHeader: l,
+      renderCell: (e) => /* @__PURE__ */ r(o, { sx: { alignItems: "center", gap: 16, flexDirection: "row" }, children: /* @__PURE__ */ d(o, { children: [
+        /* @__PURE__ */ r(t, { sx: { fontWeight: 700 }, children: e.row.holding }),
+        /* @__PURE__ */ r(t, { sx: { color: "text.secondary", fontWeight: 400 }, variant: "tiny", children: e.row.description })
+      ] }) })
+    },
+    {
+      field: "costBasis",
+      headerName: n.overview.cost_basis_header,
+      width: 132,
+      renderHeader: l,
+      renderCell: (e) => {
+        const i = g === e.row.id;
+        return /* @__PURE__ */ d(o, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
+          i ? /* @__PURE__ */ r(
+            b,
+            {
+              autoFocus: !0,
+              onBlur: () => y(e.row.id),
+              onChange: v,
+              onKeyDown: (s) => w(s, e.row.id),
+              size: "small",
+              sx: {
+                fontSize: 14,
+                width: 57,
+                "& .MuiInputBase-input": {
+                  padding: "4px 0",
+                  textAlign: "center",
+                  fontWeight: 600,
+                  color: "text.primary"
+                },
+                "& .MuiOutlinedInput-notchedOutline": {
+                  border: "none"
+                }
+              },
+              value: x
+            }
+          ) : /* @__PURE__ */ r(t, { sx: { fontSize: 14, width: 57 }, variant: "Small", children: e.value?.toLocaleString("en-US", {
+            currency: "USD",
+            maximumFractionDigits: 2,
+            minimumFractionDigits: 2,
+            style: "currency"
+          }) }),
+          /* @__PURE__ */ r(
+            C,
+            {
+              onClick: () => f(e.row.id, e.row.costBasis),
+              sx: { minWidth: 12, minHeight: 12 },
+              children: /* @__PURE__ */ r(m, { name: "stylus", size: 12, sx: { color: "grey.700" } })
+            }
+          )
+        ] });
+      },
+      align: "center",
+      headerAlign: "center"
+    },
+    {
+      field: "totalGainLoss",
+      headerName: n.overview.total_gain_loss_header,
+      width: 196,
+      renderHeader: l,
+      renderCell: (e) => {
+        const i = e.row.costBasis, s = i ? e.row.totalGainLoss / i * 100 : 0;
+        return /* @__PURE__ */ d(o, { sx: { alignItems: "center", flexDirection: "row", gap: 2 }, children: [
+          e.value !== 0 && /* @__PURE__ */ r(
+            m,
+            {
+              name: e.value > 0 ? "trending_up" : "trending_down",
+              size: 16,
+              sx: {
+                color: a(e.value),
+                mr: 1,
+                verticalAlign: "middle"
+              }
+            }
+          ),
+          /* @__PURE__ */ r(
+            t,
+            {
+              sx: {
+                color: a(e.value),
+                fontWeight: e.value > 0 ? 700 : 400
+              },
+              variant: "Small",
+              children: i ? `${s.toFixed(2)}%` : "0.00%"
+            }
+          ),
+          /* @__PURE__ */ r(t, { sx: { color: "text.secondary" }, variant: "XSmall", children: "|" }),
+          /* @__PURE__ */ r(
+            t,
+            {
+              sx: {
+                color: a(e.value),
+                fontWeight: e.value > 0 ? 700 : 400
+              },
+              variant: "Small",
+              children: Math.abs(e.value).toLocaleString("en-US", {
+                currency: "USD",
+                maximumFractionDigits: 2,
+                minimumFractionDigits: 2,
+                style: "currency"
+              })
+            }
+          )
+        ] });
+      },
+      align: "right",
+      headerAlign: "right",
+      sortable: !1
+    },
+    {
+      field: "marketValue",
+      headerName: n.overview.market_value_header,
+      width: 132,
+      renderHeader: l,
+      renderCell: (e) => /* @__PURE__ */ r(t, { sx: { fontWeight: 700 }, variant: "Small", children: e.value?.toLocaleString("en-US", {
+        currency: "USD",
+        maximumFractionDigits: 2,
+        minimumFractionDigits: 2,
+        style: "currency"
+      }) }),
+      align: "right",
+      headerAlign: "right"
+    }
+  ];
+  return /* @__PURE__ */ r(
+    p,
+    {
+      sx: {
+        boxShadow: "none",
+        width: "100%"
+      },
+      children: /* @__PURE__ */ r(
+        _,
+        {
+          columns: D,
+          disableColumnFilter: !0,
+          disableColumnMenu: !0,
+          disableRowSelectionOnClick: !0,
+          hideFooter: !0,
+          rows: u,
+          slotProps: { baseIconButton: { sx: { display: "none" } } }
+        }
+      )
+    }
+  );
+};
+export {
+  P as default
+};

package/dist/investments/components/InfoToolTip/index.es.js

@@ -0,0 +1,25 @@
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import a from "@mui/material/IconButton";
+import m from "@mui/material/Stack";
+import e from "@mui/material/Tooltip";
+import { Text as l, P as p } from "@mxenabled/mxui";
+import { Icon as c } from "@mxenabled/mx-icons";
+const d = ({ body: t, title: r }) => /* @__PURE__ */ n(m, { sx: { gap: 4, p: 12 }, children: [
+  /* @__PURE__ */ o(l, { bold: !0, variant: "Body", children: r }),
+  /* @__PURE__ */ o(p, { variant: "ParagraphSmall", children: t })
+] }), u = ({
+  placement: t = "bottom",
+  tooltip_info_body: r,
+  tooltip_info_title: i
+}) => /* @__PURE__ */ o(
+  e,
+  {
+    enterTouchDelay: 500,
+    placement: t,
+    title: /* @__PURE__ */ o(d, { body: r, title: i }),
+    children: /* @__PURE__ */ o(a, { "aria-label": i, sx: { minHeight: 0, minWidth: 0, p: 0 }, children: /* @__PURE__ */ o(c, { name: "info", sx: { color: "info.main" } }) })
+  }
+);
+export {
+  u as default
+};