From 77d2426c1426223eb09944271a081a26d9ab5d4c Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 13 Sep 2025 21:17:55 +0800
Subject: [PATCH] code refactor

---
 .../transactions/import/ImportDialog.vue      | 2198 +----------------
 .../tabs/ImportTransactionCheckDataTab.vue    | 1778 +++++++++++++
 .../tabs/ImportTransactionDefineColumnTab.vue |  588 +++++
 3 files changed, 2454 insertions(+), 2110 deletions(-)
 create mode 100644 src/views/desktop/transactions/import/tabs/ImportTransactionCheckDataTab.vue
 create mode 100644 src/views/desktop/transactions/import/tabs/ImportTransactionDefineColumnTab.vue

diff --git a/src/views/desktop/transactions/import/ImportDialog.vue b/src/views/desktop/transactions/import/ImportDialog.vue
index af1a7712..5aefb570 100644
--- a/src/views/desktop/transactions/import/ImportDialog.vue
+++ b/src/views/desktop/transactions/import/ImportDialog.vue
@@ -9,201 +9,55 @@
                     </div>
                     <v-btn density="comfortable" color="default" variant="text" class="ms-2"
                            :icon="true" :disabled="loading || submitting"
-                           v-if="currentStep === 'defineColumn'">
+                           v-if="currentStep === 'defineColumn' && importTransactionDefineColumnTab?.menus">
                         <v-icon :icon="mdiDotsVertical" />
                         <v-menu activator="parent" max-height="500">
                             <v-list>
-                                <v-list-item :prepend-icon="mdiFolderOpenOutline"
-                                             :title="tt('Load Data Mapping File')"
-                                             @click="loadColumnMappingFile()"></v-list-item>
-                                <v-list-item :prepend-icon="mdiContentSaveOutline"
-                                             :title="tt('Save Data Mapping File')"
-                                             @click="saveColumnMappingFile()"></v-list-item>
+                                <v-list-item :key="index"
+                                             :prepend-icon="menu.prependIcon"
+                                             :title="menu.title"
+                                             :disabled="menu.disabled"
+                                             @click="menu.onClick()"
+                                             v-for="(menu, index) in importTransactionDefineColumnTab.menus"/>
                             </v-list>
                         </v-menu>
                     </v-btn>
                     <v-btn density="comfortable" color="default" variant="text" class="ms-2"
                            :icon="true" :disabled="loading || submitting"
-                           v-if="currentStep === 'checkData'">
+                           v-if="currentStep === 'checkData' && importTransactionCheckDataTab?.filterMenus">
                         <v-icon :icon="mdiFilterOutline" />
                         <v-menu activator="parent" max-height="500">
                             <v-list>
-                                <v-list-subheader :title="tt('Date Range')"/>
-                                <v-list-item :title="tt('All')"
-                                             :append-icon="filters.minDatetime === null || filters.maxDatetime === null ? mdiCheck : undefined"
-                                             @click="filters.minDatetime = filters.maxDatetime = null"></v-list-item>
-                                <v-list-item :title="tt('Custom')"
-                                             :subtitle="displayFilterCustomDateRange"
-                                             :append-icon="filters.minDatetime !== null && filters.maxDatetime !== null ? mdiCheck : undefined"
-                                             @click="showCustomDateRangeDialog = true"></v-list-item>
-                                <v-divider class="my-2"/>
-                                <v-list-subheader :title="tt('Type')"/>
-                                <v-list-item :title="tt('All')"
-                                             :append-icon="filters.transactionType === null ? mdiCheck : undefined"
-                                             @click="filters.transactionType = null"></v-list-item>
-                                <v-list-item :title="tt('Income')"
-                                             :append-icon="filters.transactionType === TransactionType.Income ? mdiCheck : undefined"
-                                             @click="filters.transactionType = TransactionType.Income"></v-list-item>
-                                <v-list-item :title="tt('Expense')"
-                                             :append-icon="filters.transactionType === TransactionType.Expense ? mdiCheck : undefined"
-                                             @click="filters.transactionType = TransactionType.Expense"></v-list-item>
-                                <v-list-item :title="tt('Transfer')"
-                                             :append-icon="filters.transactionType === TransactionType.Transfer ? mdiCheck : undefined"
-                                             @click="filters.transactionType = TransactionType.Transfer"></v-list-item>
-                                <v-divider class="my-2"/>
-                                <v-list-subheader :title="tt('Category')"/>
-                                <v-list-item :title="tt('All')"
-                                             :append-icon="filters.category === null ? mdiCheck : undefined"
-                                             @click="filters.category = null"></v-list-item>
-                                <v-list-item :title="tt('Invalid Category')"
-                                             :append-icon="filters.category === undefined ? mdiCheck : undefined"
-                                             @click="filters.category = undefined"></v-list-item>
-                                <v-list-item :title="tt('None')"
-                                             :append-icon="filters.category === '' ? mdiCheck : undefined"
-                                             @click="filters.category = ''"></v-list-item>
-                                <v-list-item :title="name" :key="name"
-                                             :append-icon="filters.category === name ? mdiCheck : undefined"
-                                             v-for="name in allUsedCategoryNames"
-                                             @click="filters.category = name"></v-list-item>
-                                <v-divider class="my-2"/>
-                                <v-list-subheader :title="tt('Account')"/>
-                                <v-list-item :title="tt('All')"
-                                             :append-icon="filters.account === null ? mdiCheck : undefined"
-                                             @click="filters.account = null"></v-list-item>
-                                <v-list-item :title="tt('Invalid Account')"
-                                             :append-icon="filters.account === undefined ? mdiCheck : undefined"
-                                             @click="filters.account = undefined"></v-list-item>
-                                <v-list-item :title="tt('None')"
-                                             :append-icon="filters.account === '' ? mdiCheck : undefined"
-                                             @click="filters.account = ''"></v-list-item>
-                                <v-list-item :title="name" :key="name"
-                                             :append-icon="filters.account === name ? mdiCheck : undefined"
-                                             v-for="name in allUsedAccountNames"
-                                             @click="filters.account = name"></v-list-item>
-                                <v-divider class="my-2"/>
-                                <v-list-subheader :title="tt('Tags')"/>
-                                <v-list-item :title="tt('All')"
-                                             :append-icon="filters.tag === null ? mdiCheck : undefined"
-                                             @click="filters.tag = null"></v-list-item>
-                                <v-list-item :title="tt('Invalid Tag')"
-                                             :append-icon="filters.tag === undefined ? mdiCheck : undefined"
-                                             @click="filters.tag = undefined"></v-list-item>
-                                <v-list-item :title="tt('None')"
-                                             :append-icon="filters.tag === '' ? mdiCheck : undefined"
-                                             @click="filters.tag = ''"></v-list-item>
-                                <v-list-item :title="name" :key="name"
-                                             :append-icon="filters.tag === name ? mdiCheck : undefined"
-                                             v-for="name in allUsedTagNames"
-                                             @click="filters.tag = name"></v-list-item>
-                                <v-divider class="my-2"/>
-                                <v-list-subheader :title="tt('Description')"/>
-                                <v-list-item :title="tt('All')"
-                                             :append-icon="filters.description === null ? mdiCheck : undefined"
-                                             @click="filters.description = null"></v-list-item>
-                                <v-list-item :title="tt('None')"
-                                             :append-icon="filters.description === '' ? mdiCheck : undefined"
-                                             @click="filters.description = ''"></v-list-item>
-                                <v-list-item :title="tt('Custom')"
-                                             :subtitle="filters.description !== null ? filters.description : undefined"
-                                             :append-icon="filters.description !== null && filters.description !== '' ? mdiCheck : undefined"
-                                             @click="currentDescriptionFilterValue = filters.description || ''; showCustomDescriptionDialog = true"></v-list-item>
+                                <template :key="groupIndex" v-for="(group, groupIndex) in importTransactionCheckDataTab.filterMenus">
+                                    <v-list-subheader :title="group.title" />
+                                    <v-divider class="my-2" v-if="groupIndex > 0" />
+                                    <v-list-item :key="`menu_${groupIndex}_${index}`"
+                                                 :prepend-icon="menu.prependIcon"
+                                                 :title="menu.title"
+                                                 :subtitle="menu.subTitle"
+                                                 :append-icon="menu.appendIcon"
+                                                 :disabled="menu.disabled"
+                                                 @click="menu.onClick()"
+                                                 v-for="(menu, index) in group.items" />
+                                </template>
                             </v-list>
                         </v-menu>
                     </v-btn>
                     <v-btn density="comfortable" color="default" variant="text" class="ms-2"
                            :icon="true" :disabled="loading || submitting"
-                           v-if="currentStep === 'checkData'">
+                           v-if="currentStep === 'checkData' && importTransactionCheckDataTab?.toolMenus">
                         <v-icon :icon="mdiDotsVertical" />
                         <v-menu activator="parent" max-height="500">
                             <v-list>
-                                <v-list-item :prepend-icon="mdiFindReplace"
-                                             :disabled="!!editingTransaction || selectedExpenseTransactionCount < 1"
-                                             :title="tt('Batch Replace Selected Expense Categories')"
-                                             @click="showBatchReplaceDialog('expenseCategory')"></v-list-item>
-                                <v-list-item :prepend-icon="mdiFindReplace"
-                                             :disabled="!!editingTransaction || selectedIncomeTransactionCount < 1"
-                                             :title="tt('Batch Replace Selected Income Categories')"
-                                             @click="showBatchReplaceDialog('incomeCategory')"></v-list-item>
-                                <v-list-item :prepend-icon="mdiFindReplace"
-                                             :disabled="!!editingTransaction || selectedTransferTransactionCount < 1"
-                                             :title="tt('Batch Replace Selected Transfer Categories')"
-                                             @click="showBatchReplaceDialog('transferCategory')"></v-list-item>
-                                <v-list-item :prepend-icon="mdiFindReplace"
-                                             :disabled="!!editingTransaction || selectedImportTransactionCount < 1"
-                                             :title="tt('Batch Replace Selected Accounts')"
-                                             @click="showBatchReplaceDialog('account')"></v-list-item>
-                                <v-list-item :prepend-icon="mdiFindReplace"
-                                             :disabled="!!editingTransaction || selectedTransferTransactionCount < 1"
-                                             :title="tt('Batch Replace Selected Destination Accounts')"
-                                             @click="showBatchReplaceDialog('destinationAccount')"></v-list-item>
-                                <v-divider class="my-2"/>
-                                <v-list-item :prepend-icon="mdiFindReplace"
-                                             :disabled="!!editingTransaction || !allInvalidExpenseCategoryNames || allInvalidExpenseCategoryNames.length < 1"
-                                             :title="tt('Replace Invalid Expense Categories')"
-                                             @click="showReplaceInvalidItemDialog('expenseCategory', allInvalidExpenseCategoryNames)"></v-list-item>
-                                <v-list-item :prepend-icon="mdiFindReplace"
-                                             :disabled="!!editingTransaction || !allInvalidIncomeCategoryNames || allInvalidIncomeCategoryNames.length < 1"
-                                             :title="tt('Replace Invalid Income Categories')"
-                                             @click="showReplaceInvalidItemDialog('incomeCategory', allInvalidIncomeCategoryNames)"></v-list-item>
-                                <v-list-item :prepend-icon="mdiFindReplace"
-                                             :disabled="!!editingTransaction || !allInvalidTransferCategoryNames || allInvalidTransferCategoryNames.length < 1"
-                                             :title="tt('Replace Invalid Transfer Categories')"
-                                             @click="showReplaceInvalidItemDialog('transferCategory', allInvalidTransferCategoryNames)"></v-list-item>
-                                <v-list-item :prepend-icon="mdiFindReplace"
-                                             :disabled="!!editingTransaction || !allInvalidAccountNames || allInvalidAccountNames.length < 1"
-                                             :title="tt('Replace Invalid Accounts')"
-                                             @click="showReplaceInvalidItemDialog('account', allInvalidAccountNames)"></v-list-item>
-                                <v-list-item :prepend-icon="mdiFindReplace"
-                                             :disabled="!!editingTransaction || !allInvalidTransactionTagNames || allInvalidTransactionTagNames.length < 1"
-                                             :title="tt('Replace Invalid Transaction Tags')"
-                                             @click="showReplaceInvalidItemDialog('tag', allInvalidTransactionTagNames)"></v-list-item>
-                                <v-divider class="my-2"/>
-                                <v-list-item :prepend-icon="mdiFindReplace"
-                                             :disabled="!!editingTransaction"
-                                             :title="tt('Batch Replace Categories / Accounts / Tags')"
-                                             @click="showReplaceAllTypesDialog()"></v-list-item>
-                                <v-divider class="my-2"/>
-                                <v-list-item :prepend-icon="mdiShapePlusOutline"
-                                             :disabled="!!editingTransaction || !allInvalidExpenseCategoryNames || allInvalidExpenseCategoryNames.length < 1"
-                                             :title="tt('Create Nonexistent Expense Categories')"
-                                             @click="showBatchCreateInvalidItemDialog('expenseCategory', allInvalidExpenseCategoryNames)"></v-list-item>
-                                <v-list-item :prepend-icon="mdiShapePlusOutline"
-                                             :disabled="!!editingTransaction || !allInvalidIncomeCategoryNames || allInvalidIncomeCategoryNames.length < 1"
-                                             :title="tt('Create Nonexistent Income Categories')"
-                                             @click="showBatchCreateInvalidItemDialog('incomeCategory', allInvalidIncomeCategoryNames)"></v-list-item>
-                                <v-list-item :prepend-icon="mdiShapePlusOutline"
-                                             :disabled="!!editingTransaction || !allInvalidTransferCategoryNames || allInvalidTransferCategoryNames.length < 1"
-                                             :title="tt('Create Nonexistent Transfer Categories')"
-                                             @click="showBatchCreateInvalidItemDialog('transferCategory', allInvalidTransferCategoryNames)"></v-list-item>
-                                <v-list-item :prepend-icon="mdiShapePlusOutline"
-                                             :disabled="!!editingTransaction || !allInvalidTransactionTagNames || allInvalidTransactionTagNames.length < 1"
-                                             :title="tt('Create Nonexistent Transaction Tags')"
-                                             @click="showBatchCreateInvalidItemDialog('tag', allInvalidTransactionTagNames)"></v-list-item>
-                                <v-divider class="my-2"/>
-                                <v-list-item :prepend-icon="mdiTransfer"
-                                             :disabled="!!editingTransaction || selectedExpenseTransactionCount < 1"
-                                             :title="tt('Batch Convert Expense Transaction to Income Transaction')"
-                                             @click="convertTransactionType(TransactionType.Expense, TransactionType.Income)"></v-list-item>
-                                <v-list-item :prepend-icon="mdiTransfer"
-                                             :disabled="!!editingTransaction || selectedExpenseTransactionCount < 1"
-                                             :title="tt('Batch Convert Expense Transaction to Transfer Transaction')"
-                                             @click="convertTransactionType(TransactionType.Expense, TransactionType.Transfer)"></v-list-item>
-                                <v-list-item :prepend-icon="mdiTransfer"
-                                             :disabled="!!editingTransaction || selectedIncomeTransactionCount < 1"
-                                             :title="tt('Batch Convert Income Transaction to Expense Transaction')"
-                                             @click="convertTransactionType(TransactionType.Income, TransactionType.Expense)"></v-list-item>
-                                <v-list-item :prepend-icon="mdiTransfer"
-                                             :disabled="!!editingTransaction || selectedIncomeTransactionCount < 1"
-                                             :title="tt('Batch Convert Income Transaction to Transfer Transaction')"
-                                             @click="convertTransactionType(TransactionType.Income, TransactionType.Transfer)"></v-list-item>
-                                <v-list-item :prepend-icon="mdiTransfer"
-                                             :disabled="!!editingTransaction || selectedTransferTransactionCount < 1"
-                                             :title="tt('Batch Convert Transfer Transaction to Expense Transaction')"
-                                             @click="convertTransactionType(TransactionType.Transfer, TransactionType.Expense)"></v-list-item>
-                                <v-list-item :prepend-icon="mdiTransfer"
-                                             :disabled="!!editingTransaction || selectedTransferTransactionCount < 1"
-                                             :title="tt('Batch Convert Transfer Transaction to Income Transaction')"
-                                             @click="convertTransactionType(TransactionType.Transfer, TransactionType.Income)"></v-list-item>
+                                <template :key="index" v-for="(menu, index) in importTransactionCheckDataTab.toolMenus">
+                                    <v-divider class="my-2" v-if="menu.divider" />
+                                    <v-list-item :prepend-icon="menu.prependIcon"
+                                                 :title="menu.title"
+                                                 :subtitle="menu.subTitle"
+                                                 :append-icon="menu.appendIcon"
+                                                 :disabled="menu.disabled"
+                                                 @click="menu.onClick()" />
+                                </template>
                             </v-list>
                         </v-menu>
                     </v-btn>
@@ -297,521 +151,18 @@
                     </v-row>
                 </v-window-item>
                 <v-window-item value="defineColumn">
-                    <v-data-table
-                        fixed-header
-                        fixed-footer
-                        density="compact"
-                        item-value="index"
-                        :class="{ 'import-transaction-table': true, 'disabled': loading || submitting }"
-                        :height="parsedFileLinesTableHeight"
-                        :disable-sort="true"
-                        :headers="parsedFileLinesHeaders"
-                        :items="parsedFileLines"
-                        :no-data-text="tt('No data to import')"
-                        v-model:items-per-page="countPerPage"
-                        v-model:page="currentPage"
-                    >
-                        <template #headers="{ columns }">
-                            <tr>
-                                <th class="text-no-wrap" :key="column.key ?? undefined" v-for="column in columns">
-                                    <span v-if="!column.key || column.key === 'index'">{{ column.title }}</span>
-                                    <div class="py-1" v-if="column.key && column.key !== 'index'">
-                                        <span>{{ getParseDataMappedColumnDisplayName(parseInt(column.key)) }}</span>
-                                        <br/>
-                                        <span>({{ column.title }})</span>
-                                        <v-menu activator="parent" location="bottom" max-height="500">
-                                            <v-list>
-                                                <v-list-item :key="columnType.type"
-                                                             :append-icon="parsedFileDataColumnMapping.dataColumnMapping[columnType.type] === parseInt(column.key) ? mdiCheck : undefined"
-                                                             v-for="columnType in allImportTransactionColumnTypes"
-                                                             @click="parsedFileDataColumnMapping.toggleDataMappingColumn(parseInt(column.key), columnType.type)">
-                                                    <v-list-item-title class="cursor-pointer">
-                                                        {{ columnType.displayName }}
-                                                    </v-list-item-title>
-                                                </v-list-item>
-                                            </v-list>
-                                        </v-menu>
-                                    </div>
-                                </th>
-                            </tr>
-                        </template>
-                        <template #bottom>
-                            <div class="title-and-toolbar d-flex align-center text-no-wrap mt-2" v-if="parsedFileData">
-                                <v-btn color="secondary" density="compact" variant="outlined"
-                                       :append-icon="parsedFileDataColumnMapping.includeHeader ? mdiCheck : mdiClose"
-                                       @click="parsedFileDataColumnMapping.toggleIncludeHeader()">{{ tt('Include Header Line') }}</v-btn>
-                                <v-btn class="ms-2" color="secondary" density="compact" variant="outlined"
-                                       :disabled="!parsedFileDataColumnMapping || !parsedFileDataColumnMapping.isColumnMappingSet(ImportTransactionColumnType.TransactionType) || !parsedFileAllTransactionTypes">
-                                    <span>{{ tt('Transaction Type Mapping') }}</span>
-                                    <span class="ms-1" v-if="parsedFileDataColumnMapping && parsedFileDataColumnMapping.isColumnMappingSet(ImportTransactionColumnType.TransactionType) && parsedFileAllTransactionTypes">({{ getObjectOwnFieldCount(parsedFileValidMappedTransactionTypes) || tt('None') }})</span>
-                                    <v-menu eager activator="parent" location="bottom" max-height="500"
-                                            :close-on-content-click="false">
-                                        <v-list class="pa-0">
-                                            <v-list-item class="pa-0">
-                                                <v-table class="transaction-types-popup-menu">
-                                                    <tbody>
-                                                    <tr :key="typeName"
-                                                        v-for="typeName in parsedFileAllTransactionTypes">
-                                                        <td>{{ typeName }}</td>
-                                                        <td>
-                                                            <v-btn-toggle class="transaction-types-toggle" density="compact" variant="outlined"
-                                                                          mandatory="force" divided
-                                                                          v-model="parsedFileDataColumnMapping.transactionTypeMapping[typeName]">
-                                                                <v-btn :value="undefined">{{ tt('None') }}</v-btn>
-                                                                <v-btn :value="TransactionType.ModifyBalance">{{ tt('Modify Balance') }}</v-btn>
-                                                                <v-btn :value="TransactionType.Income">{{ tt('Income') }}</v-btn>
-                                                                <v-btn :value="TransactionType.Expense">{{ tt('Expense') }}</v-btn>
-                                                                <v-btn :value="TransactionType.Transfer">{{ tt('Transfer') }}</v-btn>
-                                                            </v-btn-toggle>
-                                                        </td>
-                                                    </tr>
-                                                    </tbody>
-                                                </v-table>
-                                            </v-list-item>
-                                        </v-list>
-                                    </v-menu>
-                                </v-btn>
-                                <v-btn class="ms-2" color="secondary" density="compact" variant="outlined"
-                                       :disabled="!parsedFileDataColumnMapping || !parsedFileDataColumnMapping.isColumnMappingSet(ImportTransactionColumnType.TransactionTime)">
-                                    <span>{{ tt('Time Format') }}</span>
-                                    <span class="ms-1" v-if="parsedFileDataColumnMapping && parsedFileDataColumnMapping.isColumnMappingSet(ImportTransactionColumnType.TransactionTime)">({{ parsedFileDataColumnMapping.timeFormat || parsedFileAutoDetectedTimeFormat || tt('Unknown') }})</span>
-                                    <v-menu eager activator="parent" location="bottom" max-height="500">
-                                        <v-list>
-                                            <v-list-item key="auto"
-                                                         :append-icon="parsedFileDataColumnMapping.timeFormat === '' ? mdiCheck : undefined"
-                                                         @click="parsedFileDataColumnMapping.timeFormat = ''">
-                                                <v-list-item-title class="cursor-pointer">
-                                                    <span>{{ tt('Auto detect') }}</span>
-                                                    <span class="ms-1" v-if="parsedFileAutoDetectedTimeFormat">({{ parsedFileAutoDetectedTimeFormat }})</span>
-                                                    <span class="ms-1" v-if="!parsedFileAutoDetectedTimeFormat">({{ tt('Unknown') }})</span>
-                                                </v-list-item-title>
-                                            </v-list-item>
-                                            <v-list-item :key="dateTimeFormat.format"
-                                                         :append-icon="parsedFileDataColumnMapping.timeFormat === dateTimeFormat.format ? mdiCheck : undefined"
-                                                         v-for="dateTimeFormat in KnownDateTimeFormat.values()"
-                                                         @click="parsedFileDataColumnMapping.timeFormat = dateTimeFormat.format">
-                                                <v-list-item-title class="cursor-pointer">
-                                                    {{ dateTimeFormat.format }}
-                                                </v-list-item-title>
-                                            </v-list-item>
-                                        </v-list>
-                                    </v-menu>
-                                </v-btn>
-                                <v-btn class="ms-2" color="secondary" density="compact" variant="outlined"
-                                       v-if="parsedFileDataColumnMapping && parsedFileDataColumnMapping.isColumnMappingSet(ImportTransactionColumnType.TransactionTimezone)">
-                                    <span>{{ tt('Timezone Format') }}</span>
-                                    <span class="ms-1" v-if="parsedFileDataColumnMapping && parsedFileDataColumnMapping.isColumnMappingSet(ImportTransactionColumnType.TransactionTimezone)">({{ KnownDateTimezoneFormat.valueOf(parsedFileDataColumnMapping.timezoneFormat || parsedFileAutoDetectedTimezoneFormat || '')?.name || tt('Unknown') }})</span>
-                                    <v-menu eager activator="parent" location="bottom" max-height="500">
-                                        <v-list>
-                                            <v-list-item key="auto"
-                                                         :append-icon="parsedFileDataColumnMapping.timezoneFormat === '' ? mdiCheck : undefined"
-                                                         @click="parsedFileDataColumnMapping.timezoneFormat = ''">
-                                                <v-list-item-title class="cursor-pointer">
-                                                    <span>{{ tt('Auto detect') }}</span>
-                                                    <span class="ms-1" v-if="parsedFileAutoDetectedTimezoneFormat && KnownDateTimezoneFormat.valueOf(parsedFileAutoDetectedTimezoneFormat || '')">({{ KnownDateTimezoneFormat.valueOf(parsedFileAutoDetectedTimezoneFormat || '')?.name }})</span>
-                                                    <span class="ms-1" v-if="!parsedFileAutoDetectedTimezoneFormat || !KnownDateTimezoneFormat.valueOf(parsedFileAutoDetectedTimezoneFormat || '')">({{ tt('Unknown') }})</span>
-                                                </v-list-item-title>
-                                            </v-list-item>
-                                            <v-list-item :key="timezoneFormat.value"
-                                                         :append-icon="parsedFileDataColumnMapping.timezoneFormat === timezoneFormat.value ? mdiCheck : undefined"
-                                                         v-for="timezoneFormat in KnownDateTimezoneFormat.values()"
-                                                         @click="parsedFileDataColumnMapping.timezoneFormat = timezoneFormat.value">
-                                                <v-list-item-title class="cursor-pointer">
-                                                    {{ timezoneFormat.name }}
-                                                </v-list-item-title>
-                                            </v-list-item>
-                                        </v-list>
-                                    </v-menu>
-                                </v-btn>
-                                <v-btn class="ms-2" color="secondary" density="compact" variant="outlined"
-                                       :disabled="!parsedFileDataColumnMapping || !parsedFileDataColumnMapping.isColumnMappingSet(ImportTransactionColumnType.Amount)">
-                                    <span>{{ tt('Amount Format') }}</span>
-                                    <span class="ms-1" v-if="parsedFileDataColumnMapping && parsedFileDataColumnMapping.isColumnMappingSet(ImportTransactionColumnType.Amount)">({{ KnownAmountFormat.valueOf(parsedFileDataColumnMapping.amountFormat || parsedFileAutoDetectedAmountFormat || '')?.format || tt('Unknown') }})</span>
-                                    <v-menu eager activator="parent" location="bottom" max-height="500">
-                                        <v-list>
-                                            <v-list-item key="auto"
-                                                         :append-icon="parsedFileDataColumnMapping.amountFormat === '' ? mdiCheck : undefined"
-                                                         @click="parsedFileDataColumnMapping.amountFormat = ''">
-                                                <v-list-item-title class="cursor-pointer">
-                                                    <span>{{ tt('Auto detect') }}</span>
-                                                    <span class="ms-1" v-if="parsedFileAutoDetectedAmountFormat && KnownAmountFormat.valueOf(parsedFileAutoDetectedAmountFormat || '')">({{ KnownAmountFormat.valueOf(parsedFileAutoDetectedAmountFormat || '')?.format }})</span>
-                                                    <span class="ms-1" v-if="!parsedFileAutoDetectedAmountFormat || !KnownAmountFormat.valueOf(parsedFileAutoDetectedAmountFormat || '')">({{ tt('Unknown') }})</span>
-                                                </v-list-item-title>
-                                            </v-list-item>
-                                            <v-list-item :key="amountFormat.type"
-                                                         :append-icon="parsedFileDataColumnMapping.amountFormat === amountFormat.type ? mdiCheck : undefined"
-                                                         v-for="amountFormat in KnownAmountFormat.values()"
-                                                         @click="parsedFileDataColumnMapping.amountFormat = amountFormat.type">
-                                                <v-list-item-title class="cursor-pointer">
-                                                    {{ amountFormat.format }}
-                                                </v-list-item-title>
-                                            </v-list-item>
-                                        </v-list>
-                                    </v-menu>
-                                </v-btn>
-                                <v-btn class="ms-2" color="secondary" density="compact" variant="outlined"
-                                       v-if="parsedFileDataColumnMapping && parsedFileDataColumnMapping.isColumnMappingSet(ImportTransactionColumnType.GeographicLocation)">
-                                    <span>{{ tt('Geographic Location Separator') }}</span>
-                                    <span class="ms-1" v-if="parsedFileDataColumnMapping.geoLocationOrder">({{ parsedFileDataColumnMapping.formatGeoLocation(tt('Latitude'), tt('Longitude')) }})</span>
-                                    <v-menu eager activator="parent" location="bottom" max-height="500"
-                                            :close-on-content-click="false">
-                                        <v-list class="pa-0">
-                                            <v-list-item class="pa-0">
-                                                <v-table class="transaction-types-popup-menu">
-                                                    <tbody>
-                                                    <tr :key="separator.value"
-                                                        v-for="separator in allSeparators">
-                                                        <td>{{ separator.name }} ({{separator.value}})</td>
-                                                        <td>
-                                                            <v-btn-toggle class="transaction-types-toggle" density="compact" variant="outlined"
-                                                                          mandatory="force" divided
-                                                                          v-model="parsedFileDataColumnMapping.geoLocationOrder"
-                                                                          v-if="parsedFileDataColumnMapping.geoLocationSeparator === separator.value">
-                                                                <v-btn value="latlon">{{ `${tt('Latitude')}${separator.value}${tt('Longitude')}` }}</v-btn>
-                                                                <v-btn value="lonlat">{{ `${tt('Longitude')}${separator.value}${tt('Latitude')}` }}</v-btn>
-                                                            </v-btn-toggle>
-                                                            <v-btn-group class="transaction-types-toggle" density="compact" variant="outlined"
-                                                                          divided v-if="parsedFileDataColumnMapping.geoLocationSeparator !== separator.value">
-                                                                <v-btn @click="parsedFileDataColumnMapping.setGeoLocationFormat(separator.value, 'latlon')">{{ `${tt('Latitude')}${separator.value}${tt('Longitude')}` }}</v-btn>
-                                                                <v-btn @click="parsedFileDataColumnMapping.setGeoLocationFormat(separator.value, 'lonlat')">{{ `${tt('Longitude')}${separator.value}${tt('Latitude')}` }}</v-btn>
-                                                            </v-btn-group>
-                                                        </td>
-                                                    </tr>
-                                                    </tbody>
-                                                </v-table>
-                                            </v-list-item>
-                                        </v-list>
-                                    </v-menu>
-                                </v-btn>
-                                <v-btn class="ms-2" color="secondary" density="compact" variant="outlined"
-                                       v-if="parsedFileDataColumnMapping && parsedFileDataColumnMapping.isColumnMappingSet(ImportTransactionColumnType.Tags)">
-                                    <span>{{ tt('Transaction Tags Separator') }}</span>
-                                    <span class="ms-1" v-if="parsedFileDataColumnMapping.tagSeparator">({{ parsedFileDataColumnMapping.tagSeparator }})</span>
-                                    <v-menu eager activator="parent" location="bottom" max-height="500">
-                                        <v-list>
-                                            <v-list-item :key="separator.value"
-                                                         :append-icon="parsedFileDataColumnMapping.tagSeparator === separator.value ? mdiCheck : undefined"
-                                                         v-for="separator in allSeparators"
-                                                         @click="parsedFileDataColumnMapping.tagSeparator = separator.value">
-                                                <v-list-item-title class="cursor-pointer">
-                                                    {{ separator.name }} ({{separator.value}})
-                                                </v-list-item-title>
-                                            </v-list-item>
-                                        </v-list>
-                                    </v-menu>
-                                </v-btn>
-                                <v-spacer/>
-                                <span>{{ tt('Lines Per Page') }}</span>
-                                <v-select class="ms-2" density="compact" max-width="100"
-                                          item-title="name"
-                                          item-value="value"
-                                          :disabled="loading || submitting"
-                                          :items="parsedFileLinesTablePageOptions"
-                                          v-model="countPerPage"
-                                />
-                                <pagination-buttons density="compact"
-                                                    :disabled="loading || submitting"
-                                                    :totalPageCount="Math.ceil((parsedFileLines ? parsedFileLines.length : 0) / countPerPage)"
-                                                    v-model="currentPage"></pagination-buttons>
-                            </div>
-                        </template>
-                    </v-data-table>
+                    <import-transaction-define-column-tab
+                        ref="importTransactionDefineColumnTab"
+                        :parsed-file-data="parsedFileData"
+                        :disabled="loading || submitting"
+                    />
                 </v-window-item>
                 <v-window-item value="checkData">
-                    <v-data-table
-                        fixed-header
-                        fixed-footer
-                        show-select
-                        multi-sort
-                        density="compact"
-                        item-value="index"
-                        :class="{ 'import-transaction-table': true, 'disabled': loading || submitting }"
-                        :height="importTransactionsTableHeight"
-                        :headers="importTransactionHeaders"
-                        :items="importTransactions"
-                        :search="JSON.stringify(filters)"
-                        :custom-filter="importTransactionsFilter"
-                        :no-data-text="tt('No data to import')"
-                        v-model:items-per-page="countPerPage"
-                        v-model:page="currentPage"
-                    >
-                        <template #header.data-table-select>
-                            <v-checkbox readonly class="always-cursor-pointer"
-                                        density="compact" width="28"
-                                        :disabled="loading || submitting"
-                                        :indeterminate="anyButNotAllTransactionSelected"
-                                        v-model="allTransactionSelected"
-                            >
-                                <v-menu activator="parent" location="bottom">
-                                    <v-list>
-                                        <v-list-item :prepend-icon="mdiSelectAll"
-                                                     :title="tt('Select All Valid Items')"
-                                                     :disabled="loading || submitting"
-                                                     @click="selectAllValid"></v-list-item>
-                                        <v-list-item :prepend-icon="mdiSelectAll"
-                                                     :title="tt('Select All Invalid Items')"
-                                                     :disabled="loading || submitting"
-                                                     @click="selectAllInvalid"></v-list-item>
-                                        <v-divider class="my-2"/>
-                                        <v-list-item :prepend-icon="mdiSelectAll"
-                                                     :title="tt('Select All')"
-                                                     :disabled="loading || submitting"
-                                                     @click="selectAll"></v-list-item>
-                                        <v-list-item :prepend-icon="mdiSelect"
-                                                     :title="tt('Select None')"
-                                                     :disabled="loading || submitting"
-                                                     @click="selectNone"></v-list-item>
-                                        <v-list-item :prepend-icon="mdiSelectInverse"
-                                                     :title="tt('Invert Selection')"
-                                                     :disabled="loading || submitting"
-                                                     @click="selectInvert"></v-list-item>
-                                        <v-divider class="my-2"/>
-                                        <v-list-item :prepend-icon="mdiSelectAll"
-                                                     :title="tt('Select All in This Page')"
-                                                     :disabled="loading || submitting"
-                                                     @click="selectAllInThisPage"></v-list-item>
-                                        <v-list-item :prepend-icon="mdiSelect"
-                                                     :title="tt('Select None in This Page')"
-                                                     :disabled="loading || submitting"
-                                                     @click="selectNoneInThisPage"></v-list-item>
-                                        <v-list-item :prepend-icon="mdiSelectInverse"
-                                                     :title="tt('Invert Selection in This Page')"
-                                                     :disabled="loading || submitting"
-                                                     @click="selectInvertInThisPage"></v-list-item>
-                                    </v-list>
-                                </v-menu>
-                            </v-checkbox>
-                        </template>
-                        <template #item.data-table-select="{ item }">
-                            <v-checkbox density="compact"
-                                        :color="!item.valid ? 'error' : 'primary'"
-                                        :disabled="loading || submitting"
-                                        v-model="item.selected"></v-checkbox>
-                        </template>
-                        <template #item.valid="{ item }">
-                            <v-icon size="small" :class="{ 'text-error': !item.valid }"
-                                    :disabled="loading || submitting"
-                                    :icon="editingTransaction === item ? mdiCheck : mdiPencilOutline"
-                                    @click="editTransaction(item)">
-                            </v-icon>
-                            <v-tooltip activator="parent" v-if="!loading && !submitting">{{ tt('Edit') }}</v-tooltip>
-                        </template>
-                        <template #item.time="{ item }">
-                            <span>{{ getDisplayDateTime(item) }}</span>
-                            <v-chip class="ms-1" variant="flat" color="grey" size="x-small"
-                                    v-if="item.utcOffset !== currentTimezoneOffsetMinutes">{{ getDisplayTimezone(item) }}</v-chip>
-                        </template>
-                        <template #item.type="{ value }">
-                            <v-chip label color="secondary" variant="outlined" size="x-small" v-if="value === TransactionType.ModifyBalance">{{ tt('Modify Balance') }}</v-chip>
-                            <v-chip label class="text-income" variant="outlined" size="x-small" v-else-if="value === TransactionType.Income">{{ tt('Income') }}</v-chip>
-                            <v-chip label class="text-expense" variant="outlined" size="x-small" v-else-if="value === TransactionType.Expense">{{ tt('Expense') }}</v-chip>
-                            <v-chip label color="primary" variant="outlined" size="x-small" v-else-if="value === TransactionType.Transfer">{{ tt('Transfer') }}</v-chip>
-                            <v-chip label color="default" variant="outlined" size="x-small" v-else>{{ tt('Unknown') }}</v-chip>
-                        </template>
-                        <template #item.actualCategoryName="{ item }">
-                            <div class="d-flex align-center" v-if="editingTransaction !== item || item.type === TransactionType.ModifyBalance">
-                                <span v-if="item.type === TransactionType.ModifyBalance">-</span>
-                                <ItemIcon size="24px" icon-type="category"
-                                          :icon-id="allCategoriesMap[item.categoryId].icon"
-                                          :color="allCategoriesMap[item.categoryId].color"
-                                          v-if="item.type !== TransactionType.ModifyBalance && item.categoryId && item.categoryId !== '0' && allCategoriesMap[item.categoryId]"></ItemIcon>
-                                <span class="ms-2" v-if="item.type !== TransactionType.ModifyBalance && item.categoryId && item.categoryId !== '0' && allCategoriesMap[item.categoryId]">
-                                    {{ allCategoriesMap[item.categoryId].name }}
-                                </span>
-                                <div class="text-error font-italic" v-else-if="item.type !== TransactionType.ModifyBalance && (!item.categoryId || item.categoryId === '0' || !allCategoriesMap[item.categoryId])">
-                                    <v-icon class="me-1" :icon="mdiAlertOutline"/>
-                                    <span>{{ item.originalCategoryName }}</span>
-                                </div>
-                            </div>
-                            <div style="width: 260px" v-if="editingTransaction === item && item.type === TransactionType.Expense">
-                                <two-column-select density="compact" variant="plain"
-                                                   primary-key-field="id" primary-value-field="id" primary-title-field="name"
-                                                   primary-icon-field="icon" primary-icon-type="category" primary-color-field="color"
-                                                   primary-hidden-field="hidden" primary-sub-items-field="subCategories"
-                                                   secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
-                                                   secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
-                                                   secondary-hidden-field="hidden"
-                                                   :disabled="loading || submitting || !hasAvailableExpenseCategories"
-                                                   :enable-filter="true" :filter-placeholder="tt('Find category')" :filter-no-items-text="tt('No available category')"
-                                                   :show-selection-primary-text="true"
-                                                   :custom-selection-primary-text="getTransactionPrimaryCategoryName(item.categoryId, allCategories[CategoryType.Expense])"
-                                                   :custom-selection-secondary-text="getTransactionSecondaryCategoryName(item.categoryId, allCategories[CategoryType.Expense])"
-                                                   :placeholder="tt('Category')"
-                                                   :items="allCategories[CategoryType.Expense]"
-                                                   v-model="item.categoryId">
-                                </two-column-select>
-                            </div>
-                            <div style="width: 260px" v-if="editingTransaction === item && item.type === TransactionType.Income">
-                                <two-column-select density="compact" variant="plain"
-                                                   primary-key-field="id" primary-value-field="id" primary-title-field="name"
-                                                   primary-icon-field="icon" primary-icon-type="category" primary-color-field="color"
-                                                   primary-hidden-field="hidden" primary-sub-items-field="subCategories"
-                                                   secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
-                                                   secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
-                                                   secondary-hidden-field="hidden"
-                                                   :disabled="loading || submitting || !hasAvailableIncomeCategories"
-                                                   :enable-filter="true" :filter-placeholder="tt('Find category')" :filter-no-items-text="tt('No available category')"
-                                                   :show-selection-primary-text="true"
-                                                   :custom-selection-primary-text="getTransactionPrimaryCategoryName(item.categoryId, allCategories[CategoryType.Income])"
-                                                   :custom-selection-secondary-text="getTransactionSecondaryCategoryName(item.categoryId, allCategories[CategoryType.Income])"
-                                                   :placeholder="tt('Category')"
-                                                   :items="allCategories[CategoryType.Income]"
-                                                   v-model="item.categoryId">
-                                </two-column-select>
-                            </div>
-                            <div style="width: 260px" v-if="editingTransaction === item && item.type === TransactionType.Transfer">
-                                <two-column-select density="compact" variant="plain"
-                                                   primary-key-field="id" primary-value-field="id" primary-title-field="name"
-                                                   primary-icon-field="icon" primary-icon-type="category" primary-color-field="color"
-                                                   primary-hidden-field="hidden" primary-sub-items-field="subCategories"
-                                                   secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
-                                                   secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
-                                                   secondary-hidden-field="hidden"
-                                                   :disabled="loading || submitting || !hasAvailableTransferCategories"
-                                                   :enable-filter="true" :filter-placeholder="tt('Find category')" :filter-no-items-text="tt('No available category')"
-                                                   :show-selection-primary-text="true"
-                                                   :custom-selection-primary-text="getTransactionPrimaryCategoryName(item.categoryId, allCategories[CategoryType.Transfer])"
-                                                   :custom-selection-secondary-text="getTransactionSecondaryCategoryName(item.categoryId, allCategories[CategoryType.Transfer])"
-                                                   :placeholder="tt('Category')"
-                                                   :items="allCategories[CategoryType.Transfer]"
-                                                   v-model="item.categoryId">
-                                </two-column-select>
-                            </div>
-                        </template>
-                        <template #item.sourceAmount="{ item }">
-                            <span>{{ getTransactionDisplayAmount(item) }}</span>
-                            <v-icon class="icon-with-direction mx-1" size="13" :icon="mdiArrowRight" v-if="item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId"></v-icon>
-                            <span v-if="item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId">{{ getTransactionDisplayDestinationAmount(item) }}</span>
-                        </template>
-                        <template #item.actualSourceAccountName="{ item }">
-                            <div class="d-flex align-center" v-if="editingTransaction !== item">
-                                <span v-if="item.sourceAccountId && item.sourceAccountId !== '0' && allAccountsMap[item.sourceAccountId]">{{ allAccountsMap[item.sourceAccountId].name }}</span>
-                                <div class="text-error font-italic" v-else>
-                                    <v-icon class="me-1" :icon="mdiAlertOutline"/>
-                                    <span>{{ item.originalSourceAccountName }}</span>
-                                </div>
-                                <v-icon class="icon-with-direction mx-1" size="13" :icon="mdiArrowRight" v-if="item.type === TransactionType.Transfer"></v-icon>
-                                <span v-if="item.type === TransactionType.Transfer && item.destinationAccountId && item.destinationAccountId !== '0' && allAccountsMap[item.destinationAccountId]">{{allAccountsMap[item.destinationAccountId].name }}</span>
-                                <div class="text-error font-italic" v-else-if="item.type === TransactionType.Transfer && (!item.destinationAccountId || item.destinationAccountId === '0' || !allAccountsMap[item.destinationAccountId])">
-                                    <v-icon class="me-1" :icon="mdiAlertOutline"/>
-                                    <span>{{ item.originalDestinationAccountName }}</span>
-                                </div>
-                            </div>
-                            <div class="d-flex align-center" style="width: 200px" v-if="editingTransaction === item">
-                                <two-column-select density="compact" variant="plain"
-                                                   primary-key-field="id" primary-value-field="category"
-                                                   primary-title-field="name" primary-footer-field="displayBalance"
-                                                   primary-icon-field="icon" primary-icon-type="account"
-                                                   primary-sub-items-field="accounts"
-                                                   :primary-title-i18n="true"
-                                                   secondary-key-field="id" secondary-value-field="id"
-                                                   secondary-title-field="name" secondary-footer-field="displayBalance"
-                                                   secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
-                                                   :disabled="loading || submitting || !allVisibleAccounts.length"
-                                                   :enable-filter="true" :filter-placeholder="tt('Find account')" :filter-no-items-text="tt('No available account')"
-                                                   :custom-selection-primary-text="getSourceAccountDisplayName(item)"
-                                                   :placeholder="getSourceAccountTitle(item)"
-                                                   :items="allVisibleCategorizedAccounts"
-                                                   v-model="item.sourceAccountId">
-                                </two-column-select>
-                                <v-icon class="icon-with-direction mx-1" size="13" :icon="mdiArrowRight" v-if="item.type === TransactionType.Transfer"></v-icon>
-                                <two-column-select density="compact" variant="plain"
-                                                   primary-key-field="id" primary-value-field="category"
-                                                   primary-title-field="name" primary-footer-field="displayBalance"
-                                                   primary-icon-field="icon" primary-icon-type="account"
-                                                   primary-sub-items-field="accounts"
-                                                   :primary-title-i18n="true"
-                                                   secondary-key-field="id" secondary-value-field="id"
-                                                   secondary-title-field="name" secondary-footer-field="displayBalance"
-                                                   secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
-                                                   :disabled="loading || submitting || !allVisibleAccounts.length"
-                                                   :enable-filter="true" :filter-placeholder="tt('Find account')" :filter-no-items-text="tt('No available account')"
-                                                   :custom-selection-primary-text="getDestinationAccountDisplayName(item)"
-                                                   :placeholder="tt('Destination Account')"
-                                                   :items="allVisibleCategorizedAccounts"
-                                                   v-model="item.destinationAccountId"
-                                                   v-if="item.type === TransactionType.Transfer">
-                                </two-column-select>
-                            </div>
-                        </template>
-                        <template #item.geoLocation="{ item }">
-                            <span v-if="item.geoLocation">{{ `(${formatCoordinate(item.geoLocation, coordinateDisplayType)})` }}</span>
-                            <span v-else-if="!item.geoLocation">{{ tt('None') }}</span>
-                        </template>
-                        <template #item.tagIds="{ item }">
-                            <div v-if="editingTransaction !== item">
-                                <v-chip class="transaction-tag" size="small"
-                                        :class="{ 'font-italic': !tagId || tagId === '0' || !allTagsMap[tagId] }"
-                                        :prepend-icon="tagId && tagId !== '0' && allTagsMap[tagId] ? mdiPound : mdiAlertOutline"
-                                        :color="tagId && tagId !== '0' && allTagsMap[tagId] ? 'default' : 'error'"
-                                        :text="tagId && tagId !== '0' && allTagsMap[tagId] ? allTagsMap[tagId].name : item.originalTagNames[index]"
-                                        :key="tagId"
-                                        v-for="(tagId, index) in item.tagIds"/>
-                                <v-chip class="transaction-tag" size="small"
-                                        :text="tt('None')"
-                                        v-if="!item.tagIds || !item.tagIds.length"/>
-                            </div>
-                            <div style="width: 200px" v-if="editingTransaction === item">
-                                <v-autocomplete
-                                    item-title="name"
-                                    item-value="id"
-                                    auto-select-first
-                                    persistent-placeholder
-                                    multiple
-                                    chips
-                                    closable-chips
-                                    density="compact" variant="plain"
-                                    :disabled="loading || submitting"
-                                    :placeholder="tt('None')"
-                                    :items="allTags"
-                                    :no-data-text="tt('No available tag')"
-                                    v-model="editingTags"
-                                >
-                                    <template #chip="{ props, index }">
-                                        <v-chip :class="{ 'font-italic': !isTagValid(editingTags, index) }"
-                                                :prepend-icon="isTagValid(editingTags, index) ? mdiPound : mdiAlertOutline"
-                                                :color="isTagValid(editingTags, index) ? 'default' : 'error'"
-                                                :text="isTagValid(editingTags, index) ? allTagsMap[editingTags[index]].name : item.originalTagNames[index]"
-                                                v-bind="props"/>
-                                    </template>
-
-                                    <template #item="{ props, item }">
-                                        <v-list-item :value="item.value" v-bind="props" v-if="!item.raw.hidden">
-                                            <template #title>
-                                                <v-list-item-title>
-                                                    <div class="d-flex align-center">
-                                                        <v-icon size="20" start :icon="mdiPound"/>
-                                                        <span>{{ item.title }}</span>
-                                                    </div>
-                                                </v-list-item-title>
-                                            </template>
-                                        </v-list-item>
-                                    </template>
-                                </v-autocomplete>
-                            </div>
-                        </template>
-                        <template #bottom>
-                            <div class="title-and-toolbar d-flex align-center text-no-wrap mt-2"
-                                 v-if="importTransactions && importTransactions.length > 10">
-                                <span :class="{ 'text-error': selectedInvalidTransactionCount > 0 }">
-                                    {{ tt('format.misc.selectedCount', { count: getDisplayCount(selectedImportTransactionCount), totalCount: getDisplayCount(importTransactions.length) }) }}
-                                </span>
-                                <v-spacer/>
-                                <span>{{ tt('Transactions Per Page') }}</span>
-                                <v-select class="ms-2" density="compact" max-width="100"
-                                          item-title="name"
-                                          item-value="value"
-                                          :disabled="loading || submitting"
-                                          :items="importTransactionsTablePageOptions"
-                                          v-model="countPerPage"
-                                />
-                                <pagination-buttons density="compact"
-                                                    :disabled="loading || submitting"
-                                                    :totalPageCount="totalPageCount"
-                                                    v-model="currentPage"></pagination-buttons>
-                            </div>
-                        </template>
-                    </v-data-table>
+                    <import-transaction-check-data-tab
+                        ref="importTransactionCheckDataTab"
+                        :import-transactions="importTransactions"
+                        :disabled="loading || submitting"
+                    />
                 </v-window-item>
                 <v-window-item value="finalResult">
                     <h4 class="text-h4 mb-1">{{ tt('Data Import Completed') }}</h4>
@@ -831,7 +182,7 @@
                     <v-progress-circular indeterminate size="22" class="ms-2" v-if="submitting"></v-progress-circular>
                 </v-btn>
                 <v-btn class="button-icon-with-direction" color="teal"
-                       :disabled="submitting || !!editingTransaction || selectedImportTransactionCount < 1 || selectedInvalidTransactionCount > 0"
+                       :disabled="submitting || importTransactionCheckDataTab?.isEditing || !importTransactionCheckDataTab?.canImport"
                        :append-icon="!submitting ? mdiArrowRight : undefined" @click="submit"
                        v-if="currentStep === 'checkData'">
                     {{ (submitting && importProcess > 0 ? tt('format.misc.importingTransactions', { process: formatNumberToLocalizedNumerals(importProcess, 2) }) : tt('Import')) }}
@@ -845,40 +196,6 @@
         </v-card>
     </v-dialog>
 
-    <v-dialog width="640" v-model="showCustomDescriptionDialog">
-        <v-card class="pa-2 pa-sm-4 pa-md-4">
-            <template #title>
-                <div class="d-flex align-center justify-center">
-                    <h4 class="text-h4">{{ tt('Filter Description') }}</h4>
-                </div>
-            </template>
-            <v-card-text class="mb-md-4 w-100 d-flex justify-center">
-                <v-text-field
-                    type="text"
-                    persistent-placeholder
-                    :label="tt('Description')"
-                    :placeholder="tt('Description')"
-                    v-model="currentDescriptionFilterValue"
-                />
-            </v-card-text>
-            <v-card-text class="overflow-y-visible">
-                <div class="w-100 d-flex justify-center gap-4">
-                    <v-btn :disabled="!currentDescriptionFilterValue" @click="showCustomDescriptionDialog = false; filters.description = currentDescriptionFilterValue">{{ tt('OK') }}</v-btn>
-                    <v-btn color="secondary" variant="tonal" @click="showCustomDescriptionDialog = false; currentDescriptionFilterValue = ''">{{ tt('Cancel') }}</v-btn>
-                </div>
-            </v-card-text>
-        </v-card>
-    </v-dialog>
-
-    <date-range-selection-dialog :title="tt('Custom Date Range')"
-                                 :min-time="filters.minDatetime"
-                                 :max-time="filters.maxDatetime"
-                                 v-model:show="showCustomDateRangeDialog"
-                                 @dateRange:change="changeCustomDateFilter"
-                                 @error="onShowDateRangeError" />
-    <batch-replace-dialog ref="batchReplaceDialog" />
-    <batch-replace-all-types-dialog ref="batchReplaceAllTypesDialog" />
-    <batch-create-dialog ref="batchCreateDialog" />
     <confirm-dialog ref="confirmDialog"/>
     <snack-bar ref="snackbar" />
     <input ref="fileInput" type="file" style="display: none" :accept="supportedImportFileExtensions" @change="setImportFile($event)" />
@@ -886,19 +203,15 @@
 
 <script setup lang="ts">
 import type { StepBarItem } from '@/components/desktop/StepsBar.vue';
-import PaginationButtons from '@/components/desktop/PaginationButtons.vue';
 import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
 import SnackBar from '@/components/desktop/SnackBar.vue';
-import BatchReplaceDialog, { type BatchReplaceDialogDataType } from './dialogs/BatchReplaceDialog.vue';
-import BatchReplaceAllTypesDialog from './dialogs/BatchReplaceAllTypesDialog.vue';
-import BatchCreateDialog, { type BatchCreateDialogDataType } from './dialogs/BatchCreateDialog.vue';
+import ImportTransactionDefineColumnTab from './tabs/ImportTransactionDefineColumnTab.vue';
+import ImportTransactionCheckDataTab from './tabs/ImportTransactionCheckDataTab.vue';
 
 import { ref, computed, useTemplateRef, watch } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
-import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.ts';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
@@ -906,109 +219,45 @@ import { useTransactionsStore } from '@/stores/transaction.ts';
 import { useOverviewStore } from '@/stores/overview.ts';
 import { useStatisticsStore } from '@/stores/statistics.ts';
 
-import type { NameValue, NameNumeralValue, TypeAndDisplayName } from '@/core/base.ts';
-import { type NumeralSystem, KnownAmountFormat } from '@/core/numeral.ts';
-import { KnownDateTimeFormat } from '@/core/datetime.ts';
-import { KnownDateTimezoneFormat } from '@/core/timezone.ts';
-import { CategoryType } from '@/core/category.ts';
+import { itemAndIndex } from '@/core/base.ts';
+import { type NumeralSystem } from '@/core/numeral.ts';
 import { TransactionType } from '@/core/transaction.ts';
-import { ImportTransactionColumnType, ImportTransactionDataMapping } from '@/core/import_transaction.ts';
-import { KnownFileType } from '@/core/file.ts';
 
 import type { LocalizedImportFileCategoryAndTypes, LocalizedImportFileType, LocalizedImportFileTypeSubType, LocalizedImportFileTypeSupportedEncodings } from '@/core/file.ts';
-import { Account, type CategorizedAccountWithDisplayBalance } from '@/models/account.ts';
-import type { TransactionCategory } from '@/models/transaction_category.ts';
-import type { TransactionTag } from '@/models/transaction_tag.ts';
 import { ImportTransaction } from '@/models/imported_transaction.ts';
 
-import {
-    isString,
-    isNumber,
-    isObjectEmpty,
-    getObjectOwnFieldCount,
-    findDisplayNameByType,
-    objectFieldToArrayItem
-} from '@/lib/common.ts';
-import {
-    findExtensionByType,
-    isFileExtensionSupported
-} from '@/lib/file.ts';
+import { isNumber } from '@/lib/common.ts';
+import { findExtensionByType, isFileExtensionSupported } from '@/lib/file.ts';
 import { generateRandomUUID } from '@/lib/misc.ts';
 import logger from '@/lib/logger.ts';
-import {
-    getUtcOffsetByUtcOffsetMinutes,
-    getTimezoneOffsetMinutes
-} from '@/lib/datetime.ts';
-import { formatCoordinate } from '@/lib/coordinate.ts';
-import {
-    getAccountMapByName
-} from '@/lib/account.ts';
-import {
-    transactionTypeToCategoryType,
-    getSecondaryTransactionMapByName,
-    getTransactionPrimaryCategoryName,
-    getTransactionSecondaryCategoryName
-} from '@/lib/category.ts';
-import {
-    openTextFileContent,
-    startDownloadFile
-} from '@/lib/ui/common.ts';
 
 import {
     mdiFilterOutline,
     mdiCheck,
     mdiDotsVertical,
     mdiHelpCircleOutline,
-    mdiFolderOpenOutline,
-    mdiContentSaveOutline,
-    mdiFindReplace,
-    mdiShapePlusOutline,
-    mdiTransfer,
     mdiClose,
-    mdiArrowRight,
-    mdiSelectAll,
-    mdiSelect,
-    mdiSelectInverse,
-    mdiPencilOutline,
-    mdiAlertOutline,
-    mdiPound
+    mdiArrowRight
 } from '@mdi/js';
 
 type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
 type SnackBarType = InstanceType<typeof SnackBar>;
-type BatchReplaceDialogType = InstanceType<typeof BatchReplaceDialog>;
-type BatchReplaceAllTypesDialogType = InstanceType<typeof BatchReplaceAllTypesDialog>;
-type BatchCreateDialogType = InstanceType<typeof BatchCreateDialog>;
+type ImportTransactionDefineColumnTabType = InstanceType<typeof ImportTransactionDefineColumnTab>;
+type ImportTransactionCheckDataTabType = InstanceType<typeof ImportTransactionCheckDataTab>;
 
 type ImportTransactionDialogStep = 'uploadFile' | 'defineColumn' | 'checkData' | 'finalResult';
 
-interface ImportTransactionDialogFilter {
-    minDatetime: number | null; // minDatetime or maxDatetime is null for 'All Date Range', all are not null for 'Custom Date Range'
-    maxDatetime: number | null;
-    transactionType: TransactionType | null; // null for 'All Transaction Type'
-    category: string | null | undefined; // null for 'All Category', undefined for 'Invalid Category'
-    account: string | null | undefined; // null for 'All Account', undefined for 'Invalid Account'
-    tag: string | null | undefined; // null for 'All Tag', undefined for 'Invalid Tag'
-    description: string | null; // null for 'All Description'
-}
-
 defineProps<{
     persistent?: boolean;
 }>();
 
 const {
     tt,
-    getAllImportTransactionColumnTypes,
-    getAllSupportedImportFileCagtegoryAndTypes,
     getCurrentNumeralSystemType,
-    formatUnixTimeToLongDateTime,
-    formatAmountToLocalizedNumeralsWithCurrency,
-    formatNumberToLocalizedNumerals,
-    getCategorizedAccountsWithDisplayBalance
+    getAllSupportedImportFileCagtegoryAndTypes,
+    formatNumberToLocalizedNumerals
 } = useI18n();
 
-const settingsStore = useSettingsStore();
-const userStore = useUserStore();
 const accountsStore = useAccountsStore();
 const transactionCategoriesStore = useTransactionCategoriesStore();
 const transactionTagsStore = useTransactionTagsStore();
@@ -1018,9 +267,8 @@ const statisticsStore = useStatisticsStore();
 
 const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
-const batchReplaceDialog = useTemplateRef<BatchReplaceDialogType>('batchReplaceDialog');
-const batchReplaceAllTypesDialog = useTemplateRef<BatchReplaceAllTypesDialogType>('batchReplaceAllTypesDialog');
-const batchCreateDialog = useTemplateRef<BatchCreateDialogType>('batchCreateDialog');
+const importTransactionDefineColumnTab = useTemplateRef<ImportTransactionDefineColumnTabType>('importTransactionDefineColumnTab');
+const importTransactionCheckDataTab = useTemplateRef<ImportTransactionCheckDataTabType>('importTransactionCheckDataTab');
 const fileInput = useTemplateRef<HTMLInputElement>('fileInput');
 
 const showState = ref<boolean>(false);
@@ -1033,26 +281,9 @@ const fileEncoding = ref<string>('utf-8');
 const importFile = ref<File | null>(null);
 const importData = ref<string>('');
 const parsedFileData = ref<string[][] | undefined>(undefined);
-const parsedFileDataColumnMapping = ref<ImportTransactionDataMapping>(ImportTransactionDataMapping.createEmpty());
 const importTransactions = ref<ImportTransaction[] | undefined>(undefined);
-const editingTransaction = ref<ImportTransaction | null>(null);
-const editingTags = ref<string[]>([]);
-const filters = ref<ImportTransactionDialogFilter>({
-    minDatetime: null,
-    maxDatetime: null,
-    transactionType: null,
-    category: null,
-    account: null,
-    tag: null,
-    description: null
-});
 
-const currentPage = ref<number>(1);
-const countPerPage = ref<number>(10);
 const importedCount = ref<number | null>(null);
-const showCustomDateRangeDialog = ref<boolean>(false);
-const showCustomDescriptionDialog = ref<boolean>(false);
-const currentDescriptionFilterValue = ref<string | null>(null);
 const loading = ref<boolean>(true);
 const submitting = ref<boolean>(false);
 
@@ -1060,11 +291,11 @@ let resolveFunc: (() => void) | null = null;
 let rejectFunc: ((reason?: unknown) => void) | null = null;
 
 const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
-const showAccountBalance = computed<boolean>(() => settingsStore.appSettings.showAccountBalance);
-const currentTimezoneOffsetMinutes = computed<number>(() => getTimezoneOffsetMinutes(settingsStore.appSettings.timeZone));
 
-const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
-const coordinateDisplayType = computed<number>(() => userStore.currentUserCoordinateDisplayType);
+const allSupportedImportFileCategoryAndTypes = computed<LocalizedImportFileCategoryAndTypes[]>(() => getAllSupportedImportFileCagtegoryAndTypes());
+const allFileSubTypes = computed<LocalizedImportFileTypeSubType[] | undefined>(() => allSupportedImportFileTypesMap.value[fileType.value]?.subTypes);
+const allSupportedEncodings = computed<LocalizedImportFileTypeSupportedEncodings[] | undefined>(() => allSupportedImportFileTypesMap.value[fileType.value]?.supportedEncodings);
+const isImportDataFromTextbox = computed<boolean>(() => allSupportedImportFileTypesMap.value[fileType.value]?.dataFromTextbox ?? false);
 
 const allSteps = computed<StepBarItem[]>(() => {
     const steps: StepBarItem[] = [
@@ -1099,17 +330,11 @@ const allSteps = computed<StepBarItem[]>(() => {
     return steps;
 });
 
-const allImportTransactionColumnTypes = computed<TypeAndDisplayName[]>(() => getAllImportTransactionColumnTypes());
-const allSupportedImportFileCategoryAndTypes = computed<LocalizedImportFileCategoryAndTypes[]>(() => getAllSupportedImportFileCagtegoryAndTypes());
-
 const allSupportedImportFileTypesMap = computed<Record<string, LocalizedImportFileType>>(() => {
     const ret: Record<string, LocalizedImportFileType> = {};
 
-    for (let i = 0; i < allSupportedImportFileCategoryAndTypes.value.length; i++) {
-        const importFileCategoryAndTypes = allSupportedImportFileCategoryAndTypes.value[i];
-
-        for (let j = 0; j < importFileCategoryAndTypes.fileTypes.length; j++) {
-            const importFileType = importFileCategoryAndTypes.fileTypes[j];
+    for (const importFileCategoryAndTypes of allSupportedImportFileCategoryAndTypes.value) {
+        for (const importFileType of importFileCategoryAndTypes.fileTypes) {
             ret[importFileType.type] = importFileType;
         }
     }
@@ -1117,51 +342,6 @@ const allSupportedImportFileTypesMap = computed<Record<string, LocalizedImportFi
     return ret;
 });
 
-const allSeparators = computed<NameValue[]>(() => {
-    const separators: NameValue[] = [
-        {
-            name: tt('Space'),
-            value: ' '
-        },
-        {
-            name: tt('Comma'),
-            value: ','
-        },
-        {
-            name: tt('Semicolon'),
-            value: ';'
-        },
-        {
-            name: tt('Tab'),
-            value: '\t'
-        },
-        {
-            name: tt('Vertical Bar'),
-            value: '|'
-        }
-    ];
-
-    return separators;
-});
-
-const isImportDataFromTextbox = computed<boolean>(() => allSupportedImportFileTypesMap.value[fileType.value]?.dataFromTextbox ?? false);
-const allFileSubTypes = computed<LocalizedImportFileTypeSubType[] | undefined>(() => allSupportedImportFileTypesMap.value[fileType.value]?.subTypes);
-const allSupportedEncodings = computed<LocalizedImportFileTypeSupportedEncodings[] | undefined>(() => allSupportedImportFileTypesMap.value[fileType.value]?.supportedEncodings);
-
-const allAccounts = computed<Account[]>(() => accountsStore.allPlainAccounts);
-const allVisibleAccounts = computed<Account[]>(() => accountsStore.allVisiblePlainAccounts);
-const allVisibleCategorizedAccounts = computed<CategorizedAccountWithDisplayBalance[]>(() => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts.value, showAccountBalance.value));
-const allAccountsMap = computed<Record<string, Account>>(() => accountsStore.allAccountsMap);
-const allAccountsMapByName = computed<Record<string, Account>>(() => getAccountMapByName(accountsStore.allAccounts));
-const allCategories = computed<Record<number, TransactionCategory[]>>(() => transactionCategoriesStore.allTransactionCategories);
-const allCategoriesMap = computed<Record<string, TransactionCategory>>(() => transactionCategoriesStore.allTransactionCategoriesMap);
-const allTags = computed<TransactionTag[]>(() => transactionTagsStore.allTransactionTags);
-const allTagsMap = computed<Record<string, TransactionTag>>(() => transactionTagsStore.allTransactionTagsMap);
-
-const hasAvailableExpenseCategories = computed<boolean>(() => transactionCategoriesStore.hasAvailableExpenseCategories);
-const hasAvailableIncomeCategories = computed<boolean>(() => transactionCategoriesStore.hasAvailableIncomeCategories);
-const hasAvailableTransferCategories = computed<boolean>(() => transactionCategoriesStore.hasAvailableTransferCategories);
-
 const supportedImportFileExtensions = computed<string | undefined>(() => {
     if (allFileSubTypes.value && allFileSubTypes.value.length) {
         const subTypeExtensions = findExtensionByType(allFileSubTypes.value, fileSubType.value);
@@ -1190,637 +370,10 @@ const exportFileGuideDocumentLanguageName = computed<string | undefined>(() => a
 
 const fileName = computed<string>(() => importFile.value?.name || '');
 
-const parsedFileLines = computed<Record<string, string>[] | undefined>(() => {
-    if (!parsedFileData.value) {
-        return undefined;
-    }
-
-    const allLines: Record<string, string>[] = [];
-    const startIndex = parsedFileDataColumnMapping.value.includeHeader ? 1 : 0;
-
-    for (let i = startIndex, index = 1; i < parsedFileData.value.length; i++, index++) {
-        const line: Record<string, string> = {};
-        const columns = parsedFileData.value[i];
-
-        for (let j = 0; j < columns.length; j++) {
-            line['index'] = index.toString();
-            line[`column${j + 1}`] = columns[j];
-        }
-
-        allLines.push(line);
-    }
-
-    return allLines;
-});
-
-const parsedFileLinesTableHeight = computed<number | undefined>(() => {
-    if (countPerPage.value <= 10 || !parsedFileLines.value || parsedFileLines.value.length <= 10) {
-        return undefined;
-    } else {
-        return 400;
-    }
-});
-
-const parsedFileLinesHeaders = computed<object[]>(() => {
-    let maxColumnCount = 0;
-
-    if (parsedFileData.value) {
-        for (let i = 0; i < parsedFileData.value.length; i++) {
-            if (parsedFileData.value[i].length > maxColumnCount) {
-                maxColumnCount = parsedFileData.value[i].length;
-            }
-        }
-    }
-
-    const headers: object[] = [];
-
-    headers.push({ key: 'index', value: 'index', title: '#', sortable: true, nowrap: true });
-
-    for (let i = 0; i < maxColumnCount; i++) {
-        let title = `#${i + 1}`;
-
-        if (parsedFileDataColumnMapping.value.includeHeader && parsedFileData.value && parsedFileData.value[0][i]) {
-            title = parsedFileData.value[0][i];
-        }
-
-        headers.push({ key: i.toString(), value: `column${i + 1}`, title: title, sortable: true, nowrap: true });
-    }
-
-    return headers;
-});
-
-const parsedFileLinesTablePageOptions = computed<NameNumeralValue[]>(() => getTablePageOptions(parsedFileLines.value?.length));
-
-const parsedFileAllTransactionTypes = computed<string[]>(() => parsedFileDataColumnMapping.value.parseFileAllTransactionTypes(parsedFileData.value));
-const parsedFileValidMappedTransactionTypes = computed<Record<string, TransactionType>>(() => parsedFileDataColumnMapping.value.parseFileValidMappedTransactionTypes(parsedFileData.value));
-const parsedFileAutoDetectedTimeFormat = computed<string | undefined>(() => parsedFileDataColumnMapping.value.parseFileAutoDetectedTimeFormat(parsedFileData.value));
-const parsedFileAutoDetectedTimezoneFormat = computed<string | undefined>(() => parsedFileDataColumnMapping.value.parseFileAutoDetectedTimezoneFormat(parsedFileData.value));
-const parsedFileAutoDetectedAmountFormat = computed<string | undefined>(() => parsedFileDataColumnMapping.value.parseFileAutoDetectedAmountFormat(parsedFileData.value));
-
-const importTransactionsTableHeight = computed<number | undefined>(() => {
-    if (countPerPage.value <= 10 || !importTransactions.value || importTransactions.value.length <= 10) {
-        return undefined;
-    } else {
-        return 400;
-    }
-});
-
-const importTransactionHeaders = computed<object[]>(() => {
-    return [
-        { value: 'valid', sortable: true, nowrap: true, width: 35 },
-        { value: 'time', title: tt('Transaction Time'), sortable: true, nowrap: true, maxWidth: 280 },
-        { value: 'type', title: tt('Type'), sortable: true, nowrap: true, maxWidth: 140 },
-        { value: 'actualCategoryName', title: tt('Category'), sortable: true, nowrap: true },
-        { value: 'sourceAmount', title: tt('Amount'), sortable: true, nowrap: true },
-        { value: 'actualSourceAccountName', title: tt('Account'), sortable: true, nowrap: true },
-        { value: 'geoLocation', title: tt('Geographic Location'), sortable: true, nowrap: true },
-        { value: 'tagIds', title: tt('Tags'), sortable: true, nowrap: true },
-        { value: 'comment', title: tt('Description'), sortable: true, nowrap: true },
-    ];
-});
-
-const importTransactionsTablePageOptions = computed<NameNumeralValue[]>(() => getTablePageOptions(importTransactions.value?.length));
-
-const totalPageCount = computed<number>(() => {
-    if (!importTransactions.value || importTransactions.value.length < 1) {
-        return 1;
-    }
-
-    let count = 0;
-
-    for (let i = 0; i < importTransactions.value.length; i++) {
-        if (isTransactionDisplayed(importTransactions.value[i])) {
-            count++;
-        }
-    }
-
-    return Math.ceil(count / countPerPage.value);
-});
-
-const currentPageTransactions = computed<ImportTransaction[]>(() => {
-    const ret: ImportTransaction[] = [];
-
-    if (!importTransactions.value || importTransactions.value.length < 1) {
-        return ret;
-    }
-
-    const previousCount = Math.max(0, (currentPage.value - 1) * countPerPage.value);
-    let count = 0;
-
-    for (let i = 0; i < importTransactions.value.length; i++) {
-        if (ret.length >= countPerPage.value) {
-            break;
-        }
-
-        if (isTransactionDisplayed(importTransactions.value[i])) {
-            if (count >= previousCount) {
-                ret.push(importTransactions.value[i]);
-            }
-
-            count++;
-        }
-    }
-
-    return ret;
-});
-
-const selectedImportTransactionCount = computed<number>(() => {
-    let count = 0;
-
-    if (!importTransactions.value || importTransactions.value.length < 1) {
-        return count;
-    }
-
-    for (let i = 0; i < importTransactions.value.length; i++) {
-        if (importTransactions.value[i].selected) {
-            count++;
-        }
-    }
-
-    return count;
-});
-
-const selectedExpenseTransactionCount = computed<number>(() => {
-    let count = 0;
-
-    if (!importTransactions.value || importTransactions.value.length < 1) {
-        return count;
-    }
-
-    for (let i = 0; i < importTransactions.value.length; i++) {
-        if (importTransactions.value[i].selected && importTransactions.value[i].type === TransactionType.Expense) {
-            count++;
-        }
-    }
-
-    return count;
-});
-
-const selectedIncomeTransactionCount = computed<number>(() => {
-    let count = 0;
-
-    if (!importTransactions.value || importTransactions.value.length < 1) {
-        return count;
-    }
-
-    for (let i = 0; i < importTransactions.value.length; i++) {
-        if (importTransactions.value[i].selected && importTransactions.value[i].type === TransactionType.Income) {
-            count++;
-        }
-    }
-
-    return count;
-});
-
-const selectedTransferTransactionCount = computed<number>(() => {
-    let count = 0;
-
-    if (!importTransactions.value || importTransactions.value.length < 1) {
-        return count;
-    }
-
-    for (let i = 0; i < importTransactions.value.length; i++) {
-        if (importTransactions.value[i].selected && importTransactions.value[i].type === TransactionType.Transfer) {
-            count++;
-        }
-    }
-
-    return count;
-});
-
-const selectedInvalidTransactionCount = computed<number>(() => {
-    let count = 0;
-
-    if (!importTransactions.value || importTransactions.value.length < 1) {
-        return count;
-    }
-
-    for (let i = 0; i < importTransactions.value.length; i++) {
-        if (!importTransactions.value[i].valid && importTransactions.value[i].selected) {
-            count++;
-        }
-    }
-
-    return count;
-});
-
-const anyButNotAllTransactionSelected = computed<boolean>(() => !!importTransactions.value && selectedImportTransactionCount.value > 0 && selectedImportTransactionCount.value !== importTransactions.value.length);
-const allTransactionSelected = computed<boolean>(() => !!importTransactions.value && selectedImportTransactionCount.value === importTransactions.value.length);
-
-const allUsedCategoryNames = computed<string[]>(() => {
-    if (!importTransactions.value || importTransactions.value.length < 1) {
-        return [];
-    }
-
-    const categoryNames: Record<string, boolean> = {};
-
-    for (const transaction of importTransactions.value) {
-        if (transaction.actualCategoryName && transaction.actualCategoryName !== '') {
-            categoryNames[transaction.actualCategoryName] = true;
-        }
-    }
-
-    return objectFieldToArrayItem(categoryNames);
-});
-
-const allUsedAccountNames = computed<string[]>(() => {
-    if (!importTransactions.value || importTransactions.value.length < 1) {
-        return [];
-    }
-
-    const accountNames: Record<string, boolean> = {};
-
-    for (const transaction of importTransactions.value) {
-        if (transaction.actualSourceAccountName && transaction.actualSourceAccountName !== '') {
-            accountNames[transaction.actualSourceAccountName] = true;
-        }
-
-        if (transaction.actualDestinationAccountName && transaction.actualDestinationAccountName !== '') {
-            accountNames[transaction.actualDestinationAccountName] = true;
-        }
-    }
-
-    return objectFieldToArrayItem(accountNames);
-});
-
-const allUsedTagNames = computed<string[]>(() => {
-    if (!importTransactions.value || importTransactions.value.length < 1) {
-        return [];
-    }
-
-    const tagNames: Record<string, boolean> = {};
-
-    for (const transaction of importTransactions.value) {
-        if (!transaction.tagIds || !transaction.originalTagNames) {
-            continue;
-        }
-
-        for (let j = 0; j < transaction.tagIds.length; j++) {
-            const tagId = transaction.tagIds[j];
-            const originalTagName = transaction.originalTagNames[j];
-
-            if (tagId && tagId !== '0' && allTagsMap.value[tagId] && allTagsMap.value[tagId].name) {
-                tagNames[allTagsMap.value[tagId].name] = true;
-            } else if (originalTagName) {
-                tagNames[originalTagName] = true;
-            }
-        }
-    }
-
-    return objectFieldToArrayItem(tagNames);
-});
-
-const allInvalidExpenseCategoryNames = computed<NameValue[]>(() => getCurrentInvalidCategoryNames(TransactionType.Expense));
-const allInvalidIncomeCategoryNames = computed<NameValue[]>(() => getCurrentInvalidCategoryNames(TransactionType.Income));
-const allInvalidTransferCategoryNames = computed<NameValue[]>(() => getCurrentInvalidCategoryNames(TransactionType.Transfer));
-const allInvalidAccountNames = computed<NameValue[]>(() => getCurrentInvalidAccountNames());
-const allInvalidTransactionTagNames = computed<NameValue[]>(() => getCurrentInvalidTagNames());
-
-const displayFilterCustomDateRange = computed<string>(() => {
-    if (filters.value.minDatetime === null || filters.value.maxDatetime === null) {
-        return '';
-    }
-
-    const minDisplayTime = formatUnixTimeToLongDateTime(filters.value.minDatetime);
-    const maxDisplayTime = formatUnixTimeToLongDateTime(filters.value.maxDatetime);
-
-    return `${minDisplayTime} - ${maxDisplayTime}`
-});
-
 function getDisplayCount(count: number): string {
     return numeralSystem.value.formatNumber(count);
 }
 
-function getTablePageOptions(linesCount?: number): NameNumeralValue[] {
-    const pageOptions: NameNumeralValue[] = [];
-
-    if (!linesCount || linesCount < 1) {
-        pageOptions.push({ value: -1, name: tt('All') });
-        return pageOptions;
-    }
-
-    const availableCountPerPage = [ 5, 10, 15, 20, 25, 30, 50 ];
-
-    for (let i = 0; i < availableCountPerPage.length; i++) {
-        const count = availableCountPerPage[i];
-
-        if (linesCount < count) {
-            break;
-        }
-
-        pageOptions.push({ value: count, name: getDisplayCount(count) });
-    }
-
-    pageOptions.push({ value: -1, name: tt('All') });
-
-    return pageOptions;
-}
-
-function getParseDataMappedColumnDisplayName(columnIndex: number): string {
-    for (const columnType in parsedFileDataColumnMapping.value.dataColumnMapping) {
-        if (parsedFileDataColumnMapping.value.dataColumnMapping[columnType] === columnIndex) {
-            return findDisplayNameByType(allImportTransactionColumnTypes.value, parseInt(columnType)) || tt('Unspecified');
-        }
-    }
-
-    return tt('Unspecified');
-}
-
-function loadColumnMappingFile(): void {
-    openTextFileContent({
-        allowedExtensions: KnownFileType.JSON.contentType
-    }).then(content => {
-        const result = ImportTransactionDataMapping.parseFromJson(content);
-
-        if (result) {
-            parsedFileDataColumnMapping.value = result;
-        } else {
-            logger.error('Failed to parse data mapping file');
-            snackbar.value?.showError('Data mapping file is invalid');
-        }
-    }).catch(error => {
-        logger.error('Failed to open data mapping file', error);
-        snackbar.value?.showError('Data mapping file is invalid');
-    });
-}
-
-function saveColumnMappingFile(): void {
-    const fileName = KnownFileType.JSON.formatFileName(tt('dataExport.defaultImportDataMappingFileName'));
-    startDownloadFile(fileName, KnownFileType.JSON.createBlob(parsedFileDataColumnMapping.value.toJson()));
-}
-
-function isTransactionDisplayed(transaction: ImportTransaction): boolean {
-    if (isNumber(filters.value.minDatetime) && isNumber(filters.value.maxDatetime) && (transaction.time < filters.value.minDatetime || transaction.time > filters.value.maxDatetime)) {
-        return false;
-    }
-
-    if (isNumber(filters.value.transactionType) && transaction.type !== filters.value.transactionType) {
-        return false;
-    }
-
-    if (isString(filters.value.category)) {
-        if (filters.value.category === '' && transaction.actualCategoryName !== '') {
-            return false;
-        } else if (filters.value.category !== '' && transaction.actualCategoryName !== filters.value.category) {
-            return false;
-        }
-    } else if (filters.value.category === undefined) {
-        if (transaction.type !== TransactionType.ModifyBalance && transaction.categoryId && transaction.categoryId !== '0') {
-            return false;
-        }
-    }
-
-    if (isString(filters.value.account)) {
-        if (filters.value.account === '' && (transaction.actualSourceAccountName !== '' || transaction.actualDestinationAccountName !== '')) {
-            return false;
-        } else if (filters.value.account !== '' && transaction.actualSourceAccountName !== filters.value.account && transaction.actualDestinationAccountName !== filters.value.account) {
-            return false;
-        }
-    } else if (filters.value.account === undefined) {
-        if (transaction.type !== TransactionType.Transfer && transaction.sourceAccountId && transaction.sourceAccountId !== '0') {
-            return false;
-        } else if (transaction.type === TransactionType.Transfer && transaction.sourceAccountId && transaction.sourceAccountId !== '0' && transaction.destinationAccountId && transaction.destinationAccountId !== '0') {
-            return false;
-        }
-    }
-
-    if (isString(filters.value.tag)) {
-        if (filters.value.tag === '' && transaction.tagIds && transaction.tagIds.length) {
-            return false;
-        } else if (filters.value.tag !== '') {
-            let hasTagName = false;
-
-            if (transaction.tagIds && transaction.tagIds.length) {
-                for (let i = 0; i < transaction.tagIds.length; i++) {
-                    const tagId = transaction.tagIds[i];
-                    let tagName = transaction.originalTagNames ? transaction.originalTagNames[i] : "";
-
-                    if (tagId && tagId !== '0' && allTagsMap.value[tagId] && allTagsMap.value[tagId].name) {
-                        tagName = allTagsMap.value[tagId].name;
-                    }
-
-                    if (tagName === filters.value.tag) {
-                        hasTagName = true;
-                        break;
-                    }
-                }
-            }
-
-            if (!hasTagName) {
-                return false;
-            }
-        }
-    } else if (filters.value.tag === undefined) {
-        if (transaction.tagIds && transaction.tagIds.length) {
-            let hasInvalidTag = false;
-
-            for (let i = 0; i < transaction.tagIds.length; i++) {
-                if (!transaction.tagIds[i] || transaction.tagIds[i] === '0') {
-                    hasInvalidTag = true;
-                    break;
-                }
-            }
-
-            if (!hasInvalidTag) {
-                return false;
-            }
-        } else {
-            return false;
-        }
-    }
-
-    if (isString(filters.value.description)) {
-        if (filters.value.description === '' && transaction.comment !== '') {
-            return false;
-        } else if (filters.value.description !== '' && transaction.comment.indexOf(filters.value.description) < 0) {
-            return false;
-        }
-    }
-
-    return true;
-}
-
-function isTagValid(tagIds: string[], tagIndex: number): boolean {
-    if (!tagIds || !tagIds[tagIndex]) {
-        return false;
-    }
-
-    if (tagIds[tagIndex] === '0') {
-        return false;
-    }
-
-    const tagId = tagIds[tagIndex];
-    return !!allTagsMap.value[tagId];
-}
-
-function getDisplayDateTime(transaction: ImportTransaction): string {
-    return formatUnixTimeToLongDateTime(transaction.time, transaction.utcOffset, currentTimezoneOffsetMinutes.value);
-}
-
-function getDisplayTimezone(transaction: ImportTransaction): string {
-    return `UTC${getUtcOffsetByUtcOffsetMinutes(transaction.utcOffset)}`;
-}
-
-function getDisplayCurrency(value: number, currencyCode: string): string {
-    return formatAmountToLocalizedNumeralsWithCurrency(value, currencyCode);
-}
-
-function getTransactionDisplayAmount(transaction: ImportTransaction): string {
-    let currency = transaction.originalSourceAccountCurrency || defaultCurrency.value;
-
-    if (transaction.sourceAccountId && transaction.sourceAccountId !== '0' && allAccountsMap.value[transaction.sourceAccountId]) {
-        currency = allAccountsMap.value[transaction.sourceAccountId].currency;
-    }
-
-    return getDisplayCurrency(transaction.sourceAmount, currency);
-}
-
-function getTransactionDisplayDestinationAmount(transaction: ImportTransaction): string {
-    if (transaction.type !== TransactionType.Transfer) {
-        return '-';
-    }
-
-    let currency = transaction.originalDestinationAccountCurrency || defaultCurrency.value;
-
-    if (transaction.destinationAccountId && transaction.destinationAccountId !== '0' && allAccountsMap.value[transaction.destinationAccountId]) {
-        currency = allAccountsMap.value[transaction.destinationAccountId].currency;
-    }
-
-    return getDisplayCurrency(transaction.destinationAmount, currency);
-}
-
-function getSourceAccountTitle(transaction: ImportTransaction): string {
-    if (transaction.type === TransactionType.Expense || transaction.type === TransactionType.Income) {
-        return tt('Account');
-    } else if (transaction.type === TransactionType.Transfer) {
-        return tt('Source Account');
-    } else {
-        return tt('Account');
-    }
-}
-
-function getSourceAccountDisplayName(transaction: ImportTransaction): string {
-    if (transaction.sourceAccountId) {
-        return Account.findAccountNameById(allAccounts.value, transaction.sourceAccountId) || '';
-    } else {
-        return tt('None');
-    }
-}
-
-function getDestinationAccountDisplayName(transaction: ImportTransaction): string {
-    if (transaction.destinationAccountId) {
-        return Account.findAccountNameById(allAccounts.value, transaction.destinationAccountId) || '';
-    } else {
-        return tt('None');
-    }
-}
-
-function getCurrentInvalidCategoryNames(transactionType: TransactionType): NameValue[] {
-    const invalidCategoryNames: Record<string, boolean> = {};
-    const invalidCategories: NameValue[] = [];
-
-    if (!importTransactions.value || importTransactions.value.length < 1) {
-        return invalidCategories;
-    }
-
-    for (let i = 0; i < importTransactions.value.length; i++) {
-        const transaction: ImportTransaction = importTransactions.value[i];
-        const categoryId = transaction.categoryId;
-
-        if (transaction.type === transactionType && (!categoryId || categoryId === '0' || !allCategoriesMap.value[categoryId])) {
-            invalidCategoryNames[transaction.originalCategoryName] = true;
-        }
-    }
-
-    for (const name in invalidCategoryNames) {
-        if (!Object.prototype.hasOwnProperty.call(invalidCategoryNames, name)) {
-            continue;
-        }
-
-        invalidCategories.push({
-            name: name || tt('(Empty)'),
-            value: name
-        });
-    }
-
-    return invalidCategories;
-}
-
-function getCurrentInvalidAccountNames(): NameValue[] {
-    const invalidAccountNames: Record<string, boolean> = {};
-    const invalidAccounts: NameValue[] = [];
-
-    if (!importTransactions.value || importTransactions.value.length < 1) {
-        return invalidAccounts;
-    }
-
-    for (let i = 0; i < importTransactions.value.length; i++) {
-        const transaction: ImportTransaction = importTransactions.value[i];
-        const sourceAccountId = transaction.sourceAccountId;
-        const destinationAccountId = transaction.destinationAccountId;
-
-        if (!sourceAccountId || sourceAccountId === '0' || !allAccountsMap.value[sourceAccountId]) {
-            invalidAccountNames[transaction.originalSourceAccountName] = true;
-        }
-
-        if (transaction.type === TransactionType.Transfer && isString(transaction.originalDestinationAccountName) && (!destinationAccountId || destinationAccountId === '0' || !allAccountsMap.value[destinationAccountId])) {
-            invalidAccountNames[transaction.originalDestinationAccountName] = true;
-        }
-    }
-
-    for (const name in invalidAccountNames) {
-        if (!Object.prototype.hasOwnProperty.call(invalidAccountNames, name)) {
-            continue;
-        }
-
-        invalidAccounts.push({
-            name: name || tt('(Empty)'),
-            value: name
-        });
-    }
-
-    return invalidAccounts;
-}
-
-function getCurrentInvalidTagNames(): NameValue[] {
-    const invalidTagNames: Record<string, boolean> = {};
-    const invalidTags: NameValue[] = [];
-
-    if (!importTransactions.value || importTransactions.value.length < 1) {
-        return invalidTags;
-    }
-
-    for (let i = 0; i < importTransactions.value.length; i++) {
-        const transaction: ImportTransaction = importTransactions.value[i];
-
-        if (!transaction.tagIds || !transaction.originalTagNames) {
-            continue;
-        }
-
-        for (let j = 0; j < transaction.tagIds.length; j++) {
-            const tagId = transaction.tagIds[j];
-            const originalTagName = transaction.originalTagNames[j];
-
-            if (!tagId || tagId === '0' || !allTagsMap.value[tagId]) {
-                invalidTagNames[originalTagName] = true;
-            }
-        }
-    }
-
-    for (const name in invalidTagNames) {
-        if (!Object.prototype.hasOwnProperty.call(invalidTagNames, name)) {
-            continue;
-        }
-
-        invalidTags.push({
-            name: name || tt('(Empty)'),
-            value: name
-        });
-    }
-
-    return invalidTags;
-}
-
 function open(): Promise<void> {
     fileType.value = 'ezbookkeeping';
     fileSubType.value = 'ezbookkeeping_csv';
@@ -1830,19 +383,9 @@ function open(): Promise<void> {
     importFile.value = null;
     importData.value = '';
     parsedFileData.value = undefined;
-    parsedFileDataColumnMapping.value.reset();
+    importTransactionDefineColumnTab.value?.reset();
     importTransactions.value = undefined;
-    editingTransaction.value = null;
-    editingTags.value = [];
-    filters.value.minDatetime = null;
-    filters.value.maxDatetime = null;
-    filters.value.transactionType = null;
-    filters.value.category = null;
-    filters.value.account = null;
-    filters.value.tag = null;
-    filters.value.description = null;
-    currentPage.value = 1;
-    countPerPage.value = 10;
+    importTransactionCheckDataTab.value?.reset();
     showState.value = true;
     clientSessionId.value = generateRandomUUID();
 
@@ -1948,9 +491,8 @@ function parseData(): void {
             importFile: uploadFile
         }).then(response => {
             if (response && response.length) {
+                importTransactionDefineColumnTab.value?.reset();
                 parsedFileData.value = response;
-                currentPage.value = 1;
-                countPerPage.value = 10;
                 currentStep.value = 'defineColumn';
             } else {
                 parsedFileData.value = undefined;
@@ -1971,7 +513,6 @@ function parseData(): void {
         let hasHeaderLine: boolean | undefined = undefined;
         let timeFormat: string | undefined = undefined;
         let timezoneFormat: string | undefined = undefined;
-        let amountFormat: string | undefined = undefined;
         let amountDecimalSeparator: string | undefined = undefined;
         let amountDigitGroupingSymbol: string | undefined = undefined;
         let geoLocationSeparator: string | undefined = undefined;
@@ -1979,59 +520,22 @@ function parseData(): void {
         let tagSeparator: string | undefined = undefined;
 
         if (isDsvFileType) {
-            columnMapping = parsedFileDataColumnMapping.value.dataColumnMapping;
-            transactionTypeMapping = parsedFileValidMappedTransactionTypes.value;
-            hasHeaderLine = parsedFileDataColumnMapping.value.includeHeader;
-            timeFormat = parsedFileDataColumnMapping.value.timeFormat;
-            timezoneFormat = parsedFileDataColumnMapping.value.timezoneFormat;
-            amountFormat = parsedFileDataColumnMapping.value.amountFormat;
-            geoLocationSeparator = parsedFileDataColumnMapping.value.geoLocationSeparator;
-            geoLocationOrder = parsedFileDataColumnMapping.value.geoLocationOrder;
-            tagSeparator = parsedFileDataColumnMapping.value.tagSeparator;
+            const defineColumnResult = importTransactionDefineColumnTab.value?.generateResult();
 
-            if (!columnMapping
-                || !isNumber(columnMapping[ImportTransactionColumnType.TransactionTime.type])
-                || !isNumber(columnMapping[ImportTransactionColumnType.TransactionType.type])
-                || !isNumber(columnMapping[ImportTransactionColumnType.Amount.type])) {
-                snackbar.value?.showError('Missing transaction time, transaction type, or amount column mapping');
+            if (!defineColumnResult) {
                 return;
             }
 
-            if (!transactionTypeMapping || isObjectEmpty(transactionTypeMapping)) {
-                snackbar.value?.showError('Transaction type mapping is not set');
-                return;
-            }
-
-            if (!parsedFileDataColumnMapping.value.timeFormat) {
-                timeFormat = parsedFileAutoDetectedTimeFormat.value;
-            }
-
-            if (!parsedFileDataColumnMapping.value.timezoneFormat) {
-                timezoneFormat = parsedFileAutoDetectedTimezoneFormat.value;
-            }
-
-            if (!parsedFileDataColumnMapping.value.amountFormat) {
-                amountFormat = parsedFileAutoDetectedAmountFormat.value;
-            }
-
-            if (amountFormat) {
-                const knownAmountFormat = KnownAmountFormat.valueOf(amountFormat);
-
-                if (knownAmountFormat) {
-                    amountDecimalSeparator = knownAmountFormat.decimalSeparator.symbol;
-                    amountDigitGroupingSymbol = knownAmountFormat.digitGroupingSymbol?.symbol;
-                }
-            }
-
-            if (!timeFormat) {
-                snackbar.value?.showError('Transaction time format is not set');
-                return;
-            }
-
-            if (!amountDecimalSeparator) {
-                snackbar.value?.showError('Transaction amount format is not set');
-                return;
-            }
+            columnMapping = defineColumnResult.columnMapping;
+            transactionTypeMapping = defineColumnResult.transactionTypeMapping;
+            hasHeaderLine = defineColumnResult.includeHeader;
+            timeFormat = defineColumnResult.timeFormat;
+            timezoneFormat = defineColumnResult.timezoneFormat;
+            amountDecimalSeparator = defineColumnResult.amountDecimalSeparator;
+            amountDigitGroupingSymbol = defineColumnResult.amountDigitGroupingSymbol;
+            geoLocationSeparator = defineColumnResult.geoLocationSeparator;
+            geoLocationOrder = defineColumnResult.geoLocationOrder;
+            tagSeparator = defineColumnResult.tagSeparator;
         }
 
         submitting.value = true;
@@ -2054,25 +558,21 @@ function parseData(): void {
             const parsedTransactions: ImportTransaction[] = [];
 
             if (response.items) {
-                for (let i = 0; i < response.items.length; i++) {
-                    const parsedTransaction = ImportTransaction.of(response.items[i], i);
+                for (const [importTransaction, index] of itemAndIndex(response.items)) {
+                    const parsedTransaction = ImportTransaction.of(importTransaction, index);
                     parsedTransactions.push(parsedTransaction);
                 }
             }
 
-            importTransactions.value = parsedTransactions;
-            editingTransaction.value = null;
-            editingTags.value = [];
-            currentPage.value = 1;
+            importTransactionCheckDataTab.value?.reset();
 
-            if (importTransactions.value && importTransactions.value.length >= 0 && importTransactions.value.length < 10) {
-                countPerPage.value = -1;
+            if (parsedTransactions && parsedTransactions.length >= 0 && parsedTransactions.length < 10) {
+                importTransactionCheckDataTab.value?.setCountPerPage(-1);
             } else {
-                countPerPage.value = 10;
+                importTransactionCheckDataTab.value?.setCountPerPage(10);
             }
 
-            currentPage.value = 1;
-            countPerPage.value = 10;
+            importTransactions.value = parsedTransactions;
             currentStep.value = 'checkData';
             submitting.value = false;
         }).catch(error => {
@@ -2086,19 +586,17 @@ function parseData(): void {
 }
 
 function submit(): void {
-    if (editingTransaction.value) {
+    if (importTransactionCheckDataTab.value?.isEditing) {
         return;
     }
 
     const transactions: ImportTransaction[] = [];
 
     if (importTransactions.value) {
-        for (let i = 0; i < importTransactions.value.length; i++) {
-            const transaction: ImportTransaction = importTransactions.value[i];
-
-            if (transaction.valid && transaction.selected) {
-                transactions.push(transaction);
-            } else if (!transaction.valid && transaction.selected) {
+        for (const importTransaction of importTransactions.value) {
+            if (importTransaction.valid && importTransaction.selected) {
+                transactions.push(importTransaction);
+            } else if (!importTransaction.valid && importTransaction.selected) {
                 snackbar.value?.showError('Cannot import invalid transactions');
                 return;
             }
@@ -2113,8 +611,6 @@ function submit(): void {
     confirmDialog.value?.open('format.misc.confirmImportTransactions', {
         count: getDisplayCount(transactions.length)
     }).then(() => {
-        editingTransaction.value = null;
-        editingTags.value = [];
         submitting.value = true;
 
         let showProcessTimer : number | undefined = undefined;
@@ -2198,477 +694,14 @@ function close(completed: boolean): void {
     showState.value = false;
 }
 
-function changeCustomDateFilter(minTime: number, maxTime: number): void {
-    filters.value.minDatetime = minTime;
-    filters.value.maxDatetime = maxTime;
-    showCustomDateRangeDialog.value = false;
-}
-
-function importTransactionsFilter(value: string, query: string, item?: { value: unknown, raw: ImportTransaction }): boolean {
-    if (!item || !item.raw) {
-        return false;
-    }
-
-    return isTransactionDisplayed(item.raw);
-}
-
-function selectAllValid(): void {
-    if (!importTransactions.value || importTransactions.value.length < 1) {
-        return;
-    }
-
-    for (let i = 0; i < importTransactions.value.length; i++) {
-        if (importTransactions.value[i].valid && isTransactionDisplayed(importTransactions.value[i])) {
-            importTransactions.value[i].selected = true;
-        }
-    }
-}
-
-function selectAllInvalid(): void {
-    if (!importTransactions.value || importTransactions.value.length < 1) {
-        return;
-    }
-
-    for (let i = 0; i < importTransactions.value.length; i++) {
-        if (!importTransactions.value[i].valid && isTransactionDisplayed(importTransactions.value[i])) {
-            importTransactions.value[i].selected = true;
-        }
-    }
-}
-
-function selectAll(): void {
-    if (!importTransactions.value || importTransactions.value.length < 1) {
-        return;
-    }
-
-    for (let i = 0; i < importTransactions.value.length; i++) {
-        if (isTransactionDisplayed(importTransactions.value[i])) {
-            importTransactions.value[i].selected = true;
-        }
-    }
-}
-
-function selectNone(): void {
-    if (!importTransactions.value || importTransactions.value.length < 1) {
-        return;
-    }
-
-    for (let i = 0; i < importTransactions.value.length; i++) {
-        if (isTransactionDisplayed(importTransactions.value[i])) {
-            importTransactions.value[i].selected = false;
-        }
-    }
-}
-
-function selectInvert(): void {
-    if (!importTransactions.value || importTransactions.value.length < 1) {
-        return;
-    }
-
-    for (let i = 0; i < importTransactions.value.length; i++) {
-        if (isTransactionDisplayed(importTransactions.value[i])) {
-            importTransactions.value[i].selected = !importTransactions.value[i].selected;
-        }
-    }
-}
-
-function selectAllInThisPage(): void {
-    for (let i = 0; i < currentPageTransactions.value.length; i++) {
-        currentPageTransactions.value[i].selected = true;
-    }
-}
-
-function selectNoneInThisPage(): void {
-    for (let i = 0; i < currentPageTransactions.value.length; i++) {
-        currentPageTransactions.value[i].selected = false;
-    }
-}
-
-function selectInvertInThisPage(): void {
-    for (let i = 0; i < currentPageTransactions.value.length; i++) {
-        currentPageTransactions.value[i].selected = !currentPageTransactions.value[i].selected;
-    }
-}
-
-function editTransaction(transaction: ImportTransaction): void {
-    if (editingTransaction.value) {
-        editingTransaction.value.tagIds = editingTags.value;
-        updateTransactionData(editingTransaction.value);
-    }
-
-    if (editingTransaction.value === transaction) {
-        editingTags.value = [];
-        editingTransaction.value = null;
-    } else {
-        editingTransaction.value = transaction;
-        editingTags.value = editingTransaction.value.tagIds;
-    }
-}
-
-function updateTransactionData(transaction: ImportTransaction): void {
-    transaction.valid = transaction.isTransactionValid();
-
-    if (transaction.categoryId && allCategoriesMap.value[transaction.categoryId]) {
-        transaction.actualCategoryName = allCategoriesMap.value[transaction.categoryId].name;
-    }
-
-    if (transaction.sourceAccountId && allAccountsMap.value[transaction.sourceAccountId]) {
-        transaction.actualSourceAccountName = allAccountsMap.value[transaction.sourceAccountId].name;
-    }
-
-    if (transaction.destinationAccountId && allAccountsMap.value[transaction.destinationAccountId]) {
-        transaction.actualDestinationAccountName = allAccountsMap.value[transaction.destinationAccountId].name;
-    }
-}
-
-function showBatchReplaceDialog(type: BatchReplaceDialogDataType): void {
-    if (editingTransaction.value) {
-        return;
-    }
-
-    batchReplaceDialog.value?.open({
-        mode: 'batchReplace',
-        type: type
-    }).then(result => {
-        if (!result || !result.targetItem) {
-            return;
-        }
-
-        let updatedCount = 0;
-
-        if (importTransactions.value) {
-            for (let i = 0; i < importTransactions.value.length; i++) {
-                const transaction: ImportTransaction = importTransactions.value[i];
-
-                if (!transaction.selected) {
-                    continue;
-                }
-
-                let updated = false;
-
-                if (type === 'expenseCategory') {
-                    if (transaction.type === TransactionType.Expense) {
-                        transaction.categoryId = result.targetItem;
-                        updated = true;
-                    }
-                } else if (type === 'incomeCategory') {
-                    if (transaction.type === TransactionType.Income) {
-                        transaction.categoryId = result.targetItem;
-                        updated = true;
-                    }
-                } else if (type === 'transferCategory') {
-                    if (transaction.type === TransactionType.Transfer) {
-                        transaction.categoryId = result.targetItem;
-                        updated = true;
-                    }
-                } else if (type === 'account') {
-                    transaction.sourceAccountId = result.targetItem;
-                    updated = true;
-                } else if (type === 'destinationAccount') {
-                    if (transaction.type === TransactionType.Transfer) {
-                        transaction.destinationAccountId = result.targetItem;
-                        updated = true;
-                    }
-                }
-
-                if (updated) {
-                    updatedCount++;
-                    updateTransactionData(transaction);
-                }
-            }
-        }
-
-        if (updatedCount > 0) {
-            snackbar.value?.showMessage('format.misc.youHaveUpdatedTransactions', {
-                count: getDisplayCount(updatedCount)
-            });
-        }
-    });
-}
-
-function showReplaceInvalidItemDialog(type: BatchReplaceDialogDataType, invalidItems: NameValue[]): void {
-    if (editingTransaction.value) {
-        return;
-    }
-
-    batchReplaceDialog.value?.open({
-        mode: 'replaceInvalidItems',
-        type: type,
-        invalidItems: invalidItems
-    }).then(result => {
-        if (!result || (!result.sourceItem && result.sourceItem !== '') || !result.targetItem) {
-            return;
-        }
-
-        let updatedCount = 0;
-
-        if (importTransactions.value) {
-            for (let i = 0; i < importTransactions.value.length; i++) {
-                const transaction: ImportTransaction = importTransactions.value[i];
-
-                if (transaction.valid) {
-                    continue;
-                }
-
-                let updated = false;
-
-                if (type === 'expenseCategory' || type === 'incomeCategory' || type === 'transferCategory') {
-                    const categoryId = transaction.categoryId;
-                    const originalCategoryName = transaction.originalCategoryName;
-
-                    if (transaction.type !== TransactionType.ModifyBalance && originalCategoryName === result.sourceItem && (!categoryId || categoryId === '0' || !allCategoriesMap.value[categoryId])) {
-                        if (type === 'expenseCategory' && transaction.type === TransactionType.Expense) {
-                            transaction.categoryId = result.targetItem;
-                            updated = true;
-                        } else if (type === 'incomeCategory' && transaction.type === TransactionType.Income) {
-                            transaction.categoryId = result.targetItem;
-                            updated = true;
-                        } else if (type === 'transferCategory' && transaction.type === TransactionType.Transfer) {
-                            transaction.categoryId = result.targetItem;
-                            updated = true;
-                        }
-                    }
-                } else if (type === 'account') {
-                    const sourceAccountId = transaction.sourceAccountId;
-                    const originalSourceAccountName = transaction.originalSourceAccountName;
-                    const destinationAccountId = transaction.destinationAccountId;
-                    const originalDestinationAccountName = transaction.originalDestinationAccountName;
-
-                    if (originalSourceAccountName === result.sourceItem && (!sourceAccountId || sourceAccountId === '0' || !allAccountsMap.value[sourceAccountId])) {
-                        transaction.sourceAccountId = result.targetItem;
-                        updated = true;
-                    }
-
-                    if (transaction.type === TransactionType.Transfer && originalDestinationAccountName === result.sourceItem && (!destinationAccountId || destinationAccountId === '0' || !allAccountsMap.value[destinationAccountId])) {
-                        transaction.destinationAccountId = result.targetItem;
-                        updated = true;
-                    }
-                } else if (type === 'tag' && transaction.tagIds) {
-                    for (let j = 0; j < transaction.tagIds.length; j++) {
-                        const tagId = transaction.tagIds[j];
-                        const originalTagName = transaction.originalTagNames ? transaction.originalTagNames[j] : "";
-
-                        if (originalTagName === result.sourceItem && (!tagId || tagId === '0' || !allTagsMap.value[tagId])) {
-                            transaction.tagIds[j] = result.targetItem;
-                            updated = true;
-                        }
-                    }
-                }
-
-                if (updated) {
-                    updatedCount++;
-                    updateTransactionData(transaction);
-                }
-            }
-        }
-
-        if (updatedCount > 0) {
-            snackbar.value?.showMessage('format.misc.youHaveUpdatedTransactions', {
-                count: getDisplayCount(updatedCount)
-            });
-        }
-    });
-}
-
-function showReplaceAllTypesDialog(): void {
-    if (editingTransaction.value) {
-        return;
-    }
-
-    batchReplaceAllTypesDialog.value?.open({
-        expenseCategoryNames: allInvalidExpenseCategoryNames.value,
-        incomeCategoryNames: allInvalidIncomeCategoryNames.value,
-        transferCategoryNames: allInvalidTransferCategoryNames.value,
-        accountNames: allInvalidAccountNames.value,
-        tagNames: allInvalidTransactionTagNames.value
-    }).then(result => {
-        if (!result || !result.rules) {
-            return;
-        }
-
-        let updatedCount = 0;
-
-        if (importTransactions.value) {
-            for (let i = 0; i < importTransactions.value.length; i++) {
-                const transaction: ImportTransaction = importTransactions.value[i];
-                let updated = false;
-
-                for (let j = 0; j < result.rules.length; j++) {
-                    const rule = result.rules[j];
-
-                    if (!rule || !rule.dataType || !rule.sourceValue || !rule.targetId) {
-                        continue;
-                    }
-
-                    if (rule.dataType === 'expenseCategory' || rule.dataType === 'incomeCategory' || rule.dataType === 'transferCategory') {
-                        if (transaction.type !== TransactionType.ModifyBalance && transaction.originalCategoryName === rule.sourceValue) {
-                            transaction.categoryId = rule.targetId;
-                            updated = true;
-                        }
-                    } else if (rule.dataType === 'account') {
-                        if (transaction.originalSourceAccountName === rule.sourceValue) {
-                            transaction.sourceAccountId = rule.targetId;
-                            updated = true;
-                        }
-
-                        if (transaction.type === TransactionType.Transfer && transaction.originalDestinationAccountName === rule.sourceValue) {
-                            transaction.destinationAccountId = rule.targetId;
-                            updated = true;
-                        }
-                    } else if (rule.dataType === 'tag' && transaction.tagIds) {
-                        for (let k = 0; k < transaction.tagIds.length; k++) {
-                            const originalTagName = transaction.originalTagNames ? transaction.originalTagNames[k] : "";
-
-                            if (originalTagName === rule.sourceValue) {
-                                transaction.tagIds[k] = rule.targetId;
-                                updated = true;
-                            }
-                        }
-                    }
-                }
-
-                if (updated) {
-                    updatedCount++;
-                    updateTransactionData(transaction);
-                }
-            }
-        }
-
-        if (updatedCount > 0) {
-            snackbar.value?.showMessage('format.misc.youHaveUpdatedTransactions', {
-                count: getDisplayCount(updatedCount)
-            });
-        }
-    });
-}
-
-function showBatchCreateInvalidItemDialog(type: BatchCreateDialogDataType, invalidItems: NameValue[]): void {
-    if (editingTransaction.value) {
-        return;
-    }
-
-    batchCreateDialog.value?.open({
-        type: type,
-        invalidItems: invalidItems
-    }).then(result => {
-        if (!result || !result.sourceTargetMap) {
-            return;
-        }
-
-        let updatedCount = 0;
-
-        if (importTransactions.value) {
-            const sourceTargetMap: Record<string, string> = result.sourceTargetMap;
-
-            for (let i = 0; i < importTransactions.value.length; i++) {
-                const transaction: ImportTransaction = importTransactions.value[i];
-
-                if (transaction.valid) {
-                    continue;
-                }
-
-                let updated = false;
-
-                if (type === 'expenseCategory' || type === 'incomeCategory' || type === 'transferCategory') {
-                    const categoryId = transaction.categoryId;
-                    const originalCategoryName = transaction.originalCategoryName;
-                    const targetItem = sourceTargetMap[originalCategoryName];
-
-                    if (transaction.type !== TransactionType.ModifyBalance && targetItem && (!categoryId || categoryId === '0' || !allCategoriesMap.value[categoryId])) {
-                        if (type === 'expenseCategory' && transaction.type === TransactionType.Expense) {
-                            transaction.categoryId = targetItem;
-                            updated = true;
-                        } else if (type === 'incomeCategory' && transaction.type === TransactionType.Income) {
-                            transaction.categoryId = targetItem;
-                            updated = true;
-                        } else if (type === 'transferCategory' && transaction.type === TransactionType.Transfer) {
-                            transaction.categoryId = targetItem;
-                            updated = true;
-                        }
-                    }
-                } else if (type === 'tag' && transaction.tagIds) {
-                    for (let j = 0; j < transaction.tagIds.length; j++) {
-                        const tagId = transaction.tagIds[j];
-                        const originalTagName = transaction.originalTagNames ? transaction.originalTagNames[j] : "";
-                        const targetItem = sourceTargetMap[originalTagName];
-
-                        if (targetItem && (!tagId || tagId === '0' || !allTagsMap.value[tagId])) {
-                            transaction.tagIds[j] = targetItem;
-                            updated = true;
-                        }
-                    }
-                }
-
-                if (updated) {
-                    updatedCount++;
-                    updateTransactionData(transaction);
-                }
-            }
-        }
-
-        if (updatedCount > 0) {
-            snackbar.value?.showMessage('format.misc.youHaveUpdatedTransactions', {
-                count: getDisplayCount(updatedCount)
-            });
-        }
-    });
-}
-
-function convertTransactionType(fromType: TransactionType, toType: TransactionType): void {
-    if (!importTransactions.value || importTransactions.value.length < 1) {
-        return;
-    }
-
-    const categoryType = transactionTypeToCategoryType(toType);
-
-    if (!categoryType) {
-        return;
-    }
-
-    const categoryMapByName: Record<string, TransactionCategory> = getSecondaryTransactionMapByName(allCategories.value[categoryType]);
-
-    for (let i = 0; i < importTransactions.value.length; i++) {
-        const transaction: ImportTransaction = importTransactions.value[i];
-
-        if (!transaction.selected || transaction.type !== fromType) {
-            continue;
-        }
-
-        transaction.type = toType;
-        transaction.categoryId = categoryMapByName[transaction.originalCategoryName]?.id || '0';
-
-        if (transaction.type === TransactionType.Transfer) {
-            transaction.destinationAccountId = allAccountsMapByName.value[transaction.originalDestinationAccountName || '']?.id || '0';
-            transaction.destinationAmount = transaction.sourceAmount;
-        } else {
-            if (fromType === TransactionType.Transfer && toType === TransactionType.Income) {
-                transaction.sourceAccountId = transaction.destinationAccountId;
-                transaction.sourceAmount = transaction.destinationAmount;
-            }
-
-            transaction.destinationAccountId = '0';
-            transaction.destinationAmount = 0;
-        }
-
-        updateTransactionData(transaction);
-    }
-}
-
-function onShowDateRangeError(message: string): void {
-    snackbar.value?.showError(message);
-}
-
 watch(fileType, () => {
     if (allFileSubTypes.value && allFileSubTypes.value.length) {
         fileSubType.value = allFileSubTypes.value[0].type;
     }
 
     importFile.value = null;
+    parsedFileData.value = undefined;
     importTransactions.value = undefined;
-    editingTransaction.value = null;
-    editingTags.value = [];
-    currentPage.value = 1;
-    countPerPage.value = 10;
 });
 
 watch(fileSubType, (newValue) => {
@@ -2687,58 +720,3 @@ defineExpose({
     open
 });
 </script>
-
-<style>
-.transaction-types-popup-menu .transaction-types-toggle {
-    overflow-x: auto;
-    white-space: nowrap;
-}
-
-.transaction-types-popup-menu .transaction-types-toggle.v-btn-toggle {
-    height: auto !important;
-    padding: 0;
-    border: none;
-}
-
-.transaction-types-popup-menu .transaction-types-toggle.v-btn-toggle > .v-btn {
-    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-}
-
-.transaction-types-popup-menu .transaction-types-toggle.v-btn-toggle > .v-btn:not(:first-child) {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-left: none;
-}
-
-.transaction-types-popup-menu .transaction-types-toggle.v-btn-toggle > .v-btn:not(:last-child) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.transaction-types-popup-menu .transaction-types-toggle.v-btn-toggle > .v-btn {
-    border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
-}
-
-.transaction-types-popup-menu .transaction-types-toggle.v-btn-toggle button.v-btn {
-    width: auto !important;
-}
-
-.import-transaction-table .v-autocomplete.v-input.v-input--density-compact:not(.v-textarea) .v-field__input,
-.import-transaction-table .v-select.v-input.v-input--density-compact:not(.v-textarea) .v-field__input {
-    min-height: inherit;
-    padding-top: 4px;
-}
-
-.import-transaction-table .v-chip.transaction-tag {
-    margin-inline-end: 4px;
-    margin-top: 2px;
-    margin-bottom: 2px;
-}
-
-.import-transaction-table .v-chip.transaction-tag > .v-chip__content {
-    display: block;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-</style>
diff --git a/src/views/desktop/transactions/import/tabs/ImportTransactionCheckDataTab.vue b/src/views/desktop/transactions/import/tabs/ImportTransactionCheckDataTab.vue
new file mode 100644
index 00000000..bf0e597f
--- /dev/null
+++ b/src/views/desktop/transactions/import/tabs/ImportTransactionCheckDataTab.vue
@@ -0,0 +1,1778 @@
+<template>
+    <v-data-table
+        fixed-header
+        fixed-footer
+        show-select
+        multi-sort
+        density="compact"
+        item-value="index"
+        :class="{ 'import-transaction-table': true, 'disabled': !!disabled }"
+        :height="importTransactionsTableHeight"
+        :headers="importTransactionHeaders"
+        :items="importTransactions"
+        :search="JSON.stringify(filters)"
+        :custom-filter="importTransactionsFilter"
+        :no-data-text="tt('No data to import')"
+        v-model:items-per-page="countPerPage"
+        v-model:page="currentPage"
+    >
+        <template #header.data-table-select>
+            <v-checkbox readonly class="always-cursor-pointer"
+                        density="compact" width="28"
+                        :disabled="!!disabled"
+                        :indeterminate="anyButNotAllTransactionSelected"
+                        v-model="allTransactionSelected"
+            >
+                <v-menu activator="parent" location="bottom">
+                    <v-list>
+                        <v-list-item :prepend-icon="mdiSelectAll"
+                                     :title="tt('Select All Valid Items')"
+                                     :disabled="!!disabled"
+                                     @click="selectAllValid"></v-list-item>
+                        <v-list-item :prepend-icon="mdiSelectAll"
+                                     :title="tt('Select All Invalid Items')"
+                                     :disabled="!!disabled"
+                                     @click="selectAllInvalid"></v-list-item>
+                        <v-divider class="my-2"/>
+                        <v-list-item :prepend-icon="mdiSelectAll"
+                                     :title="tt('Select All')"
+                                     :disabled="!!disabled"
+                                     @click="selectAll"></v-list-item>
+                        <v-list-item :prepend-icon="mdiSelect"
+                                     :title="tt('Select None')"
+                                     :disabled="!!disabled"
+                                     @click="selectNone"></v-list-item>
+                        <v-list-item :prepend-icon="mdiSelectInverse"
+                                     :title="tt('Invert Selection')"
+                                     :disabled="!!disabled"
+                                     @click="selectInvert"></v-list-item>
+                        <v-divider class="my-2"/>
+                        <v-list-item :prepend-icon="mdiSelectAll"
+                                     :title="tt('Select All in This Page')"
+                                     :disabled="!!disabled"
+                                     @click="selectAllInThisPage"></v-list-item>
+                        <v-list-item :prepend-icon="mdiSelect"
+                                     :title="tt('Select None in This Page')"
+                                     :disabled="!!disabled"
+                                     @click="selectNoneInThisPage"></v-list-item>
+                        <v-list-item :prepend-icon="mdiSelectInverse"
+                                     :title="tt('Invert Selection in This Page')"
+                                     :disabled="!!disabled"
+                                     @click="selectInvertInThisPage"></v-list-item>
+                    </v-list>
+                </v-menu>
+            </v-checkbox>
+        </template>
+        <template #item.data-table-select="{ item }">
+            <v-checkbox density="compact"
+                        :color="!item.valid ? 'error' : 'primary'"
+                        :disabled="!!disabled"
+                        v-model="item.selected"></v-checkbox>
+        </template>
+        <template #item.valid="{ item }">
+            <v-icon size="small" :class="{ 'text-error': !item.valid }"
+                    :disabled="!!disabled"
+                    :icon="editingTransaction === item ? mdiCheck : mdiPencilOutline"
+                    @click="editTransaction(item)">
+            </v-icon>
+            <v-tooltip activator="parent" v-if="!disabled">{{ tt('Edit') }}</v-tooltip>
+        </template>
+        <template #item.time="{ item }">
+            <span>{{ getDisplayDateTime(item) }}</span>
+            <v-chip class="ms-1" variant="flat" color="grey" size="x-small"
+                    v-if="item.utcOffset !== currentTimezoneOffsetMinutes">{{ getDisplayTimezone(item) }}</v-chip>
+        </template>
+        <template #item.type="{ value }">
+            <v-chip label color="secondary" variant="outlined" size="x-small" v-if="value === TransactionType.ModifyBalance">{{ tt('Modify Balance') }}</v-chip>
+            <v-chip label class="text-income" variant="outlined" size="x-small" v-else-if="value === TransactionType.Income">{{ tt('Income') }}</v-chip>
+            <v-chip label class="text-expense" variant="outlined" size="x-small" v-else-if="value === TransactionType.Expense">{{ tt('Expense') }}</v-chip>
+            <v-chip label color="primary" variant="outlined" size="x-small" v-else-if="value === TransactionType.Transfer">{{ tt('Transfer') }}</v-chip>
+            <v-chip label color="default" variant="outlined" size="x-small" v-else>{{ tt('Unknown') }}</v-chip>
+        </template>
+        <template #item.actualCategoryName="{ item }">
+            <div class="d-flex align-center" v-if="editingTransaction !== item || item.type === TransactionType.ModifyBalance">
+                <span v-if="item.type === TransactionType.ModifyBalance">-</span>
+                <ItemIcon size="24px" icon-type="category"
+                          :icon-id="allCategoriesMap[item.categoryId].icon"
+                          :color="allCategoriesMap[item.categoryId].color"
+                          v-if="item.type !== TransactionType.ModifyBalance && item.categoryId && item.categoryId !== '0' && allCategoriesMap[item.categoryId]"></ItemIcon>
+                <span class="ms-2" v-if="item.type !== TransactionType.ModifyBalance && item.categoryId && item.categoryId !== '0' && allCategoriesMap[item.categoryId]">
+                                    {{ allCategoriesMap[item.categoryId].name }}
+                                </span>
+                <div class="text-error font-italic" v-else-if="item.type !== TransactionType.ModifyBalance && (!item.categoryId || item.categoryId === '0' || !allCategoriesMap[item.categoryId])">
+                    <v-icon class="me-1" :icon="mdiAlertOutline"/>
+                    <span>{{ item.originalCategoryName }}</span>
+                </div>
+            </div>
+            <div style="width: 260px" v-if="editingTransaction === item && item.type === TransactionType.Expense">
+                <two-column-select density="compact" variant="plain"
+                                   primary-key-field="id" primary-value-field="id" primary-title-field="name"
+                                   primary-icon-field="icon" primary-icon-type="category" primary-color-field="color"
+                                   primary-hidden-field="hidden" primary-sub-items-field="subCategories"
+                                   secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
+                                   secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
+                                   secondary-hidden-field="hidden"
+                                   :disabled="!!disabled || !hasAvailableExpenseCategories"
+                                   :enable-filter="true" :filter-placeholder="tt('Find category')" :filter-no-items-text="tt('No available category')"
+                                   :show-selection-primary-text="true"
+                                   :custom-selection-primary-text="getTransactionPrimaryCategoryName(item.categoryId, allCategories[CategoryType.Expense])"
+                                   :custom-selection-secondary-text="getTransactionSecondaryCategoryName(item.categoryId, allCategories[CategoryType.Expense])"
+                                   :placeholder="tt('Category')"
+                                   :items="allCategories[CategoryType.Expense]"
+                                   v-model="item.categoryId">
+                </two-column-select>
+            </div>
+            <div style="width: 260px" v-if="editingTransaction === item && item.type === TransactionType.Income">
+                <two-column-select density="compact" variant="plain"
+                                   primary-key-field="id" primary-value-field="id" primary-title-field="name"
+                                   primary-icon-field="icon" primary-icon-type="category" primary-color-field="color"
+                                   primary-hidden-field="hidden" primary-sub-items-field="subCategories"
+                                   secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
+                                   secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
+                                   secondary-hidden-field="hidden"
+                                   :disabled="!!disabled || !hasAvailableIncomeCategories"
+                                   :enable-filter="true" :filter-placeholder="tt('Find category')" :filter-no-items-text="tt('No available category')"
+                                   :show-selection-primary-text="true"
+                                   :custom-selection-primary-text="getTransactionPrimaryCategoryName(item.categoryId, allCategories[CategoryType.Income])"
+                                   :custom-selection-secondary-text="getTransactionSecondaryCategoryName(item.categoryId, allCategories[CategoryType.Income])"
+                                   :placeholder="tt('Category')"
+                                   :items="allCategories[CategoryType.Income]"
+                                   v-model="item.categoryId">
+                </two-column-select>
+            </div>
+            <div style="width: 260px" v-if="editingTransaction === item && item.type === TransactionType.Transfer">
+                <two-column-select density="compact" variant="plain"
+                                   primary-key-field="id" primary-value-field="id" primary-title-field="name"
+                                   primary-icon-field="icon" primary-icon-type="category" primary-color-field="color"
+                                   primary-hidden-field="hidden" primary-sub-items-field="subCategories"
+                                   secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
+                                   secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
+                                   secondary-hidden-field="hidden"
+                                   :disabled="!!disabled || !hasAvailableTransferCategories"
+                                   :enable-filter="true" :filter-placeholder="tt('Find category')" :filter-no-items-text="tt('No available category')"
+                                   :show-selection-primary-text="true"
+                                   :custom-selection-primary-text="getTransactionPrimaryCategoryName(item.categoryId, allCategories[CategoryType.Transfer])"
+                                   :custom-selection-secondary-text="getTransactionSecondaryCategoryName(item.categoryId, allCategories[CategoryType.Transfer])"
+                                   :placeholder="tt('Category')"
+                                   :items="allCategories[CategoryType.Transfer]"
+                                   v-model="item.categoryId">
+                </two-column-select>
+            </div>
+        </template>
+        <template #item.sourceAmount="{ item }">
+            <span>{{ getTransactionDisplayAmount(item) }}</span>
+            <v-icon class="icon-with-direction mx-1" size="13" :icon="mdiArrowRight" v-if="item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId"></v-icon>
+            <span v-if="item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId">{{ getTransactionDisplayDestinationAmount(item) }}</span>
+        </template>
+        <template #item.actualSourceAccountName="{ item }">
+            <div class="d-flex align-center" v-if="editingTransaction !== item">
+                <span v-if="item.sourceAccountId && item.sourceAccountId !== '0' && allAccountsMap[item.sourceAccountId]">{{ allAccountsMap[item.sourceAccountId].name }}</span>
+                <div class="text-error font-italic" v-else>
+                    <v-icon class="me-1" :icon="mdiAlertOutline"/>
+                    <span>{{ item.originalSourceAccountName }}</span>
+                </div>
+                <v-icon class="icon-with-direction mx-1" size="13" :icon="mdiArrowRight" v-if="item.type === TransactionType.Transfer"></v-icon>
+                <span v-if="item.type === TransactionType.Transfer && item.destinationAccountId && item.destinationAccountId !== '0' && allAccountsMap[item.destinationAccountId]">{{allAccountsMap[item.destinationAccountId].name }}</span>
+                <div class="text-error font-italic" v-else-if="item.type === TransactionType.Transfer && (!item.destinationAccountId || item.destinationAccountId === '0' || !allAccountsMap[item.destinationAccountId])">
+                    <v-icon class="me-1" :icon="mdiAlertOutline"/>
+                    <span>{{ item.originalDestinationAccountName }}</span>
+                </div>
+            </div>
+            <div class="d-flex align-center" style="width: 200px" v-if="editingTransaction === item">
+                <two-column-select density="compact" variant="plain"
+                                   primary-key-field="id" primary-value-field="category"
+                                   primary-title-field="name" primary-footer-field="displayBalance"
+                                   primary-icon-field="icon" primary-icon-type="account"
+                                   primary-sub-items-field="accounts"
+                                   :primary-title-i18n="true"
+                                   secondary-key-field="id" secondary-value-field="id"
+                                   secondary-title-field="name" secondary-footer-field="displayBalance"
+                                   secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
+                                   :disabled="!!disabled || !allVisibleAccounts.length"
+                                   :enable-filter="true" :filter-placeholder="tt('Find account')" :filter-no-items-text="tt('No available account')"
+                                   :custom-selection-primary-text="getSourceAccountDisplayName(item)"
+                                   :placeholder="getSourceAccountTitle(item)"
+                                   :items="allVisibleCategorizedAccounts"
+                                   v-model="item.sourceAccountId">
+                </two-column-select>
+                <v-icon class="icon-with-direction mx-1" size="13" :icon="mdiArrowRight" v-if="item.type === TransactionType.Transfer"></v-icon>
+                <two-column-select density="compact" variant="plain"
+                                   primary-key-field="id" primary-value-field="category"
+                                   primary-title-field="name" primary-footer-field="displayBalance"
+                                   primary-icon-field="icon" primary-icon-type="account"
+                                   primary-sub-items-field="accounts"
+                                   :primary-title-i18n="true"
+                                   secondary-key-field="id" secondary-value-field="id"
+                                   secondary-title-field="name" secondary-footer-field="displayBalance"
+                                   secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
+                                   :disabled="!!disabled || !allVisibleAccounts.length"
+                                   :enable-filter="true" :filter-placeholder="tt('Find account')" :filter-no-items-text="tt('No available account')"
+                                   :custom-selection-primary-text="getDestinationAccountDisplayName(item)"
+                                   :placeholder="tt('Destination Account')"
+                                   :items="allVisibleCategorizedAccounts"
+                                   v-model="item.destinationAccountId"
+                                   v-if="item.type === TransactionType.Transfer">
+                </two-column-select>
+            </div>
+        </template>
+        <template #item.geoLocation="{ item }">
+            <span v-if="item.geoLocation">{{ `(${formatCoordinate(item.geoLocation, coordinateDisplayType)})` }}</span>
+            <span v-else-if="!item.geoLocation">{{ tt('None') }}</span>
+        </template>
+        <template #item.tagIds="{ item }">
+            <div v-if="editingTransaction !== item">
+                <v-chip class="transaction-tag" size="small"
+                        :class="{ 'font-italic': !tagId || tagId === '0' || !allTagsMap[tagId] }"
+                        :prepend-icon="tagId && tagId !== '0' && allTagsMap[tagId] ? mdiPound : mdiAlertOutline"
+                        :color="tagId && tagId !== '0' && allTagsMap[tagId] ? 'default' : 'error'"
+                        :text="tagId && tagId !== '0' && allTagsMap[tagId] ? allTagsMap[tagId].name : item.originalTagNames[index]"
+                        :key="tagId"
+                        v-for="(tagId, index) in item.tagIds"/>
+                <v-chip class="transaction-tag" size="small"
+                        :text="tt('None')"
+                        v-if="!item.tagIds || !item.tagIds.length"/>
+            </div>
+            <div style="width: 200px" v-if="editingTransaction === item">
+                <v-autocomplete
+                    item-title="name"
+                    item-value="id"
+                    auto-select-first
+                    persistent-placeholder
+                    multiple
+                    chips
+                    closable-chips
+                    density="compact" variant="plain"
+                    :disabled="!!disabled"
+                    :placeholder="tt('None')"
+                    :items="allTags"
+                    :no-data-text="tt('No available tag')"
+                    v-model="editingTags"
+                >
+                    <template #chip="{ props, index }">
+                        <v-chip :class="{ 'font-italic': !isTagValid(editingTags, index) }"
+                                :prepend-icon="isTagValid(editingTags, index) ? mdiPound : mdiAlertOutline"
+                                :color="isTagValid(editingTags, index) ? 'default' : 'error'"
+                                :text="isTagValid(editingTags, index) ? allTagsMap[editingTags[index]].name : item.originalTagNames[index]"
+                                v-bind="props"/>
+                    </template>
+
+                    <template #item="{ props, item }">
+                        <v-list-item :value="item.value" v-bind="props" v-if="!item.raw.hidden">
+                            <template #title>
+                                <v-list-item-title>
+                                    <div class="d-flex align-center">
+                                        <v-icon size="20" start :icon="mdiPound"/>
+                                        <span>{{ item.title }}</span>
+                                    </div>
+                                </v-list-item-title>
+                            </template>
+                        </v-list-item>
+                    </template>
+                </v-autocomplete>
+            </div>
+        </template>
+        <template #bottom>
+            <div class="title-and-toolbar d-flex align-center text-no-wrap mt-2"
+                 v-if="importTransactions && importTransactions.length > 10">
+                                <span :class="{ 'text-error': selectedInvalidTransactionCount > 0 }">
+                                    {{ tt('format.misc.selectedCount', { count: getDisplayCount(selectedImportTransactionCount), totalCount: getDisplayCount(importTransactions.length) }) }}
+                                </span>
+                <v-spacer/>
+                <span>{{ tt('Transactions Per Page') }}</span>
+                <v-select class="ms-2" density="compact" max-width="100"
+                          item-title="name"
+                          item-value="value"
+                          :disabled="!!disabled"
+                          :items="importTransactionsTablePageOptions"
+                          v-model="countPerPage"
+                />
+                <pagination-buttons density="compact"
+                                    :disabled="!!disabled"
+                                    :totalPageCount="totalPageCount"
+                                    v-model="currentPage"></pagination-buttons>
+            </div>
+        </template>
+    </v-data-table>
+
+    <v-dialog width="640" v-model="showCustomDescriptionDialog">
+        <v-card class="pa-2 pa-sm-4 pa-md-4">
+            <template #title>
+                <div class="d-flex align-center justify-center">
+                    <h4 class="text-h4">{{ tt('Filter Description') }}</h4>
+                </div>
+            </template>
+            <v-card-text class="mb-md-4 w-100 d-flex justify-center">
+                <v-text-field
+                    type="text"
+                    persistent-placeholder
+                    :label="tt('Description')"
+                    :placeholder="tt('Description')"
+                    v-model="currentDescriptionFilterValue"
+                />
+            </v-card-text>
+            <v-card-text class="overflow-y-visible">
+                <div class="w-100 d-flex justify-center gap-4">
+                    <v-btn :disabled="!currentDescriptionFilterValue" @click="showCustomDescriptionDialog = false; filters.description = currentDescriptionFilterValue">{{ tt('OK') }}</v-btn>
+                    <v-btn color="secondary" variant="tonal" @click="showCustomDescriptionDialog = false; currentDescriptionFilterValue = ''">{{ tt('Cancel') }}</v-btn>
+                </div>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+
+    <date-range-selection-dialog :title="tt('Custom Date Range')"
+                                 :min-time="filters.minDatetime"
+                                 :max-time="filters.maxDatetime"
+                                 v-model:show="showCustomDateRangeDialog"
+                                 @dateRange:change="changeCustomDateFilter"
+                                 @error="onShowDateRangeError" />
+    <batch-replace-dialog ref="batchReplaceDialog" />
+    <batch-replace-all-types-dialog ref="batchReplaceAllTypesDialog" />
+    <batch-create-dialog ref="batchCreateDialog" />
+    <snack-bar ref="snackbar" />
+</template>
+
+<script setup lang="ts">
+import PaginationButtons from '@/components/desktop/PaginationButtons.vue';
+import SnackBar from '@/components/desktop/SnackBar.vue';
+import BatchReplaceDialog, { type BatchReplaceDialogDataType } from '../dialogs/BatchReplaceDialog.vue';
+import BatchReplaceAllTypesDialog from '../dialogs/BatchReplaceAllTypesDialog.vue';
+import BatchCreateDialog, { type BatchCreateDialogDataType } from '../dialogs/BatchCreateDialog.vue';
+
+import { ref, computed, useTemplateRef } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useSettingsStore } from '@/stores/setting.ts';
+import { useUserStore } from '@/stores/user.ts';
+import { useAccountsStore } from '@/stores/account.ts';
+import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
+import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
+
+import { type NameValue, type NameNumeralValue, itemAndIndex, keys } from '@/core/base.ts';
+import { type NumeralSystem } from '@/core/numeral.ts';
+import { CategoryType } from '@/core/category.ts';
+import { TransactionType } from '@/core/transaction.ts';
+
+import { Account, type CategorizedAccountWithDisplayBalance } from '@/models/account.ts';
+import type { TransactionCategory } from '@/models/transaction_category.ts';
+import type { TransactionTag } from '@/models/transaction_tag.ts';
+import { ImportTransaction } from '@/models/imported_transaction.ts';
+
+import {
+    isString,
+    isNumber,
+    objectFieldToArrayItem
+} from '@/lib/common.ts';
+import {
+    getUtcOffsetByUtcOffsetMinutes,
+    getTimezoneOffsetMinutes
+} from '@/lib/datetime.ts';
+import { formatCoordinate } from '@/lib/coordinate.ts';
+import {
+    getAccountMapByName
+} from '@/lib/account.ts';
+import {
+    transactionTypeToCategoryType,
+    getSecondaryTransactionMapByName,
+    getTransactionPrimaryCategoryName,
+    getTransactionSecondaryCategoryName
+} from '@/lib/category.ts';
+
+import {
+    mdiCheck,
+    mdiArrowRight,
+    mdiSelectAll,
+    mdiSelect,
+    mdiSelectInverse,
+    mdiPencilOutline,
+    mdiAlertOutline,
+    mdiPound,
+    mdiFindReplace,
+    mdiShapePlusOutline,
+    mdiTransfer
+} from '@mdi/js';
+
+type SnackBarType = InstanceType<typeof SnackBar>;
+type BatchReplaceDialogType = InstanceType<typeof BatchReplaceDialog>;
+type BatchReplaceAllTypesDialogType = InstanceType<typeof BatchReplaceAllTypesDialog>;
+type BatchCreateDialogType = InstanceType<typeof BatchCreateDialog>;
+
+interface ImportTransactionCheckDataFilter {
+    minDatetime: number | null; // minDatetime or maxDatetime is null for 'All Date Range', all are not null for 'Custom Date Range'
+    maxDatetime: number | null;
+    transactionType: TransactionType | null; // null for 'All Transaction Type'
+    category: string | null | undefined; // null for 'All Category', undefined for 'Invalid Category'
+    account: string | null | undefined; // null for 'All Account', undefined for 'Invalid Account'
+    tag: string | null | undefined; // null for 'All Tag', undefined for 'Invalid Tag'
+    description: string | null; // null for 'All Description'
+}
+
+interface ImportTransactionCheckDataMenuGroup {
+    title: string;
+    items: ImportTransactionCheckDataMenu[];
+}
+
+interface ImportTransactionCheckDataMenu {
+    prependIcon?: string;
+    title: string;
+    subTitle?: string;
+    appendIcon?: string;
+    disabled?: boolean;
+    divider?: boolean;
+    onClick: () => void;
+}
+
+const props = defineProps<{
+    importTransactions?: ImportTransaction[]
+    disabled?: boolean;
+}>();
+
+const {
+    tt,
+    getCurrentNumeralSystemType,
+    formatUnixTimeToLongDateTime,
+    formatAmountToLocalizedNumeralsWithCurrency,
+    getCategorizedAccountsWithDisplayBalance
+} = useI18n();
+
+const settingsStore = useSettingsStore();
+const userStore = useUserStore();
+const accountsStore = useAccountsStore();
+const transactionCategoriesStore = useTransactionCategoriesStore();
+const transactionTagsStore = useTransactionTagsStore();
+
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
+const batchReplaceDialog = useTemplateRef<BatchReplaceDialogType>('batchReplaceDialog');
+const batchReplaceAllTypesDialog = useTemplateRef<BatchReplaceAllTypesDialogType>('batchReplaceAllTypesDialog');
+const batchCreateDialog = useTemplateRef<BatchCreateDialogType>('batchCreateDialog');
+
+const editingTransaction = ref<ImportTransaction | null>(null);
+const editingTags = ref<string[]>([]);
+const filters = ref<ImportTransactionCheckDataFilter>({
+    minDatetime: null,
+    maxDatetime: null,
+    transactionType: null,
+    category: null,
+    account: null,
+    tag: null,
+    description: null
+});
+
+const currentPage = ref<number>(1);
+const countPerPage = ref<number>(10);
+const showCustomDateRangeDialog = ref<boolean>(false);
+const showCustomDescriptionDialog = ref<boolean>(false);
+const currentDescriptionFilterValue = ref<string | null>(null);
+
+const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
+const showAccountBalance = computed<boolean>(() => settingsStore.appSettings.showAccountBalance);
+const currentTimezoneOffsetMinutes = computed<number>(() => getTimezoneOffsetMinutes(settingsStore.appSettings.timeZone));
+
+const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
+const coordinateDisplayType = computed<number>(() => userStore.currentUserCoordinateDisplayType);
+
+const allAccounts = computed<Account[]>(() => accountsStore.allPlainAccounts);
+const allVisibleAccounts = computed<Account[]>(() => accountsStore.allVisiblePlainAccounts);
+const allVisibleCategorizedAccounts = computed<CategorizedAccountWithDisplayBalance[]>(() => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts.value, showAccountBalance.value));
+const allAccountsMap = computed<Record<string, Account>>(() => accountsStore.allAccountsMap);
+const allAccountsMapByName = computed<Record<string, Account>>(() => getAccountMapByName(accountsStore.allAccounts));
+const allCategories = computed<Record<number, TransactionCategory[]>>(() => transactionCategoriesStore.allTransactionCategories);
+const allCategoriesMap = computed<Record<string, TransactionCategory>>(() => transactionCategoriesStore.allTransactionCategoriesMap);
+const allTags = computed<TransactionTag[]>(() => transactionTagsStore.allTransactionTags);
+const allTagsMap = computed<Record<string, TransactionTag>>(() => transactionTagsStore.allTransactionTagsMap);
+
+const hasAvailableExpenseCategories = computed<boolean>(() => transactionCategoriesStore.hasAvailableExpenseCategories);
+const hasAvailableIncomeCategories = computed<boolean>(() => transactionCategoriesStore.hasAvailableIncomeCategories);
+const hasAvailableTransferCategories = computed<boolean>(() => transactionCategoriesStore.hasAvailableTransferCategories);
+
+const isEditing = computed<boolean>(() => !!editingTransaction.value);
+const canImport = computed<boolean>(() => selectedImportTransactionCount.value > 0 && selectedInvalidTransactionCount.value < 1);
+
+const filterMenus = computed<ImportTransactionCheckDataMenuGroup[]>(() => [
+    {
+        title: tt('Date Range'),
+        items: [
+            {
+                title: tt('All'),
+                appendIcon: filters.value.minDatetime === null || filters.value.maxDatetime === null ? mdiCheck : undefined,
+                onClick: () => {
+                    filters.value.minDatetime = null;
+                    filters.value.maxDatetime = null;
+                }
+            },
+            {
+                title: tt('Custom'),
+                subTitle: displayFilterCustomDateRange.value,
+                appendIcon: filters.value.minDatetime !== null && filters.value.maxDatetime !== null ? mdiCheck : undefined,
+                onClick: () => showCustomDateRangeDialog.value = true
+            }
+        ]
+    },
+    {
+        title: tt('Type'),
+        items: [
+            {
+                title: tt('All'),
+                appendIcon: filters.value.transactionType === null ? mdiCheck : undefined,
+                onClick: () => filters.value.transactionType = null
+            },
+            {
+                title: tt('Income'),
+                appendIcon: filters.value.transactionType === TransactionType.Income ? mdiCheck : undefined,
+                onClick: () => filters.value.transactionType = TransactionType.Income
+            },
+            {
+                title: tt('Expense'),
+                appendIcon: filters.value.transactionType === TransactionType.Expense ? mdiCheck : undefined,
+                onClick: () => filters.value.transactionType = TransactionType.Expense
+            },
+            {
+                title: tt('Transfer'),
+                appendIcon: filters.value.transactionType === TransactionType.Transfer ? mdiCheck : undefined,
+                onClick: () => filters.value.transactionType = TransactionType.Transfer
+            }
+        ]
+    },
+    {
+        title: tt('Category'),
+        items: [
+            {
+                title: tt('All'),
+                appendIcon: filters.value.category === null ? mdiCheck : undefined,
+                onClick: () => filters.value.category = null
+            },
+            {
+                title: tt('Invalid Category'),
+                appendIcon: filters.value.category === undefined ? mdiCheck : undefined,
+                onClick: () => filters.value.category = undefined
+            },
+            {
+                title: tt('None'),
+                appendIcon: filters.value.category === '' ? mdiCheck : undefined,
+                onClick: () => filters.value.category = ''
+            },
+            ...allUsedCategoryNames.value.map(name => ({
+                title: name,
+                appendIcon: filters.value.category === name ? mdiCheck : undefined,
+                onClick: () => filters.value.category = name
+            }))
+        ]
+    },
+    {
+        title: tt('Account'),
+        items: [
+            {
+                title: tt('All'),
+                appendIcon: filters.value.account === null ? mdiCheck : undefined,
+                onClick: () => filters.value.account = null
+            },
+            {
+                title: tt('Invalid Account'),
+                appendIcon: filters.value.account === undefined ? mdiCheck : undefined,
+                onClick: () => filters.value.account = undefined
+            },
+            {
+                title: tt('None'),
+                appendIcon: filters.value.account === '' ? mdiCheck : undefined,
+                onClick: () => filters.value.account = ''
+            },
+            ...allUsedAccountNames.value.map(name => ({
+                title: name,
+                appendIcon: filters.value.account === name ? mdiCheck : undefined,
+                onClick: () => filters.value.account = name
+            }))
+        ]
+    },
+    {
+        title: tt('Tags'),
+        items: [
+            {
+                title: tt('All'),
+                appendIcon: filters.value.tag === null ? mdiCheck : undefined,
+                onClick: () => filters.value.tag = null
+            },
+            {
+                title: tt('Invalid Tag'),
+                appendIcon: filters.value.tag === undefined ? mdiCheck : undefined,
+                onClick: () => filters.value.tag = undefined
+            },
+            {
+                title: tt('None'),
+                appendIcon: filters.value.tag === '' ? mdiCheck : undefined,
+                onClick: () => filters.value.tag = ''
+            },
+            ...allUsedTagNames.value.map(name => ({
+                title: name,
+                appendIcon: filters.value.tag === name ? mdiCheck : undefined,
+                onClick: () => filters.value.tag = name
+            }))
+        ]
+    },
+    {
+        title: tt('Description'),
+        items: [
+            {
+                title: tt('All'),
+                appendIcon: filters.value.description === null ? mdiCheck : undefined,
+                onClick: () => filters.value.description = null
+            },
+            {
+                title: tt('None'),
+                appendIcon: filters.value.description === '' ? mdiCheck : undefined,
+                onClick: () => filters.value.description = ''
+            },
+            {
+                title: tt('Custom'),
+                subTitle: filters.value.description !== null ? filters.value.description : undefined,
+                appendIcon: filters.value.description !== null && filters.value.description !== '' ? mdiCheck : undefined,
+                onClick: () => {
+                    currentDescriptionFilterValue.value = filters.value.description || '';
+                    showCustomDescriptionDialog.value = true;
+                }
+            }
+        ]
+    }
+]);
+
+const toolMenus = computed<ImportTransactionCheckDataMenu[]>(() => [
+    {
+        prependIcon: mdiFindReplace,
+        title: tt('Batch Replace Selected Expense Categories'),
+        disabled: isEditing.value || selectedExpenseTransactionCount.value < 1,
+        onClick: () => showBatchReplaceDialog('expenseCategory')
+    },
+    {
+        prependIcon: mdiFindReplace,
+        title: tt('Batch Replace Selected Income Categories'),
+        disabled: isEditing.value || selectedIncomeTransactionCount.value < 1,
+        onClick: () => showBatchReplaceDialog('incomeCategory')
+    },
+    {
+        prependIcon: mdiFindReplace,
+        title: tt('Batch Replace Selected Transfer Categories'),
+        disabled: isEditing.value || selectedTransferTransactionCount.value < 1,
+        onClick: () => showBatchReplaceDialog('transferCategory')
+    },
+    {
+        prependIcon: mdiFindReplace,
+        title: tt('Batch Replace Selected Accounts'),
+        disabled: isEditing.value || selectedImportTransactionCount.value < 1,
+        onClick: () => showBatchReplaceDialog('account')
+    },
+    {
+        prependIcon: mdiFindReplace,
+        title: tt('Batch Replace Selected Destination Accounts'),
+        disabled: isEditing.value || selectedTransferTransactionCount.value < 1,
+        onClick: () => showBatchReplaceDialog('destinationAccount')
+    },
+    {
+        prependIcon: mdiFindReplace,
+        title: tt('Replace Invalid Expense Categories'),
+        disabled: isEditing.value || !allInvalidExpenseCategoryNames.value || allInvalidExpenseCategoryNames.value.length < 1,
+        divider: true,
+        onClick: () => showReplaceInvalidItemDialog('expenseCategory', allInvalidExpenseCategoryNames.value)
+    },
+    {
+        prependIcon: mdiFindReplace,
+        title: tt('Replace Invalid Income Categories'),
+        disabled: isEditing.value || !allInvalidIncomeCategoryNames.value || allInvalidIncomeCategoryNames.value.length < 1,
+        onClick: () => showReplaceInvalidItemDialog('incomeCategory', allInvalidIncomeCategoryNames.value)
+    },
+    {
+        prependIcon: mdiFindReplace,
+        title: tt('Replace Invalid Transfer Categories'),
+        disabled: isEditing.value || !allInvalidTransferCategoryNames.value || allInvalidTransferCategoryNames.value.length < 1,
+        onClick: () => showReplaceInvalidItemDialog('transferCategory', allInvalidTransferCategoryNames.value)
+    },
+    {
+        prependIcon: mdiFindReplace,
+        title: tt('Replace Invalid Accounts'),
+        disabled: isEditing.value || !allInvalidAccountNames.value || allInvalidAccountNames.value.length < 1,
+        onClick: () => showReplaceInvalidItemDialog('account', allInvalidAccountNames.value)
+    },
+    {
+        prependIcon: mdiFindReplace,
+        title: tt('Replace Invalid Transaction Tags'),
+        disabled: isEditing.value || !allInvalidTransactionTagNames.value || allInvalidTransactionTagNames.value.length < 1,
+        onClick: () => showReplaceInvalidItemDialog('tag', allInvalidTransactionTagNames.value)
+    },
+    {
+        prependIcon: mdiFindReplace,
+        title: tt('Batch Replace Categories / Accounts / Tags'),
+        disabled: isEditing.value,
+        divider: true,
+        onClick: showReplaceAllTypesDialog
+    },
+    {
+        prependIcon: mdiShapePlusOutline,
+        title: tt('Create Nonexistent Expense Categories'),
+        disabled: isEditing.value || !allInvalidExpenseCategoryNames.value || allInvalidExpenseCategoryNames.value.length < 1,
+        divider: true,
+        onClick: () => showBatchCreateInvalidItemDialog('expenseCategory', allInvalidExpenseCategoryNames.value)
+    },
+    {
+        prependIcon: mdiShapePlusOutline,
+        title: tt('Create Nonexistent Income Categories'),
+        disabled: isEditing.value || !allInvalidIncomeCategoryNames.value || allInvalidIncomeCategoryNames.value.length < 1,
+        onClick: () => showBatchCreateInvalidItemDialog('incomeCategory', allInvalidIncomeCategoryNames.value)
+    },
+    {
+        prependIcon: mdiShapePlusOutline,
+        title: tt('Create Nonexistent Transfer Categories'),
+        disabled: isEditing.value || !allInvalidTransferCategoryNames.value || allInvalidTransferCategoryNames.value.length < 1,
+        onClick: () => showBatchCreateInvalidItemDialog('transferCategory', allInvalidTransferCategoryNames.value)
+    },
+    {
+        prependIcon: mdiShapePlusOutline,
+        title: tt('Create Nonexistent Transaction Tags'),
+        disabled: isEditing.value || !allInvalidTransactionTagNames.value || allInvalidTransactionTagNames.value.length < 1,
+        onClick: () => showBatchCreateInvalidItemDialog('tag', allInvalidTransactionTagNames.value)
+    },
+    {
+        prependIcon: mdiTransfer,
+        title: tt('Batch Convert Expense Transaction to Income Transaction'),
+        disabled: isEditing.value || selectedExpenseTransactionCount.value < 1,
+        divider: true,
+        onClick: () => convertTransactionType(TransactionType.Expense, TransactionType.Income)
+    },
+    {
+        prependIcon: mdiTransfer,
+        title: tt('Batch Convert Expense Transaction to Transfer Transaction'),
+        disabled: isEditing.value || selectedExpenseTransactionCount.value < 1,
+        onClick: () => convertTransactionType(TransactionType.Expense, TransactionType.Transfer)
+    },
+    {
+        prependIcon: mdiTransfer,
+        title: tt('Batch Convert Income Transaction to Expense Transaction'),
+        disabled: isEditing.value || selectedIncomeTransactionCount.value < 1,
+        onClick: () => convertTransactionType(TransactionType.Income, TransactionType.Expense)
+    },
+    {
+        prependIcon: mdiTransfer,
+        title: tt('Batch Convert Income Transaction to Transfer Transaction'),
+        disabled: isEditing.value || selectedIncomeTransactionCount.value < 1,
+        onClick: () => convertTransactionType(TransactionType.Income, TransactionType.Transfer)
+    },
+    {
+        prependIcon: mdiTransfer,
+        title: tt('Batch Convert Transfer Transaction to Expense Transaction'),
+        disabled: isEditing.value || selectedTransferTransactionCount.value < 1,
+        onClick: () => convertTransactionType(TransactionType.Transfer, TransactionType.Expense)
+    },
+    {
+        prependIcon: mdiTransfer,
+        title: tt('Batch Convert Transfer Transaction to Income Transaction'),
+        disabled: isEditing.value || selectedTransferTransactionCount.value < 1,
+        onClick: () => convertTransactionType(TransactionType.Transfer, TransactionType.Income)
+    }
+]);
+
+const importTransactionsTableHeight = computed<number | undefined>(() => {
+    if (countPerPage.value <= 10 || !props.importTransactions || props.importTransactions.length <= 10) {
+        return undefined;
+    } else {
+        return 400;
+    }
+});
+
+const importTransactionHeaders = computed<object[]>(() => {
+    return [
+        { value: 'valid', sortable: true, nowrap: true, width: 35 },
+        { value: 'time', title: tt('Transaction Time'), sortable: true, nowrap: true, maxWidth: 280 },
+        { value: 'type', title: tt('Type'), sortable: true, nowrap: true, maxWidth: 140 },
+        { value: 'actualCategoryName', title: tt('Category'), sortable: true, nowrap: true },
+        { value: 'sourceAmount', title: tt('Amount'), sortable: true, nowrap: true },
+        { value: 'actualSourceAccountName', title: tt('Account'), sortable: true, nowrap: true },
+        { value: 'geoLocation', title: tt('Geographic Location'), sortable: true, nowrap: true },
+        { value: 'tagIds', title: tt('Tags'), sortable: true, nowrap: true },
+        { value: 'comment', title: tt('Description'), sortable: true, nowrap: true },
+    ];
+});
+
+const importTransactionsTablePageOptions = computed<NameNumeralValue[]>(() => getTablePageOptions(props.importTransactions?.length));
+
+const totalPageCount = computed<number>(() => {
+    if (!props.importTransactions || props.importTransactions.length < 1) {
+        return 1;
+    }
+
+    let count = 0;
+
+    for (const importTransaction of props.importTransactions) {
+        if (isTransactionDisplayed(importTransaction)) {
+            count++;
+        }
+    }
+
+    return Math.ceil(count / countPerPage.value);
+});
+
+const currentPageTransactions = computed<ImportTransaction[]>(() => {
+    const ret: ImportTransaction[] = [];
+
+    if (!props.importTransactions || props.importTransactions.length < 1) {
+        return ret;
+    }
+
+    const previousCount = Math.max(0, (currentPage.value - 1) * countPerPage.value);
+    let count = 0;
+
+    for (const importTransaction of props.importTransactions) {
+        if (ret.length >= countPerPage.value) {
+            break;
+        }
+
+        if (isTransactionDisplayed(importTransaction)) {
+            if (count >= previousCount) {
+                ret.push(importTransaction);
+            }
+
+            count++;
+        }
+    }
+
+    return ret;
+});
+
+const selectedImportTransactionCount = computed<number>(() => {
+    let count = 0;
+
+    if (!props.importTransactions || props.importTransactions.length < 1) {
+        return count;
+    }
+
+    for (const importTransaction of props.importTransactions) {
+        if (importTransaction.selected) {
+            count++;
+        }
+    }
+
+    return count;
+});
+
+const selectedExpenseTransactionCount = computed<number>(() => {
+    let count = 0;
+
+    if (!props.importTransactions || props.importTransactions.length < 1) {
+        return count;
+    }
+
+    for (const importTransaction of props.importTransactions) {
+        if (importTransaction.selected && importTransaction.type === TransactionType.Expense) {
+            count++;
+        }
+    }
+
+    return count;
+});
+
+const selectedIncomeTransactionCount = computed<number>(() => {
+    let count = 0;
+
+    if (!props.importTransactions || props.importTransactions.length < 1) {
+        return count;
+    }
+
+    for (const importTransaction of props.importTransactions) {
+        if (importTransaction.selected && importTransaction.type === TransactionType.Income) {
+            count++;
+        }
+    }
+
+    return count;
+});
+
+const selectedTransferTransactionCount = computed<number>(() => {
+    let count = 0;
+
+    if (!props.importTransactions || props.importTransactions.length < 1) {
+        return count;
+    }
+
+    for (const importTransaction of props.importTransactions) {
+        if (importTransaction.selected && importTransaction.type === TransactionType.Transfer) {
+            count++;
+        }
+    }
+
+    return count;
+});
+
+const selectedInvalidTransactionCount = computed<number>(() => {
+    let count = 0;
+
+    if (!props.importTransactions || props.importTransactions.length < 1) {
+        return count;
+    }
+
+    for (const importTransaction of props.importTransactions) {
+        if (!importTransaction.valid && importTransaction.selected) {
+            count++;
+        }
+    }
+
+    return count;
+});
+
+const anyButNotAllTransactionSelected = computed<boolean>(() => !!props.importTransactions && selectedImportTransactionCount.value > 0 && selectedImportTransactionCount.value !== props.importTransactions.length);
+const allTransactionSelected = computed<boolean>(() => !!props.importTransactions && selectedImportTransactionCount.value === props.importTransactions.length);
+
+const allUsedCategoryNames = computed<string[]>(() => {
+    if (!props.importTransactions || props.importTransactions.length < 1) {
+        return [];
+    }
+
+    const categoryNames: Record<string, boolean> = {};
+
+    for (const transaction of props.importTransactions) {
+        if (transaction.actualCategoryName && transaction.actualCategoryName !== '') {
+            categoryNames[transaction.actualCategoryName] = true;
+        }
+    }
+
+    return objectFieldToArrayItem(categoryNames);
+});
+
+const allUsedAccountNames = computed<string[]>(() => {
+    if (!props.importTransactions || props.importTransactions.length < 1) {
+        return [];
+    }
+
+    const accountNames: Record<string, boolean> = {};
+
+    for (const transaction of props.importTransactions) {
+        if (transaction.actualSourceAccountName && transaction.actualSourceAccountName !== '') {
+            accountNames[transaction.actualSourceAccountName] = true;
+        }
+
+        if (transaction.actualDestinationAccountName && transaction.actualDestinationAccountName !== '') {
+            accountNames[transaction.actualDestinationAccountName] = true;
+        }
+    }
+
+    return objectFieldToArrayItem(accountNames);
+});
+
+const allUsedTagNames = computed<string[]>(() => {
+    if (!props.importTransactions || props.importTransactions.length < 1) {
+        return [];
+    }
+
+    const tagNames: Record<string, boolean> = {};
+
+    for (const transaction of props.importTransactions) {
+        if (!transaction.tagIds || !transaction.originalTagNames) {
+            continue;
+        }
+
+        for (const [tagId, tagIndex] of itemAndIndex(transaction.tagIds)) {
+            const originalTagName = transaction.originalTagNames[tagIndex] as string | undefined;
+
+            if (tagId && tagId !== '0' && allTagsMap.value[tagId] && allTagsMap.value[tagId].name) {
+                tagNames[allTagsMap.value[tagId].name] = true;
+            } else if (originalTagName) {
+                tagNames[originalTagName] = true;
+            }
+        }
+    }
+
+    return objectFieldToArrayItem(tagNames);
+});
+
+const allInvalidExpenseCategoryNames = computed<NameValue[]>(() => getCurrentInvalidCategoryNames(TransactionType.Expense));
+const allInvalidIncomeCategoryNames = computed<NameValue[]>(() => getCurrentInvalidCategoryNames(TransactionType.Income));
+const allInvalidTransferCategoryNames = computed<NameValue[]>(() => getCurrentInvalidCategoryNames(TransactionType.Transfer));
+const allInvalidAccountNames = computed<NameValue[]>(() => getCurrentInvalidAccountNames());
+const allInvalidTransactionTagNames = computed<NameValue[]>(() => getCurrentInvalidTagNames());
+
+const displayFilterCustomDateRange = computed<string>(() => {
+    if (filters.value.minDatetime === null || filters.value.maxDatetime === null) {
+        return '';
+    }
+
+    const minDisplayTime = formatUnixTimeToLongDateTime(filters.value.minDatetime);
+    const maxDisplayTime = formatUnixTimeToLongDateTime(filters.value.maxDatetime);
+
+    return `${minDisplayTime} - ${maxDisplayTime}`
+});
+
+function getDisplayCount(count: number): string {
+    return numeralSystem.value.formatNumber(count);
+}
+
+function getTablePageOptions(linesCount?: number): NameNumeralValue[] {
+    const pageOptions: NameNumeralValue[] = [];
+
+    if (!linesCount || linesCount < 1) {
+        pageOptions.push({ value: -1, name: tt('All') });
+        return pageOptions;
+    }
+
+    for (const count of [ 5, 10, 15, 20, 25, 30, 50 ]) {
+        if (linesCount < count) {
+            break;
+        }
+
+        pageOptions.push({ value: count, name: getDisplayCount(count) });
+    }
+
+    pageOptions.push({ value: -1, name: tt('All') });
+
+    return pageOptions;
+}
+
+function isTransactionDisplayed(transaction: ImportTransaction): boolean {
+    if (isNumber(filters.value.minDatetime) && isNumber(filters.value.maxDatetime) && (transaction.time < filters.value.minDatetime || transaction.time > filters.value.maxDatetime)) {
+        return false;
+    }
+
+    if (isNumber(filters.value.transactionType) && transaction.type !== filters.value.transactionType) {
+        return false;
+    }
+
+    if (isString(filters.value.category)) {
+        if (filters.value.category === '' && transaction.actualCategoryName !== '') {
+            return false;
+        } else if (filters.value.category !== '' && transaction.actualCategoryName !== filters.value.category) {
+            return false;
+        }
+    } else if (filters.value.category === undefined) {
+        if (transaction.type !== TransactionType.ModifyBalance && transaction.categoryId && transaction.categoryId !== '0') {
+            return false;
+        }
+    }
+
+    if (isString(filters.value.account)) {
+        if (filters.value.account === '' && (transaction.actualSourceAccountName !== '' || transaction.actualDestinationAccountName !== '')) {
+            return false;
+        } else if (filters.value.account !== '' && transaction.actualSourceAccountName !== filters.value.account && transaction.actualDestinationAccountName !== filters.value.account) {
+            return false;
+        }
+    } else if (filters.value.account === undefined) {
+        if (transaction.type !== TransactionType.Transfer && transaction.sourceAccountId && transaction.sourceAccountId !== '0') {
+            return false;
+        } else if (transaction.type === TransactionType.Transfer && transaction.sourceAccountId && transaction.sourceAccountId !== '0' && transaction.destinationAccountId && transaction.destinationAccountId !== '0') {
+            return false;
+        }
+    }
+
+    if (isString(filters.value.tag)) {
+        if (filters.value.tag === '' && transaction.tagIds && transaction.tagIds.length) {
+            return false;
+        } else if (filters.value.tag !== '') {
+            let hasTagName = false;
+
+            if (transaction.tagIds && transaction.tagIds.length) {
+                for (const [tagId, tagIndex] of itemAndIndex(transaction.tagIds)) {
+                    let tagName: string = transaction.originalTagNames ? (transaction.originalTagNames[tagIndex] ?? '') : '';
+
+                    if (tagId && tagId !== '0' && allTagsMap.value[tagId] && allTagsMap.value[tagId].name) {
+                        tagName = allTagsMap.value[tagId].name;
+                    }
+
+                    if (tagName === filters.value.tag) {
+                        hasTagName = true;
+                        break;
+                    }
+                }
+            }
+
+            if (!hasTagName) {
+                return false;
+            }
+        }
+    } else if (filters.value.tag === undefined) {
+        if (transaction.tagIds && transaction.tagIds.length) {
+            let hasInvalidTag = false;
+
+            for (const tagId of transaction.tagIds) {
+                if (!tagId || tagId === '0') {
+                    hasInvalidTag = true;
+                    break;
+                }
+            }
+
+            if (!hasInvalidTag) {
+                return false;
+            }
+        } else {
+            return false;
+        }
+    }
+
+    if (isString(filters.value.description)) {
+        if (filters.value.description === '' && transaction.comment !== '') {
+            return false;
+        } else if (filters.value.description !== '' && transaction.comment.indexOf(filters.value.description) < 0) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+function isTagValid(tagIds: string[], tagIndex: number): boolean {
+    if (!tagIds || !tagIds[tagIndex]) {
+        return false;
+    }
+
+    if (tagIds[tagIndex] === '0') {
+        return false;
+    }
+
+    const tagId = tagIds[tagIndex];
+    return !!allTagsMap.value[tagId];
+}
+
+function getDisplayDateTime(transaction: ImportTransaction): string {
+    return formatUnixTimeToLongDateTime(transaction.time, transaction.utcOffset, currentTimezoneOffsetMinutes.value);
+}
+
+function getDisplayTimezone(transaction: ImportTransaction): string {
+    return `UTC${getUtcOffsetByUtcOffsetMinutes(transaction.utcOffset)}`;
+}
+
+function getDisplayCurrency(value: number, currencyCode: string): string {
+    return formatAmountToLocalizedNumeralsWithCurrency(value, currencyCode);
+}
+
+function getTransactionDisplayAmount(transaction: ImportTransaction): string {
+    let currency = transaction.originalSourceAccountCurrency || defaultCurrency.value;
+
+    if (transaction.sourceAccountId && transaction.sourceAccountId !== '0' && allAccountsMap.value[transaction.sourceAccountId]) {
+        currency = allAccountsMap.value[transaction.sourceAccountId].currency;
+    }
+
+    return getDisplayCurrency(transaction.sourceAmount, currency);
+}
+
+function getTransactionDisplayDestinationAmount(transaction: ImportTransaction): string {
+    if (transaction.type !== TransactionType.Transfer) {
+        return '-';
+    }
+
+    let currency = transaction.originalDestinationAccountCurrency || defaultCurrency.value;
+
+    if (transaction.destinationAccountId && transaction.destinationAccountId !== '0' && allAccountsMap.value[transaction.destinationAccountId]) {
+        currency = allAccountsMap.value[transaction.destinationAccountId].currency;
+    }
+
+    return getDisplayCurrency(transaction.destinationAmount, currency);
+}
+
+function getSourceAccountTitle(transaction: ImportTransaction): string {
+    if (transaction.type === TransactionType.Expense || transaction.type === TransactionType.Income) {
+        return tt('Account');
+    } else if (transaction.type === TransactionType.Transfer) {
+        return tt('Source Account');
+    } else {
+        return tt('Account');
+    }
+}
+
+function getSourceAccountDisplayName(transaction: ImportTransaction): string {
+    if (transaction.sourceAccountId) {
+        return Account.findAccountNameById(allAccounts.value, transaction.sourceAccountId) || '';
+    } else {
+        return tt('None');
+    }
+}
+
+function getDestinationAccountDisplayName(transaction: ImportTransaction): string {
+    if (transaction.destinationAccountId) {
+        return Account.findAccountNameById(allAccounts.value, transaction.destinationAccountId) || '';
+    } else {
+        return tt('None');
+    }
+}
+
+function getCurrentInvalidCategoryNames(transactionType: TransactionType): NameValue[] {
+    const invalidCategoryNames: Record<string, boolean> = {};
+    const invalidCategories: NameValue[] = [];
+
+    if (!props.importTransactions || props.importTransactions.length < 1) {
+        return invalidCategories;
+    }
+
+    for (const importTransaction of props.importTransactions) {
+        const categoryId = importTransaction.categoryId;
+
+        if (importTransaction.type === transactionType && (!categoryId || categoryId === '0' || !allCategoriesMap.value[categoryId])) {
+            invalidCategoryNames[importTransaction.originalCategoryName] = true;
+        }
+    }
+
+    for (const name of keys(invalidCategoryNames)) {
+        invalidCategories.push({
+            name: name || tt('(Empty)'),
+            value: name
+        });
+    }
+
+    return invalidCategories;
+}
+
+function getCurrentInvalidAccountNames(): NameValue[] {
+    const invalidAccountNames: Record<string, boolean> = {};
+    const invalidAccounts: NameValue[] = [];
+
+    if (!props.importTransactions || props.importTransactions.length < 1) {
+        return invalidAccounts;
+    }
+
+    for (const importTransaction of props.importTransactions) {
+        const sourceAccountId = importTransaction.sourceAccountId;
+        const destinationAccountId = importTransaction.destinationAccountId;
+
+        if (!sourceAccountId || sourceAccountId === '0' || !allAccountsMap.value[sourceAccountId]) {
+            invalidAccountNames[importTransaction.originalSourceAccountName] = true;
+        }
+
+        if (importTransaction.type === TransactionType.Transfer && isString(importTransaction.originalDestinationAccountName) && (!destinationAccountId || destinationAccountId === '0' || !allAccountsMap.value[destinationAccountId])) {
+            invalidAccountNames[importTransaction.originalDestinationAccountName] = true;
+        }
+    }
+
+    for (const name of keys(invalidAccountNames)) {
+        invalidAccounts.push({
+            name: name || tt('(Empty)'),
+            value: name
+        });
+    }
+
+    return invalidAccounts;
+}
+
+function getCurrentInvalidTagNames(): NameValue[] {
+    const invalidTagNames: Record<string, boolean> = {};
+    const invalidTags: NameValue[] = [];
+
+    if (!props.importTransactions || props.importTransactions.length < 1) {
+        return invalidTags;
+    }
+
+    for (const importTransaction of props.importTransactions) {
+        if (!importTransaction.tagIds || !importTransaction.originalTagNames) {
+            continue;
+        }
+
+        for (const [tagId, tagIndex] of itemAndIndex(importTransaction.tagIds)) {
+            const originalTagName = importTransaction.originalTagNames[tagIndex] as string | undefined;
+
+            if (!originalTagName) {
+                continue;
+            }
+
+            if (!tagId || tagId === '0' || !allTagsMap.value[tagId]) {
+                invalidTagNames[originalTagName] = true;
+            }
+        }
+    }
+
+    for (const name of keys(invalidTagNames)) {
+        invalidTags.push({
+            name: name || tt('(Empty)'),
+            value: name
+        });
+    }
+
+    return invalidTags;
+}
+
+function importTransactionsFilter(value: string, query: string, item?: { value: unknown, raw: ImportTransaction }): boolean {
+    if (!item || !item.raw) {
+        return false;
+    }
+
+    return isTransactionDisplayed(item.raw);
+}
+
+function selectAllValid(): void {
+    if (!props.importTransactions || props.importTransactions.length < 1) {
+        return;
+    }
+
+    for (const importTransaction of props.importTransactions) {
+        if (importTransaction.valid && isTransactionDisplayed(importTransaction)) {
+            importTransaction.selected = true;
+        }
+    }
+}
+
+function selectAllInvalid(): void {
+    if (!props.importTransactions || props.importTransactions.length < 1) {
+        return;
+    }
+
+    for (const importTransaction of props.importTransactions) {
+        if (!importTransaction.valid && isTransactionDisplayed(importTransaction)) {
+            importTransaction.selected = true;
+        }
+    }
+}
+
+function selectAll(): void {
+    if (!props.importTransactions || props.importTransactions.length < 1) {
+        return;
+    }
+
+    for (const importTransaction of props.importTransactions) {
+        if (isTransactionDisplayed(importTransaction)) {
+            importTransaction.selected = true;
+        }
+    }
+}
+
+function selectNone(): void {
+    if (!props.importTransactions || props.importTransactions.length < 1) {
+        return;
+    }
+
+    for (const importTransaction of props.importTransactions) {
+        if (isTransactionDisplayed(importTransaction)) {
+            importTransaction.selected = false;
+        }
+    }
+}
+
+function selectInvert(): void {
+    if (!props.importTransactions || props.importTransactions.length < 1) {
+        return;
+    }
+
+    for (const importTransaction of props.importTransactions) {
+        if (isTransactionDisplayed(importTransaction)) {
+            importTransaction.selected = !importTransaction.selected;
+        }
+    }
+}
+
+function selectAllInThisPage(): void {
+    for (const importTransaction of currentPageTransactions.value) {
+        importTransaction.selected = true;
+    }
+}
+
+function selectNoneInThisPage(): void {
+    for (const importTransaction of currentPageTransactions.value) {
+        importTransaction.selected = false;
+    }
+}
+
+function selectInvertInThisPage(): void {
+    for (const importTransaction of currentPageTransactions.value) {
+        importTransaction.selected = !importTransaction.selected;
+    }
+}
+
+function editTransaction(transaction: ImportTransaction): void {
+    if (editingTransaction.value) {
+        editingTransaction.value.tagIds = editingTags.value;
+        updateTransactionData(editingTransaction.value);
+    }
+
+    if (editingTransaction.value === transaction) {
+        editingTags.value = [];
+        editingTransaction.value = null;
+    } else {
+        editingTransaction.value = transaction;
+        editingTags.value = editingTransaction.value.tagIds;
+    }
+}
+
+function updateTransactionData(transaction: ImportTransaction): void {
+    transaction.valid = transaction.isTransactionValid();
+
+    if (transaction.categoryId && allCategoriesMap.value[transaction.categoryId]) {
+        transaction.actualCategoryName = allCategoriesMap.value[transaction.categoryId].name;
+    }
+
+    if (transaction.sourceAccountId && allAccountsMap.value[transaction.sourceAccountId]) {
+        transaction.actualSourceAccountName = allAccountsMap.value[transaction.sourceAccountId].name;
+    }
+
+    if (transaction.destinationAccountId && allAccountsMap.value[transaction.destinationAccountId]) {
+        transaction.actualDestinationAccountName = allAccountsMap.value[transaction.destinationAccountId].name;
+    }
+}
+
+function showBatchReplaceDialog(type: BatchReplaceDialogDataType): void {
+    if (isEditing.value) {
+        return;
+    }
+
+    batchReplaceDialog.value?.open({
+        mode: 'batchReplace',
+        type: type
+    }).then(result => {
+        if (!result || !result.targetItem) {
+            return;
+        }
+
+        let updatedCount = 0;
+
+        if (props.importTransactions) {
+            for (const importTransaction of props.importTransactions) {
+                if (!importTransaction.selected) {
+                    continue;
+                }
+
+                let updated = false;
+
+                if (type === 'expenseCategory') {
+                    if (importTransaction.type === TransactionType.Expense) {
+                        importTransaction.categoryId = result.targetItem;
+                        updated = true;
+                    }
+                } else if (type === 'incomeCategory') {
+                    if (importTransaction.type === TransactionType.Income) {
+                        importTransaction.categoryId = result.targetItem;
+                        updated = true;
+                    }
+                } else if (type === 'transferCategory') {
+                    if (importTransaction.type === TransactionType.Transfer) {
+                        importTransaction.categoryId = result.targetItem;
+                        updated = true;
+                    }
+                } else if (type === 'account') {
+                    importTransaction.sourceAccountId = result.targetItem;
+                    updated = true;
+                } else if (type === 'destinationAccount') {
+                    if (importTransaction.type === TransactionType.Transfer) {
+                        importTransaction.destinationAccountId = result.targetItem;
+                        updated = true;
+                    }
+                }
+
+                if (updated) {
+                    updatedCount++;
+                    updateTransactionData(importTransaction);
+                }
+            }
+        }
+
+        if (updatedCount > 0) {
+            snackbar.value?.showMessage('format.misc.youHaveUpdatedTransactions', {
+                count: getDisplayCount(updatedCount)
+            });
+        }
+    });
+}
+
+function showReplaceInvalidItemDialog(type: BatchReplaceDialogDataType, invalidItems: NameValue[]): void {
+    if (isEditing.value) {
+        return;
+    }
+
+    batchReplaceDialog.value?.open({
+        mode: 'replaceInvalidItems',
+        type: type,
+        invalidItems: invalidItems
+    }).then(result => {
+        if (!result || (!result.sourceItem && result.sourceItem !== '') || !result.targetItem) {
+            return;
+        }
+
+        let updatedCount = 0;
+
+        if (props.importTransactions) {
+            for (const importTransaction of props.importTransactions) {
+                if (importTransaction.valid) {
+                    continue;
+                }
+
+                let updated = false;
+
+                if (type === 'expenseCategory' || type === 'incomeCategory' || type === 'transferCategory') {
+                    const categoryId = importTransaction.categoryId;
+                    const originalCategoryName = importTransaction.originalCategoryName;
+
+                    if (importTransaction.type !== TransactionType.ModifyBalance && originalCategoryName === result.sourceItem && (!categoryId || categoryId === '0' || !allCategoriesMap.value[categoryId])) {
+                        if (type === 'expenseCategory' && importTransaction.type === TransactionType.Expense) {
+                            importTransaction.categoryId = result.targetItem;
+                            updated = true;
+                        } else if (type === 'incomeCategory' && importTransaction.type === TransactionType.Income) {
+                            importTransaction.categoryId = result.targetItem;
+                            updated = true;
+                        } else if (type === 'transferCategory' && importTransaction.type === TransactionType.Transfer) {
+                            importTransaction.categoryId = result.targetItem;
+                            updated = true;
+                        }
+                    }
+                } else if (type === 'account') {
+                    const sourceAccountId = importTransaction.sourceAccountId;
+                    const originalSourceAccountName = importTransaction.originalSourceAccountName;
+                    const destinationAccountId = importTransaction.destinationAccountId;
+                    const originalDestinationAccountName = importTransaction.originalDestinationAccountName;
+
+                    if (originalSourceAccountName === result.sourceItem && (!sourceAccountId || sourceAccountId === '0' || !allAccountsMap.value[sourceAccountId])) {
+                        importTransaction.sourceAccountId = result.targetItem;
+                        updated = true;
+                    }
+
+                    if (importTransaction.type === TransactionType.Transfer && originalDestinationAccountName === result.sourceItem && (!destinationAccountId || destinationAccountId === '0' || !allAccountsMap.value[destinationAccountId])) {
+                        importTransaction.destinationAccountId = result.targetItem;
+                        updated = true;
+                    }
+                } else if (type === 'tag' && importTransaction.tagIds) {
+                    for (let tagIndex = 0; tagIndex < importTransaction.tagIds.length; tagIndex++) {
+                        const tagId = importTransaction.tagIds[tagIndex] as string;
+                        const originalTagName = importTransaction.originalTagNames ? (importTransaction.originalTagNames[tagIndex] ?? '') : '';
+
+                        if (originalTagName === result.sourceItem && (!tagId || tagId === '0' || !allTagsMap.value[tagId])) {
+                            importTransaction.tagIds[tagIndex] = result.targetItem;
+                            updated = true;
+                        }
+                    }
+                }
+
+                if (updated) {
+                    updatedCount++;
+                    updateTransactionData(importTransaction);
+                }
+            }
+        }
+
+        if (updatedCount > 0) {
+            snackbar.value?.showMessage('format.misc.youHaveUpdatedTransactions', {
+                count: getDisplayCount(updatedCount)
+            });
+        }
+    });
+}
+
+function showReplaceAllTypesDialog(): void {
+    if (isEditing.value) {
+        return;
+    }
+
+    batchReplaceAllTypesDialog.value?.open({
+        expenseCategoryNames: allInvalidExpenseCategoryNames.value,
+        incomeCategoryNames: allInvalidIncomeCategoryNames.value,
+        transferCategoryNames: allInvalidTransferCategoryNames.value,
+        accountNames: allInvalidAccountNames.value,
+        tagNames: allInvalidTransactionTagNames.value
+    }).then(result => {
+        if (!result || !result.rules) {
+            return;
+        }
+
+        let updatedCount = 0;
+
+        if (props.importTransactions) {
+            for (const importTransaction of props.importTransactions) {
+                let updated = false;
+
+                for (const rule of result.rules) {
+                    if (!rule || !rule.dataType || !rule.sourceValue || !rule.targetId) {
+                        continue;
+                    }
+
+                    if (rule.dataType === 'expenseCategory' || rule.dataType === 'incomeCategory' || rule.dataType === 'transferCategory') {
+                        if (importTransaction.type !== TransactionType.ModifyBalance && importTransaction.originalCategoryName === rule.sourceValue) {
+                            importTransaction.categoryId = rule.targetId;
+                            updated = true;
+                        }
+                    } else if (rule.dataType === 'account') {
+                        if (importTransaction.originalSourceAccountName === rule.sourceValue) {
+                            importTransaction.sourceAccountId = rule.targetId;
+                            updated = true;
+                        }
+
+                        if (importTransaction.type === TransactionType.Transfer && importTransaction.originalDestinationAccountName === rule.sourceValue) {
+                            importTransaction.destinationAccountId = rule.targetId;
+                            updated = true;
+                        }
+                    } else if (rule.dataType === 'tag' && importTransaction.tagIds) {
+                        for (let tagIndex = 0; tagIndex < importTransaction.tagIds.length; tagIndex++) {
+                            const originalTagName = importTransaction.originalTagNames ? (importTransaction.originalTagNames[tagIndex] ?? '') : '';
+
+                            if (originalTagName === rule.sourceValue) {
+                                importTransaction.tagIds[tagIndex] = rule.targetId;
+                                updated = true;
+                            }
+                        }
+                    }
+                }
+
+                if (updated) {
+                    updatedCount++;
+                    updateTransactionData(importTransaction);
+                }
+            }
+        }
+
+        if (updatedCount > 0) {
+            snackbar.value?.showMessage('format.misc.youHaveUpdatedTransactions', {
+                count: getDisplayCount(updatedCount)
+            });
+        }
+    });
+}
+
+function showBatchCreateInvalidItemDialog(type: BatchCreateDialogDataType, invalidItems: NameValue[]): void {
+    if (isEditing.value) {
+        return;
+    }
+
+    batchCreateDialog.value?.open({
+        type: type,
+        invalidItems: invalidItems
+    }).then(result => {
+        if (!result || !result.sourceTargetMap) {
+            return;
+        }
+
+        let updatedCount = 0;
+
+        if (props.importTransactions) {
+            const sourceTargetMap: Record<string, string> = result.sourceTargetMap;
+
+            for (const importTransaction of props.importTransactions) {
+                if (importTransaction.valid) {
+                    continue;
+                }
+
+                let updated = false;
+
+                if (type === 'expenseCategory' || type === 'incomeCategory' || type === 'transferCategory') {
+                    const categoryId = importTransaction.categoryId;
+                    const originalCategoryName = importTransaction.originalCategoryName;
+                    const targetItem = sourceTargetMap[originalCategoryName];
+
+                    if (importTransaction.type !== TransactionType.ModifyBalance && targetItem && (!categoryId || categoryId === '0' || !allCategoriesMap.value[categoryId])) {
+                        if (type === 'expenseCategory' && importTransaction.type === TransactionType.Expense) {
+                            importTransaction.categoryId = targetItem;
+                            updated = true;
+                        } else if (type === 'incomeCategory' && importTransaction.type === TransactionType.Income) {
+                            importTransaction.categoryId = targetItem;
+                            updated = true;
+                        } else if (type === 'transferCategory' && importTransaction.type === TransactionType.Transfer) {
+                            importTransaction.categoryId = targetItem;
+                            updated = true;
+                        }
+                    }
+                } else if (type === 'tag' && importTransaction.tagIds) {
+                    for (let tagIndex = 0; tagIndex < importTransaction.tagIds.length; tagIndex++) {
+                        const tagId = importTransaction.tagIds[tagIndex] as string;
+                        const originalTagName = importTransaction.originalTagNames ? (importTransaction.originalTagNames[tagIndex] ?? '') : '';
+                        const targetItem = sourceTargetMap[originalTagName];
+
+                        if (targetItem && (!tagId || tagId === '0' || !allTagsMap.value[tagId])) {
+                            importTransaction.tagIds[tagIndex] = targetItem;
+                            updated = true;
+                        }
+                    }
+                }
+
+                if (updated) {
+                    updatedCount++;
+                    updateTransactionData(importTransaction);
+                }
+            }
+        }
+
+        if (updatedCount > 0) {
+            snackbar.value?.showMessage('format.misc.youHaveUpdatedTransactions', {
+                count: getDisplayCount(updatedCount)
+            });
+        }
+    });
+}
+
+function convertTransactionType(fromType: TransactionType, toType: TransactionType): void {
+    if (!props.importTransactions || props.importTransactions.length < 1) {
+        return;
+    }
+
+    const categoryType = transactionTypeToCategoryType(toType);
+
+    if (!categoryType) {
+        return;
+    }
+
+    const categoryMapByName: Record<string, TransactionCategory> = getSecondaryTransactionMapByName(allCategories.value[categoryType]);
+
+    for (const importTransaction of props.importTransactions) {
+        if (!importTransaction.selected || importTransaction.type !== fromType) {
+            continue;
+        }
+
+        importTransaction.type = toType;
+        importTransaction.categoryId = categoryMapByName[importTransaction.originalCategoryName]?.id || '0';
+
+        if (importTransaction.type === TransactionType.Transfer) {
+            importTransaction.destinationAccountId = allAccountsMapByName.value[importTransaction.originalDestinationAccountName || '']?.id || '0';
+            importTransaction.destinationAmount = importTransaction.sourceAmount;
+        } else {
+            if (fromType === TransactionType.Transfer && toType === TransactionType.Income) {
+                importTransaction.sourceAccountId = importTransaction.destinationAccountId;
+                importTransaction.sourceAmount = importTransaction.destinationAmount;
+            }
+
+            importTransaction.destinationAccountId = '0';
+            importTransaction.destinationAmount = 0;
+        }
+
+        updateTransactionData(importTransaction);
+    }
+}
+
+function changeCustomDateFilter(minTime: number, maxTime: number): void {
+    filters.value.minDatetime = minTime;
+    filters.value.maxDatetime = maxTime;
+    showCustomDateRangeDialog.value = false;
+}
+
+function onShowDateRangeError(message: string): void {
+    snackbar.value?.showError(message);
+}
+
+function reset(): void {
+    editingTransaction.value = null;
+    editingTags.value = [];
+    filters.value.minDatetime = null;
+    filters.value.maxDatetime = null;
+    filters.value.transactionType = null;
+    filters.value.category = null;
+    filters.value.account = null;
+    filters.value.tag = null;
+    filters.value.description = null;
+    currentPage.value = 1;
+    countPerPage.value = 10;
+}
+
+function setCountPerPage(count: number): void {
+    countPerPage.value = count;
+}
+
+defineExpose({
+    filterMenus,
+    toolMenus,
+    isEditing,
+    canImport,
+    reset,
+    setCountPerPage
+});
+</script>
+
+<style>
+.import-transaction-table .v-autocomplete.v-input.v-input--density-compact:not(.v-textarea) .v-field__input,
+.import-transaction-table .v-select.v-input.v-input--density-compact:not(.v-textarea) .v-field__input {
+    min-height: inherit;
+    padding-top: 4px;
+}
+
+.import-transaction-table .v-chip.transaction-tag {
+    margin-inline-end: 4px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
+
+.import-transaction-table .v-chip.transaction-tag > .v-chip__content {
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+</style>
diff --git a/src/views/desktop/transactions/import/tabs/ImportTransactionDefineColumnTab.vue b/src/views/desktop/transactions/import/tabs/ImportTransactionDefineColumnTab.vue
new file mode 100644
index 00000000..6f6e2f2f
--- /dev/null
+++ b/src/views/desktop/transactions/import/tabs/ImportTransactionDefineColumnTab.vue
@@ -0,0 +1,588 @@
+<template>
+    <v-data-table
+        fixed-header
+        fixed-footer
+        density="compact"
+        item-value="index"
+        :class="{ 'import-transaction-table': true, 'disabled': !!disabled }"
+        :height="parsedFileLinesTableHeight"
+        :disable-sort="true"
+        :headers="parsedFileLinesHeaders"
+        :items="parsedFileLines"
+        :no-data-text="tt('No data to import')"
+        v-model:items-per-page="countPerPage"
+        v-model:page="currentPage"
+    >
+        <template #headers="{ columns }">
+            <tr>
+                <th class="text-no-wrap" :key="column.key ?? undefined" v-for="column in columns">
+                    <span v-if="!column.key || column.key === 'index'">{{ column.title }}</span>
+                    <div class="py-1" v-if="column.key && column.key !== 'index'">
+                        <span>{{ getParseDataMappedColumnDisplayName(parseInt(column.key)) }}</span>
+                        <br/>
+                        <span>({{ column.title }})</span>
+                        <v-menu activator="parent" location="bottom" max-height="500">
+                            <v-list>
+                                <v-list-item :key="columnType.type"
+                                             :append-icon="parsedFileDataColumnMapping.dataColumnMapping[columnType.type] === parseInt(column.key) ? mdiCheck : undefined"
+                                             v-for="columnType in allImportTransactionColumnTypes"
+                                             @click="parsedFileDataColumnMapping.toggleDataMappingColumn(parseInt(column.key), columnType.type)">
+                                    <v-list-item-title class="cursor-pointer">
+                                        {{ columnType.displayName }}
+                                    </v-list-item-title>
+                                </v-list-item>
+                            </v-list>
+                        </v-menu>
+                    </div>
+                </th>
+            </tr>
+        </template>
+        <template #bottom>
+            <div class="title-and-toolbar d-flex align-center text-no-wrap mt-2" v-if="parsedFileData">
+                <v-btn color="secondary" density="compact" variant="outlined"
+                       :append-icon="parsedFileDataColumnMapping.includeHeader ? mdiCheck : mdiClose"
+                       @click="parsedFileDataColumnMapping.toggleIncludeHeader()">{{ tt('Include Header Line') }}</v-btn>
+                <v-btn class="ms-2" color="secondary" density="compact" variant="outlined"
+                       :disabled="!parsedFileDataColumnMapping || !parsedFileDataColumnMapping.isColumnMappingSet(ImportTransactionColumnType.TransactionType) || !parsedFileAllTransactionTypes">
+                    <span>{{ tt('Transaction Type Mapping') }}</span>
+                    <span class="ms-1" v-if="parsedFileDataColumnMapping && parsedFileDataColumnMapping.isColumnMappingSet(ImportTransactionColumnType.TransactionType) && parsedFileAllTransactionTypes">({{ getObjectOwnFieldCount(parsedFileValidMappedTransactionTypes) || tt('None') }})</span>
+                    <v-menu eager activator="parent" location="bottom" max-height="500"
+                            :close-on-content-click="false">
+                        <v-list class="pa-0">
+                            <v-list-item class="pa-0">
+                                <v-table class="transaction-types-popup-menu">
+                                    <tbody>
+                                    <tr :key="typeName"
+                                        v-for="typeName in parsedFileAllTransactionTypes">
+                                        <td>{{ typeName }}</td>
+                                        <td>
+                                            <v-btn-toggle class="transaction-types-toggle" density="compact" variant="outlined"
+                                                          mandatory="force" divided
+                                                          v-model="parsedFileDataColumnMapping.transactionTypeMapping[typeName]">
+                                                <v-btn :value="undefined">{{ tt('None') }}</v-btn>
+                                                <v-btn :value="TransactionType.ModifyBalance">{{ tt('Modify Balance') }}</v-btn>
+                                                <v-btn :value="TransactionType.Income">{{ tt('Income') }}</v-btn>
+                                                <v-btn :value="TransactionType.Expense">{{ tt('Expense') }}</v-btn>
+                                                <v-btn :value="TransactionType.Transfer">{{ tt('Transfer') }}</v-btn>
+                                            </v-btn-toggle>
+                                        </td>
+                                    </tr>
+                                    </tbody>
+                                </v-table>
+                            </v-list-item>
+                        </v-list>
+                    </v-menu>
+                </v-btn>
+                <v-btn class="ms-2" color="secondary" density="compact" variant="outlined"
+                       :disabled="!parsedFileDataColumnMapping || !parsedFileDataColumnMapping.isColumnMappingSet(ImportTransactionColumnType.TransactionTime)">
+                    <span>{{ tt('Time Format') }}</span>
+                    <span class="ms-1" v-if="parsedFileDataColumnMapping && parsedFileDataColumnMapping.isColumnMappingSet(ImportTransactionColumnType.TransactionTime)">({{ parsedFileDataColumnMapping.timeFormat || parsedFileAutoDetectedTimeFormat || tt('Unknown') }})</span>
+                    <v-menu eager activator="parent" location="bottom" max-height="500">
+                        <v-list>
+                            <v-list-item key="auto"
+                                         :append-icon="parsedFileDataColumnMapping.timeFormat === '' ? mdiCheck : undefined"
+                                         @click="parsedFileDataColumnMapping.timeFormat = ''">
+                                <v-list-item-title class="cursor-pointer">
+                                    <span>{{ tt('Auto detect') }}</span>
+                                    <span class="ms-1" v-if="parsedFileAutoDetectedTimeFormat">({{ parsedFileAutoDetectedTimeFormat }})</span>
+                                    <span class="ms-1" v-if="!parsedFileAutoDetectedTimeFormat">({{ tt('Unknown') }})</span>
+                                </v-list-item-title>
+                            </v-list-item>
+                            <v-list-item :key="dateTimeFormat.format"
+                                         :append-icon="parsedFileDataColumnMapping.timeFormat === dateTimeFormat.format ? mdiCheck : undefined"
+                                         v-for="dateTimeFormat in KnownDateTimeFormat.values()"
+                                         @click="parsedFileDataColumnMapping.timeFormat = dateTimeFormat.format">
+                                <v-list-item-title class="cursor-pointer">
+                                    {{ dateTimeFormat.format }}
+                                </v-list-item-title>
+                            </v-list-item>
+                        </v-list>
+                    </v-menu>
+                </v-btn>
+                <v-btn class="ms-2" color="secondary" density="compact" variant="outlined"
+                       v-if="parsedFileDataColumnMapping && parsedFileDataColumnMapping.isColumnMappingSet(ImportTransactionColumnType.TransactionTimezone)">
+                    <span>{{ tt('Timezone Format') }}</span>
+                    <span class="ms-1" v-if="parsedFileDataColumnMapping && parsedFileDataColumnMapping.isColumnMappingSet(ImportTransactionColumnType.TransactionTimezone)">({{ KnownDateTimezoneFormat.valueOf(parsedFileDataColumnMapping.timezoneFormat || parsedFileAutoDetectedTimezoneFormat || '')?.name || tt('Unknown') }})</span>
+                    <v-menu eager activator="parent" location="bottom" max-height="500">
+                        <v-list>
+                            <v-list-item key="auto"
+                                         :append-icon="parsedFileDataColumnMapping.timezoneFormat === '' ? mdiCheck : undefined"
+                                         @click="parsedFileDataColumnMapping.timezoneFormat = ''">
+                                <v-list-item-title class="cursor-pointer">
+                                    <span>{{ tt('Auto detect') }}</span>
+                                    <span class="ms-1" v-if="parsedFileAutoDetectedTimezoneFormat && KnownDateTimezoneFormat.valueOf(parsedFileAutoDetectedTimezoneFormat || '')">({{ KnownDateTimezoneFormat.valueOf(parsedFileAutoDetectedTimezoneFormat || '')?.name }})</span>
+                                    <span class="ms-1" v-if="!parsedFileAutoDetectedTimezoneFormat || !KnownDateTimezoneFormat.valueOf(parsedFileAutoDetectedTimezoneFormat || '')">({{ tt('Unknown') }})</span>
+                                </v-list-item-title>
+                            </v-list-item>
+                            <v-list-item :key="timezoneFormat.value"
+                                         :append-icon="parsedFileDataColumnMapping.timezoneFormat === timezoneFormat.value ? mdiCheck : undefined"
+                                         v-for="timezoneFormat in KnownDateTimezoneFormat.values()"
+                                         @click="parsedFileDataColumnMapping.timezoneFormat = timezoneFormat.value">
+                                <v-list-item-title class="cursor-pointer">
+                                    {{ timezoneFormat.name }}
+                                </v-list-item-title>
+                            </v-list-item>
+                        </v-list>
+                    </v-menu>
+                </v-btn>
+                <v-btn class="ms-2" color="secondary" density="compact" variant="outlined"
+                       :disabled="!parsedFileDataColumnMapping || !parsedFileDataColumnMapping.isColumnMappingSet(ImportTransactionColumnType.Amount)">
+                    <span>{{ tt('Amount Format') }}</span>
+                    <span class="ms-1" v-if="parsedFileDataColumnMapping && parsedFileDataColumnMapping.isColumnMappingSet(ImportTransactionColumnType.Amount)">({{ KnownAmountFormat.valueOf(parsedFileDataColumnMapping.amountFormat || parsedFileAutoDetectedAmountFormat || '')?.format || tt('Unknown') }})</span>
+                    <v-menu eager activator="parent" location="bottom" max-height="500">
+                        <v-list>
+                            <v-list-item key="auto"
+                                         :append-icon="parsedFileDataColumnMapping.amountFormat === '' ? mdiCheck : undefined"
+                                         @click="parsedFileDataColumnMapping.amountFormat = ''">
+                                <v-list-item-title class="cursor-pointer">
+                                    <span>{{ tt('Auto detect') }}</span>
+                                    <span class="ms-1" v-if="parsedFileAutoDetectedAmountFormat && KnownAmountFormat.valueOf(parsedFileAutoDetectedAmountFormat || '')">({{ KnownAmountFormat.valueOf(parsedFileAutoDetectedAmountFormat || '')?.format }})</span>
+                                    <span class="ms-1" v-if="!parsedFileAutoDetectedAmountFormat || !KnownAmountFormat.valueOf(parsedFileAutoDetectedAmountFormat || '')">({{ tt('Unknown') }})</span>
+                                </v-list-item-title>
+                            </v-list-item>
+                            <v-list-item :key="amountFormat.type"
+                                         :append-icon="parsedFileDataColumnMapping.amountFormat === amountFormat.type ? mdiCheck : undefined"
+                                         v-for="amountFormat in KnownAmountFormat.values()"
+                                         @click="parsedFileDataColumnMapping.amountFormat = amountFormat.type">
+                                <v-list-item-title class="cursor-pointer">
+                                    {{ amountFormat.format }}
+                                </v-list-item-title>
+                            </v-list-item>
+                        </v-list>
+                    </v-menu>
+                </v-btn>
+                <v-btn class="ms-2" color="secondary" density="compact" variant="outlined"
+                       v-if="parsedFileDataColumnMapping && parsedFileDataColumnMapping.isColumnMappingSet(ImportTransactionColumnType.GeographicLocation)">
+                    <span>{{ tt('Geographic Location Separator') }}</span>
+                    <span class="ms-1" v-if="parsedFileDataColumnMapping.geoLocationOrder">({{ parsedFileDataColumnMapping.formatGeoLocation(tt('Latitude'), tt('Longitude')) }})</span>
+                    <v-menu eager activator="parent" location="bottom" max-height="500"
+                            :close-on-content-click="false">
+                        <v-list class="pa-0">
+                            <v-list-item class="pa-0">
+                                <v-table class="transaction-types-popup-menu">
+                                    <tbody>
+                                    <tr :key="separator.value"
+                                        v-for="separator in allSeparators">
+                                        <td>{{ separator.name }} ({{separator.value}})</td>
+                                        <td>
+                                            <v-btn-toggle class="transaction-types-toggle" density="compact" variant="outlined"
+                                                          mandatory="force" divided
+                                                          v-model="parsedFileDataColumnMapping.geoLocationOrder"
+                                                          v-if="parsedFileDataColumnMapping.geoLocationSeparator === separator.value">
+                                                <v-btn value="latlon">{{ `${tt('Latitude')}${separator.value}${tt('Longitude')}` }}</v-btn>
+                                                <v-btn value="lonlat">{{ `${tt('Longitude')}${separator.value}${tt('Latitude')}` }}</v-btn>
+                                            </v-btn-toggle>
+                                            <v-btn-group class="transaction-types-toggle" density="compact" variant="outlined"
+                                                         divided v-if="parsedFileDataColumnMapping.geoLocationSeparator !== separator.value">
+                                                <v-btn @click="parsedFileDataColumnMapping.setGeoLocationFormat(separator.value, 'latlon')">{{ `${tt('Latitude')}${separator.value}${tt('Longitude')}` }}</v-btn>
+                                                <v-btn @click="parsedFileDataColumnMapping.setGeoLocationFormat(separator.value, 'lonlat')">{{ `${tt('Longitude')}${separator.value}${tt('Latitude')}` }}</v-btn>
+                                            </v-btn-group>
+                                        </td>
+                                    </tr>
+                                    </tbody>
+                                </v-table>
+                            </v-list-item>
+                        </v-list>
+                    </v-menu>
+                </v-btn>
+                <v-btn class="ms-2" color="secondary" density="compact" variant="outlined"
+                       v-if="parsedFileDataColumnMapping && parsedFileDataColumnMapping.isColumnMappingSet(ImportTransactionColumnType.Tags)">
+                    <span>{{ tt('Transaction Tags Separator') }}</span>
+                    <span class="ms-1" v-if="parsedFileDataColumnMapping.tagSeparator">({{ parsedFileDataColumnMapping.tagSeparator }})</span>
+                    <v-menu eager activator="parent" location="bottom" max-height="500">
+                        <v-list>
+                            <v-list-item :key="separator.value"
+                                         :append-icon="parsedFileDataColumnMapping.tagSeparator === separator.value ? mdiCheck : undefined"
+                                         v-for="separator in allSeparators"
+                                         @click="parsedFileDataColumnMapping.tagSeparator = separator.value">
+                                <v-list-item-title class="cursor-pointer">
+                                    {{ separator.name }} ({{separator.value}})
+                                </v-list-item-title>
+                            </v-list-item>
+                        </v-list>
+                    </v-menu>
+                </v-btn>
+                <v-spacer/>
+                <span>{{ tt('Lines Per Page') }}</span>
+                <v-select class="ms-2" density="compact" max-width="100"
+                          item-title="name"
+                          item-value="value"
+                          :disabled="!!disabled"
+                          :items="parsedFileLinesTablePageOptions"
+                          v-model="countPerPage"
+                />
+                <pagination-buttons density="compact"
+                                    :disabled="!!disabled"
+                                    :totalPageCount="Math.ceil((parsedFileLines ? parsedFileLines.length : 0) / countPerPage)"
+                                    v-model="currentPage"></pagination-buttons>
+            </div>
+        </template>
+    </v-data-table>
+
+    <snack-bar ref="snackbar" />
+</template>
+
+<script setup lang="ts">
+import SnackBar from '@/components/desktop/SnackBar.vue';
+import PaginationButtons from '@/components/desktop/PaginationButtons.vue';
+
+import { ref, computed, useTemplateRef } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { type NameValue, type NameNumeralValue, type TypeAndDisplayName, itemAndIndex, entries } from '@/core/base.ts';
+import { type NumeralSystem, KnownAmountFormat } from '@/core/numeral.ts';
+import { KnownDateTimeFormat } from '@/core/datetime.ts';
+import { KnownDateTimezoneFormat } from '@/core/timezone.ts';
+import { TransactionType } from '@/core/transaction.ts';
+import { ImportTransactionColumnType, ImportTransactionDataMapping } from '@/core/import_transaction.ts';
+import { KnownFileType } from '@/core/file.ts';
+
+import {
+    isNumber,
+    isObjectEmpty,
+    getObjectOwnFieldCount,
+    findDisplayNameByType
+} from '@/lib/common.ts';
+import {
+    openTextFileContent,
+    startDownloadFile
+} from '@/lib/ui/common.ts';
+import logger from '@/lib/logger.ts';
+
+import {
+    mdiCheck,
+    mdiClose,
+    mdiFolderOpenOutline,
+    mdiContentSaveOutline
+} from '@mdi/js';
+
+type SnackBarType = InstanceType<typeof SnackBar>;
+
+interface ImportTransactionDefineColumnResult {
+    includeHeader: boolean;
+    columnMapping: Record<number, number>;
+    transactionTypeMapping: Record<string, TransactionType>;
+    timeFormat: string | undefined;
+    timezoneFormat: string | undefined;
+    amountDecimalSeparator: string | undefined;
+    amountDigitGroupingSymbol: string | undefined;
+    geoLocationSeparator: string;
+    geoLocationOrder: string;
+    tagSeparator: string;
+}
+
+interface ImportTransactionDefineColumnMenu {
+    prependIcon: string;
+    title: string;
+    disabled?: boolean;
+    onClick: () => void;
+}
+
+const props = defineProps<{
+    parsedFileData?: string[][];
+    disabled?: boolean;
+}>();
+
+const {
+    tt,
+    getCurrentNumeralSystemType,
+    getAllImportTransactionColumnTypes
+} = useI18n();
+
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
+
+const currentPage = ref<number>(1);
+const countPerPage = ref<number>(10);
+const parsedFileDataColumnMapping = ref<ImportTransactionDataMapping>(ImportTransactionDataMapping.createEmpty());
+
+const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
+const allImportTransactionColumnTypes = computed<TypeAndDisplayName[]>(() => getAllImportTransactionColumnTypes());
+
+const menus = computed<ImportTransactionDefineColumnMenu[]>(() => [
+    {
+        prependIcon: mdiFolderOpenOutline,
+        title: tt('Load Data Mapping File'),
+        onClick: loadColumnMappingFile
+    },
+    {
+        prependIcon: mdiContentSaveOutline,
+        title: tt('Save Data Mapping File'),
+        onClick: saveColumnMappingFile
+    }
+]);
+
+const allSeparators = computed<NameValue[]>(() => {
+    const separators: NameValue[] = [
+        {
+            name: tt('Space'),
+            value: ' '
+        },
+        {
+            name: tt('Comma'),
+            value: ','
+        },
+        {
+            name: tt('Semicolon'),
+            value: ';'
+        },
+        {
+            name: tt('Tab'),
+            value: '\t'
+        },
+        {
+            name: tt('Vertical Bar'),
+            value: '|'
+        }
+    ];
+
+    return separators;
+});
+
+const parsedFileLinesTableHeight = computed<number | undefined>(() => {
+    if (countPerPage.value <= 10 || !parsedFileLines.value || parsedFileLines.value.length <= 10) {
+        return undefined;
+    } else {
+        return 400;
+    }
+});
+
+const parsedFileLinesHeaders = computed<object[]>(() => {
+    let maxColumnCount = 0;
+
+    if (props.parsedFileData) {
+        for (const lineData of props.parsedFileData) {
+            if (lineData.length > maxColumnCount) {
+                maxColumnCount = lineData.length;
+            }
+        }
+    }
+
+    const headers: object[] = [];
+
+    headers.push({ key: 'index', value: 'index', title: '#', sortable: true, nowrap: true });
+
+    for (let i = 0; i < maxColumnCount; i++) {
+        let title = `#${i + 1}`;
+
+        if (parsedFileDataColumnMapping.value.includeHeader && props.parsedFileData && props.parsedFileData[0][i]) {
+            title = props.parsedFileData[0][i] as string;
+        }
+
+        headers.push({ key: i.toString(), value: `column${i + 1}`, title: title, sortable: true, nowrap: true });
+    }
+
+    return headers;
+});
+
+const parsedFileLines = computed<Record<string, string>[] | undefined>(() => {
+    if (!props.parsedFileData) {
+        return undefined;
+    }
+
+    const allLines: Record<string, string>[] = [];
+    const startIndex = parsedFileDataColumnMapping.value.includeHeader ? 1 : 0;
+
+    for (let i = startIndex, index = 1; i < props.parsedFileData.length; i++, index++) {
+        const line: Record<string, string> = {};
+        const columns = props.parsedFileData[i] as string[];
+
+        for (const [data, columnIndex] of itemAndIndex(columns)) {
+            line['index'] = index.toString();
+            line[`column${columnIndex + 1}`] = data;
+        }
+
+        allLines.push(line);
+    }
+
+    return allLines;
+});
+
+const parsedFileLinesTablePageOptions = computed<NameNumeralValue[]>(() => getTablePageOptions(parsedFileLines.value?.length));
+
+const parsedFileAllTransactionTypes = computed<string[]>(() => parsedFileDataColumnMapping.value.parseFileAllTransactionTypes(props.parsedFileData));
+const parsedFileValidMappedTransactionTypes = computed<Record<string, TransactionType>>(() => parsedFileDataColumnMapping.value.parseFileValidMappedTransactionTypes(props.parsedFileData));
+const parsedFileAutoDetectedTimeFormat = computed<string | undefined>(() => parsedFileDataColumnMapping.value.parseFileAutoDetectedTimeFormat(props.parsedFileData));
+const parsedFileAutoDetectedTimezoneFormat = computed<string | undefined>(() => parsedFileDataColumnMapping.value.parseFileAutoDetectedTimezoneFormat(props.parsedFileData));
+const parsedFileAutoDetectedAmountFormat = computed<string | undefined>(() => parsedFileDataColumnMapping.value.parseFileAutoDetectedAmountFormat(props.parsedFileData));
+
+function getDisplayCount(count: number): string {
+    return numeralSystem.value.formatNumber(count);
+}
+
+function getTablePageOptions(linesCount?: number): NameNumeralValue[] {
+    const pageOptions: NameNumeralValue[] = [];
+
+    if (!linesCount || linesCount < 1) {
+        pageOptions.push({ value: -1, name: tt('All') });
+        return pageOptions;
+    }
+
+    for (const count of [ 5, 10, 15, 20, 25, 30, 50 ]) {
+        if (linesCount < count) {
+            break;
+        }
+
+        pageOptions.push({ value: count, name: getDisplayCount(count) });
+    }
+
+    pageOptions.push({ value: -1, name: tt('All') });
+
+    return pageOptions;
+}
+
+function getParseDataMappedColumnDisplayName(columnIndex: number): string {
+    for (const [columnType, index] of entries(parsedFileDataColumnMapping.value.dataColumnMapping)) {
+        if (index === columnIndex) {
+            return findDisplayNameByType(allImportTransactionColumnTypes.value, parseInt(columnType)) || tt('Unspecified');
+        }
+    }
+
+    return tt('Unspecified');
+}
+
+function generateResult(): ImportTransactionDefineColumnResult | undefined {
+    const columnMapping: Record<number, number> = parsedFileDataColumnMapping.value.dataColumnMapping;
+    const transactionTypeMapping: Record<string, TransactionType> = parsedFileValidMappedTransactionTypes.value;
+    const includeHeader: boolean = parsedFileDataColumnMapping.value.includeHeader;
+    const geoLocationSeparator: string = parsedFileDataColumnMapping.value.geoLocationSeparator;
+    const geoLocationOrder: string = parsedFileDataColumnMapping.value.geoLocationOrder;
+    const tagSeparator: string = parsedFileDataColumnMapping.value.tagSeparator;
+
+    let timeFormat: string | undefined = parsedFileDataColumnMapping.value.timeFormat;
+    let timezoneFormat: string | undefined = parsedFileDataColumnMapping.value.timezoneFormat;
+    let amountFormat: string | undefined = parsedFileDataColumnMapping.value.amountFormat;
+    let amountDecimalSeparator: string | undefined = undefined;
+    let amountDigitGroupingSymbol: string | undefined = undefined;
+
+    if (!columnMapping
+        || !isNumber(columnMapping[ImportTransactionColumnType.TransactionTime.type])
+        || !isNumber(columnMapping[ImportTransactionColumnType.TransactionType.type])
+        || !isNumber(columnMapping[ImportTransactionColumnType.Amount.type])) {
+        snackbar.value?.showError('Missing transaction time, transaction type, or amount column mapping');
+        return undefined;
+    }
+
+    if (!transactionTypeMapping || isObjectEmpty(transactionTypeMapping)) {
+        snackbar.value?.showError('Transaction type mapping is not set');
+        return undefined;
+    }
+
+    if (!parsedFileDataColumnMapping.value.timeFormat) {
+        timeFormat = parsedFileAutoDetectedTimeFormat.value;
+    }
+
+    if (!parsedFileDataColumnMapping.value.timezoneFormat) {
+        timezoneFormat = parsedFileAutoDetectedTimezoneFormat.value;
+    }
+
+    if (!parsedFileDataColumnMapping.value.amountFormat) {
+        amountFormat = parsedFileAutoDetectedAmountFormat.value;
+    }
+
+    if (amountFormat) {
+        const knownAmountFormat = KnownAmountFormat.valueOf(amountFormat);
+
+        if (knownAmountFormat) {
+            amountDecimalSeparator = knownAmountFormat.decimalSeparator.symbol;
+            amountDigitGroupingSymbol = knownAmountFormat.digitGroupingSymbol?.symbol;
+        }
+    }
+
+    if (!timeFormat) {
+        snackbar.value?.showError('Transaction time format is not set');
+        return undefined;
+    }
+
+    if (!amountDecimalSeparator) {
+        snackbar.value?.showError('Transaction amount format is not set');
+        return undefined;
+    }
+
+    return {
+        includeHeader: includeHeader,
+        columnMapping: columnMapping,
+        transactionTypeMapping: transactionTypeMapping,
+        timeFormat: timeFormat,
+        timezoneFormat: timezoneFormat,
+        amountDecimalSeparator: amountDecimalSeparator,
+        amountDigitGroupingSymbol: amountDigitGroupingSymbol,
+        geoLocationSeparator: geoLocationSeparator,
+        geoLocationOrder: geoLocationOrder,
+        tagSeparator: tagSeparator
+    };
+}
+
+function reset(): void {
+    parsedFileDataColumnMapping.value.reset();
+    currentPage.value = 1;
+    countPerPage.value = 10;
+}
+
+function loadColumnMappingFile(): void {
+    openTextFileContent({
+        allowedExtensions: KnownFileType.JSON.contentType
+    }).then(content => {
+        const result = ImportTransactionDataMapping.parseFromJson(content);
+
+        if (result) {
+            parsedFileDataColumnMapping.value = result;
+        } else {
+            logger.error('Failed to parse data mapping file');
+            snackbar.value?.showError('Data mapping file is invalid');
+        }
+    }).catch(error => {
+        logger.error('Failed to open data mapping file', error);
+        snackbar.value?.showError('Data mapping file is invalid');
+    });
+}
+
+function saveColumnMappingFile(): void {
+    const fileName = KnownFileType.JSON.formatFileName(tt('dataExport.defaultImportDataMappingFileName'));
+    startDownloadFile(fileName, KnownFileType.JSON.createBlob(parsedFileDataColumnMapping.value.toJson()));
+}
+
+defineExpose({
+    menus,
+    generateResult,
+    reset,
+    loadColumnMappingFile,
+    saveColumnMappingFile
+});
+</script>
+
+<style>
+.transaction-types-popup-menu .transaction-types-toggle {
+    overflow-x: auto;
+    white-space: nowrap;
+}
+
+.transaction-types-popup-menu .transaction-types-toggle.v-btn-toggle {
+    height: auto !important;
+    padding: 0;
+    border: none;
+}
+
+.transaction-types-popup-menu .transaction-types-toggle.v-btn-toggle > .v-btn {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+.transaction-types-popup-menu .transaction-types-toggle.v-btn-toggle > .v-btn:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: none;
+}
+
+.transaction-types-popup-menu .transaction-types-toggle.v-btn-toggle > .v-btn:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.transaction-types-popup-menu .transaction-types-toggle.v-btn-toggle > .v-btn {
+    border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+.transaction-types-popup-menu .transaction-types-toggle.v-btn-toggle button.v-btn {
+    width: auto !important;
+}
+</style>