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

package/src/budgets/components/budgetdetails/AddSubBudget.tsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Box from '@mui/material/Box'
+import Divider from '@mui/material/Divider'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemText from '@mui/material/ListItemText'
+import Stack from '@mui/material/Stack'
+
+import { Icon, Text } from '@kyper/mui'
+
+import {
+  type DetailedBudget,
+  type DetailedCategory,
+  Dialog,
+  Drawer,
+  useBudgetsStore,
+  useGlobalCopyStore,
+} from '../../../common'
+import { CategoryRow, useCategoryUiStore } from '../../../categories'
+import { BudgetAmount } from '../shared/BudgetAmount'
+
+interface AddSubBudgetProps {
+  category: DetailedCategory
+  parentBudget: DetailedBudget
+}
+
+export const AddSubBudget: React.FC<AddSubBudgetProps> = observer(({ category, parentBudget }) => {
+  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()
+  const { setExpandedGuid, setOnSelect } = useCategoryUiStore()
+  const { addBudget } = useBudgetsStore()
+
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [isAddBudgetOpen, setIsAddBudgetOpen] = React.useState(false)
+  const [amount, setAmount] = React.useState('')
+  const [subCategory, setSubCategory] = React.useState<DetailedCategory | undefined>(undefined)
+
+  React.useEffect(() => {
+    setOnSelect((guid: string) => {
+      const subCategory = category.subCategories.find((sc) => sc.guid === guid)
+      if (subCategory) {
+        setSubCategory(subCategory)
+        setAmount(`${subCategory.currentAmount === 0 ? '' : subCategory.currentAmount}`)
+        setIsAddBudgetOpen(true)
+      }
+    })
+  }, [])
+
+  const handleOpen = () => {
+    setExpandedGuid(category.guid)
+    setIsOpen(true)
+  }
+
+  const handleAddSubBudget = async () => {
+    if (subCategory && Number(amount) > 0) {
+      await addBudget(subCategory, Number(amount), parentBudget.guid)
+      setIsAddBudgetOpen(false)
+      setIsOpen(false)
+      setSubCategory(undefined)
+    }
+  }
+
+  return (
+    <Box>
+      <ListItem disableGutters={true} disablePadding={true} sx={{ bgcolor: 'background.paper' }}>
+        <ListItemButton onClick={handleOpen}>
+          <ListItemText>
+            <Stack alignItems="center" direction="row" justifyContent="space-between">
+              <Stack alignItems="center" direction="row" gap={8}>
+                <Icon fill={true} name="add_box" size={24} sx={{ color: 'action.active' }} />
+                <Text bold={true} sx={{ color: 'action.active' }} variant="Body">
+                  {copy.add_sub_budget_button}
+                </Text>
+              </Stack>
+              <Icon name="chevron_right" size={24} sx={{ color: 'primary.light' }} />
+            </Stack>
+          </ListItemText>
+        </ListItemButton>
+      </ListItem>
+      <Divider />
+
+      <Drawer
+        ariaLabelClose={commonCopy.close_aria}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title={copy.add_sub_budget_title}
+      >
+        <List>
+          <CategoryRow category={category} subCategories={category.subCategories} />
+        </List>
+      </Drawer>
+
+      <Dialog
+        copy={{ close_aria: commonCopy.close_aria, title: copy.add_title }}
+        disablePrimaryButton={Number(amount) <= 0}
+        isOpen={isAddBudgetOpen}
+        onClose={() => setIsAddBudgetOpen(false)}
+        onPrimaryAction={handleAddSubBudget}
+        primaryText={copy.add_save_button}
+      >
+        <BudgetAmount
+          amount={amount}
+          categoryName={subCategory?.name || ''}
+          onAmountChanged={setAmount}
+        />
+      </Dialog>
+    </Box>
+  )
+})

package/src/budgets/components/budgetdetails/BudgetDetails.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Button from '@mui/material/Button'
+import Stack from '@mui/material/Stack'
+import Tab from '@mui/material/Tab'
+import Tabs from '@mui/material/Tabs'
+
+import { Icon } from '@kyper/mui'
+
+import {
+  type DetailedBudget,
+  Drawer,
+  useBudgetsStore,
+  useGlobalCopyStore,
+  useTransactionStore,
+} from '../../../common'
+
+import { exportTransactionsToCSV, TransactionDetails, TransactionList } from '../../../transactions'
+
+import { Header } from './Header'
+import { SubBudgetList } from './SubBudgetList'
+
+interface BudgetDetailsProps {
+  budget: DetailedBudget
+}
+
+export const BudgetDetails: React.FC<BudgetDetailsProps> = observer(({ budget }) => {
+  const { budgets: copy, common: commonCopy, transactions: transactionCopy } = useGlobalCopyStore()
+  const { setAlert } = useBudgetsStore()
+  const { sortedTransactions: transactions, tags } = useTransactionStore()
+
+  const [selectedTab, setSelectedTab] = React.useState(0)
+  const [transactionGuid, setTransactionGuid] = React.useState('')
+
+  const transaction = React.useMemo(
+    () => transactions.find((t) => t.guid === transactionGuid),
+    [transactionGuid],
+  )
+
+  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setSelectedTab(newValue)
+  }
+
+  const handleExportToCsv = () => {
+    exportTransactionsToCSV(transactions, tags)
+    setAlert(copy.alert_csv_downloaded)
+  }
+
+  return (
+    <Stack gap={24}>
+      <Header budget={budget} />
+
+      <Stack>
+        <Tabs
+          onChange={handleTabChange}
+          sx={{ width: '100%' }}
+          value={selectedTab}
+          variant="fullWidth"
+        >
+          <Tab label={copy.details_transactions_tab} />
+          <Tab label={copy.details_subbudgets_tab} />
+        </Tabs>
+        {selectedTab === 0 && (
+          <Stack>
+            {transactions.length > 0 && (
+              <Stack direction="row" justifyContent="right" mb={-24} mr={8} mt={8} zIndex={1}>
+                <Button
+                  onClick={handleExportToCsv}
+                  startIcon={<Icon name="ios_share" />}
+                  variant="text"
+                >
+                  {transactionCopy.export_csv_btn}
+                </Button>
+              </Stack>
+            )}
+            <TransactionList height="100%" onClick={setTransactionGuid} />
+          </Stack>
+        )}
+        {selectedTab === 1 && <SubBudgetList budget={budget} />}
+
+        <Drawer
+          ariaLabelClose={commonCopy.close_aria}
+          isOpen={Boolean(transaction)}
+          onClose={() => setTransactionGuid('')}
+          title={copy.details_transaction_drawer}
+        >
+          {transaction && <TransactionDetails transaction={transaction} />}
+        </Drawer>
+      </Stack>
+    </Stack>
+  )
+})

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

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Stack from '@mui/material/Stack'
+
+import { CategoryIcon, H1, Text } from '@kyper/mui'
+
+import { DetailedBudget, formatCurrency, StatusBar } from '../../../common'
+
+interface HeaderProps {
+  budget: DetailedBudget
+}
+
+export const Header: React.FC<HeaderProps> = ({ budget }) => {
+  const {
+    amount,
+    budgetColors: { background },
+    category: { name: categoryName },
+    category_guid,
+    percentage,
+    transaction_total,
+  } = budget
+
+  const status = [
+    {
+      color: background,
+      percentage: `${percentage}%`,
+    },
+  ]
+
+  return (
+    <Card sx={{ mt: 24, mx: 24 }}>
+      <CardContent>
+        <Stack alignItems="center" gap={16}>
+          <CategoryIcon categoryGuid={category_guid} size={56} />
+          <H1>
+            {`${formatCurrency(transaction_total, '0,0')} / ${formatCurrency(amount, '0,0')}`}
+          </H1>
+          <Text bold={true} variant="XSmall">
+            {categoryName}
+          </Text>
+          <StatusBar data={status} height={10} />
+        </Stack>
+      </CardContent>
+    </Card>
+  )
+}

package/src/budgets/components/budgetdetails/SubBudgetList.tsx

@@ -0,0 +1,148 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Divider from '@mui/material/Divider'
+import List from '@mui/material/List'
+import Stack from '@mui/material/Stack'
+
+import { Text } from '@kyper/mui'
+
+import {
+  type Budget,
+  type DetailedBudget,
+  type Transaction,
+  buildDynamicCopy,
+  Dialog,
+  Drawer,
+  useBudgetsStore,
+  useGlobalCopyStore,
+  useTransactionStore,
+} from '../../../common'
+
+import { TransactionList } from '../../../transactions'
+
+import { SubBudgetZeroState } from '../budgetlist/SubBudgetZeroState'
+import { SubBudgetRow } from '../budgetlist/SubBudgetRow'
+import { BudgetAmount } from '../shared/BudgetAmount'
+import { AddSubBudget } from './AddSubBudget'
+import { Header } from './Header'
+
+interface SubBudgetListProps {
+  budget: DetailedBudget
+}
+
+export const SubBudgetList: React.FC<SubBudgetListProps> = observer(({ budget }) => {
+  const { category, subBudgets } = budget
+  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()
+  const { deleteBudget, selectedSubBudget, setSelectedSubBudget, updateBudget } = useBudgetsStore()
+  const { filter, setFilter } = useTransactionStore()
+
+  const [isEditOpen, setIsEditOpen] = React.useState(false)
+  const [isDeleteOpen, setIsDeleteOpen] = React.useState(false)
+  const [amount, setAmount] = React.useState(``)
+
+  React.useEffect(() => {
+    if (selectedSubBudget) {
+      setAmount(`${selectedSubBudget.amount}`)
+      setFilter({
+        ...filter,
+        custom: (t: Transaction) => t.category_guid === selectedSubBudget.category_guid,
+      })
+    }
+  }, [selectedSubBudget])
+
+  const handleUpdateBudget = async () => {
+    if (selectedSubBudget) {
+      await updateBudget({
+        ...selectedSubBudget,
+        amount: Number(amount),
+      } as Budget)
+    }
+  }
+
+  const handleDeleteBudget = async () => {
+    if (selectedSubBudget) {
+      await deleteBudget(selectedSubBudget.guid)
+    }
+    setIsDeleteOpen(false)
+    handleClose()
+  }
+
+  const handleClose = () => {
+    setFilter({
+      ...filter,
+      custom: (t: Transaction) =>
+        t.category_guid === budget.category_guid ||
+        t.top_level_category_guid === budget.category_guid,
+    })
+    setSelectedSubBudget(undefined)
+  }
+
+  return (
+    <React.Fragment>
+      <List sx={{ bgcolor: 'background.paper' }}>
+        {subBudgets.length === 0 ? (
+          <SubBudgetZeroState />
+        ) : (
+          subBudgets.map((subBudget) => (
+            <React.Fragment key={subBudget.guid}>
+              <SubBudgetRow budget={subBudget} />
+              <Divider />
+            </React.Fragment>
+          ))
+        )}
+        <AddSubBudget category={category} parentBudget={budget} />
+      </List>
+      <Drawer
+        ariaLabelClose={commonCopy.close_aria}
+        isOpen={Boolean(selectedSubBudget)}
+        onClose={handleClose}
+        onPrimaryAction={() => setIsEditOpen(true)}
+        onSecondaryAction={() => setIsDeleteOpen(true)}
+        primaryText={copy.details_edit_button}
+        secondaryText={copy.details_delete_button}
+        title={copy.details_title}
+      >
+        {selectedSubBudget && (
+          <Stack gap={24}>
+            <Header budget={selectedSubBudget} />
+            <TransactionList height="100%" />
+          </Stack>
+        )}
+      </Drawer>
+
+      {selectedSubBudget && (
+        <React.Fragment>
+          <Dialog
+            copy={{ close_aria: commonCopy.close_aria, title: copy.details_edit_title }}
+            disablePrimaryButton={Number(amount) <= 0}
+            isOpen={isEditOpen}
+            onClose={() => setIsEditOpen(false)}
+            onPrimaryAction={handleUpdateBudget}
+            primaryText={copy.edit_save_button}
+          >
+            <BudgetAmount
+              amount={amount}
+              categoryName={selectedSubBudget.category.name}
+              onAmountChanged={setAmount}
+            />
+          </Dialog>
+
+          <Dialog
+            copy={{ close_aria: commonCopy.close_aria, title: copy.delete_title }}
+            isOpen={isDeleteOpen}
+            onClose={() => setIsDeleteOpen(false)}
+            onPrimaryAction={handleDeleteBudget}
+            primaryColor="error"
+            primaryText="Delete"
+            secondaryColor="secondary"
+          >
+            <Text variant="Paragraph">
+              {buildDynamicCopy(copy.delete_description, selectedSubBudget.category.name) as string}
+            </Text>
+          </Dialog>
+        </React.Fragment>
+      )}
+    </React.Fragment>
+  )
+})

package/src/budgets/components/budgetlist/BudgetRow.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+
+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 Stack from '@mui/material/Stack'
+
+import { CategoryIcon, Text } from '@kyper/mui'
+
+import { type DetailedBudget, formatCurrency, SingleSegmentDonut } from '../../../common'
+
+interface BudgetRowProps {
+  budget: DetailedBudget
+  onClick?: (budget: DetailedBudget) => void
+}
+
+export const BudgetRow: React.FC<BudgetRowProps> = ({ budget, onClick }) => {
+  const {
+    amount,
+    budgetColors: { background, description: descriptionColor },
+    category_guid,
+    description,
+    percentage,
+    subBudgets,
+    transaction_total,
+  } = budget
+
+  return (
+    <ListItem>
+      <ListItemButton onClick={() => onClick?.(budget)}>
+        <ListItemAvatar sx={{ mb: -8, mr: 16 }}>
+          <SingleSegmentDonut color={background} percent={percentage} size={40}>
+            <CategoryIcon categoryGuid={category_guid} variant="basic" />
+          </SingleSegmentDonut>
+        </ListItemAvatar>
+        <ListItemText
+          primary={
+            <Stack component="span" direction="row" justifyContent="space-between">
+              <Text bold={true} variant="Body">
+                {budget.category.name}
+              </Text>
+              <Text fontWeight={400} variant="Body">
+                {`
+                  ${formatCurrency(transaction_total, '0,0')} / 
+                  ${formatCurrency(amount, '0,0')}
+                `}
+              </Text>
+            </Stack>
+          }
+          secondary={
+            <Stack component="span" direction="row" justifyContent="space-between">
+              <Text variant="XSmall">{`${subBudgets.length} Sub-budgets`}</Text>
+              <Text bold={percentage > 100} color={descriptionColor} variant="XSmall">
+                {description}
+              </Text>
+            </Stack>
+          }
+        />
+      </ListItemButton>
+    </ListItem>
+  )
+}

package/src/budgets/components/budgetlist/SubBudgetRow.tsx

@@ -0,0 +1,64 @@
+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 ListItemText from '@mui/material/ListItemText'
+import Stack from '@mui/material/Stack'
+
+import { CategoryIcon, Text } from '@kyper/mui'
+
+import {
+  type DetailedBudget,
+  formatCurrency,
+  SingleSegmentDonut,
+  useBudgetsStore,
+} from '../../../common'
+
+interface SubBudgetRowProps {
+  budget: DetailedBudget
+}
+
+export const SubBudgetRow: React.FC<SubBudgetRowProps> = observer(({ budget }) => {
+  const {
+    amount,
+    budgetColors: { background },
+    category,
+    percentage,
+    transaction_total,
+  } = budget
+
+  const { setSelectedSubBudget } = useBudgetsStore()
+
+  return (
+    <ListItem>
+      <ListItemButton onClick={() => setSelectedSubBudget(budget)}>
+        <ListItemAvatar sx={{ mb: -8, mr: 16 }}>
+          <SingleSegmentDonut color={background} percent={percentage} size={40}>
+            <CategoryIcon categoryGuid={category.parent_guid} variant="basic" />
+          </SingleSegmentDonut>
+        </ListItemAvatar>
+        <ListItemText
+          primary={
+            <Stack component="span" direction="row" justifyContent="space-between">
+              <Text bold={true} variant="Body">
+                {budget.category.name}
+              </Text>
+            </Stack>
+          }
+          secondary={
+            <Stack component="span" direction="row" justifyContent="space-between">
+              <Text fontWeight={400} variant="Body">
+                {`
+                  ${formatCurrency(transaction_total, '0,0')} / 
+                  ${formatCurrency(amount, '0,0')}
+                `}
+              </Text>
+            </Stack>
+          }
+        />
+      </ListItemButton>
+    </ListItem>
+  )
+})

package/src/budgets/components/budgetlist/SubBudgetZeroState.tsx

@@ -0,0 +1,22 @@
+import Stack from '@mui/material/Stack'
+import { observer } from 'mobx-react-lite'
+
+import { Icon, Text } from '@kyper/mui'
+
+import { useGlobalCopyStore } from '../../../common'
+
+export const SubBudgetZeroState = observer(() => {
+  const { budgets: copy } = useGlobalCopyStore()
+
+  return (
+    <Stack alignItems="center" gap={12} height="auto" mb={24} mt={24}>
+      <Icon color="secondary" name="bubble_chart" sx={{ fontSize: 32 }} />
+      <Text bold={true} color="secondary" variant="Small">
+        {copy.zero_state_no_sub_budgets}
+      </Text>
+      <Text color="text.secondary" variant="XSmall">
+        {copy.zero_state_no_sub_budgets_description}
+      </Text>
+    </Stack>
+  )
+})

package/src/budgets/components/shared/BudgetAmount.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+
+import Stack from '@mui/material/Stack'
+import { Text } from '@kyper/mui'
+import {
+  buildDynamicCopy,
+  CurrencyInput,
+  formatCurrency,
+  useBudgetsStore,
+  useGlobalCopyStore,
+  useRecurringActivityStore,
+} from '../../../common'
+
+interface BudgetAmountProps {
+  amount: string
+  categoryName: string
+  onAmountChanged: (amount: string) => void
+}
+
+export const BudgetAmount: React.FC<BudgetAmountProps> = ({
+  amount,
+  categoryName,
+  onAmountChanged,
+}) => {
+  const { budgets: copy } = useGlobalCopyStore()
+  const { totalBudgeted } = useBudgetsStore()
+  const { projectedIncome } = useRecurringActivityStore()
+
+  const unbudgetedIncome = projectedIncome - totalBudgeted
+
+  return (
+    <Stack gap={16}>
+      <Stack>
+        <Text>
+          {
+            buildDynamicCopy(
+              copy.add_description_top,
+              formatCurrency(unbudgetedIncome, '0,0'),
+            ) as string
+          }
+        </Text>
+        <Text>{buildDynamicCopy(copy.add_description_bottom, categoryName) as string}</Text>
+      </Stack>
+      <CurrencyInput
+        amount={amount}
+        autoFocus={true}
+        label={copy.add_label}
+        minAmount={0}
+        setAmount={onAmountChanged}
+        sx={{ '.MuiTypography-Body': { p: 0 } }}
+      />
+    </Stack>
+  )
+}

package/src/budgets/index.ts

@@ -0,0 +1,2 @@
+export { default as BubbleBudgetsMiniWidget } from './BubbleBudgetsMiniWidget'
+export { BubbleBudgetsWidget } from './BubbleBudgetsWidget'