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

package/src/dashboard/Greeting.tsx

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,84 @@
+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

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

package/src/dashboard/index.ts

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

package/src/dashboard/types/DashboardTypes.ts

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

package/src/debts/DebtsWidget.tsx

@@ -0,0 +1,90 @@
+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

@@ -0,0 +1,190 @@
+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

@@ -0,0 +1,209 @@
+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>
+  )
+}