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

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

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

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

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

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

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

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

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

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

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