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

package/src/spending/SpendingWidget.tsx

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

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

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

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

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

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

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

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