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

package/src/budgets/components/BudgetList.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import CardHeader from '@mui/material/CardHeader'
+import Divider from '@mui/material/Divider'
+import List from '@mui/material/List'
+
+import { H3 } from '@kyper/mui'
+
+import {
+  type DetailedBudget,
+  ANALYTICS_EVENTS,
+  useBudgetsStore,
+  useEvent,
+  useGlobalCopyStore,
+} from '../../common'
+
+import { BudgetRow } from './budgetlist/BudgetRow'
+
+export const BudgetList = observer(() => {
+  const { onEvent } = useEvent()
+  const { budgets: copy } = useGlobalCopyStore()
+  const { detailedBudgets: budgets, setSelectedBudget } = useBudgetsStore()
+
+  const handleBudgetClick = (budget: DetailedBudget) => {
+    setSelectedBudget(budget)
+    onEvent(ANALYTICS_EVENTS.BUDGETS_CLICK_BUDGET_CATEGORY, {
+      budget_category: budget.category.name,
+      click_type: 'list',
+    })
+  }
+
+  return (
+    <Card elevation={2} sx={{ borderRadius: 2 }}>
+      <CardHeader sx={{ pb: 8, pl: 24 }} title={<H3>{copy.budget_categories_title}</H3>} />
+      <CardContent sx={{ p: 0, ':last-child': { p: 0 } }}>
+        <List>
+          {budgets.map((budget) => (
+            <React.Fragment key={budget.guid}>
+              <BudgetRow budget={budget} onClick={handleBudgetClick} />
+              <Divider />
+            </React.Fragment>
+          ))}
+        </List>
+      </CardContent>
+    </Card>
+  )
+})

package/src/budgets/components/Overview.tsx

@@ -0,0 +1,156 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { subDays } from 'date-fns/subDays'
+
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import CardHeader from '@mui/material/CardHeader'
+import IconButton from '@mui/material/IconButton'
+import Stack from '@mui/material/Stack'
+import useTheme from '@mui/material/styles/useTheme'
+
+import { H3, Icon, Text } from '@kyper/mui'
+
+import {
+  type StatusBarData,
+  ANALYTICS_EVENTS,
+  buildDynamicCopy,
+  Drawer,
+  formatCurrency,
+  StatusBar,
+  useBudgetsStore,
+  useCategoryStore,
+  useGlobalCopyStore,
+  useRecurringActivityStore,
+  useTransactionStore,
+  useAccountStore,
+  useEvent,
+} from '../../common'
+
+import { ManageIncome } from '../../recurringactivity'
+
+export const Overview = observer(() => {
+  const theme = useTheme()
+
+  const { onEvent } = useEvent()
+  const { accounts } = useAccountStore()
+  const { budgets: copy, common: commonCopy, recurring: recurringCopy } = useGlobalCopyStore()
+  const { incomeCategories, spendCategories } = useCategoryStore()
+  const { detailedBudgets: budgets, totalBudgeted } = useBudgetsStore()
+  const { projectedIncome } = useRecurringActivityStore()
+  const { setFilter } = useTransactionStore()
+
+  const [isIncomeOpen, setIsIncomeOpen] = React.useState(false)
+
+  const [spentTotal, spendingStatus] = React.useMemo(() => {
+    const spentTotal = spendCategories.reduce((total, current) => total + current.totalAmount, 0)
+    let spendingPercentage = spentTotal / totalBudgeted
+    if (spendingPercentage > 1) spendingPercentage = 1
+    let color = theme.palette.success.main
+    if (spendingPercentage > 0.8 && spendingPercentage < 1) {
+      color = theme.palette.warning.main
+    } else if (spendingPercentage >= 1) {
+      color = theme.palette.error.main
+    }
+
+    const spendingStatus = [
+      {
+        color,
+        percentage: `${spendingPercentage}`,
+      },
+    ] as StatusBarData[]
+    return [spentTotal, spendingStatus]
+  }, [budgets, spendCategories])
+
+  const [incomePaid, incomeStatus] = React.useMemo(() => {
+    const incomePaid = Math.abs(
+      incomeCategories.reduce((total, current) => total + current.totalAmount, 0),
+    )
+    let incomePercentage = incomePaid / projectedIncome
+    if (incomePercentage > 1) incomePercentage = 1
+
+    const incomeStatus = [
+      {
+        color: theme.palette.secondary.main,
+        percentage: `${incomePercentage}`,
+      },
+    ]
+    return [incomePaid, incomeStatus]
+  }, [incomeCategories, projectedIncome])
+
+  const handleOpenIncome = () => {
+    setFilter({
+      accounts: accounts.map((account) => account.guid),
+      dateRange: {
+        start: subDays(new Date(), 90),
+        end: new Date(),
+      },
+    })
+    setIsIncomeOpen(true)
+    onEvent(ANALYTICS_EVENTS.BUDGETS_CLICK_EDIT_INCOME)
+  }
+
+  return (
+    <Card elevation={2} sx={{ overflow: 'visible', borderRadius: 2 }}>
+      <CardHeader sx={{ pb: 8, pl: 24 }} title={<H3>{copy.overview_title}</H3>} />
+      <CardContent sx={{ pt: 12, px: 24 }}>
+        <Stack gap={24}>
+          <Stack gap={8}>
+            <Text bold={true} sx={{ mb: 8 }} variant="Body">
+              {copy.spending_title}
+            </Text>
+            <StatusBar data={spendingStatus} height={16} />
+            <Text variant="Small">
+              {
+                buildDynamicCopy(
+                  copy.spending_description,
+                  formatCurrency(spentTotal, '0,0'),
+                  formatCurrency(totalBudgeted, '0,0'),
+                ) as string
+              }
+            </Text>
+          </Stack>
+
+          <Stack gap={8}>
+            <Stack alignItems="center" direction="row" gap={4} mb={-4}>
+              <Text bold={true} variant="Body">
+                {copy.income_title}
+              </Text>
+              <IconButton
+                aria-label={recurringCopy.manage_income}
+                onClick={handleOpenIncome}
+                sx={{ p: 0 }}
+              >
+                <Icon name="edit" />
+              </IconButton>
+            </Stack>
+            <StatusBar data={incomeStatus} height={16} />
+            <Text variant="Small">
+              {
+                buildDynamicCopy(
+                  copy.income_description,
+                  formatCurrency(incomePaid, '0,0'),
+                  formatCurrency(projectedIncome, '0,0'),
+                ) as string
+              }
+            </Text>
+          </Stack>
+        </Stack>
+      </CardContent>
+
+      <Drawer
+        ariaLabelClose={commonCopy.close_aria}
+        isOpen={isIncomeOpen}
+        onClose={() => setIsIncomeOpen(false)}
+        title={recurringCopy.manage_income}
+      >
+        <Stack gap={4}>
+          <Text bold={true} sx={{ mt: 12, mx: 24 }} variant="Small">
+            {copy.income_title}
+          </Text>
+          <ManageIncome />
+        </Stack>
+      </Drawer>
+    </Card>
+  )
+})

package/src/budgets/components/ZeroState.tsx

@@ -0,0 +1,23 @@
+import Stack from '@mui/material/Stack'
+
+import { Icon, Text } from '@kyper/mui'
+
+import { useGlobalCopyStore } from '../../common'
+
+const ZeroState = () => {
+  const { budgets: budgetsCopy } = useGlobalCopyStore()
+
+  return (
+    <Stack alignItems="center" gap={12} sx={{ mx: 24, textAlign: 'center' }}>
+      <Icon name="bubble_chart" size={48} />
+      <Text bold={true} variant="Paragraph">
+        {budgetsCopy.zero_state_title}
+      </Text>
+      <Text sx={{ whiteSpace: 'wrap' }} variant="Paragraph">
+        {budgetsCopy.zero_state_description}
+      </Text>
+    </Stack>
+  )
+}
+
+export default ZeroState

package/src/budgets/components/addbudget/Header.tsx

@@ -0,0 +1,59 @@
+import { observer } from 'mobx-react-lite'
+
+import Stack from '@mui/material/Stack'
+
+import { Text } from '@kyper/mui'
+
+import {
+  formatCurrency,
+  useBudgetsStore,
+  useGlobalCopyStore,
+  useRecurringActivityStore,
+} from '../../../common'
+
+export const Header = observer(() => {
+  const { budgets: copy } = useGlobalCopyStore()
+  const { totalBudgeted } = useBudgetsStore()
+  const { projectedIncome } = useRecurringActivityStore()
+
+  const remaining = projectedIncome - totalBudgeted
+
+  return (
+    <Stack direction="row" justifyContent="center" my={16} spacing={20}>
+      <Stack alignItems="center">
+        <Text bold={true} variant="Body">
+          {formatCurrency(projectedIncome, '0,0')}
+        </Text>
+        <Text color="secondary" variant="Small">
+          {copy.projected_income}
+        </Text>
+      </Stack>
+
+      <Text bold={true} justifyContent="center" variant="Body">
+        {'-'}
+      </Text>
+
+      <Stack alignItems="center">
+        <Text bold={true} variant="Body">
+          {formatCurrency(totalBudgeted, '0,0')}
+        </Text>
+        <Text color="secondary" variant="Small">
+          {copy.budgeted}
+        </Text>
+      </Stack>
+
+      <Text bold={true} justifyContent="center" variant="Body">
+        {'='}
+      </Text>
+
+      <Stack alignItems="center">
+        <Text bold={true} variant="Body">
+          {formatCurrency(remaining, '0,0')}
+        </Text>
+        <Text color="secondary" variant="Small">
+          {copy.remaining}
+        </Text>
+      </Stack>
+    </Stack>
+  )
+})

package/src/budgets/components/addbudget/RecalculateBudgetRow.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Divider from '@mui/material/Divider'
+import ListItem from '@mui/material/ListItem'
+import ListItemAvatar from '@mui/material/ListItemAvatar'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemText from '@mui/material/ListItemText'
+
+import { CategoryIcon } from '@kyper/mui'
+
+import {
+  type DetailedCategory,
+  buildDynamicCopy,
+  formatCurrency,
+  useBudgetsStore,
+  useGlobalCopyStore,
+} from '../../../common'
+
+interface RecalculateBudgetRowProps {
+  category: DetailedCategory
+}
+
+export const RecalculateBudgetRow: React.FC<RecalculateBudgetRowProps> = observer(
+  ({ category }) => {
+    const { budgets: copy } = useGlobalCopyStore()
+    const { budgets } = useBudgetsStore()
+
+    const secondaryText = React.useMemo(() => {
+      const budget = budgets.find((b) => b.category_guid === category.guid)
+      const part1 = formatCurrency(category.totalAverageAmount, '0,0')
+      const part2 = budget
+        ? buildDynamicCopy(copy.recalculate_previous_budget, formatCurrency(budget.amount, '0,0'))
+        : copy.recalculate_new_budget
+
+      return `${part1} - ${part2}`
+    }, [copy, budgets])
+
+    return (
+      <React.Fragment key={category.guid}>
+        <ListItem>
+          <ListItemButton>
+            <ListItemAvatar>
+              <CategoryIcon categoryGuid={category.guid} variant="filled" />
+            </ListItemAvatar>
+            <ListItemText primary={category.name} secondary={secondaryText} />
+          </ListItemButton>
+        </ListItem>
+        <Divider />
+      </React.Fragment>
+    )
+  },
+)

package/src/budgets/components/addbudget/RecalculateBudgets.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+
+import Button from '@mui/material/Button'
+import List from '@mui/material/List'
+import Box from '@mui/material/Box'
+import Stack from '@mui/material/Stack'
+
+import { Text } from '@kyper/mui'
+
+import { Drawer, useBudgetsStore, useCategoryStore, useGlobalCopyStore } from '../../../common'
+
+import { RecalculateBudgetRow } from './RecalculateBudgetRow'
+
+interface RecalculateBudgetsProps {
+  onRecalculateBudgets?: () => void
+}
+
+export const RecalculateBudgets = ({ onRecalculateBudgets }: RecalculateBudgetsProps) => {
+  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()
+  const { spendCategories } = useCategoryStore()
+  const { recalculateBudgets, setAlert } = useBudgetsStore()
+
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  const newBudgetCategories = spendCategories.filter((category) => category.totalAverageAmount > 0)
+
+  const handlePrimaryClick = async () => {
+    await recalculateBudgets(newBudgetCategories)
+
+    setIsOpen(false)
+    setAlert(copy.alert_recalculated_budgets)
+    onRecalculateBudgets?.()
+  }
+
+  return (
+    <React.Fragment>
+      <Button onClick={() => setIsOpen(true)} sx={{ mt: 24, mx: 24 }} variant="text">
+        {copy.recalculate_button}
+      </Button>
+
+      <Text sx={{ mx: 24, my: 16, textAlign: 'center', whiteSpace: 'wrap' }} variant="Paragraph">
+        {copy.recalculate_help}
+      </Text>
+      <Drawer
+        ariaLabelClose={commonCopy.close_aria}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        onPrimaryAction={handlePrimaryClick}
+        title={copy.recalculate_title}
+      >
+        <Stack>
+          <Stack mx={24} my={16}>
+            <Text bold={true} variant="Body">
+              {copy.recalculate_description_top}
+            </Text>
+            <Text variant="ParagraphSmall">{copy.recalculate_description_bottom}</Text>
+          </Stack>
+          <Box bgcolor="background.paper">
+            <List>
+              {newBudgetCategories.map((category) => (
+                <RecalculateBudgetRow category={category} key={category.guid} />
+              ))}
+            </List>
+          </Box>
+        </Stack>
+      </Drawer>
+    </React.Fragment>
+  )
+}

package/src/budgets/components/addbudget/UnbudgetedRow.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import ListItem from '@mui/material/ListItem'
+import ListItemAvatar from '@mui/material/ListItemAvatar'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'
+import ListItemText from '@mui/material/ListItemText'
+
+import { CategoryIcon, Icon } from '@kyper/mui'
+
+import { type DetailedCategory, Dialog, formatCurrency, useGlobalCopyStore } from '../../../common'
+
+import { BudgetAmount } from '../shared/BudgetAmount'
+
+interface UnbudgetedRowProps {
+  category: DetailedCategory
+  onAddBudget: (category: DetailedCategory, amount: number) => void
+}
+
+export const UnbudgetedRow: React.FC<UnbudgetedRowProps> = observer(({ category, onAddBudget }) => {
+  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()
+
+  const [isAddBudgetOpen, setIsAddBudgetOpen] = React.useState(false)
+  const [amount, setAmount] = React.useState(
+    `${category.totalAmount === 0 ? '' : category.totalAmount}`,
+  )
+
+  return (
+    <React.Fragment>
+      <ListItem key={category.guid}>
+        <ListItemButton onClick={() => setIsAddBudgetOpen(true)}>
+          <ListItemAvatar>
+            <CategoryIcon categoryGuid={category.guid} />
+          </ListItemAvatar>
+          <ListItemText
+            primary={category.name}
+            secondary={formatCurrency(category.totalAmount, '0,0')}
+          />
+          <ListItemSecondaryAction>
+            <Icon name="add" size={20} />
+          </ListItemSecondaryAction>
+        </ListItemButton>
+      </ListItem>
+      <Dialog
+        copy={{ close_aria: commonCopy.close_aria, title: copy.add_title }}
+        disablePrimaryButton={Number(amount) <= 0}
+        isOpen={isAddBudgetOpen}
+        onClose={() => setIsAddBudgetOpen(false)}
+        onPrimaryAction={() => onAddBudget(category, Number(amount))}
+        primaryText={copy.add_save_button}
+      >
+        <BudgetAmount amount={amount} categoryName={category.name} onAmountChanged={setAmount} />
+      </Dialog>
+    </React.Fragment>
+  )
+})

package/src/budgets/components/bubblechart/Bubble.tsx

@@ -0,0 +1,148 @@
+import React from 'react'
+import * as d3 from 'd3'
+
+import Tooltip from '@mui/material/Tooltip'
+
+import { Icon, Text } from '@kyper/mui'
+
+import { Mercury } from './Mercury'
+
+import type { DetailedBudget } from '../../../common'
+import type { BubbleData } from '../BubbleChart'
+
+const LARGE_THRESHOLD = 75
+const MEDIUM_THRESHOLD = 50
+
+interface BubbleProps {
+  bubble: BubbleData
+  isDraggable: boolean
+  onClick?: (budget: DetailedBudget) => void
+}
+
+export function Bubble({ bubble, isDraggable, onClick = () => {} }: BubbleProps) {
+  const [showTooltip, setShowTooltip] = React.useState(false)
+
+  React.useEffect(() => {
+    document.fonts.ready.then(() => {
+      // Due to icon font location on Safari, we have determine x after the icon font has loaded
+      const iconText = d3.select(`.icon-${icon}`) as d3.Selection<
+        SVGTextElement,
+        BubbleData,
+        HTMLElement,
+        any
+      >
+      const textLength = iconText.node()?.getComputedTextLength()
+      iconText.attr('x', () => {
+        if (radius < LARGE_THRESHOLD) {
+          return textLength ? textLength / 2 - 12 : 12
+        }
+        return textLength ? textLength / 2 - 16 : 16
+      })
+    })
+  }, [])
+
+  if (!bubble) return undefined
+
+  const {
+    budgetColors: { background, text: textColor },
+    category: { icon, name },
+    guid,
+    description,
+    radius,
+    x,
+    y,
+  } = bubble
+
+  let iconY = 13
+  if (radius > 75) iconY = -20
+  else if (radius > 50) iconY = -6
+
+  const tooltipText = `${bubble.category.name}: ${description}`
+  const tooltipPopperSlot = {
+    modifiers: [
+      {
+        name: 'offset',
+        options: { offset: [0, 15] },
+      },
+    ],
+  }
+
+  return (
+    <g
+      className="bubble"
+      id={`bubble-${guid}`}
+      key={guid}
+      onClick={() => onClick(bubble)}
+      onMouseEnter={() => setShowTooltip(true)}
+      onMouseLeave={() => setShowTooltip(false)}
+      style={{ cursor: isDraggable ? 'pointer' : 'default' }}
+      textAnchor="middle"
+      x={x}
+      y={y}
+    >
+      <Tooltip
+        followCursor={true}
+        open={showTooltip}
+        slotProps={{ popper: tooltipPopperSlot }}
+        title={tooltipText}
+      >
+        <circle fill={background} id={`circle-${guid}`} r={radius} />
+      </Tooltip>
+
+      <Icon
+        className={`icon-${icon}`}
+        component="text"
+        name={icon}
+        size={radius <= LARGE_THRESHOLD ? 24 : 32}
+        sx={{
+          fill: textColor,
+        }}
+        /* @ts-expect-error Property doesn't exist on type */
+        y={iconY}
+      />
+
+      {radius > LARGE_THRESHOLD && (
+        <Text
+          bold={true}
+          component="text"
+          id={`budget-category-${guid}`}
+          sx={{ fill: textColor }}
+          variant="Small"
+          /* @ts-expect-error Property doesn't exist on type */
+          y={4}
+        >
+          {name}
+        </Text>
+      )}
+
+      {radius > MEDIUM_THRESHOLD && (
+        <Text
+          bold={true}
+          component="text"
+          id={`budget-description-${guid}-1`}
+          sx={{ fill: textColor }}
+          variant="Body"
+          /* @ts-expect-error Property doesn't exist on type */
+          y={radius <= LARGE_THRESHOLD ? 12 : 24}
+        >
+          {radius <= LARGE_THRESHOLD ? description.split(' ')[0] : description}
+        </Text>
+      )}
+
+      {radius <= LARGE_THRESHOLD && radius > MEDIUM_THRESHOLD && (
+        <Text
+          component="text"
+          id={`budget-description-${guid}-2`}
+          sx={{ fill: textColor }}
+          variant="XSmall"
+          /* @ts-expect-error Property doesn't exist on type */
+          y={28}
+        >
+          {description.split(' ')[1]}
+        </Text>
+      )}
+
+      <Mercury bubble={bubble} />
+    </g>
+  )
+}

package/src/budgets/components/bubblechart/Mercury.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import * as d3 from 'd3'
+
+import useTheme from '@mui/material/styles/useTheme'
+
+import { arcTween } from '../../utils/BubblesSVG'
+
+import type { BubbleData } from '../BubbleChart'
+
+const PROGRESS_INDICATOR_SIZE = 5
+const PROGRESS_DURATION = 2000
+
+interface MercuryProps {
+  bubble: BubbleData
+}
+
+export function Mercury({ bubble }: MercuryProps) {
+  const theme = useTheme()
+  const {
+    guid,
+    budgetColors: { mercury },
+    radius,
+  } = bubble
+
+  const bubbleId = `mercury-${guid}`
+
+  React.useEffect(() => {
+    // Remove previous status arc
+    d3.select(`.${bubbleId}`).selectAll('.status').remove()
+
+    // Append updated status arc
+    d3.select(`.${bubbleId}`)
+      .append('path')
+      .transition()
+      .duration(PROGRESS_DURATION)
+      .delay(0)
+      .attr('class', 'status')
+      .attr('style', `fill: ${mercury}; fill-opacity: 1;`)
+      .attrTween('d', () => arcTween(bubble))
+  }, [bubble])
+
+  const trackArc = d3
+    .arc<number>()
+    .innerRadius((radius: number) => radius - 2 * PROGRESS_INDICATOR_SIZE)
+    .outerRadius((radius: number) => radius - PROGRESS_INDICATOR_SIZE)
+    .startAngle(0)
+    .endAngle(2 * Math.PI)
+
+  return (
+    <g className={bubbleId}>
+      <path
+        d={trackArc(radius) || ''}
+        style={{ fill: theme.palette.common.white, fillOpacity: 0.35 }}
+      />
+    </g>
+  )
+}