@mx-cartographer/experiences 9.2.4-alpha.al0 → 9.3.0-alpha.bb1

package/dist/insights/types/Charts/BarChart.d.ts

@@ -1,13 +1,5 @@
-export interface BarDataProps {
-    ariaLabel: string;
-    formattedAmount: string;
-    label: string;
-    value: number;
-    category?: string;
-    categoryGuid?: string;
-    imageSize?: number;
-    merchantGuid?: string;
-}
+import { BarDataProps } from '../../../common/types/Charts';
+export type { BarDataProps } from '../../../common/types/Charts';
 interface AmountsProps {
     average?: number;
     formattedAverage: string;
@@ -93,4 +85,3 @@ export interface DoubleBarChartMXUIProps {
     removeSelectedTabColorChange?: boolean;
     onBarClick?: (index: number) => void;
 }
-export {};

package/dist/insights/types/CommonBeat/index.es.js

@@ -0,0 +1,8 @@
+var a = /* @__PURE__ */ (function(r) {
+  return r.Primary = "Primary", r.Secondary = "Secondary", r;
+})({});
+export {
+  a as ButtonActionType
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/insights/types/CommonBeat/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/insights/types/CommonBeat.ts"],"sourcesContent":["import { BeatLikeOffer, CardHeaderProps, InsightButtonProps } from '../components'\n\nexport interface Account {\n  account_number?: string\n  account_subtype?: AccountSubType\n  account_type: AccountType\n  apr?: number\n  apy?: number\n  available_balance?: number\n  balance?: number\n  balance_updated_at?: number\n  cash_balance?: number\n  connectionStatus?: ConnectionStatus\n  credit_limit?: number\n  currency_code?: string\n  current_balance?: number\n  day_payment_is_due?: number\n  displayName?: string\n  display_order?: number\n  external_guid?: string\n  feed_account_type?: number\n  feed_apr?: number\n  feed_apy?: number\n  feed_credit_limit?: number\n  feed_day_payment_is_due?: number\n  feed_interest_rate?: number\n  feed_is_closed?: boolean\n  feed_localized_name?: string\n  feed_name?: string\n  feed_nickname?: string\n  feed_original_balance?: number\n  flags?: number\n  guid: string\n  institutionName?: string\n  institution_guid?: string\n  interestRate?: number\n  interest_rate?: number\n  interest_rate_set_by?: number\n  is_closed: boolean\n  is_deleted: boolean\n  is_excluded_from_accounts: boolean\n  is_excluded_from_budgets: boolean\n  is_excluded_from_cash_flow: boolean\n  is_excluded_from_debts: boolean\n  is_excluded_from_goals: boolean\n  is_excluded_from_investments: boolean\n  is_excluded_from_net_worth: boolean\n  is_excluded_from_spending: boolean\n  is_excluded_from_transactions: boolean\n  is_excluded_from_trends: boolean\n  is_hidden: boolean\n  is_manual: boolean\n  is_personal: boolean\n  localized_name?: string\n  memberName?: string\n  member_guid?: string\n  member_is_managed_by_user: boolean\n  metadata?: string\n  minimum_payment?: number\n  name?: string\n  nickname?: string\n  original_balance?: number\n  payment_due_at?: number\n  pending_balance?: number\n  property_type?: PropertyType\n  revision?: number\n  truncatedDisplayName?: string\n  updated_at?: number\n  user_guid?: string\n  user_name?: string\n}\n\nexport interface Beat {\n  account_guids: string[] | []\n  active_at?: string | number\n  associated_transaction_guid?: string | null\n  call_to_action?: string | null\n  category_guids?: string[] | []\n  created_at?: string | number\n  cta_clicked_at?: number | null\n  data_series: DataSeries\n  description?: string\n  digest?: string\n  dismissed_at?: number | null\n  displayed_at?: string | null\n  errors?: any\n  guid: string\n  has_been_displayed: boolean\n  html_description?: string\n  html_in_description_cta?: string\n  html_micro_call_to_action?: string\n  html_micro_description?: string\n  html_micro_title?: string\n  html_short_title?: string\n  html_title: string\n  icon_color?: string | null\n  icon_type?: number | null\n  in_description_cta?: string | null\n  is_dismissed: boolean\n  is_obsolete: boolean\n  is_refreshable: boolean\n  is_sampled: boolean\n  merchant_guids: string[] | []\n  metadata?: string | null\n  micro_call_to_action?: string | null\n  micro_description?: string | null\n  micro_title?: string | null\n  payload: any\n  primary_account?: Account\n  primary_account_guid?: string | null\n  primary_category_guid?: string | null\n  primary_goal_guid?: string | null\n  primary_merchant_guid?: string | null\n  primary_scheduled_payment_guid?: string | null\n  primary_transaction?: Transaction\n  primary_transaction_guid?: string | null\n  power_action_completed_at?: string | null\n  power_action_has_been_completed?: boolean\n  scheduled_payment_guids: string[] | []\n  short_title?: string | null\n  supporting_action?: string | null\n  template: string\n  title: string\n  transaction_guids: string[] | []\n  transactions?: Transaction[]\n  user_guid: string\n  user_verification: UserVerification\n}\n\ninterface ButtonProps extends Omit<InsightButtonProps, 'beat' | 'onClick'> {\n  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, type?: ButtonActionType) => void\n}\n\nexport interface CommonBeatProps {\n  altLoadingText?: string\n  asteriskText?: string\n  beat: Beat | BeatLikeOffer\n  buttonProps?: ButtonProps\n  errorText?: string\n  feedback?: React.ReactNode | null\n  header?: Omit<CardHeaderProps, 'title'>\n  institutionName?: string\n  isError?: boolean\n  isLoading?: boolean\n  isMini?: boolean\n  isZeroState?: boolean\n}\n\nexport interface DataSeries {\n  data?: any[]\n  names?: string[]\n  types?: string[]\n}\n\nexport interface Transaction {\n  account?: string\n  accountIsClosed?: boolean\n  accountIsHidden?: boolean\n  account_guid: string\n  amount: number\n  attachment_guid?: string | null\n  category?: string\n  category_guid?: string\n  check_number?: string | null\n  currency_code: string | null\n  date: number\n  description: string\n  duplicate: boolean\n  external_guid?: string | null\n  feed_attachment_guid?: string | null\n  feed_description: string\n  feed_localized_description?: string | null\n  feed_posted_date?: number | null\n  feed_status: TransactionStatus | null\n  feed_transaction_date: number | null\n  feed_transacted_at: number | null\n  flags?: number | null\n  guid: string\n  has_been_split: boolean\n  has_been_viewed: boolean\n  isIncome?: boolean\n  isPending?: boolean\n  is_cleared: boolean\n  is_duplicate: boolean\n  is_flagged: boolean\n  is_hidden: boolean\n  is_international?: boolean | null\n  is_manual: boolean\n  is_personal: boolean\n  is_reimbursable: boolean\n  is_subscription: boolean\n  is_void: boolean\n  localized_description?: string | null\n  localized_memo?: string | null\n  memo?: string | null\n  merchant_guid?: string | null\n  metadata?: string | null\n  number?: string\n  parent_guid?: string | null\n  payee?: string\n  posted_date?: number | null\n  reference?: string | null\n  revision: number\n  scheduled_payment_guid?: string | null\n  tags: string[]\n  top_level_category_guid?: string\n  transaction_type: TransactionType\n  user_date?: number | null\n  user_guid: string\n  user_transaction_rule_guid?: string | null\n}\n\nexport enum AccountSubType {\n  ACCIDENTAL_DEATH_AND_DISMEMBERMENT = 40,\n  ADVISORY_ACCOUNT = 61,\n  AUTO = 3,\n  BOAT = 25,\n  BROKERAGE = 17,\n  BROKERAGE_MARGIN = 62,\n  CASH_MANAGEMENT_ACCOUNT = 46,\n  CERTIFICATE_OF_DEPOSIT = 2,\n  CHARITABLE_GIFT_ACCOUNT = 63,\n  CHURCH_ACCOUNT = 64,\n  CONSERVATORSHIP = 65,\n  CORPORATE_ACCOUNT = 104,\n  COVERDELL = 60,\n  CUSTODIAL = 66,\n  DEFINED_BENEFIT_PLAN = 67,\n  DEFINED_CONTRIBUTION_PLAN = 68,\n  DISABILITY = 33,\n  EDUCATIONAL = 69,\n  EMPLOYEE_STOCK_OWNERSHIP_PLAN = 22,\n  EMPLOYEE_STOCK_PURCHASE_PLAN = 47,\n  ESTATE = 70,\n  EXECUTOR = 71,\n  FIXED_ANNUITY = 30,\n  FIXED_ANNUITY_ROTH_IRA = 57,\n  FIXED_ANNUITY_TRADITIONAL_IRA = 53,\n  GROUP_RETIREMENT_SAVINGS_PLAN = 72,\n  GUARANTEED_INVESTMENT_CERTIFICATE = 73,\n  HEALTH = 34,\n  HELOC = 28,\n  HOME_EQUITY = 8,\n  HRA = 74,\n  HSA = 42,\n  HSA_CHECKING = 107,\n  HSA_SAVINGS = 106,\n  INDEXED_ANNUITY = 75,\n  INDIVIDUAL = 44,\n  INHERITED_ANNUITY = 103,\n  INHERITED_ROTH_IRA = 59,\n  INHERITED_TRADITIONAL_IRA = 56,\n  INVESTMENT_CLUB = 76,\n  IRA = 12,\n  IRREVOCABLE_TRUST = 77,\n  JOINT_TENANTS_BY_ENTIRITY = 78,\n  JOINT_TENANTS_COMMUNITY_PROPERTY = 79,\n  JOINT_TENANTS_IN_COMMON = 80,\n  JOINT_TENANTS_WITH_RIGHTS_OF_SURVIVORSHIP = 81,\n  KEOUGH_PLAN = 82,\n  LIFE_INCOME_FUND = 83,\n  LIMITED_LIABILITY_ACCOUNT = 105,\n  LIVING_TRUST = 84,\n  LOCKED_IN_RETIREMENT_ACCOUNT = 85,\n  LOCKED_IN_RETIREMENT_INVESTMENT_FUND = 86,\n  LOCKED_IN_RETIREMENT_SAVINGS_ACCOUNT = 87,\n  LONG_TERM_CARE = 35,\n  MONEY_MARKET = 1,\n  MONEY_PURCHASE_PLAN = 88,\n  NON_TAXABLE = 16,\n  NONE = 0,\n  PARTNERSHIP = 89,\n  PENSION = 21,\n  PERSONAL = 6,\n  PERSONAL_WITH_COLLATERAL = 7,\n  PLAN_401_A = 51,\n  PLAN_401_K = 9,\n  PLAN_403_B = 10,\n  PLAN_409_A = 90,\n  PLAN_457 = 20,\n  PLAN_529 = 11,\n  PLAN_ROTH_401_K = 29,\n  PLAN_ROTH_403_B = 91,\n  POWERSPORTS = 26,\n  PROFIT_SHARING_PLAN = 49,\n  PROPERTY_AND_CASUALTY = 36,\n  REGISTERED_DISABILITY_SAVINGS_PLAN = 92,\n  REGISTERED_EDUCATION_SAVINGS_PLAN = 48,\n  REGISTERED_LOCKED_IN_SAVINGS_PLAN = 93,\n  REGISTERED_PENSION_PLAN = 94,\n  REGISTERED_RETIREMENT_INCOME_FUND = 45,\n  REGISTERED_RETIREMENT_SAVINGS_PLAN = 95,\n  REVOCABLE_TRUST = 96,\n  ROLLOVER_IRA = 13,\n  ROTH_CONVERSION = 97,\n  ROTH_IRA = 14,\n  RV = 27,\n  SARSEP_IRA = 52,\n  SEPP_IRA = 55,\n  SIMPLE_IRA = 24,\n  SIMPLIFIED_EMPLOYEE_PENSION = 23,\n  SMALL_BUSINESS = 5,\n  SOLE_PROPRIETORSHIP = 98,\n  SPOUSAL_IRA = 99,\n  SPOUSAL_ROTH_IRA = 100,\n  STUDENT = 4,\n  TAXABLE = 15,\n  TAX_FREE_SAVINGS_ACCOUNT = 43,\n  TERM_LIFE = 38,\n  TESTAMENTARY_TRUST = 101,\n  THRIFT_SAVINGS_PLAN = 102,\n  TRUST = 18,\n  UNIFORM_GIFTS_TO_MINORS_ACT = 19,\n  UNIFORM_TRANSFER_TO_MINORS_ACT = 50,\n  UNIVERSAL_LIFE = 37,\n  VARIABLE_ANNUITY = 31,\n  VARIABLE_ANNUITY_ROTH_IRA = 58,\n  VARIABLE_ANNUITY_TRADITIONAL_IRA = 54,\n  VARIABLE_UNIVERSAL_LIFE = 41,\n  VEHICLE_INSURANCE = 32,\n  WHOLE_LIFE = 39,\n}\n\nexport enum AccountType {\n  ANY = 0,\n  CASH = 9,\n  CHECKING = 1,\n  CHECKING_LINE_OF_CREDIT = 12,\n  CREDIT_CARD = 4,\n  DIGITAL_WALLET = 13,\n  INSURANCE = 10,\n  INVESTMENT = 5,\n  LINE_OF_CREDIT = 6,\n  LOAN = 3,\n  MORTGAGE = 7,\n  PREPAID = 11,\n  PROPERTY = 8,\n  SAVINGS = 2,\n}\n\nexport enum ConnectionStatus {\n  Connected = 'Connected',\n  Error = 'Error',\n  Processing = 'Processing',\n  RequiresMfa = 'RequiresMfa',\n}\n\nexport enum PropertyType {\n  APPLIANCES = 5,\n  ART = 2,\n  COMPUTER = 6,\n  ELECTRONICS = 7,\n  FURNITURE = 4,\n  JEWELRY = 3,\n  MISCELLANEOUS = 9,\n  REAL_ESTATE = 0,\n  SPORTS_EQUIPMENT = 8,\n  VEHICLE = 1,\n}\n\nexport enum TransactionStatus {\n  PENDING = 2,\n  POSTED = 1,\n}\n\nexport enum TransactionType {\n  CREDIT = 1,\n  DEBIT = 2,\n}\n\nexport enum UserVerification {\n  CORRECT = 1,\n  INCORRECT = 2,\n  UNKNOWN = 0,\n}\n\nexport enum ButtonActionType {\n  Primary = 'Primary',\n  Secondary = 'Secondary',\n}\n"],"mappings":"AAwXA,IAAY,IAAL,0BAAA,GAAA;AACL,SAAA,EAAA,UAAA,WACA,EAAA,YAAA;AACF,GAAA,CAAA,CAAA"}

package/dist/investments/InvestmentsWidget/index.es.js

@@ -0,0 +1,98 @@
+import { useAccountStore as W, useEvent as w, useGlobalCopyStore as x, useGlobalUiStore as D, useHoldingStore as f } from "../../common/context/hooks/index.es.js";
+import { useScreenSize as M } from "../../common/hooks/useScreenSize/index.es.js";
+import { useWidgetLoadTimer as G } from "../../common/hooks/useWidgetLoadTimer/index.es.js";
+import { ANALYTICS_EVENTS as o } from "../../common/constants/Analytics/index.es.js";
+import { AccountType as O } from "../../core/types/Account/index.es.js";
+import k from "../../common/components/Loader/index.es.js";
+import { WidgetContainer as K } from "../../common/components/WidgetContainer/index.es.js";
+import { EmptyState as V } from "../../common/components/EmptyState/index.es.js";
+import F from "../../accounts/components/ConnectionsDrawer/index.es.js";
+import H from "../components/Allocation/index.es.js";
+import U from "../components/Analysis/index.es.js";
+import j from "../components/Overview/index.es.js";
+import { TabTitle as z } from "../components/TabTitle/index.es.js";
+import c from "react";
+import { observer as R } from "mobx-react-lite";
+import Y from "@mui/material/Stack";
+import { Fragment as B, jsx as t, jsxs as l } from "react/jsx-runtime";
+import q from "@mui/material/Tab";
+import J from "@mui/material/Tabs";
+var ut = R(({ onBackClick: u, onMenuClick: T, sx: _ }) => {
+  const { onEvent: n } = w(), { isMobile: C } = M(), { isAccountDataLoaded: E, loadAccountData: b, visibleInvestmentAccounts: I } = W(), { visibleHoldings: S, setShowConnectionsWidget: m, showConnectionsWidget: g } = f(), { investments: e, accounts: v } = x(), { isInitialized: r } = D(), [i, h] = c.useState(0), { loadHoldings: A, holdingsLoaded: d } = f();
+  G({
+    widgetName: "InvestmentsWidget",
+    isLoaded: d
+  }), c.useEffect(() => {
+    E || b().finally();
+  }, []), c.useEffect(() => {
+    r && A().finally();
+  }, [r]);
+  const N = () => {
+    n(o.INVESTMENT_WIDGET_ACCOUNT_FILTER_CLICK);
+  };
+  if (!r || !d) return /* @__PURE__ */ t(k, {});
+  const y = [
+    o.INVESTMENT_WIDGET_DETAILS_CLICK,
+    o.INVESTMENT_WIDGET_ALLOCATION_CLICK,
+    o.INVESTMENT_WIDGET_ANALYSIS_CLICK
+  ], s = I.length === 0 && S.length === 0, L = [
+    e.tab_overview_title,
+    e.tab_allocation_title,
+    e.tab_analysis_title
+  ];
+  return /* @__PURE__ */ l(K, {
+    allowedAccountTypes: [O.INVESTMENT],
+    onAccountsFilterClick: N,
+    onBackClick: u,
+    onMenuClick: T,
+    sx: _,
+    title: e.title,
+    children: [/* @__PURE__ */ l(Y, {
+      mx: C ? 0 : 48,
+      my: 24,
+      children: [/* @__PURE__ */ t(J, {
+        onChange: (a, p) => {
+          h(p), n(y[p]);
+        },
+        sx: { bgcolor: "background.paper" },
+        textColor: "primary",
+        value: s ? -1 : i,
+        variant: "fullWidth",
+        children: L.map((a) => /* @__PURE__ */ t(q, {
+          disabled: s,
+          label: /* @__PURE__ */ t(z, { title: a })
+        }, a))
+      }), s ? /* @__PURE__ */ t(V, {
+        header: e.empty_state_header,
+        icon: "bid_landscape",
+        onClick: () => {
+          m(!0), n(o.ACCOUNTS_CLICK_CONNECT);
+        },
+        primaryButton: e.overview.connect_accounts,
+        subText: e.empty_state_description,
+        sx: {
+          width: { sm: 432 },
+          ".buttons-footer": { width: 167 },
+          ".MuiTypography-h2": {
+            mt: 20,
+            mb: 4
+          },
+          px: 16
+        }
+      }) : /* @__PURE__ */ l(B, { children: [
+        i === 0 && /* @__PURE__ */ t(j, {}),
+        i === 1 && /* @__PURE__ */ t(H, {}),
+        i === 2 && /* @__PURE__ */ t(U, {})
+      ] })]
+    }), /* @__PURE__ */ t(F, {
+      onClose: () => m(!1),
+      showConnectionsWidget: g,
+      title: v.manage_connections
+    })]
+  });
+});
+export {
+  ut as InvestmentsWidget
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/investments/InvestmentsWidget/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../src/investments/InvestmentsWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\nimport Tab from '@mui/material/Tab'\nimport Tabs from '@mui/material/Tabs'\n\nimport {\n  ANALYTICS_EVENTS,\n  EmptyState,\n  Loader,\n  useAccountStore,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useHoldingStore,\n  useScreenSize,\n  useWidgetLoadTimer,\n  WidgetContainer,\n} from '../common'\nimport { AccountType, WidgetProps } from '../core'\n\nimport ConnectionsDrawer from '../accounts/components/ConnectionsDrawer'\nimport Allocation from './components/Allocation'\nimport Analysis from './components/Analysis'\nimport Overview from './components/Overview'\nimport { TabTitle } from './components/TabTitle'\n\nexport const InvestmentsWidget = observer(({ onBackClick, onMenuClick, sx }: WidgetProps) => {\n  const { onEvent } = useEvent()\n  const { isMobile } = useScreenSize()\n  const {\n    isAccountDataLoaded,\n    loadAccountData,\n    visibleInvestmentAccounts: accounts,\n  } = useAccountStore()\n  const {\n    visibleHoldings: holdings,\n    setShowConnectionsWidget,\n    showConnectionsWidget,\n  } = useHoldingStore()\n  const { investments: copy, accounts: accountsCopy } = useGlobalCopyStore()\n\n  const { isInitialized } = useGlobalUiStore()\n\n  const [selectedTab, setSelectedTab] = React.useState(0)\n\n  const { loadHoldings, holdingsLoaded } = useHoldingStore()\n\n  useWidgetLoadTimer({\n    widgetName: 'InvestmentsWidget',\n    isLoaded: holdingsLoaded,\n  })\n\n  React.useEffect(() => {\n    if (!isAccountDataLoaded) {\n      loadAccountData().finally()\n    }\n  }, [])\n\n  React.useEffect(() => {\n    if (isInitialized) {\n      loadHoldings().finally()\n    }\n  }, [isInitialized])\n\n  const handleAccountFilterClick = () => {\n    onEvent(ANALYTICS_EVENTS.INVESTMENT_WIDGET_ACCOUNT_FILTER_CLICK)\n  }\n\n  if (!isInitialized || !holdingsLoaded) return <Loader />\n\n  const events = [\n    ANALYTICS_EVENTS.INVESTMENT_WIDGET_DETAILS_CLICK,\n    ANALYTICS_EVENTS.INVESTMENT_WIDGET_ALLOCATION_CLICK,\n    ANALYTICS_EVENTS.INVESTMENT_WIDGET_ANALYSIS_CLICK,\n  ]\n  const isEmptyState = accounts.length === 0 && holdings.length === 0\n  const investmentTabs = [\n    copy.tab_overview_title,\n    copy.tab_allocation_title,\n    copy.tab_analysis_title,\n  ]\n  return (\n    <WidgetContainer\n      allowedAccountTypes={[AccountType.INVESTMENT]}\n      onAccountsFilterClick={handleAccountFilterClick}\n      onBackClick={onBackClick}\n      onMenuClick={onMenuClick}\n      sx={sx}\n      title={copy.title}\n    >\n      <Stack mx={isMobile ? 0 : 48} my={24}>\n        <Tabs\n          onChange={(_, newValue) => {\n            setSelectedTab(newValue)\n            onEvent(events[newValue])\n          }}\n          sx={{ bgcolor: 'background.paper' }}\n          textColor=\"primary\"\n          value={!isEmptyState ? selectedTab : -1}\n          variant=\"fullWidth\"\n        >\n          {investmentTabs.map((title) => (\n            <Tab disabled={isEmptyState} key={title} label={<TabTitle title={title} />} />\n          ))}\n        </Tabs>\n        {isEmptyState ? (\n          <EmptyState\n            header={copy.empty_state_header}\n            icon=\"bid_landscape\"\n            onClick={() => {\n              setShowConnectionsWidget(true)\n              onEvent(ANALYTICS_EVENTS.ACCOUNTS_CLICK_CONNECT)\n            }}\n            primaryButton={copy.overview.connect_accounts}\n            subText={copy.empty_state_description}\n            sx={{\n              width: { sm: 432 },\n              '.buttons-footer': {\n                width: 167,\n              },\n              '.MuiTypography-h2': {\n                mt: 20,\n                mb: 4,\n              },\n              px: 16,\n            }}\n          />\n        ) : (\n          <>\n            {selectedTab === 0 && <Overview />}\n            {selectedTab === 1 && <Allocation />}\n            {selectedTab === 2 && <Analysis />}\n          </>\n        )}\n      </Stack>\n      <ConnectionsDrawer\n        onClose={() => setShowConnectionsWidget(false)}\n        showConnectionsWidget={showConnectionsWidget}\n        title={accountsCopy.manage_connections}\n      />\n    </WidgetContainer>\n  )\n})\n"],"mappings":"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"}

package/dist/investments/components/Allocation/InvestementAllocationList/index.es.js

@@ -0,0 +1,136 @@
+import { useGlobalCopyStore as S } from "../../../../common/context/hooks/index.es.js";
+import { useScreenSize as h } from "../../../../common/hooks/useScreenSize/index.es.js";
+import { EmptyStateFooterComponent as _ } from "../../EmptyStateFooterComponent/index.es.js";
+import { currencyDisplay as d, percentageDisplay as g } from "../util/createInvestementsAllocationData/index.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=index.es.js.map

package/dist/investments/components/Allocation/InvestementAllocationList/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/investments/components/allocation/InvestementAllocationList.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Collapse from '@mui/material/Collapse'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport Stack from '@mui/material/Stack'\nimport ToggleButton from '@mui/material/ToggleButton'\nimport ToggleButtonGroup from '@mui/material/ToggleButtonGroup'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore, useScreenSize } from '../../../common'\nimport { EmptyStateFooterComponent } from '../EmptyStateFooterComponent'\nimport { InvestmentsData } from './InvestmentsAllocationChart'\nimport { currencyDisplay, percentageDisplay } from './util/createInvestementsAllocationData'\n\ninterface InvestmentAllocationListProps {\n  data: InvestmentsData\n  onSelected: (id: string) => void\n  selectedId?: string\n  selectedTabs: number\n  setSelectedTabs: (value: number) => void\n}\n\nexport const InvestementAllocationList = ({\n  data,\n  onSelected,\n  selectedId,\n  selectedTabs,\n  setSelectedTabs,\n}: InvestmentAllocationListProps) => {\n  const handleChange = (_: React.SyntheticEvent, newValue: number) => {\n    if (newValue !== null) {\n      setSelectedTabs(newValue)\n    }\n  }\n  const { isMobile } = useScreenSize()\n  const {\n    investments: { allocation: copy },\n  } = useGlobalCopyStore()\n\n  const toggleButtonsList = [\n    { label: copy.tabs_label_dollar, value: 0 },\n    { label: copy.tabs_label_percent, value: 1 },\n  ]\n  const isEmptyState = !data?.investmentsData.length\n  const { isSmallMobile } = useScreenSize()\n\n  return (\n    <Stack sx={{ mt: 15, gap: 12, width: isMobile ? 250 : 412 }}>\n      <ToggleButtonGroup\n        exclusive={true}\n        fullWidth={true}\n        onChange={handleChange}\n        value={isEmptyState ? -1 : selectedTabs}\n      >\n        {toggleButtonsList.map(({ label, value }) => (\n          <ToggleButton color=\"primary\" key={label} value={value}>\n            <Text bold={true} textTransform={'capitalize'} variant=\"body1\">\n              {label}\n            </Text>\n          </ToggleButton>\n        ))}\n      </ToggleButtonGroup>\n\n      <List sx={{ px: 12 }}>\n        {data.investmentsData.map((item) => (\n          <React.Fragment key={item.guid}>\n            <ListItem\n              disableGutters={true}\n              disablePadding={true}\n              sx={{\n                minHeight: 44,\n              }}\n            >\n              <ListItemButton\n                aria-expanded={Boolean(selectedId === item.guid)}\n                onClick={() => onSelected(item.guid)}\n                sx={{ minHeight: 44, px: 12, py: 0 }}\n              >\n                <Box\n                  borderRadius={4}\n                  flexShrink={0}\n                  height={8}\n                  sx={{ backgroundColor: item.color, mr: 8 }}\n                  width={8}\n                />\n                <Stack\n                  alignItems=\"center\"\n                  direction=\"row\"\n                  justifyContent=\"space-between\"\n                  width=\"100%\"\n                >\n                  <Text bold={selectedId === item.guid}>{item.displayName}</Text>\n                  <Text bold={selectedId === item.guid} variant=\"body1\">\n                    {selectedTabs === 0\n                      ? currencyDisplay(item.value)\n                      : percentageDisplay(item.percentage)}\n                  </Text>\n                </Stack>\n              </ListItemButton>\n            </ListItem>\n\n            <Divider />\n\n            {item.holdings && item.holdings.length > 0 && (\n              <Collapse in={Boolean(selectedId === item.guid)} unmountOnExit={true}>\n                <List>\n                  {item?.holdings?.map((subItem) => (\n                    <ListItem\n                      key={subItem.displayName}\n                      sx={{\n                        pl: 24,\n                        pr: 8,\n                        py: 0,\n                      }}\n                    >\n                      <Stack direction=\"row\" justifyContent=\"space-between\" width=\"100%\">\n                        <Text>{subItem.displayName} </Text>\n                        <Text>\n                          {selectedTabs === 0\n                            ? currencyDisplay(subItem.value)\n                            : percentageDisplay(subItem.percentage)}\n                        </Text>\n                      </Stack>\n                    </ListItem>\n                  ))}\n                  <Divider />\n                </List>\n              </Collapse>\n            )}\n          </React.Fragment>\n        ))}\n      </List>\n      {isEmptyState ? (\n        <>\n          <Text sx={{ color: 'secondary.main', p: 8, textAlign: 'center' }}>{copy.empty_data}</Text>\n          <Divider />\n          <EmptyStateFooterComponent\n            sx={{\n              '.inner-container': { width: isSmallMobile ? '100%' : 364 },\n            }}\n          />\n        </>\n      ) : (\n        selectedTabs === 0 && (\n          <Text bold={true} sx={{ textAlign: 'right', pr: 24 }}>\n            {`${copy.total_label_text} ${currencyDisplay(data.totalAmount)}`}\n          </Text>\n        )\n      )}\n    </Stack>\n  )\n}\n"],"mappings":"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"}

package/dist/investments/components/Allocation/InvestmentsAllocationChart/index.es.js

@@ -0,0 +1,86 @@
+import L from "../../../../common/components/charts/Donut/index.es.js";
+import { useGlobalCopyStore as I } from "../../../../common/context/hooks/index.es.js";
+import { currencyDisplay as c, percentageDisplay as j } from "../util/createInvestementsAllocationData/index.es.js";
+import m from "react";
+import r from "@mui/material/Stack";
+import { P as M, Text as p } from "@mxenabled/mxui";
+import { Icon as b } from "@mxenabled/mx-icons";
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { useTheme as w } from "@mui/material/styles";
+var V = ({ data: t, hoveredId: h, isPercentage: g, onMouseEnter: f, onMouseLeave: y, onSelected: d, selectedId: o, size: i = 150, totalLabel: x }) => {
+  const s = w(), l = s.palette.mode === "dark", n = m.useMemo(() => o ? t.investmentsData.find(({ guid: G }) => G === o) : void 0, [o]), { investments: { allocation: D } } = I(), v = m.useMemo(() => t.donutData.length > 0 ? t.donutData : [{
+    id: "0",
+    color: s.palette.neutral.light,
+    value: 100
+  }], [t, s]), C = l ? "#0AC295" : "#09A57F", _ = l ? "grey.300" : "grey.700", k = () => n ? D.pie_chart_centered_click_for_details : g ? j(t.totalGainLossPercentage) : c(t.totalGainLoss), a = t.totalGainLoss >= 0 ? C : _;
+  return /* @__PURE__ */ e(L, {
+    data: v,
+    hoveredId: h,
+    onClick: d,
+    onMouseEnter: f,
+    onMouseLeave: y,
+    selectedId: o,
+    size: i,
+    children: /* @__PURE__ */ e(r, {
+      alignItems: "center",
+      height: "100%",
+      justifyContent: "center",
+      width: "100%",
+      children: /* @__PURE__ */ e(r, {
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: i,
+        minWidth: i,
+        children: /* @__PURE__ */ u(r, {
+          alignItems: "center",
+          sx: {
+            gap: {
+              xs: 4,
+              xl: 8
+            },
+            mb: {
+              xs: 4,
+              xl: 8
+            }
+          },
+          children: [
+            /* @__PURE__ */ e(p, {
+              color: "text.secondary",
+              noWrap: !0,
+              children: n?.displayName ?? x
+            }),
+            /* @__PURE__ */ e(M, {
+              color: "text.primary",
+              variant: "h1",
+              children: c(n?.value ?? t.totalMarketValue)
+            }),
+            /* @__PURE__ */ u(r, {
+              sx: {
+                alignItems: "center",
+                flexDirection: "row",
+                gap: 4
+              },
+              children: [!n && /* @__PURE__ */ e(b, {
+                name: t.totalGainLoss >= 0 ? "trending_up" : "trending_down",
+                size: 20,
+                sx: { color: a }
+              }), /* @__PURE__ */ e(p, {
+                sx: {
+                  color: a,
+                  fontWeight: 700
+                },
+                variant: "body2",
+                children: k()
+              })]
+            })
+          ]
+        })
+      })
+    })
+  });
+};
+export {
+  V as InvestementsAllocationChart
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/investments/components/Allocation/InvestmentsAllocationChart/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/investments/components/allocation/InvestmentsAllocationChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { P, Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { useGlobalCopyStore } from '../../../common'\nimport Donut from '../../../common/components/charts/Donut'\n\nimport {\n  currencyDisplay,\n  InvestmentsAllocationData,\n  percentageDisplay,\n} from './util/createInvestementsAllocationData'\n\nexport interface DonutData {\n  id: string\n  label?: string\n  color: string\n  value: number\n}\nexport interface InvestmentsData {\n  investmentsData: InvestmentsAllocationData[]\n  donutData: DonutData[]\n  totalAmount: number\n  totalGainLoss: number\n  totalMarketValue: number\n  totalGainLossPercentage: number\n}\ninterface InvestementAllocationProps {\n  data: InvestmentsData\n  hoveredId?: string\n  isPercentage?: boolean\n  onSelected: (id: string) => void\n  onMouseEnter: (id: string) => void\n  onMouseLeave: (id: string) => void\n  selectedId?: string\n  size?: number\n  totalLabel: string\n}\n\nexport const InvestementsAllocationChart: React.FC<InvestementAllocationProps> = ({\n  data,\n  hoveredId,\n  isPercentage,\n  onMouseEnter,\n  onMouseLeave,\n  onSelected,\n  selectedId,\n  size = 150,\n  totalLabel,\n}) => {\n  const theme = useTheme()\n  const isDarkMode = theme.palette.mode === 'dark'\n\n  const selectedInvestments = React.useMemo(\n    () =>\n      selectedId\n        ? data.investmentsData.find(({ guid }: InvestmentsAllocationData) => guid === selectedId)\n        : undefined,\n    [selectedId],\n  )\n  const {\n    investments: { allocation: copy },\n  } = useGlobalCopyStore()\n  const donutData = React.useMemo(() => {\n    if (data.donutData.length > 0) return data.donutData\n\n    // Empty Donut zero state\n    return [{ id: '0', color: theme.palette.neutral.light, value: 100 }]\n  }, [data, theme])\n\n  const gainDisplayColor = isDarkMode ? '#0AC295' : '#09A57F'\n  const lossDisplayColor = isDarkMode ? 'grey.300' : 'grey.700'\n\n  const getGainLossDisplay = () => {\n    if (selectedInvestments) return copy.pie_chart_centered_click_for_details\n    if (isPercentage) return percentageDisplay(data.totalGainLossPercentage)\n    return currencyDisplay(data.totalGainLoss)\n  }\n\n  const gainLossDisplayColor = data.totalGainLoss >= 0 ? gainDisplayColor : lossDisplayColor\n\n  return (\n    <Donut\n      data={donutData}\n      hoveredId={hoveredId}\n      onClick={onSelected}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      selectedId={selectedId}\n      size={size}\n    >\n      <Stack alignItems=\"center\" height=\"100%\" justifyContent=\"center\" width=\"100%\">\n        <Stack alignItems=\"center\" justifyContent=\"center\" minHeight={size} minWidth={size}>\n          <Stack alignItems=\"center\" sx={{ gap: { xs: 4, xl: 8 }, mb: { xs: 4, xl: 8 } }}>\n            <Text color=\"text.secondary\" noWrap={true}>\n              {selectedInvestments?.displayName ?? totalLabel}\n            </Text>\n            <P color=\"text.primary\" variant=\"h1\">\n              {currencyDisplay(selectedInvestments?.value ?? data.totalMarketValue)}\n            </P>\n\n            <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 4 }}>\n              {!selectedInvestments && (\n                <Icon\n                  name={data.totalGainLoss >= 0 ? 'trending_up' : 'trending_down'}\n                  size={20}\n                  sx={{ color: gainLossDisplayColor }}\n                />\n              )}\n              <Text\n                sx={{\n                  color: gainLossDisplayColor,\n                  fontWeight: 700,\n                }}\n                variant=\"body2\"\n              >\n                {getGainLossDisplay()}\n              </Text>\n            </Stack>\n          </Stack>\n        </Stack>\n      </Stack>\n    </Donut>\n  )\n}\n"],"mappings":";;;;;;;;;AA2CA,IAAa,IAAA,CAAqE,EAChF,MAAA,GACA,WAAA,GACA,cAAA,GACA,cAAA,GACA,cAAA,GACA,YAAA,GACA,YAAA,GACA,MAAA,IAAO,KACP,YAAA,EAAA,MACI;AACJ,QAAM,IAAQ,EAAS,GACjB,IAAa,EAAM,QAAQ,SAAS,QAEpC,IAAsB,EAAM,QAAA,MAE9B,IACI,EAAK,gBAAgB,KAAA,CAAM,EAAE,MAAA,EAAA,MAAsC,MAAS,CAAU,IACtF,QACN,CAAC,CAAU,CACb,GACM,EACJ,aAAa,EAAE,YAAY,EAAA,EAAA,IACzB,EAAmB,GACjB,IAAY,EAAM,QAAA,MAClB,EAAK,UAAU,SAAS,IAAU,EAAK,YAGpC,CAAC;AAAA,IAAE,IAAI;AAAA,IAAK,OAAO,EAAM,QAAQ,QAAQ;AAAA,IAAO,OAAO;AAAA,EAAI,CAAC,GAClE,CAAC,GAAM,CAAK,CAAC,GAEV,IAAmB,IAAa,YAAY,WAC5C,IAAmB,IAAa,aAAa,YAE7C,IAAA,MACA,IAA4B,EAAK,uCACjC,IAAqB,EAAkB,EAAK,uBAAuB,IAChE,EAAgB,EAAK,aAAa,GAGrC,IAAuB,EAAK,iBAAiB,IAAI,IAAmB;AAE1E,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,MAAM;AAAA,IACK,WAAA;AAAA,IACX,SAAS;AAAA,IACK,cAAA;AAAA,IACA,cAAA;AAAA,IACF,YAAA;AAAA,IACN,MAAA;AAAA,cAEN,gBAAA,EAAC,GAAD;AAAA,MAAO,YAAW;AAAA,MAAS,QAAO;AAAA,MAAO,gBAAe;AAAA,MAAS,OAAM;AAAA,gBACrE,gBAAA,EAAC,GAAD;AAAA,QAAO,YAAW;AAAA,QAAS,gBAAe;AAAA,QAAS,WAAW;AAAA,QAAM,UAAU;AAAA,kBAC5E,gBAAA,EAAC,GAAD;AAAA,UAAO,YAAW;AAAA,UAAS,IAAI;AAAA,YAAE,KAAK;AAAA,cAAE,IAAI;AAAA,cAAG,IAAI;AAAA,YAAE;AAAA,YAAG,IAAI;AAAA,cAAE,IAAI;AAAA,cAAG,IAAI;AAAA,YAAE;AAAA,UAAE;AAAA,oBAA7E;AAAA,YACE,gBAAA,EAAC,GAAD;AAAA,cAAM,OAAM;AAAA,cAAiB,QAAQ;AAAA,wBAClC,GAAqB,eAAe;AAAA,YACjC,CAAA;AAAA,YACN,gBAAA,EAAC,GAAD;AAAA,cAAG,OAAM;AAAA,cAAe,SAAQ;AAAA,wBAC7B,EAAgB,GAAqB,SAAS,EAAK,gBAAgB;AAAA,YACnE,CAAA;AAAA,YAEH,gBAAA,EAAC,GAAD;AAAA,cAAO,IAAI;AAAA,gBAAE,YAAY;AAAA,gBAAU,eAAe;AAAA,gBAAO,KAAK;AAAA,cAAE;AAAA,wBAAhE,CACG,CAAC,KACA,gBAAA,EAAC,GAAD;AAAA,gBACE,MAAM,EAAK,iBAAiB,IAAI,gBAAgB;AAAA,gBAChD,MAAM;AAAA,gBACN,IAAI,EAAE,OAAO,EAAqB;AAAA,cACnC,CAAA,GAEH,gBAAA,EAAC,GAAD;AAAA,gBACE,IAAI;AAAA,kBACF,OAAO;AAAA,kBACP,YAAY;AAAA,gBACd;AAAA,gBACA,SAAQ;AAAA,0BAEP,EAAmB;AAAA,cAChB,CAAA,CACD;AAAA;UACF;AAAA;MACF,CAAA;AAAA,IACF,CAAA;AAAA,EACF,CAAA;AAEX"}

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

@@ -0,0 +1,55 @@
+import { useAccountStore as b, useGlobalCopyStore as x, useGlobalUiStore as A, useHoldingStore as I } from "../../../common/context/hooks/index.es.js";
+import { useScreenSize as g } from "../../../common/hooks/useScreenSize/index.es.js";
+import { createInvestmentsAllocationData as h } from "../allocation/util/createInvestementsAllocationData/index.es.js";
+import { InvestementAllocationList as y } from "../allocation/InvestementAllocationList/index.es.js";
+import { InvestementsAllocationChart as H } from "../allocation/InvestmentsAllocationChart/index.es.js";
+import s from "react";
+import { observer as M } from "mobx-react-lite";
+import _ from "@mui/material/Stack";
+import { jsx as m, jsxs as j } from "react/jsx-runtime";
+import w from "@mui/material/useMediaQuery";
+var C = () => {
+  const [n, d] = s.useState(0), [t, r] = s.useState(""), [u, o] = s.useState(""), c = (e) => {
+    t !== e ? r(e) : (r(""), o(""));
+  }, { selectedAccountGuids: f } = A(), { visibleHoldings: p } = I(), { visibleInvestmentAccounts: v } = b(), { investments: { allocation: i } } = x(), l = h(v.filter(({ guid: e }) => f.includes(e)), i, p), { isMobile: S } = g(), a = w("(max-width:768px)");
+  return /* @__PURE__ */ j(_, {
+    alignItems: a ? "center" : "flex-start",
+    direction: a ? "column" : "row",
+    gap: {
+      xs: 16,
+      md: 64,
+      xl: 100
+    },
+    sx: {
+      justifyContent: "center",
+      mt: 50,
+      width: "100%"
+    },
+    children: [/* @__PURE__ */ m(H, {
+      data: l,
+      hoveredId: u,
+      isPercentage: n === 1,
+      onMouseEnter: (e) => {
+        t === e ? o("") : t || o(e);
+      },
+      onMouseLeave: () => {
+        o("");
+      },
+      onSelected: c,
+      selectedId: t,
+      size: S ? 280 : 400,
+      totalLabel: i.pie_chart_centered_text
+    }), /* @__PURE__ */ m(y, {
+      data: l,
+      onSelected: c,
+      selectedId: t,
+      selectedTabs: n,
+      setSelectedTabs: d
+    })]
+  });
+}, U = M(C);
+export {
+  U as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/investments/components/Allocation/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/investments/components/Allocation.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\nimport useMediaQuery from '@mui/material/useMediaQuery'\n\nimport { observer } from 'mobx-react-lite'\n\nimport { InvestementAllocationList } from './allocation/InvestementAllocationList'\nimport { InvestementsAllocationChart } from './allocation/InvestmentsAllocationChart'\nimport { createInvestmentsAllocationData } from './allocation/util/createInvestementsAllocationData'\nimport {\n  useAccountStore,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useHoldingStore,\n  useScreenSize,\n} from '../../common'\n\nconst Allocation = () => {\n  const [selectedTabs, setSelectedTabs] = React.useState(0)\n  const [selectedId, setSelectedId] = React.useState('')\n  const [hoveredId, setHoveredId] = React.useState('')\n  const onSelected = (id: string) => {\n    if (selectedId !== id) {\n      setSelectedId(id)\n    } else {\n      setSelectedId('')\n      setHoveredId('')\n    }\n  }\n  const { selectedAccountGuids } = useGlobalUiStore()\n  const { visibleHoldings: allHoldings } = useHoldingStore()\n  const { visibleInvestmentAccounts: accounts } = useAccountStore()\n  const {\n    investments: { allocation: copy },\n  } = useGlobalCopyStore()\n  const investmentAllocationData = createInvestmentsAllocationData(\n    accounts.filter(({ guid }) => selectedAccountGuids.includes(guid)),\n    copy,\n    allHoldings,\n  )\n  const { isMobile } = useScreenSize()\n  const isScreenDeviceTablet = useMediaQuery('(max-width:768px)')\n\n  return (\n    <Stack\n      alignItems={isScreenDeviceTablet ? 'center' : 'flex-start'}\n      direction={isScreenDeviceTablet ? 'column' : 'row'}\n      gap={{ xs: 16, md: 64, xl: 100 }}\n      sx={{\n        justifyContent: 'center',\n        mt: 50,\n        width: '100%',\n      }}\n    >\n      <InvestementsAllocationChart\n        data={investmentAllocationData}\n        hoveredId={hoveredId}\n        isPercentage={selectedTabs === 1}\n        onMouseEnter={(id) => {\n          if (selectedId === id) {\n            setHoveredId('')\n          } else if (!selectedId) {\n            setHoveredId(id)\n          }\n        }}\n        onMouseLeave={() => {\n          setHoveredId('')\n        }}\n        onSelected={onSelected}\n        selectedId={selectedId}\n        size={isMobile ? 280 : 400}\n        totalLabel={copy.pie_chart_centered_text}\n      />\n      <InvestementAllocationList\n        data={investmentAllocationData}\n        onSelected={onSelected}\n        selectedId={selectedId}\n        selectedTabs={selectedTabs}\n        setSelectedTabs={setSelectedTabs}\n      />\n    </Stack>\n  )\n}\n\nexport default observer(Allocation)\n"],"mappings":";;;;;;;;;;AAkBA,IAAM,IAAA,MAAmB;AACvB,QAAM,CAAC,GAAc,CAAA,IAAmB,EAAM,SAAS,CAAC,GAClD,CAAC,GAAY,CAAA,IAAiB,EAAM,SAAS,EAAE,GAC/C,CAAC,GAAW,CAAA,IAAgB,EAAM,SAAS,EAAE,GAC7C,IAAA,CAAc,MAAe;AACjC,IAAI,MAAe,IACjB,EAAc,CAAE,KAEhB,EAAc,EAAE,GAChB,EAAa,EAAE;AAAA,EAEnB,GACM,EAAE,sBAAA,EAAA,IAAyB,EAAiB,GAC5C,EAAE,iBAAiB,EAAA,IAAgB,EAAgB,GACnD,EAAE,2BAA2B,EAAA,IAAa,EAAgB,GAC1D,EACJ,aAAa,EAAE,YAAY,EAAA,EAAA,IACzB,EAAmB,GACjB,IAA2B,EAC/B,EAAS,OAAA,CAAQ,EAAE,MAAA,EAAA,MAAW,EAAqB,SAAS,CAAI,CAAC,GACjE,GACA,CACF,GACM,EAAE,UAAA,EAAA,IAAa,EAAc,GAC7B,IAAuB,EAAc,mBAAmB;AAE9D,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,YAAY,IAAuB,WAAW;AAAA,IAC9C,WAAW,IAAuB,WAAW;AAAA,IAC7C,KAAK;AAAA,MAAE,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,IAAI;AAAA,IAC/B,IAAI;AAAA,MACF,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,OAAO;AAAA,IACT;AAAA,cARF,CAUE,gBAAA,EAAC,GAAD;AAAA,MACE,MAAM;AAAA,MACK,WAAA;AAAA,MACX,cAAc,MAAiB;AAAA,MAC/B,cAAA,CAAe,MAAO;AACpB,QAAI,MAAe,IACjB,EAAa,EAAE,IACL,KACV,EAAa,CAAE;AAAA,MAEnB;AAAA,MACA,cAAA,MAAoB;AAClB,QAAA,EAAa,EAAE;AAAA,MACjB;AAAA,MACY,YAAA;AAAA,MACA,YAAA;AAAA,MACZ,MAAM,IAAW,MAAM;AAAA,MACvB,YAAY,EAAK;AAAA,IAClB,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,MACE,MAAM;AAAA,MACM,YAAA;AAAA,MACA,YAAA;AAAA,MACE,cAAA;AAAA,MACG,iBAAA;AAAA,IAClB,CAAA,CACI;AAAA;AAEX,GAEA,IAAe,EAAS,CAAU"}

package/dist/investments/components/Allocation/util/createInvestementsAllocationData/index.es.js

@@ -0,0 +1,103 @@
+import { formatCurrency as k, formatPercentage as B } from "../../../../../core/utils/NumberFormatting/index.es.js";
+var L = {
+  allocations_cash: "#AEDCCC",
+  allocations_convertible: "#80CAD0",
+  allocations_foreign_bond: "#51B9D4",
+  allocations_foreign_stock: "#3DA0C9",
+  allocations_other: "#3583B8",
+  allocations_preferred: "#2D66A7",
+  allocations_unknown: "#161D6A",
+  allocations_us_bond: "#254995",
+  allocations_us_stock: "#1E2D84"
+}, y = [
+  { name: "allocations_cash" },
+  { name: "allocations_convertible" },
+  { name: "allocations_foreign_bond" },
+  { name: "allocations_foreign_stock" },
+  { name: "allocations_other" },
+  { name: "allocations_preferred" },
+  { name: "allocations_us_bond" },
+  { name: "allocations_us_stock" },
+  { name: "allocations_unknown" }
+], C = (e, l, c) => {
+  const i = c === void 0 ? 0 : l, t = c === void 0 ? l : c;
+  return e >= Math.min(i, t) && e < Math.max(i, t);
+}, h = (e, l, c) => {
+  const i = [...new Set(e.map((r) => r.name.toLowerCase()))];
+  let t;
+  return i.map((r) => {
+    const _ = e.reduce((m, o) => {
+      const p = o.name;
+      return p.toLowerCase() === r ? (t = p, v(o) * o[l] / 100 + m) : m;
+    }, 0);
+    return {
+      displayName: t,
+      name: t,
+      value: _,
+      percentage: _ / c
+    };
+  });
+}, v = (e) => e.calculated_market_value ? e.calculated_market_value : e.market_value, G = (e, l, c) => {
+  const i = Object.values(l.allocations_list), t = [];
+  let r = 0;
+  const _ = e.map(({ guid: a }) => a), m = c.filter(({ account_guid: a }) => _.includes(a)).map((a) => ({
+    ...a,
+    name: a.symbol || a.description,
+    gainLoss: a.cost_basis || a.cost_basis === 0 ? v(a) - a.cost_basis : 0
+  })), { cashBalance: o, totalAccountBalance: p } = e.reduce((a, n) => ({
+    cashBalance: a.cashBalance + (n.cash_balance || 0),
+    totalAccountBalance: a.totalAccountBalance + (n.balance || 0)
+  }), {
+    cashBalance: 0,
+    totalAccountBalance: 0
+  }), { marketValue: A, totalGainLoss: b } = m.reduce((a, n) => ({
+    marketValue: a.marketValue + v(n),
+    totalGainLoss: a.totalGainLoss + n.gainLoss
+  }), {
+    marketValue: 0,
+    totalGainLoss: 0
+  }), f = A + o;
+  return y.forEach((a, n) => {
+    const d = m.filter((u) => !!u[a.name]);
+    let s = d.reduce((u, D) => u + v(D) * D[a.name] / 100, 0);
+    const g = h(d, a.name, s);
+    if (a.name === "allocations_cash" && o > 0) {
+      s += o;
+      const u = {
+        displayName: l.cash_balance_display_name,
+        name: "allocations_name",
+        value: o,
+        percentage: o / f
+      };
+      g.push(u);
+    }
+    s > 0 && (t.push({
+      name: a.name,
+      displayName: i[n],
+      guid: `${a.name}-${n}`,
+      holdings: g,
+      percentage: s / f,
+      value: s,
+      color: L[a.name]
+    }), r += s);
+  }), {
+    investmentsData: t,
+    donutData: t.map(({ displayName: a, guid: n, color: d, value: s }) => ({
+      id: n,
+      color: d,
+      label: a,
+      value: s / r * 100
+    })),
+    totalAmount: r,
+    totalGainLoss: b,
+    totalMarketValue: f,
+    totalGainLossPercentage: b / p
+  };
+}, w = (e) => e < 1e-3 ? "< 0.1%" : B(e), E = (e) => e === 0 ? k(e, "0,0.00") : C(e, -0.01, 0.01) ? "< $0.01" : k(e, "0,0.00");
+export {
+  G as createInvestmentsAllocationData,
+  E as currencyDisplay,
+  w as percentageDisplay
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/investments/components/Allocation/util/createInvestementsAllocationData/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../../src/investments/components/allocation/util/createInvestementsAllocationData.tsx"],"sourcesContent":["import { Account, Holding } from '../../../../core'\nimport { InvestmentAllocationCopy } from '../../../../core/types/localization/InvestmentsCopy'\nimport type { DonutData } from '../InvestmentsAllocationChart'\nimport { formatCurrency, formatPercentage } from '../../../../core/utils/NumberFormatting'\n\nexport interface InvestmentsAllocationData {\n  name: string\n  displayName: string\n  guid: string\n  holdings: InvestmentAllocationTotals[]\n  percentage: number\n  value: number\n  color: string\n}\nexport interface InvestmentAllocationTotals {\n  displayName: string\n  name: string\n  value: number\n  percentage: number\n}\n\nconst allocationColors = {\n  allocations_cash: '#AEDCCC',\n  allocations_convertible: '#80CAD0',\n  allocations_foreign_bond: '#51B9D4',\n  allocations_foreign_stock: '#3DA0C9',\n  allocations_other: '#3583B8',\n  allocations_preferred: '#2D66A7',\n  allocations_unknown: '#161D6A',\n  allocations_us_bond: '#254995',\n  allocations_us_stock: '#1E2D84',\n}\nconst allocationsList = [\n  {\n    name: 'allocations_cash',\n  },\n  {\n    name: 'allocations_convertible',\n  },\n  {\n    name: 'allocations_foreign_bond',\n  },\n  {\n    name: 'allocations_foreign_stock',\n  },\n  {\n    name: 'allocations_other',\n  },\n  {\n    name: 'allocations_preferred',\n  },\n  {\n    name: 'allocations_us_bond',\n  },\n  {\n    name: 'allocations_us_stock',\n  },\n  {\n    name: 'allocations_unknown',\n  },\n]\n\nconst inRange = (n: number, start: number, end?: number) => {\n  const rangeStart = end === undefined ? 0 : start\n  const rangeEnd = end === undefined ? start : end\n  return n >= Math.min(rangeStart, rangeEnd) && n < Math.max(rangeStart, rangeEnd)\n}\n\nconst createHoldingsData = (\n  holdings: Holding[],\n  allocationName: string,\n  allocationValue: number,\n) => {\n  const uniqueHoldings = [\n    ...new Set(holdings.map((holding: Holding) => holding.name.toLowerCase())),\n  ]\n  let displayName: string\n  const investmentAllocationTotals = uniqueHoldings.map((holdingName) => {\n    // sum all the holdings with the same \"name\"\n    const holdingsTotalValue = holdings.reduce((acc, hold: Holding) => {\n      const name = hold.name\n\n      if (name.toLowerCase() === holdingName) {\n        // Since we lose the capitalization with the unique names, we take it from the last match.\n        displayName = name\n        return (\n          (getHoldingValue(hold) * hold[allocationName as keyof typeof allocationColors]) / 100 +\n          acc\n        )\n      }\n\n      return acc\n    }, 0)\n\n    return {\n      displayName,\n      name: displayName,\n      value: holdingsTotalValue,\n      percentage: holdingsTotalValue / allocationValue,\n    }\n  })\n  return investmentAllocationTotals\n}\n\nconst getHoldingValue = (holding: Holding) =>\n  holding.calculated_market_value ? holding.calculated_market_value : holding.market_value\n\nexport const createInvestmentsAllocationData = (\n  accounts: Account[],\n  copy: InvestmentAllocationCopy,\n  holdings: Holding[],\n) => {\n  const allocationListDisplayNames = Object.values(copy.allocations_list)\n  const investementAllocationData: InvestmentsAllocationData[] = []\n\n  let totalAmount = 0\n\n  const accountGuids = accounts.map(({ guid }) => guid)\n  const updatedHoldings: Holding[] = holdings\n    .filter(({ account_guid }) => accountGuids.includes(account_guid))\n    .map((eachHolding) => {\n      return {\n        ...eachHolding,\n        name: eachHolding.symbol || eachHolding.description,\n        gainLoss:\n          eachHolding.cost_basis || eachHolding.cost_basis === 0\n            ? getHoldingValue(eachHolding) - eachHolding.cost_basis\n            : 0,\n      }\n    })\n\n  const { cashBalance, totalAccountBalance } = accounts.reduce(\n    (sum, account) => {\n      return {\n        cashBalance: sum.cashBalance + (account.cash_balance || 0),\n        totalAccountBalance: sum.totalAccountBalance + (account.balance || 0),\n      }\n    },\n    { cashBalance: 0, totalAccountBalance: 0 },\n  )\n  const { marketValue, totalGainLoss } = updatedHoldings.reduce(\n    (acc, holding) => {\n      return {\n        marketValue: acc.marketValue + getHoldingValue(holding),\n        totalGainLoss: acc.totalGainLoss + holding.gainLoss,\n      }\n    },\n    { marketValue: 0, totalGainLoss: 0 },\n  )\n  const totalMarketValue = marketValue + cashBalance\n\n  allocationsList.forEach((allocation, index) => {\n    const filteredHoldings = updatedHoldings.filter(\n      (eachHolding) => !!eachHolding[allocation.name as keyof typeof allocationColors],\n    )\n    let holdingsTotal = filteredHoldings.reduce(\n      (sum, holding) =>\n        sum +\n        (getHoldingValue(holding) * holding[allocation.name as keyof typeof allocationColors]) /\n          100,\n      0,\n    )\n    const investmentAllocationTotals = createHoldingsData(\n      filteredHoldings,\n      allocation.name,\n      holdingsTotal,\n    )\n    if (allocation.name === 'allocations_cash' && cashBalance > 0) {\n      // Updating holdingsTotal to include cash balance\n      // This affects the holdingsTotal and percentage for this allocation\n      holdingsTotal += cashBalance\n\n      // Creating a holding item for cash balance\n      const cashBalanceHolding = {\n        displayName: copy.cash_balance_display_name,\n        name: 'allocations_name',\n        value: cashBalance,\n        percentage: cashBalance / totalMarketValue,\n      }\n\n      investmentAllocationTotals.push(cashBalanceHolding)\n    }\n\n    // Shows allocation if holdingsTotal is greater than zero\n    if (holdingsTotal > 0) {\n      investementAllocationData.push({\n        name: allocation.name,\n        displayName: allocationListDisplayNames[index],\n        guid: `${allocation.name}-${index}`,\n        holdings: investmentAllocationTotals,\n        percentage: holdingsTotal / totalMarketValue,\n        value: holdingsTotal,\n        color: allocationColors[allocation.name as keyof typeof allocationColors],\n      })\n      totalAmount += holdingsTotal\n    }\n  })\n  const donutData: DonutData[] = investementAllocationData.map(\n    ({ displayName, guid, color, value }) => ({\n      id: guid,\n      color: color,\n      label: displayName,\n      value: (value / totalAmount) * 100,\n    }),\n  )\n\n  return {\n    investmentsData: investementAllocationData,\n    donutData,\n    totalAmount,\n    totalGainLoss,\n    totalMarketValue,\n    totalGainLossPercentage: totalGainLoss / totalAccountBalance,\n  }\n}\n\nexport const percentageDisplay = (value: number) =>\n  value < 0.001 ? '< 0.1%' : formatPercentage(value)\n\nexport const currencyDisplay = (value: number) => {\n  if (value === 0) return formatCurrency(value, '0,0.00')\n  return inRange(value, -0.01, 0.01) ? '< $0.01' : formatCurrency(value, '0,0.00')\n}\n"],"mappings":"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"}