@mx-cartographer/experiences 9.2.4-alpha.al4 → 9.3.0-alph.bb2

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

@@ -0,0 +1,456 @@
+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 { 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 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({
+    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) => {
+    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);
+    if (!o) return;
+    const d = Number(f);
+    if (O({
+      ...o,
+      cost_basis: d
+    }), b) {
+      const l = w.holdings.map((i) => i.id === e ? {
+        ...i,
+        costBasis: d
+      } : i);
+      S((i) => ({
+        ...i,
+        holdings: l
+      }));
+    }
+    h(null);
+  }, q = (e) => (o, d) => {
+    j((l) => ({
+      ...l,
+      [e]: d
+    }));
+  }, { 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);
+  };
+  return $ ? /* @__PURE__ */ r(s, {
+    sx: {
+      alignItems: "center",
+      gap: 48,
+      pt: 48,
+      width: "100%"
+    },
+    children: [
+      !!g.length && /* @__PURE__ */ r(s, {
+        sx: { alignItems: "center" },
+        children: [
+          /* @__PURE__ */ t(n, {
+            sx: { color: "text.secondary" },
+            children: m.overview.total_portfolio
+          }),
+          /* @__PURE__ */ t(me, {
+            variant: "h1",
+            children: J.toLocaleString("en-US", {
+              currency: "USD",
+              maximumFractionDigits: 2,
+              minimumFractionDigits: 2,
+              style: "currency"
+            })
+          }),
+          /* @__PURE__ */ r(s, {
+            sx: {
+              alignItems: "center",
+              flexDirection: "row",
+              gap: 8
+            },
+            children: [/* @__PURE__ */ t(x, {
+              name: p >= 0 ? "trending_up" : "trending_down",
+              size: 20,
+              sx: { color: c(p, "greaterThan") }
+            }), /* @__PURE__ */ t(n, {
+              sx: {
+                color: c(p, "greaterThan"),
+                fontWeight: 700
+              },
+              variant: "body2",
+              children: p.toLocaleString("en-US", {
+                currency: "USD",
+                maximumFractionDigits: 2,
+                minimumFractionDigits: 2,
+                style: "currency"
+              })
+            })]
+          })
+        ]
+      }),
+      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, {
+          onClick: o.length ? () => {
+            D(!0), S({
+              holdings: o,
+              accounts: e
+            });
+          } : void 0,
+          sx: {
+            width: "100%",
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ r(s, {
+            sx: {
+              border: 1,
+              borderColor: "divider",
+              borderRadius: "8px",
+              ml: 16,
+              mr: 16,
+              overflow: "hidden",
+              pt: 14
+            },
+            children: [/* @__PURE__ */ r(s, {
+              sx: {
+                alignItems: "center",
+                borderBottom: 1,
+                borderColor: "divider",
+                flexDirection: "row",
+                pb: 14,
+                pl: 14,
+                pr: 14
+              },
+              children: [/* @__PURE__ */ t(z, {
+                alt: e.institutionName || "",
+                institutionGuid: e.institution_guid || "",
+                size: 32
+              }), /* @__PURE__ */ r(s, {
+                sx: {
+                  overflow: "hidden",
+                  pl: 13,
+                  pr: 13
+                },
+                children: [/* @__PURE__ */ t(n, {
+                  sx: { color: "text.secondary" },
+                  variant: "caption",
+                  children: e.memberName
+                }), /* @__PURE__ */ t(n, {
+                  sx: {
+                    color: "text.primary",
+                    fontWeight: 600
+                  },
+                  variant: "body1",
+                  children: e.user_name || e.name
+                })]
+              })]
+            }), /* @__PURE__ */ r(s, {
+              sx: {
+                alignItems: "center",
+                flexDirection: "row",
+                justifyContent: "space-between",
+                pb: 8,
+                pt: 8
+              },
+              children: [/* @__PURE__ */ r(s, {
+                sx: {
+                  alignItems: "center",
+                  borderRight: 1,
+                  borderColor: "divider",
+                  flex: 1,
+                  justifyContent: "center",
+                  pb: 14,
+                  pl: 7,
+                  pr: 7,
+                  pt: 14
+                },
+                children: [/* @__PURE__ */ t(n, {
+                  sx: {
+                    color: "text.secondary",
+                    fontSize: 11
+                  },
+                  variant: "body2",
+                  children: m.overview.total_gain_Loss
+                }), /* @__PURE__ */ r(s, {
+                  sx: {
+                    alignItems: "center",
+                    flexDirection: "row",
+                    gap: 2,
+                    justifyContent: "flex-end"
+                  },
+                  children: [
+                    i !== 0 && /* @__PURE__ */ t(x, {
+                      name: i > 0 ? "trending_up" : "trending_down",
+                      size: 20,
+                      sx: { color: c(i) }
+                    }),
+                    /* @__PURE__ */ r(n, {
+                      sx: {
+                        color: c(i),
+                        fontWeight: 600
+                      },
+                      variant: "body1",
+                      children: [W.toFixed(2), "%"]
+                    }),
+                    /* @__PURE__ */ t(n, {
+                      sx: { color: "text.secondary" },
+                      variant: "caption",
+                      children: "|"
+                    }),
+                    /* @__PURE__ */ t(n, {
+                      sx: {
+                        color: c(i),
+                        fontWeight: 600
+                      },
+                      variant: "body1",
+                      children: Math.abs(i).toLocaleString("en-US", {
+                        currency: "USD",
+                        maximumFractionDigits: 2,
+                        minimumFractionDigits: 2,
+                        style: "currency"
+                      })
+                    })
+                  ]
+                })]
+              }), /* @__PURE__ */ r(s, {
+                sx: {
+                  alignItems: "center",
+                  flex: 1,
+                  justifyContent: "center",
+                  pb: 14,
+                  pl: 7,
+                  pr: 7,
+                  pt: 14
+                },
+                children: [/* @__PURE__ */ t(n, {
+                  sx: { color: "text.secondary" },
+                  variant: "caption",
+                  children: m.overview.total_value
+                }), /* @__PURE__ */ t(n, {
+                  sx: {
+                    color: "text.primary",
+                    fontWeight: 600
+                  },
+                  variant: "body1",
+                  children: l?.toLocaleString("en-US", {
+                    currency: "USD",
+                    maximumFractionDigits: 2,
+                    minimumFractionDigits: 2,
+                    style: "currency"
+                  })
+                })]
+              })]
+            })]
+          })
+        }, 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) : () => {
+          },
+          sx: {
+            border: 1,
+            borderColor: "divider",
+            borderRadius: "4px",
+            width: "100%"
+          },
+          children: [/* @__PURE__ */ r(xe, {
+            "aria-controls": "panel1a-content",
+            id: "panel1a-header",
+            sx: [C[e.guid] && {
+              borderBottom: 1,
+              borderColor: "divider",
+              maxHeight: 88
+            }],
+            children: [/* @__PURE__ */ r(s, {
+              sx: {
+                alignItems: "center",
+                flexDirection: "row",
+                gap: 13,
+                p: 14,
+                width: "100%"
+              },
+              children: [
+                /* @__PURE__ */ t(x, {
+                  name: "expand_more",
+                  size: 20,
+                  sx: { color: Z }
+                }),
+                /* @__PURE__ */ t(z, {
+                  alt: e.institutionName || "",
+                  institutionGuid: e.institution_guid || "",
+                  size: 32
+                }),
+                /* @__PURE__ */ r(s, {
+                  sx: { alignItems: "flex-start" },
+                  children: [/* @__PURE__ */ t(n, {
+                    sx: { color: "text.secondary" },
+                    variant: "caption",
+                    children: e.memberName
+                  }), /* @__PURE__ */ t(n, {
+                    sx: {
+                      color: "text.primary",
+                      fontWeight: 600
+                    },
+                    variant: "body1",
+                    children: e.user_name || e.name
+                  })]
+                })
+              ]
+            }), /* @__PURE__ */ r(s, {
+              sx: { flexDirection: "row" },
+              children: [/* @__PURE__ */ r(s, {
+                sx: {
+                  alignItems: "flex-end",
+                  pb: 14,
+                  pl: 24,
+                  pr: 24,
+                  pt: 14
+                },
+                children: [/* @__PURE__ */ t(n, {
+                  sx: { color: "text.secondary" },
+                  variant: "caption",
+                  children: m.overview.total_gain_Loss
+                }), /* @__PURE__ */ r(s, {
+                  sx: {
+                    alignItems: "center",
+                    flexDirection: "row",
+                    gap: 2,
+                    justifyContent: "flex-end"
+                  },
+                  children: [
+                    i !== 0 && /* @__PURE__ */ t(x, {
+                      name: i >= 0 ? "trending_up" : "trending_down",
+                      size: 20,
+                      sx: { color: c(i) }
+                    }),
+                    /* @__PURE__ */ r(n, {
+                      sx: {
+                        color: c(i),
+                        fontWeight: 600
+                      },
+                      variant: "body1",
+                      children: [W.toFixed(2), "%"]
+                    }),
+                    /* @__PURE__ */ t(n, {
+                      sx: { color: "text.secondary" },
+                      variant: "caption",
+                      children: "|"
+                    }),
+                    /* @__PURE__ */ t(n, {
+                      sx: {
+                        color: c(i),
+                        fontWeight: 600
+                      },
+                      variant: "body1",
+                      children: Math.abs(i).toLocaleString("en-US", {
+                        currency: "USD",
+                        maximumFractionDigits: 2,
+                        minimumFractionDigits: 2,
+                        style: "currency"
+                      })
+                    })
+                  ]
+                })]
+              }), /* @__PURE__ */ t(s, {
+                sx: {
+                  alignItems: "flex-end",
+                  gap: 12,
+                  pb: 14,
+                  pl: 16,
+                  pr: 16,
+                  pt: 14
+                },
+                children: /* @__PURE__ */ r(s, {
+                  sx: { alignItems: "flex-end" },
+                  children: [/* @__PURE__ */ t(n, {
+                    sx: { color: "text.secondary" },
+                    variant: "caption",
+                    children: m.overview.total_value
+                  }), /* @__PURE__ */ t(n, {
+                    sx: {
+                      color: "text.primary",
+                      fontWeight: 600
+                    },
+                    variant: "body1",
+                    children: l?.toLocaleString("en-US", {
+                      currency: "USD",
+                      maximumFractionDigits: 2,
+                      minimumFractionDigits: 2,
+                      style: "currency"
+                    })
+                  })]
+                })
+              })]
+            })]
+          }), /* @__PURE__ */ t(pe, {
+            sx: {
+              bgcolor: "background.default",
+              p: 12
+            },
+            children: /* @__PURE__ */ t(T, {
+              sx: {
+                border: 1,
+                borderColor: "neutral.light"
+              },
+              children: /* @__PURE__ */ t(le, {
+                currentEditedCostBasis: f,
+                data: o,
+                editingHoldingId: _,
+                handleCostBasisBlur: v,
+                handleCostBasisChange: H,
+                handleCostBasisClick: k,
+                handleCostBasisKeyDown: U
+              })
+            })
+          })]
+        }, e.guid);
+      }),
+      /* @__PURE__ */ t(se, {}),
+      /* @__PURE__ */ t(ae, {
+        accountHoldingsData: w,
+        currentEditedCostBasis: f,
+        editingHoldingId: _,
+        handleCostBasisBlur: v,
+        handleCostBasisChange: H,
+        handleCostBasisClick: k,
+        handleCostBasisKeyDown: U,
+        isOpen: E,
+        onClose: X
+      }),
+      /* @__PURE__ */ t(ne, {
+        onClose: () => R(!1),
+        showConnectionsWidget: P,
+        title: V.manage_connections
+      })
+    ]
+  }) : /* @__PURE__ */ t(ie, {});
+}, Ge = de(he);
+export {
+  Ge as default
+};
+
+//# sourceMappingURL=Overview.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Overview.es.js","names":[],"sources":["../../../src/investments/components/Overview.tsx"],"sourcesContent":["import React, { useState } from 'react'\n\nimport { observer } from 'mobx-react-lite'\nimport Accordion from '@mui/material/Accordion'\nimport AccordionDetails from '@mui/material/AccordionDetails'\nimport AccordionSummary from '@mui/material/AccordionSummary'\nimport Paper from '@mui/material/Paper'\nimport Stack from '@mui/system/Stack'\nimport { useTheme } from '@mui/material/styles'\nimport { Icon } from '@mxenabled/mx-icons'\nimport { InstitutionLogo, P, Text } from '@mxenabled/mxui'\n\nimport ConnectionsDrawer from '../../accounts/components/ConnectionsDrawer'\nimport {\n  Loader,\n  useAccountStore,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useHoldingStore,\n  useScreenSize,\n} from '../../common'\nimport { EmptyStateFooterComponent } from './EmptyStateFooterComponent'\nimport InvestmentDetailsDrawer from './HoldingDrawer'\nimport HoldingsTable from './HoldingTable'\n\ninterface HoldingDetail {\n  id: string\n  description: string\n  qty: number\n  holding: string\n  costBasis: number\n  totalGainLoss: number\n  marketValue: number\n}\n\nconst Overview = () => {\n  const { isMobile } = useScreenSize()\n  const [expandedStates, setExpandedStates] = useState<Record<string, boolean>>({})\n  const [openDrawer, setOpenDrawer] = useState(false)\n  const { selectedAccountGuids } = useGlobalUiStore()\n  const { visibleHoldings: holdings, updateHoldings } = useHoldingStore()\n  const [showConnectionsWidget, setShowConnectionsWidget] = React.useState(false)\n\n  const [accountHoldingsData, setAccountHoldingsData] = useState<{\n    accounts: any\n    holdings: HoldingDetail[]\n  }>({\n    accounts: [],\n    holdings: [],\n  })\n  const { accounts: accountsCopy, investments: copy } = useGlobalCopyStore()\n  const { isCopyLoaded } = useGlobalUiStore()\n  const [editingHoldingId, setEditingHoldingId] = useState<string | null>(null)\n  const [currentEditedCostBasis, setCurrentEditedCostBasis] = useState<string>('')\n\n  const theme = useTheme()\n\n  const isDarkMode = theme.palette.mode === 'dark'\n\n  const gainDisplayColor = isDarkMode ? '#0AC295' : '#09A57F'\n\n  const lossDisplayColor = isDarkMode ? 'grey.300' : 'grey.700'\n\n  const gainLossDisplayColor = (value: number, type: string = 'lesserThan') => {\n    if (type === 'greaterThan') {\n      return value >= 0 ? gainDisplayColor : lossDisplayColor\n    }\n    return value <= 0 ? lossDisplayColor : gainDisplayColor\n  }\n\n  const handleCostBasisClick = (holdingId: string, currentCostBasis: number) => {\n    setEditingHoldingId(holdingId)\n    setCurrentEditedCostBasis(currentCostBasis.toFixed(2))\n  }\n\n  const handleCostBasisChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    // Allow only numbers and a single decimal point\n    const value = event.target.value\n    if (/^\\d*\\.?\\d*$/.test(value)) {\n      setCurrentEditedCostBasis(value)\n    }\n  }\n\n  const handleCostBasisKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, id: string) => {\n    if (event.key === 'Enter') {\n      handleCostBasisBlur(id)\n    } else if (event.key === 'Escape') {\n      setEditingHoldingId(null)\n    }\n  }\n\n  const handleCostBasisBlur = (id: string) => {\n    const holding = holdings.find(({ guid }) => guid === id)\n    if (!holding) return\n\n    const updatedCostBasis = Number(currentEditedCostBasis)\n    updateHoldings({ ...holding, cost_basis: updatedCostBasis })\n\n    if (isMobile) {\n      const updatedHoldings = accountHoldingsData.holdings.map((h) =>\n        h.id === id ? { ...h, costBasis: updatedCostBasis } : h,\n      )\n\n      setAccountHoldingsData((prev) => ({\n        ...prev,\n        holdings: updatedHoldings,\n      }))\n    }\n\n    setEditingHoldingId(null)\n  }\n\n  const handleAccordionChange =\n    (accountId: string) => (_event: React.SyntheticEvent, isExpanded: boolean) => {\n      setExpandedStates((prevStates) => ({\n        ...prevStates,\n        [accountId]: isExpanded,\n      }))\n    }\n\n  const { visibleHoldings: allHoldings } = useHoldingStore()\n  const { visibleInvestmentAccounts } = useAccountStore()\n\n  const accounts = visibleInvestmentAccounts.filter(({ guid }) =>\n    selectedAccountGuids.includes(guid),\n  )\n\n  const totalPortfolioValue = accounts.reduce((sum, account) => sum + (account.balance || 0), 0)\n\n  const accountGuids = accounts.map(({ guid }) => guid)\n\n  const updatedHoldings = allHoldings.filter(({ account_guid }) =>\n    accountGuids.includes(account_guid),\n  )\n\n  const gainLoss = updatedHoldings.reduce((sum, holding) => {\n    const hl = holding.market_value ? holding.market_value - (holding.cost_basis || 0) : 0\n    return sum + hl\n  }, 0)\n\n  const closeDrawer = () => {\n    setOpenDrawer(false)\n  }\n\n  if (!isCopyLoaded) {\n    return <Loader />\n  }\n\n  return (\n    <Stack sx={{ alignItems: 'center', gap: 48, pt: 48, width: '100%' }}>\n      {/* header content */}\n      {!!accounts.length && (\n        <Stack sx={{ alignItems: 'center' }}>\n          <Text sx={{ color: 'text.secondary' }}>{copy.overview.total_portfolio}</Text>\n          <P variant=\"h1\">\n            {totalPortfolioValue.toLocaleString('en-US', {\n              currency: 'USD',\n              maximumFractionDigits: 2,\n              minimumFractionDigits: 2,\n              style: 'currency',\n            })}\n          </P>\n          <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n            <Icon\n              name={gainLoss >= 0 ? 'trending_up' : 'trending_down'}\n              size={20}\n              sx={{ color: gainLossDisplayColor(gainLoss, 'greaterThan') }}\n            />\n            <Text\n              sx={{ color: gainLossDisplayColor(gainLoss, 'greaterThan'), fontWeight: 700 }}\n              variant=\"body2\"\n            >\n              {gainLoss.toLocaleString('en-US', {\n                currency: 'USD',\n                maximumFractionDigits: 2,\n                minimumFractionDigits: 2,\n                style: 'currency',\n              })}\n            </Text>\n          </Stack>\n        </Stack>\n      )}\n\n      {accounts.map((account) => {\n        const accountHoldings: HoldingDetail[] = allHoldings\n          .filter((holding) => holding.account_guid === account.guid)\n          .map((holding) => ({\n            id: holding.guid,\n            qty: holding.shares || 0,\n            holding: holding.symbol || holding.description || 'Unknown',\n            costBasis: holding.cost_basis || 0,\n            totalGainLoss: holding.market_value\n              ? holding.market_value - (holding.cost_basis || 0)\n              : 0,\n            marketValue: holding.market_value || 0,\n            description: holding.description || '',\n          }))\n\n        const hasHoldingsData = accountHoldings.length > 0\n\n        const accountTotalValue = account.balance\n        const accountGainLoss = accountHoldings.reduce(\n          (sum, holding) => holding.totalGainLoss + sum,\n          0,\n        )\n\n        const accountGainLossPercentage = accountTotalValue\n          ? (accountGainLoss / accountTotalValue) * 100\n          : 0\n\n        // Mobile View: Use a simplified presentation\n        if (isMobile) {\n          return (\n            <Paper\n              key={account.guid}\n              onClick={\n                accountHoldings.length\n                  ? () => {\n                      setOpenDrawer(true)\n                      setAccountHoldingsData({\n                        holdings: accountHoldings,\n                        accounts: account,\n                      })\n                    }\n                  : undefined\n              }\n              sx={{\n                width: '100%',\n                overflow: 'hidden',\n              }}\n            >\n              <Stack\n                sx={{\n                  border: 1,\n                  borderColor: 'divider',\n                  borderRadius: '8px',\n                  ml: 16,\n                  mr: 16,\n                  overflow: 'hidden',\n                  pt: 14,\n                }}\n              >\n                <Stack\n                  sx={{\n                    alignItems: 'center',\n                    borderBottom: 1,\n                    borderColor: 'divider',\n                    flexDirection: 'row',\n                    pb: 14,\n                    pl: 14,\n                    pr: 14,\n                  }}\n                >\n                  <InstitutionLogo\n                    alt={account.institutionName || ''}\n                    institutionGuid={account.institution_guid || ''}\n                    size={32}\n                  />\n                  <Stack sx={{ overflow: 'hidden', pl: 13, pr: 13 }}>\n                    <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n                      {account.memberName}\n                    </Text>\n                    <Text sx={{ color: 'text.primary', fontWeight: 600 }} variant=\"body1\">\n                      {account.user_name || account.name}\n                    </Text>\n                  </Stack>\n                </Stack>\n\n                <Stack\n                  sx={{\n                    alignItems: 'center',\n                    flexDirection: 'row',\n                    justifyContent: 'space-between',\n                    pb: 8,\n                    pt: 8,\n                  }}\n                >\n                  <Stack\n                    sx={{\n                      alignItems: 'center',\n                      borderRight: 1,\n                      borderColor: 'divider',\n                      flex: 1,\n                      justifyContent: 'center',\n                      pb: 14,\n                      pl: 7,\n                      pr: 7,\n                      pt: 14,\n                    }}\n                  >\n                    <Text sx={{ color: 'text.secondary', fontSize: 11 }} variant=\"body2\">\n                      {copy.overview.total_gain_Loss}\n                    </Text>\n                    <Stack\n                      sx={{\n                        alignItems: 'center',\n                        flexDirection: 'row',\n                        gap: 2,\n                        justifyContent: 'flex-end',\n                      }}\n                    >\n                      {accountGainLoss !== 0 && (\n                        <Icon\n                          name={accountGainLoss > 0 ? 'trending_up' : 'trending_down'}\n                          size={20}\n                          sx={{ color: gainLossDisplayColor(accountGainLoss) }}\n                        />\n                      )}\n                      <Text\n                        sx={{\n                          color: gainLossDisplayColor(accountGainLoss),\n                          fontWeight: 600,\n                        }}\n                        variant=\"body1\"\n                      >\n                        {accountGainLossPercentage.toFixed(2)}%\n                      </Text>\n                      <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n                        |\n                      </Text>\n                      <Text\n                        sx={{\n                          color: gainLossDisplayColor(accountGainLoss),\n                          fontWeight: 600,\n                        }}\n                        variant=\"body1\"\n                      >\n                        {Math.abs(accountGainLoss).toLocaleString('en-US', {\n                          currency: 'USD',\n                          maximumFractionDigits: 2,\n                          minimumFractionDigits: 2,\n                          style: 'currency',\n                        })}\n                      </Text>\n                    </Stack>\n                  </Stack>\n\n                  <Stack\n                    sx={{\n                      alignItems: 'center',\n                      flex: 1,\n                      justifyContent: 'center',\n                      pb: 14,\n                      pl: 7,\n                      pr: 7,\n                      pt: 14,\n                    }}\n                  >\n                    <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n                      {copy.overview.total_value}\n                    </Text>\n                    <Text sx={{ color: 'text.primary', fontWeight: 600 }} variant=\"body1\">\n                      {accountTotalValue?.toLocaleString('en-US', {\n                        currency: 'USD',\n                        maximumFractionDigits: 2,\n                        minimumFractionDigits: 2,\n                        style: 'currency',\n                      })}\n                    </Text>\n                  </Stack>\n                </Stack>\n              </Stack>\n            </Paper>\n          )\n        }\n\n        const disabledColor = isDarkMode ? 'grey.700' : 'grey.400'\n        const logoColor = accountHoldings.length ? 'text.primary' : disabledColor\n\n        return (\n          <Accordion\n            expanded={expandedStates[account.guid] === true}\n            key={account.guid}\n            onChange={hasHoldingsData ? handleAccordionChange(account.guid) : () => {}}\n            sx={{\n              border: 1,\n              borderColor: 'divider',\n              borderRadius: '4px',\n              width: '100%',\n            }}\n          >\n            <AccordionSummary\n              aria-controls=\"panel1a-content\"\n              id=\"panel1a-header\"\n              sx={[\n                expandedStates[account.guid] && {\n                  borderBottom: 1,\n                  borderColor: 'divider',\n                  maxHeight: 88,\n                },\n              ]}\n            >\n              <Stack\n                sx={{\n                  alignItems: 'center',\n                  flexDirection: 'row',\n                  gap: 13,\n                  p: 14,\n                  width: '100%',\n                }}\n              >\n                <Icon name={'expand_more'} size={20} sx={{ color: logoColor }} />\n                <InstitutionLogo\n                  alt={account.institutionName || ''}\n                  institutionGuid={account.institution_guid || ''}\n                  size={32}\n                />\n\n                <Stack sx={{ alignItems: 'flex-start' }}>\n                  <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n                    {account.memberName}\n                  </Text>\n                  <Text sx={{ color: 'text.primary', fontWeight: 600 }} variant=\"body1\">\n                    {account.user_name || account.name}\n                  </Text>\n                </Stack>\n              </Stack>\n\n              <Stack sx={{ flexDirection: 'row' }}>\n                <Stack sx={{ alignItems: 'flex-end', pb: 14, pl: 24, pr: 24, pt: 14 }}>\n                  <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n                    {copy.overview.total_gain_Loss}\n                  </Text>\n\n                  <Stack\n                    sx={{\n                      alignItems: 'center',\n                      flexDirection: 'row',\n                      gap: 2,\n                      justifyContent: 'flex-end',\n                    }}\n                  >\n                    {accountGainLoss !== 0 && (\n                      <Icon\n                        name={accountGainLoss >= 0 ? 'trending_up' : 'trending_down'}\n                        size={20}\n                        sx={{ color: gainLossDisplayColor(accountGainLoss) }}\n                      />\n                    )}\n                    <Text\n                      sx={{\n                        color: gainLossDisplayColor(accountGainLoss),\n                        fontWeight: 600,\n                      }}\n                      variant=\"body1\"\n                    >\n                      {accountGainLossPercentage.toFixed(2)}%\n                    </Text>\n                    <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n                      |\n                    </Text>\n                    <Text\n                      sx={{\n                        color: gainLossDisplayColor(accountGainLoss),\n                        fontWeight: 600,\n                      }}\n                      variant=\"body1\"\n                    >\n                      {Math.abs(accountGainLoss).toLocaleString('en-US', {\n                        currency: 'USD',\n                        maximumFractionDigits: 2,\n                        minimumFractionDigits: 2,\n                        style: 'currency',\n                      })}\n                    </Text>\n                  </Stack>\n                </Stack>\n\n                <Stack sx={{ alignItems: 'flex-end', gap: 12, pb: 14, pl: 16, pr: 16, pt: 14 }}>\n                  <Stack sx={{ alignItems: 'flex-end' }}>\n                    <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n                      {copy.overview.total_value}\n                    </Text>\n                    <Text sx={{ color: 'text.primary', fontWeight: 600 }} variant=\"body1\">\n                      {accountTotalValue?.toLocaleString('en-US', {\n                        currency: 'USD',\n                        maximumFractionDigits: 2,\n                        minimumFractionDigits: 2,\n                        style: 'currency',\n                      })}\n                    </Text>\n                  </Stack>\n                </Stack>\n              </Stack>\n            </AccordionSummary>\n            <AccordionDetails sx={{ bgcolor: 'background.default', p: 12 }}>\n              <Paper sx={{ border: 1, borderColor: 'neutral.light' }}>\n                <HoldingsTable\n                  currentEditedCostBasis={currentEditedCostBasis}\n                  data={accountHoldings}\n                  editingHoldingId={editingHoldingId}\n                  handleCostBasisBlur={handleCostBasisBlur}\n                  handleCostBasisChange={handleCostBasisChange}\n                  handleCostBasisClick={handleCostBasisClick}\n                  handleCostBasisKeyDown={handleCostBasisKeyDown}\n                />\n              </Paper>\n            </AccordionDetails>\n          </Accordion>\n        )\n      })}\n\n      {/* footer content */}\n      <EmptyStateFooterComponent />\n\n      {/* Drawer Component  */}\n      <InvestmentDetailsDrawer\n        accountHoldingsData={accountHoldingsData}\n        currentEditedCostBasis={currentEditedCostBasis}\n        editingHoldingId={editingHoldingId}\n        handleCostBasisBlur={handleCostBasisBlur}\n        handleCostBasisChange={handleCostBasisChange}\n        handleCostBasisClick={handleCostBasisClick}\n        handleCostBasisKeyDown={handleCostBasisKeyDown}\n        isOpen={openDrawer}\n        onClose={closeDrawer}\n      />\n\n      <ConnectionsDrawer\n        onClose={() => setShowConnectionsWidget(false)}\n        showConnectionsWidget={showConnectionsWidget}\n        title={accountsCopy.manage_connections}\n      />\n    </Stack>\n  )\n}\n\nexport default observer(Overview)\n"],"mappings":"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"}

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

@@ -0,0 +1,12 @@
+import { Text as o } from "@mxenabled/mxui";
+import { jsx as t } from "react/jsx-runtime";
+var a = ({ title: r }) => /* @__PURE__ */ t(o, {
+  bold: !0,
+  variant: "body1",
+  children: r
+});
+export {
+  a as TabTitle
+};
+
+//# sourceMappingURL=TabTitle.es.js.map

package/dist/investments/components/TabTitle.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabTitle.es.js","names":[],"sources":["../../../src/investments/components/TabTitle.tsx"],"sourcesContent":["import { Text } from '@mxenabled/mxui'\n\ninterface TabTitleProps {\n  title: string\n}\n\nexport const TabTitle = ({ title }: TabTitleProps) => (\n  <Text bold={true} variant=\"body1\">\n    {title}\n  </Text>\n)\n"],"mappings":";;AAMA,IAAa,IAAA,CAAY,EAAE,OAAA,EAAA,MACzB,gBAAA,EAAC,GAAD;AAAA,EAAM,MAAM;AAAA,EAAM,SAAQ;AAAA,YACvB;AACG,CAAA"}

package/dist/investments/components/allocation/InvestementAllocationList.es.js

@@ -0,0 +1,136 @@
+import { useGlobalCopyStore as S } from "../../../common/context/hooks.es.js";
+import { useScreenSize as h } from "../../../common/hooks/useScreenSize.es.js";
+import { EmptyStateFooterComponent as _ } from "../EmptyStateFooterComponent.es.js";
+import { currencyDisplay as d, percentageDisplay as g } from "./util/createInvestementsAllocationData.es.js";
+import B from "react";
+import c from "@mui/material/Stack";
+import { Text as n } from "@mxenabled/mxui";
+import { Fragment as D, jsx as t, jsxs as i } from "react/jsx-runtime";
+import L from "@mui/material/Box";
+import j from "@mui/material/ToggleButton";
+import k from "@mui/material/ToggleButtonGroup";
+import s from "@mui/material/Divider";
+import u from "@mui/material/List";
+import x from "@mui/material/ListItem";
+import A from "@mui/material/ListItemButton";
+import E from "@mui/material/Collapse";
+var U = ({ data: p, onSelected: f, selectedId: e, selectedTabs: l, setSelectedTabs: y }) => {
+  const b = (r, o) => {
+    o !== null && y(o);
+  }, { isMobile: v } = h(), { investments: { allocation: a } } = S(), C = [{
+    label: a.tabs_label_dollar,
+    value: 0
+  }, {
+    label: a.tabs_label_percent,
+    value: 1
+  }], m = !p?.investmentsData.length, { isSmallMobile: w } = h();
+  return /* @__PURE__ */ i(c, {
+    sx: {
+      mt: 15,
+      gap: 12,
+      width: v ? 250 : 412
+    },
+    children: [
+      /* @__PURE__ */ t(k, {
+        exclusive: !0,
+        fullWidth: !0,
+        onChange: b,
+        value: m ? -1 : l,
+        children: C.map(({ label: r, value: o }) => /* @__PURE__ */ t(j, {
+          color: "primary",
+          value: o,
+          children: /* @__PURE__ */ t(n, {
+            bold: !0,
+            textTransform: "capitalize",
+            variant: "body1",
+            children: r
+          })
+        }, r))
+      }),
+      /* @__PURE__ */ t(u, {
+        sx: { px: 12 },
+        children: p.investmentsData.map((r) => /* @__PURE__ */ i(B.Fragment, { children: [
+          /* @__PURE__ */ t(x, {
+            disableGutters: !0,
+            disablePadding: !0,
+            sx: { minHeight: 44 },
+            children: /* @__PURE__ */ i(A, {
+              "aria-expanded": e === r.guid,
+              onClick: () => f(r.guid),
+              sx: {
+                minHeight: 44,
+                px: 12,
+                py: 0
+              },
+              children: [/* @__PURE__ */ t(L, {
+                borderRadius: 4,
+                flexShrink: 0,
+                height: 8,
+                sx: {
+                  backgroundColor: r.color,
+                  mr: 8
+                },
+                width: 8
+              }), /* @__PURE__ */ i(c, {
+                alignItems: "center",
+                direction: "row",
+                justifyContent: "space-between",
+                width: "100%",
+                children: [/* @__PURE__ */ t(n, {
+                  bold: e === r.guid,
+                  children: r.displayName
+                }), /* @__PURE__ */ t(n, {
+                  bold: e === r.guid,
+                  variant: "body1",
+                  children: l === 0 ? d(r.value) : g(r.percentage)
+                })]
+              })]
+            })
+          }),
+          /* @__PURE__ */ t(s, {}),
+          r.holdings && r.holdings.length > 0 && /* @__PURE__ */ t(E, {
+            in: e === r.guid,
+            unmountOnExit: !0,
+            children: /* @__PURE__ */ i(u, { children: [r?.holdings?.map((o) => /* @__PURE__ */ t(x, {
+              sx: {
+                pl: 24,
+                pr: 8,
+                py: 0
+              },
+              children: /* @__PURE__ */ i(c, {
+                direction: "row",
+                justifyContent: "space-between",
+                width: "100%",
+                children: [/* @__PURE__ */ i(n, { children: [o.displayName, " "] }), /* @__PURE__ */ t(n, { children: l === 0 ? d(o.value) : g(o.percentage) })]
+              })
+            }, o.displayName)), /* @__PURE__ */ t(s, {})] })
+          })
+        ] }, r.guid))
+      }),
+      m ? /* @__PURE__ */ i(D, { children: [
+        /* @__PURE__ */ t(n, {
+          sx: {
+            color: "secondary.main",
+            p: 8,
+            textAlign: "center"
+          },
+          children: a.empty_data
+        }),
+        /* @__PURE__ */ t(s, {}),
+        /* @__PURE__ */ t(_, { sx: { ".inner-container": { width: w ? "100%" : 364 } } })
+      ] }) : l === 0 && /* @__PURE__ */ t(n, {
+        bold: !0,
+        sx: {
+          textAlign: "right",
+          pr: 24
+        },
+        children: `${a.total_label_text} ${d(p.totalAmount)}`
+      })
+    ]
+  });
+};
+export {
+  U as InvestementAllocationList
+};
+
+//# sourceMappingURL=InvestementAllocationList.es.js.map