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

package/src/transactions/TransactionWidget.tsx

@@ -0,0 +1,319 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { endOfMonth } from 'date-fns/endOfMonth'
+import { getUnixTime } from 'date-fns/getUnixTime'
+import { startOfMonth } from 'date-fns/startOfMonth'
+import { startOfToday } from 'date-fns/startOfToday'
+
+import Box from '@mui/material/Box'
+import useTheme from '@mui/material/styles/useTheme'
+
+import type { DateRange } from '@mui/x-date-pickers-pro'
+
+import {
+  ANALYTICS_EVENTS,
+  Drawer,
+  Loader,
+  SearchBox,
+  useAccountStore,
+  useEvent,
+  useGlobalCopyStore,
+  useGlobalUiStore,
+  useTransactionStore,
+  useUserStore,
+  WidgetContainer,
+  WidgetProps,
+} from '../common'
+
+import { useTransactionsUiStore } from './context/hooks'
+import { DEFAULT_TRANSACTION } from './constants/Transaction'
+import { exportTransactionsToCSV } from './utils/exportTransactionsToCSV'
+import ConnectDrawer from '../common/components/ConnectDrawer'
+import ManualTransactionDetails from './components/shared/transactiondetails/ManualTransactionDetails'
+import TransactionDetails from './components/shared/TransactionDetails'
+import TransactionList from './components/shared/TransactionList'
+import TransactionTable from './components/shared/TransactionTable'
+import AddAccountModal from './components/transactionwidget/AddAccountModal'
+import EditCategoryAction from './components/transactionwidget/actions/EditCategoryAction'
+
+const HEADER_HEIGHT = 120
+
+enum Drawers {
+  AddTransaction = 'addTransaction',
+  Category = 'category',
+  Transaction = 'transaction',
+}
+
+interface TransactionWidgetProps extends WidgetProps {
+  height?: string | number
+  showInsights?: boolean
+}
+
+const TransactionWidget: React.FC<TransactionWidgetProps> = ({
+  onBackClick,
+  height = '100dvh',
+  showInsights = false,
+  sx = {},
+}) => {
+  const { accounts, refreshAccounts } = useAccountStore()
+  const theme = useTheme()
+  const {
+    manualTransaction,
+    isAmountValid,
+    searchValue,
+    setSearchValue,
+    setShowInsights,
+    updateManualTransaction,
+  } = useTransactionsUiStore()
+  const {
+    addTransaction,
+    filter,
+    loadAssociatedBeats,
+    setFilter,
+    tags,
+    transactions,
+    updateTransaction,
+  } = useTransactionStore()
+  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()
+  const { userProfile } = useUserStore()
+  const { onEvent } = useEvent()
+  const {
+    displayedDateRange,
+    isInitialized,
+    selectedAccountGuids,
+    selectedAccounts,
+    setDisplayedDate,
+    setSelectedAccounts,
+  } = useGlobalUiStore()
+
+  const [drawerOpen, setDrawerOpen] = React.useState('')
+  const [transactionGuid, setTransactionGuid] = React.useState('')
+
+  const [addManualAccountModalOpen, setAddManualAccountModalOpen] = React.useState(false)
+  const [showConnectWidget, setShowConnectWidget] = React.useState(false)
+
+  const [isWidgetInitialized, setIsWidgetInitialized] = React.useState(false)
+
+  React.useEffect(() => {
+    setSelectedAccounts(accounts)
+  }, [accounts])
+
+  React.useEffect(() => {
+    const startDate = startOfMonth(startOfToday())
+    const endDate = endOfMonth(startOfToday())
+    // Set the displayed date to the current month
+    setDisplayedDate(startDate, endDate)
+    // Set a Base filter
+    setFilter({
+      dateRange: { start: startDate, end: endDate },
+      accounts: selectedAccounts.map((account) => account.guid),
+    })
+    setIsWidgetInitialized(true)
+    onEvent(ANALYTICS_EVENTS.TRANSACTIONS_VIEW)
+  }, [])
+
+  React.useEffect(() => {
+    // Update the filter whenever the display date or account filter changes
+    if (isWidgetInitialized) {
+      setFilter({
+        ...filter,
+        dateRange: { start: displayedDateRange.start, end: displayedDateRange.end },
+        accounts: selectedAccountGuids,
+      })
+      //load associated beats for new date range
+      loadAssociatedBeats(displayedDateRange.start)
+    }
+  }, [displayedDateRange, selectedAccountGuids])
+
+  React.useEffect(() => {
+    setShowInsights(showInsights)
+  }, [showInsights])
+
+  const manualAccounts = React.useMemo(
+    () => accounts.filter((account) => account.is_manual),
+    [accounts],
+  )
+
+  const transaction = transactionGuid
+    ? transactions.find((transaction) => transaction.guid === transactionGuid)
+    : undefined
+
+  const isTransactionValid =
+    isAmountValid &&
+    Boolean(manualTransaction.payee) &&
+    Boolean(manualTransaction.account_guid) &&
+    Boolean(manualTransaction.category_guid)
+
+  const handleDateChanged = (range: DateRange<Date>) => {
+    setDisplayedDate(range[0] as Date, range[1] as Date)
+  }
+
+  const handleSearch = (searchTerm: string) => {
+    setSearchValue(searchTerm)
+    setFilter({
+      ...filter,
+      searchTerm,
+    })
+    onEvent(ANALYTICS_EVENTS.TRANSACTIONS_CLICK_SEARCH, { search_term: searchTerm })
+  }
+
+  const handleExportCsvClick = () => {
+    exportTransactionsToCSV(transactions, tags)
+    onEvent(ANALYTICS_EVENTS.TRANSACTIONS_CLICK_EXPORT)
+  }
+
+  const handleAddTransactionClick = () => {
+    if (manualAccounts.length > 0) {
+      updateManualTransaction({
+        ...DEFAULT_TRANSACTION,
+        date: getUnixTime(startOfToday()),
+        user_guid: userProfile?.user_guid || '',
+      })
+
+      setDrawerOpen(Drawers.AddTransaction)
+      onEvent(ANALYTICS_EVENTS.TRANSACTIONS_CLICK_ADD)
+    } else {
+      setAddManualAccountModalOpen(true)
+      onEvent(ANALYTICS_EVENTS.TRANSACTIONS_ADD_MANUAL_ACCOUNT_MODAL)
+    }
+  }
+
+  const handleAddTransaction = async () => {
+    if (isTransactionValid) {
+      await addTransaction(manualTransaction)
+    }
+
+    setDrawerOpen('')
+  }
+
+  const handleAddManualAccountClick = () => {
+    setAddManualAccountModalOpen(false)
+    setShowConnectWidget(true)
+  }
+
+  const handleConnectWidgetClose = () => {
+    setShowConnectWidget(false)
+    refreshAccounts()
+  }
+
+  if (!isInitialized || !isWidgetInitialized) {
+    return <Loader />
+  }
+
+  return (
+    <WidgetContainer
+      accountOptions={accounts}
+      actions={[
+        {
+          iconName: 'open_in_new',
+          label: copy.export_csv_btn,
+          onClick: handleExportCsvClick,
+        },
+        {
+          iconName: 'add',
+          label: copy.add_transaction_btn,
+          onClick: handleAddTransactionClick,
+        },
+      ]}
+      calendarActions={{
+        onRangeChanged: handleDateChanged,
+      }}
+      onAccountsFilterClick={() => onEvent(ANALYTICS_EVENTS.ACCOUNTS_CLICK_FILTER)}
+      onBackClick={onBackClick}
+      sx={sx}
+      title={copy.transactions_title}
+    >
+      <Box mt={16}>
+        <SearchBox
+          onChange={handleSearch}
+          placeholder={copy.action_bar_search_placeholder}
+          searchValue={searchValue}
+        />
+      </Box>
+
+      <Box
+        sx={{
+          [theme.breakpoints.down('md')]: { display: 'none' },
+          [theme.breakpoints.up('md')]: { display: 'block' },
+        }}
+      >
+        <TransactionTable
+          height={`calc(${height} - ${HEADER_HEIGHT}px)`}
+          onCategoryClick={(guid: string) => {
+            setTransactionGuid(guid)
+            setDrawerOpen(Drawers.Category)
+          }}
+          onRowClick={(guid: string) => {
+            setTransactionGuid(guid)
+            setDrawerOpen(Drawers.Transaction)
+            onEvent(ANALYTICS_EVENTS.TRANSACTIONS_CLICK_DETAILS, { transaction_guid: guid })
+          }}
+        />
+      </Box>
+      <Box
+        sx={{
+          [theme.breakpoints.down('md')]: { display: 'block' },
+          [theme.breakpoints.up('md')]: { display: 'none' },
+        }}
+      >
+        <TransactionList
+          height={`calc(${height} - ${HEADER_HEIGHT}px)`}
+          onClick={(guid: string) => {
+            setTransactionGuid(guid)
+            setDrawerOpen(Drawers.Transaction)
+          }}
+          showInsights={showInsights}
+        />
+      </Box>
+
+      <Drawer
+        ariaLabelClose={commonCopy.close_aria}
+        isOpen={drawerOpen === Drawers.Transaction}
+        onClose={() => {
+          // mark transaction as viewed
+          if (transaction && !transaction.has_been_viewed) {
+            updateTransaction({ ...transaction, has_been_viewed: true })
+          }
+          setDrawerOpen('')
+        }}
+        title={copy.details_title}
+      >
+        {transaction && <TransactionDetails transaction={transaction} />}
+      </Drawer>
+      {transaction && drawerOpen === Drawers.Category && (
+        <EditCategoryAction
+          onClose={() => {
+            setDrawerOpen('')
+            setTransactionGuid('')
+          }}
+          transaction={transaction}
+        />
+      )}
+      <Drawer
+        ariaLabelClose={commonCopy.close_aria}
+        isOpen={drawerOpen === Drawers.AddTransaction}
+        isPrimaryDisabled={!isTransactionValid}
+        onClose={() => setDrawerOpen('')}
+        onPrimaryAction={handleAddTransaction}
+        title={copy.add_transaction_title}
+      >
+        <ManualTransactionDetails />
+      </Drawer>
+      <AddAccountModal
+        copy={{ title: copy.add_manual_account }}
+        isOpen={addManualAccountModalOpen}
+        onClose={() => {
+          setAddManualAccountModalOpen(false)
+        }}
+        onPrimaryAction={handleAddManualAccountClick}
+      />
+      <ConnectDrawer
+        onClose={handleConnectWidgetClose}
+        showConnectWidget={showConnectWidget}
+        title={copy.add_manual_account}
+      />
+    </WidgetContainer>
+  )
+}
+
+export default observer(TransactionWidget)

package/src/transactions/analytics.ts

@@ -0,0 +1,12 @@
+import { analyticsSession } from '../common'
+import { AnalyticsEventsObjectType } from '../common/types/Analytics'
+
+import { ANALYTICS_EVENTS } from './constants/Analytics'
+
+export type AnalyticSession = Awaited<ReturnType<typeof analyticsSession>>
+
+export const onAnalyticEvent = async (event: string, session: AnalyticSession | null) => {
+  if (!session || !ANALYTICS_EVENTS[event]) return null
+
+  return session.sendAnalyticEvent(ANALYTICS_EVENTS[event] as AnalyticsEventsObjectType)
+}

package/src/transactions/api/TransactionApi.ts

@@ -0,0 +1,204 @@
+import { Fetch } from '../../common'
+import { ApiEndpoints } from '../../common'
+
+import type { Tag, Tagging, Transaction, TransactionRule } from '../../common'
+
+export class TransactionApi {
+  fetchInstance: Fetch
+
+  constructor(endpoint: string, token: string) {
+    this.fetchInstance = new Fetch(endpoint, token)
+  }
+
+  addTag = async (tag: Tag) => {
+    return this.fetchInstance.post(ApiEndpoints.TAGS, tag).then((data) => data.tag)
+  }
+
+  addTagging = async (tagging: Tagging) => {
+    return this.fetchInstance.post(ApiEndpoints.TAGGINGS, tagging).then((data) => data.tagging)
+  }
+
+  addTransaction = async (transaction: Transaction) => {
+    return this.fetchInstance
+      .post(ApiEndpoints.TRANSACTIONS, transaction)
+      .then((data) => data.transaction)
+  }
+
+  addTransactionRule = async (rule: TransactionRule) => {
+    return this.fetchInstance.post(ApiEndpoints.TRANSACTION_RULES, rule).then((data) => data)
+  }
+
+  getTaggings = async () => {
+    return this.fetchInstance
+      .get(ApiEndpoints.TAGGINGS)
+      .then((data) => data.map((item: { tagging: Tagging }) => item.tagging))
+  }
+
+  getTags = async () => {
+    return this.fetchInstance
+      .get(ApiEndpoints.TAGS)
+      .then((data) => data.map((item: { tag: Tag }) => item.tag))
+  }
+
+  getTransactionRules = async () => {
+    return this.fetchInstance
+      .get(ApiEndpoints.TRANSACTION_RULES)
+      .then((data) => data.transaction_rules)
+  }
+
+  getTransactionsByDateRange = async (startDate: number, endDate: number) => {
+    return this.fetchInstance
+      .get(`${ApiEndpoints.TRANSACTIONS}/by_date/${startDate}/${endDate}`)
+      .then((data) => data.map((item: { transaction: Transaction }) => item.transaction))
+  }
+
+  // DEPRECATED
+  getTransactionsByAccountsAndDateRange = async (
+    accountGuids: string[],
+    beginDate: number,
+    endDate: number,
+  ) => {
+    console.warn('DEPRECATED: getTransactionsByAccountsAndDateRange will be removed')
+    const accountsList = accountGuids.reduce(
+      (acc: string, guid: string, i: number) =>
+        `${acc}account_guids[]=${guid}${i !== accountGuids.length - 1 ? '&' : ''}`,
+      '',
+    )
+
+    return this.fetchInstance
+      .get(`${ApiEndpoints.TRANSACTIONS}/by_date/${beginDate}/${endDate}?${accountsList}`)
+      .then((data) => data.map((item: { transaction: Transaction }) => item.transaction))
+  }
+
+  // DEPRECATED
+  getTransactionsByGuids = async (guids: string[]) => {
+    console.warn('DEPRECATED: getTransactionsByGuids will be removed')
+    return this.fetchInstance
+      .post(`${ApiEndpoints.TRANSACTIONS}/by_guids`, { guids: guids.join('+') })
+      .then((data) => data.map((item: { transaction: Transaction }) => item.transaction))
+  }
+
+  // DEPRECATED
+  getTransactionsByCategoryAndDate = async (
+    categoryGuid: string,
+    beginDate: number,
+    endDate: number,
+  ) => {
+    console.warn('DEPRECATED: getTransactionsByCategoryAndDate will be removed')
+    return this.fetchInstance
+      .get(
+        `${ApiEndpoints.TRANSACTIONS}/by_category_guid/${categoryGuid}/by_date/${beginDate}/${endDate}`,
+      )
+      .then((data) => data.map((item: { transaction: Transaction }) => item.transaction))
+  }
+
+  // DEPRECATED
+  getTransactionsByCategoryDateAndAccounts = async (
+    categoryGuid: string,
+    beginDate: number,
+    endDate: number,
+    accountGuids: string[],
+  ) => {
+    console.warn('DEPRECATED: getTransactionsByCategoryDateAndAccounts will be removed')
+    const accountsList = accountGuids.reduce(
+      (acc: string, guid: string, i: number) =>
+        `${acc}account_guids[]=${guid}${i !== accountGuids.length - 1 ? '&' : ''}`,
+      '',
+    )
+
+    return this.fetchInstance
+      .get(
+        `${ApiEndpoints.TRANSACTIONS}/by_category_guid/${categoryGuid}/by_date/${beginDate}/${endDate}?${accountsList}`,
+      )
+      .then((data) => data.map((item: { transaction: Transaction }) => item.transaction))
+  }
+
+  // DEPRECATED
+  getTransactionsByCategoriesDateAndAccounts = async (
+    categoryGuids: string[],
+    beginDate: number,
+    endDate: number,
+    accountGuids: string[],
+  ) => {
+    console.warn('DEPRECATED: getTransactionsByCategoriesDateAndAccounts will be removed')
+    const accountsList = accountGuids.reduce(
+      (acc: string, guid: string, i: number) =>
+        `${acc}account_guids[]=${guid}${i !== accountGuids.length - 1 ? '&' : ''}`,
+      '',
+    )
+
+    return this.fetchInstance
+      .get(
+        `${ApiEndpoints.TRANSACTIONS}/by_category_guids/${categoryGuids.join(
+          '+',
+        )}/by_date/${beginDate}/${endDate}?${accountsList}`,
+      )
+      .then((data) => data.map((item: { transaction: Transaction }) => item.transaction))
+  }
+
+  /**
+   * DEPRECATED
+   * Get all transactions by the top level category, between begin date and end date, and optionally
+   * filtered by accounts
+   * @param categoryGuid The top level category guid
+   * @param beginDate the start date
+   * @param endDate the end date
+   * @param accountGuids an optional list of account guids
+   */
+  getTransactionsByTopLevelCategoryAndDate = async (
+    categoryGuid: string,
+    beginDate: number,
+    endDate: number,
+    accountGuids: string[] = [],
+  ) => {
+    console.warn('DEPRECATED: getTransactionsByTopLevelCategoryAndDate will be removed')
+    let url = `${ApiEndpoints.TRANSACTIONS}/by_top_level_category_guid/${categoryGuid}/by_date/${beginDate}/${endDate}`
+
+    if (accountGuids.length > 0) {
+      const accountsList = accountGuids.reduce(
+        (acc: string, guid: string, i: number) =>
+          `${acc}account_guids[]=${guid}${i !== accountGuids.length - 1 ? '&' : ''}`,
+        '',
+      )
+      url += `?${accountsList}`
+    }
+
+    return this.fetchInstance
+      .get(url)
+      .then((data) => data.map((item: { transaction: Transaction }) => item.transaction))
+  }
+
+  removeTag = async (guid: string) => {
+    return this.fetchInstance.delete(`${ApiEndpoints.TAGS}/${guid}`).then((data) => data)
+  }
+
+  removeTagging = async (guid: string) => {
+    return this.fetchInstance.delete(`${ApiEndpoints.TAGGINGS}/${guid}`).then((data) => data)
+  }
+
+  removeTransaction = async (guid: string) => {
+    return this.fetchInstance.delete(`${ApiEndpoints.TRANSACTIONS}/${guid}`).then((data) => data)
+  }
+
+  removeTransactionSplit = async (guid: string) => {
+    return this.fetchInstance
+      .delete(`${ApiEndpoints.TRANSACTIONS}/${guid}/unsplit`)
+      .then((data) => data)
+  }
+
+  updateTransactionRule = async (rule: TransactionRule) => {
+    return this.fetchInstance
+      .put(`${ApiEndpoints.TRANSACTION_RULES}/${rule.guid}`, rule)
+      .then((data) => data)
+  }
+
+  updateTag = async (tag: Tag) => {
+    return this.fetchInstance.put(`${ApiEndpoints.TAGS}/${tag.guid}`, tag).then((data) => data.tag)
+  }
+
+  updateTransaction = async (transaction: Transaction) => {
+    return this.fetchInstance
+      .put(`${ApiEndpoints.TRANSACTIONS}/${transaction.guid}`, transaction)
+      .then((data) => data.transaction)
+  }
+}

package/src/transactions/api/__mocks__/TransactionApi.ts

@@ -0,0 +1,20 @@
+import { mockData } from '../../../../mock/MockData'
+import { TransactionTestData } from '../../../../mock/unittestdata/TransactionTestData'
+
+export class TransactionApi {
+  getTags() {
+    return mockData.getTags()
+  }
+
+  getTaggings() {
+    return mockData.getTaggings()
+  }
+
+  getTransactionsByDateRange(startDate: number, endDate: number) {
+    return TransactionTestData.transactions.filter((t) => t.date >= startDate && t.date < endDate)
+  }
+
+  getTransactionRules() {
+    return mockData.getTransactionRules()
+  }
+}

package/src/transactions/components/shared/TransactionDetails.tsx

@@ -0,0 +1,140 @@
+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 Paper from '@mui/material/Paper'
+import Stack from '@mui/material/Stack'
+
+import { H1, MerchantLogo, Text, useTokens } from '@kyper/mui'
+
+import { ANALYTICS_EVENTS, formatCurrency, Transaction, useEvent } from '../../../common'
+
+import {
+  BottomActions,
+  DEFAULT_BOTTOM_ACTIONS,
+  DEFAULT_TOP_ACTIONS,
+  TopActions,
+} from '../../constants/Actions'
+import {
+  CategoryAction,
+  DateAction,
+  DeleteAction,
+  DeleteLogoAction,
+  HideAction,
+  MemoAction,
+  SplitAction,
+  TagsAction,
+} from './transactiondetails/actions'
+import Description from './transactiondetails/Description'
+import FlagTransaction from './transactiondetails/FlagTransaction'
+
+export interface TransactionDetailsProps {
+  bottomActions?: BottomActions[]
+  topActions?: TopActions[]
+  transaction: Transaction
+}
+
+const TransactionDetails: React.FC<TransactionDetailsProps> = ({
+  bottomActions = DEFAULT_BOTTOM_ACTIONS,
+  topActions = DEFAULT_TOP_ACTIONS,
+  transaction,
+}) => {
+  const tokens = useTokens()
+  const showFullNumber = transaction?.number && transaction.number.length > 4
+  const { onEvent } = useEvent()
+
+  React.useEffect(
+    () =>
+      onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_VIEW, { transaction_guid: transaction.guid }),
+    [],
+  )
+
+  return (
+    <Box className="mx-txn-transaction-details" width="100%">
+      {transaction && (
+        <Stack>
+          <Stack gap={tokens.Spacing.Small} p={tokens.Spacing.Large}>
+            <Paper elevation={2} sx={{ borderRadius: tokens.BorderRadius.Small, width: 64 }}>
+              <MerchantLogo
+                categoryGuid={transaction.top_level_category_guid || ''}
+                merchantGuid={transaction.merchant_guid || ''}
+                size={64}
+              />
+            </Paper>
+
+            <Description transaction={transaction} />
+
+            <Stack direction="row" justifyContent="space-between">
+              <H1 color={transaction.isIncome ? 'success.main' : 'text.primary'}>
+                {transaction.isIncome ? '+' : ''}
+                {formatCurrency(transaction.amount, '0,0.00')}
+              </H1>
+              <FlagTransaction transaction={transaction} />
+            </Stack>
+
+            <Stack
+              bgcolor="background.highlight"
+              borderRadius={tokens.BorderRadius.Small}
+              gap={tokens.Spacing.Tiny}
+              p={tokens.Spacing.XSmall}
+            >
+              <Text bold={true}>
+                {`${transaction.account}
+                ${
+                  showFullNumber
+                    ? transaction.number
+                    : '\u2022'.repeat(4).concat(transaction.number ?? '')
+                }`}
+              </Text>
+              <Text bold={true} color="secondary" variant="Tiny">
+                {transaction.feed_description}
+              </Text>
+            </Stack>
+          </Stack>
+
+          <Paper square={true} sx={{ boxShadow: 'none' }}>
+            <List>
+              {topActions.map((action, index) => (
+                <React.Fragment key={action}>
+                  {action === TopActions.Category && <CategoryAction transaction={transaction} />}
+                  {action === TopActions.Date && <DateAction transaction={transaction} />}
+                  {action === TopActions.Memo && <MemoAction transaction={transaction} />}
+                  {action === TopActions.Tags && <TagsAction transaction={transaction} />}
+                  <Divider variant={index < topActions.length - 1 ? 'inset' : 'fullWidth'} />
+                </React.Fragment>
+              ))}
+            </List>
+          </Paper>
+
+          <Text bold={true} mb={8} ml={26} mt={16} variant="Body">
+            Actions
+          </Text>
+
+          <Paper square={true} sx={{ boxShadow: 'none' }}>
+            <List>
+              {bottomActions.map((action, index) => (
+                <React.Fragment key={action}>
+                  {action === BottomActions.SplitTransaction && (
+                    <SplitAction transaction={transaction} />
+                  )}
+                  {action === BottomActions.HideTransaction && (
+                    <HideAction transaction={transaction} />
+                  )}
+                  {action === BottomActions.MerchantLogo && (
+                    <DeleteLogoAction transaction={transaction} />
+                  )}
+                  <Divider variant={index < bottomActions.length - 1 ? 'inset' : 'fullWidth'} />
+                </React.Fragment>
+              ))}
+              {transaction.is_manual && <DeleteAction transaction={transaction} />}
+            </List>
+          </Paper>
+        </Stack>
+      )}
+    </Box>
+  )
+}
+
+export default observer(TransactionDetails)