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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/investments/components/HoldingDrawer.tsx"],"sourcesContent":["import React from 'react'\n\nimport { observer } from 'mobx-react-lite'\n\nimport Accordion from '@mui/material/Accordion'\nimport AccordionDetails from '@mui/material/AccordionDetails'\nimport AccordionSummary from '@mui/material/AccordionSummary'\nimport IconButton from '@mui/material/IconButton'\nimport TextField from '@mui/material/TextField'\nimport Stack from '@mui/system/Stack'\n\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { InstitutionLogo, Text } from '@mxenabled/mxui'\n\nimport { Drawer } from '../../common'\nimport { useGlobalCopyStore } from '../../common'\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\ninterface InvestmentDetailsDrawerProps {\n  accountHoldingsData: {\n    accounts: any\n    holdings: HoldingDetail[]\n  }\n  currentEditedCostBasis: string\n  editingHoldingId: string | null\n  handleCostBasisBlur: (id: string) => void\n  handleCostBasisChange: (event: React.ChangeEvent<HTMLInputElement>) => void\n  handleCostBasisClick: (holdingId: string, currentCostBasis: number) => void\n  handleCostBasisKeyDown: (event: React.KeyboardEvent<HTMLInputElement>, id: string) => void\n  isOpen: boolean\n  onClose: () => void\n}\n\nconst InvestmentDetailsDrawer: React.FC<InvestmentDetailsDrawerProps> = ({\n  accountHoldingsData,\n  currentEditedCostBasis,\n  editingHoldingId,\n  handleCostBasisBlur,\n  handleCostBasisClick,\n  handleCostBasisChange,\n  handleCostBasisKeyDown,\n  isOpen,\n  onClose,\n}) => {\n  const { investments: copy } = useGlobalCopyStore()\n  const [expandedStates, setExpandedStates] = React.useState<Record<string, boolean>>({})\n\n  const handleAccordionChange =\n    (holdingId: string) => (_event: React.SyntheticEvent, isExpanded: boolean) => {\n      setExpandedStates((prevStates) => ({\n        ...prevStates,\n        [holdingId]: isExpanded,\n      }))\n    }\n\n  return (\n    <Drawer\n      ariaLabelClose={copy.overview.close_investment_drawer}\n      isOpen={isOpen}\n      onClose={onClose}\n      title={copy.overview.investment_details}\n    >\n      <Stack sx={{ gap: 8, p: 24 }}>\n        <InstitutionLogo\n          alt={accountHoldingsData.accounts.institutionName || ''}\n          institutionGuid={accountHoldingsData.accounts.institution_guid || ''}\n          size={64}\n        />\n        <Text sx={{ color: 'text.primary' }} variant=\"body2\">\n          {accountHoldingsData.accounts.memberName}\n        </Text>\n        <Text sx={{ color: 'text.primary' }} variant=\"h2\">\n          {accountHoldingsData.accounts.user_name || accountHoldingsData.accounts.name}\n        </Text>\n\n        <Stack sx={{ alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between' }}>\n          <Text sx={{ color: 'text.primary', fontWeight: 600 }} variant=\"body1\">\n            {copy.overview.current_balance}\n          </Text>\n\n          <Text sx={{ color: 'text.primary', fontWeight: 600 }} variant=\"body1\">\n            {accountHoldingsData.accounts.balance?.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          bgcolor: 'background.default',\n          flexDirection: 'row',\n          justifyContent: 'space-between',\n          px: 24,\n          py: 10,\n        }}\n      >\n        <Text sx={{ color: 'text.primary', fontWeight: 700 }} variant=\"caption\">\n          {copy.overview.holding}\n        </Text>\n        <Text sx={{ color: 'text.primary', fontWeight: 700 }} variant=\"caption\">\n          {copy.overview.market_value}\n        </Text>\n      </Stack>\n      {accountHoldingsData.holdings?.map((holding, index) => {\n        const isCurrentlyEditing = editingHoldingId === holding.id\n        return (\n          <Accordion\n            disableGutters={true}\n            expanded={expandedStates[holding.id] === true}\n            key={holding.id}\n            onChange={holding ? handleAccordionChange(holding?.id) : () => {}}\n            sx={{\n              ':before': index === 0 ? { opacity: 0 } : {},\n              '.MuiAccordionDetails-root': { p: 0 },\n            }}\n          >\n            <AccordionSummary\n              aria-controls=\"panel1a-content\"\n              id=\"panel1a-header\"\n              sx={[\n                { height: 64 },\n                expandedStates[holding.id] &&\n                  index > 0 && {\n                    borderTop: 1,\n                    borderColor: 'divider',\n                  },\n              ]}\n            >\n              <Stack sx={{ flexDirection: 'row', width: '100%' }}>\n                <div style={{ width: 24 }} />\n                <Stack\n                  sx={[\n                    {\n                      alignItems: 'center',\n                      flexDirection: 'row',\n                      justifyContent: 'space-between',\n                      pr: 24,\n                      py: 14,\n                      width: '100%',\n                    },\n                    expandedStates[holding.id] && {\n                      borderBottom: 1,\n                      borderColor: 'divider',\n                    },\n                  ]}\n                >\n                  <Stack\n                    sx={{\n                      alignItems: 'center',\n                      flexDirection: 'row',\n                      gap: 12,\n                    }}\n                  >\n                    <Stack sx={{ overflow: 'hidden', width: 98 }}>\n                      <Text sx={{ fontWeight: 600 }} variant=\"body1\">\n                        {holding.holding}\n                      </Text>\n                      <Text variant=\"caption\">{holding.description}</Text>\n                    </Stack>\n                  </Stack>\n\n                  <Stack\n                    sx={{\n                      alignItems: 'center',\n                      flex: 1,\n                      flexDirection: 'row',\n                      gap: 12,\n                      justifyContent: 'flex-end',\n                    }}\n                  >\n                    <Stack>\n                      <Text sx={{ fontWeight: 600, textAlign: 'right' }} variant={'body1'}>\n                        {holding.marketValue?.toLocaleString('en-US', {\n                          currency: 'USD',\n                          maximumFractionDigits: 2,\n                          minimumFractionDigits: 2,\n                          style: 'currency',\n                        })}\n                      </Text>\n                      <Stack sx={{ alignItems: 'center', gap: 2, flexDirection: 'row' }}>\n                        {holding.totalGainLoss !== 0 && (\n                          <Icon\n                            name={holding.totalGainLoss >= 0 ? 'trending_up' : 'trending_down'}\n                            size={12}\n                            sx={{\n                              verticalAlign: 'middle',\n                              mr: 1,\n                              color: holding.totalGainLoss >= 0 ? 'success.main' : 'grey.700',\n                            }}\n                          />\n                        )}\n                        <Text\n                          sx={{\n                            color: holding.totalGainLoss <= 0 ? 'grey.700' : 'success.main',\n                            fontWeight: holding.totalGainLoss <= 0 ? 400 : 700,\n                          }}\n                          variant=\"caption\"\n                        >\n                          {holding.costBasis\n                            ? `${((holding.totalGainLoss / holding.costBasis) * 100).toFixed(2)}%`\n                            : '0.00%'}\n                        </Text>\n                        <Text sx={{ color: 'grey.700' }} variant=\"caption\">\n                          |\n                        </Text>\n                        <Text\n                          sx={{\n                            color: holding.totalGainLoss <= 0 ? 'grey.700' : 'success.main',\n                            fontWeight: holding.totalGainLoss <= 0 ? 400 : 700,\n                          }}\n                          variant=\"caption\"\n                        >\n                          {Math.abs(holding.totalGainLoss).toLocaleString('en-US', {\n                            currency: 'USD',\n                            maximumFractionDigits: 2,\n                            minimumFractionDigits: 2,\n                            style: 'currency',\n                          })}\n                        </Text>\n                      </Stack>\n                    </Stack>\n\n                    <Icon\n                      name={expandedStates[holding.id] ? 'expand_less' : 'expand_more'}\n                      size={20}\n                    />\n                  </Stack>\n                </Stack>\n              </Stack>\n            </AccordionSummary>\n            <AccordionDetails>\n              <Stack\n                sx={{\n                  alignItems: 'center',\n                  bgcolor: 'background.default',\n                  flexDirection: 'row',\n                  pl: 24,\n                }}\n              >\n                <Stack sx={{ width: 32 }} />\n                <Stack sx={{ flex: 1 }}>\n                  <Stack\n                    sx={{\n                      alignItems: 'center',\n                      borderBottom: 1,\n                      borderColor: 'divider',\n                      flexDirection: 'row',\n                      height: 48,\n                      justifyContent: 'space-between',\n                      pr: 24,\n                    }}\n                  >\n                    <Text sx={{ color: 'text.primary' }} variant=\"body1\">\n                      {copy.overview.quantity}\n                    </Text>\n                    <Text sx={{ color: 'text.primary' }} variant=\"body2\">\n                      {holding.qty}\n                    </Text>\n                  </Stack>\n                  <Stack\n                    sx={{\n                      alignItems: 'center',\n                      flexDirection: 'row',\n                      height: 48,\n                      justifyContent: 'space-between',\n                      pr: 24,\n                    }}\n                  >\n                    <Text sx={{ color: 'text.primary' }} variant=\"body1\">\n                      {copy.overview.cost_basis_header}\n                    </Text>\n\n                    <Stack\n                      direction=\"row\"\n                      sx={{\n                        alignItems: 'center',\n                        gap: 4,\n                      }}\n                    >\n                      {isCurrentlyEditing ? (\n                        <TextField\n                          autoFocus={true}\n                          onBlur={() => handleCostBasisBlur(holding.id)}\n                          onChange={handleCostBasisChange}\n                          onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) =>\n                            handleCostBasisKeyDown(e, holding.id)\n                          }\n                          size=\"small\"\n                          sx={{\n                            fontSize: 14,\n                            width: 58,\n                            '& .MuiInputBase-input': {\n                              padding: '4px 0',\n                              textAlign: 'center',\n                              fontWeight: 600,\n                              color: 'text.primary',\n                            },\n                            '& .MuiOutlinedInput-notchedOutline': {\n                              border: 'none',\n                            },\n                          }}\n                          value={currentEditedCostBasis}\n                        />\n                      ) : (\n                        <Text sx={{ fontSize: 14, width: 58 }} variant=\"body2\">\n                          {holding.costBasis?.toLocaleString('en-US', {\n                            currency: 'USD',\n                            maximumFractionDigits: 2,\n                            minimumFractionDigits: 2,\n                            style: 'currency',\n                          })}\n                        </Text>\n                      )}\n\n                      <IconButton\n                        onClick={() => handleCostBasisClick(holding.id, holding.costBasis)}\n                        sx={{ minWidth: 16, minHeight: 16 }}\n                      >\n                        <Icon name={'stylus'} size={16} sx={{ color: 'grey.700' }} />\n                      </IconButton>\n                    </Stack>\n                  </Stack>\n                </Stack>\n              </Stack>\n            </AccordionDetails>\n          </Accordion>\n        )\n      })}\n    </Drawer>\n  )\n}\n\nexport default observer(InvestmentDetailsDrawer)\n"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/investments/components/HoldingTable.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\nimport Paper from '@mui/material/Paper'\nimport IconButton from '@mui/material/IconButton'\nimport TextField from '@mui/material/TextField'\nimport { useTheme } from '@mui/material/styles'\nimport { DataGridPro, GridColDef } from '@mui/x-data-grid-pro'\n\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../common'\n\nimport { HeaderCell } from './HeaderCell'\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\ninterface HoldingsTableProps {\n  data: HoldingDetail[]\n  editingHoldingId: string | null\n  currentEditedCostBasis: string\n  handleCostBasisClick: (holdingId: string, currentCostBasis: number) => void\n  handleCostBasisChange: (event: React.ChangeEvent<HTMLInputElement>) => void\n  handleCostBasisKeyDown: (event: React.KeyboardEvent<HTMLInputElement>, id: string) => void\n  handleCostBasisBlur: (id: string) => void\n}\n\nconst HoldingsTable: React.FC<HoldingsTableProps> = ({\n  data,\n  editingHoldingId,\n  currentEditedCostBasis,\n  handleCostBasisClick,\n  handleCostBasisChange,\n  handleCostBasisKeyDown,\n  handleCostBasisBlur,\n}) => {\n  const { investments: copy } = useGlobalCopyStore()\n  const theme = useTheme()\n\n  const isDarkMode = theme.palette.mode === 'dark'\n  const gainDisplayColor = 'success.main'\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 columns: GridColDef[] = [\n    {\n      field: 'qty',\n      headerName: copy.overview.qty_header,\n      sortable: false,\n      width: 48,\n      align: 'center',\n      headerAlign: 'center',\n    },\n    {\n      field: 'holding',\n      headerName: copy.overview.holding_header,\n      flex: 1,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Stack sx={{ alignItems: 'center', gap: 16, flexDirection: 'row' }}>\n          <Stack>\n            {/* TODO :InstitutionLogo in future */}\n            <Text sx={{ fontWeight: 700 }}>{params.row.holding}</Text>\n            <Text sx={{ color: 'text.secondary', fontWeight: 400 }} variant=\"tiny\">\n              {params.row.description}\n            </Text>\n          </Stack>\n        </Stack>\n      ),\n    },\n    {\n      field: 'costBasis',\n      headerName: copy.overview.cost_basis_header,\n      width: 132,\n      renderHeader: HeaderCell,\n      renderCell: (params) => {\n        const isCurrentlyEditing = editingHoldingId === params.row.id\n        return (\n          <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 4 }}>\n            {isCurrentlyEditing ? (\n              <TextField\n                autoFocus={true}\n                onBlur={() => handleCostBasisBlur(params.row.id)}\n                onChange={handleCostBasisChange}\n                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) =>\n                  handleCostBasisKeyDown(e, params.row.id)\n                }\n                size=\"small\"\n                sx={{\n                  fontSize: 14,\n                  width: 57,\n                  '& .MuiInputBase-input': {\n                    padding: '4px 0',\n                    textAlign: 'center',\n                    fontWeight: 600,\n                    color: 'text.primary',\n                  },\n                  '& .MuiOutlinedInput-notchedOutline': {\n                    border: 'none',\n                  },\n                }}\n                value={currentEditedCostBasis}\n              />\n            ) : (\n              <Text sx={{ fontSize: 14, width: 57 }} variant=\"body2\">\n                {params.value?.toLocaleString('en-US', {\n                  currency: 'USD',\n                  maximumFractionDigits: 2,\n                  minimumFractionDigits: 2,\n                  style: 'currency',\n                })}\n              </Text>\n            )}\n            <IconButton\n              onClick={() => handleCostBasisClick(params.row.id, params.row.costBasis)}\n              sx={{ minWidth: 12, minHeight: 12 }}\n            >\n              <Icon name={'stylus'} size={12} sx={{ color: 'grey.700' }} />\n            </IconButton>\n          </Stack>\n        )\n      },\n      align: 'center',\n      headerAlign: 'center',\n    },\n    {\n      field: 'totalGainLoss',\n      headerName: copy.overview.total_gain_loss_header,\n      width: 196,\n      renderHeader: HeaderCell,\n      renderCell: (params) => {\n        const costBasis = params.row.costBasis\n        const gainLossPercentage = costBasis ? (params.row.totalGainLoss / costBasis) * 100 : 0\n        return (\n          <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 2 }}>\n            {params.value !== 0 && (\n              <Icon\n                name={params.value > 0 ? 'trending_up' : 'trending_down'}\n                size={16}\n                sx={{\n                  color: gainLossDisplayColor(params.value),\n                  mr: 1,\n                  verticalAlign: 'middle',\n                }}\n              />\n            )}\n            <Text\n              sx={{\n                color: gainLossDisplayColor(params.value),\n                fontWeight: params.value > 0 ? 700 : 400,\n              }}\n              variant=\"body2\"\n            >\n              {costBasis ? `${gainLossPercentage.toFixed(2)}%` : '0.00%'}\n            </Text>\n            <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n              |\n            </Text>\n            <Text\n              sx={{\n                color: gainLossDisplayColor(params.value),\n                fontWeight: params.value > 0 ? 700 : 400,\n              }}\n              variant=\"body2\"\n            >\n              {Math.abs(params.value).toLocaleString('en-US', {\n                currency: 'USD',\n                maximumFractionDigits: 2,\n                minimumFractionDigits: 2,\n                style: 'currency',\n              })}\n            </Text>\n          </Stack>\n        )\n      },\n      align: 'right',\n      headerAlign: 'right',\n      sortable: false,\n    },\n    {\n      field: 'marketValue',\n      headerName: copy.overview.market_value_header,\n      width: 132,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Text sx={{ fontWeight: 700 }} variant={'body2'}>\n          {params.value?.toLocaleString('en-US', {\n            currency: 'USD',\n            maximumFractionDigits: 2,\n            minimumFractionDigits: 2,\n            style: 'currency',\n          })}\n        </Text>\n      ),\n      align: 'right',\n      headerAlign: 'right',\n    },\n  ]\n\n  return (\n    <Paper\n      sx={{\n        boxShadow: 'none',\n        width: '100%',\n      }}\n    >\n      <DataGridPro\n        columns={columns}\n        disableColumnFilter={true}\n        disableColumnMenu={true}\n        disableRowSelectionOnClick={true}\n        hideFooter={true}\n        rows={data}\n        slotProps={{ baseIconButton: { sx: { display: 'none' } } }}\n      />\n    </Paper>\n  )\n}\n\nexport default HoldingsTable\n"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/investments/components/InfoToolTip.tsx"],"sourcesContent":["import React from 'react'\n\nimport IconButton from '@mui/material/IconButton'\nimport Stack from '@mui/material/Stack'\nimport Tooltip from '@mui/material/Tooltip'\n\nimport { P, Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\ninterface InfoTooltipProps {\n  placement?: 'top' | 'bottom' | 'left' | 'right'\n  tooltip_info_body: string\n  tooltip_info_title: string\n}\n\ninterface TooltipContentProps {\n  body: string\n  title: string\n}\n\nconst TooltipContent: React.FC<TooltipContentProps> = ({ body, title }) => (\n  <Stack sx={{ gap: 4, p: 12 }}>\n    <Text bold={true} variant=\"body1\">\n      {title}\n    </Text>\n    <P variant=\"subtitle2\">{body}</P>\n  </Stack>\n)\n\nconst InfoTooltip: React.FC<InfoTooltipProps> = ({\n  placement = 'bottom',\n  tooltip_info_body,\n  tooltip_info_title,\n}) => (\n  <Tooltip\n    enterTouchDelay={500}\n    placement={placement}\n    title={<TooltipContent body={tooltip_info_body} title={tooltip_info_title} />}\n  >\n    <IconButton aria-label={tooltip_info_title} sx={{ minHeight: 0, minWidth: 0, p: 0 }}>\n      <Icon name=\"info\" sx={{ color: 'info.main' }} />\n    </IconButton>\n  </Tooltip>\n)\n\nexport default InfoTooltip\n"],"mappings":";;;;;;;AAoBA,IAAM,IAAA,CAAiD,EAAE,MAAA,GAAM,OAAA,EAAA,MAC7D,gBAAA,EAAC,GAAD;AAAA,EAAO,IAAI;AAAA,IAAE,KAAK;AAAA,IAAG,GAAG;AAAA,EAAG;AAAA,YAA3B,CACE,gBAAA,EAAC,GAAD;AAAA,IAAM,MAAM;AAAA,IAAM,SAAQ;AAAA,cACvB;AAAA,EACG,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,IAAG,SAAQ;AAAA,cAAa;AAAA,EAAQ,CAAA,CAC3B;IAGH,IAAA,CAA2C,EAC/C,WAAA,IAAY,UACZ,mBAAA,GACA,oBAAA,EAAA,MAEA,gBAAA,EAAC,GAAD;AAAA,EACE,iBAAiB;AAAA,EACN,WAAA;AAAA,EACX,OAAO,gBAAA,EAAC,GAAD;AAAA,IAAgB,MAAM;AAAA,IAAmB,OAAO;AAAA,EAAqB,CAAA;AAAA,YAE5E,gBAAA,EAAC,GAAD;AAAA,IAAY,cAAY;AAAA,IAAoB,IAAI;AAAA,MAAE,WAAW;AAAA,MAAG,UAAU;AAAA,MAAG,GAAG;AAAA,IAAE;AAAA,cAChF,gBAAA,EAAC,GAAD;AAAA,MAAM,MAAK;AAAA,MAAO,IAAI,EAAE,OAAO,YAAY;AAAA,IAAI,CAAA;AAAA,EACrC,CAAA;AACL,CAAA"}