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

package/src/spending/SpendingWidget.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { startOfMonth } from 'date-fns/startOfMonth'
+import { startOfToday } from 'date-fns/startOfToday'
+import { endOfMonth } from 'date-fns/endOfMonth'
+
+import Box from '@mui/material/Box'
+
+import type { DateRange } from '@mui/x-date-pickers-pro'
+
+import {
+  Loader,
+  useAccountStore,
+  useGlobalUiStore,
+  WidgetContainer,
+  useEvent,
+  ANALYTICS_EVENTS,
+  useGlobalCopyStore,
+} from '../common'
+
+import type { WidgetProps } from '../common'
+
+import Spending from './components/Spending'
+
+interface RSpendingWidgetProps extends WidgetProps {
+  onBackClick?: () => void
+}
+
+const SpendingWidget: React.FC<RSpendingWidgetProps> = ({ onBackClick, sx = {} }) => {
+  const { accounts } = useAccountStore()
+  const { spending: spendingCopy } = useGlobalCopyStore()
+  const { isInitialized, setDisplayedDate, setSelectedAccounts } = useGlobalUiStore()
+  const { onEvent } = useEvent()
+
+  const [isWidgetInitialized, setIsWidgetInitialized] = React.useState(false)
+
+  React.useEffect(() => {
+    setSelectedAccounts(accounts)
+  }, [accounts])
+
+  React.useEffect(() => {
+    setDisplayedDate(startOfMonth(startOfToday()), endOfMonth(startOfToday()))
+    setIsWidgetInitialized(true)
+    onEvent(ANALYTICS_EVENTS.SPENDING_VIEW)
+  }, [])
+
+  const handleDateChanged = (range: DateRange<Date>) => {
+    setDisplayedDate(range[0] as Date, range[1] as Date)
+  }
+
+  if (!isInitialized || !isWidgetInitialized) {
+    return <Loader />
+  }
+
+  return (
+    <WidgetContainer
+      accountOptions={accounts}
+      calendarActions={{ onRangeChanged: handleDateChanged }}
+      onAccountsFilterClick={() => onEvent(ANALYTICS_EVENTS.SPENDING_CLICK_FILTER)}
+      onBackClick={onBackClick}
+      sx={sx}
+      title={spendingCopy.title}
+    >
+      <Box height="calc(100dvh - 150px)" overflow="scroll" width="100%">
+        <Spending />
+      </Box>
+    </WidgetContainer>
+  )
+}
+
+export default observer(SpendingWidget)

package/src/spending/__tests__/MiniSpendingChart.test.tsx

@@ -0,0 +1,43 @@
+import { beforeEach, describe } from 'vitest'
+import { act, render, screen } from '@testing-library/react'
+
+import MiniSpendingChart from '../components/MiniSpendingChart'
+import { ThemeProvider } from '@mui/material/styles'
+import { createMXTheme } from '@kyper/mui'
+import { GlobalDataProvider, GlobalStore } from '../../common'
+import { startOfMonth } from 'date-fns/startOfMonth'
+import { endOfMonth } from 'date-fns/endOfMonth'
+import '@testing-library/jest-dom'
+
+const globalStore = new GlobalStore()
+
+describe('Testing the MiniSpendingChart', () => {
+  beforeEach(async () => {
+    await globalStore.initialize('/', '')
+  })
+
+  it('should display spending categories on the chart', async () => {
+    await globalStore.categoryStore.loadDateRangeCategoryTotals(
+      globalStore.accountStore.accounts,
+      startOfMonth(new Date()),
+      endOfMonth(new Date()),
+    )
+
+    await act(async () =>
+      render(
+        <GlobalDataProvider globalStore={globalStore} onEvent={() => {}} onPageView={() => {}}>
+          <ThemeProvider theme={createMXTheme('light')}>
+            <MiniSpendingChart />
+          </ThemeProvider>
+        </GlobalDataProvider>,
+      ),
+    )
+
+    const tabs = screen.getAllByRole('tab')
+    expect(tabs.length).toEqual(2)
+    expect(tabs[0]).toHaveTextContent('Spending')
+    expect(tabs[1]).toHaveTextContent('Income')
+
+    // screen.debug()
+  })
+})

package/src/spending/__tests__/SpendingData.test.ts

@@ -0,0 +1,38 @@
+import { describe } from 'vitest'
+
+import categoryData from '../../../mock/data/Categories.json'
+
+import { getIncomeData, getSpendingData } from '../utils/SpendingData'
+import { CategoryGuids } from '../../common'
+
+import { SpendingTestData as testData } from '../../../mock/unittestdata/SpendingTestData'
+
+const categories = categoryData.map((cat) => ({
+  guid: cat.guid,
+  income: cat.income,
+  is_default: cat.is_default,
+  is_income: cat.is_income,
+  metadata: cat.metadata ?? undefined,
+  name: cat.name,
+  parent_guid: cat.parent_guid ?? undefined,
+  revision: cat.revision ?? undefined,
+  user_guid: cat.user_guid ?? undefined,
+}))
+
+describe('Testing the SpendingData util', () => {
+  it('should return spending data without income or transfers', () => {
+    const spending = getSpendingData(categories, testData.monthlyTotals)
+
+    expect(spending.totalAmount).toEqual(testData.spendingTotal)
+    expect(
+      spending.categoryData.find((cd) => cd.guid === CategoryGuids.FOOD_AND_DINING),
+    ).toBeTruthy()
+    expect(spending.categoryData.find((cd) => cd.guid === CategoryGuids.INCOME)).toBeFalsy()
+  })
+
+  it('should return income data by subcategory', () => {
+    const income = getIncomeData(categories, testData.monthlyTotals, testData.colors)
+
+    expect(income.totalAmount).toEqual(testData.incomeTotal)
+  })
+})

package/src/spending/__tests__/SpendingMiniWidget.test.tsx

@@ -0,0 +1,49 @@
+import { beforeEach } from 'vitest'
+import { act, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { startOfMonth } from 'date-fns/startOfMonth'
+import { endOfMonth } from 'date-fns/endOfMonth'
+
+import { ThemeProvider } from '@mui/material'
+
+import { createMXTheme } from '@kyper/mui'
+
+import { formatCurrency, GlobalDataProvider, GlobalStore } from '../../common'
+import SpendingMiniWidget from '../SpendingMiniWidget'
+
+import { SpendingTestData as testData } from '../../../mock/unittestdata/SpendingTestData'
+
+const globalStore = new GlobalStore()
+
+describe('Testing the Spending Mini Widget', () => {
+  beforeEach(() => {
+    globalStore.initialize('/', '').finally()
+    globalStore.categoryStore.loadDateRangeCategoryTotals(
+      globalStore.accountStore.accounts,
+      startOfMonth(new Date()),
+      endOfMonth(new Date()),
+    )
+  })
+
+  it('should display the mini spending widget', async () => {
+    await act(async () =>
+      render(
+        <GlobalDataProvider globalStore={globalStore} onEvent={() => {}} onPageView={() => {}}>
+          <ThemeProvider theme={createMXTheme('light')}>
+            <SpendingMiniWidget />
+          </ThemeProvider>
+        </GlobalDataProvider>,
+      ),
+    )
+
+    const tabs = screen.getAllByRole('tab')
+    expect(tabs.length).toEqual(2)
+    expect(tabs[0]).toHaveTextContent('Spending')
+    expect(tabs[0]).toHaveTextContent(formatCurrency(testData.spendingTotal, '0,0'))
+    expect(tabs[1]).toHaveTextContent('Income')
+    expect(tabs[1]).toHaveTextContent(formatCurrency(testData.incomeTotal, '0,0'))
+
+    // screen.debug()
+  })
+})

package/src/spending/__tests__/SpendingWidget.test.tsx

@@ -0,0 +1,49 @@
+import { beforeEach } from 'vitest'
+import { act, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { startOfMonth } from 'date-fns/startOfMonth'
+import { endOfMonth } from 'date-fns/endOfMonth'
+
+import { ThemeProvider } from '@mui/material'
+
+import { createMXTheme } from '@kyper/mui'
+
+import { formatCurrency, GlobalDataProvider, GlobalStore } from '../../common'
+import SpendingWidget from '../SpendingWidget'
+
+import { SpendingTestData as testData } from '../../../mock/unittestdata/SpendingTestData'
+
+const globalStore = new GlobalStore()
+
+describe('Testing the Spending Widget', () => {
+  beforeEach(() => {
+    globalStore.initialize('/', '').finally()
+    globalStore.categoryStore.loadDateRangeCategoryTotals(
+      globalStore.accountStore.accounts,
+      startOfMonth(new Date()),
+      endOfMonth(new Date()),
+    )
+  })
+
+  it('should display the spending widget', async () => {
+    await act(async () =>
+      render(
+        <GlobalDataProvider globalStore={globalStore} onEvent={() => {}} onPageView={() => {}}>
+          <ThemeProvider theme={createMXTheme('light')}>
+            <SpendingWidget />
+          </ThemeProvider>
+        </GlobalDataProvider>,
+      ),
+    )
+
+    const tabs = screen.getAllByRole('tab')
+    expect(tabs.length).toEqual(2)
+    expect(tabs[0]).toHaveTextContent('Spending')
+    expect(tabs[0]).toHaveTextContent(formatCurrency(testData.spendingTotal, '0,0'))
+    expect(tabs[1]).toHaveTextContent('Income')
+    expect(tabs[1]).toHaveTextContent(formatCurrency(testData.incomeTotal, '0,0'))
+
+    // screen.debug()
+  })
+})

package/src/spending/components/MiniSpendingChart.tsx

@@ -0,0 +1,125 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { startOfMonth } from 'date-fns/startOfMonth'
+import { endOfMonth } from 'date-fns/endOfMonth'
+
+import Box from '@mui/material/Box'
+import Stack from '@mui/material/Stack'
+import Tab from '@mui/material/Tab'
+import Tabs from '@mui/material/Tabs'
+import useTheme from '@mui/material/styles/useTheme'
+
+import { useCategoryStore, useGlobalCopyStore, useGlobalUiStore } from '../../common'
+import { getIncomeData, getSpendingData } from '../utils/SpendingData'
+
+import SpendingTabLabel from './SpendingTabLabel'
+import SpendingDonut from './SpendingDonut'
+import SpendingLegend from './SpendingLegend'
+
+const MiniSpendingChart = () => {
+  const theme = useTheme()
+  const { spending: spendingCopy } = useGlobalCopyStore()
+  const { selectedAccounts } = useGlobalUiStore()
+
+  const incomeColors = React.useMemo(
+    () => [
+      theme.palette.chartMono.chartMono5,
+      theme.palette.chartMono.chartMono4,
+      theme.palette.chartMono.chartMono3,
+      theme.palette.chartMono.chartMono2,
+      theme.palette.chartMono.chartMono1,
+      theme.palette.chartMono.chartMono6,
+    ],
+    [theme],
+  ) as string[]
+
+  const { categories, dateRangeCategoryTotals, loadDateRangeCategoryTotals } = useCategoryStore()
+
+  React.useEffect(() => {
+    loadDateRangeCategoryTotals(
+      selectedAccounts,
+      startOfMonth(new Date()),
+      endOfMonth(new Date()),
+    ).finally()
+  }, [selectedAccounts])
+
+  const [selectedId, setSelectedId] = React.useState('')
+  const [selectedTab, setSelectedTab] = React.useState(0)
+
+  const spendingData = React.useMemo(
+    () => getSpendingData(categories, dateRangeCategoryTotals),
+    [categories, dateRangeCategoryTotals],
+  )
+
+  const incomeData = React.useMemo(
+    () => getIncomeData(categories, dateRangeCategoryTotals, incomeColors),
+    [categories, dateRangeCategoryTotals, incomeColors],
+  )
+
+  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setSelectedTab(newValue)
+    setSelectedId('')
+  }
+
+  const handleSelected = (id: string) => {
+    setSelectedId(selectedId === id ? '' : id)
+  }
+
+  return (
+    <Box width="100%">
+      <Tabs onChange={handleTabChange} value={selectedTab} variant="fullWidth">
+        <Tab
+          label={
+            <SpendingTabLabel
+              amount={spendingData.totalAmount}
+              label={spendingCopy.spend_tab_title}
+            />
+          }
+        />
+        <Tab
+          label={
+            <SpendingTabLabel
+              amount={incomeData.totalAmount}
+              label={spendingCopy.income_tab_title}
+            />
+          }
+        />
+      </Tabs>
+      {selectedTab === 0 && (
+        <Box>
+          <Stack direction="row" gap={16} justifyContent={'center'} p={24}>
+            <SpendingDonut
+              data={spendingData}
+              onSelected={handleSelected}
+              selectedId={selectedId}
+              totalLabel={spendingCopy.total_spending}
+            />
+
+            <SpendingLegend
+              data={spendingData}
+              onSelected={handleSelected}
+              selectedId={selectedId}
+            />
+          </Stack>
+        </Box>
+      )}
+      {selectedTab === 1 && (
+        <Box>
+          <Stack direction="row" gap={16} justifyContent={'center'} p={24}>
+            <SpendingDonut
+              data={incomeData}
+              isIncome={true}
+              onSelected={handleSelected}
+              selectedId={selectedId}
+              totalLabel={spendingCopy.total_income}
+            />
+
+            <SpendingLegend data={incomeData} onSelected={handleSelected} selectedId={selectedId} />
+          </Stack>
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+export default observer(MiniSpendingChart)

package/src/spending/components/Spending.tsx

@@ -0,0 +1,175 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Box from '@mui/material/Box'
+import Tab from '@mui/material/Tab'
+import Tabs from '@mui/material/Tabs'
+import { useTheme } from '@mui/material'
+import type { Theme } from '@mui/system'
+
+import {
+  CategoryGuids,
+  Drawer,
+  Transaction,
+  useCategoryStore,
+  useGlobalCopyStore,
+  useGlobalUiStore,
+  useTransactionStore,
+} from '../../common'
+
+import { TransactionDetails, TransactionList } from '../../transactions'
+import { getIncomeData, getSpendingData } from '../utils/SpendingData'
+import SpendingChart from './SpendingChart'
+import SpendingTabLabel from './SpendingTabLabel'
+
+const getIncomeColors = (theme: Theme) => {
+  return [
+    theme.palette.chartMono.chartMono5,
+    theme.palette.chartMono.chartMono4,
+    theme.palette.chartMono.chartMono3,
+    theme.palette.chartMono.chartMono2,
+    theme.palette.chartMono.chartMono1,
+    theme.palette.chartMono.chartMono6,
+  ]
+}
+
+const Spending = () => {
+  const theme = useTheme()
+
+  const { categories, dateRangeCategoryTotals, loadDateRangeCategoryTotals } = useCategoryStore()
+  const { spending: spendingCopy } = useGlobalCopyStore()
+  const { displayedDateRange, selectedAccounts, selectedAccountGuids } = useGlobalUiStore()
+  const { setFilter, sortedTransactions: transactions } = useTransactionStore()
+
+  const [selectedId, setSelectedId] = React.useState('')
+  const [selectedTab, setSelectedTab] = React.useState(0)
+  const [transactionGuid, setTransactionGuid] = React.useState('')
+  const [transactionsOpen, setTransactionsOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    loadDateRangeCategoryTotals(
+      selectedAccounts,
+      displayedDateRange.start,
+      displayedDateRange.end,
+    ).finally()
+  }, [selectedAccounts, displayedDateRange])
+
+  const spendingData = React.useMemo(
+    () => getSpendingData(categories, dateRangeCategoryTotals),
+    [categories, dateRangeCategoryTotals],
+  )
+
+  const incomeData = React.useMemo(
+    () => getIncomeData(categories, dateRangeCategoryTotals, getIncomeColors(theme)),
+    [categories, dateRangeCategoryTotals],
+  )
+
+  const transaction = React.useMemo(
+    () => transactions.find((t) => t.guid === transactionGuid),
+    [transactionGuid],
+  )
+
+  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setSelectedTab(newValue)
+    setSelectedId('')
+  }
+
+  const handleSelected = (id: string) => {
+    setSelectedId(selectedId === id || id === '0' ? '' : id)
+  }
+
+  const handleViewTransactions = (id: string) => {
+    const transactionFilter = {
+      accounts: selectedAccountGuids,
+      dateRange: displayedDateRange,
+    }
+
+    if (selectedTab === 0) {
+      // Spending
+      if (id === 'other') {
+        const other = spendingData.categoryData.find((c) => c.guid === 'other')
+        setFilter({
+          ...transactionFilter,
+          custom: (t: Transaction) =>
+            Boolean(other?.categoryTotals?.find((ct) => ct.guid === t.top_level_category_guid)),
+        })
+      } else {
+        setFilter({
+          ...transactionFilter,
+          custom: (t: Transaction) =>
+            id
+              ? t.top_level_category_guid === id
+              : t.top_level_category_guid !== CategoryGuids.INCOME,
+        })
+      }
+    } else {
+      // Income
+      setFilter({
+        ...transactionFilter,
+        custom: (t: Transaction) =>
+          id ? t.category_guid === id : t.top_level_category_guid === CategoryGuids.INCOME,
+      })
+    }
+
+    setTransactionsOpen(true)
+  }
+
+  return (
+    <Box>
+      <Tabs onChange={handleTabChange} value={selectedTab} variant="fullWidth">
+        <Tab
+          label={
+            <SpendingTabLabel
+              amount={spendingData.totalAmount}
+              label={spendingCopy.spend_tab_title}
+            />
+          }
+        />
+        <Tab
+          label={
+            <SpendingTabLabel
+              amount={incomeData.totalAmount}
+              label={spendingCopy.income_tab_title}
+            />
+          }
+        />
+      </Tabs>
+      {selectedTab === 0 && (
+        <SpendingChart
+          data={spendingData}
+          onSelected={handleSelected}
+          onViewTransactions={handleViewTransactions}
+          selectedId={selectedId}
+          title={spendingCopy.spend_tab_title}
+        />
+      )}
+      {selectedTab === 1 && (
+        <SpendingChart
+          data={incomeData}
+          onSelected={handleSelected}
+          onViewTransactions={handleViewTransactions}
+          selectedId={selectedId}
+          title={spendingCopy.income_tab_title}
+        />
+      )}
+      <Drawer
+        ariaLabelClose={spendingCopy.close_drawer_aria}
+        isOpen={transactionsOpen}
+        onClose={() => setTransactionsOpen(false)}
+        title={spendingCopy.transactions_drawer_title}
+      >
+        <TransactionList onClick={setTransactionGuid} />
+      </Drawer>
+      <Drawer
+        ariaLabelClose={spendingCopy.close_drawer_aria}
+        isOpen={Boolean(transaction)}
+        onClose={() => setTransactionGuid('')}
+        title={spendingCopy.transaction_details_drawer_title}
+      >
+        {transaction && <TransactionDetails transaction={transaction} />}
+      </Drawer>
+    </Box>
+  )
+}
+
+export default observer(Spending)

package/src/spending/components/SpendingChart.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Stack from '@mui/material/Stack'
+
+import { useCategoryStore, useGlobalCopyStore, useScreenSize } from '../../common'
+
+import { SpendingData } from '../utils/SpendingData'
+import SpendingDonut from './SpendingDonut'
+import SpendingList from './SpendingList'
+
+interface SpendingChartProps {
+  data: SpendingData
+  title: string
+  onSelected: (id: string) => void
+  onViewTransactions: (id: string) => void
+  selectedId: string
+}
+
+const SpendingChart: React.FC<SpendingChartProps> = ({
+  data,
+  onSelected,
+  onViewTransactions,
+  selectedId,
+  title,
+}) => {
+  const { isDesktop, isMobile } = useScreenSize()
+  const { isLoadingCategoryTotals } = useCategoryStore()
+  const { spending: spendingCopy } = useGlobalCopyStore()
+
+  const loadingDonut = (
+    <SpendingDonut
+      data={{
+        categoryData: [],
+        donutData: [],
+        totalAmount: 0,
+      }}
+      onSelected={() => {}}
+      selectedId={''}
+      size={isDesktop ? 400 : 300}
+      totalLabel={'Loading ...'}
+      variant="full"
+    />
+  )
+
+  return (
+    <Stack
+      alignItems={isMobile ? 'center' : 'flex-start'}
+      direction={isMobile ? 'column' : 'row'}
+      gap={{ xs: 16, md: 64, xl: 100 }}
+      justifyContent="center"
+      pt={50}
+      px={8}
+    >
+      {isLoadingCategoryTotals && loadingDonut}
+      {/* Not using a ternary here because it doesn't show the animation */}
+      {!isLoadingCategoryTotals && (
+        <SpendingDonut
+          data={data}
+          onSelected={onSelected}
+          onViewTransactions={onViewTransactions}
+          selectedId={selectedId}
+          size={isDesktop ? 400 : 300}
+          totalLabel={spendingCopy.total_amount}
+          variant="full"
+        />
+      )}
+
+      <SpendingList data={data} onSelected={onSelected} selectedId={selectedId} title={title} />
+    </Stack>
+  )
+}
+
+export default observer(SpendingChart)