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

package/src/transactions/TransactionWidget.tsx

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

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

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

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

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