diff --git a/src/core/Accounts/Transactions/TransactionDialog.jsx b/src/core/Accounts/Transactions/TransactionDialog.jsx
index 41c8bc9..d47e266 100644
--- a/src/core/Accounts/Transactions/TransactionDialog.jsx
+++ b/src/core/Accounts/Transactions/TransactionDialog.jsx
@@ -24,8 +24,6 @@ import Autocomplete from '@material-ui/lab/Autocomplete'
 import format from 'date-fns/format'
 import parse from 'date-fns/parse'
 import grey from '@material-ui/core/colors/grey'
-import chroma from 'chroma-js'
-import AutoComplete from '../../../common/AutoComplete'
 import ModalDialog from '../../../common/ModalDialog'
 import { createTransaction, updateTransaction } from '../../../store/transactions/actions'
 import LinkTo from '../../../common/LinkTo'
@@ -60,48 +58,28 @@ const styles = (theme) => ({
   accountName: {
     paddingLeft: theme.spacing(2)
   },
-  option: {
-    marginLeft: theme.spacing(2)
+  categoryOption: {
+    marginLeft: theme.spacing(1),
+    marginRight: 8
   },
-  transferLabel: {
-    marginTop: 6,
-    marginBottom: -6
-  }
-})
-
-const dot = (color = '#ccc') => ({
-  alignItems: 'center',
-  display: 'flex',
-  ':before': {
-    backgroundColor: color,
+  categoryDot: {
     borderRadius: 4,
     content: '" "',
-    display: 'block',
-    marginRight: 8,
+    display: 'inline-block',
     height: 15,
-    width: 15
+    width: 15,
+    marginBottom: -2
+  },
+  categoryName: {
+    display: 'inline-block',
+    marginLeft: theme.spacing(1)
+  },
+  transferLabel: {
+    marginTop: 6,
+    marginBottom: -6
   }
 })
 
-const colourStyles = {
-  control: (newStyles) => ({ ...newStyles, backgroundColor: 'white' }),
-  option: (newStyles, { data, isDisabled, isSelected }) => {
-    const color = chroma(data.colour)
-    return {
-      ...newStyles,
-      ...dot(data.colour),
-      cursor: isDisabled ? 'not-allowed' : 'default',
-      ':active': {
-        ...newStyles[':active'],
-        backgroundColor: !isDisabled && (isSelected ? data.colour : color.alpha(0.3).css())
-      }
-    }
-  },
-  input: (newStyles) => ({ ...newStyles, ...dot() }),
-  placeholder: (newStyles) => ({ ...newStyles, ...dot() }),
-  singleValue: (newStyles, { data }) => ({ ...newStyles, ...dot(data.colour) })
-}
-
 const mapStateToProps = ({ budget, accounts }) => ({ budget, accounts })
 
 const mapDispatchToProps = (dispatch) => {
@@ -140,217 +118,243 @@ export const TransactionDialogComponent = ({
   onCancel,
   onDelete,
   open,
+  account,
   transaction,
   budget,
   accounts
-}) => {
-  return (
-    <ModalDialog
-      open={open}
-      title={transaction ? 'Edit transaction' : 'New transaction'}
-      onSubmit={handleSubmit}
-      onCancel={onCancel}
-      onDelete={transaction ? onDelete : undefined}
-      className={classes.root}
-    >
-      <Grid container>
-        <Grid item xs={12}>
-          <RadioGroup
-            row={true}
-            aria-label="transactionType"
-            name="transactionType"
-            value={values.transactionType}
-            onChange={handleChange}
-          >
-            {TRANSACTION_TYPES.map((type) => (
-              <FormControlLabel
-                value={type}
-                key={type}
-                control={<Radio />}
-                label={type.charAt(0).toUpperCase() + type.slice(1)}
-              />
-            ))}
-          </RadioGroup>
-          <TextField
-            autoFocus
-            label="Description"
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start"><DescriptionIcon className={classes.inputIcon} /></InputAdornment>
-              ),
-              inputProps: {
-                'aria-label': 'Description',
-                maxLength: 150
-              }
-            }}
-            className={classes.input}
-            value={values.description}
-            name="description"
-            onChange={handleChange}
-            error={errors.description && touched.description}
-            helperText={errors.description}
-          />
-          <Grid container spacing={4}>
-            <Grid item xs={6}>
-              <TextField
-                type="number"
-                label="Amount"
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start"><AttachMoneyIcon className={classes.inputIcon} /></InputAdornment>
-                  ),
-                  inputProps: {
-                    'aria-label': 'Amount',
-                    step: 0.01,
-                    min: 0,
-                    max: 999999999.99
-                  }
-                }}
-                className={classes.input}
-                value={values.amount}
-                name="amount"
-                onChange={handleChange}
-                error={errors.amount && touched.amount}
-                helperText={errors.amount}
-              />
-            </Grid>
-            <Grid item xs={6}>
-              <TextField
-                type="date"
-                label="Date"
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <CalendarTodayIcon className={classes.inputIcon} />
-                    </InputAdornment>
-                  )
-                }}
-                InputLabelProps={{
-                  shrink: true,
-                  'aria-label': 'Date'
-                }}
-                name="createdAt"
-                className={classes.input}
-                value={values.createdAt}
-                onChange={handleChange}
-                error={errors.createdAt && touched.createdAt}
-                helperText={errors.createdAt}
-              />
-            </Grid>
+}) => (
+  <ModalDialog
+    open={open}
+    title={transaction ? 'Edit transaction' : 'New transaction'}
+    onSubmit={handleSubmit}
+    onCancel={onCancel}
+    onDelete={transaction ? onDelete : undefined}
+    className={classes.root}
+  >
+    <Grid container>
+      <Grid item xs={12}>
+        <RadioGroup
+          row={true}
+          aria-label="transactionType"
+          name="transactionType"
+          value={values.transactionType}
+          onChange={handleChange}
+        >
+          {TRANSACTION_TYPES.map((type) => (
+            <FormControlLabel
+              value={type}
+              key={type}
+              control={<Radio />}
+              label={type.charAt(0).toUpperCase() + type.slice(1)}
+            />
+          ))}
+        </RadioGroup>
+        <TextField
+          autoFocus
+          label="Description"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start"><DescriptionIcon className={classes.inputIcon} /></InputAdornment>
+            ),
+            inputProps: {
+              'aria-label': 'Description',
+              maxLength: 150
+            }
+          }}
+          className={classes.input}
+          value={values.description}
+          name="description"
+          onChange={handleChange}
+          error={errors.description && touched.description}
+          helperText={errors.description}
+        />
+        <Grid container spacing={4}>
+          <Grid item xs={6}>
+            <TextField
+              type="number"
+              label="Amount"
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start"><AttachMoneyIcon className={classes.inputIcon} /></InputAdornment>
+                ),
+                inputProps: {
+                  'aria-label': 'Amount',
+                  step: 0.01,
+                  min: 0,
+                  max: 999999999.99
+                }
+              }}
+              className={classes.input}
+              value={values.amount}
+              name="amount"
+              onChange={handleChange}
+              error={errors.amount && touched.amount}
+              helperText={errors.amount}
+            />
           </Grid>
-          {values.transactionType !== 'transfer' && (
-            <>
-              <AutoComplete
-                className={classes.input}
-                label={(
-                  <div>
-                    Category
-                    <Button
-                      size="small"
-                      color="secondary"
-                      component={LinkTo('/budget-categories')}
-                      className={classes.manageCategoriesLink}
-                    >
-                      Manage categories
-                    </Button>
-                  </div>
-                )}
-                placeholder="Category"
-                name="categoryId"
-                value={values.categoryId}
-                options={budget.categoryTree}
-                onChange={setFieldValue}
-                error={errors.categoryId && touched.categoryId}
-                helperText={errors.categoryId}
-                styles={colourStyles}
-                isClearable={true}
-              />
-              <Tooltip title="Apply category to all transactions with the same description">
-                <FormControlLabel
-                  control={(
-                    <Checkbox
-                      checked={values.createAndApplyRule}
-                      onChange={handleChange}
-                      name="createAndApplyRule"
-                      value={values.createAndApplyRule}
-                    />
-                  )}
-                  label="Apply to all matches"
+          <Grid item xs={6}>
+            <TextField
+              type="date"
+              label="Date"
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <CalendarTodayIcon className={classes.inputIcon} />
+                  </InputAdornment>
+                )
+              }}
+              InputLabelProps={{
+                shrink: true,
+                'aria-label': 'Date'
+              }}
+              name="createdAt"
+              className={classes.input}
+              value={values.createdAt}
+              onChange={handleChange}
+              error={errors.createdAt && touched.createdAt}
+              helperText={errors.createdAt}
+            />
+          </Grid>
+        </Grid>
+        {values.transactionType !== 'transfer' && (
+          <>
+            <Autocomplete
+              size="small"
+              name="category"
+              onChange={(_, item) => {
+                setFieldValue('categoryId', item ? item.id : null)
+                setFieldValue('category', item)
+              }}
+              className={classes.input}
+              options={Object.values(budget.categoriesById).filter((category) => 'parentId' in category)}
+              groupBy={(option) => budget.categoriesById[option.parentId].name}
+              getOptionLabel={(option) => option.name}
+              noOptionsText="No category found"
+              value={values.category}
+              renderOption={(option) => (
+                <div className={classes.categoryOption}>
+                  <div className={classes.categoryDot} style={{ backgroundColor: option.colour }} />
+                  <div className={classes.categoryName}>{option.name}</div>
+                </div>
+              )}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  label="Category"
+                  fullWidth
+                  InputProps={{
+                    ...params.InputProps,
+                    startAdornment: values.category && (
+                      <InputAdornment position="start">
+                        <div className={classes.categoryDot} style={{ backgroundColor: values.category.colour }} />
+                      </InputAdornment>
+                    )
+                  }}
                 />
-              </Tooltip>
-            </>
-          )}
-          {values.transactionType === 'transfer' && (
+              )}
+            />
             <Grid container spacing={2}>
-              <Grid item xs={4}>
-                <FormControl>
-                  <Typography variant="caption" className={classes.transferLabel}>Transfer</Typography>
-                  <RadioGroup
-                    row={true}
-                    aria-label="Transfer direction"
-                    name="transferDirection"
-                    value={values.transferDirection}
-                    onChange={handleChange}
-                  >
-                    <FormControlLabel value="from" control={<Radio />} label="From" />
-                    <FormControlLabel value="to" control={<Radio />} label="To" />
-                  </RadioGroup>
-                </FormControl>
-              </Grid>
               <Grid item xs={8}>
-                <Autocomplete
-                  autoHighlight
-                  autoSelect
+                <Tooltip title="Apply category to all transactions with the same description">
+                  <FormControlLabel
+                    control={(
+                      <Checkbox
+                        checked={values.createAndApplyRule}
+                        onChange={handleChange}
+                        name="createAndApplyRule"
+                        value={values.createAndApplyRule}
+                      />
+                    )}
+                    label="Apply to all matches"
+                  />
+                </Tooltip>
+              </Grid>
+              <Grid item xs={4}>
+                <Button
                   size="small"
-                  name="transferAccount"
-                  onChange={(_, account) => setFieldValue('transferAccountId', account ? account.id : null)}
-                  className={classes.input}
-                  classes={{ option: classes.option }}
-                  options={Object.values(accounts.byId).filter((account) => account.id !== transaction.accountId)}
-                  groupBy={(option) => option.institution}
-                  getOptionLabel={(option) => option.name}
-                  noOptionsText="No accounts found"
-                  value={values.transferAccount}
-                  renderInput={(params) => (
-                    <TextField
-                      {...params}
-                      label="Account"
-                      fullWidth
-                    />
-                  )}
-                />
+                  color="secondary"
+                  component={LinkTo('/budget-categories')}
+                  className={classes.manageCategoriesLink}
+                >
+                  Manage categories
+                </Button>
               </Grid>
             </Grid>
-          )}
-          <TextField
-            type="notes"
-            label="Notes"
-            InputLabelProps={{
-              shrink: true,
-              'aria-label': 'Notes'
-            }}
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start"><NoteIcon className={classes.inputIcon} /></InputAdornment>
-              ),
-              inputProps: {
-                length: 2
-              }
-            }}
-            name="notes"
-            multiline
-            rowsMax="4"
-            className={classes.input}
-            value={values.notes}
-            onChange={handleChange}
-            error={errors.notes && touched.notes}
-            helperText={errors.notes}
-          />
-        </Grid>
+          </>
+        )}
+        {values.transactionType === 'transfer' && (
+          <Grid container spacing={2}>
+            <Grid item xs={4}>
+              <FormControl>
+                <Typography variant="caption" className={classes.transferLabel}>Transfer</Typography>
+                <RadioGroup
+                  row={true}
+                  aria-label="Transfer direction"
+                  name="transferDirection"
+                  value={values.transferDirection}
+                  onChange={handleChange}
+                >
+                  <FormControlLabel value="from" control={<Radio />} label="From" />
+                  <FormControlLabel value="to" control={<Radio />} label="To" />
+                </RadioGroup>
+              </FormControl>
+            </Grid>
+            <Grid item xs={8}>
+              <Autocomplete
+                autoHighlight
+                autoSelect
+                size="small"
+                name="transferAccount"
+                onChange={(_, item) => {
+                  setFieldValue('transferAccountId', item ? item.id : null)
+                  setFieldValue('transferAccount', item)
+                }}
+                className={classes.input}
+                classes={{ option: classes.accountName }}
+                options={Object.values(accounts.byId).filter((a) => account.id !== a.id)}
+                groupBy={(option) => option.institution}
+                getOptionLabel={(option) => option.name}
+                noOptionsText="No accounts found"
+                value={values.transferAccount}
+                renderInput={(params) => (
+                  <TextField
+                    {...params}
+                    label="Account"
+                    fullWidth
+                  />
+                )}
+              />
+            </Grid>
+          </Grid>
+        )}
+        <TextField
+          type="notes"
+          label="Notes"
+          InputLabelProps={{
+            shrink: true,
+            'aria-label': 'Notes'
+          }}
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start"><NoteIcon className={classes.inputIcon} /></InputAdornment>
+            ),
+            inputProps: {
+              length: 2
+            }
+          }}
+          name="notes"
+          multiline
+          rowsMax="4"
+          className={classes.input}
+          value={values.notes}
+          onChange={handleChange}
+          error={errors.notes && touched.notes}
+          helperText={errors.notes}
+        />
       </Grid>
-    </ModalDialog>
-  )
-}
+    </Grid>
+  </ModalDialog>
+)
 
 TransactionDialogComponent.propTypes = {
   classes: PropTypes.object.isRequired,
@@ -365,6 +369,7 @@ TransactionDialogComponent.propTypes = {
   onDelete: PropTypes.func.isRequired,
   budget: PropTypes.object.isRequired,
   transaction: PropTypes.object,
+  account: PropTypes.object.isRequired,
   accounts: PropTypes.object.isRequired
 }
 
@@ -383,6 +388,7 @@ export default compose(
           transactionType: 'expense',
           description: '',
           categoryId: null,
+          category: null,
           createAndApplyRule: true,
           amount: '',
           transferDirection: 'to',
@@ -398,12 +404,7 @@ export default compose(
         transactionType: getTransactioType(transaction),
         amount: Math.abs(transaction.amount.accountCurrency),
         createAndApplyRule: true,
-        categoryId: transaction.categoryId === undefined ? null : {
-          id: budget.categoriesById[transaction.categoryId].id,
-          label: budget.categoriesById[transaction.categoryId].name,
-          value: budget.categoriesById[transaction.categoryId].name,
-          colour: budget.categoriesById[transaction.categoryId].colour
-        },
+        category: transaction.categoryId ? budget.categoriesById[transaction.categoryId] : null,
         notes: transaction.notes || '',
         transferDirection: transaction.transferDirection || 'to',
         transferAccount: transaction.transferAccountId ? accounts.byId[transaction.transferAccountId] : null,
@@ -430,6 +431,7 @@ export default compose(
         .required('Please select the date of this transaction')
     }),
     handleSubmit: (values, { props, setSubmitting, resetForm }) => {
+      console.log(values)
       setSubmitting(true)
       const { createAndApplyRule, ...rest } = values
       props.handleSave(
@@ -440,7 +442,7 @@ export default compose(
             accountCurrency: getAmount(values),
             localCurrency: null
           },
-          categoryId: (values.categoryId === null ? undefined : values.categoryId.id),
+          categoryId: (!values.categoryId || values.transactionType === 'transfer' ? undefined : values.categoryId),
           transferAccountId: values.transactionType === 'transfer' ? values.transferAccountId : null,
           notes: values.notes ? values.notes.trim() : null,
           createdAt: parse(values.createdAt, 'yyyy-M-d', new Date()).getTime()
diff --git a/src/core/Accounts/Transactions/TransactionsTable.jsx b/src/core/Accounts/Transactions/TransactionsTable.jsx
index 8bdeb63..0e9242f 100644
--- a/src/core/Accounts/Transactions/TransactionsTable.jsx
+++ b/src/core/Accounts/Transactions/TransactionsTable.jsx
@@ -9,6 +9,7 @@ import Checkbox from '@material-ui/core/Checkbox'
 import grey from '@material-ui/core/colors/grey'
 import Chip from '@material-ui/core/Chip'
 import Tooltip from '@material-ui/core/Tooltip'
+import Typography from '@material-ui/core/Typography'
 import NoteIcon from '@material-ui/icons/Note'
 import Icon from '@mdi/react'
 import Link from '@material-ui/core/Link'
@@ -335,26 +336,9 @@ export class TransactionsTableComponent extends React.Component {
                 flexGrow={1}
                 cellRenderer={
                   ({ rowData }) => {
-                    const icons = []
-                    if (rowData.transferAccountId && accounts.byId[rowData.transferAccountId]) {
-                      const transferAccount = accounts.byId[rowData.transferAccountId]
-                      let title = `Transfer ${rowData.transferDirection} ${transferAccount.name} account`
-                      if (transferAccount.institution !== account.institution) {
-                        title += ` at ${transferAccount.institution}`
-                      }
-                      icons.push(
-                        <Tooltip title={title}>
-                          <Icon
-                            path={mdiTransfer}
-                            size={1}
-                            color="rgba(0, 0, 0, 0.54)"
-                            className={classes.icons}
-                          />
-                        </Tooltip>
-                      )
-                    }
+                    let commentIcon
                     if (rowData.notes) {
-                      icons.push(
+                      commentIcon = (
                         <Tooltip title={rowData.notes}>
                           <NoteIcon fontSize="small" titleAccess="notes" className={classes.icons} />
                         </Tooltip>
@@ -362,7 +346,7 @@ export class TransactionsTableComponent extends React.Component {
                     }
                     return (
                       <Link onClick={() => toolbarProps.handleEdit(rowData)} className={classes.link} underline="none">
-                        {icons[0]} {icons[1]} {rowData.description}
+                        {commentIcon} {rowData.description}
                       </Link>
                     )
                   }
@@ -374,6 +358,28 @@ export class TransactionsTableComponent extends React.Component {
                 dataKey="categoryId"
                 cellRenderer={
                   ({ rowData }) => {
+                    if (rowData.transferAccountId && accounts.byId[rowData.transferAccountId]) {
+                      const transferAccount = accounts.byId[rowData.transferAccountId]
+                      const transferLabel = ` ${rowData.transferDirection} ${transferAccount.name}`
+                      let title = `Transfer ${transferLabel}`
+                      if (transferAccount.institution !== account.institution) {
+                        title += ` at ${transferAccount.institution}`
+                      }
+                      return (
+                        <Tooltip title={title}>
+                          <Typography variant="caption">
+                            <Icon
+                              path={mdiTransfer}
+                              size={1}
+                              color="rgba(0, 0, 0, 0.54)"
+                              className={classes.icons}
+                            />
+                            {transferLabel}
+                          </Typography>
+                        </Tooltip>
+                      )
+                    }
+
                     if (rowData.categoryId === undefined) return null
                     const category = budget.categoriesById[rowData.categoryId]
                     if (category === undefined) return null
diff --git a/src/core/Accounts/Transactions/__tests__/TransactionDialog.test.jsx b/src/core/Accounts/Transactions/__tests__/TransactionDialog.test.jsx
index c902133..02391a3 100644
--- a/src/core/Accounts/Transactions/__tests__/TransactionDialog.test.jsx
+++ b/src/core/Accounts/Transactions/__tests__/TransactionDialog.test.jsx
@@ -1,19 +1,15 @@
 import React from 'react'
-import { mount } from 'enzyme'
-import { Provider } from 'react-redux'
-import { BrowserRouter } from 'react-router-dom'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
 import configureMockStore from 'redux-mock-store'
+import { MemoryRouter } from 'react-router-dom'
+import { Provider } from 'react-redux'
 import TransactionDialog from '../TransactionDialog'
 import ThemeProvider from '../../../ThemeProvider'
 import { initialState as settingsInitialState } from '../../../../store/settings/reducer'
 import { groupByInstitution } from '../../../../store/accounts/reducer'
 import { initialState as budgetInitialState } from '../../../../store/budget/reducer'
 
-beforeEach(() => {
-  jest.resetModules()
-  jest.clearAllMocks()
-})
-
 const account = {
   id: 1,
   name: 'Checking',
@@ -24,33 +20,57 @@ const account = {
   currency: settingsInitialState.currency
 }
 
-describe('ConfirmDialog', () => {
-  const mockHandleCancel = jest.fn()
-  const mockHandleDelete = jest.fn()
-
-  it('matches snapshot', () => {
-    const mockStore = configureMockStore()
-    const byId = { [account.id]: account }
-    const store = mockStore({
-      accounts: { byId, byInstitution: groupByInstitution({ byId, byInstitution: {} }) },
-      settings: settingsInitialState,
-      budget: budgetInitialState
+const mockHandleCancel = jest.fn()
+const mockHandleDelete = jest.fn()
+
+const renderContent = (props) => {
+  const mockStore = configureMockStore()
+  const byId = { [account.id]: account }
+  const store = mockStore({
+    accounts: { byId, byInstitution: groupByInstitution({ byId, byInstitution: {} }) },
+    settings: settingsInitialState,
+    budget: budgetInitialState
+  })
+
+  const newProps = {
+    open: true,
+    onCancel: mockHandleCancel,
+    onDelete: mockHandleDelete,
+    account,
+    transaction: null,
+    ...props
+  }
+  return {
+    ...render(
+      <Provider store={store}>
+        <ThemeProvider>
+          <MemoryRouter initialEntries={[`/accounts/${account.id}/import/CSV`]} initialIndex={0}>
+            <TransactionDialog {...newProps} />
+          </MemoryRouter>
+        </ThemeProvider>
+      </Provider>
+    ),
+    props
+  }
+}
+
+describe('TransactionDialog', () => {
+  it('renders correctly in new mode', async () => {
+    const { getByText } = await renderContent()
+
+    expect(getByText('New transaction')).toBeInTheDocument()
+  })
+
+  it('renders correctly in edit mode', async () => {
+    const { getByText } = await renderContent({
+      transaction: {
+        id: 1,
+        accountId: account.id,
+        createdAt: new Date('2019-01-01').getTime(),
+        amount: { accountCurrency: 1 }
+      }
     })
-    const wrapper = mount((
-      <BrowserRouter>
-        <Provider store={store}>
-          <ThemeProvider>
-            <TransactionDialog
-              open={true}
-              onCancel={mockHandleCancel}
-              onDelete={mockHandleDelete}
-              account={{ id: 1 }}
-              transaction={{ id: 1, createdAt: new Date('2019-01-01'), amount: { accountCurrency: 1 } }}
-            />
-          </ThemeProvider>
-        </Provider>
-      </BrowserRouter>
-    ))
-    expect(wrapper.debug()).toMatchSnapshot()
+
+    expect(getByText('Edit transaction')).toBeInTheDocument()
   })
 })
diff --git a/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionDialog.test.jsx.snap b/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionDialog.test.jsx.snap
deleted file mode 100644
index 9277600..0000000
--- a/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionDialog.test.jsx.snap
+++ /dev/null
@@ -1,787 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ConfirmDialog matches snapshot 1`] = `
-"<BrowserRouter>
-  <Router history={{...}}>
-    <Provider store={{...}}>
-      <ThemeProvider>
-        <CssBaseline>
-          <ThemeProvider theme={{...}}>
-            <Connect(WithStyles(WithFormik(TransactionDialogComponent))) open={true} onCancel={[Function: mockConstructor]} onDelete={[Function: mockConstructor]} account={{...}} transaction={{...}}>
-              <WithStyles(WithFormik(TransactionDialogComponent)) open={true} onCancel={[Function: mockConstructor]} onDelete={[Function: mockConstructor]} account={{...}} transaction={{...}} budget={{...}} accounts={{...}} handleSave={[Function: handleSave]}>
-                <WithFormik(TransactionDialogComponent) classes={{...}} open={true} onCancel={[Function: mockConstructor]} onDelete={[Function: mockConstructor]} account={{...}} transaction={{...}} budget={{...}} accounts={{...}} handleSave={[Function: handleSave]}>
-                  <Formik classes={{...}} open={true} onCancel={[Function: mockConstructor]} onDelete={[Function: mockConstructor]} account={{...}} transaction={{...}} budget={{...}} accounts={{...}} handleSave={[Function: handleSave]} enableReinitialize={true} validationSchema={[Function]} handleSubmit={[Function: handleSubmit]} validate={[undefined]} initialValues={{...}} initialStatus={[undefined]} initialErrors={[undefined]} initialTouched={[undefined]} onSubmit={[Function]}>
-                    <TransactionDialogComponent classes={{...}} open={true} onCancel={[Function: mockConstructor]} onDelete={[Function: mockConstructor]} account={{...}} transaction={{...}} budget={{...}} accounts={{...}} handleSave={[Function: handleSave]} values={{...}} errors={{...}} touched={{...}} status={[undefined]} isSubmitting={false} isValidating={false} submitCount={0} initialValues={{...}} initialErrors={{...}} initialTouched={{...}} initialStatus={[undefined]} handleBlur={[Function]} handleChange={[Function]} handleReset={[Function]} handleSubmit={[Function]} resetForm={[Function]} setErrors={[Function]} setFormikState={[Function]} setFieldTouched={[Function]} setFieldValue={[Function]} setFieldError={[Function]} setStatus={[Function]} setSubmitting={[Function]} setTouched={[Function]} setValues={[Function]} submitForm={[Function]} validateForm={[Function]} validateField={[Function]} isValid={true} dirty={false} unregisterField={[Function]} registerField={[Function]} getFieldProps={[Function]} getFieldMeta={[Function]} validateOnBlur={true} validateOnChange={true} validateOnMount={false}>
-                      <ModalDialog open={true} title=\\"Edit transaction\\" onSubmit={[Function]} onCancel={[Function: mockConstructor]} onDelete={[Function: mockConstructor]} className=\\"WithFormik(TransactionDialogComponent)-root-1\\">
-                        <WithStyles(ForwardRef(Dialog)) aria-labelledby=\\"form-dialog-title\\" open={true} scroll=\\"body\\" fullWidth={true} onClose={[Function: mockConstructor]} className=\\"WithFormik(TransactionDialogComponent)-root-1\\">
-                          <ForwardRef(Dialog) classes={{...}} aria-labelledby=\\"form-dialog-title\\" open={true} scroll=\\"body\\" fullWidth={true} onClose={[Function: mockConstructor]} className=\\"WithFormik(TransactionDialogComponent)-root-1\\">
-                            <ForwardRef(Modal) className=\\"MuiDialog-root WithFormik(TransactionDialogComponent)-root-1\\" BackdropComponent={{...}} BackdropProps={{...}} closeAfterTransition={true} disableBackdropClick={false} disableEscapeKeyDown={false} onEscapeKeyDown={[undefined]} onClose={[Function: mockConstructor]} open={true}>
-                              <ForwardRef(Portal) container={[undefined]} disablePortal={false}>
-                                <Portal containerInfo={{...}}>
-                                  <div onKeyDown={[Function: handleKeyDown]} role=\\"presentation\\" className=\\"MuiDialog-root WithFormik(TransactionDialogComponent)-root-1\\" style={{...}}>
-                                    <WithStyles(ForwardRef(Backdrop)) open={true} onClick={[Function: handleBackdropClick]} transitionDuration={{...}}>
-                                      <ForwardRef(Backdrop) classes={{...}} open={true} onClick={[Function: handleBackdropClick]} transitionDuration={{...}}>
-                                        <ForwardRef(Fade) in={true} timeout={{...}} onClick={[Function: handleBackdropClick]}>
-                                          <Transition appear={true} in={true} onEnter={[Function: handleEnter]} onExit={[Function: handleExit]} timeout={{...}} onClick={[Function: handleBackdropClick]} mountOnEnter={false} unmountOnExit={false} enter={true} exit={true} onEntering={[Function: noop]} onEntered={[Function: noop]} onExiting={[Function: noop]} onExited={[Function: noop]}>
-                                            <div className=\\"MuiBackdrop-root\\" aria-hidden={true} style={{...}} onClick={[Function: handleBackdropClick]} />
-                                          </Transition>
-                                        </ForwardRef(Fade)>
-                                      </ForwardRef(Backdrop)>
-                                    </WithStyles(ForwardRef(Backdrop))>
-                                    <TrapFocus disableEnforceFocus={false} disableAutoFocus={false} disableRestoreFocus={false} getDoc={[Function: getDoc]} isEnabled={[Function]} open={true}>
-                                      <div tabIndex={0} data-test=\\"sentinelStart\\" />
-                                      <ForwardRef(Fade) appear={true} in={true} timeout={{...}} onEnter={[Function: chainedFunction]} onEntering={[undefined]} onEntered={[undefined]} onExit={[undefined]} onExiting={[undefined]} onExited={[Function: chainedFunction]} role=\\"none presentation\\" tabIndex=\\"-1\\">
-                                        <Transition appear={true} in={true} onEnter={[Function: handleEnter]} onExit={[Function: handleExit]} timeout={{...}} onEntering={[Function: noop]} onEntered={[Function: noop]} onExiting={[Function: noop]} onExited={[Function: chainedFunction]} role=\\"none presentation\\" tabIndex=\\"-1\\" mountOnEnter={false} unmountOnExit={false} enter={true} exit={true}>
-                                          <div className=\\"MuiDialog-container MuiDialog-scrollBody\\" onClick={[Function: handleBackdropClick]} onMouseDown={[Function: handleMouseDown]} style={{...}} role=\\"none presentation\\" tabIndex=\\"-1\\">
-                                            <WithStyles(ForwardRef(Paper)) elevation={24} role=\\"dialog\\" aria-describedby={[undefined]} aria-labelledby=\\"form-dialog-title\\" className=\\"MuiDialog-paper MuiDialog-paperScrollBody MuiDialog-paperWidthSm MuiDialog-paperFullWidth\\">
-                                              <ForwardRef(Paper) classes={{...}} elevation={24} role=\\"dialog\\" aria-describedby={[undefined]} aria-labelledby=\\"form-dialog-title\\" className=\\"MuiDialog-paper MuiDialog-paperScrollBody MuiDialog-paperWidthSm MuiDialog-paperFullWidth\\">
-                                                <div className=\\"MuiPaper-root MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollBody MuiDialog-paperWidthSm MuiDialog-paperFullWidth MuiPaper-rounded\\" role=\\"dialog\\" aria-describedby={[undefined]} aria-labelledby=\\"form-dialog-title\\">
-                                                  <div className=\\"makeStyles-dialogMargin-9\\">
-                                                    <WithStyles(ForwardRef(DialogTitle)) disableTypography={true} className=\\"makeStyles-formHeader-10\\">
-                                                      <ForwardRef(DialogTitle) classes={{...}} disableTypography={true} className=\\"makeStyles-formHeader-10\\">
-                                                        <div className=\\"MuiDialogTitle-root makeStyles-formHeader-10\\">
-                                                          <WithStyles(ForwardRef(Typography)) variant=\\"h6\\">
-                                                            <ForwardRef(Typography) classes={{...}} variant=\\"h6\\">
-                                                              <h6 className=\\"MuiTypography-root MuiTypography-h6\\">
-                                                                Edit transaction
-                                                              </h6>
-                                                            </ForwardRef(Typography)>
-                                                          </WithStyles(ForwardRef(Typography))>
-                                                          <WithStyles(ForwardRef(IconButton)) aria-label=\\"Close\\" onClick={[Function: mockConstructor]} className=\\"makeStyles-closeButton-11\\">
-                                                            <ForwardRef(IconButton) classes={{...}} aria-label=\\"Close\\" onClick={[Function: mockConstructor]} className=\\"makeStyles-closeButton-11\\">
-                                                              <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root makeStyles-closeButton-11\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Close\\" onClick={[Function: mockConstructor]}>
-                                                                <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root makeStyles-closeButton-11\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Close\\" onClick={[Function: mockConstructor]}>
-                                                                  <button className=\\"MuiButtonBase-root MuiIconButton-root makeStyles-closeButton-11\\" onBlur={[Function]} onClick={[Function: mockConstructor]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Close\\">
-                                                                    <span className=\\"MuiIconButton-label\\">
-                                                                      <ForwardRef>
-                                                                        <WithStyles(ForwardRef(SvgIcon))>
-                                                                          <ForwardRef(SvgIcon) classes={{...}}>
-                                                                            <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
-                                                                              <path d=\\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\\" />
-                                                                            </svg>
-                                                                          </ForwardRef(SvgIcon)>
-                                                                        </WithStyles(ForwardRef(SvgIcon))>
-                                                                      </ForwardRef>
-                                                                    </span>
-                                                                    <NoSsr>
-                                                                      <WithStyles(undefined) center={true}>
-                                                                        <ForwardRef(TouchRipple) classes={{...}} center={true}>
-                                                                          <span className=\\"MuiTouchRipple-root\\">
-                                                                            <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
-                                                                          </span>
-                                                                        </ForwardRef(TouchRipple)>
-                                                                      </WithStyles(undefined)>
-                                                                    </NoSsr>
-                                                                  </button>
-                                                                </ForwardRef(ButtonBase)>
-                                                              </WithStyles(ForwardRef(ButtonBase))>
-                                                            </ForwardRef(IconButton)>
-                                                          </WithStyles(ForwardRef(IconButton))>
-                                                        </div>
-                                                      </ForwardRef(DialogTitle)>
-                                                    </WithStyles(ForwardRef(DialogTitle))>
-                                                    <form onSubmit={[Function]}>
-                                                      <WithStyles(ForwardRef(DialogContent))>
-                                                        <ForwardRef(DialogContent) classes={{...}}>
-                                                          <div className=\\"MuiDialogContent-root\\">
-                                                            <WithStyles(ForwardRef(Grid)) container={true}>
-                                                              <ForwardRef(Grid) classes={{...}} container={true}>
-                                                                <div className=\\"MuiGrid-root MuiGrid-container\\">
-                                                                  <WithStyles(ForwardRef(Grid)) item={true} xs={12}>
-                                                                    <ForwardRef(Grid) classes={{...}} item={true} xs={12}>
-                                                                      <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12\\">
-                                                                        <ForwardRef(RadioGroup) row={true} aria-label=\\"transactionType\\" name=\\"transactionType\\" value=\\"income\\" onChange={[Function]}>
-                                                                          <WithStyles(ForwardRef(FormGroup)) role=\\"radiogroup\\" row={true} aria-label=\\"transactionType\\">
-                                                                            <ForwardRef(FormGroup) classes={{...}} role=\\"radiogroup\\" row={true} aria-label=\\"transactionType\\">
-                                                                              <div className=\\"MuiFormGroup-root MuiFormGroup-row\\" role=\\"radiogroup\\" aria-label=\\"transactionType\\">
-                                                                                <WithStyles(ForwardRef(FormControlLabel)) value=\\"expense\\" control={{...}} label=\\"Expense\\">
-                                                                                  <ForwardRef(FormControlLabel) classes={{...}} value=\\"expense\\" control={{...}} label=\\"Expense\\">
-                                                                                    <label className=\\"MuiFormControlLabel-root\\">
-                                                                                      <WithStyles(ForwardRef(Radio)) disabled={[undefined]} value=\\"expense\\">
-                                                                                        <ForwardRef(Radio) classes={{...}} disabled={[undefined]} value=\\"expense\\">
-                                                                                          <WithStyles(ForwardRef(SwitchBase)) color=\\"secondary\\" type=\\"radio\\" icon={{...}} checkedIcon={{...}} classes={{...}} name=\\"transactionType\\" checked={false} onChange={[Function: chainedFunction]} disabled={false} value=\\"expense\\">
-                                                                                            <ForwardRef(SwitchBase) classes={{...}} color=\\"secondary\\" type=\\"radio\\" icon={{...}} checkedIcon={{...}} name=\\"transactionType\\" checked={false} onChange={[Function: chainedFunction]} disabled={false} value=\\"expense\\">
-                                                                                              <WithStyles(ForwardRef(IconButton)) component=\\"span\\" className=\\"PrivateSwitchBase-root-229 MuiRadio-root MuiRadio-colorSecondary\\" disabled={false} tabIndex={{...}} role={[undefined]} onFocus={[Function: handleFocus]} onBlur={[Function: handleBlur]} color=\\"secondary\\">
-                                                                                                <ForwardRef(IconButton) classes={{...}} component=\\"span\\" className=\\"PrivateSwitchBase-root-229 MuiRadio-root MuiRadio-colorSecondary\\" disabled={false} tabIndex={{...}} role={[undefined]} onFocus={[Function: handleFocus]} onBlur={[Function: handleBlur]} color=\\"secondary\\">
-                                                                                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root PrivateSwitchBase-root-229 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary\\" centerRipple={true} focusRipple={true} disabled={false} component=\\"span\\" tabIndex={{...}} role={[undefined]} onFocus={[Function: handleFocus]} onBlur={[Function: handleBlur]}>
-                                                                                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root PrivateSwitchBase-root-229 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary\\" centerRipple={true} focusRipple={true} disabled={false} component=\\"span\\" tabIndex={{...}} role={[undefined]} onFocus={[Function: handleFocus]} onBlur={[Function: handleBlur]}>
-                                                                                                      <span className=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-229 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary\\" onBlur={[Function]} onClick={[undefined]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={{...}} role={[undefined]} aria-disabled={false}>
-                                                                                                        <span className=\\"MuiIconButton-label\\">
-                                                                                                          <input autoFocus={[undefined]} checked={false} defaultChecked={[undefined]} className=\\"PrivateSwitchBase-input-232\\" disabled={false} id={[undefined]} name=\\"transactionType\\" onChange={[Function: handleInputChange]} readOnly={[undefined]} required={[undefined]} tabIndex={[undefined]} type=\\"radio\\" value=\\"expense\\" />
-                                                                                                          <WithStyles(RadioButtonIcon)>
-                                                                                                            <RadioButtonIcon classes={{...}}>
-                                                                                                              <div className=\\"PrivateRadioButtonIcon-root-233\\">
-                                                                                                                <ForwardRef>
-                                                                                                                  <WithStyles(ForwardRef(SvgIcon))>
-                                                                                                                    <ForwardRef(SvgIcon) classes={{...}}>
-                                                                                                                      <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
-                                                                                                                        <path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\\" />
-                                                                                                                      </svg>
-                                                                                                                    </ForwardRef(SvgIcon)>
-                                                                                                                  </WithStyles(ForwardRef(SvgIcon))>
-                                                                                                                </ForwardRef>
-                                                                                                                <ForwardRef className=\\"PrivateRadioButtonIcon-layer-234\\">
-                                                                                                                  <WithStyles(ForwardRef(SvgIcon)) className=\\"PrivateRadioButtonIcon-layer-234\\">
-                                                                                                                    <ForwardRef(SvgIcon) classes={{...}} className=\\"PrivateRadioButtonIcon-layer-234\\">
-                                                                                                                      <svg className=\\"MuiSvgIcon-root PrivateRadioButtonIcon-layer-234\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
-                                                                                                                        <path d=\\"M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z\\" />
-                                                                                                                      </svg>
-                                                                                                                    </ForwardRef(SvgIcon)>
-                                                                                                                  </WithStyles(ForwardRef(SvgIcon))>
-                                                                                                                </ForwardRef>
-                                                                                                              </div>
-                                                                                                            </RadioButtonIcon>
-                                                                                                          </WithStyles(RadioButtonIcon)>
-                                                                                                        </span>
-                                                                                                        <NoSsr>
-                                                                                                          <WithStyles(undefined) center={true}>
-                                                                                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
-                                                                                                              <span className=\\"MuiTouchRipple-root\\">
-                                                                                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
-                                                                                                              </span>
-                                                                                                            </ForwardRef(TouchRipple)>
-                                                                                                          </WithStyles(undefined)>
-                                                                                                        </NoSsr>
-                                                                                                      </span>
-                                                                                                    </ForwardRef(ButtonBase)>
-                                                                                                  </WithStyles(ForwardRef(ButtonBase))>
-                                                                                                </ForwardRef(IconButton)>
-                                                                                              </WithStyles(ForwardRef(IconButton))>
-                                                                                            </ForwardRef(SwitchBase)>
-                                                                                          </WithStyles(ForwardRef(SwitchBase))>
-                                                                                        </ForwardRef(Radio)>
-                                                                                      </WithStyles(ForwardRef(Radio))>
-                                                                                      <WithStyles(ForwardRef(Typography)) component=\\"span\\" className=\\"MuiFormControlLabel-label\\">
-                                                                                        <ForwardRef(Typography) classes={{...}} component=\\"span\\" className=\\"MuiFormControlLabel-label\\">
-                                                                                          <span className=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">
-                                                                                            Expense
-                                                                                          </span>
-                                                                                        </ForwardRef(Typography)>
-                                                                                      </WithStyles(ForwardRef(Typography))>
-                                                                                    </label>
-                                                                                  </ForwardRef(FormControlLabel)>
-                                                                                </WithStyles(ForwardRef(FormControlLabel))>
-                                                                                <WithStyles(ForwardRef(FormControlLabel)) value=\\"income\\" control={{...}} label=\\"Income\\">
-                                                                                  <ForwardRef(FormControlLabel) classes={{...}} value=\\"income\\" control={{...}} label=\\"Income\\">
-                                                                                    <label className=\\"MuiFormControlLabel-root\\">
-                                                                                      <WithStyles(ForwardRef(Radio)) disabled={[undefined]} value=\\"income\\">
-                                                                                        <ForwardRef(Radio) classes={{...}} disabled={[undefined]} value=\\"income\\">
-                                                                                          <WithStyles(ForwardRef(SwitchBase)) color=\\"secondary\\" type=\\"radio\\" icon={{...}} checkedIcon={{...}} classes={{...}} name=\\"transactionType\\" checked={true} onChange={[Function: chainedFunction]} disabled={false} value=\\"income\\">
-                                                                                            <ForwardRef(SwitchBase) classes={{...}} color=\\"secondary\\" type=\\"radio\\" icon={{...}} checkedIcon={{...}} name=\\"transactionType\\" checked={true} onChange={[Function: chainedFunction]} disabled={false} value=\\"income\\">
-                                                                                              <WithStyles(ForwardRef(IconButton)) component=\\"span\\" className=\\"PrivateSwitchBase-root-229 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-230 Mui-checked\\" disabled={false} tabIndex={{...}} role={[undefined]} onFocus={[Function: handleFocus]} onBlur={[Function: handleBlur]} color=\\"secondary\\">
-                                                                                                <ForwardRef(IconButton) classes={{...}} component=\\"span\\" className=\\"PrivateSwitchBase-root-229 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-230 Mui-checked\\" disabled={false} tabIndex={{...}} role={[undefined]} onFocus={[Function: handleFocus]} onBlur={[Function: handleBlur]} color=\\"secondary\\">
-                                                                                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root PrivateSwitchBase-root-229 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-230 Mui-checked MuiIconButton-colorSecondary\\" centerRipple={true} focusRipple={true} disabled={false} component=\\"span\\" tabIndex={{...}} role={[undefined]} onFocus={[Function: handleFocus]} onBlur={[Function: handleBlur]}>
-                                                                                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root PrivateSwitchBase-root-229 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-230 Mui-checked MuiIconButton-colorSecondary\\" centerRipple={true} focusRipple={true} disabled={false} component=\\"span\\" tabIndex={{...}} role={[undefined]} onFocus={[Function: handleFocus]} onBlur={[Function: handleBlur]}>
-                                                                                                      <span className=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-229 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-230 Mui-checked MuiIconButton-colorSecondary\\" onBlur={[Function]} onClick={[undefined]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={{...}} role={[undefined]} aria-disabled={false}>
-                                                                                                        <span className=\\"MuiIconButton-label\\">
-                                                                                                          <input autoFocus={[undefined]} checked={true} defaultChecked={[undefined]} className=\\"PrivateSwitchBase-input-232\\" disabled={false} id={[undefined]} name=\\"transactionType\\" onChange={[Function: handleInputChange]} readOnly={[undefined]} required={[undefined]} tabIndex={[undefined]} type=\\"radio\\" value=\\"income\\" />
-                                                                                                          <WithStyles(RadioButtonIcon) checked={true}>
-                                                                                                            <RadioButtonIcon classes={{...}} checked={true}>
-                                                                                                              <div className=\\"PrivateRadioButtonIcon-root-233 PrivateRadioButtonIcon-checked-235\\">
-                                                                                                                <ForwardRef>
-                                                                                                                  <WithStyles(ForwardRef(SvgIcon))>
-                                                                                                                    <ForwardRef(SvgIcon) classes={{...}}>
-                                                                                                                      <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
-                                                                                                                        <path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\\" />
-                                                                                                                      </svg>
-                                                                                                                    </ForwardRef(SvgIcon)>
-                                                                                                                  </WithStyles(ForwardRef(SvgIcon))>
-                                                                                                                </ForwardRef>
-                                                                                                                <ForwardRef className=\\"PrivateRadioButtonIcon-layer-234\\">
-                                                                                                                  <WithStyles(ForwardRef(SvgIcon)) className=\\"PrivateRadioButtonIcon-layer-234\\">
-                                                                                                                    <ForwardRef(SvgIcon) classes={{...}} className=\\"PrivateRadioButtonIcon-layer-234\\">
-                                                                                                                      <svg className=\\"MuiSvgIcon-root PrivateRadioButtonIcon-layer-234\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
-                                                                                                                        <path d=\\"M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z\\" />
-                                                                                                                      </svg>
-                                                                                                                    </ForwardRef(SvgIcon)>
-                                                                                                                  </WithStyles(ForwardRef(SvgIcon))>
-                                                                                                                </ForwardRef>
-                                                                                                              </div>
-                                                                                                            </RadioButtonIcon>
-                                                                                                          </WithStyles(RadioButtonIcon)>
-                                                                                                        </span>
-                                                                                                        <NoSsr>
-                                                                                                          <WithStyles(undefined) center={true}>
-                                                                                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
-                                                                                                              <span className=\\"MuiTouchRipple-root\\">
-                                                                                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
-                                                                                                              </span>
-                                                                                                            </ForwardRef(TouchRipple)>
-                                                                                                          </WithStyles(undefined)>
-                                                                                                        </NoSsr>
-                                                                                                      </span>
-                                                                                                    </ForwardRef(ButtonBase)>
-                                                                                                  </WithStyles(ForwardRef(ButtonBase))>
-                                                                                                </ForwardRef(IconButton)>
-                                                                                              </WithStyles(ForwardRef(IconButton))>
-                                                                                            </ForwardRef(SwitchBase)>
-                                                                                          </WithStyles(ForwardRef(SwitchBase))>
-                                                                                        </ForwardRef(Radio)>
-                                                                                      </WithStyles(ForwardRef(Radio))>
-                                                                                      <WithStyles(ForwardRef(Typography)) component=\\"span\\" className=\\"MuiFormControlLabel-label\\">
-                                                                                        <ForwardRef(Typography) classes={{...}} component=\\"span\\" className=\\"MuiFormControlLabel-label\\">
-                                                                                          <span className=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">
-                                                                                            Income
-                                                                                          </span>
-                                                                                        </ForwardRef(Typography)>
-                                                                                      </WithStyles(ForwardRef(Typography))>
-                                                                                    </label>
-                                                                                  </ForwardRef(FormControlLabel)>
-                                                                                </WithStyles(ForwardRef(FormControlLabel))>
-                                                                                <WithStyles(ForwardRef(FormControlLabel)) value=\\"transfer\\" control={{...}} label=\\"Transfer\\">
-                                                                                  <ForwardRef(FormControlLabel) classes={{...}} value=\\"transfer\\" control={{...}} label=\\"Transfer\\">
-                                                                                    <label className=\\"MuiFormControlLabel-root\\">
-                                                                                      <WithStyles(ForwardRef(Radio)) disabled={[undefined]} value=\\"transfer\\">
-                                                                                        <ForwardRef(Radio) classes={{...}} disabled={[undefined]} value=\\"transfer\\">
-                                                                                          <WithStyles(ForwardRef(SwitchBase)) color=\\"secondary\\" type=\\"radio\\" icon={{...}} checkedIcon={{...}} classes={{...}} name=\\"transactionType\\" checked={false} onChange={[Function: chainedFunction]} disabled={false} value=\\"transfer\\">
-                                                                                            <ForwardRef(SwitchBase) classes={{...}} color=\\"secondary\\" type=\\"radio\\" icon={{...}} checkedIcon={{...}} name=\\"transactionType\\" checked={false} onChange={[Function: chainedFunction]} disabled={false} value=\\"transfer\\">
-                                                                                              <WithStyles(ForwardRef(IconButton)) component=\\"span\\" className=\\"PrivateSwitchBase-root-229 MuiRadio-root MuiRadio-colorSecondary\\" disabled={false} tabIndex={{...}} role={[undefined]} onFocus={[Function: handleFocus]} onBlur={[Function: handleBlur]} color=\\"secondary\\">
-                                                                                                <ForwardRef(IconButton) classes={{...}} component=\\"span\\" className=\\"PrivateSwitchBase-root-229 MuiRadio-root MuiRadio-colorSecondary\\" disabled={false} tabIndex={{...}} role={[undefined]} onFocus={[Function: handleFocus]} onBlur={[Function: handleBlur]} color=\\"secondary\\">
-                                                                                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root PrivateSwitchBase-root-229 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary\\" centerRipple={true} focusRipple={true} disabled={false} component=\\"span\\" tabIndex={{...}} role={[undefined]} onFocus={[Function: handleFocus]} onBlur={[Function: handleBlur]}>
-                                                                                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root PrivateSwitchBase-root-229 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary\\" centerRipple={true} focusRipple={true} disabled={false} component=\\"span\\" tabIndex={{...}} role={[undefined]} onFocus={[Function: handleFocus]} onBlur={[Function: handleBlur]}>
-                                                                                                      <span className=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-229 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary\\" onBlur={[Function]} onClick={[undefined]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={{...}} role={[undefined]} aria-disabled={false}>
-                                                                                                        <span className=\\"MuiIconButton-label\\">
-                                                                                                          <input autoFocus={[undefined]} checked={false} defaultChecked={[undefined]} className=\\"PrivateSwitchBase-input-232\\" disabled={false} id={[undefined]} name=\\"transactionType\\" onChange={[Function: handleInputChange]} readOnly={[undefined]} required={[undefined]} tabIndex={[undefined]} type=\\"radio\\" value=\\"transfer\\" />
-                                                                                                          <WithStyles(RadioButtonIcon)>
-                                                                                                            <RadioButtonIcon classes={{...}}>
-                                                                                                              <div className=\\"PrivateRadioButtonIcon-root-233\\">
-                                                                                                                <ForwardRef>
-                                                                                                                  <WithStyles(ForwardRef(SvgIcon))>
-                                                                                                                    <ForwardRef(SvgIcon) classes={{...}}>
-                                                                                                                      <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
-                                                                                                                        <path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\\" />
-                                                                                                                      </svg>
-                                                                                                                    </ForwardRef(SvgIcon)>
-                                                                                                                  </WithStyles(ForwardRef(SvgIcon))>
-                                                                                                                </ForwardRef>
-                                                                                                                <ForwardRef className=\\"PrivateRadioButtonIcon-layer-234\\">
-                                                                                                                  <WithStyles(ForwardRef(SvgIcon)) className=\\"PrivateRadioButtonIcon-layer-234\\">
-                                                                                                                    <ForwardRef(SvgIcon) classes={{...}} className=\\"PrivateRadioButtonIcon-layer-234\\">
-                                                                                                                      <svg className=\\"MuiSvgIcon-root PrivateRadioButtonIcon-layer-234\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
-                                                                                                                        <path d=\\"M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z\\" />
-                                                                                                                      </svg>
-                                                                                                                    </ForwardRef(SvgIcon)>
-                                                                                                                  </WithStyles(ForwardRef(SvgIcon))>
-                                                                                                                </ForwardRef>
-                                                                                                              </div>
-                                                                                                            </RadioButtonIcon>
-                                                                                                          </WithStyles(RadioButtonIcon)>
-                                                                                                        </span>
-                                                                                                        <NoSsr>
-                                                                                                          <WithStyles(undefined) center={true}>
-                                                                                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
-                                                                                                              <span className=\\"MuiTouchRipple-root\\">
-                                                                                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
-                                                                                                              </span>
-                                                                                                            </ForwardRef(TouchRipple)>
-                                                                                                          </WithStyles(undefined)>
-                                                                                                        </NoSsr>
-                                                                                                      </span>
-                                                                                                    </ForwardRef(ButtonBase)>
-                                                                                                  </WithStyles(ForwardRef(ButtonBase))>
-                                                                                                </ForwardRef(IconButton)>
-                                                                                              </WithStyles(ForwardRef(IconButton))>
-                                                                                            </ForwardRef(SwitchBase)>
-                                                                                          </WithStyles(ForwardRef(SwitchBase))>
-                                                                                        </ForwardRef(Radio)>
-                                                                                      </WithStyles(ForwardRef(Radio))>
-                                                                                      <WithStyles(ForwardRef(Typography)) component=\\"span\\" className=\\"MuiFormControlLabel-label\\">
-                                                                                        <ForwardRef(Typography) classes={{...}} component=\\"span\\" className=\\"MuiFormControlLabel-label\\">
-                                                                                          <span className=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">
-                                                                                            Transfer
-                                                                                          </span>
-                                                                                        </ForwardRef(Typography)>
-                                                                                      </WithStyles(ForwardRef(Typography))>
-                                                                                    </label>
-                                                                                  </ForwardRef(FormControlLabel)>
-                                                                                </WithStyles(ForwardRef(FormControlLabel))>
-                                                                              </div>
-                                                                            </ForwardRef(FormGroup)>
-                                                                          </WithStyles(ForwardRef(FormGroup))>
-                                                                        </ForwardRef(RadioGroup)>
-                                                                        <WithStyles(ForwardRef(TextField)) autoFocus={true} label=\\"Description\\" InputProps={{...}} className=\\"WithFormik(TransactionDialogComponent)-input-2\\" value={[undefined]} name=\\"description\\" onChange={[Function]} error={[undefined]} helperText={[undefined]}>
-                                                                          <ForwardRef(TextField) classes={{...}} autoFocus={true} label=\\"Description\\" InputProps={{...}} className=\\"WithFormik(TransactionDialogComponent)-input-2\\" value={[undefined]} name=\\"description\\" onChange={[Function]} error={[undefined]} helperText={[undefined]}>
-                                                                            <WithStyles(ForwardRef(FormControl)) className=\\"MuiTextField-root WithFormik(TransactionDialogComponent)-input-2\\" disabled={false} error={false} fullWidth={false} hiddenLabel={[undefined]} required={false} color=\\"primary\\" variant=\\"standard\\">
-                                                                              <ForwardRef(FormControl) classes={{...}} className=\\"MuiTextField-root WithFormik(TransactionDialogComponent)-input-2\\" disabled={false} error={false} fullWidth={false} hiddenLabel={[undefined]} required={false} color=\\"primary\\" variant=\\"standard\\">
-                                                                                <div className=\\"MuiFormControl-root MuiTextField-root WithFormik(TransactionDialogComponent)-input-2\\">
-                                                                                  <WithStyles(ForwardRef(InputLabel)) htmlFor={[undefined]} id={[undefined]}>
-                                                                                    <ForwardRef(InputLabel) classes={{...}} htmlFor={[undefined]} id={[undefined]}>
-                                                                                      <WithStyles(ForwardRef(FormLabel)) data-shrink={true} className=\\"MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink\\" classes={{...}} htmlFor={[undefined]} id={[undefined]}>
-                                                                                        <ForwardRef(FormLabel) classes={{...}} data-shrink={true} className=\\"MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink\\" htmlFor={[undefined]} id={[undefined]}>
-                                                                                          <label className=\\"MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink Mui-focused Mui-focused\\" data-shrink={true} htmlFor={[undefined]} id={[undefined]}>
-                                                                                            Description
-                                                                                          </label>
-                                                                                        </ForwardRef(FormLabel)>
-                                                                                      </WithStyles(ForwardRef(FormLabel))>
-                                                                                    </ForwardRef(InputLabel)>
-                                                                                  </WithStyles(ForwardRef(InputLabel))>
-                                                                                  <WithStyles(ForwardRef(Input)) aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={true} defaultValue={[undefined]} fullWidth={false} multiline={false} name=\\"description\\" rows={[undefined]} rowsMax={[undefined]} type={[undefined]} value={[undefined]} id={[undefined]} inputRef={[undefined]} onBlur={[undefined]} onChange={[Function]} onFocus={[undefined]} placeholder={[undefined]} inputProps={{...}} startAdornment={{...}}>
-                                                                                    <ForwardRef(Input) classes={{...}} aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={true} defaultValue={[undefined]} fullWidth={false} multiline={false} name=\\"description\\" rows={[undefined]} rowsMax={[undefined]} type={[undefined]} value={[undefined]} id={[undefined]} inputRef={[undefined]} onBlur={[undefined]} onChange={[Function]} onFocus={[undefined]} placeholder={[undefined]} inputProps={{...}} startAdornment={{...}}>
-                                                                                      <WithStyles(ForwardRef(InputBase)) classes={{...}} fullWidth={false} inputComponent=\\"input\\" multiline={false} type=\\"text\\" aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={true} defaultValue={[undefined]} name=\\"description\\" rows={[undefined]} rowsMax={[undefined]} value={[undefined]} id={[undefined]} inputRef={[undefined]} onBlur={[undefined]} onChange={[Function]} onFocus={[undefined]} placeholder={[undefined]} inputProps={{...}} startAdornment={{...}}>
-                                                                                        <ForwardRef(InputBase) classes={{...}} fullWidth={false} inputComponent=\\"input\\" multiline={false} type=\\"text\\" aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={true} defaultValue={[undefined]} name=\\"description\\" rows={[undefined]} rowsMax={[undefined]} value={[undefined]} id={[undefined]} inputRef={[undefined]} onBlur={[undefined]} onChange={[Function]} onFocus={[undefined]} placeholder={[undefined]} inputProps={{...}} startAdornment={{...}}>
-                                                                                          <div className=\\"MuiInputBase-root MuiInput-root MuiInput-underline Mui-focused Mui-focused MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart\\" onClick={[Function: handleClick]}>
-                                                                                            <WithStyles(ForwardRef(InputAdornment)) position=\\"start\\">
-                                                                                              <ForwardRef(InputAdornment) classes={{...}} position=\\"start\\">
-                                                                                                <div className=\\"MuiInputAdornment-root MuiInputAdornment-positionStart\\">
-                                                                                                  <ForwardRef className=\\"WithFormik(TransactionDialogComponent)-inputIcon-3\\">
-                                                                                                    <WithStyles(ForwardRef(SvgIcon)) className=\\"WithFormik(TransactionDialogComponent)-inputIcon-3\\">
-                                                                                                      <ForwardRef(SvgIcon) classes={{...}} className=\\"WithFormik(TransactionDialogComponent)-inputIcon-3\\">
-                                                                                                        <svg className=\\"MuiSvgIcon-root WithFormik(TransactionDialogComponent)-inputIcon-3\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
-                                                                                                          <path d=\\"M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z\\" />
-                                                                                                        </svg>
-                                                                                                      </ForwardRef(SvgIcon)>
-                                                                                                    </WithStyles(ForwardRef(SvgIcon))>
-                                                                                                  </ForwardRef>
-                                                                                                </div>
-                                                                                              </ForwardRef(InputAdornment)>
-                                                                                            </WithStyles(ForwardRef(InputAdornment))>
-                                                                                            <input aria-invalid={false} aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={true} defaultValue={[undefined]} disabled={false} id={[undefined]} onAnimationStart={[Function: handleAutoFill]} name=\\"description\\" placeholder={[undefined]} readOnly={[undefined]} required={false} rows={[undefined]} value={[undefined]} onKeyDown={[undefined]} onKeyUp={[undefined]} type=\\"text\\" aria-label=\\"Description\\" maxLength={150} className=\\"MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart\\" onBlur={[Function: handleBlur]} onChange={[Function: handleChange]} onFocus={[Function: handleFocus]} />
-                                                                                          </div>
-                                                                                        </ForwardRef(InputBase)>
-                                                                                      </WithStyles(ForwardRef(InputBase))>
-                                                                                    </ForwardRef(Input)>
-                                                                                  </WithStyles(ForwardRef(Input))>
-                                                                                </div>
-                                                                              </ForwardRef(FormControl)>
-                                                                            </WithStyles(ForwardRef(FormControl))>
-                                                                          </ForwardRef(TextField)>
-                                                                        </WithStyles(ForwardRef(TextField))>
-                                                                        <WithStyles(ForwardRef(Grid)) container={true} spacing={4}>
-                                                                          <ForwardRef(Grid) classes={{...}} container={true} spacing={4}>
-                                                                            <div className=\\"MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-4\\">
-                                                                              <WithStyles(ForwardRef(Grid)) item={true} xs={6}>
-                                                                                <ForwardRef(Grid) classes={{...}} item={true} xs={6}>
-                                                                                  <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\">
-                                                                                    <WithStyles(ForwardRef(TextField)) type=\\"number\\" label=\\"Amount\\" InputProps={{...}} className=\\"WithFormik(TransactionDialogComponent)-input-2\\" value={1} name=\\"amount\\" onChange={[Function]} error={[undefined]} helperText={[undefined]}>
-                                                                                      <ForwardRef(TextField) classes={{...}} type=\\"number\\" label=\\"Amount\\" InputProps={{...}} className=\\"WithFormik(TransactionDialogComponent)-input-2\\" value={1} name=\\"amount\\" onChange={[Function]} error={[undefined]} helperText={[undefined]}>
-                                                                                        <WithStyles(ForwardRef(FormControl)) className=\\"MuiTextField-root WithFormik(TransactionDialogComponent)-input-2\\" disabled={false} error={false} fullWidth={false} hiddenLabel={[undefined]} required={false} color=\\"primary\\" variant=\\"standard\\">
-                                                                                          <ForwardRef(FormControl) classes={{...}} className=\\"MuiTextField-root WithFormik(TransactionDialogComponent)-input-2\\" disabled={false} error={false} fullWidth={false} hiddenLabel={[undefined]} required={false} color=\\"primary\\" variant=\\"standard\\">
-                                                                                            <div className=\\"MuiFormControl-root MuiTextField-root WithFormik(TransactionDialogComponent)-input-2\\">
-                                                                                              <WithStyles(ForwardRef(InputLabel)) htmlFor={[undefined]} id={[undefined]}>
-                                                                                                <ForwardRef(InputLabel) classes={{...}} htmlFor={[undefined]} id={[undefined]}>
-                                                                                                  <WithStyles(ForwardRef(FormLabel)) data-shrink={true} className=\\"MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink\\" classes={{...}} htmlFor={[undefined]} id={[undefined]}>
-                                                                                                    <ForwardRef(FormLabel) classes={{...}} data-shrink={true} className=\\"MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink\\" htmlFor={[undefined]} id={[undefined]}>
-                                                                                                      <label className=\\"MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled\\" data-shrink={true} htmlFor={[undefined]} id={[undefined]}>
-                                                                                                        Amount
-                                                                                                      </label>
-                                                                                                    </ForwardRef(FormLabel)>
-                                                                                                  </WithStyles(ForwardRef(FormLabel))>
-                                                                                                </ForwardRef(InputLabel)>
-                                                                                              </WithStyles(ForwardRef(InputLabel))>
-                                                                                              <WithStyles(ForwardRef(Input)) aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={false} defaultValue={[undefined]} fullWidth={false} multiline={false} name=\\"amount\\" rows={[undefined]} rowsMax={[undefined]} type=\\"number\\" value={1} id={[undefined]} inputRef={[undefined]} onBlur={[undefined]} onChange={[Function]} onFocus={[undefined]} placeholder={[undefined]} inputProps={{...}} startAdornment={{...}}>
-                                                                                                <ForwardRef(Input) classes={{...}} aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={false} defaultValue={[undefined]} fullWidth={false} multiline={false} name=\\"amount\\" rows={[undefined]} rowsMax={[undefined]} type=\\"number\\" value={1} id={[undefined]} inputRef={[undefined]} onBlur={[undefined]} onChange={[Function]} onFocus={[undefined]} placeholder={[undefined]} inputProps={{...}} startAdornment={{...}}>
-                                                                                                  <WithStyles(ForwardRef(InputBase)) classes={{...}} fullWidth={false} inputComponent=\\"input\\" multiline={false} type=\\"number\\" aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={false} defaultValue={[undefined]} name=\\"amount\\" rows={[undefined]} rowsMax={[undefined]} value={1} id={[undefined]} inputRef={[undefined]} onBlur={[undefined]} onChange={[Function]} onFocus={[undefined]} placeholder={[undefined]} inputProps={{...}} startAdornment={{...}}>
-                                                                                                    <ForwardRef(InputBase) classes={{...}} fullWidth={false} inputComponent=\\"input\\" multiline={false} type=\\"number\\" aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={false} defaultValue={[undefined]} name=\\"amount\\" rows={[undefined]} rowsMax={[undefined]} value={1} id={[undefined]} inputRef={[undefined]} onBlur={[undefined]} onChange={[Function]} onFocus={[undefined]} placeholder={[undefined]} inputProps={{...}} startAdornment={{...}}>
-                                                                                                      <div className=\\"MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart\\" onClick={[Function: handleClick]}>
-                                                                                                        <WithStyles(ForwardRef(InputAdornment)) position=\\"start\\">
-                                                                                                          <ForwardRef(InputAdornment) classes={{...}} position=\\"start\\">
-                                                                                                            <div className=\\"MuiInputAdornment-root MuiInputAdornment-positionStart\\">
-                                                                                                              <ForwardRef className=\\"WithFormik(TransactionDialogComponent)-inputIcon-3\\">
-                                                                                                                <WithStyles(ForwardRef(SvgIcon)) className=\\"WithFormik(TransactionDialogComponent)-inputIcon-3\\">
-                                                                                                                  <ForwardRef(SvgIcon) classes={{...}} className=\\"WithFormik(TransactionDialogComponent)-inputIcon-3\\">
-                                                                                                                    <svg className=\\"MuiSvgIcon-root WithFormik(TransactionDialogComponent)-inputIcon-3\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
-                                                                                                                      <path d=\\"M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z\\" />
-                                                                                                                    </svg>
-                                                                                                                  </ForwardRef(SvgIcon)>
-                                                                                                                </WithStyles(ForwardRef(SvgIcon))>
-                                                                                                              </ForwardRef>
-                                                                                                            </div>
-                                                                                                          </ForwardRef(InputAdornment)>
-                                                                                                        </WithStyles(ForwardRef(InputAdornment))>
-                                                                                                        <input aria-invalid={false} aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={false} defaultValue={[undefined]} disabled={false} id={[undefined]} onAnimationStart={[Function: handleAutoFill]} name=\\"amount\\" placeholder={[undefined]} readOnly={[undefined]} required={false} rows={[undefined]} value={1} onKeyDown={[undefined]} onKeyUp={[undefined]} type=\\"number\\" aria-label=\\"Amount\\" step={0.01} min={0} max={999999999.99} className=\\"MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart\\" onBlur={[Function: handleBlur]} onChange={[Function: handleChange]} onFocus={[Function: handleFocus]} />
-                                                                                                      </div>
-                                                                                                    </ForwardRef(InputBase)>
-                                                                                                  </WithStyles(ForwardRef(InputBase))>
-                                                                                                </ForwardRef(Input)>
-                                                                                              </WithStyles(ForwardRef(Input))>
-                                                                                            </div>
-                                                                                          </ForwardRef(FormControl)>
-                                                                                        </WithStyles(ForwardRef(FormControl))>
-                                                                                      </ForwardRef(TextField)>
-                                                                                    </WithStyles(ForwardRef(TextField))>
-                                                                                  </div>
-                                                                                </ForwardRef(Grid)>
-                                                                              </WithStyles(ForwardRef(Grid))>
-                                                                              <WithStyles(ForwardRef(Grid)) item={true} xs={6}>
-                                                                                <ForwardRef(Grid) classes={{...}} item={true} xs={6}>
-                                                                                  <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\">
-                                                                                    <WithStyles(ForwardRef(TextField)) type=\\"date\\" label=\\"Date\\" InputProps={{...}} InputLabelProps={{...}} name=\\"createdAt\\" className=\\"WithFormik(TransactionDialogComponent)-input-2\\" value=\\"2018-12-31\\" onChange={[Function]} error={[undefined]} helperText={[undefined]}>
-                                                                                      <ForwardRef(TextField) classes={{...}} type=\\"date\\" label=\\"Date\\" InputProps={{...}} InputLabelProps={{...}} name=\\"createdAt\\" className=\\"WithFormik(TransactionDialogComponent)-input-2\\" value=\\"2018-12-31\\" onChange={[Function]} error={[undefined]} helperText={[undefined]}>
-                                                                                        <WithStyles(ForwardRef(FormControl)) className=\\"MuiTextField-root WithFormik(TransactionDialogComponent)-input-2\\" disabled={false} error={false} fullWidth={false} hiddenLabel={[undefined]} required={false} color=\\"primary\\" variant=\\"standard\\">
-                                                                                          <ForwardRef(FormControl) classes={{...}} className=\\"MuiTextField-root WithFormik(TransactionDialogComponent)-input-2\\" disabled={false} error={false} fullWidth={false} hiddenLabel={[undefined]} required={false} color=\\"primary\\" variant=\\"standard\\">
-                                                                                            <div className=\\"MuiFormControl-root MuiTextField-root WithFormik(TransactionDialogComponent)-input-2\\">
-                                                                                              <WithStyles(ForwardRef(InputLabel)) htmlFor={[undefined]} id={[undefined]} shrink={true} aria-label=\\"Date\\">
-                                                                                                <ForwardRef(InputLabel) classes={{...}} htmlFor={[undefined]} id={[undefined]} shrink={true} aria-label=\\"Date\\">
-                                                                                                  <WithStyles(ForwardRef(FormLabel)) data-shrink={true} className=\\"MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink\\" classes={{...}} htmlFor={[undefined]} id={[undefined]} aria-label=\\"Date\\">
-                                                                                                    <ForwardRef(FormLabel) classes={{...}} data-shrink={true} className=\\"MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink\\" htmlFor={[undefined]} id={[undefined]} aria-label=\\"Date\\">
-                                                                                                      <label className=\\"MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled\\" data-shrink={true} htmlFor={[undefined]} id={[undefined]} aria-label=\\"Date\\">
-                                                                                                        Date
-                                                                                                      </label>
-                                                                                                    </ForwardRef(FormLabel)>
-                                                                                                  </WithStyles(ForwardRef(FormLabel))>
-                                                                                                </ForwardRef(InputLabel)>
-                                                                                              </WithStyles(ForwardRef(InputLabel))>
-                                                                                              <WithStyles(ForwardRef(Input)) aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={false} defaultValue={[undefined]} fullWidth={false} multiline={false} name=\\"createdAt\\" rows={[undefined]} rowsMax={[undefined]} type=\\"date\\" value=\\"2018-12-31\\" id={[undefined]} inputRef={[undefined]} onBlur={[undefined]} onChange={[Function]} onFocus={[undefined]} placeholder={[undefined]} inputProps={[undefined]} startAdornment={{...}}>
-                                                                                                <ForwardRef(Input) classes={{...}} aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={false} defaultValue={[undefined]} fullWidth={false} multiline={false} name=\\"createdAt\\" rows={[undefined]} rowsMax={[undefined]} type=\\"date\\" value=\\"2018-12-31\\" id={[undefined]} inputRef={[undefined]} onBlur={[undefined]} onChange={[Function]} onFocus={[undefined]} placeholder={[undefined]} inputProps={[undefined]} startAdornment={{...}}>
-                                                                                                  <WithStyles(ForwardRef(InputBase)) classes={{...}} fullWidth={false} inputComponent=\\"input\\" multiline={false} type=\\"date\\" aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={false} defaultValue={[undefined]} name=\\"createdAt\\" rows={[undefined]} rowsMax={[undefined]} value=\\"2018-12-31\\" id={[undefined]} inputRef={[undefined]} onBlur={[undefined]} onChange={[Function]} onFocus={[undefined]} placeholder={[undefined]} inputProps={[undefined]} startAdornment={{...}}>
-                                                                                                    <ForwardRef(InputBase) classes={{...}} fullWidth={false} inputComponent=\\"input\\" multiline={false} type=\\"date\\" aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={false} defaultValue={[undefined]} name=\\"createdAt\\" rows={[undefined]} rowsMax={[undefined]} value=\\"2018-12-31\\" id={[undefined]} inputRef={[undefined]} onBlur={[undefined]} onChange={[Function]} onFocus={[undefined]} placeholder={[undefined]} inputProps={[undefined]} startAdornment={{...}}>
-                                                                                                      <div className=\\"MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart\\" onClick={[Function: handleClick]}>
-                                                                                                        <WithStyles(ForwardRef(InputAdornment)) position=\\"start\\">
-                                                                                                          <ForwardRef(InputAdornment) classes={{...}} position=\\"start\\">
-                                                                                                            <div className=\\"MuiInputAdornment-root MuiInputAdornment-positionStart\\">
-                                                                                                              <ForwardRef className=\\"WithFormik(TransactionDialogComponent)-inputIcon-3\\">
-                                                                                                                <WithStyles(ForwardRef(SvgIcon)) className=\\"WithFormik(TransactionDialogComponent)-inputIcon-3\\">
-                                                                                                                  <ForwardRef(SvgIcon) classes={{...}} className=\\"WithFormik(TransactionDialogComponent)-inputIcon-3\\">
-                                                                                                                    <svg className=\\"MuiSvgIcon-root WithFormik(TransactionDialogComponent)-inputIcon-3\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
-                                                                                                                      <path d=\\"M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z\\" />
-                                                                                                                    </svg>
-                                                                                                                  </ForwardRef(SvgIcon)>
-                                                                                                                </WithStyles(ForwardRef(SvgIcon))>
-                                                                                                              </ForwardRef>
-                                                                                                            </div>
-                                                                                                          </ForwardRef(InputAdornment)>
-                                                                                                        </WithStyles(ForwardRef(InputAdornment))>
-                                                                                                        <input aria-invalid={false} aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={false} defaultValue={[undefined]} disabled={false} id={[undefined]} onAnimationStart={[Function: handleAutoFill]} name=\\"createdAt\\" placeholder={[undefined]} readOnly={[undefined]} required={false} rows={[undefined]} value=\\"2018-12-31\\" onKeyDown={[undefined]} onKeyUp={[undefined]} type=\\"date\\" className=\\"MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart\\" onBlur={[Function: handleBlur]} onChange={[Function: handleChange]} onFocus={[Function: handleFocus]} />
-                                                                                                      </div>
-                                                                                                    </ForwardRef(InputBase)>
-                                                                                                  </WithStyles(ForwardRef(InputBase))>
-                                                                                                </ForwardRef(Input)>
-                                                                                              </WithStyles(ForwardRef(Input))>
-                                                                                            </div>
-                                                                                          </ForwardRef(FormControl)>
-                                                                                        </WithStyles(ForwardRef(FormControl))>
-                                                                                      </ForwardRef(TextField)>
-                                                                                    </WithStyles(ForwardRef(TextField))>
-                                                                                  </div>
-                                                                                </ForwardRef(Grid)>
-                                                                              </WithStyles(ForwardRef(Grid))>
-                                                                            </div>
-                                                                          </ForwardRef(Grid)>
-                                                                        </WithStyles(ForwardRef(Grid))>
-                                                                        <AutoComplete className=\\"WithFormik(TransactionDialogComponent)-input-2\\" label={{...}} placeholder=\\"Category\\" name=\\"categoryId\\" value={{...}} options={{...}} onChange={[Function]} error={[undefined]} helperText={[undefined]} styles={{...}} isClearable={true} async={false} creatable={false} loadOptions={[undefined]}>
-                                                                          <div className=\\"WithFormik(TransactionDialogComponent)-input-2\\">
-                                                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" color=\\"textSecondary\\">
-                                                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" color=\\"textSecondary\\">
-                                                                                <span className=\\"MuiTypography-root MuiTypography-caption MuiTypography-colorTextSecondary\\">
-                                                                                  <div>
-                                                                                    Category
-                                                                                    <WithStyles(ForwardRef(Button)) size=\\"small\\" color=\\"secondary\\" component={{...}} className=\\"WithFormik(TransactionDialogComponent)-manageCategoriesLink-4\\">
-                                                                                      <ForwardRef(Button) classes={{...}} size=\\"small\\" color=\\"secondary\\" component={{...}} className=\\"WithFormik(TransactionDialogComponent)-manageCategoriesLink-4\\">
-                                                                                        <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text WithFormik(TransactionDialogComponent)-manageCategoriesLink-4 MuiButton-textSecondary MuiButton-textSizeSmall MuiButton-sizeSmall\\" component={{...}} disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\">
-                                                                                          <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text WithFormik(TransactionDialogComponent)-manageCategoriesLink-4 MuiButton-textSecondary MuiButton-textSizeSmall MuiButton-sizeSmall\\" component={{...}} disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\">
-                                                                                            <ForwardRef className=\\"MuiButtonBase-root MuiButton-root MuiButton-text WithFormik(TransactionDialogComponent)-manageCategoriesLink-4 MuiButton-textSecondary MuiButton-textSizeSmall MuiButton-sizeSmall\\" onBlur={[Function]} onClick={[undefined]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} role=\\"button\\" aria-disabled={false}>
-                                                                                              <Link to=\\"/budget-categories\\" className=\\"MuiButtonBase-root MuiButton-root MuiButton-text WithFormik(TransactionDialogComponent)-manageCategoriesLink-4 MuiButton-textSecondary MuiButton-textSizeSmall MuiButton-sizeSmall\\" onBlur={[Function]} onClick={[undefined]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} role=\\"button\\" aria-disabled={false} innerRef={[Function]}>
-                                                                                                <LinkAnchor className=\\"MuiButtonBase-root MuiButton-root MuiButton-text WithFormik(TransactionDialogComponent)-manageCategoriesLink-4 MuiButton-textSecondary MuiButton-textSizeSmall MuiButton-sizeSmall\\" onBlur={[Function]} onClick={[undefined]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} role=\\"button\\" aria-disabled={false} href=\\"/budget-categories\\" navigate={[Function: navigate]}>
-                                                                                                  <a className=\\"MuiButtonBase-root MuiButton-root MuiButton-text WithFormik(TransactionDialogComponent)-manageCategoriesLink-4 MuiButton-textSecondary MuiButton-textSizeSmall MuiButton-sizeSmall\\" onBlur={[Function]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} role=\\"button\\" aria-disabled={false} href=\\"/budget-categories\\" onClick={[Function: onClick]}>
-                                                                                                    <span className=\\"MuiButton-label\\">
-                                                                                                      Manage categories
-                                                                                                    </span>
-                                                                                                    <NoSsr>
-                                                                                                      <WithStyles(undefined) center={false}>
-                                                                                                        <ForwardRef(TouchRipple) classes={{...}} center={false}>
-                                                                                                          <span className=\\"MuiTouchRipple-root\\">
-                                                                                                            <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
-                                                                                                          </span>
-                                                                                                        </ForwardRef(TouchRipple)>
-                                                                                                      </WithStyles(undefined)>
-                                                                                                    </NoSsr>
-                                                                                                  </a>
-                                                                                                </LinkAnchor>
-                                                                                              </Link>
-                                                                                            </ForwardRef>
-                                                                                          </ForwardRef(ButtonBase)>
-                                                                                        </WithStyles(ForwardRef(ButtonBase))>
-                                                                                      </ForwardRef(Button)>
-                                                                                    </WithStyles(ForwardRef(Button))>
-                                                                                  </div>
-                                                                                </span>
-                                                                              </ForwardRef(Typography)>
-                                                                            </WithStyles(ForwardRef(Typography))>
-                                                                            <StateManager defaultValue={{...}} options={{...}} onChange={[Function: onChange]} placeholder=\\"Category\\" name=\\"categoryId\\" value={{...}} styles={{...}} isClearable={true} defaultInputValue=\\"\\" defaultMenuIsOpen={false}>
-                                                                              <Select options={{...}} onChange={[Function]} placeholder=\\"Category\\" name=\\"categoryId\\" value={{...}} styles={{...}} isClearable={true} inputValue=\\"\\" menuIsOpen={false} onInputChange={[Function]} onMenuClose={[Function]} onMenuOpen={[Function]} backspaceRemovesValue={true} blurInputOnSelect={true} captureMenuScroll={false} closeMenuOnSelect={true} closeMenuOnScroll={false} components={{...}} controlShouldRenderValue={true} escapeClearsValue={false} filterOption={[Function]} formatGroupLabel={[Function: formatGroupLabel]} getOptionLabel={[Function: getOptionLabel]} getOptionValue={[Function: getOptionValue]} isDisabled={false} isLoading={false} isMulti={false} isRtl={false} isSearchable={true} isOptionDisabled={[Function: isOptionDisabled]} loadingMessage={[Function: loadingMessage]} maxMenuHeight={300} minMenuHeight={140} menuPlacement=\\"bottom\\" menuPosition=\\"absolute\\" menuShouldBlockScroll={false} menuShouldScrollIntoView={true} noOptionsMessage={[Function: noOptionsMessage]} openMenuOnFocus={false} openMenuOnClick={true} pageSize={5} screenReaderStatus={[Function: screenReaderStatus]} tabIndex=\\"0\\" tabSelectsValue={true}>
-                                                                                <SelectContainer cx={[Function: bound classNames]} clearValue={[Function]} getStyles={[Function]} getValue={[Function: getValue]} hasValue={false} isMulti={false} isRtl={false} options={{...}} selectOption={[Function]} setValue={[Function]} selectProps={{...}} theme={{...}} className={[undefined]} innerProps={{...}} isDisabled={false} isFocused={false}>
-                                                                                  <EmotionCssPropInternal css={{...}} className=\\"\\" id={[undefined]} onKeyDown={[Function]} __EMOTION_TYPE_PLEASE_DO_NOT_USE__=\\"div\\" __EMOTION_LABEL_PLEASE_DO_NOT_USE__=\\"SelectContainer\\">
-                                                                                    <div className=\\" css-2b097c-container\\" id={[undefined]} onKeyDown={[Function]}>
-                                                                                      <Control cx={[Function: bound classNames]} clearValue={[Function]} getStyles={[Function]} getValue={[Function: getValue]} hasValue={false} isMulti={false} isRtl={false} options={{...}} selectOption={[Function]} setValue={[Function]} selectProps={{...}} theme={{...}} innerRef={[Function]} innerProps={{...}} isDisabled={false} isFocused={false} menuIsOpen={false}>
-                                                                                        <EmotionCssPropInternal css={{...}} className=\\"\\" onMouseDown={[Function]} onTouchEnd={[Function]} __EMOTION_TYPE_PLEASE_DO_NOT_USE__=\\"div\\" __EMOTION_LABEL_PLEASE_DO_NOT_USE__=\\"Control\\">
-                                                                                          <div className=\\" css-5duvv3-control\\" onMouseDown={[Function]} onTouchEnd={[Function]}>
-                                                                                            <ValueContainer cx={[Function: bound classNames]} clearValue={[Function]} getStyles={[Function]} getValue={[Function: getValue]} hasValue={false} isMulti={false} isRtl={false} options={{...}} selectOption={[Function]} setValue={[Function]} selectProps={{...}} theme={{...}} isDisabled={false}>
-                                                                                              <EmotionCssPropInternal css={{...}} className=\\"\\" __EMOTION_TYPE_PLEASE_DO_NOT_USE__=\\"div\\">
-                                                                                                <div className=\\" css-1hwfws3\\">
-                                                                                                  <Placeholder cx={[Function: bound classNames]} clearValue={[Function]} getStyles={[Function]} getValue={[Function: getValue]} hasValue={false} isMulti={false} isRtl={false} options={{...}} selectOption={[Function]} setValue={[Function]} selectProps={{...}} theme={{...}} isDisabled={false} isFocused={false}>
-                                                                                                    <EmotionCssPropInternal css={{...}} className=\\"\\" __EMOTION_TYPE_PLEASE_DO_NOT_USE__=\\"div\\" __EMOTION_LABEL_PLEASE_DO_NOT_USE__=\\"Placeholder\\">
-                                                                                                      <div className=\\" css-9z6slu-placeholder\\">
-                                                                                                        Category
-                                                                                                      </div>
-                                                                                                    </EmotionCssPropInternal>
-                                                                                                  </Placeholder>
-                                                                                                  <Input autoCapitalize=\\"none\\" autoComplete=\\"off\\" autoCorrect=\\"off\\" cx={[Function: bound classNames]} getStyles={[Function]} id=\\"react-select-2-input\\" innerRef={[Function]} isDisabled={false} isHidden={false} onBlur={[Function]} onChange={[Function]} onFocus={[Function]} selectProps={{...}} spellCheck=\\"false\\" tabIndex=\\"0\\" theme={{...}} type=\\"text\\" value=\\"\\" aria-autocomplete=\\"list\\" aria-label={[undefined]} aria-labelledby={[undefined]}>
-                                                                                                    <EmotionCssPropInternal css={{...}} __EMOTION_TYPE_PLEASE_DO_NOT_USE__=\\"div\\" __EMOTION_LABEL_PLEASE_DO_NOT_USE__=\\"Input\\">
-                                                                                                      <div className=\\"css-1au3la4-Input\\">
-                                                                                                        <AutosizeInput className=\\"\\" inputRef={[Function]} inputStyle={{...}} disabled={false} autoCapitalize=\\"none\\" autoComplete=\\"off\\" autoCorrect=\\"off\\" id=\\"react-select-2-input\\" onBlur={[Function]} onChange={[Function]} onFocus={[Function]} spellCheck=\\"false\\" tabIndex=\\"0\\" type=\\"text\\" value=\\"\\" aria-autocomplete=\\"list\\" aria-label={[undefined]} aria-labelledby={[undefined]} minWidth={1} injectStyles={true}>
-                                                                                                          <div className=\\"\\" style={{...}}>
-                                                                                                            <input className={[undefined]} disabled={false} autoCapitalize=\\"none\\" autoComplete=\\"off\\" autoCorrect=\\"off\\" id=\\"react-select-2-input\\" onBlur={[Function]} onChange={[Function]} onFocus={[Function]} spellCheck=\\"false\\" tabIndex=\\"0\\" type=\\"text\\" value=\\"\\" aria-autocomplete=\\"list\\" aria-label={[undefined]} aria-labelledby={[undefined]} style={{...}} />
-                                                                                                            <div style={{...}} />
-                                                                                                          </div>
-                                                                                                        </AutosizeInput>
-                                                                                                      </div>
-                                                                                                    </EmotionCssPropInternal>
-                                                                                                  </Input>
-                                                                                                </div>
-                                                                                              </EmotionCssPropInternal>
-                                                                                            </ValueContainer>
-                                                                                            <IndicatorsContainer cx={[Function: bound classNames]} clearValue={[Function]} getStyles={[Function]} getValue={[Function: getValue]} hasValue={false} isMulti={false} isRtl={false} options={{...}} selectOption={[Function]} setValue={[Function]} selectProps={{...}} theme={{...}} isDisabled={false}>
-                                                                                              <EmotionCssPropInternal css={{...}} className=\\"\\" __EMOTION_TYPE_PLEASE_DO_NOT_USE__=\\"div\\" __EMOTION_LABEL_PLEASE_DO_NOT_USE__=\\"IndicatorsContainer\\">
-                                                                                                <div className=\\" css-1g48xl4-IndicatorsContainer\\">
-                                                                                                  <IndicatorSeparator cx={[Function: bound classNames]} clearValue={[Function]} getStyles={[Function]} getValue={[Function: getValue]} hasValue={false} isMulti={false} isRtl={false} options={{...}} selectOption={[Function]} setValue={[Function]} selectProps={{...}} theme={{...}} isDisabled={false} isFocused={false}>
-                                                                                                    <EmotionCssPropInternal css={{...}} className=\\"\\" __EMOTION_TYPE_PLEASE_DO_NOT_USE__=\\"span\\" __EMOTION_LABEL_PLEASE_DO_NOT_USE__=\\"IndicatorSeparator\\">
-                                                                                                      <span className=\\" css-1okebmr-indicatorSeparator\\" />
-                                                                                                    </EmotionCssPropInternal>
-                                                                                                  </IndicatorSeparator>
-                                                                                                  <DropdownIndicator cx={[Function: bound classNames]} clearValue={[Function]} getStyles={[Function]} getValue={[Function: getValue]} hasValue={false} isMulti={false} isRtl={false} options={{...}} selectOption={[Function]} setValue={[Function]} selectProps={{...}} theme={{...}} innerProps={{...}} isDisabled={false} isFocused={false}>
-                                                                                                    <EmotionCssPropInternal onMouseDown={[Function]} onTouchEnd={[Function]} aria-hidden=\\"true\\" css={{...}} className=\\"\\" __EMOTION_TYPE_PLEASE_DO_NOT_USE__=\\"div\\" __EMOTION_LABEL_PLEASE_DO_NOT_USE__=\\"DropdownIndicator\\">
-                                                                                                      <div onMouseDown={[Function]} onTouchEnd={[Function]} aria-hidden=\\"true\\" className=\\" css-tlfecz-indicatorContainer\\">
-                                                                                                        <DownChevron>
-                                                                                                          <Svg size={20}>
-                                                                                                            <EmotionCssPropInternal height={20} width={20} viewBox=\\"0 0 20 20\\" aria-hidden=\\"true\\" focusable=\\"false\\" css={{...}} __EMOTION_TYPE_PLEASE_DO_NOT_USE__=\\"svg\\" __EMOTION_LABEL_PLEASE_DO_NOT_USE__=\\"Svg\\">
-                                                                                                              <svg height={20} width={20} viewBox=\\"0 0 20 20\\" aria-hidden=\\"true\\" focusable=\\"false\\" className=\\"css-tj5bde-Svg\\">
-                                                                                                                <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\" />
-                                                                                                              </svg>
-                                                                                                            </EmotionCssPropInternal>
-                                                                                                          </Svg>
-                                                                                                        </DownChevron>
-                                                                                                      </div>
-                                                                                                    </EmotionCssPropInternal>
-                                                                                                  </DropdownIndicator>
-                                                                                                </div>
-                                                                                              </EmotionCssPropInternal>
-                                                                                            </IndicatorsContainer>
-                                                                                          </div>
-                                                                                        </EmotionCssPropInternal>
-                                                                                      </Control>
-                                                                                      <input name=\\"categoryId\\" type=\\"hidden\\" value=\\"\\" />
-                                                                                    </div>
-                                                                                  </EmotionCssPropInternal>
-                                                                                </SelectContainer>
-                                                                              </Select>
-                                                                            </StateManager>
-                                                                          </div>
-                                                                        </AutoComplete>
-                                                                        <WithStyles(ForwardRef(Tooltip)) title=\\"Apply category to all transactions with the same description\\">
-                                                                          <ForwardRef(Tooltip) classes={{...}} title=\\"Apply category to all transactions with the same description\\">
-                                                                            <WithStyles(ForwardRef(FormControlLabel)) control={{...}} label=\\"Apply to all matches\\" aria-describedby={{...}} title=\\"Apply category to all transactions with the same description\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
-                                                                              <ForwardRef(FormControlLabel) classes={{...}} control={{...}} label=\\"Apply to all matches\\" aria-describedby={{...}} title=\\"Apply category to all transactions with the same description\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
-                                                                                <label className=\\"MuiFormControlLabel-root\\" aria-describedby={{...}} title=\\"Apply category to all transactions with the same description\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
-                                                                                  <WithStyles(ForwardRef(Checkbox)) checked={true} onChange={[Function]} name=\\"createAndApplyRule\\" value={true} disabled={[undefined]}>
-                                                                                    <ForwardRef(Checkbox) classes={{...}} checked={true} onChange={[Function]} name=\\"createAndApplyRule\\" value={true} disabled={[undefined]}>
-                                                                                      <WithStyles(ForwardRef(SwitchBase)) type=\\"checkbox\\" checkedIcon={{...}} classes={{...}} color=\\"secondary\\" inputProps={{...}} icon={{...}} disabled={false} checked={true} onChange={[Function]} name=\\"createAndApplyRule\\" value={true}>
-                                                                                        <ForwardRef(SwitchBase) classes={{...}} type=\\"checkbox\\" checkedIcon={{...}} color=\\"secondary\\" inputProps={{...}} icon={{...}} disabled={false} checked={true} onChange={[Function]} name=\\"createAndApplyRule\\" value={true}>
-                                                                                          <WithStyles(ForwardRef(IconButton)) component=\\"span\\" className=\\"PrivateSwitchBase-root-229 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-230 Mui-checked\\" disabled={false} tabIndex={{...}} role={[undefined]} onFocus={[Function: handleFocus]} onBlur={[Function: handleBlur]} color=\\"secondary\\">
-                                                                                            <ForwardRef(IconButton) classes={{...}} component=\\"span\\" className=\\"PrivateSwitchBase-root-229 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-230 Mui-checked\\" disabled={false} tabIndex={{...}} role={[undefined]} onFocus={[Function: handleFocus]} onBlur={[Function: handleBlur]} color=\\"secondary\\">
-                                                                                              <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root PrivateSwitchBase-root-229 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-230 Mui-checked MuiIconButton-colorSecondary\\" centerRipple={true} focusRipple={true} disabled={false} component=\\"span\\" tabIndex={{...}} role={[undefined]} onFocus={[Function: handleFocus]} onBlur={[Function: handleBlur]}>
-                                                                                                <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root PrivateSwitchBase-root-229 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-230 Mui-checked MuiIconButton-colorSecondary\\" centerRipple={true} focusRipple={true} disabled={false} component=\\"span\\" tabIndex={{...}} role={[undefined]} onFocus={[Function: handleFocus]} onBlur={[Function: handleBlur]}>
-                                                                                                  <span className=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-229 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-230 Mui-checked MuiIconButton-colorSecondary\\" onBlur={[Function]} onClick={[undefined]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={{...}} role={[undefined]} aria-disabled={false}>
-                                                                                                    <span className=\\"MuiIconButton-label\\">
-                                                                                                      <input autoFocus={[undefined]} checked={true} defaultChecked={[undefined]} className=\\"PrivateSwitchBase-input-232\\" disabled={false} id={[undefined]} name=\\"createAndApplyRule\\" onChange={[Function: handleInputChange]} readOnly={[undefined]} required={[undefined]} tabIndex={[undefined]} type=\\"checkbox\\" value={true} data-indeterminate={false} />
-                                                                                                      <ForwardRef>
-                                                                                                        <WithStyles(ForwardRef(SvgIcon))>
-                                                                                                          <ForwardRef(SvgIcon) classes={{...}}>
-                                                                                                            <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
-                                                                                                              <path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\" />
-                                                                                                            </svg>
-                                                                                                          </ForwardRef(SvgIcon)>
-                                                                                                        </WithStyles(ForwardRef(SvgIcon))>
-                                                                                                      </ForwardRef>
-                                                                                                    </span>
-                                                                                                    <NoSsr>
-                                                                                                      <WithStyles(undefined) center={true}>
-                                                                                                        <ForwardRef(TouchRipple) classes={{...}} center={true}>
-                                                                                                          <span className=\\"MuiTouchRipple-root\\">
-                                                                                                            <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
-                                                                                                          </span>
-                                                                                                        </ForwardRef(TouchRipple)>
-                                                                                                      </WithStyles(undefined)>
-                                                                                                    </NoSsr>
-                                                                                                  </span>
-                                                                                                </ForwardRef(ButtonBase)>
-                                                                                              </WithStyles(ForwardRef(ButtonBase))>
-                                                                                            </ForwardRef(IconButton)>
-                                                                                          </WithStyles(ForwardRef(IconButton))>
-                                                                                        </ForwardRef(SwitchBase)>
-                                                                                      </WithStyles(ForwardRef(SwitchBase))>
-                                                                                    </ForwardRef(Checkbox)>
-                                                                                  </WithStyles(ForwardRef(Checkbox))>
-                                                                                  <WithStyles(ForwardRef(Typography)) component=\\"span\\" className=\\"MuiFormControlLabel-label\\">
-                                                                                    <ForwardRef(Typography) classes={{...}} component=\\"span\\" className=\\"MuiFormControlLabel-label\\">
-                                                                                      <span className=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">
-                                                                                        Apply to all matches
-                                                                                      </span>
-                                                                                    </ForwardRef(Typography)>
-                                                                                  </WithStyles(ForwardRef(Typography))>
-                                                                                </label>
-                                                                              </ForwardRef(FormControlLabel)>
-                                                                            </WithStyles(ForwardRef(FormControlLabel))>
-                                                                            <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} popperOptions={{...}} />
-                                                                          </ForwardRef(Tooltip)>
-                                                                        </WithStyles(ForwardRef(Tooltip))>
-                                                                        <WithStyles(ForwardRef(TextField)) type=\\"notes\\" label=\\"Notes\\" InputLabelProps={{...}} InputProps={{...}} name=\\"notes\\" multiline={true} rowsMax=\\"4\\" className=\\"WithFormik(TransactionDialogComponent)-input-2\\" value=\\"\\" onChange={[Function]} error={[undefined]} helperText={[undefined]}>
-                                                                          <ForwardRef(TextField) classes={{...}} type=\\"notes\\" label=\\"Notes\\" InputLabelProps={{...}} InputProps={{...}} name=\\"notes\\" multiline={true} rowsMax=\\"4\\" className=\\"WithFormik(TransactionDialogComponent)-input-2\\" value=\\"\\" onChange={[Function]} error={[undefined]} helperText={[undefined]}>
-                                                                            <WithStyles(ForwardRef(FormControl)) className=\\"MuiTextField-root WithFormik(TransactionDialogComponent)-input-2\\" disabled={false} error={false} fullWidth={false} hiddenLabel={[undefined]} required={false} color=\\"primary\\" variant=\\"standard\\">
-                                                                              <ForwardRef(FormControl) classes={{...}} className=\\"MuiTextField-root WithFormik(TransactionDialogComponent)-input-2\\" disabled={false} error={false} fullWidth={false} hiddenLabel={[undefined]} required={false} color=\\"primary\\" variant=\\"standard\\">
-                                                                                <div className=\\"MuiFormControl-root MuiTextField-root WithFormik(TransactionDialogComponent)-input-2\\">
-                                                                                  <WithStyles(ForwardRef(InputLabel)) htmlFor={[undefined]} id={[undefined]} shrink={true} aria-label=\\"Notes\\">
-                                                                                    <ForwardRef(InputLabel) classes={{...}} htmlFor={[undefined]} id={[undefined]} shrink={true} aria-label=\\"Notes\\">
-                                                                                      <WithStyles(ForwardRef(FormLabel)) data-shrink={true} className=\\"MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink\\" classes={{...}} htmlFor={[undefined]} id={[undefined]} aria-label=\\"Notes\\">
-                                                                                        <ForwardRef(FormLabel) classes={{...}} data-shrink={true} className=\\"MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink\\" htmlFor={[undefined]} id={[undefined]} aria-label=\\"Notes\\">
-                                                                                          <label className=\\"MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink\\" data-shrink={true} htmlFor={[undefined]} id={[undefined]} aria-label=\\"Notes\\">
-                                                                                            Notes
-                                                                                          </label>
-                                                                                        </ForwardRef(FormLabel)>
-                                                                                      </WithStyles(ForwardRef(FormLabel))>
-                                                                                    </ForwardRef(InputLabel)>
-                                                                                  </WithStyles(ForwardRef(InputLabel))>
-                                                                                  <WithStyles(ForwardRef(Input)) aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={false} defaultValue={[undefined]} fullWidth={false} multiline={true} name=\\"notes\\" rows={[undefined]} rowsMax=\\"4\\" type=\\"notes\\" value=\\"\\" id={[undefined]} inputRef={[undefined]} onBlur={[undefined]} onChange={[Function]} onFocus={[undefined]} placeholder={[undefined]} inputProps={{...}} startAdornment={{...}}>
-                                                                                    <ForwardRef(Input) classes={{...}} aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={false} defaultValue={[undefined]} fullWidth={false} multiline={true} name=\\"notes\\" rows={[undefined]} rowsMax=\\"4\\" type=\\"notes\\" value=\\"\\" id={[undefined]} inputRef={[undefined]} onBlur={[undefined]} onChange={[Function]} onFocus={[undefined]} placeholder={[undefined]} inputProps={{...}} startAdornment={{...}}>
-                                                                                      <WithStyles(ForwardRef(InputBase)) classes={{...}} fullWidth={false} inputComponent=\\"input\\" multiline={true} type=\\"notes\\" aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={false} defaultValue={[undefined]} name=\\"notes\\" rows={[undefined]} rowsMax=\\"4\\" value=\\"\\" id={[undefined]} inputRef={[undefined]} onBlur={[undefined]} onChange={[Function]} onFocus={[undefined]} placeholder={[undefined]} inputProps={{...}} startAdornment={{...}}>
-                                                                                        <ForwardRef(InputBase) classes={{...}} fullWidth={false} inputComponent=\\"input\\" multiline={true} type=\\"notes\\" aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={false} defaultValue={[undefined]} name=\\"notes\\" rows={[undefined]} rowsMax=\\"4\\" value=\\"\\" id={[undefined]} inputRef={[undefined]} onBlur={[undefined]} onChange={[Function]} onFocus={[undefined]} placeholder={[undefined]} inputProps={{...}} startAdornment={{...}}>
-                                                                                          <div className=\\"MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-multiline MuiInput-multiline MuiInputBase-adornedStart\\" onClick={[Function: handleClick]}>
-                                                                                            <WithStyles(ForwardRef(InputAdornment)) position=\\"start\\">
-                                                                                              <ForwardRef(InputAdornment) classes={{...}} position=\\"start\\">
-                                                                                                <div className=\\"MuiInputAdornment-root MuiInputAdornment-positionStart\\">
-                                                                                                  <ForwardRef className=\\"WithFormik(TransactionDialogComponent)-inputIcon-3\\">
-                                                                                                    <WithStyles(ForwardRef(SvgIcon)) className=\\"WithFormik(TransactionDialogComponent)-inputIcon-3\\">
-                                                                                                      <ForwardRef(SvgIcon) classes={{...}} className=\\"WithFormik(TransactionDialogComponent)-inputIcon-3\\">
-                                                                                                        <svg className=\\"MuiSvgIcon-root WithFormik(TransactionDialogComponent)-inputIcon-3\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
-                                                                                                          <path d=\\"M22 10l-6-6H4c-1.1 0-2 .9-2 2v12.01c0 1.1.9 1.99 2 1.99l16-.01c1.1 0 2-.89 2-1.99v-8zm-7-4.5l5.5 5.5H15V5.5z\\" />
-                                                                                                        </svg>
-                                                                                                      </ForwardRef(SvgIcon)>
-                                                                                                    </WithStyles(ForwardRef(SvgIcon))>
-                                                                                                  </ForwardRef>
-                                                                                                </div>
-                                                                                              </ForwardRef(InputAdornment)>
-                                                                                            </WithStyles(ForwardRef(InputAdornment))>
-                                                                                            <ForwardRef(TextareaAutosize) aria-invalid={false} aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={false} defaultValue={[undefined]} disabled={false} id={[undefined]} onAnimationStart={[Function: handleAutoFill]} name=\\"notes\\" placeholder={[undefined]} readOnly={[undefined]} required={false} rows={[undefined]} value=\\"\\" onKeyDown={[undefined]} onKeyUp={[undefined]} rowsMax=\\"4\\" length={2} className=\\"MuiInputBase-input MuiInput-input MuiInputBase-inputMultiline MuiInput-inputMultiline MuiInputBase-inputAdornedStart\\" onBlur={[Function: handleBlur]} onChange={[Function: handleChange]} onFocus={[Function: handleFocus]}>
-                                                                                              <textarea value=\\"\\" onChange={[Function: handleChange]} rows={1} style={{...}} aria-invalid={false} aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={false} defaultValue={[undefined]} disabled={false} id={[undefined]} onAnimationStart={[Function: handleAutoFill]} name=\\"notes\\" placeholder={[undefined]} readOnly={[undefined]} required={false} onKeyDown={[undefined]} onKeyUp={[undefined]} length={2} className=\\"MuiInputBase-input MuiInput-input MuiInputBase-inputMultiline MuiInput-inputMultiline MuiInputBase-inputAdornedStart\\" onBlur={[Function: handleBlur]} onFocus={[Function: handleFocus]} />
-                                                                                              <textarea aria-hidden={true} className=\\"MuiInputBase-input MuiInput-input MuiInputBase-inputMultiline MuiInput-inputMultiline MuiInputBase-inputAdornedStart\\" readOnly={true} tabIndex={-1} style={{...}} />
-                                                                                            </ForwardRef(TextareaAutosize)>
-                                                                                          </div>
-                                                                                        </ForwardRef(InputBase)>
-                                                                                      </WithStyles(ForwardRef(InputBase))>
-                                                                                    </ForwardRef(Input)>
-                                                                                  </WithStyles(ForwardRef(Input))>
-                                                                                </div>
-                                                                              </ForwardRef(FormControl)>
-                                                                            </WithStyles(ForwardRef(FormControl))>
-                                                                          </ForwardRef(TextField)>
-                                                                        </WithStyles(ForwardRef(TextField))>
-                                                                      </div>
-                                                                    </ForwardRef(Grid)>
-                                                                  </WithStyles(ForwardRef(Grid))>
-                                                                </div>
-                                                              </ForwardRef(Grid)>
-                                                            </WithStyles(ForwardRef(Grid))>
-                                                          </div>
-                                                        </ForwardRef(DialogContent)>
-                                                      </WithStyles(ForwardRef(DialogContent))>
-                                                      <WithStyles(ForwardRef(Divider))>
-                                                        <ForwardRef(Divider) classes={{...}}>
-                                                          <hr className=\\"MuiDivider-root\\" role={[undefined]} />
-                                                        </ForwardRef(Divider)>
-                                                      </WithStyles(ForwardRef(Divider))>
-                                                      <WithStyles(ForwardRef(DialogActions)) className=\\"makeStyles-formFooter-12\\">
-                                                        <ForwardRef(DialogActions) classes={{...}} className=\\"makeStyles-formFooter-12\\">
-                                                          <div className=\\"MuiDialogActions-root makeStyles-formFooter-12 MuiDialogActions-spacing\\">
-                                                            <WithStyles(ForwardRef(Grid)) container={true}>
-                                                              <ForwardRef(Grid) classes={{...}} container={true}>
-                                                                <div className=\\"MuiGrid-root MuiGrid-container\\">
-                                                                  <WithStyles(ForwardRef(Grid)) item={true} xs={8}>
-                                                                    <ForwardRef(Grid) classes={{...}} item={true} xs={8}>
-                                                                      <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-8\\">
-                                                                        <WithStyles(ForwardRef(Button)) onClick={[Function: mockConstructor]} className=\\"makeStyles-deleteButton-14\\">
-                                                                          <ForwardRef(Button) classes={{...}} onClick={[Function: mockConstructor]} className=\\"makeStyles-deleteButton-14\\">
-                                                                            <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text makeStyles-deleteButton-14\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: mockConstructor]}>
-                                                                              <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text makeStyles-deleteButton-14\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: mockConstructor]}>
-                                                                                <button className=\\"MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-deleteButton-14\\" onBlur={[Function]} onClick={[Function: mockConstructor]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false}>
-                                                                                  <span className=\\"MuiButton-label\\">
-                                                                                    Delete this transaction
-                                                                                  </span>
-                                                                                  <NoSsr>
-                                                                                    <WithStyles(undefined) center={false}>
-                                                                                      <ForwardRef(TouchRipple) classes={{...}} center={false}>
-                                                                                        <span className=\\"MuiTouchRipple-root\\">
-                                                                                          <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
-                                                                                        </span>
-                                                                                      </ForwardRef(TouchRipple)>
-                                                                                    </WithStyles(undefined)>
-                                                                                  </NoSsr>
-                                                                                </button>
-                                                                              </ForwardRef(ButtonBase)>
-                                                                            </WithStyles(ForwardRef(ButtonBase))>
-                                                                          </ForwardRef(Button)>
-                                                                        </WithStyles(ForwardRef(Button))>
-                                                                      </div>
-                                                                    </ForwardRef(Grid)>
-                                                                  </WithStyles(ForwardRef(Grid))>
-                                                                  <WithStyles(ForwardRef(Grid)) item={true} xs={4}>
-                                                                    <ForwardRef(Grid) classes={{...}} item={true} xs={4}>
-                                                                      <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-4\\">
-                                                                        <WithStyles(ForwardRef(Button)) type=\\"submit\\" color=\\"secondary\\" className=\\"makeStyles-saveButton-13\\">
-                                                                          <ForwardRef(Button) classes={{...}} type=\\"submit\\" color=\\"secondary\\" className=\\"makeStyles-saveButton-13\\">
-                                                                            <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text makeStyles-saveButton-13 MuiButton-textSecondary\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"submit\\">
-                                                                              <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text makeStyles-saveButton-13 MuiButton-textSecondary\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"submit\\">
-                                                                                <button className=\\"MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-saveButton-13 MuiButton-textSecondary\\" onBlur={[Function]} onClick={[undefined]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"submit\\" disabled={false}>
-                                                                                  <span className=\\"MuiButton-label\\">
-                                                                                    Save
-                                                                                  </span>
-                                                                                  <NoSsr>
-                                                                                    <WithStyles(undefined) center={false}>
-                                                                                      <ForwardRef(TouchRipple) classes={{...}} center={false}>
-                                                                                        <span className=\\"MuiTouchRipple-root\\">
-                                                                                          <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
-                                                                                        </span>
-                                                                                      </ForwardRef(TouchRipple)>
-                                                                                    </WithStyles(undefined)>
-                                                                                  </NoSsr>
-                                                                                </button>
-                                                                              </ForwardRef(ButtonBase)>
-                                                                            </WithStyles(ForwardRef(ButtonBase))>
-                                                                          </ForwardRef(Button)>
-                                                                        </WithStyles(ForwardRef(Button))>
-                                                                      </div>
-                                                                    </ForwardRef(Grid)>
-                                                                  </WithStyles(ForwardRef(Grid))>
-                                                                </div>
-                                                              </ForwardRef(Grid)>
-                                                            </WithStyles(ForwardRef(Grid))>
-                                                          </div>
-                                                        </ForwardRef(DialogActions)>
-                                                      </WithStyles(ForwardRef(DialogActions))>
-                                                    </form>
-                                                  </div>
-                                                </div>
-                                              </ForwardRef(Paper)>
-                                            </WithStyles(ForwardRef(Paper))>
-                                          </div>
-                                        </Transition>
-                                      </ForwardRef(Fade)>
-                                      <div tabIndex={0} data-test=\\"sentinelEnd\\" />
-                                    </TrapFocus>
-                                  </div>
-                                </Portal>
-                              </ForwardRef(Portal)>
-                            </ForwardRef(Modal)>
-                          </ForwardRef(Dialog)>
-                        </WithStyles(ForwardRef(Dialog))>
-                      </ModalDialog>
-                    </TransactionDialogComponent>
-                  </Formik>
-                </WithFormik(TransactionDialogComponent)>
-              </WithStyles(WithFormik(TransactionDialogComponent))>
-            </Connect(WithStyles(WithFormik(TransactionDialogComponent)))>
-          </ThemeProvider>
-        </CssBaseline>
-      </ThemeProvider>
-    </Provider>
-  </Router>
-</BrowserRouter>"
-`;
diff --git a/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsTable.test.jsx.snap b/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsTable.test.jsx.snap
index 95ecacc..e8e42ba 100644
--- a/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsTable.test.jsx.snap
+++ b/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsTable.test.jsx.snap
@@ -928,7 +928,6 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
                 onFocus={[Function]}
               >
                  
-                 
                 Transaction 3
               </a>
             </div>
@@ -1098,7 +1097,6 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
                 onFocus={[Function]}
               >
                  
-                 
                 Transaction 2
               </a>
             </div>
@@ -1268,7 +1266,6 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
                 onFocus={[Function]}
               >
                  
-                 
                 Transaction 1
               </a>
             </div>