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

package/dist/debts/components/DebtsChart.es.js

@@ -0,0 +1,135 @@
+import { DATE_FORMATS_INTL as C, formatDate as k } from "../../core/constants/DateFormats.es.js";
+import { useEvent as _ } from "../../common/context/hooks.es.js";
+import { ANALYTICS_EVENTS as D } from "../../common/constants/Analytics.es.js";
+import { formatCurrency as v } from "../../core/utils/NumberFormatting.es.js";
+import { BASE_LINE_COLOR as S, adjustBrightness as w } from "../utils/DebtsChart.es.js";
+import "react";
+import { jsx as h } from "react/jsx-runtime";
+import { useTheme as I } from "@mui/material/styles";
+import H from "@mui/material/Box";
+import { LineChart as R } from "@mui/x-charts/LineChart";
+var K = ({ sx: g, height: f = 500, width: y, debts: A, hoveredDebtGuid: l, onClickArea: T, onHoverArea: M }) => {
+  const m = I(), { onEvent: x } = _(), c = A.filter((e) => !e.is_impossible), i = [...new Set(c.flatMap((e) => e.dataset.map((t) => new Date(t.x).getTime())))].sort((e, t) => e - t).map((e) => new Date(e)), s = c.map((e) => {
+    const t = new Map(e.dataset.map((n) => [new Date(n.x).getTime(), n.y]));
+    let a = t.get(i[0].getTime()) ?? 0;
+    const r = i.map((n) => {
+      const d = t.get(n.getTime()) ?? a;
+      return a = d, {
+        x: n,
+        y: d
+      };
+    });
+    return {
+      ...e,
+      dataset: r
+    };
+  }), p = s.reduce((e, t) => e + (t.dataset[0]?.y ?? 0), 0), b = i.map((e, t) => {
+    const a = t / (i.length - 1);
+    return {
+      x: e,
+      y: p * (1 - a)
+    };
+  }), E = Math.ceil(p / 100) * 100, L = i, o = s.map((e, t) => {
+    const a = w(S, 1 - t / s.length * 0.5);
+    return {
+      id: `debt-${t}`,
+      guid: e.guid,
+      label: e.name,
+      data: e.dataset.map((r) => r.y),
+      color: a,
+      curve: "linear",
+      type: "line",
+      area: !0,
+      stack: "total",
+      showMark: !1
+    };
+  });
+  o.push({
+    id: "payoff-line",
+    label: "Payoff Line",
+    data: b.map((e) => e.y),
+    color: m.palette.grey[700],
+    curve: "linear",
+    type: "line",
+    stack: void 0,
+    showMark: !1,
+    disableHighlight: !0
+  });
+  const u = (e) => o.findIndex((t) => t?.guid === e);
+  return /* @__PURE__ */ h(H, {
+    sx: {
+      width: "100%",
+      height: "100%",
+      touchAction: "pan-y",
+      "& svg": {
+        touchAction: "pan-y",
+        userSelect: "none"
+      },
+      "& .recharts-wrapper": { touchAction: "pan-y" }
+    },
+    children: /* @__PURE__ */ h(R, {
+      axisHighlight: { x: "none" },
+      disableLineItemHighlight: !0,
+      height: f,
+      hideLegend: !0,
+      margin: {
+        bottom: 24,
+        left: 32,
+        right: 72,
+        top: 48
+      },
+      onAreaClick: (e, t) => {
+        T?.();
+        const a = o.find((r) => r.id === t.seriesId);
+        x(D.DEBTS_CLICK_CHART_AREA, { account_guid: a?.guid });
+      },
+      onHighlightChange: (e) => {
+        const t = o.find((a) => a.id === e?.seriesId)?.guid;
+        M?.(t ?? "");
+      },
+      series: o,
+      skipAnimation: !0,
+      slotProps: { tooltip: { trigger: "none" } },
+      sx: {
+        p: 4,
+        "& .MuiBarLabel-root": {
+          fontSize: 10,
+          fontWeight: 600
+        },
+        "& .MuiAreaElement-root": {
+          opacity: 0.4,
+          transition: "opacity 0.3s ease"
+        },
+        "& .MuiAreaElement-root:hover": { opacity: 1 },
+        "& .MuiLineElement-series-payoff-line": {
+          strokeDasharray: "10 5",
+          strokeWidth: 1
+        },
+        [`& .MuiLineElement-series-debt-${u(l ?? "0")}`]: { opacity: 1 },
+        [`& .MuiAreaElement-series-debt-${u(l ?? "0")}`]: { opacity: 1 },
+        "& .MuiChartsAxis-tickLabel > tspan": { fontFamily: m.typography.body2.fontFamily },
+        ...g
+      },
+      width: y,
+      xAxis: [{
+        data: L,
+        disableTicks: !0,
+        min: i[0],
+        scaleType: "time",
+        tickLabelMinGap: 24,
+        valueFormatter: (e) => k(e, C.MONTH_SHORT_YEAR)
+      }],
+      yAxis: [{
+        min: 0,
+        max: E,
+        disableTicks: !0,
+        valueFormatter: (e) => v(e, "0a")
+      }]
+    })
+  });
+};
+export {
+  K as DebtsChart
+};
+
+//# sourceMappingURL=DebtsChart.es.js.map

package/dist/debts/components/DebtsChart.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebtsChart.es.js","names":[],"sources":["../../../src/debts/components/DebtsChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport { useTheme } from '@mui/material/styles'\n\nimport type { LineSeriesType, HighlightItemData, LineItemIdentifier } from '@mui/x-charts'\nimport { LineChart } from '@mui/x-charts/LineChart'\n\nimport { useEvent, ANALYTICS_EVENTS } from '../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../core/constants'\nimport { DebtChartData } from '../../core/utils/DebtUtils'\nimport { adjustBrightness, BASE_LINE_COLOR } from '../utils/DebtsChart'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\n\ninterface DebtsChartProps {\n  sx?: any\n  height?: number\n  width?: number\n  debts: DebtChartData[]\n  hoveredDebtGuid?: string\n  onClickArea?: () => void\n  onHoverArea?: (debtGuid: string) => void\n}\n\ninterface DebtsChartSeries extends LineSeriesType {\n  guid?: string | null\n}\n\nexport const DebtsChart: React.FC<DebtsChartProps> = ({\n  sx,\n  height = 500,\n  width,\n  debts,\n  hoveredDebtGuid,\n  onClickArea,\n  onHoverArea,\n}) => {\n  const theme = useTheme()\n  const { onEvent } = useEvent()\n\n  const possibleDebts = debts.filter((d) => !d.is_impossible)\n\n  // Generate sorted array of unique dates\n  const uniqueXValues = [\n    ...new Set(\n      possibleDebts.flatMap((debt) => debt.dataset.map((point) => new Date(point.x).getTime())),\n    ),\n  ]\n    .sort((a, b) => a - b)\n    .map((timestamp) => new Date(timestamp))\n\n  // Normalize datasets with missing dates\n  const normalizedDatasets = possibleDebts.map((debt) => {\n    const datasetMap = new Map(debt.dataset.map((point) => [new Date(point.x).getTime(), point.y]))\n\n    let lastY = datasetMap.get(uniqueXValues[0].getTime()) ?? 0\n    const normalizedDataset = uniqueXValues.map((x) => {\n      const y = datasetMap.get(x.getTime()) ?? lastY // Use last known value for missing points\n      lastY = y\n      return { x, y }\n    })\n\n    return { ...debt, dataset: normalizedDataset }\n  })\n\n  const initialTotalDebt = normalizedDatasets.reduce(\n    (sum, debt) => sum + (debt.dataset[0]?.y ?? 0),\n    0,\n  )\n\n  const payoffLine = uniqueXValues.map((x, index) => {\n    const linearRate = index / (uniqueXValues.length - 1)\n    const y = initialTotalDebt * (1 - linearRate)\n    return { x, y }\n  })\n\n  const yMax = Math.ceil(initialTotalDebt / 100) * 100\n  const xData = uniqueXValues\n\n  const series: DebtsChartSeries[] = normalizedDatasets.map((debt, index) => {\n    const brightnessFactor = 1 - (index / normalizedDatasets.length) * 0.5\n    const seriesColor = adjustBrightness(BASE_LINE_COLOR, brightnessFactor)\n\n    return {\n      id: `debt-${index}`,\n      guid: debt.guid,\n      label: debt.name,\n      data: debt.dataset.map((point) => point.y),\n      color: seriesColor,\n      curve: 'linear',\n      type: 'line',\n      area: true,\n      stack: 'total',\n      showMark: false,\n    }\n  })\n\n  series.push({\n    id: 'payoff-line',\n    label: 'Payoff Line',\n    data: payoffLine.map((point) => point.y),\n    color: theme.palette.grey[700],\n    curve: 'linear',\n    type: 'line',\n    stack: undefined,\n    showMark: false,\n    disableHighlight: true,\n  })\n\n  const getIndexByGuid = (guid: string) => {\n    return series.findIndex((s) => s?.guid === guid)\n  }\n\n  const onHighlightChange = (line: HighlightItemData | null) => {\n    const highlightedGuid = series.find((s) => s.id === line?.seriesId)?.guid\n    onHoverArea?.(highlightedGuid ?? '')\n  }\n\n  const onAreaClick = (\n    _event: React.MouseEvent<SVGElement, MouseEvent>,\n    lineItemIdentifier: LineItemIdentifier,\n  ) => {\n    onClickArea?.()\n    const areaSeries = series.find((s) => s.id === lineItemIdentifier.seriesId)\n    onEvent(ANALYTICS_EVENTS.DEBTS_CLICK_CHART_AREA, { account_guid: areaSeries?.guid })\n  }\n\n  return (\n    <Box\n      sx={{\n        width: '100%',\n        height: '100%',\n        touchAction: 'pan-y',\n        '& svg': {\n          touchAction: 'pan-y',\n          userSelect: 'none',\n        },\n        '& .recharts-wrapper': {\n          touchAction: 'pan-y',\n        },\n      }}\n    >\n      <LineChart\n        axisHighlight={{ x: 'none' }}\n        disableLineItemHighlight={true}\n        height={height}\n        hideLegend={true}\n        margin={{ bottom: 24, left: 32, right: 72, top: 48 }}\n        onAreaClick={onAreaClick}\n        onHighlightChange={onHighlightChange}\n        series={series}\n        skipAnimation={true}\n        slotProps={{ tooltip: { trigger: 'none' } }}\n        sx={{\n          p: 4,\n          '& .MuiBarLabel-root': {\n            fontSize: 10,\n            fontWeight: 600,\n          },\n          '& .MuiAreaElement-root': {\n            opacity: 0.4,\n            transition: 'opacity 0.3s ease',\n          },\n          '& .MuiAreaElement-root:hover': {\n            opacity: 1,\n          },\n          '& .MuiLineElement-series-payoff-line': {\n            strokeDasharray: '10 5',\n            strokeWidth: 1,\n          },\n          [`& .MuiLineElement-series-debt-${getIndexByGuid(hoveredDebtGuid ?? '0')}`]: {\n            opacity: 1,\n          },\n          [`& .MuiAreaElement-series-debt-${getIndexByGuid(hoveredDebtGuid ?? '0')}`]: {\n            opacity: 1,\n          },\n          '& .MuiChartsAxis-tickLabel > tspan': {\n            fontFamily: theme.typography.body2.fontFamily,\n          },\n          ...sx,\n        }}\n        width={width}\n        xAxis={[\n          {\n            data: xData,\n            disableTicks: true,\n            min: uniqueXValues[0],\n            scaleType: 'time',\n            tickLabelMinGap: 24,\n            valueFormatter: (value: Date) => formatDate(value, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),\n          },\n        ]}\n        yAxis={[\n          {\n            min: 0,\n            max: yMax,\n            disableTicks: true,\n            valueFormatter: (value: number) => formatCurrency(value, '0a'),\n          },\n        ]}\n      />\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/debts/components/DebtsTable.es.js

@@ -0,0 +1,193 @@
+import { DATE_FORMATS_INTL as w, formatDate as E } from "../../core/constants/DateFormats.es.js";
+import { useEvent as M, useGlobalCopyStore as R } from "../../common/context/hooks.es.js";
+import { useScreenSize as H } from "../../common/hooks/useScreenSize.es.js";
+import { ANALYTICS_EVENTS as b } from "../../common/constants/Analytics.es.js";
+import { formatCurrency as y } from "../../core/utils/NumberFormatting.es.js";
+import { getPriorityValue as D, priorityComparator as B } from "../utils/DebtsTable.es.js";
+import { HeaderCell as l } from "../../trends/components/trendstable/HeaderCell.es.js";
+import { PriorityCell as L } from "./debtstable/PriorityCell.es.js";
+import { AccountCell as W } from "./debtstable/AccountCell.es.js";
+import _ from "react";
+import { Icon as O, Text as n } from "@mxenabled/mxui";
+import { jsx as t } from "react/jsx-runtime";
+import k from "@mui/material/Box";
+import { Stack as F, useTheme as G } from "@mui/material";
+import { DataGridPro as P } from "@mui/x-data-grid-pro";
+var oe = ({ sx: g = {}, debts: d, hoveredDebtGuid: C, onHoverRow: m, onClickRow: v }) => {
+  const a = G(), { onEvent: s } = M(), { isMobile: r } = H(), { debts: o, common: S } = R(), [c, x] = _.useState([{
+    field: "priority",
+    sort: "asc"
+  }]), u = [
+    {
+      field: "priority",
+      headerName: o.table_column_priority,
+      renderHeader: l,
+      renderCell: L,
+      sortComparator: B,
+      sortable: !0,
+      hideSortIcons: !0,
+      type: "custom",
+      align: "left",
+      headerAlign: "left",
+      minWidth: r ? 67 : 72,
+      flex: r ? 0.2 : 0.4
+    },
+    {
+      field: "account",
+      headerName: o.table_column_account,
+      renderHeader: l,
+      renderCell: W,
+      sortable: !1,
+      type: "custom",
+      align: "left",
+      headerAlign: "left",
+      minWidth: r ? 180 : 225,
+      flex: 1
+    },
+    {
+      field: "balance",
+      headerName: o.table_column_balance,
+      renderHeader: l,
+      renderCell: (e) => /* @__PURE__ */ t(n, {
+        color: a.palette.text.primary,
+        variant: "body2",
+        children: y(e.value, "0,0")
+      }),
+      sortable: !0,
+      hideSortIcons: r,
+      type: "number",
+      align: "left",
+      headerAlign: "left",
+      minWidth: r ? 70 : 122,
+      flex: r ? 0.4 : 0.6
+    },
+    {
+      field: "interest_rate",
+      headerName: o.table_column_interest_rate,
+      renderHeader: l,
+      renderCell: (e) => /* @__PURE__ */ t(n, {
+        color: a.palette.text.primary,
+        variant: "body2",
+        children: isNaN(e.value) ? "---" : `${Number(e.value).toFixed(2)}%`
+      }),
+      sortable: !0,
+      hideSortIcons: r,
+      type: "number",
+      align: "left",
+      headerAlign: "left",
+      minWidth: 122,
+      flex: 0.6
+    },
+    {
+      field: "projected_payoff_date",
+      headerName: o.table_column_payoff_date,
+      renderHeader: l,
+      renderCell: (e) => /* @__PURE__ */ t(n, {
+        color: a.palette.text.primary,
+        variant: "body2",
+        children: e.value ? E(e.value, w.MONTH_SHORT_YEAR) : "---"
+      }),
+      sortable: !0,
+      hideSortIcons: r,
+      type: "number",
+      align: "left",
+      headerAlign: "left",
+      minWidth: 122,
+      flex: 0.6
+    },
+    {
+      field: "monthly_payment",
+      headerName: o.table_column_amount_due,
+      renderHeader: l,
+      renderCell: (e) => /* @__PURE__ */ t(n, {
+        color: a.palette.text.primary,
+        variant: "body2",
+        children: typeof e.value == "number" ? y(e.value, "0,0") : "---"
+      }),
+      sortable: !0,
+      hideSortIcons: r,
+      type: "number",
+      align: "left",
+      headerAlign: "left",
+      minWidth: 122,
+      flex: 0.6
+    }
+  ], A = [...u.slice(0, 3), {
+    field: "chevron",
+    headerClassName: "chevron-header",
+    headerName: "",
+    renderCell: () => /* @__PURE__ */ t(F, {
+      "aria-label": S.see_details,
+      role: "button",
+      children: /* @__PURE__ */ t(O, { name: "chevron_right" })
+    }),
+    sortable: !1,
+    hideSortIcons: !0,
+    type: "custom",
+    align: "right",
+    headerAlign: "right",
+    width: 20
+  }], f = _.useMemo(() => d.map((e, i) => ({
+    ...e,
+    id: i,
+    priority: D(e)
+  })), [d]), h = (e) => {
+    const i = e.target.closest("[data-id]")?.getAttribute("data-id"), I = d[Number(i)];
+    m?.(I?.guid ?? "");
+  }, N = (e) => {
+    r || h(e);
+  }, p = (e) => {
+    r && h(e);
+  }, T = (e) => f.find((i) => i.guid === e)?.id;
+  return /* @__PURE__ */ t(k, {
+    sx: {
+      height: "auto",
+      width: "100%",
+      mt: "15px",
+      overflowX: "auto",
+      overflowY: "visible",
+      boxShadow: "none",
+      ...g
+    },
+    children: /* @__PURE__ */ t(P, {
+      columns: r ? A : u,
+      disableColumnFilter: !0,
+      disableColumnMenu: !0,
+      hideFooter: !0,
+      initialState: { sorting: { sortModel: c } },
+      onRowClick: (e) => {
+        v(), s(b.DEBTS_CLICK_TABLE_ROW, { account_guid: e.row.guid });
+      },
+      onSortModelChange: (e) => {
+        x(e), s(b.DEBTS_CLICK_TABLE_SORT);
+      },
+      rows: f,
+      slotProps: {
+        baseIconButton: {
+          color: "secondary",
+          sx: { ml: 8 }
+        },
+        row: {
+          onMouseEnter: N,
+          onMouseLeave: () => !r && m?.(""),
+          onTouchStart: p,
+          onClick: r ? p : void 0
+        }
+      },
+      sortModel: c,
+      sortingOrder: ["asc", "desc"],
+      sx: {
+        "& .chevron-header": { display: "none" },
+        [`& .MuiDataGrid-row[data-id="${T(C)}"]`]: {
+          backgroundColor: a.palette.mode === "light" ? "#f8f9fb" : "#1f2329",
+          filter: "brightness(98%)"
+        }
+      }
+    })
+  });
+};
+export {
+  oe as DebtsTable
+};
+
+//# sourceMappingURL=DebtsTable.es.js.map

package/dist/debts/components/DebtsTable.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebtsTable.es.js","names":[],"sources":["../../../src/debts/components/DebtsTable.tsx"],"sourcesContent":["import React from 'react'\nimport { Stack, useTheme } from '@mui/material'\nimport { DataGridPro, GridColDef, GridSortModel } from '@mui/x-data-grid-pro'\nimport Box from '@mui/material/Box'\nimport { Icon, Text } from '@mxenabled/mxui'\n\nimport { ANALYTICS_EVENTS, useEvent, useGlobalCopyStore, useScreenSize } from '../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../core/constants'\n\nimport { DebtChartData } from '../../core/utils/DebtUtils'\nimport { getPriorityValue, priorityComparator } from '../utils/DebtsTable'\nimport { HeaderCell } from '../../trends/components/trendstable/HeaderCell'\nimport { PriorityCell } from './debtstable/PriorityCell'\nimport { AccountCell } from './debtstable/AccountCell'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\n\ninterface DebtsTableProps {\n  sx?: any\n  debts: DebtChartData[]\n  hoveredDebtGuid: string\n  onHoverRow: (debtGuid: string) => void\n  onClickRow: () => void\n}\n\nexport const DebtsTable: React.FC<DebtsTableProps> = ({\n  sx = {},\n  debts,\n  hoveredDebtGuid,\n  onHoverRow,\n  onClickRow,\n}) => {\n  const theme = useTheme()\n  const { onEvent } = useEvent()\n  const { isMobile } = useScreenSize()\n  const { debts: copy, common: commonCopy } = useGlobalCopyStore()\n\n  const [sortModel, setSortModel] = React.useState<GridSortModel>([\n    { field: 'priority', sort: 'asc' },\n  ])\n\n  const desktopColumns: GridColDef[] = [\n    {\n      field: 'priority',\n      headerName: copy.table_column_priority,\n      renderHeader: HeaderCell,\n      renderCell: PriorityCell,\n      sortComparator: priorityComparator,\n      sortable: true,\n      hideSortIcons: true,\n      type: 'custom',\n      align: 'left',\n      headerAlign: 'left',\n      minWidth: isMobile ? 67 : 72,\n      flex: isMobile ? 0.2 : 0.4,\n    },\n    {\n      field: 'account',\n      headerName: copy.table_column_account,\n      renderHeader: HeaderCell,\n      renderCell: AccountCell,\n      sortable: false,\n      type: 'custom',\n      align: 'left',\n      headerAlign: 'left',\n      minWidth: isMobile ? 180 : 225,\n      flex: 1,\n    },\n    {\n      field: 'balance',\n      headerName: copy.table_column_balance,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Text color={theme.palette.text.primary} variant=\"body2\">\n          {formatCurrency(params.value, '0,0')}\n        </Text>\n      ),\n      sortable: true,\n      hideSortIcons: isMobile,\n      type: 'number',\n      align: 'left',\n      headerAlign: 'left',\n      minWidth: isMobile ? 70 : 122,\n      flex: isMobile ? 0.4 : 0.6,\n    },\n    {\n      field: 'interest_rate',\n      headerName: copy.table_column_interest_rate,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Text color={theme.palette.text.primary} variant=\"body2\">\n          {!isNaN(params.value) ? `${Number(params.value).toFixed(2)}%` : '---'}\n        </Text>\n      ),\n      sortable: true,\n      hideSortIcons: isMobile,\n      type: 'number',\n      align: 'left',\n      headerAlign: 'left',\n      minWidth: 122,\n      flex: 0.6,\n    },\n    {\n      field: 'projected_payoff_date',\n      headerName: copy.table_column_payoff_date,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Text color={theme.palette.text.primary} variant=\"body2\">\n          {params.value ? formatDate(params.value, DATE_FORMATS_INTL.MONTH_SHORT_YEAR) : '---'}\n        </Text>\n      ),\n      sortable: true,\n      hideSortIcons: isMobile,\n      type: 'number',\n      align: 'left',\n      headerAlign: 'left',\n      minWidth: 122,\n      flex: 0.6,\n    },\n    {\n      field: 'monthly_payment',\n      headerName: copy.table_column_amount_due,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Text color={theme.palette.text.primary} variant=\"body2\">\n          {typeof params.value === 'number' ? formatCurrency(params.value, '0,0') : '---'}\n        </Text>\n      ),\n      sortable: true,\n      hideSortIcons: isMobile,\n      type: 'number',\n      align: 'left',\n      headerAlign: 'left',\n      minWidth: 122,\n      flex: 0.6,\n    },\n  ]\n\n  const mobileColumns: GridColDef[] = [\n    ...desktopColumns.slice(0, 3),\n    {\n      field: 'chevron',\n      headerClassName: 'chevron-header',\n      headerName: '',\n      renderCell: () => (\n        <Stack aria-label={commonCopy.see_details} role=\"button\">\n          <Icon name=\"chevron_right\" />\n        </Stack>\n      ),\n      sortable: false,\n      hideSortIcons: true,\n      type: 'custom',\n      align: 'right',\n      headerAlign: 'right',\n      width: 20,\n    },\n  ]\n\n  const rows = React.useMemo(() => {\n    return debts.map((debt, idx) => ({\n      ...debt,\n      id: idx,\n      priority: getPriorityValue(debt),\n    }))\n  }, [debts])\n\n  const handleRowHover = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ) => {\n    const target = event.target as HTMLElement\n    const rowEl = target.closest('[data-id]')\n    const debtIdx = rowEl?.getAttribute('data-id')\n    const hoveredDebt = debts[Number(debtIdx)]\n    onHoverRow?.(hoveredDebt?.guid ?? '')\n  }\n\n  const onMouseEnterRow = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    // Only use hover on non-mobile devices\n    if (!isMobile) {\n      handleRowHover(event)\n    }\n  }\n\n  const onRowInteraction = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ) => {\n    // For mobile devices, use touch/click to highlight row\n    if (isMobile) {\n      handleRowHover(event)\n    }\n  }\n\n  const getRowIdByGuid = (guid: string) => {\n    return rows.find((r) => r.guid === guid)?.id\n  }\n\n  return (\n    <Box\n      sx={{\n        height: 'auto',\n        width: '100%',\n        mt: '15px',\n        overflowX: 'auto',\n        overflowY: 'visible',\n        boxShadow: 'none',\n        ...sx,\n      }}\n    >\n      <DataGridPro\n        columns={isMobile ? mobileColumns : desktopColumns}\n        disableColumnFilter={true}\n        disableColumnMenu={true}\n        hideFooter={true}\n        initialState={{ sorting: { sortModel } }}\n        onRowClick={(params) => {\n          onClickRow()\n          onEvent(ANALYTICS_EVENTS.DEBTS_CLICK_TABLE_ROW, { account_guid: params.row.guid })\n        }}\n        onSortModelChange={(newModel) => {\n          setSortModel(newModel)\n          onEvent(ANALYTICS_EVENTS.DEBTS_CLICK_TABLE_SORT)\n        }}\n        rows={rows}\n        slotProps={{\n          baseIconButton: { color: 'secondary', sx: { ml: 8 } },\n          row: {\n            onMouseEnter: onMouseEnterRow,\n            onMouseLeave: () => !isMobile && onHoverRow?.(''),\n            onTouchStart: onRowInteraction,\n            onClick: isMobile ? onRowInteraction : undefined,\n          },\n        }}\n        sortModel={sortModel}\n        sortingOrder={['asc', 'desc']}\n        sx={{\n          '& .chevron-header': { display: 'none' },\n          [`& .MuiDataGrid-row[data-id=\"${getRowIdByGuid(hoveredDebtGuid)}\"]`]: {\n            backgroundColor: theme.palette.mode === 'light' ? '#f8f9fb' : '#1f2329',\n            filter: 'brightness(98%)',\n          },\n        }}\n      />\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/debts/components/PaydownDrawer.es.js

@@ -0,0 +1,19 @@
+import { useGlobalCopyStore as t } from "../../common/context/hooks.es.js";
+import d from "../../common/components/drawer/Drawer.es.js";
+import l from "./debtspaydown/PaydownContent.es.js";
+import { jsx as o } from "react/jsx-runtime";
+var w = ({ isOpen: a, onClose: e }) => {
+  const { debts: r } = t();
+  return /* @__PURE__ */ o(d, {
+    ariaLabelClose: r.paydown_drawer_close_aria,
+    isOpen: a,
+    onClose: e,
+    title: r.paydown_drawer_title,
+    children: /* @__PURE__ */ o(l, {})
+  });
+};
+export {
+  w as default
+};
+
+//# sourceMappingURL=PaydownDrawer.es.js.map

package/dist/debts/components/PaydownDrawer.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaydownDrawer.es.js","names":[],"sources":["../../../src/debts/components/PaydownDrawer.tsx"],"sourcesContent":["import { Drawer, useGlobalCopyStore } from '../../common'\nimport PaydownContent from './debtspaydown/PaydownContent'\n\ninterface PaydownDrawerProps {\n  isOpen: boolean\n  onClose: () => void\n}\n\nconst PaydownDrawer = ({ isOpen, onClose }: PaydownDrawerProps) => {\n  const { debts: copy } = useGlobalCopyStore()\n\n  return (\n    <Drawer\n      ariaLabelClose={copy.paydown_drawer_close_aria}\n      isOpen={isOpen}\n      onClose={onClose}\n      title={copy.paydown_drawer_title}\n    >\n      <PaydownContent />\n    </Drawer>\n  )\n}\n\nexport default PaydownDrawer\n"],"mappings":";;;;AAQA,IAAM,IAAA,CAAiB,EAAE,QAAA,GAAQ,SAAA,EAAA,MAAkC;AACjE,QAAM,EAAE,OAAO,EAAA,IAAS,EAAmB;AAE3C,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,gBAAgB,EAAK;AAAA,IACb,QAAA;AAAA,IACC,SAAA;AAAA,IACT,OAAO,EAAK;AAAA,cAEZ,gBAAA,EAAC,GAAD,CAAiB,CAAA;AAAA,EACX,CAAA;AAEZ"}

package/dist/debts/components/SnowballCard.es.js

@@ -0,0 +1,87 @@
+import { useGlobalCopyStore as x, useGoalStore as u } from "../../common/context/hooks.es.js";
+import { useScreenSize as y } from "../../common/hooks/useScreenSize.es.js";
+import { getPayoffProjection as _ } from "../utils/SnowballCard.es.js";
+import { useDebtsUiStore as v } from "../hooks/useDebtsUiStore.es.js";
+import w from "react";
+import { observer as S } from "mobx-react-lite";
+import { Text as r } from "@mxenabled/mxui";
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import { Card as g, Stack as n, useTheme as C } from "@mui/material";
+var P = ({ debts: l, onClickCta: c, sx: s }) => {
+  const t = C(), { isMobile: e } = y(), { debts: a } = x(), { selectedDebtPriority: d } = v(), { monthlyCashFlowProfile: p } = u(), { payoffDate: m, payoffSavings: b, payoffDuration: f } = w.useMemo(() => {
+    const h = p?.extra_payment ?? 0;
+    return _(l, d, h);
+  }, [
+    l,
+    d,
+    p
+  ]);
+  return /* @__PURE__ */ o(g, {
+    sx: {
+      boxShadow: t.shadows[2],
+      width: e ? "100%" : "186px",
+      minWidth: "186px",
+      ...s
+    },
+    children: /* @__PURE__ */ i(n, {
+      sx: {
+        gap: "12px",
+        p: "16px"
+      },
+      children: [
+        /* @__PURE__ */ i(n, {
+          gap: e ? "4px" : "0",
+          sx: {
+            borderBottom: "1px solid",
+            borderBottomColor: t.palette.grey[300],
+            pb: "8px"
+          },
+          children: [/* @__PURE__ */ o(r, {
+            variant: "caption",
+            children: a.snowball_card_date_description
+          }), /* @__PURE__ */ o(r, {
+            bold: !0,
+            color: t.palette.primary.main,
+            variant: "body2",
+            children: m
+          })]
+        }),
+        /* @__PURE__ */ i(n, {
+          gap: e ? "4px" : "0",
+          children: [/* @__PURE__ */ o(r, {
+            bold: !0,
+            variant: "body2",
+            children: b
+          }), /* @__PURE__ */ o(r, {
+            variant: "caption",
+            children: a.snowball_card_amount_description
+          })]
+        }),
+        /* @__PURE__ */ i(n, {
+          gap: e ? "4px" : "0",
+          children: [/* @__PURE__ */ o(r, {
+            bold: !0,
+            variant: "body2",
+            children: f
+          }), /* @__PURE__ */ o(r, {
+            variant: "caption",
+            children: a.snowball_card_duration_description
+          })]
+        }),
+        /* @__PURE__ */ o(r, {
+          bold: !0,
+          color: t.palette.primary.main,
+          onClick: c,
+          sx: { cursor: "pointer" },
+          variant: "body2",
+          children: a.snowball_card_cta
+        })
+      ]
+    })
+  });
+}, R = S(P);
+export {
+  R as default
+};
+
+//# sourceMappingURL=SnowballCard.es.js.map

package/dist/debts/components/SnowballCard.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnowballCard.es.js","names":[],"sources":["../../../src/debts/components/SnowballCard.tsx"],"sourcesContent":["import React, { MouseEventHandler } from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { Card, Stack, useTheme } from '@mui/material'\nimport { Text } from '@mxenabled/mxui'\n\nimport { useScreenSize, useGlobalCopyStore, useGoalStore } from '../../common'\nimport { getPayoffProjection } from '../utils/SnowballCard'\nimport { DebtChartData } from '../../core/utils/DebtUtils'\nimport { useDebtsUiStore } from '../hooks/useDebtsUiStore'\n\ninterface SnowballCardProps {\n  debts: DebtChartData[]\n  onClickCta: MouseEventHandler\n  sx?: any\n}\n\nconst SnowballCard = ({ debts, onClickCta, sx }: SnowballCardProps) => {\n  const theme = useTheme()\n  const { isMobile } = useScreenSize()\n  const { debts: copy } = useGlobalCopyStore()\n  const { selectedDebtPriority } = useDebtsUiStore()\n  const { monthlyCashFlowProfile } = useGoalStore()\n\n  const { payoffDate, payoffSavings, payoffDuration } = React.useMemo(() => {\n    const extraPaydown = monthlyCashFlowProfile?.extra_payment ?? 0\n    return getPayoffProjection(debts, selectedDebtPriority, extraPaydown)\n  }, [debts, selectedDebtPriority, monthlyCashFlowProfile])\n\n  return (\n    <Card\n      sx={{\n        boxShadow: theme.shadows[2],\n        width: isMobile ? '100%' : '186px',\n        minWidth: '186px',\n        ...sx,\n      }}\n    >\n      <Stack sx={{ gap: '12px', p: '16px' }}>\n        <Stack\n          gap={isMobile ? '4px' : '0'}\n          sx={{\n            borderBottom: '1px solid',\n            borderBottomColor: theme.palette.grey[300],\n            pb: '8px',\n          }}\n        >\n          <Text variant=\"caption\">{copy.snowball_card_date_description}</Text>\n          <Text bold={true} color={theme.palette.primary.main} variant=\"body2\">\n            {payoffDate}\n          </Text>\n        </Stack>\n        <Stack gap={isMobile ? '4px' : '0'}>\n          <Text bold={true} variant=\"body2\">\n            {payoffSavings}\n          </Text>\n          <Text variant=\"caption\">{copy.snowball_card_amount_description}</Text>\n        </Stack>\n        <Stack gap={isMobile ? '4px' : '0'}>\n          <Text bold={true} variant=\"body2\">\n            {payoffDuration}\n          </Text>\n          <Text variant=\"caption\">{copy.snowball_card_duration_description}</Text>\n        </Stack>\n        <Text\n          bold={true}\n          color={theme.palette.primary.main}\n          onClick={onClickCta}\n          sx={{ cursor: 'pointer' }}\n          variant=\"body2\"\n        >\n          {copy.snowball_card_cta}\n        </Text>\n      </Stack>\n    </Card>\n  )\n}\n\nexport default observer(SnowballCard)\n"],"mappings":";;;;;;;;;AAgBA,IAAM,IAAA,CAAgB,EAAE,OAAA,GAAO,YAAA,GAAY,IAAA,EAAA,MAA4B;AACrE,QAAM,IAAQ,EAAS,GACjB,EAAE,UAAA,EAAA,IAAa,EAAc,GAC7B,EAAE,OAAO,EAAA,IAAS,EAAmB,GACrC,EAAE,sBAAA,EAAA,IAAyB,EAAgB,GAC3C,EAAE,wBAAA,EAAA,IAA2B,EAAa,GAE1C,EAAE,YAAA,GAAY,eAAA,GAAe,gBAAA,EAAA,IAAmB,EAAM,QAAA,MAAc;AACxE,UAAM,IAAe,GAAwB,iBAAiB;AAC9D,WAAO,EAAoB,GAAO,GAAsB,CAAY;AAAA,EACtE,GAAG;AAAA,IAAC;AAAA,IAAO;AAAA,IAAsB;AAAA,EAAsB,CAAC;AAExD,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,WAAW,EAAM,QAAQ,CAAA;AAAA,MACzB,OAAO,IAAW,SAAS;AAAA,MAC3B,UAAU;AAAA,MACV,GAAG;AAAA,IACL;AAAA,cAEA,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,KAAK;AAAA,QAAQ,GAAG;AAAA,MAAO;AAAA,gBAApC;AAAA,QACE,gBAAA,EAAC,GAAD;AAAA,UACE,KAAK,IAAW,QAAQ;AAAA,UACxB,IAAI;AAAA,YACF,cAAc;AAAA,YACd,mBAAmB,EAAM,QAAQ,KAAK,GAAA;AAAA,YACtC,IAAI;AAAA,UACN;AAAA,oBANF,CAQE,gBAAA,EAAC,GAAD;AAAA,YAAM,SAAQ;AAAA,sBAAW,EAAK;AAAA,UAAqC,CAAA,GACnE,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAM;AAAA,YAAM,OAAO,EAAM,QAAQ,QAAQ;AAAA,YAAM,SAAQ;AAAA,sBAC1D;AAAA,UACG,CAAA,CACD;AAAA;QACP,gBAAA,EAAC,GAAD;AAAA,UAAO,KAAK,IAAW,QAAQ;AAAA,oBAA/B,CACE,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAM;AAAA,YAAM,SAAQ;AAAA,sBACvB;AAAA,UACG,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,YAAM,SAAQ;AAAA,sBAAW,EAAK;AAAA,UAAuC,CAAA,CAChE;AAAA;QACP,gBAAA,EAAC,GAAD;AAAA,UAAO,KAAK,IAAW,QAAQ;AAAA,oBAA/B,CACE,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAM;AAAA,YAAM,SAAQ;AAAA,sBACvB;AAAA,UACG,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,YAAM,SAAQ;AAAA,sBAAW,EAAK;AAAA,UAAyC,CAAA,CAClE;AAAA;QACP,gBAAA,EAAC,GAAD;AAAA,UACE,MAAM;AAAA,UACN,OAAO,EAAM,QAAQ,QAAQ;AAAA,UAC7B,SAAS;AAAA,UACT,IAAI,EAAE,QAAQ,UAAU;AAAA,UACxB,SAAQ;AAAA,oBAEP,EAAK;AAAA,QACF,CAAA;AAAA,MACD;AAAA;EACH,CAAA;AAEV,GAEA,IAAe,EAAS,CAAY"}