@mx-cartographer/experiences 4.0.14-alpha.JB1 → 4.0.14-alpha.JB2

package/src/dashboard/Greeting.tsx

@@ -1,75 +0,0 @@
-import { observer } from 'mobx-react-lite'
-import Stack from '@mui/material/Stack'
-import Paper from '@mui/material/Paper'
-
-import { H1, Text } from '@kyper/mui'
-
-import {
-  AccountFilter,
-  useAccountStore,
-  useGlobalCopyStore,
-  useGlobalUiStore,
-  useScreenSize,
-} from '../common'
-
-const Greeting = () => {
-  const { accounts } = useAccountStore()
-  const { selectedAccountGuids, setSelectedAccountGuids } = useGlobalUiStore()
-  const { isMobile } = useScreenSize()
-  const { common: commonCopy } = useGlobalCopyStore()
-
-  const accountFilterCopy = {
-    accountFilterOptionsCopy: {
-      accountTypeAccounts: commonCopy.account_filter.account_type_accounts,
-      cancelButton: commonCopy.cancel_button,
-      filterButton: commonCopy.filter_button,
-      filterButtonAria: commonCopy.account_filter.filter_button_generic_aria,
-      selectAllAccounts: commonCopy.account_filter.select_all_accounts,
-      toggleAccountTypeAccounts: commonCopy.account_filter.toggle_account_type_accounts,
-      unselectAllAccounts: commonCopy.account_filter.unselect_all_accounts,
-      zeroStateButton: commonCopy.account_filter.zero_state_button,
-      zeroStateDescription: commonCopy.account_filter.zero_state_description,
-      zeroStateTitle: commonCopy.account_filter.zero_state_title,
-    },
-    title: commonCopy.account_filter.title,
-  }
-
-  const getGreeting = () => {
-    const now = new Date()
-    const hour = now.getHours()
-
-    if (hour > 1 && hour < 12) {
-      return commonCopy.good_morning
-    } else if (hour >= 12 && hour < 18) {
-      return commonCopy.good_afternoon
-    } else {
-      return commonCopy.good_evening
-    }
-  }
-
-  return (
-    <Paper sx={{ mb: isMobile ? 24 : 0, p: 24 }}>
-      <Stack alignItems="center" flexDirection="row" justifyContent="space-between">
-        <Stack>
-          <H1>{getGreeting()}</H1>
-          <Text color="text.secondary" sx={{ fontSize: 15 }}>
-            {commonCopy.heres_your_spending_overview}
-          </Text>
-        </Stack>
-        <AccountFilter
-          accounts={accounts}
-          copy={accountFilterCopy}
-          onFilterClick={(guids) => {
-            setSelectedAccountGuids(guids)
-          }}
-          selectedAccountGuids={selectedAccountGuids}
-          showAccountNumbers={false}
-          sx={{ '& .mx-cmn-account-filter-title': { fontSize: 15 }, mx: 4 }}
-          variant="text"
-        />
-      </Stack>
-    </Paper>
-  )
-}
-
-export default observer(Greeting)

package/src/dashboard/__tests__/Dashboard.test.tsx

@@ -1,84 +0,0 @@
-import React, { act } from 'react'
-import { ThemeProvider } from '@mui/material/styles'
-
-import { createMXTheme } from '@kyper/mui'
-
-import { render, screen } from '@testing-library/react'
-import { beforeEach, describe, vi } from 'vitest'
-
-import '@testing-library/jest-dom'
-
-import { AccountsMiniWidget } from '../../accounts'
-import { GlobalDataProvider, GlobalStore } from '../../common'
-import { SpendingMiniWidget } from '../../spending'
-import { DashboardLocation } from '../constants/Dashboard'
-
-import Dashboard from '../Dashboard'
-
-const globalStore = new GlobalStore()
-
-describe('Testing the Dashboard', () => {
-  let docBody
-
-  beforeEach(() => {
-    docBody = (
-      <GlobalDataProvider globalStore={globalStore} onEvent={() => {}} onPageView={() => {}}>
-        <ThemeProvider theme={createMXTheme('light')}>
-          <Dashboard isLoading={false} widgets={[]} />
-        </ThemeProvider>
-      </GlobalDataProvider>
-    )
-    globalStore.initialize('/', '').finally()
-    vi.useFakeTimers()
-  })
-
-  it('should load the dashboard with no widgets', async () => {
-    await act(async () => render(docBody))
-    expect(screen.queryByText("Here's your monthly financial overview.")).toBeInTheDocument()
-  })
-
-  it('should load the dashboard with 2 widgets', async () => {
-    const widgets = [
-      {
-        index: 0,
-        location: DashboardLocation.Main,
-        component: <AccountsMiniWidget />,
-      },
-      {
-        index: 1,
-        location: DashboardLocation.RightSide,
-        component: <SpendingMiniWidget />,
-      },
-    ]
-    await act(async () =>
-      render(
-        <GlobalDataProvider globalStore={globalStore} onEvent={() => {}} onPageView={() => {}}>
-          <ThemeProvider theme={createMXTheme('light')}>
-            <Dashboard isLoading={false} widgets={widgets} />
-          </ThemeProvider>
-        </GlobalDataProvider>,
-      ),
-    )
-
-    expect(screen.queryByText('Accounts')).toBeInTheDocument()
-    expect(screen.queryByText('Spend vs Income')).toBeInTheDocument()
-  })
-
-  it('shows good morning from 1am to 11:59am', () => {
-    vi.setSystemTime(new Date().setHours(2, 0, 0, 0))
-
-    expect(render(docBody).queryByText('Good morning!')).toBeInTheDocument()
-  })
-
-  it('shows good afternoon from noon to 6pm', () => {
-    vi.setSystemTime(new Date().setHours(15, 0, 0, 0))
-
-    expect(render(docBody).queryByText('Good afternoon!')).toBeInTheDocument()
-  })
-
-  it('shows good evening from 6pm to 1 am', () => {
-    vi.setSystemTime(new Date().setHours(22, 0, 0, 0))
-
-    expect(render(docBody).queryByText('Good evening!')).toBeInTheDocument()
-  })
-})

package/src/dashboard/constants/Dashboard.ts

@@ -1,4 +0,0 @@
-export enum DashboardLocation {
-  Main = 0,
-  RightSide = 1,
-}

package/src/dashboard/index.ts

@@ -1,3 +0,0 @@
-export { default as Dashboard } from './Dashboard'
-export { DashboardLocation } from './constants/Dashboard'
-export type { DashboardWidget } from './types/DashboardTypes'

package/src/dashboard/types/DashboardTypes.ts

@@ -1,9 +0,0 @@
-import React from 'react'
-
-import { DashboardLocation } from '../constants/Dashboard'
-
-export type DashboardWidget = {
-  index: number
-  location: DashboardLocation
-  component: React.ReactNode
-}

package/src/debts/DebtsWidget.tsx

@@ -1,90 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-import Stack from '@mui/material/Stack'
-
-import {
-  Loader,
-  useAccountStore,
-  useDebtStore,
-  useGlobalUiStore,
-  useGoalStore,
-  useScreenSize,
-  WidgetContainer,
-  WidgetProps,
-} from '../common'
-
-import SnowballCard from './components/SnowballCard'
-import SnowballDrawer from './components/SnowballDrawer'
-import { DebtsChart } from './components/DebtsChart'
-import { DebtsTable } from './components/DebtsTable'
-import { transformDebtsChartData } from './utils/DebtsWidget'
-
-const copy = {
-  title: 'Debts',
-}
-
-const DebtsWidget: React.FC<WidgetProps> = ({ onBackClick, sx }) => {
-  const [isWidgetInitialized, setIsWidgetInitialized] = React.useState(false)
-  const [hoveredDebtGuid, setHoveredDebtGuid] = React.useState('')
-  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false)
-
-  const { isInitialized, setSelectedAccounts } = useGlobalUiStore()
-  const { isDesktop, isMobile } = useScreenSize()
-  const { loadGoals } = useGoalStore()
-  const { accounts } = useAccountStore()
-  const { debts } = useDebtStore()
-
-  React.useEffect(() => {
-    if (isInitialized) {
-      loadGoals()
-      setSelectedAccounts(accounts)
-      setIsWidgetInitialized(true)
-    }
-  }, [isInitialized])
-
-  const debtsChartData = React.useMemo(() => transformDebtsChartData(debts), [debts])
-  const debtsTableData = React.useMemo(() => debts, [debts])
-
-  const onHoverDebt = (guid: string) => setHoveredDebtGuid(guid)
-  const onAccountFilterClick = () => {}
-
-  if (!isInitialized || !isWidgetInitialized) {
-    return <Loader />
-  }
-
-  return (
-    <WidgetContainer
-      accountOptions={accounts}
-      onAccountsFilterClick={onAccountFilterClick}
-      onBackClick={onBackClick}
-      sx={sx}
-      title={copy.title}
-    >
-      <Stack sx={{ px: isDesktop ? '48px' : '24px' }}>
-        <Stack
-          alignItems={isMobile ? 'flex-start' : 'flex-end'}
-          flexDirection={isMobile ? 'column' : 'row'}
-        >
-          <DebtsChart
-            debts={debtsChartData}
-            hoveredDebtGuid={hoveredDebtGuid}
-            onHoverArea={onHoverDebt}
-            sx={{ mr: isMobile ? '4px' : '-48px' }}
-          />
-          <SnowballCard
-            onClickCta={() => setIsDrawerOpen(true)}
-            sx={{ mb: isMobile ? '0px' : '64px' }}
-          />
-        </Stack>
-        <DebtsTable
-          debts={debtsTableData}
-          hoveredDebtGuid={hoveredDebtGuid}
-          onHoverRow={onHoverDebt}
-        />
-      </Stack>
-      <SnowballDrawer isOpen={isDrawerOpen} onClose={() => setIsDrawerOpen(false)} />
-    </WidgetContainer>
-  )
-}
-
-export default observer(DebtsWidget)

package/src/debts/components/DebtsChart.tsx

@@ -1,190 +0,0 @@
-import React from 'react'
-import { LineSeriesType, LineChart, HighlightItemData } from '@mui/x-charts'
-import { useTheme } from '@mui/material/styles'
-
-import { formatCurrency, formatDate, DATE_FORMATS_INTL } from '../../common'
-
-const BASE_LINE_COLOR = '#FF7B08'
-
-function adjustBrightness(color: string, factor: number): string {
-  const [r, g, b] = color
-    .replace(/^#/, '')
-    .match(/.{1,2}/g)!
-    .map((hex) => parseInt(hex, 16))
-
-  const newColor = [
-    Math.max(0, Math.min(255, Math.round(r * factor))),
-    Math.max(0, Math.min(255, Math.round(g * factor))),
-    Math.max(0, Math.min(255, Math.round(b * factor))),
-  ]
-
-  return `rgb(${newColor[0]}, ${newColor[1]}, ${newColor[2]})`
-}
-
-type DataPoint = { x: Date; y: number }
-type Dataset = DataPoint[]
-
-interface DebtData {
-  guid: string | undefined
-  name: string
-  dataset: Dataset
-}
-
-interface DebtsChartProps {
-  sx?: any
-  height?: number
-  width?: number
-  debts: DebtData[]
-  hoveredDebtGuid: string
-  onHoverArea: (debtGuid: string) => void
-}
-
-interface DebtsChartSeries extends LineSeriesType {
-  guid?: string | null
-}
-
-export const DebtsChart: React.FC<DebtsChartProps> = ({
-  sx,
-  height = 500,
-  width,
-  debts,
-  hoveredDebtGuid,
-  onHoverArea,
-}) => {
-  // TODO: Ask design team about color selection rules
-  const theme = useTheme()
-
-  // Generate sorted array of unique dates
-  const uniqueXValues = [
-    ...new Set(debts.flatMap((debt) => debt.dataset.map((point) => new Date(point.x).getTime()))),
-  ]
-    .sort((a, b) => a - b)
-    .map((timestamp) => new Date(timestamp))
-
-  // Normalize datasets with missing dates
-  const normalizedDatasets = debts.map((debt) => {
-    const datasetMap = new Map(debt.dataset.map((point) => [new Date(point.x).getTime(), point.y]))
-
-    let lastY = datasetMap.get(uniqueXValues[0].getTime()) ?? 0
-    const normalizedDataset = uniqueXValues.map((x) => {
-      const y = datasetMap.get(x.getTime()) ?? lastY // Use last known value for missing points
-      lastY = y
-      return { x, y }
-    })
-
-    return { ...debt, dataset: normalizedDataset }
-  })
-
-  const initialTotalDebt = normalizedDatasets.reduce(
-    (sum, debt) => sum + (debt.dataset[0]?.y ?? 0),
-    0,
-  )
-
-  const payoffLine = uniqueXValues.map((x, index) => {
-    const linearRate = index / (uniqueXValues.length - 1)
-    const y = initialTotalDebt * (1 - linearRate)
-    return { x, y }
-  })
-
-  const yMax = Math.ceil(initialTotalDebt / 100) * 100
-  const xData = uniqueXValues
-
-  const series: DebtsChartSeries[] = normalizedDatasets.map((debt, index) => {
-    const brightnessFactor = 1 - (index / normalizedDatasets.length) * 0.5
-    const seriesColor = adjustBrightness(BASE_LINE_COLOR, brightnessFactor)
-
-    return {
-      id: `debt-${index}`,
-      guid: debt.guid,
-      label: debt.name,
-      data: debt.dataset.map((point) => point.y),
-      color: seriesColor,
-      curve: 'linear',
-      type: 'line',
-      area: true,
-      stack: 'total',
-      showMark: false,
-    }
-  })
-
-  series.push({
-    id: 'payoff-line',
-    label: 'Payoff Line',
-    data: payoffLine.map((point) => point.y),
-    color: theme.palette.grey[700],
-    curve: 'linear',
-    type: 'line',
-    stack: undefined,
-    showMark: false,
-    disableHighlight: true,
-  })
-
-  const getIndexByGuid = (guid: string) => {
-    return series.findIndex((s) => s?.guid === guid)
-  }
-
-  const onHighlightChange = (line: HighlightItemData | null) => {
-    const highlightedGuid = series.find((s) => s.id === line?.seriesId)?.guid
-    onHoverArea(highlightedGuid ?? '')
-  }
-
-  return (
-    <LineChart
-      axisHighlight={{ x: 'none' }}
-      disableLineItemHighlight={true}
-      height={height}
-      onHighlightChange={onHighlightChange}
-      series={series}
-      skipAnimation={true}
-      slotProps={{
-        legend: {
-          hidden: true,
-        },
-      }}
-      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-${getIndexByGuid(hoveredDebtGuid)}`]: {
-          opacity: 1,
-        },
-        [`& .MuiAreaElement-series-debt-${getIndexByGuid(hoveredDebtGuid)}`]: {
-          opacity: 1,
-        },
-        ...sx,
-      }}
-      tooltip={{ trigger: 'none' }}
-      width={width}
-      xAxis={[
-        {
-          data: xData,
-          scaleType: 'time',
-          min: uniqueXValues[0],
-          disableTicks: true,
-          valueFormatter: (value: Date) => formatDate(value, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),
-        },
-      ]}
-      yAxis={[
-        {
-          min: 0,
-          max: yMax,
-          disableTicks: true,
-          valueFormatter: (value: number) => formatCurrency(value, '0,0'),
-        },
-      ]}
-    />
-  )
-}

package/src/debts/components/DebtsTable.tsx

@@ -1,209 +0,0 @@
-import React from 'react'
-import Box from '@mui/material/Box'
-import { fromUnixTime } from 'date-fns/fromUnixTime'
-import { DataGridPro, GridColDef, GridSortModel } from '@mui/x-data-grid-pro'
-
-import {
-  ANALYTICS_EVENTS,
-  DATE_FORMATS_INTL,
-  Debt,
-  formatCurrency,
-  formatDate,
-  useEvent,
-} from '../../common'
-
-import { HeaderCell } from '../../trends/components/trendstable/HeaderCell'
-import { PriorityCell } from './debtstable/PriorityCell'
-import { AccountCell } from './debtstable/AccountCell'
-import { useTheme } from '@mui/material'
-
-function getPriority(debt: Debt) {
-  if (debt.position === undefined) return '!'
-  if (debt.is_paid_off) return '✓'
-  return debt.position
-}
-
-type Priority = number | '!' | '✓'
-function priorityComparator(a: Priority, b: Priority) {
-  const getWeight = (value: Priority) => {
-    if (typeof value === 'number') return value // Numbers sorted naturally
-    if (value === '!') return Infinity - 1 // '!' comes after numbers
-    if (value === '✓') return Infinity // '✓' comes last
-    throw new Error('Unsupported value')
-  }
-  return getWeight(a) - getWeight(b) // Compare based on weights
-}
-
-interface DebtsTableProps {
-  sx?: any
-  debts: Debt[]
-  hoveredDebtGuid: string
-  onHoverRow?: (debtGuid: string) => void
-  onClickRow?: (debtGuid: string) => void
-}
-
-export const DebtsTable: React.FC<DebtsTableProps> = ({
-  sx = {},
-  debts,
-  hoveredDebtGuid,
-  onHoverRow,
-  onClickRow,
-}) => {
-  const theme = useTheme()
-  const { onEvent } = useEvent()
-  const [sortModel, setSortModel] = React.useState<GridSortModel>([
-    { field: 'priority', sort: 'asc' },
-  ])
-
-  const columns: GridColDef[] = [
-    {
-      field: 'priority',
-      headerName: 'Priority',
-      renderHeader: HeaderCell,
-      renderCell: PriorityCell,
-      sortComparator: priorityComparator,
-      sortable: true,
-      hideSortIcons: true,
-      type: 'custom',
-      align: 'left',
-      headerAlign: 'left',
-      minWidth: 72,
-      flex: 0.4,
-    },
-    {
-      field: 'account',
-      headerName: 'Account',
-      renderHeader: HeaderCell,
-      renderCell: AccountCell,
-      sortable: false,
-      type: 'custom',
-      align: 'left',
-      headerAlign: 'left',
-      minWidth: 225,
-      flex: 1,
-    },
-    {
-      field: 'balance',
-      headerName: 'Balance',
-      renderHeader: HeaderCell,
-      valueFormatter: (val) => formatCurrency(val, '0,0'),
-      sortable: true,
-      hideSortIcons: true,
-      type: 'number',
-      align: 'left',
-      headerAlign: 'left',
-      minWidth: 122,
-      flex: 0.6,
-    },
-    {
-      field: 'apr',
-      headerName: 'APR',
-      renderHeader: HeaderCell,
-      valueFormatter: (v) => `${Number(v * 100).toFixed(2)}%`,
-      sortable: true,
-      hideSortIcons: true,
-      type: 'number',
-      align: 'left',
-      headerAlign: 'left',
-      minWidth: 122,
-      flex: 0.6,
-    },
-    {
-      field: 'payoffDate',
-      headerName: 'Final Payment',
-      renderHeader: HeaderCell,
-      valueFormatter: (v) =>
-        v ? formatDate(fromUnixTime(v), DATE_FORMATS_INTL.MONTH_SHORT_YEAR) : '',
-      sortable: true,
-      hideSortIcons: true,
-      type: 'number',
-      align: 'left',
-      headerAlign: 'left',
-      minWidth: 122,
-      flex: 0.6,
-    },
-    {
-      field: 'payment',
-      headerName: 'Amount Due',
-      renderHeader: HeaderCell,
-      valueFormatter: (val) => formatCurrency(val, '0,0'),
-      sortable: true,
-      hideSortIcons: true,
-      type: 'number',
-      align: 'left',
-      headerAlign: 'left',
-      minWidth: 122,
-      flex: 0.6,
-    },
-  ]
-
-  const rows = React.useMemo(() => {
-    return debts.map((d, idx) => ({
-      id: idx,
-      guid: d.guid,
-      priority: getPriority(d),
-      account: d.account,
-      balance: d.balance,
-      apr: d.interest_rate,
-      payoffDate: d.projected_payoff_date,
-      payment: d.monthly_payment,
-    }))
-  }, [debts])
-
-  const onMouseEnterRow = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    const target = event.target as HTMLElement
-    const rowEl = target.closest('[data-id]')
-    const debtIdx = rowEl?.getAttribute('data-id')
-    const hoveredDebt = debts[Number(debtIdx)]
-    onHoverRow?.(hoveredDebt?.guid ?? '')
-  }
-
-  const getRowIdByGuid = (guid: string) => {
-    return rows.find((r) => r.guid === guid)?.id
-  }
-
-  return (
-    <Box
-      sx={{
-        height: '100dvh',
-        width: '100%',
-        mt: '15px',
-        overflowX: 'auto',
-        boxShadow: 'none',
-        ...sx,
-      }}
-    >
-      <DataGridPro
-        columns={columns}
-        disableColumnFilter={true}
-        disableColumnMenu={true}
-        hideFooter={true}
-        initialState={{ sorting: { sortModel } }}
-        onRowClick={(r) => {
-          onClickRow?.(r.row.category)
-          onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_TABLE_ROW)
-        }}
-        onSortModelChange={(newModel) => {
-          setSortModel(newModel)
-          onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_TABLE_SORT)
-        }}
-        rows={rows}
-        slotProps={{
-          baseIconButton: { color: 'secondary', sx: { ml: 8 } },
-          row: {
-            onMouseEnter: onMouseEnterRow,
-            onMouseLeave: () => onHoverRow?.(''),
-          },
-        }}
-        sortModel={sortModel}
-        sortingOrder={['asc', 'desc']}
-        sx={{
-          [`& .MuiDataGrid-row[data-id="${getRowIdByGuid(hoveredDebtGuid)}"]`]: {
-            backgroundColor: theme.palette.mode === 'light' ? '#f8f9fb' : '#1f2329',
-            filter: 'brightness(98%)',
-          },
-        }}
-      />
-    </Box>
-  )
-}