diff --git a/src/core/template.ts b/src/core/template.ts
index b6b23e8e..dd31ec65 100644
--- a/src/core/template.ts
+++ b/src/core/template.ts
@@ -5,7 +5,6 @@ type TemplateTypeName = 'Normal' | 'Schedule';
 export class TemplateType implements TypeAndName {
     private static readonly allInstances: TemplateType[] = [];
     private static readonly allInstancesByType: Record<number, TemplateType> = {};
-    private static readonly allInstancesByTypeName: Record<string, TemplateType> = {};
 
     public static readonly Normal = new TemplateType(1, 'Normal');
     public static readonly Schedule = new TemplateType(2, 'Schedule');
@@ -19,17 +18,12 @@ export class TemplateType implements TypeAndName {
 
         TemplateType.allInstances.push(this);
         TemplateType.allInstancesByType[type] = this;
-        TemplateType.allInstancesByTypeName[name] = this;
     }
 
     public static values(): TemplateType[] {
         return TemplateType.allInstances;
     }
 
-    public static all(): Record<TemplateTypeName, TemplateType> {
-        return TemplateType.allInstancesByTypeName;
-    }
-
     public static valueOf(type: number): TemplateType | undefined {
         return TemplateType.allInstancesByType[type];
     }
diff --git a/src/lib/services.ts b/src/lib/services.ts
index 1b4d9447..d31f3e21 100644
--- a/src/lib/services.ts
+++ b/src/lib/services.ts
@@ -434,7 +434,7 @@ export default {
             timeout: DEFAULT_IMPORT_API_TIMEOUT
         } as ApiRequestConfig);
     },
-    uploadTransactionPicture: ({ pictureFile, clientSessionId }: { pictureFile: File, clientSessionId: string }): ApiResponsePromise<TransactionPictureInfoBasicResponse> => {
+    uploadTransactionPicture: ({ pictureFile, clientSessionId }: { pictureFile: File, clientSessionId?: string }): ApiResponsePromise<TransactionPictureInfoBasicResponse> => {
         return axios.postForm<ApiResponse<TransactionPictureInfoBasicResponse>>('v1/transaction/pictures/upload.json', {
             picture: pictureFile,
             clientSessionId: clientSessionId
diff --git a/src/lib/transaction.ts b/src/lib/transaction.ts
index 5906741c..e04d1cb1 100644
--- a/src/lib/transaction.ts
+++ b/src/lib/transaction.ts
@@ -20,14 +20,14 @@ import {
 } from './category.ts';
 
 export interface SetTransactionOptions {
-    type: number;
-    categoryId: string;
-    accountId: string;
-    destinationAccountId: string;
-    amount: number;
-    destinationAmount: number;
-    tagIds: string;
-    comment: string;
+    type?: number;
+    categoryId?: string;
+    accountId?: string;
+    destinationAccountId?: string;
+    amount?: number;
+    destinationAmount?: number;
+    tagIds?: string;
+    comment?: string;
 }
 
 function getDisplayAmount(amount: number, currency: string, hideAmount: boolean, formatAmountWithCurrencyFunc: (value: number | string, currencyCode?: string) => string): string {
diff --git a/src/lib/ui/mobile.ts b/src/lib/ui/mobile.ts
index 177c0992..6aaadc46 100644
--- a/src/lib/ui/mobile.ts
+++ b/src/lib/ui/mobile.ts
@@ -37,26 +37,6 @@ export function showAlert(message: string, confirmCallback: ((dialog: Dialog.Dia
     });
 }
 
-export function showConfirm(message: string, confirmCallback: (dialog: Dialog.Dialog, e: Event) => void, cancelCallback: ((dialog: Dialog.Dialog, e: Event) => void) | undefined, translateFn: TranslateFunction): void {
-    f7ready((f7) => {
-        f7.dialog.create({
-            title: translateFn('global.app.title'),
-            text: translateFn(message),
-            animate: isEnableAnimate(),
-            buttons: [
-                {
-                    text: translateFn('Cancel'),
-                    onClick: cancelCallback
-                },
-                {
-                    text: translateFn('OK'),
-                    onClick: confirmCallback
-                }
-            ]
-        }).open();
-    });
-}
-
 export function showToast(message: string, timeout: number | undefined, translateFn: TranslateFunction): void {
     f7ready((f7) => {
         f7.toast.create({
@@ -210,7 +190,7 @@ export function scrollToSelectedItem(parentEl: Framework7Dom, containerSelector:
 }
 
 export function useI18nUIComponents() {
-    const i18nGlobal = useVueI18n();
+    const { t } = useVueI18n();
 
     function routeBackOnError<T>(f7router: Router.Router, errorRef: Ref<T>): void {
         const unwatch = watch(errorRef, (newValue) => {
@@ -228,10 +208,30 @@ export function useI18nUIComponents() {
         });
     }
 
+    function showConfirm(message: string, confirmCallback?: (dialog: Dialog.Dialog, e: Event) => void, cancelCallback?: ((dialog: Dialog.Dialog, e: Event) => void) | undefined): void {
+        f7ready((f7) => {
+            f7.dialog.create({
+                title: t('global.app.title'),
+                text: t(message),
+                animate: isEnableAnimate(),
+                buttons: [
+                    {
+                        text: t('Cancel'),
+                        onClick: cancelCallback
+                    },
+                    {
+                        text: t('OK'),
+                        onClick: confirmCallback
+                    }
+                ]
+            }).open();
+        });
+    }
+
     return {
-        showAlert: (message: string, confirmCallback?: (dialog: Dialog.Dialog, e: Event) => void) => showAlert(message, confirmCallback, i18nGlobal.t),
-        showConfirm: (message: string, confirmCallback: (dialog: Dialog.Dialog, e: Event) => void, cancelCallback?: (dialog: Dialog.Dialog, e: Event) => void): void => showConfirm(message, confirmCallback, cancelCallback, i18nGlobal.t),
-        showToast: (message: string, timeout?: number): void => showToast(message, timeout, i18nGlobal.t),
+        showAlert: (message: string, confirmCallback?: (dialog: Dialog.Dialog, e: Event) => void) => showAlert(message, confirmCallback, t),
+        showConfirm: showConfirm,
+        showToast: (message: string, timeout?: number): void => showToast(message, timeout, t),
         routeBackOnError
     }
 }
diff --git a/src/locales/helper.js b/src/locales/helper.js
index f2a2595d..993121d7 100644
--- a/src/locales/helper.js
+++ b/src/locales/helper.js
@@ -1,29 +1,21 @@
-import { WeekDay, LongDateFormat, ShortDateFormat, LongTimeFormat, ShortTimeFormat, DateRange } from '@/core/datetime.ts';
+import { LongDateFormat, ShortDateFormat, LongTimeFormat, ShortTimeFormat, DateRange } from '@/core/datetime.ts';
 import { DecimalSeparator, DigitGroupingSymbol, DigitGroupingType } from '@/core/numeral.ts';
 import { CurrencyDisplayType } from '@/core/currency.ts'
-import { AccountCategory } from '@/core/account.ts';
 import { TransactionTagFilterType } from '@/core/transaction.ts';
 
-import { UTC_TIMEZONE, ALL_TIMEZONES } from '@/consts/timezone.ts';
 import { ALL_CURRENCIES } from '@/consts/currency.ts';
 import { KnownErrorCode, SPECIFIED_API_NOT_FOUND_ERRORS, PARAMETERIZED_ERRORS } from '@/consts/api.ts';
 
 import {
     isString,
     isNumber,
-    isBoolean,
-    copyObjectTo
+    isBoolean
 } from '@/lib/common.ts';
 
 import {
     parseDateFromUnixTime,
     formatUnixTime,
     getYear,
-    getTimezoneOffset,
-    getTimezoneOffsetMinutes,
-    getBrowserTimezoneOffset,
-    getBrowserTimezoneOffsetMinutes,
-    getTimeDifferenceHoursAndMinutes,
     getDateTimeFormatType,
     getRecentMonthDateRanges,
     isDateRangeMatchFullYears,
@@ -31,8 +23,7 @@ import {
 } from '@/lib/datetime.ts';
 
 import {
-    formatAmount,
-    getAdaptiveDisplayAmountRate
+    formatAmount
 } from '@/lib/numeral.ts';
 
 import {
@@ -40,11 +31,6 @@ import {
     appendCurrencySymbol
 } from '@/lib/currency.ts';
 
-import {
-    getCategorizedAccountsMap,
-    getAllFilteredAccountsBalance
-} from '@/lib/account.ts';
-
 function getLocalizedDisplayNameAndType(typeAndNames, translateFn) {
     const ret = [];
 
@@ -78,10 +64,6 @@ function getCurrencyUnitName(currencyCode, isPlural, translateFn) {
     return '';
 }
 
-function getMonthdayOrdinal(monthDay, translateFn) {
-    return translateFn(`datetime.monthDayOrdinal.${monthDay}`);
-}
-
 function getWeekdayShortName(weekDayName, translateFn) {
     return translateFn(`datetime.${weekDayName}.short`);
 }
@@ -90,50 +72,6 @@ function getWeekdayLongName(weekDayName, translateFn) {
     return translateFn(`datetime.${weekDayName}.long`);
 }
 
-function getMultiMonthdayShortNames(monthDays, translateFn) {
-    if (!monthDays) {
-        return '';
-    }
-
-    if (monthDays.length === 1) {
-        return translateFn('format.misc.monthDay', {
-            ordinal: getMonthdayOrdinal(monthDays[0], translateFn)
-        });
-    } else {
-        return translateFn('format.misc.monthDays', {
-            multiMonthDays: joinMultiText(monthDays.map(monthDay =>
-                translateFn('format.misc.eachMonthDayInMonthDays', {
-                    ordinal: getMonthdayOrdinal(monthDay, translateFn)
-                })), translateFn)
-        });
-    }
-}
-
-function getMultiWeekdayLongNames(weekdayTypes, firstDayOfWeek, translateFn) {
-    const weekdayTypesMap = {};
-
-    if (!isNumber(firstDayOfWeek)) {
-        firstDayOfWeek = WeekDay.DefaultFirstDay.type;
-    }
-
-    for (let i = 0; i < weekdayTypes.length; i++) {
-        weekdayTypesMap[weekdayTypes[i]] = true;
-    }
-
-    const allWeekDays = getAllWeekDays(firstDayOfWeek, translateFn);
-    const finalWeekdayNames = [];
-
-    for (let i = 0; i < allWeekDays.length; i++) {
-        const weekDay = allWeekDays[i];
-
-        if (weekdayTypesMap[weekDay.type]) {
-            finalWeekdayNames.push(weekDay.displayName);
-        }
-    }
-
-    return joinMultiText(finalWeekdayNames, translateFn);
-}
-
 function getI18nLongDateFormat(translateFn, formatTypeValue) {
     const defaultLongDateFormatTypeName = translateFn('default.longDateFormat');
     return getDateTimeFormat(translateFn, LongDateFormat.all(), LongDateFormat.values(), 'format.longDate', defaultLongDateFormatTypeName, LongDateFormat.Default, formatTypeValue);
@@ -184,110 +122,6 @@ function getDateTimeFormat(translateFn, allFormatMap, allFormatArray, localeForm
     return translateFn(`${localeFormatPathPrefix}.${type.key}`);
 }
 
-function getAllTimezones(includeSystemDefault, translateFn) {
-    const defaultTimezoneOffset = getBrowserTimezoneOffset();
-    const defaultTimezoneOffsetMinutes = getBrowserTimezoneOffsetMinutes();
-    const allTimezoneInfos = [];
-
-    for (let i = 0; i < ALL_TIMEZONES.length; i++) {
-        const utcOffset = (ALL_TIMEZONES[i].timezoneName !== UTC_TIMEZONE.timezoneName ? getTimezoneOffset(ALL_TIMEZONES[i].timezoneName) : '');
-        const displayName = translateFn(`timezone.${ALL_TIMEZONES[i].displayName}`);
-
-        allTimezoneInfos.push({
-            name: ALL_TIMEZONES[i].timezoneName,
-            utcOffset: utcOffset,
-            utcOffsetMinutes: getTimezoneOffsetMinutes(ALL_TIMEZONES[i].timezoneName),
-            displayName: displayName,
-            displayNameWithUtcOffset: `(UTC${utcOffset}) ${displayName}`
-        });
-    }
-
-    if (includeSystemDefault) {
-        const defaultDisplayName = translateFn('System Default');
-
-        allTimezoneInfos.push({
-            name: '',
-            utcOffset: defaultTimezoneOffset,
-            utcOffsetMinutes: defaultTimezoneOffsetMinutes,
-            displayName: defaultDisplayName,
-            displayNameWithUtcOffset: `(UTC${defaultTimezoneOffset}) ${defaultDisplayName}`
-        });
-    }
-
-    allTimezoneInfos.sort(function(c1, c2) {
-        const utcOffset1 = parseInt(c1.utcOffset.replace(':', ''));
-        const utcOffset2 = parseInt(c2.utcOffset.replace(':', ''));
-
-        if (utcOffset1 !== utcOffset2) {
-            return utcOffset1 - utcOffset2;
-        }
-
-        return c1.displayName.localeCompare(c2.displayName);
-    })
-
-    return allTimezoneInfos;
-}
-
-function getTimezoneDifferenceDisplayText(utcOffset, translateFn) {
-    const defaultTimezoneOffset = getTimezoneOffsetMinutes();
-    const offsetTime = getTimeDifferenceHoursAndMinutes(utcOffset - defaultTimezoneOffset);
-
-    if (utcOffset > defaultTimezoneOffset) {
-        if (offsetTime.offsetMinutes) {
-            return translateFn('format.misc.hoursMinutesAheadOfDefaultTimezone', {
-                hours: offsetTime.offsetHours,
-                minutes: offsetTime.offsetMinutes
-            });
-        } else {
-            return translateFn('format.misc.hoursAheadOfDefaultTimezone', {
-                hours: offsetTime.offsetHours
-            });
-        }
-    } else if (utcOffset < defaultTimezoneOffset) {
-        if (offsetTime.offsetMinutes) {
-            return translateFn('format.misc.hoursMinutesBehindDefaultTimezone', {
-                hours: offsetTime.offsetHours,
-                minutes: offsetTime.offsetMinutes
-            });
-        } else {
-            return translateFn('format.misc.hoursBehindDefaultTimezone', {
-                hours: offsetTime.offsetHours
-            });
-        }
-    } else {
-        return translateFn('Same time as default timezone');
-    }
-}
-
-function getAllWeekDays(firstDayOfWeek, translateFn) {
-    const ret = [];
-    const allWeekDays = WeekDay.values();
-
-    if (!isNumber(firstDayOfWeek)) {
-        firstDayOfWeek = WeekDay.DefaultFirstDay.type;
-    }
-
-    for (let i = firstDayOfWeek; i < allWeekDays.length; i++) {
-        const weekDay = allWeekDays[i];
-
-        ret.push({
-            type: weekDay.type,
-            displayName: translateFn(`datetime.${weekDay.name}.long`)
-        });
-    }
-
-    for (let i = 0; i < firstDayOfWeek; i++) {
-        const weekDay = allWeekDays[i];
-
-        ret.push({
-            type: weekDay.type,
-            displayName: translateFn(`datetime.${weekDay.name}.long`)
-        });
-    }
-
-    return ret;
-}
-
 function getAllDateRanges(scene, includeCustom, includeBillingCycle, translateFn) {
     const ret = [];
     const allDateRanges = DateRange.values();
@@ -460,11 +294,6 @@ function getNumberFormatOptions(translateFn, userStore, currencyCode) {
     };
 }
 
-function getFormattedAmount(value, translateFn, userStore, currencyCode) {
-    const numberFormatOptions = getNumberFormatOptions(translateFn, userStore, currencyCode);
-    return formatAmount(value, numberFormatOptions);
-}
-
 function getCurrentCurrencyDisplayType(translateFn, userStore) {
     let currencyDisplayType = CurrencyDisplayType.valueOf(userStore.currentUserCurrencyDisplayType);
 
@@ -525,96 +354,10 @@ function getFormattedAmountWithCurrency(value, currencyCode, translateFn, userSt
     return appendCurrencySymbol(value, currencyDisplayType, currencyCode, currencyUnit, currencyName, isPlural);
 }
 
-function getAdaptiveAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, translateFn, userStore) {
-    const numberFormatOptions = getNumberFormatOptions(translateFn, userStore);
-    return getAdaptiveDisplayAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, numberFormatOptions);
-}
-
 function getAllTransactionTagFilterTypes(translateFn) {
     return getLocalizedDisplayNameAndType(TransactionTagFilterType.values(), translateFn);
 }
 
-function getCategorizedAccountsWithDisplayBalance(allVisibleAccounts, showAccountBalance, defaultCurrency, userStore, settingsStore, exchangeRatesStore, translateFn) {
-    const ret = [];
-    const allCategories = AccountCategory.values();
-    const categorizedAccounts = copyObjectTo(getCategorizedAccountsMap(allVisibleAccounts), {});
-
-    for (let i = 0; i < allCategories.length; i++) {
-        const category = allCategories[i];
-
-        if (!categorizedAccounts[category.type]) {
-            continue;
-        }
-
-        const accountCategory = categorizedAccounts[category.type];
-
-        if (accountCategory.accounts) {
-            for (let i = 0; i < accountCategory.accounts.length; i++) {
-                const account = accountCategory.accounts[i];
-
-                if (showAccountBalance && account.isAsset) {
-                    account.displayBalance = getFormattedAmountWithCurrency(account.balance, account.currency, translateFn, userStore, settingsStore);
-                } else if (showAccountBalance && account.isLiability) {
-                    account.displayBalance = getFormattedAmountWithCurrency(-account.balance, account.currency, translateFn, userStore, settingsStore);
-                } else {
-                    account.displayBalance = '***';
-                }
-            }
-        }
-
-        if (showAccountBalance) {
-            const accountsBalance = getAllFilteredAccountsBalance(categorizedAccounts, account => account.category === accountCategory.category);
-            let totalBalance = 0;
-            let hasUnCalculatedAmount = false;
-
-            for (let i = 0; i < accountsBalance.length; i++) {
-                if (accountsBalance[i].currency === defaultCurrency) {
-                    if (accountsBalance[i].isAsset) {
-                        totalBalance += accountsBalance[i].balance;
-                    } else if (accountsBalance[i].isLiability) {
-                        totalBalance -= accountsBalance[i].balance;
-                    }
-                } else {
-                    const balance = exchangeRatesStore.getExchangedAmount(accountsBalance[i].balance, accountsBalance[i].currency, defaultCurrency);
-
-                    if (!isNumber(balance)) {
-                        hasUnCalculatedAmount = true;
-                        continue;
-                    }
-
-                    if (accountsBalance[i].isAsset) {
-                        totalBalance += Math.floor(balance);
-                    } else if (accountsBalance[i].isLiability) {
-                        totalBalance -= Math.floor(balance);
-                    }
-                }
-            }
-
-            if (hasUnCalculatedAmount) {
-                totalBalance = totalBalance + '+';
-            }
-
-            accountCategory.displayBalance = getFormattedAmountWithCurrency(totalBalance, defaultCurrency, translateFn, userStore, settingsStore);
-        } else {
-            accountCategory.displayBalance = '***';
-        }
-
-        ret.push(accountCategory);
-    }
-
-    return ret;
-}
-
-function joinMultiText(textArray, translateFn) {
-    if (!textArray || !textArray.length) {
-        return '';
-    }
-
-    const separator = translateFn('format.misc.multiTextJoinSeparator');
-
-    return textArray.join(separator);
-}
-
 function getLocalizedError(error) {
     if (error.errorCode === KnownErrorCode.ApiNotFound && SPECIFIED_API_NOT_FOUND_ERRORS[error.path]) {
         return {
@@ -685,23 +428,15 @@ export function i18nFunctions(i18nGlobal) {
     return {
         getWeekdayShortName: (weekDay) => getWeekdayShortName(weekDay, i18nGlobal.t),
         getWeekdayLongName: (weekDay) => getWeekdayLongName(weekDay, i18nGlobal.t),
-        getMultiMonthdayShortNames: (monthdays) => getMultiMonthdayShortNames(monthdays, i18nGlobal.t),
-        getMultiWeekdayLongNames: (weekdayTypes, firstDayOfWeek) => getMultiWeekdayLongNames(weekdayTypes, firstDayOfWeek, i18nGlobal.t),
         formatUnixTimeToLongDateTime: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nLongDateFormat(i18nGlobal.t, userStore.currentUserLongDateFormat) + ' ' + getI18nLongTimeFormat(i18nGlobal.t, userStore.currentUserLongTimeFormat), utcOffset, currentUtcOffset),
         formatUnixTimeToLongDate: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nLongDateFormat(i18nGlobal.t, userStore.currentUserLongDateFormat), utcOffset, currentUtcOffset),
         formatUnixTimeToLongYear: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nLongYearFormat(i18nGlobal.t, userStore.currentUserLongDateFormat), utcOffset, currentUtcOffset),
         formatUnixTimeToLongYearMonth: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nLongYearMonthFormat(i18nGlobal.t, userStore.currentUserLongDateFormat), utcOffset, currentUtcOffset),
-        formatUnixTimeToLongTime: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nLongTimeFormat(i18nGlobal.t, userStore.currentUserLongTimeFormat), utcOffset, currentUtcOffset),
         formatUnixTimeToShortTime: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nShortTimeFormat(i18nGlobal.t, userStore.currentUserShortTimeFormat), utcOffset, currentUtcOffset),
-        getAllTimezones: (includeSystemDefault) => getAllTimezones(includeSystemDefault, i18nGlobal.t),
-        getTimezoneDifferenceDisplayText: (utcOffset) => getTimezoneDifferenceDisplayText(utcOffset, i18nGlobal.t),
         getAllDateRanges: (scene, includeCustom, includeBillingCycle) => getAllDateRanges(scene, includeCustom, includeBillingCycle, i18nGlobal.t),
         getAllRecentMonthDateRanges: (userStore, includeAll, includeCustom) => getAllRecentMonthDateRanges(userStore, includeAll, includeCustom, i18nGlobal.t),
         getDateRangeDisplayName: (userStore, dateType, startTime, endTime) => getDateRangeDisplayName(userStore, dateType, startTime, endTime, i18nGlobal.t),
-        formatAmount: (userStore, value, currencyCode) => getFormattedAmount(value, i18nGlobal.t, userStore, currencyCode),
         formatAmountWithCurrency: (settingsStore, userStore, value, currencyCode) => getFormattedAmountWithCurrency(value, currencyCode, i18nGlobal.t, userStore, settingsStore),
-        getAdaptiveAmountRate: (userStore, amount1, amount2, fromExchangeRate, toExchangeRate) => getAdaptiveAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, i18nGlobal.t, userStore),
-        getAllTransactionTagFilterTypes: () => getAllTransactionTagFilterTypes(i18nGlobal.t),
-        getCategorizedAccountsWithDisplayBalance: (allVisibleAccounts, showAccountBalance, defaultCurrency, settingsStore, userStore, exchangeRatesStore) => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts, showAccountBalance, defaultCurrency, userStore, settingsStore, exchangeRatesStore, i18nGlobal.t)
+        getAllTransactionTagFilterTypes: () => getAllTransactionTagFilterTypes(i18nGlobal.t)
     };
 }
diff --git a/src/mobile-main.ts b/src/mobile-main.ts
index 0f0e24ef..f52f59df 100644
--- a/src/mobile-main.ts
+++ b/src/mobile-main.ts
@@ -86,7 +86,6 @@ import { getI18nOptions } from '@/locales/helpers.ts';
 import { i18nFunctions } from '@/locales/helper.js';
 import {
     showAlert,
-    showConfirm,
     showToast,
     showLoading,
     hideLoading,
@@ -204,7 +203,6 @@ app.directive('TextareaAutoSize', TextareaAutoSize);
 app.config.globalProperties['$locale'] = i18nFunctions(i18n.global);
 
 app.config.globalProperties['$alert'] = (message: string, confirmCallback: ((dialog: Dialog.Dialog, e: Event) => void) | undefined) => showAlert(message, confirmCallback, i18n.global.t);
-app.config.globalProperties['$confirm'] = (message: string, confirmCallback: (dialog: Dialog.Dialog, e: Event) => void, cancelCallback: ((dialog: Dialog.Dialog, e: Event) => void) | undefined) => showConfirm(message, confirmCallback, cancelCallback, i18n.global.t);
 app.config.globalProperties['$toast'] = (message: string, timeout: number | undefined) => showToast(message, timeout, i18n.global.t);
 app.config.globalProperties['$showLoading'] = showLoading;
 app.config.globalProperties['$hideLoading'] = hideLoading;
diff --git a/src/models/transaction_template.ts b/src/models/transaction_template.ts
index 2b322391..a30dc8a3 100644
--- a/src/models/transaction_template.ts
+++ b/src/models/transaction_template.ts
@@ -23,6 +23,18 @@ export class TransactionTemplate extends Transaction implements TransactionTempl
         this.hidden = hidden;
     }
 
+    public from(other: TransactionTemplate): void {
+        this.templateType = other.templateType;
+        this.name = other.name;
+
+        if (this.templateType === TemplateType.Schedule.type) {
+            this.scheduledFrequencyType = other.scheduledFrequencyType;
+            this.scheduledFrequency = other.scheduledFrequency;
+            this.utcOffset = other.utcOffset;
+            this.timeZone = undefined;
+        }
+    }
+
     public toTemplateCreateRequest(clientSessionId: string): TransactionTemplateCreateRequest {
         return {
             templateType: this.templateType,
diff --git a/src/stores/transaction.ts b/src/stores/transaction.ts
index 2d0f106d..013e385f 100644
--- a/src/stores/transaction.ts
+++ b/src/stores/transaction.ts
@@ -43,7 +43,6 @@ import {
     countSplitItems
 } from '@/lib/common.ts';
 import {
-    getCurrentUnixTime,
     getTimezoneOffsetMinutes,
     getBrowserTimezoneOffsetMinutes,
     getActualUnixTimeForStore,
@@ -510,21 +509,6 @@ export const useTransactionsStore = defineStore('transactions', () => {
         clearUserTransactionDraft();
     }
 
-    function generateNewTransactionModel(type: string): Transaction {
-        const now: number = getCurrentUnixTime();
-        const currentTimezone: string = settingsStore.appSettings.timeZone;
-
-        let defaultType: TransactionType = TransactionType.Expense;
-
-        if (type === TransactionType.Income.toString()) {
-            defaultType = TransactionType.Income;
-        } else if (type === TransactionType.Transfer.toString()) {
-            defaultType = TransactionType.Transfer;
-        }
-
-        return Transaction.createNewTransaction(defaultType, now, currentTimezone, getTimezoneOffsetMinutes(currentTimezone));
-    }
-
     function setTransactionSuitableDestinationAmount(transaction: Transaction, oldValue: number, newValue: number): void {
         if (transaction.type === TransactionType.Expense || transaction.type === TransactionType.Income) {
             transaction.destinationAmount = newValue;
@@ -1133,7 +1117,7 @@ export const useTransactionsStore = defineStore('transactions', () => {
         });
     }
 
-    function uploadTransactionPicture({ pictureFile, clientSessionId }: { pictureFile: File, clientSessionId: string }): Promise<TransactionPictureInfoBasicResponse> {
+    function uploadTransactionPicture({ pictureFile, clientSessionId }: { pictureFile: File, clientSessionId?: string }): Promise<TransactionPictureInfoBasicResponse> {
         return new Promise((resolve, reject) => {
             services.uploadTransactionPicture({ pictureFile, clientSessionId }).then(response => {
                 const data = response.data;
@@ -1183,9 +1167,9 @@ export const useTransactionsStore = defineStore('transactions', () => {
         });
     }
 
-    function getTransactionPictureUrl(pictureInfo?: TransactionPictureInfoBasicResponse | null, disableBrowserCache?: boolean | string): string | null {
+    function getTransactionPictureUrl(pictureInfo?: TransactionPictureInfoBasicResponse | null, disableBrowserCache?: boolean | string): string | undefined {
         if (!pictureInfo || !pictureInfo.originalUrl) {
-            return null;
+            return undefined;
         }
 
         return services.getTransactionPictureUrlWithToken(pictureInfo.originalUrl, disableBrowserCache);
@@ -1218,7 +1202,6 @@ export const useTransactionsStore = defineStore('transactions', () => {
         isTransactionDraftModified,
         saveTransactionDraft,
         clearTransactionDraft,
-        generateNewTransactionModel,
         setTransactionSuitableDestinationAmount,
         updateTransactionListInvalidState,
         resetTransactions,
diff --git a/src/views/base/transactions/TransactionEditPageBase.ts b/src/views/base/transactions/TransactionEditPageBase.ts
new file mode 100644
index 00000000..d7047983
--- /dev/null
+++ b/src/views/base/transactions/TransactionEditPageBase.ts
@@ -0,0 +1,450 @@
+import { ref, computed, 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';
+import { useTransactionsStore } from '@/stores/transaction.ts';
+import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
+
+import type { LocalizedTimezoneInfo } from '@/core/timezone.ts';
+import { CategoryType } from '@/core/category.ts';
+import { TransactionType } from '@/core/transaction.ts';
+import { TemplateType } from '@/core/template.ts';
+import { TRANSACTION_MAX_PICTURE_COUNT } from '@/consts/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 type { TransactionPictureInfoBasicResponse } from '@/models/transaction_picture_info.ts';
+import { Transaction } from '@/models/transaction.ts';
+import { TransactionTemplate } from '@/models/transaction_template.ts';
+
+import {
+    isArray
+} from '@/lib/common.ts';
+
+import {
+    getUtcOffsetByUtcOffsetMinutes,
+    getTimezoneOffsetMinutes,
+    getCurrentUnixTime
+} from '@/lib/datetime.ts';
+
+import {
+    getFirstAvailableCategoryId
+} from '@/lib/category.ts';
+
+export enum TransactionEditPageType {
+    Transaction = 'transaction',
+    Template = 'template'
+}
+
+export enum TransactionEditPageMode {
+    Add = 'add',
+    Edit = 'edit',
+    View = 'view'
+}
+
+export enum GeoLocationStatus {
+    Getting = 'getting',
+    Success = 'success',
+    Error = 'error'
+}
+
+export function useTransactionEditPageBase(type: TransactionEditPageType, initMode?: TransactionEditPageMode, transactionDefaultType?: number) {
+    const {
+        tt,
+        getAllTimezones,
+        getTimezoneDifferenceDisplayText,
+        formatAmountWithCurrency,
+        getAdaptiveAmountRate,
+        getCategorizedAccountsWithDisplayBalance
+    } = useI18n();
+
+    const settingsStore = useSettingsStore();
+    const userStore = useUserStore();
+    const accountsStore = useAccountsStore();
+    const transactionCategoriesStore = useTransactionCategoriesStore();
+    const transactionTagsStore = useTransactionTagsStore();
+    const transactionsStore = useTransactionsStore();
+    const exchangeRatesStore = useExchangeRatesStore();
+
+    const isSupportGeoLocation: boolean = !!navigator.geolocation;
+
+    const mode = ref<TransactionEditPageMode>(initMode ?? TransactionEditPageMode.Add);
+    const editId = ref<string | null>(null);
+    const addByTemplateId = ref<string | null>(null);
+    const duplicateFromId = ref<string | null>(null);
+
+    const clientSessionId = ref<string>('');
+    const loading = ref<boolean>(true);
+    const submitting = ref<boolean>(false);
+    const uploadingPicture = ref<boolean>(false);
+    const geoLocationStatus = ref<GeoLocationStatus | null>(null);
+
+    const transaction = ref<Transaction | TransactionTemplate>(createNewTransactionModel(transactionDefaultType));
+
+    const currentTimezoneOffsetMinutes = computed<number>(() => getTimezoneOffsetMinutes(settingsStore.appSettings.timeZone));
+    const showAccountBalance = computed<boolean>(() => settingsStore.appSettings.showAccountBalance);
+    const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
+    const defaultAccountId = computed<string>(() => userStore.currentUserDefaultAccountId);
+    const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+
+    const allTimezones = computed<LocalizedTimezoneInfo[]>(() => getAllTimezones(true));
+    const allAccounts = computed<Account[]>(() => accountsStore.allPlainAccounts);
+    const allVisibleAccounts = computed<Account[]>(() => accountsStore.allVisiblePlainAccounts);
+    const allAccountsMap = computed<Record<string, Account>>(() => accountsStore.allAccountsMap);
+    const allVisibleCategorizedAccounts = computed<CategorizedAccountWithDisplayBalance[]>(() => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts.value, showAccountBalance.value));
+    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 canAddTransactionPicture = computed<boolean>(() => {
+        if (type !== TransactionEditPageType.Transaction || (mode.value !== TransactionEditPageMode.Add && mode.value !== TransactionEditPageMode.Edit)) {
+            return false;
+        }
+
+        return !isArray(transaction.value.pictures) || transaction.value.pictures.length < TRANSACTION_MAX_PICTURE_COUNT;
+    });
+
+    const title = computed<string>(() => {
+        if (type === TransactionEditPageType.Transaction) {
+            if (mode.value === TransactionEditPageMode.Add) {
+                return 'Add Transaction';
+            } else if (mode.value === TransactionEditPageMode.Edit) {
+                return 'Edit Transaction';
+            } else {
+                return 'Transaction Detail';
+            }
+        } else if (type === TransactionEditPageType.Template && (transaction.value as TransactionTemplate).templateType === TemplateType.Normal.type) {
+            if (mode.value === TransactionEditPageMode.Add) {
+                return 'Add Transaction Template';
+            } else if (mode.value === TransactionEditPageMode.Edit) {
+                return 'Edit Transaction Template';
+            }
+        } else if (type === TransactionEditPageType.Template && (transaction.value as TransactionTemplate).templateType === TemplateType.Schedule.type) {
+            if (mode.value === TransactionEditPageMode.Add) {
+                return 'Add Scheduled Transaction';
+            } else if (mode.value === TransactionEditPageMode.Edit) {
+                return 'Edit Scheduled Transaction';
+            }
+        }
+
+        return '';
+    });
+
+    const saveButtonTitle = computed<string>(() => {
+        if (mode.value === TransactionEditPageMode.Add) {
+            return 'Add';
+        } else {
+            return 'Save';
+        }
+    });
+
+    const cancelButtonTitle = computed<string>(() => {
+        if (mode.value === TransactionEditPageMode.View) {
+            return 'Close';
+        } else {
+            return 'Cancel';
+        }
+    });
+
+    const sourceAmountName = computed<string>(() => {
+        if (transaction.value.type === TransactionType.Expense) {
+            return 'Expense Amount';
+        } else if (transaction.value.type === TransactionType.Income) {
+            return 'Income Amount';
+        } else if (transaction.value.type === TransactionType.Transfer) {
+            return 'Transfer Out Amount';
+        } else {
+            return 'Amount';
+        }
+    });
+
+    const sourceAccountTitle = computed<string>(() => {
+        if (transaction.value.type === TransactionType.Expense || transaction.value.type === TransactionType.Income) {
+            return 'Account';
+        } else if (transaction.value.type === TransactionType.Transfer) {
+            return 'Source Account';
+        } else {
+            return 'Account';
+        }
+    });
+
+    const transferInAmountTitle = computed<string>(() => {
+        const sourceAccount = allAccountsMap.value[transaction.value.sourceAccountId];
+        const destinationAccount = allAccountsMap.value[transaction.value.destinationAccountId];
+
+        if (!sourceAccount || !destinationAccount || sourceAccount.currency === destinationAccount.currency) {
+            return tt('Transfer In Amount');
+        }
+
+        const fromExchangeRate = exchangeRatesStore.latestExchangeRateMap[sourceAccount.currency];
+        const toExchangeRate = exchangeRatesStore.latestExchangeRateMap[destinationAccount.currency];
+        const amountRate = getAdaptiveAmountRate(transaction.value.sourceAmount, transaction.value.destinationAmount, fromExchangeRate, toExchangeRate);
+
+        if (!amountRate) {
+            return tt('Transfer In Amount');
+        }
+
+        return tt('Transfer In Amount') + ` (${amountRate})`;
+    });
+
+    const hasAvailableExpenseCategories = computed<boolean>(() => {
+        if (!allCategories.value || !allCategories.value[CategoryType.Expense] || !allCategories.value[CategoryType.Expense].length) {
+            return false;
+        }
+
+        const firstAvailableCategoryId = getFirstAvailableCategoryId(allCategories.value[CategoryType.Expense]);
+        return firstAvailableCategoryId !== '';
+    });
+
+    const hasAvailableIncomeCategories = computed<boolean>(() => {
+        if (!allCategories.value || !allCategories.value[CategoryType.Income] || !allCategories.value[CategoryType.Income].length) {
+            return false;
+        }
+
+        const firstAvailableCategoryId = getFirstAvailableCategoryId(allCategories.value[CategoryType.Income]);
+        return firstAvailableCategoryId !== '';
+    });
+
+    const hasAvailableTransferCategories = computed<boolean>(() => {
+        if (!allCategories.value || !allCategories.value[CategoryType.Transfer] || !allCategories.value[CategoryType.Transfer].length) {
+            return false;
+        }
+
+        const firstAvailableCategoryId = getFirstAvailableCategoryId(allCategories.value[CategoryType.Transfer]);
+        return firstAvailableCategoryId !== '';
+    });
+
+    const sourceAccountName = computed<string>(() => {
+        if (transaction.value.sourceAccountId) {
+            return Account.findAccountNameById(allAccounts.value, transaction.value.sourceAccountId) || '';
+        } else {
+            return tt('None');
+        }
+    });
+
+    const destinationAccountName = computed<string>(() => {
+        if (transaction.value.destinationAccountId) {
+            return Account.findAccountNameById(allAccounts.value, transaction.value.destinationAccountId) || '';
+        } else {
+            return tt('None');
+        }
+    });
+
+    const sourceAccountCurrency = computed<string>(() => {
+        const sourceAccount = allAccountsMap.value[transaction.value.sourceAccountId];
+
+        if (sourceAccount) {
+            return sourceAccount.currency;
+        }
+
+        return defaultCurrency.value;
+    });
+
+    const destinationAccountCurrency = computed<string>(() => {
+        const destinationAccount = allAccountsMap.value[transaction.value.destinationAccountId];
+
+        if (destinationAccount) {
+            return destinationAccount.currency;
+        }
+
+        return defaultCurrency.value;
+    });
+
+    const transactionDisplayTimezone = computed<string>(() => {
+        return `UTC${getUtcOffsetByUtcOffsetMinutes(transaction.value.utcOffset)}`;
+    });
+
+    const transactionTimezoneTimeDifference = computed<string>(() => {
+        return getTimezoneDifferenceDisplayText(transaction.value.utcOffset);
+    });
+
+    const geoLocationStatusInfo = computed<string>(() => {
+        if (geoLocationStatus.value === GeoLocationStatus.Success) {
+            return '';
+        } else if (geoLocationStatus.value === GeoLocationStatus.Getting) {
+            return tt('Getting Location...');
+        } else {
+            return tt('No Location');
+        }
+    });
+
+    const inputEmptyProblemMessage = computed<string | null>(() => {
+        if (transaction.value.type === TransactionType.Expense) {
+            if (!transaction.value.expenseCategoryId || transaction.value.expenseCategoryId === '') {
+                return 'Transaction category cannot be blank';
+            }
+
+            if (!transaction.value.sourceAccountId || transaction.value.sourceAccountId === '') {
+                return 'Transaction account cannot be blank';
+            }
+        } else if (transaction.value.type === TransactionType.Income) {
+            if (!transaction.value.incomeCategoryId || transaction.value.incomeCategoryId === '') {
+                return 'Transaction category cannot be blank';
+            }
+
+            if (!transaction.value.sourceAccountId || transaction.value.sourceAccountId === '') {
+                return 'Transaction account cannot be blank';
+            }
+        } else if (transaction.value.type === TransactionType.Transfer) {
+            if (!transaction.value.transferCategoryId || transaction.value.transferCategoryId === '') {
+                return 'Transaction category cannot be blank';
+            }
+
+            if (!transaction.value.sourceAccountId || transaction.value.sourceAccountId === '') {
+                return 'Source account cannot be blank';
+            }
+
+            if (!transaction.value.destinationAccountId || transaction.value.destinationAccountId === '') {
+                return 'Destination account cannot be blank';
+            }
+        }
+
+        if (type === 'template' && transaction.value instanceof TransactionTemplate) {
+            if (!transaction.value.name) {
+                return 'Template name cannot be blank';
+            }
+        }
+
+        return null;
+    });
+
+    const inputIsEmpty = computed<boolean>(() => {
+        return !!inputEmptyProblemMessage.value;
+    });
+
+    function createNewTransactionModel(transactionType?: number): Transaction | TransactionTemplate {
+        const now: number = getCurrentUnixTime();
+        const currentTimezone: string = settingsStore.appSettings.timeZone;
+
+        let defaultType: TransactionType = TransactionType.Expense;
+
+        if (transactionType === TransactionType.Income) {
+            defaultType = TransactionType.Income;
+        } else if (transactionType === TransactionType.Transfer) {
+            defaultType = TransactionType.Transfer;
+        }
+
+        let newTransaction: Transaction | TransactionTemplate = Transaction.createNewTransaction(defaultType, now, currentTimezone, getTimezoneOffsetMinutes(currentTimezone));
+
+        if (type === TransactionEditPageType.Template) {
+            newTransaction = TransactionTemplate.createNewTransactionTemplate(newTransaction);
+        }
+
+        return newTransaction;
+    }
+
+    function swapTransactionData(swapAccount: boolean, swapAmount: boolean): void {
+        if (swapAccount) {
+            const oldSourceAccountId = transaction.value.sourceAccountId;
+            transaction.value.sourceAccountId = transaction.value.destinationAccountId;
+            transaction.value.destinationAccountId = oldSourceAccountId;
+        }
+
+        if (swapAmount) {
+            const oldSourceAmount = transaction.value.sourceAmount;
+            transaction.value.sourceAmount = transaction.value.destinationAmount;
+            transaction.value.destinationAmount = oldSourceAmount;
+        }
+    }
+
+    function getDisplayAmount(amount: number | string, hideAmount: boolean, currencyCode: string): string {
+        if (hideAmount) {
+            return formatAmountWithCurrency('***', currencyCode);
+        }
+
+        return formatAmountWithCurrency(amount, currencyCode);
+    }
+
+    function getTransactionPictureUrl(pictureInfo?: TransactionPictureInfoBasicResponse | null): string | undefined {
+        return transactionsStore.getTransactionPictureUrl(pictureInfo);
+    }
+
+    watch(() => transaction.value.sourceAmount, (newValue, oldValue) => {
+        if (mode.value === TransactionEditPageMode.View || loading.value) {
+            return;
+        }
+
+        transactionsStore.setTransactionSuitableDestinationAmount(transaction.value, oldValue, newValue);
+    });
+
+    watch(() => transaction.value.destinationAmount, (newValue) => {
+        if (mode.value === TransactionEditPageMode.View || loading.value) {
+            return;
+        }
+
+        if (transaction.value.type === TransactionType.Expense || transaction.value.type === TransactionType.Income) {
+            transaction.value.sourceAmount = newValue;
+        }
+    });
+
+    watch(() => transaction.value.timeZone, (newValue) => {
+        for (let i = 0; i < allTimezones.value.length; i++) {
+            if (allTimezones.value[i].name === newValue) {
+                transaction.value.utcOffset = allTimezones.value[i].utcOffsetMinutes;
+                break;
+            }
+        }
+    });
+
+    return {
+        // constants
+        isSupportGeoLocation,
+        // states
+        mode,
+        editId,
+        addByTemplateId,
+        duplicateFromId,
+        clientSessionId,
+        loading,
+        submitting,
+        uploadingPicture,
+        geoLocationStatus,
+        transaction,
+        // computed states
+        currentTimezoneOffsetMinutes,
+        showAccountBalance,
+        defaultCurrency,
+        firstDayOfWeek,
+        defaultAccountId,
+        allTimezones,
+        allAccounts,
+        allVisibleAccounts,
+        allAccountsMap,
+        allVisibleCategorizedAccounts,
+        allCategories,
+        allCategoriesMap,
+        allTags,
+        allTagsMap,
+        canAddTransactionPicture,
+        title,
+        saveButtonTitle,
+        cancelButtonTitle,
+        sourceAmountName,
+        sourceAccountTitle,
+        transferInAmountTitle,
+        hasAvailableExpenseCategories,
+        hasAvailableIncomeCategories,
+        hasAvailableTransferCategories,
+        sourceAccountName,
+        destinationAccountName,
+        sourceAccountCurrency,
+        destinationAccountCurrency,
+        transactionDisplayTimezone,
+        transactionTimezoneTimeDifference,
+        geoLocationStatusInfo,
+        inputEmptyProblemMessage,
+        inputIsEmpty,
+        // functions
+        createNewTransactionModel,
+        swapTransactionData,
+        getDisplayAmount,
+        getTransactionPictureUrl
+    }
+}
diff --git a/src/views/desktop/templates/ListPage.vue b/src/views/desktop/templates/ListPage.vue
index e8ba27ae..23477c1c 100644
--- a/src/views/desktop/templates/ListPage.vue
+++ b/src/views/desktop/templates/ListPage.vue
@@ -139,7 +139,7 @@
         </v-col>
     </v-row>
 
-    <edit-dialog ref="editDialog" type="template" :persistent="true" />
+    <edit-dialog ref="editDialog" :type="TransactionEditPageType.Template" :persistent="true" />
 
     <confirm-dialog ref="confirmDialog"/>
     <snack-bar ref="snackbar" />
@@ -149,6 +149,7 @@
 import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
 import SnackBar from '@/components/desktop/SnackBar.vue';
 import EditDialog from '@/views/desktop/transactions/list/dialogs/EditDialog.vue';
+import { TransactionEditPageType } from '@/views/base/transactions/TransactionEditPageBase.ts';
 
 import { ref, computed, useTemplateRef } from 'vue';
 
diff --git a/src/views/desktop/transactions/list/dialogs/EditDialog.vue b/src/views/desktop/transactions/list/dialogs/EditDialog.vue
index 59fe1be3..e0adb59d 100644
--- a/src/views/desktop/transactions/list/dialogs/EditDialog.vue
+++ b/src/views/desktop/transactions/list/dialogs/EditDialog.vue
@@ -1,35 +1,35 @@
 <template>
-    <v-dialog width="1000" :persistent="!!persistent && mode !== 'view'" v-model="showState">
+    <v-dialog width="1000" :persistent="!!persistent && mode !== TransactionEditPageMode.View" v-model="showState">
         <v-card class="pa-2 pa-sm-4 pa-md-8">
             <template #title>
                 <div class="d-flex align-center justify-center">
                     <div class="d-flex w-100 align-center justify-center">
-                        <h4 class="text-h4">{{ $t(title) }}</h4>
+                        <h4 class="text-h4">{{ tt(title) }}</h4>
                         <v-progress-circular indeterminate size="22" class="ml-2" v-if="loading"></v-progress-circular>
                     </div>
                     <v-btn density="comfortable" color="default" variant="text" class="ml-2" :icon="true"
-                           :disabled="loading || submitting" v-if="mode !== 'view'">
+                           :disabled="loading || submitting" v-if="mode !== TransactionEditPageMode.View">
                         <v-icon :icon="icons.more" />
                         <v-menu activator="parent">
                             <v-list>
                                 <v-list-item :prepend-icon="icons.swap"
-                                             :title="$t('Swap Account')"
-                                             v-if="transaction.type === allTransactionTypes.Transfer"
+                                             :title="tt('Swap Account')"
+                                             v-if="transaction.type === TransactionType.Transfer"
                                              @click="swapTransactionData(true, false)"></v-list-item>
                                 <v-list-item :prepend-icon="icons.swap"
-                                             :title="$t('Swap Amount')"
-                                             v-if="transaction.type === allTransactionTypes.Transfer"
+                                             :title="tt('Swap Amount')"
+                                             v-if="transaction.type === TransactionType.Transfer"
                                              @click="swapTransactionData(false, true)"></v-list-item>
                                 <v-list-item :prepend-icon="icons.swap"
-                                             :title="$t('Swap Account and Amount')"
-                                             v-if="transaction.type === allTransactionTypes.Transfer"
+                                             :title="tt('Swap Account and Amount')"
+                                             v-if="transaction.type === TransactionType.Transfer"
                                              @click="swapTransactionData(true, true)"></v-list-item>
-                                <v-divider v-if="transaction.type === allTransactionTypes.Transfer" />
+                                <v-divider v-if="transaction.type === TransactionType.Transfer" />
                                 <v-list-item :prepend-icon="icons.show"
-                                             :title="$t('Show Amount')"
+                                             :title="tt('Show Amount')"
                                              v-if="transaction.hideAmount" @click="transaction.hideAmount = false"></v-list-item>
                                 <v-list-item :prepend-icon="icons.hide"
-                                             :title="$t('Hide Amount')"
+                                             :title="tt('Hide Amount')"
                                              v-if="!transaction.hideAmount" @click="transaction.hideAmount = true"></v-list-item>
                             </v-list>
                         </v-menu>
@@ -38,31 +38,31 @@
             </template>
             <v-card-text class="d-flex flex-column flex-md-row mt-md-4 pt-0">
                 <div class="mb-4">
-                    <v-tabs class="v-tabs-pill" direction="vertical" :class="{ 'readonly': type === 'transaction' && mode !== 'add' }"
+                    <v-tabs class="v-tabs-pill" direction="vertical" :class="{ 'readonly': type === TransactionEditPageType.Transaction && mode !== TransactionEditPageMode.Add }"
                             :disabled="loading || submitting" v-model="transaction.type">
-                        <v-tab :value="allTransactionTypes.Expense" :disabled="type === 'transaction' && mode !== 'add' && transaction.type !== allTransactionTypes.Expense" v-if="transaction.type !== allTransactionTypes.ModifyBalance">
-                            <span>{{ $t('Expense') }}</span>
+                        <v-tab :value="TransactionType.Expense" :disabled="type === TransactionEditPageType.Transaction && mode !== TransactionEditPageMode.Add && transaction.type !== TransactionType.Expense" v-if="transaction.type !== TransactionType.ModifyBalance">
+                            <span>{{ tt('Expense') }}</span>
                         </v-tab>
-                        <v-tab :value="allTransactionTypes.Income" :disabled="type === 'transaction' && mode !== 'add' && transaction.type !== allTransactionTypes.Income" v-if="transaction.type !== allTransactionTypes.ModifyBalance">
-                            <span>{{ $t('Income') }}</span>
+                        <v-tab :value="TransactionType.Income" :disabled="type === TransactionEditPageType.Transaction && mode !== TransactionEditPageMode.Add && transaction.type !== TransactionType.Income" v-if="transaction.type !== TransactionType.ModifyBalance">
+                            <span>{{ tt('Income') }}</span>
                         </v-tab>
-                        <v-tab :value="allTransactionTypes.Transfer" :disabled="type === 'transaction' && mode !== 'add' && transaction.type !== allTransactionTypes.Transfer" v-if="transaction.type !== allTransactionTypes.ModifyBalance">
-                            <span>{{ $t('Transfer') }}</span>
+                        <v-tab :value="TransactionType.Transfer" :disabled="type === TransactionEditPageType.Transaction && mode !== TransactionEditPageMode.Add && transaction.type !== TransactionType.Transfer" v-if="transaction.type !== TransactionType.ModifyBalance">
+                            <span>{{ tt('Transfer') }}</span>
                         </v-tab>
-                        <v-tab :value="allTransactionTypes.ModifyBalance" v-if="type === 'transaction' && transaction.type === allTransactionTypes.ModifyBalance">
-                            <span>{{ $t('Modify Balance') }}</span>
+                        <v-tab :value="TransactionType.ModifyBalance" v-if="type === TransactionEditPageType.Transaction && transaction.type === TransactionType.ModifyBalance">
+                            <span>{{ tt('Modify Balance') }}</span>
                         </v-tab>
                     </v-tabs>
                     <v-divider class="my-2"/>
                     <v-tabs direction="vertical" :disabled="loading || submitting" v-model="activeTab">
                         <v-tab value="basicInfo">
-                            <span>{{ $t('Basic Information') }}</span>
+                            <span>{{ tt('Basic Information') }}</span>
                         </v-tab>
-                        <v-tab value="map" :disabled="!transaction.geoLocation" v-if="type === 'transaction' && mapProvider">
-                            <span>{{ $t('Location on Map') }}</span>
+                        <v-tab value="map" :disabled="!transaction.geoLocation" v-if="type === TransactionEditPageType.Transaction && !!getMapProvider()">
+                            <span>{{ tt('Location on Map') }}</span>
                         </v-tab>
-                        <v-tab value="pictures" :disabled="mode !== 'add' && mode !== 'edit' && (!transaction.pictures || !transaction.pictures.length)" v-if="type === 'transaction' && isTransactionPicturesEnabled">
-                            <span>{{ $t('Pictures') }}</span>
+                        <v-tab value="pictures" :disabled="mode !== TransactionEditPageMode.Add && mode !== TransactionEditPageMode.Edit && (!transaction.pictures || !transaction.pictures.length)" v-if="type === TransactionEditPageType.Transaction && isTransactionPicturesEnabled()">
+                            <span>{{ tt('Pictures') }}</span>
                         </v-tab>
                     </v-tabs>
                 </div>
@@ -72,91 +72,91 @@
                     <v-window-item value="basicInfo">
                         <v-form class="mt-2">
                             <v-row>
-                                <v-col cols="12" v-if="type === 'template'">
+                                <v-col cols="12" v-if="type === TransactionEditPageType.Template && transaction instanceof TransactionTemplate">
                                     <v-text-field
                                         type="text"
                                         persistent-placeholder
                                         :disabled="loading || submitting"
-                                        :label="$t('Template Name')"
-                                        :placeholder="$t('Template Name')"
+                                        :label="tt('Template Name')"
+                                        :placeholder="tt('Template Name')"
                                         v-model="transaction.name"
                                     />
                                 </v-col>
-                                <v-col cols="12" :md="transaction.type === allTransactionTypes.Transfer ? 6 : 12">
+                                <v-col cols="12" :md="transaction.type === TransactionType.Transfer ? 6 : 12">
                                     <amount-input class="transaction-edit-amount font-weight-bold"
                                                   :color="sourceAmountColor"
                                                   :currency="sourceAccountCurrency"
-                                                  :readonly="mode === 'view'"
+                                                  :readonly="mode === TransactionEditPageMode.View"
                                                   :disabled="loading || submitting"
                                                   :persistent-placeholder="true"
                                                   :hide="transaction.hideAmount"
-                                                  :label="$t(sourceAmountName)"
-                                                  :placeholder="$t(sourceAmountName)"
+                                                  :label="tt(sourceAmountName)"
+                                                  :placeholder="tt(sourceAmountName)"
                                                   v-model="transaction.sourceAmount"/>
                                 </v-col>
-                                <v-col cols="12" :md="6" v-if="transaction.type === allTransactionTypes.Transfer">
+                                <v-col cols="12" :md="6" v-if="transaction.type === TransactionType.Transfer">
                                     <amount-input class="transaction-edit-amount font-weight-bold" color="primary"
                                                   :currency="destinationAccountCurrency"
-                                                  :readonly="mode === 'view'"
+                                                  :readonly="mode === TransactionEditPageMode.View"
                                                   :disabled="loading || submitting"
                                                   :persistent-placeholder="true"
                                                   :hide="transaction.hideAmount"
                                                   :label="transferInAmountTitle"
-                                                  :placeholder="$t('Transfer In Amount')"
+                                                  :placeholder="tt('Transfer In Amount')"
                                                   v-model="transaction.destinationAmount"/>
                                 </v-col>
-                                <v-col cols="12" md="12" v-if="transaction.type === allTransactionTypes.Expense">
+                                <v-col cols="12" md="12" v-if="transaction.type === TransactionType.Expense">
                                     <two-column-select 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"
-                                                       :readonly="mode === 'view'"
+                                                       :readonly="mode === TransactionEditPageMode.View"
                                                        :disabled="loading || submitting || !hasAvailableExpenseCategories"
                                                        :show-selection-primary-text="true"
-                                                       :custom-selection-primary-text="getPrimaryCategoryName(transaction.expenseCategoryId, allCategories[allCategoryTypes.Expense])"
-                                                       :custom-selection-secondary-text="getSecondaryCategoryName(transaction.expenseCategoryId, allCategories[allCategoryTypes.Expense])"
-                                                       :label="$t('Category')" :placeholder="$t('Category')"
-                                                       :items="allCategories[allCategoryTypes.Expense]"
+                                                       :custom-selection-primary-text="getTransactionPrimaryCategoryName(transaction.expenseCategoryId, allCategories[CategoryType.Expense])"
+                                                       :custom-selection-secondary-text="getTransactionSecondaryCategoryName(transaction.expenseCategoryId, allCategories[CategoryType.Expense])"
+                                                       :label="tt('Category')" :placeholder="tt('Category')"
+                                                       :items="allCategories[CategoryType.Expense] || []"
                                                        v-model="transaction.expenseCategoryId">
                                     </two-column-select>
                                 </v-col>
-                                <v-col cols="12" md="12" v-if="transaction.type === allTransactionTypes.Income">
+                                <v-col cols="12" md="12" v-if="transaction.type === TransactionType.Income">
                                     <two-column-select 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"
-                                                       :readonly="mode === 'view'"
+                                                       :readonly="mode === TransactionEditPageMode.View"
                                                        :disabled="loading || submitting || !hasAvailableIncomeCategories"
                                                        :show-selection-primary-text="true"
-                                                       :custom-selection-primary-text="getPrimaryCategoryName(transaction.incomeCategoryId, allCategories[allCategoryTypes.Income])"
-                                                       :custom-selection-secondary-text="getSecondaryCategoryName(transaction.incomeCategoryId, allCategories[allCategoryTypes.Income])"
-                                                       :label="$t('Category')" :placeholder="$t('Category')"
-                                                       :items="allCategories[allCategoryTypes.Income]"
+                                                       :custom-selection-primary-text="getTransactionPrimaryCategoryName(transaction.incomeCategoryId, allCategories[CategoryType.Income])"
+                                                       :custom-selection-secondary-text="getTransactionSecondaryCategoryName(transaction.incomeCategoryId, allCategories[CategoryType.Income])"
+                                                       :label="tt('Category')" :placeholder="tt('Category')"
+                                                       :items="allCategories[CategoryType.Income] || []"
                                                        v-model="transaction.incomeCategoryId">
                                     </two-column-select>
                                 </v-col>
-                                <v-col cols="12" md="12" v-if="transaction.type === allTransactionTypes.Transfer">
+                                <v-col cols="12" md="12" v-if="transaction.type === TransactionType.Transfer">
                                     <two-column-select 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"
-                                                       :readonly="mode === 'view'"
+                                                       :readonly="mode === TransactionEditPageMode.View"
                                                        :disabled="loading || submitting || !hasAvailableTransferCategories"
                                                        :show-selection-primary-text="true"
-                                                       :custom-selection-primary-text="getPrimaryCategoryName(transaction.transferCategoryId, allCategories[allCategoryTypes.Transfer])"
-                                                       :custom-selection-secondary-text="getSecondaryCategoryName(transaction.transferCategoryId, allCategories[allCategoryTypes.Transfer])"
-                                                       :label="$t('Category')" :placeholder="$t('Category')"
-                                                       :items="allCategories[allCategoryTypes.Transfer]"
+                                                       :custom-selection-primary-text="getTransactionPrimaryCategoryName(transaction.transferCategoryId, allCategories[CategoryType.Transfer])"
+                                                       :custom-selection-secondary-text="getTransactionSecondaryCategoryName(transaction.transferCategoryId, allCategories[CategoryType.Transfer])"
+                                                       :label="tt('Category')" :placeholder="tt('Category')"
+                                                       :items="allCategories[CategoryType.Transfer] || []"
                                                        v-model="transaction.transferCategoryId">
                                     </two-column-select>
                                 </v-col>
-                                <v-col cols="12" :md="transaction.type === allTransactionTypes.Transfer ? 6 : 12">
+                                <v-col cols="12" :md="transaction.type === TransactionType.Transfer ? 6 : 12">
                                     <two-column-select primary-key-field="id" primary-value-field="category"
                                                        primary-title-field="name" primary-footer-field="displayBalance"
                                                        primary-icon-field="icon" primary-icon-type="account"
@@ -165,16 +165,16 @@
                                                        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"
-                                                       :readonly="mode === 'view'"
+                                                       :readonly="mode === TransactionEditPageMode.View"
                                                        :disabled="loading || submitting || !allVisibleAccounts.length"
                                                        :custom-selection-primary-text="sourceAccountName"
-                                                       :label="$t(sourceAccountTitle)"
-                                                       :placeholder="$t(sourceAccountTitle)"
+                                                       :label="tt(sourceAccountTitle)"
+                                                       :placeholder="tt(sourceAccountTitle)"
                                                        :items="allVisibleCategorizedAccounts"
                                                        v-model="transaction.sourceAccountId">
                                     </two-column-select>
                                 </v-col>
-                                <v-col cols="12" md="6" v-if="transaction.type === allTransactionTypes.Transfer">
+                                <v-col cols="12" md="6" v-if="transaction.type === TransactionType.Transfer">
                                     <two-column-select primary-key-field="id" primary-value-field="category"
                                                        primary-title-field="name" primary-footer-field="displayBalance"
                                                        primary-icon-field="icon" primary-icon-type="account"
@@ -183,44 +183,44 @@
                                                        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"
-                                                       :readonly="mode === 'view'"
+                                                       :readonly="mode === TransactionEditPageMode.View"
                                                        :disabled="loading || submitting || !allVisibleAccounts.length"
                                                        :custom-selection-primary-text="destinationAccountName"
-                                                       :label="$t('Destination Account')"
-                                                       :placeholder="$t('Destination Account')"
+                                                       :label="tt('Destination Account')"
+                                                       :placeholder="tt('Destination Account')"
                                                        :items="allVisibleCategorizedAccounts"
                                                        v-model="transaction.destinationAccountId">
                                     </two-column-select>
                                 </v-col>
-                                <v-col cols="12" md="6" v-if="type === 'transaction'">
+                                <v-col cols="12" md="6" v-if="type === TransactionEditPageType.Transaction">
                                     <date-time-select
-                                        :readonly="mode === 'view'"
+                                        :readonly="mode === TransactionEditPageMode.View"
                                         :disabled="loading || submitting"
-                                        :label="$t('Transaction Time')"
+                                        :label="tt('Transaction Time')"
                                         v-model="transaction.time"
-                                        @error="showDateTimeError" />
+                                        @error="onShowDateTimeError" />
                                 </v-col>
-                                <v-col cols="12" md="6" v-if="type === 'template' && transaction.templateType === allTemplateTypes.Schedule.type">
+                                <v-col cols="12" md="6" v-if="type === TransactionEditPageType.Template && transaction instanceof TransactionTemplate && transaction.templateType === TemplateType.Schedule.type">
                                     <schedule-frequency-select
-                                        :readonly="mode === 'view'"
+                                        :readonly="mode === TransactionEditPageMode.View"
                                         :disabled="loading || submitting"
-                                        :label="$t('Scheduled Transaction Frequency')"
+                                        :label="tt('Scheduled Transaction Frequency')"
                                         v-model:type="transaction.scheduledFrequencyType"
                                         v-model="transaction.scheduledFrequency" />
                                 </v-col>
-                                <v-col cols="12" md="6" v-if="type === 'transaction' || (type === 'template' && transaction.templateType === allTemplateTypes.Schedule.type)">
+                                <v-col cols="12" md="6" v-if="type === TransactionEditPageType.Transaction || (type === TransactionEditPageType.Template && transaction instanceof TransactionTemplate && transaction.templateType === TemplateType.Schedule.type)">
                                     <v-autocomplete
                                         class="transaction-edit-timezone"
                                         item-title="displayNameWithUtcOffset"
                                         item-value="name"
                                         auto-select-first
                                         persistent-placeholder
-                                        :readonly="mode === 'view'"
+                                        :readonly="mode === TransactionEditPageMode.View"
                                         :disabled="loading || submitting"
-                                        :label="$t('Transaction Timezone')"
-                                        :placeholder="!transaction.timeZone && transaction.timeZone !== '' ? `(${transactionDisplayTimezone}) ${transactionTimezoneTimeDifference}` : $t('Timezone')"
+                                        :label="tt('Transaction Timezone')"
+                                        :placeholder="!transaction.timeZone && transaction.timeZone !== '' ? `(${transactionDisplayTimezone}) ${transactionTimezoneTimeDifference}` : tt('Timezone')"
                                         :items="allTimezones"
-                                        :no-data-text="$t('No results')"
+                                        :no-data-text="tt('No results')"
                                         v-model="transaction.timeZone"
                                     >
                                         <template #selection="{ item }">
@@ -230,12 +230,12 @@
                                         </template>
                                     </v-autocomplete>
                                 </v-col>
-                                <v-col cols="12" md="12" v-if="type === 'transaction'">
+                                <v-col cols="12" md="12" v-if="type === TransactionEditPageType.Transaction">
                                     <v-select
                                         persistent-placeholder
-                                        :readonly="mode === 'view'"
+                                        :readonly="mode === TransactionEditPageMode.View"
                                         :disabled="loading || submitting"
-                                        :label="$t('Geographic Location')"
+                                        :label="tt('Geographic Location')"
                                         v-model="transaction"
                                         v-model:menu="geoMenuState"
                                     >
@@ -246,8 +246,8 @@
 
                                         <template #no-data>
                                             <v-list class="py-0">
-                                                <v-list-item v-if="mode !== 'view'" @click="updateGeoLocation(true)">{{ $t('Update Geographic Location') }}</v-list-item>
-                                                <v-list-item v-if="mode !== 'view'" @click="clearGeoLocation">{{ $t('Clear Geographic Location') }}</v-list-item>
+                                                <v-list-item v-if="mode !== TransactionEditPageMode.View" @click="updateGeoLocation(true)">{{ tt('Update Geographic Location') }}</v-list-item>
+                                                <v-list-item v-if="mode !== TransactionEditPageMode.View" @click="clearGeoLocation">{{ tt('Clear Geographic Location') }}</v-list-item>
                                             </v-list>
                                         </template>
                                     </v-select>
@@ -260,11 +260,11 @@
                                         persistent-placeholder
                                         multiple
                                         chips
-                                        :closable-chips="mode !== 'view'"
-                                        :readonly="mode === 'view'"
+                                        :closable-chips="mode !== TransactionEditPageMode.View"
+                                        :readonly="mode === TransactionEditPageMode.View"
                                         :disabled="loading || submitting"
-                                        :label="$t('Tags')"
-                                        :placeholder="$t('None')"
+                                        :label="tt('Tags')"
+                                        :placeholder="tt('None')"
                                         :items="allTags"
                                         v-model="transaction.tagIds"
                                         v-model:search="tagSearchContent"
@@ -288,8 +288,8 @@
 
                                         <template #no-data>
                                             <v-list class="py-0">
-                                                <v-list-item v-if="tagSearchContent" @click="saveNewTag(tagSearchContent)">{{ $t('format.misc.addNewTag', { tag: tagSearchContent }) }}</v-list-item>
-                                                <v-list-item v-else-if="!tagSearchContent">{{ $t('No available tag') }}</v-list-item>
+                                                <v-list-item v-if="tagSearchContent" @click="saveNewTag(tagSearchContent)">{{ tt('format.misc.addNewTag', { tag: tagSearchContent }) }}</v-list-item>
+                                                <v-list-item v-else-if="!tagSearchContent">{{ tt('No available tag') }}</v-list-item>
                                             </v-list>
                                         </template>
                                     </v-autocomplete>
@@ -299,10 +299,10 @@
                                         type="text"
                                         persistent-placeholder
                                         rows="3"
-                                        :readonly="mode === 'view'"
+                                        :readonly="mode === TransactionEditPageMode.View"
                                         :disabled="loading || submitting"
-                                        :label="$t('Description')"
-                                        :placeholder="$t('Your transaction description (optional)')"
+                                        :label="tt('Description')"
+                                        :placeholder="tt('Your transaction description (optional)')"
                                         v-model="transaction.comment"
                                     />
                                 </v-col>
@@ -314,12 +314,12 @@
                             <v-col cols="12" md="12">
                                 <map-view ref="map" map-class="transaction-edit-map-view" :geo-location="transaction.geoLocation">
                                     <template #error-title="{ mapSupported, mapDependencyLoaded }">
-                                        <span class="text-subtitle-1" v-if="!mapSupported"><b>{{ $t('Unsupported Map Provider') }}</b></span>
-                                        <span class="text-subtitle-1" v-else-if="!mapDependencyLoaded"><b>{{ $t('Cannot Initialize Map') }}</b></span>
+                                        <span class="text-subtitle-1" v-if="!mapSupported"><b>{{ tt('Unsupported Map Provider') }}</b></span>
+                                        <span class="text-subtitle-1" v-else-if="!mapDependencyLoaded"><b>{{ tt('Cannot Initialize Map') }}</b></span>
                                     </template>
                                     <template #error-content>
                                         <p class="text-body-1">
-                                            {{ $t('Please refresh the page and try again. If the error persists, ensure that the server\'s map settings are correctly configured.') }}
+                                            {{ tt('Please refresh the page and try again. If the error persists, ensure that the server\'s map settings are correctly configured.') }}
                                         </p>
                                     </template>
                                 </map-view>
@@ -340,9 +340,9 @@
                                         </template>
                                     </v-img>
                                     <div class="picture-control-icon" :class="{ 'show-control-icon': pictureInfo.pictureId === removingPictureId }">
-                                        <v-icon size="64" :icon="icons.remove" v-if="(mode === 'add' || mode === 'edit') && pictureInfo.pictureId !== removingPictureId"/>
-                                        <v-progress-circular color="grey-500" indeterminate size="48" v-if="(mode === 'add' || mode === 'edit') && pictureInfo.pictureId === removingPictureId"></v-progress-circular>
-                                        <v-icon size="64" :icon="icons.fullscreen" v-if="mode !== 'add' && mode !== 'edit'"/>
+                                        <v-icon size="64" :icon="icons.remove" v-if="(mode === TransactionEditPageMode.Add || mode === TransactionEditPageMode.Edit) && pictureInfo.pictureId !== removingPictureId"/>
+                                        <v-progress-circular color="grey-500" indeterminate size="48" v-if="(mode === TransactionEditPageMode.Add || mode === TransactionEditPageMode.Edit) && pictureInfo.pictureId === removingPictureId"></v-progress-circular>
+                                        <v-icon size="64" :icon="icons.fullscreen" v-if="mode !== TransactionEditPageMode.Add && mode !== TransactionEditPageMode.Edit"/>
                                     </div>
                                 </v-avatar>
                             </v-col>
@@ -351,7 +351,7 @@
                                           class="transaction-picture transaction-picture-add"
                                           :class="{ 'enabled': !submitting, 'cursor-pointer': !submitting }"
                                           color="rgba(0,0,0,0)" @click="showOpenPictureDialog">
-                                    <v-tooltip activator="parent" v-if="!submitting">{{ $t('Add Picture') }}</v-tooltip>
+                                    <v-tooltip activator="parent" v-if="!submitting">{{ tt('Add Picture') }}</v-tooltip>
                                     <v-icon class="transaction-picture-add-icon" size="56" :icon="icons.add" v-if="!uploadingPicture"/>
                                     <v-progress-circular color="grey-500" indeterminate size="48" v-if="uploadingPicture"></v-progress-circular>
                                 </v-avatar>
@@ -362,23 +362,23 @@
             </v-card-text>
             <v-card-text class="overflow-y-visible">
                 <div class="w-100 d-flex justify-center flex-wrap mt-2 mt-sm-4 mt-md-6 gap-4">
-                    <v-btn :disabled="inputIsEmpty || loading || submitting" v-if="mode !== 'view'" @click="save">
-                        {{ $t(saveButtonTitle) }}
+                    <v-btn :disabled="inputIsEmpty || loading || submitting" v-if="mode !== TransactionEditPageMode.View" @click="save">
+                        {{ tt(saveButtonTitle) }}
                         <v-progress-circular indeterminate size="22" class="ml-2" v-if="submitting"></v-progress-circular>
                     </v-btn>
                     <v-btn variant="tonal" :disabled="loading || submitting"
-                           v-if="mode === 'view' && transaction.type !== allTransactionTypes.ModifyBalance"
-                           @click="duplicate">{{ $t('Duplicate') }}</v-btn>
+                           v-if="mode === TransactionEditPageMode.View && transaction.type !== TransactionType.ModifyBalance"
+                           @click="duplicate">{{ tt('Duplicate') }}</v-btn>
                     <v-btn color="warning" variant="tonal" :disabled="loading || submitting"
-                           v-if="mode === 'view' && originalTransactionEditable && transaction.type !== allTransactionTypes.ModifyBalance"
-                           @click="edit">{{ $t('Edit') }}</v-btn>
+                           v-if="mode === TransactionEditPageMode.View && originalTransactionEditable && transaction.type !== TransactionType.ModifyBalance"
+                           @click="edit">{{ tt('Edit') }}</v-btn>
                     <v-btn color="error" variant="tonal" :disabled="loading || submitting"
-                           v-if="mode === 'view' && originalTransactionEditable" @click="remove">
-                        {{ $t('Delete') }}
+                           v-if="mode === TransactionEditPageMode.View && originalTransactionEditable" @click="remove">
+                        {{ tt('Delete') }}
                         <v-progress-circular indeterminate size="22" class="ml-2" v-if="submitting"></v-progress-circular>
                     </v-btn>
                     <v-btn color="secondary" variant="tonal" :disabled="loading || submitting"
-                           @click="cancel">{{ $t(cancelButtonTitle) }}</v-btn>
+                           @click="cancel">{{ tt(cancelButtonTitle) }}</v-btn>
                 </div>
             </v-card-text>
         </v-card>
@@ -386,11 +386,24 @@
 
     <confirm-dialog ref="confirmDialog"/>
     <snack-bar ref="snackbar" />
-    <input ref="pictureInput" type="file" style="display: none" :accept="supportedImageExtensions" @change="uploadPicture($event)" />
+    <input ref="pictureInput" type="file" style="display: none" :accept="SUPPORTED_IMAGE_EXTENSIONS" @change="uploadPicture($event)" />
 </template>
 
-<script>
-import { mapStores } from 'pinia';
+<script setup lang="ts">
+import MapView from '@/components/common/MapView.vue';
+import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
+import SnackBar from '@/components/desktop/SnackBar.vue';
+
+import { ref, computed, useTemplateRef, watch, nextTick } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+import {
+    TransactionEditPageMode,
+    TransactionEditPageType,
+    GeoLocationStatus,
+    useTransactionEditPageBase
+} from '@/views/base/transactions/TransactionEditPageBase.ts';
+
 import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.ts';
@@ -398,33 +411,28 @@ import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
 import { useTransactionsStore } from '@/stores/transaction.ts';
 import { useTransactionTemplatesStore } from '@/stores/transactionTemplate.ts';
-import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
 
 import { CategoryType } from '@/core/category.ts';
 import { TransactionType, TransactionEditScopeType } from '@/core/transaction.ts';
 import { TemplateType, ScheduledTemplateFrequencyType } from '@/core/template.ts';
-import { TRANSACTION_MAX_PICTURE_COUNT } from '@/consts/transaction.ts';
 import { KnownErrorCode } from '@/consts/api.ts';
 import { SUPPORTED_IMAGE_EXTENSIONS } from '@/consts/file.ts';
+
 import { TransactionTag } from '@/models/transaction_tag.ts';
 import { TransactionTemplate } from '@/models/transaction_template.ts';
+import type { TransactionPictureInfoBasicResponse } from '@/models/transaction_picture_info.ts';
+import { Transaction } from '@/models/transaction.ts';
 
 import {
-    isArray,
-    getNameByKeyValue
-} from '@/lib/common.ts';
-import {
-    getUtcOffsetByUtcOffsetMinutes,
     getTimezoneOffsetMinutes,
     getCurrentUnixTime
 } from '@/lib/datetime.ts';
 import { generateRandomUUID } from '@/lib/misc.ts';
 import {
     getTransactionPrimaryCategoryName,
-    getTransactionSecondaryCategoryName,
-    getFirstAvailableCategoryId
+    getTransactionSecondaryCategoryName
 } from '@/lib/category.ts';
-import { setTransactionModelByTransaction } from '@/lib/transaction.ts';
+import { type SetTransactionOptions, setTransactionModelByTransaction } from '@/lib/transaction.ts';
 import {
     isTransactionPicturesEnabled,
     getMapProvider
@@ -443,873 +451,628 @@ import {
     mdiFullscreen
 } from '@mdi/js';
 
-export default {
-    props: [
-        'persistent',
-        'type',
-        'show'
-    ],
-    expose: [
-        'open'
-    ],
-    data() {
-        const transactionsStore = useTransactionsStore();
-        const newTransaction = transactionsStore.generateNewTransactionModel();
+export interface TransactionEditOptions extends SetTransactionOptions {
+    id?: string;
+    templateType?: number;
+    template?: TransactionTemplate;
+    currentTransaction?: Transaction;
+    currentTemplate?: TransactionTemplate;
+}
 
-        return {
-            showState: false,
-            mode: 'add',
-            activeTab: 'basicInfo',
-            addByTemplateId: null,
-            duplicateFromId: null,
-            editId: null,
-            originalTransactionEditable: false,
-            clientSessionId: '',
-            loading: true,
-            transaction: newTransaction,
-            geoLocationStatus: null,
-            geoMenuState: false,
-            tagSearchContent: '',
-            submitting: false,
-            uploadingPicture: false,
-            removingPictureId: '',
-            isSupportGeoLocation: !!navigator.geolocation,
-            resolve: null,
-            reject: null,
-            icons: {
-                more: mdiDotsVertical,
-                show: mdiEyeOutline,
-                hide: mdiEyeOffOutline,
-                swap: mdiSwapHorizontal,
-                tag: mdiPound,
-                picture: mdiImageOutline ,
-                add: mdiImagePlusOutline,
-                remove: mdiTrashCanOutline,
-                fullscreen : mdiFullscreen
-            }
-        };
-    },
-    computed: {
-        ...mapStores(useSettingsStore, useUserStore, useAccountsStore, useTransactionCategoriesStore, useTransactionTagsStore, useTransactionsStore, useTransactionTemplatesStore, useExchangeRatesStore),
-        title() {
-            if (this.type === 'transaction') {
-                if (this.mode === 'add') {
-                    return 'Add Transaction';
-                } else if (this.mode === 'edit') {
-                    return 'Edit Transaction';
-                } else {
-                    return 'Transaction Detail';
-                }
-            } else if (this.type === 'template' && this.transaction.templateType === TemplateType.Normal.type) {
-                if (this.mode === 'add') {
-                    return 'Add Transaction Template';
-                } else if (this.mode === 'edit') {
-                    return 'Edit Transaction Template';
-                }
-            } else if (this.type === 'template' && this.transaction.templateType === TemplateType.Schedule.type) {
-                if (this.mode === 'add') {
-                    return 'Add Scheduled Transaction';
-                } else if (this.mode === 'edit') {
-                    return 'Edit Scheduled Transaction';
-                }
+interface TransactionEditResponse {
+    message: string;
+}
+
+type MapViewType = InstanceType<typeof MapView>;
+type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
+type SnackBarType = InstanceType<typeof SnackBar>;
+
+const props = defineProps<{
+    type: TransactionEditPageType;
+    persistent?: boolean;
+    show?: boolean;
+}>();
+
+const { tt } = useI18n();
+
+const {
+    mode,
+    isSupportGeoLocation,
+    editId,
+    addByTemplateId,
+    duplicateFromId,
+    clientSessionId,
+    loading,
+    submitting,
+    uploadingPicture,
+    geoLocationStatus,
+    transaction,
+    defaultCurrency,
+    defaultAccountId,
+    allTimezones,
+    allVisibleAccounts,
+    allAccountsMap,
+    allVisibleCategorizedAccounts,
+    allCategories,
+    allCategoriesMap,
+    allTags,
+    allTagsMap,
+    canAddTransactionPicture,
+    title,
+    saveButtonTitle,
+    cancelButtonTitle,
+    sourceAmountName,
+    sourceAccountTitle,
+    transferInAmountTitle,
+    hasAvailableExpenseCategories,
+    hasAvailableIncomeCategories,
+    hasAvailableTransferCategories,
+    sourceAccountName,
+    destinationAccountName,
+    sourceAccountCurrency,
+    destinationAccountCurrency,
+    transactionDisplayTimezone,
+    transactionTimezoneTimeDifference,
+    geoLocationStatusInfo,
+    inputEmptyProblemMessage,
+    inputIsEmpty,
+    createNewTransactionModel,
+    swapTransactionData,
+    getTransactionPictureUrl
+} = useTransactionEditPageBase(props.type);
+
+const settingsStore = useSettingsStore();
+const userStore = useUserStore();
+const accountsStore = useAccountsStore();
+const transactionCategoriesStore = useTransactionCategoriesStore();
+const transactionTagsStore = useTransactionTagsStore();
+const transactionsStore = useTransactionsStore();
+const transactionTemplatesStore = useTransactionTemplatesStore();
+
+const icons = {
+    more: mdiDotsVertical,
+    show: mdiEyeOutline,
+    hide: mdiEyeOffOutline,
+    swap: mdiSwapHorizontal,
+    tag: mdiPound,
+    picture: mdiImageOutline ,
+    add: mdiImagePlusOutline,
+    remove: mdiTrashCanOutline,
+    fullscreen : mdiFullscreen
+};
+
+const map = useTemplateRef<MapViewType>('map');
+const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
+const pictureInput = useTemplateRef<HTMLInputElement>('pictureInput');
+
+const showState = ref<boolean>(false);
+const activeTab = ref<string>('basicInfo');
+const originalTransactionEditable = ref<boolean>(false);
+const geoMenuState = ref<boolean>(false);
+const tagSearchContent = ref<string>('');
+const removingPictureId = ref<string>('');
+
+let resolveFunc: ((response?: TransactionEditResponse) => void) | null = null;
+let rejectFunc: ((reason?: unknown) => void) | null = null;
+
+const sourceAmountColor = computed<string | undefined>(() => {
+    if (transaction.value.type === TransactionType.Expense) {
+        return 'expense';
+    } else if (transaction.value.type === TransactionType.Income) {
+        return 'income';
+    } else if (transaction.value.type === TransactionType.Transfer) {
+        return 'primary';
+    }
+
+    return undefined;
+});
+
+function setTransaction(newTransaction: Transaction | null, options: SetTransactionOptions, setContextData: boolean, convertContextTime: boolean): void {
+    setTransactionModelByTransaction(
+        transaction.value,
+        newTransaction,
+        allCategories.value,
+        allCategoriesMap.value,
+        allVisibleAccounts.value,
+        allAccountsMap.value,
+        allTagsMap.value,
+        defaultAccountId.value,
+        {
+            type: options.type,
+            categoryId: options.categoryId,
+            accountId: options.accountId,
+            destinationAccountId: options.destinationAccountId,
+            amount: options.amount,
+            destinationAmount: options.destinationAmount,
+            tagIds: options.tagIds,
+            comment: options.comment
+        },
+        setContextData,
+        convertContextTime
+    );
+}
+
+function open(options: TransactionEditOptions): Promise<TransactionEditResponse | undefined> {
+    addByTemplateId.value = null;
+    duplicateFromId.value = null;
+    showState.value = true;
+    activeTab.value = 'basicInfo';
+    loading.value = true;
+    submitting.value = false;
+    geoLocationStatus.value = null;
+    originalTransactionEditable.value = false;
+
+    const newTransaction = createNewTransactionModel(options.type);
+    setTransaction(newTransaction, options, true, false);
+
+    const promises: Promise<unknown>[] = [
+        accountsStore.loadAllAccounts({ force: false }),
+        transactionCategoriesStore.loadAllCategories({ force: false }),
+        transactionTagsStore.loadAllTags({ force: false })
+    ];
+
+    if (props.type === TransactionEditPageType.Transaction) {
+        if (options && options.id) {
+            if (options.currentTransaction) {
+                setTransaction(options.currentTransaction, options, true, true);
             }
 
-            return '';
-        },
-        saveButtonTitle() {
-            if (this.mode === 'add') {
-                return 'Add';
-            } else {
-                return 'Save';
-            }
-        },
-        cancelButtonTitle() {
-            if (this.mode === 'view') {
-                return 'Close';
-            } else {
-                return 'Cancel';
-            }
-        },
-        sourceAmountName() {
-            if (this.transaction.type === this.allTransactionTypes.Expense) {
-                return 'Expense Amount';
-            } else if (this.transaction.type === this.allTransactionTypes.Income) {
-                return 'Income Amount';
-            } else if (this.transaction.type === this.allTransactionTypes.Transfer) {
-                return 'Transfer Out Amount';
-            } else {
-                return 'Amount';
-            }
-        },
-        sourceAccountTitle() {
-            if (this.transaction.type === this.allTransactionTypes.Expense || this.transaction.type === this.allTransactionTypes.Income) {
-                return 'Account';
-            } else if (this.transaction.type === this.allTransactionTypes.Transfer) {
-                return 'Source Account';
-            } else {
-                return 'Account';
-            }
-        },
-        transferInAmountTitle() {
-            const sourceAccount = this.allAccountsMap[this.transaction.sourceAccountId];
-            const destinationAccount = this.allAccountsMap[this.transaction.destinationAccountId];
+            mode.value = TransactionEditPageMode.View;
+            editId.value = options.id;
 
-            if (!sourceAccount || !destinationAccount || sourceAccount.currency === destinationAccount.currency) {
-                return this.$t('Transfer In Amount');
+            promises.push(transactionsStore.getTransaction({ transactionId: editId.value }));
+        } else {
+            mode.value = TransactionEditPageMode.Add;
+            editId.value = null;
+
+            if (options.template) {
+                setTransaction(options.template, options, false, false);
+                addByTemplateId.value = options.template.id;
+            } else if ((settingsStore.appSettings.autoSaveTransactionDraft === 'enabled' || settingsStore.appSettings.autoSaveTransactionDraft === 'confirmation') && transactionsStore.transactionDraft) {
+                setTransaction(Transaction.ofDraft(transactionsStore.transactionDraft), options, false, false);
             }
 
-            const fromExchangeRate = this.exchangeRatesStore.latestExchangeRateMap[sourceAccount.currency];
-            const toExchangeRate = this.exchangeRatesStore.latestExchangeRateMap[destinationAccount.currency];
-            const amountRate = this.$locale.getAdaptiveAmountRate(this.userStore, this.transaction.sourceAmount, this.transaction.destinationAmount, fromExchangeRate, toExchangeRate);
-
-            if (!amountRate) {
-                return this.$t('Transfer In Amount');
-            }
-
-            return this.$t('Transfer In Amount') + ` (${amountRate})`;
-        },
-        defaultCurrency() {
-            return this.userStore.currentUserDefaultCurrency;
-        },
-        defaultAccountId() {
-            return this.userStore.currentUserDefaultAccountId;
-        },
-        allTransactionTypes() {
-            return TransactionType;
-        },
-        allCategoryTypes() {
-            return CategoryType;
-        },
-        allTemplateTypes() {
-            return TemplateType.all();
-        },
-        allTimezones() {
-            return this.$locale.getAllTimezones(true);
-        },
-        allAccounts() {
-            return this.accountsStore.allPlainAccounts;
-        },
-        allVisibleAccounts() {
-            return this.accountsStore.allVisiblePlainAccounts;
-        },
-        allVisibleCategorizedAccounts() {
-            return this.$locale.getCategorizedAccountsWithDisplayBalance(this.allVisibleAccounts, this.showAccountBalance, this.defaultCurrency, this.settingsStore, this.userStore, this.exchangeRatesStore);
-        },
-        allAccountsMap() {
-            return this.accountsStore.allAccountsMap;
-        },
-        allCategories() {
-            return this.transactionCategoriesStore.allTransactionCategories;
-        },
-        allCategoriesMap() {
-            return this.transactionCategoriesStore.allTransactionCategoriesMap;
-        },
-        allTags() {
-            return this.transactionTagsStore.allTransactionTags;
-        },
-        allTagsMap() {
-            return this.transactionTagsStore.allTransactionTagsMap;
-        },
-        supportedImageExtensions() {
-            return SUPPORTED_IMAGE_EXTENSIONS;
-        },
-        hasAvailableExpenseCategories() {
-            if (!this.allCategories || !this.allCategories[this.allCategoryTypes.Expense] || !this.allCategories[this.allCategoryTypes.Expense].length) {
-                return false;
-            }
-
-            const firstAvailableCategoryId = getFirstAvailableCategoryId(this.allCategories[this.allCategoryTypes.Expense]);
-            return firstAvailableCategoryId !== '';
-        },
-        hasAvailableIncomeCategories() {
-            if (!this.allCategories || !this.allCategories[this.allCategoryTypes.Income] || !this.allCategories[this.allCategoryTypes.Income].length) {
-                return false;
-            }
-
-            const firstAvailableCategoryId = getFirstAvailableCategoryId(this.allCategories[this.allCategoryTypes.Income]);
-            return firstAvailableCategoryId !== '';
-        },
-        hasAvailableTransferCategories() {
-            if (!this.allCategories || !this.allCategories[this.allCategoryTypes.Transfer] || !this.allCategories[this.allCategoryTypes.Transfer].length) {
-                return false;
-            }
-
-            const firstAvailableCategoryId = getFirstAvailableCategoryId(this.allCategories[this.allCategoryTypes.Transfer]);
-            return firstAvailableCategoryId !== '';
-        },
-        sourceAccountName() {
-            if (this.transaction.sourceAccountId) {
-                return getNameByKeyValue(this.allAccounts, this.transaction.sourceAccountId, 'id', 'name');
-            } else {
-                return this.$t('None');
-            }
-        },
-        destinationAccountName() {
-            if (this.transaction.destinationAccountId) {
-                return getNameByKeyValue(this.allAccounts, this.transaction.destinationAccountId, 'id', 'name');
-            } else {
-                return this.$t('None');
-            }
-        },
-        sourceAccountCurrency() {
-            const sourceAccount = this.allAccountsMap[this.transaction.sourceAccountId];
-
-            if (sourceAccount) {
-                return sourceAccount.currency;
-            }
-
-            return this.defaultCurrency;
-        },
-        destinationAccountCurrency() {
-            const destinationAccount = this.allAccountsMap[this.transaction.destinationAccountId];
-
-            if (destinationAccount) {
-                return destinationAccount.currency;
-            }
-
-            return this.defaultCurrency;
-        },
-        transactionDisplayTimezone() {
-            return `UTC${getUtcOffsetByUtcOffsetMinutes(this.transaction.utcOffset)}`;
-        },
-        transactionTimezoneTimeDifference() {
-            return this.$locale.getTimezoneDifferenceDisplayText(this.transaction.utcOffset);
-        },
-        sourceAmountColor() {
-            if (this.transaction.type === this.allTransactionTypes.Expense) {
-                return 'expense';
-            } else if (this.transaction.type === this.allTransactionTypes.Income) {
-                return 'income';
-            } else if (this.transaction.type === this.allTransactionTypes.Transfer) {
-                return 'primary';
-            }
-
-            return null;
-        },
-        geoLocationStatusInfo() {
-            if (this.geoLocationStatus === 'success') {
-                return '';
-            } else if (this.geoLocationStatus === 'getting') {
-                return this.$t('Getting Location...');
-            } else {
-                return this.$t('No Location');
-            }
-        },
-        showAccountBalance() {
-            return this.settingsStore.appSettings.showAccountBalance;
-        },
-        isTransactionPicturesEnabled() {
-            return isTransactionPicturesEnabled();
-        },
-        canAddTransactionPicture() {
-            if (this.type !== 'transaction' || (this.mode !== 'add' && this.mode !== 'edit')) {
-                return false;
-            }
-
-            return !isArray(this.transaction.pictures) || this.transaction.pictures.length < TRANSACTION_MAX_PICTURE_COUNT;
-        },
-        mapProvider() {
-            return getMapProvider();
-        },
-        inputIsEmpty() {
-            return !!this.inputEmptyProblemMessage;
-        },
-        inputEmptyProblemMessage() {
-            if (this.transaction.type === this.allTransactionTypes.Expense) {
-                if (!this.transaction.expenseCategoryId || this.transaction.expenseCategoryId === '') {
-                    return 'Transaction category cannot be blank';
-                }
-
-                if (!this.transaction.sourceAccountId || this.transaction.sourceAccountId === '') {
-                    return 'Transaction account cannot be blank';
-                }
-            } else if (this.transaction.type === this.allTransactionTypes.Income) {
-                if (!this.transaction.incomeCategoryId || this.transaction.incomeCategoryId === '') {
-                    return 'Transaction category cannot be blank';
-                }
-
-                if (!this.transaction.sourceAccountId || this.transaction.sourceAccountId === '') {
-                    return 'Transaction account cannot be blank';
-                }
-            } else if (this.transaction.type === this.allTransactionTypes.Transfer) {
-                if (!this.transaction.transferCategoryId || this.transaction.transferCategoryId === '') {
-                    return 'Transaction category cannot be blank';
-                }
-
-                if (!this.transaction.sourceAccountId || this.transaction.sourceAccountId === '') {
-                    return 'Source account cannot be blank';
-                }
-
-                if (!this.transaction.destinationAccountId || this.transaction.destinationAccountId === '') {
-                    return 'Destination account cannot be blank';
-                }
-            }
-
-            if (this.type === 'template') {
-                if (!this.transaction.name) {
-                    return 'Template name cannot be blank';
-                }
-            }
-
-            return null;
-        }
-    },
-    watch: {
-        'activeTab': function (newValue) {
-            if (newValue === 'map') {
-                this.$nextTick(() => {
-                    if (this.$refs.map) {
-                        this.$refs.map.initMapView();
-                    }
-                });
-            }
-        },
-        'transaction.sourceAmount': function (newValue, oldValue) {
-            if (this.mode === 'view' || this.loading) {
-                return;
-            }
-
-            this.transactionsStore.setTransactionSuitableDestinationAmount(this.transaction, oldValue, newValue);
-        },
-        'transaction.destinationAmount': function (newValue) {
-            if (this.mode === 'view' || this.loading) {
-                return;
-            }
-
-            if (this.transaction.type === this.allTransactionTypes.Expense || this.transaction.type === this.allTransactionTypes.Income) {
-                this.transaction.sourceAmount = newValue;
-            }
-        },
-        'transaction.timeZone': function (newValue) {
-            for (let i = 0; i < this.allTimezones.length; i++) {
-                if (this.allTimezones[i].name === newValue) {
-                    this.transaction.utcOffset = this.allTimezones[i].utcOffsetMinutes;
-                    break;
-                }
+            if (settingsStore.appSettings.autoGetCurrentGeoLocation
+                && !geoLocationStatus.value && !transaction.value.geoLocation) {
+                updateGeoLocation(false);
             }
         }
-    },
-    methods: {
-        open(options) {
-            const self = this;
-            self.addByTemplateId = null;
-            self.duplicateFromId = null;
-            self.showState = true;
-            self.activeTab = 'basicInfo';
-            self.loading = true;
-            self.submitting = false;
-            self.geoLocationStatus = null;
-            self.originalTransactionEditable = false;
+    } else if (props.type === TransactionEditPageType.Template) {
+        const template = TransactionTemplate.createNewTransactionTemplate(transaction.value);
+        template.name = '';
 
-            const newTransaction = self.transactionsStore.generateNewTransactionModel(options.type);
-            self.setTransaction(newTransaction, options, true, false);
+        if (options && options.templateType) {
+            template.templateType = options.templateType;
+        }
 
-            const promises = [
-                self.accountsStore.loadAllAccounts({ force: false }),
-                self.transactionCategoriesStore.loadAllCategories({ force: false }),
-                self.transactionTagsStore.loadAllTags({ force: false })
-            ];
+        if (template.templateType === TemplateType.Schedule.type) {
+            template.scheduledFrequencyType = ScheduledTemplateFrequencyType.Disabled.type;
+            template.scheduledFrequency = '';
+        }
 
-            if (self.type === 'transaction') {
-                if (options && options.id) {
-                    if (options.currentTransaction) {
-                        self.setTransaction(options.currentTransaction, options, true, true);
-                    }
+        transaction.value = template;
 
-                    self.mode = 'view';
-                    self.editId = options.id;
-
-                    promises.push(self.transactionsStore.getTransaction({ transactionId: self.editId }));
-                } else {
-                    self.mode = 'add';
-                    self.editId = null;
-
-                    if (options.template) {
-                        self.setTransaction(options.template, options, false, false);
-                        self.addByTemplateId = options.template.id;
-                    } else if ((self.settingsStore.appSettings.autoSaveTransactionDraft === 'enabled' || self.settingsStore.appSettings.autoSaveTransactionDraft === 'confirmation') && self.transactionsStore.transactionDraft) {
-                        self.setTransaction(self.transactionsStore.transactionDraft, options, false, false);
-                    }
-
-                    if (self.settingsStore.appSettings.autoGetCurrentGeoLocation
-                        && !self.geoLocationStatus && !self.transaction.geoLocation) {
-                        self.updateGeoLocation(false);
-                    }
-                }
-            } else if (self.type === 'template') {
-                self.transaction = TransactionTemplate.createNewTransactionTemplate(self.transaction);
-                self.transaction.name = '';
-
-                if (options && options.templateType) {
-                    self.transaction.templateType = options.templateType;
-                }
-
-                if (self.transaction.templateType === TemplateType.Schedule.type) {
-                    self.transaction.scheduledFrequencyType = ScheduledTemplateFrequencyType.Disabled.type;
-                    self.transaction.scheduledFrequency = '';
-                }
-
-                if (options && options.id) {
-                    if (options.currentTemplate) {
-                        self.setTransaction(options.currentTemplate, options, false, false);
-                        self.transaction.templateType = options.currentTemplate.templateType;
-                        self.transaction.name = options.currentTemplate.name;
-
-                        if (self.transaction.templateType === TemplateType.Schedule.type) {
-                            self.transaction.scheduledFrequencyType = options.currentTemplate.scheduledFrequencyType;
-                            self.transaction.scheduledFrequency = options.currentTemplate.scheduledFrequency;
-                            self.transaction.utcOffset = options.currentTemplate.utcOffset;
-                            self.transaction.timeZone = undefined;
-                        }
-                    }
-
-                    self.mode = 'edit';
-                    self.editId = options.id;
-                    self.transaction.id = options.id;
-
-                    promises.push(self.transactionTemplatesStore.getTemplate({ templateId: self.editId }));
-                } else {
-                    self.mode = 'add';
-                    self.editId = null;
-                    self.transaction.id = '';
-                }
+        if (options && options.id) {
+            if (options.currentTemplate) {
+                setTransaction(options.currentTemplate, options, false, false);
+                (transaction.value as TransactionTemplate).from(options.currentTemplate);
             }
 
-            if (options.type && options.type !== '0' &&
-                options.type >= self.allTransactionTypes.Income &&
-                options.type <= self.allTransactionTypes.Transfer) {
-                self.transaction.type = parseInt(options.type);
-            }
+            mode.value = TransactionEditPageMode.Edit;
+            editId.value = options.id;
+            transaction.value.id = options.id;
 
-            if (self.mode === 'add') {
-                self.clientSessionId = generateRandomUUID();
-            }
-
-            Promise.all(promises).then(function (responses) {
-                if (self.editId && !responses[3]) {
-                    if (self.reject) {
-                        if (self.type === 'transaction') {
-                            self.reject('Unable to retrieve transaction');
-                        } else if (self.type === 'template') {
-                            self.reject('Unable to retrieve template');
-                        }
-                    }
-
-                    return;
-                }
-
-                if (self.type === 'transaction' && options && options.id && responses[3]) {
-                    const transaction = responses[3];
-                    self.setTransaction(transaction, options, true, true);
-                    self.originalTransactionEditable = transaction.editable;
-                } else if (self.type === 'template' && options && options.id && responses[3]) {
-                    const template = responses[3];
-                    self.setTransaction(template, options, false, false);
-                    self.transaction.templateType = template.templateType;
-                    self.transaction.name = template.name;
-
-                    if (self.transaction.templateType === TemplateType.Schedule.type) {
-                        self.transaction.scheduledFrequencyType = template.scheduledFrequencyType;
-                        self.transaction.scheduledFrequency = template.scheduledFrequency;
-                        self.transaction.utcOffset = template.utcOffset;
-                        self.transaction.timeZone = undefined;
-                    }
-                } else {
-                    self.setTransaction(null, options, true, true);
-                }
-
-                self.loading = false;
-            }).catch(error => {
-                logger.error('failed to load essential data for editing transaction', error);
-
-                self.loading = false;
-                self.showState = false;
-
-                if (!error.processed) {
-                    if (self.reject) {
-                        self.reject(error);
-                    }
-                }
-            });
-
-            return new Promise((resolve, reject) => {
-                self.resolve = resolve;
-                self.reject = reject;
-            });
-        },
-        save() {
-            const self = this;
-
-            const problemMessage = self.inputEmptyProblemMessage;
-
-            if (problemMessage) {
-                self.$refs.snackbar.showMessage(problemMessage);
-                return;
-            }
-
-            if (self.type === 'transaction' && (self.mode === 'add' || self.mode === 'edit')) {
-                const doSubmit = function () {
-                    self.submitting = true;
-
-                    self.transactionsStore.saveTransaction({
-                        transaction: self.transaction,
-                        defaultCurrency: self.defaultCurrency,
-                        isEdit: self.mode === 'edit',
-                        clientSessionId: self.clientSessionId
-                    }).then(() => {
-                        self.submitting = false;
-
-                        if (self.resolve) {
-                            if (self.mode === 'add') {
-                                self.resolve({
-                                    message: 'You have added a new transaction'
-                                });
-                            } else if (self.mode === 'edit') {
-                                self.resolve({
-                                    message: 'You have saved this transaction'
-                                });
-                            }
-                        }
-
-                        if (self.mode === 'add' && !self.addByTemplateId && !self.duplicateFromId) {
-                            self.transactionsStore.clearTransactionDraft();
-                        }
-
-                        self.showState = false;
-                    }).catch(error => {
-                        self.submitting = false;
-
-                        if (error.error && (error.error.errorCode === KnownErrorCode.TransactionCannotCreateInThisTime || error.error.errorCode === KnownErrorCode.TransactionCannotModifyInThisTime)) {
-                            self.$refs.confirmDialog.open('You have set this time range to prevent editing transactions. Would you like to change the editable transaction range to All?').then(() => {
-                                self.submitting = true;
-
-                                self.userStore.updateUserTransactionEditScope({
-                                    transactionEditScope: TransactionEditScopeType.All.type
-                                }).then(() => {
-                                    self.submitting = false;
-
-                                    self.$refs.snackbar.showMessage('Your editable transaction range has been set to All');
-                                }).catch(error => {
-                                    self.submitting = false;
-
-                                    if (!error.processed) {
-                                        self.$refs.snackbar.showError(error);
-                                    }
-                                });
-                            });
-                        } else if (!error.processed) {
-                            self.$refs.snackbar.showError(error);
-                        }
-                    });
-                };
-
-                if (self.transaction.sourceAmount === 0) {
-                    self.$refs.confirmDialog.open('Are you sure you want to save this transaction with a zero amount?').then(() => {
-                        doSubmit();
-                    });
-                } else {
-                    doSubmit();
-                }
-            } else if (self.type === 'template' && (self.mode === 'add' || self.mode === 'edit')) {
-                self.submitting = true;
-
-                self.transactionTemplatesStore.saveTemplateContent({
-                    template: self.transaction,
-                    isEdit: self.mode === 'edit',
-                    clientSessionId: self.clientSessionId
-                }).then(() => {
-                    self.submitting = false;
-
-                    if (self.resolve) {
-                        if (self.mode === 'add') {
-                            self.resolve({
-                                message: 'You have added a new template'
-                            });
-                        } else if (self.mode === 'edit') {
-                            self.resolve({
-                                message: 'You have saved this template'
-                            });
-                        }
-                    }
-
-                    self.showState = false;
-                }).catch(error => {
-                    self.submitting = false;
-
-                    if (!error.processed) {
-                        self.$refs.snackbar.showError(error);
-                    }
-                });
-            }
-        },
-        duplicate() {
-            if (this.type !== 'transaction' || this.mode !== 'view') {
-                return;
-            }
-
-            this.editId = null;
-            this.duplicateFromId = this.transaction.id;
-            this.activeTab = 'basicInfo';
-            this.transaction.id = '';
-            this.transaction.time = getCurrentUnixTime();
-            this.transaction.timeZone = this.settingsStore.appSettings.timeZone;
-            this.transaction.utcOffset = getTimezoneOffsetMinutes(this.transaction.timeZone);
-            this.transaction.removeGeoLocation();
-            this.transaction.clearPictures();
-            this.mode = 'add';
-        },
-        edit() {
-            if (this.type !== 'transaction' || this.mode !== 'view') {
-                return;
-            }
-
-            this.mode = 'edit';
-        },
-        remove() {
-            const self = this;
-
-            if (self.type !== 'transaction' || self.mode !== 'view') {
-                return;
-            }
-
-            self.$refs.confirmDialog.open('Are you sure you want to delete this transaction?').then(() => {
-                self.submitting = true;
-
-                self.transactionsStore.deleteTransaction({
-                    transaction: self.transaction,
-                    defaultCurrency: self.defaultCurrency
-                }).then(() => {
-                    if (self.resolve) {
-                        self.resolve();
-                    }
-
-                    self.submitting = false;
-                    self.showState = false;
-                }).catch(error => {
-                    self.submitting = false;
-
-                    if (!error.processed) {
-                        self.$refs.snackbar.showError(error);
-                    }
-                });
-            });
-        },
-        cancel() {
-            const self = this;
-
-            const doClose = function () {
-                if (self.reject) {
-                    self.reject();
-                }
-
-                self.showState = false;
-            };
-
-            if (self.type !== 'transaction' || self.mode !== 'add' || self.addByTemplateId || self.duplicateFromId) {
-                doClose();
-                return;
-            }
-
-            if (self.settingsStore.appSettings.autoSaveTransactionDraft === 'confirmation') {
-                if (self.transactionsStore.isTransactionDraftModified(self.transaction)) {
-                    self.$refs.confirmDialog.open('Do you want to save this transaction draft?').then(() => {
-                        self.transactionsStore.saveTransactionDraft(self.transaction);
-                        doClose();
-                    }).catch(() => {
-                        self.transactionsStore.clearTransactionDraft();
-                        doClose();
-                    });
-                } else {
-                    self.transactionsStore.clearTransactionDraft();
-                    doClose();
-                }
-            } else if (self.settingsStore.appSettings.autoSaveTransactionDraft === 'enabled') {
-                self.transactionsStore.saveTransactionDraft(self.transaction);
-                doClose();
-            } else {
-                doClose();
-            }
-        },
-        showDateTimeError(error) {
-            this.$refs.snackbar.showError(error);
-        },
-        updateGeoLocation(forceUpdate) {
-            const self = this;
-            self.geoMenuState = false;
-
-            if (!self.isSupportGeoLocation) {
-                logger.warn('this browser does not support geo location');
-
-                if (forceUpdate) {
-                    self.$refs.snackbar.showMessage('Unable to retrieve current position');
-                }
-                return;
-            }
-
-            navigator.geolocation.getCurrentPosition(function (position) {
-                if (!position || !position.coords) {
-                    logger.error('current position is null');
-                    self.geoLocationStatus = 'error';
-
-                    if (forceUpdate) {
-                        self.$refs.snackbar.showMessage('Unable to retrieve current position');
-                    }
-
-                    return;
-                }
-
-                self.geoLocationStatus = 'success';
-
-                self.transaction.setLatitudeAndLongitude(position.coords.latitude, position.coords.longitude);
-            }, function (err) {
-                logger.error('cannot retrieve current position', err);
-                self.geoLocationStatus = 'error';
-
-                if (forceUpdate) {
-                    self.$refs.snackbar.showMessage('Unable to retrieve current position');
-                }
-            });
-
-            self.geoLocationStatus = 'getting';
-        },
-        clearGeoLocation() {
-            this.geoMenuState = false;
-            this.geoLocationStatus = null;
-            this.transaction.removeGeoLocation();
-        },
-        saveNewTag(tagName) {
-            const self = this;
-
-            self.submitting = true;
-
-            self.transactionTagsStore.saveTag({
-                tag: TransactionTag.createNewTag(tagName)
-            }).then(tag => {
-                self.submitting = false;
-
-                if (tag && tag.id) {
-                    self.transaction.tagIds.push(tag.id);
-                }
-            }).catch(error => {
-                self.submitting = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        swapTransactionData(swapAccount, swapAmount) {
-            if (swapAccount) {
-                const oldSourceAccountId = this.transaction.sourceAccountId;
-                this.transaction.sourceAccountId = this.transaction.destinationAccountId;
-                this.transaction.destinationAccountId = oldSourceAccountId;
-            }
-
-            if (swapAmount) {
-                const oldSourceAmount = this.transaction.sourceAmount;
-                this.transaction.sourceAmount = this.transaction.destinationAmount;
-                this.transaction.destinationAmount = oldSourceAmount;
-            }
-        },
-        showOpenPictureDialog() {
-            if (!this.canAddTransactionPicture || this.submitting) {
-                return;
-            }
-
-            this.$refs.pictureInput.click();
-        },
-        uploadPicture(event) {
-            if (!event || !event.target || !event.target.files || !event.target.files.length) {
-                return;
-            }
-
-            const self = this;
-            const pictureFile = event.target.files[0];
-
-            event.target.value = null;
-
-            self.uploadingPicture = true;
-            self.submitting = true;
-
-            self.transactionsStore.uploadTransactionPicture({ pictureFile }).then(response => {
-                self.transaction.addPicture(response);
-                self.uploadingPicture = false;
-                self.submitting = false;
-            }).catch(error => {
-                self.uploadingPicture = false;
-                self.submitting = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        viewOrRemovePicture(pictureInfo) {
-            if (this.mode !== 'add' && this.mode !== 'edit') {
-                window.open(this.getTransactionPictureUrl(pictureInfo), '_blank');
-                return;
-            }
-
-            const self = this;
-
-            self.$refs.confirmDialog.open('Are you sure you want to remove this transaction picture?').then(() => {
-                self.removingPictureId = pictureInfo.pictureId;
-                self.submitting = true;
-
-                self.transactionsStore.removeUnusedTransactionPicture({ pictureInfo }).then(response => {
-                    if (response) {
-                        self.transaction.removePicture(pictureInfo);
-                    }
-
-                    self.removingPictureId = '';
-                    self.submitting = false;
-                }).catch(error => {
-                    if (error.error && error.error.errorCode === KnownErrorCode.TransactionPictureNotFound) {
-                        self.transaction.removePicture(pictureInfo);
-                    } else if (!error.processed) {
-                        self.$refs.snackbar.showError(error);
-                    }
-
-                    self.removingPictureId = '';
-                    self.submitting = false;
-                });
-            });
-        },
-        getTransactionPictureUrl(pictureInfo) {
-            return this.transactionsStore.getTransactionPictureUrl(pictureInfo);
-        },
-        getPrimaryCategoryName(categoryId, allCategories) {
-            return getTransactionPrimaryCategoryName(categoryId, allCategories);
-        },
-        getSecondaryCategoryName(categoryId, allCategories) {
-            return getTransactionSecondaryCategoryName(categoryId, allCategories);
-        },
-        setTransaction(transaction, options, setContextData, convertContextTime) {
-            setTransactionModelByTransaction(
-                this.transaction,
-                transaction,
-                this.allCategories,
-                this.allCategoriesMap,
-                this.allVisibleAccounts,
-                this.allAccountsMap,
-                this.allTagsMap,
-                this.defaultAccountId,
-                {
-                    type: options.type,
-                    categoryId: options.categoryId,
-                    accountId: options.accountId,
-                    destinationAccountId: options.destinationAccountId,
-                    amount: options.amount,
-                    destinationAmount: options.destinationAmount,
-                    tagIds: options.tagIds,
-                    comment: options.comment
-                },
-                setContextData,
-                convertContextTime
-            );
+            promises.push(transactionTemplatesStore.getTemplate({ templateId: editId.value }));
+        } else {
+            mode.value = TransactionEditPageMode.Add;
+            editId.value = null;
+            transaction.value.id = '';
         }
     }
+
+    if (options.type &&
+        options.type >= TransactionType.Income &&
+        options.type <= TransactionType.Transfer) {
+        transaction.value.type = options.type;
+    }
+
+    if (mode.value === TransactionEditPageMode.Add) {
+        clientSessionId.value = generateRandomUUID();
+    }
+
+    Promise.all(promises).then(function (responses) {
+        if (editId.value && !responses[3]) {
+            if (rejectFunc) {
+                if (props.type === TransactionEditPageType.Transaction) {
+                    rejectFunc('Unable to retrieve transaction');
+                } else if (props.type === TransactionEditPageType.Template) {
+                    rejectFunc('Unable to retrieve template');
+                }
+            }
+
+            return;
+        }
+
+        if (props.type === TransactionEditPageType.Transaction && options && options.id && responses[3] && responses[3] instanceof Transaction) {
+            const transaction: Transaction = responses[3];
+            setTransaction(transaction, options, true, true);
+            originalTransactionEditable.value = transaction.editable;
+        } else if (props.type === TransactionEditPageType.Template && options && options.id && responses[3] && responses[3] instanceof TransactionTemplate) {
+            const template: TransactionTemplate = responses[3];
+            setTransaction(template, options, false, false);
+
+            if (!(transaction.value instanceof TransactionTemplate)) {
+                transaction.value = TransactionTemplate.createNewTransactionTemplate(transaction.value);
+            }
+
+            (transaction.value as TransactionTemplate).from(template);
+        } else {
+            setTransaction(null, options, true, true);
+        }
+
+        loading.value = false;
+    }).catch(error => {
+        logger.error('failed to load essential data for editing transaction', error);
+
+        loading.value = false;
+        showState.value = false;
+
+        if (!error.processed) {
+            if (rejectFunc) {
+                rejectFunc(error);
+            }
+        }
+    });
+
+    return new Promise((resolve, reject) => {
+        resolveFunc = resolve;
+        rejectFunc = reject;
+    });
 }
+
+function save(): void {
+    const problemMessage = inputEmptyProblemMessage.value;
+
+    if (problemMessage) {
+        snackbar.value?.showMessage(problemMessage);
+        return;
+    }
+
+    if (props.type === TransactionEditPageType.Transaction && (mode.value === TransactionEditPageMode.Add || mode.value === TransactionEditPageMode.Edit)) {
+        const doSubmit = function () {
+            submitting.value = true;
+
+            transactionsStore.saveTransaction({
+                transaction: transaction.value as Transaction,
+                defaultCurrency: defaultCurrency.value,
+                isEdit: mode.value === TransactionEditPageMode.Edit,
+                clientSessionId: clientSessionId.value
+            }).then(() => {
+                submitting.value = false;
+
+                if (resolveFunc) {
+                    if (mode.value === TransactionEditPageMode.Add) {
+                        resolveFunc({
+                            message: 'You have added a new transaction'
+                        });
+                    } else if (mode.value === TransactionEditPageMode.Edit) {
+                        resolveFunc({
+                            message: 'You have saved this transaction'
+                        });
+                    }
+                }
+
+                if (mode.value === TransactionEditPageMode.Add && !addByTemplateId.value && !duplicateFromId.value) {
+                    transactionsStore.clearTransactionDraft();
+                }
+
+                showState.value = false;
+            }).catch(error => {
+                submitting.value = false;
+
+                if (error.error && (error.error.errorCode === KnownErrorCode.TransactionCannotCreateInThisTime || error.error.errorCode === KnownErrorCode.TransactionCannotModifyInThisTime)) {
+                    confirmDialog.value?.open('You have set this time range to prevent editing transactions. Would you like to change the editable transaction range to All?').then(() => {
+                        submitting.value = true;
+
+                        userStore.updateUserTransactionEditScope({
+                            transactionEditScope: TransactionEditScopeType.All.type
+                        }).then(() => {
+                            submitting.value = false;
+
+                            snackbar.value?.showMessage('Your editable transaction range has been set to All');
+                        }).catch(error => {
+                            submitting.value = false;
+
+                            if (!error.processed) {
+                                snackbar.value?.showError(error);
+                            }
+                        });
+                    });
+                } else if (!error.processed) {
+                    snackbar.value?.showError(error);
+                }
+            });
+        };
+
+        if (transaction.value.sourceAmount === 0) {
+            confirmDialog.value?.open('Are you sure you want to save this transaction with a zero amount?').then(() => {
+                doSubmit();
+            });
+        } else {
+            doSubmit();
+        }
+    } else if (props.type === TransactionEditPageType.Template && (mode.value === TransactionEditPageMode.Add || mode.value === TransactionEditPageMode.Edit)) {
+        submitting.value = true;
+
+        transactionTemplatesStore.saveTemplateContent({
+            template: transaction.value as TransactionTemplate,
+            isEdit: mode.value === TransactionEditPageMode.Edit,
+            clientSessionId: clientSessionId.value
+        }).then(() => {
+            submitting.value = false;
+
+            if (resolveFunc) {
+                if (mode.value === TransactionEditPageMode.Add) {
+                    resolveFunc({
+                        message: 'You have added a new template'
+                    });
+                } else if (mode.value === TransactionEditPageMode.Edit) {
+                    resolveFunc({
+                        message: 'You have saved this template'
+                    });
+                }
+            }
+
+            showState.value = false;
+        }).catch(error => {
+            submitting.value = false;
+
+            if (!error.processed) {
+                snackbar.value?.showError(error);
+            }
+        });
+    }
+}
+
+function duplicate(): void {
+    if (props.type !== TransactionEditPageType.Transaction || mode.value !== TransactionEditPageMode.View) {
+        return;
+    }
+
+    editId.value = null;
+    duplicateFromId.value = transaction.value.id;
+    activeTab.value = 'basicInfo';
+    transaction.value.id = '';
+    transaction.value.time = getCurrentUnixTime();
+    transaction.value.timeZone = settingsStore.appSettings.timeZone;
+    transaction.value.utcOffset = getTimezoneOffsetMinutes(transaction.value.timeZone);
+    transaction.value.removeGeoLocation();
+    transaction.value.clearPictures();
+    mode.value = TransactionEditPageMode.Add;
+}
+
+function edit(): void {
+    if (props.type !== TransactionEditPageType.Transaction || mode.value !== TransactionEditPageMode.View) {
+        return;
+    }
+
+    mode.value = TransactionEditPageMode.Edit;
+}
+
+function remove(): void {
+    if (props.type !== TransactionEditPageType.Transaction || mode.value !== TransactionEditPageMode.View) {
+        return;
+    }
+
+    confirmDialog.value?.open('Are you sure you want to delete this transaction?').then(() => {
+        submitting.value = true;
+
+        transactionsStore.deleteTransaction({
+            transaction: transaction.value as Transaction,
+            defaultCurrency: defaultCurrency.value
+        }).then(() => {
+            if (resolveFunc) {
+                resolveFunc();
+            }
+
+            submitting.value = false;
+            showState.value = false;
+        }).catch(error => {
+            submitting.value = false;
+
+            if (!error.processed) {
+                snackbar.value?.showError(error);
+            }
+        });
+    });
+}
+
+function cancel(): void {
+    const doClose = function () {
+        if (rejectFunc) {
+            rejectFunc();
+        }
+
+        showState.value = false;
+    };
+
+    if (props.type !== TransactionEditPageType.Transaction || mode.value !== TransactionEditPageMode.Add || addByTemplateId.value || duplicateFromId.value) {
+        doClose();
+        return;
+    }
+
+    if (settingsStore.appSettings.autoSaveTransactionDraft === 'confirmation') {
+        if (transactionsStore.isTransactionDraftModified(transaction.value)) {
+            confirmDialog.value?.open('Do you want to save this transaction draft?').then(() => {
+                transactionsStore.saveTransactionDraft(transaction.value);
+                doClose();
+            }).catch(() => {
+                transactionsStore.clearTransactionDraft();
+                doClose();
+            });
+        } else {
+            transactionsStore.clearTransactionDraft();
+            doClose();
+        }
+    } else if (settingsStore.appSettings.autoSaveTransactionDraft === 'enabled') {
+        transactionsStore.saveTransactionDraft(transaction.value);
+        doClose();
+    } else {
+        doClose();
+    }
+}
+
+function updateGeoLocation(forceUpdate: boolean): void {
+    geoMenuState.value = false;
+
+    if (!isSupportGeoLocation) {
+        logger.warn('this browser does not support geo location');
+
+        if (forceUpdate) {
+            snackbar.value?.showMessage('Unable to retrieve current position');
+        }
+        return;
+    }
+
+    navigator.geolocation.getCurrentPosition(function (position) {
+        if (!position || !position.coords) {
+            logger.error('current position is null');
+            geoLocationStatus.value = GeoLocationStatus.Error;
+
+            if (forceUpdate) {
+                snackbar.value?.showMessage('Unable to retrieve current position');
+            }
+
+            return;
+        }
+
+        geoLocationStatus.value = GeoLocationStatus.Success;
+
+        transaction.value.setLatitudeAndLongitude(position.coords.latitude, position.coords.longitude);
+    }, function (err) {
+        logger.error('cannot retrieve current position', err);
+        geoLocationStatus.value = GeoLocationStatus.Error;
+
+        if (forceUpdate) {
+            snackbar.value?.showMessage('Unable to retrieve current position');
+        }
+    });
+
+    geoLocationStatus.value = GeoLocationStatus.Getting;
+}
+
+function clearGeoLocation(): void {
+    geoMenuState.value = false;
+    geoLocationStatus.value = null;
+    transaction.value.removeGeoLocation();
+}
+
+function saveNewTag(tagName: string): void {
+    submitting.value = true;
+
+    transactionTagsStore.saveTag({
+        tag: TransactionTag.createNewTag(tagName)
+    }).then(tag => {
+        submitting.value = false;
+
+        if (tag && tag.id) {
+            transaction.value.tagIds.push(tag.id);
+        }
+    }).catch(error => {
+        submitting.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function showOpenPictureDialog(): void {
+    if (!canAddTransactionPicture.value || submitting.value) {
+        return;
+    }
+
+    pictureInput.value?.click();
+}
+
+function uploadPicture(event: Event): void {
+    if (!event || !event.target) {
+        return;
+    }
+
+    const el = event.target as HTMLInputElement;
+
+    if (!el.files || !el.files.length) {
+        return;
+    }
+
+    const pictureFile = el.files[0];
+
+    el.value = '';
+
+    uploadingPicture.value = true;
+    submitting.value = true;
+
+    transactionsStore.uploadTransactionPicture({ pictureFile }).then(response => {
+        transaction.value.addPicture(response);
+        uploadingPicture.value = false;
+        submitting.value = false;
+    }).catch(error => {
+        uploadingPicture.value = false;
+        submitting.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function viewOrRemovePicture(pictureInfo: TransactionPictureInfoBasicResponse): void {
+    if (mode.value !== TransactionEditPageMode.Add && mode.value !== TransactionEditPageMode.Edit) {
+        window.open(getTransactionPictureUrl(pictureInfo), '_blank');
+        return;
+    }
+
+    confirmDialog.value?.open('Are you sure you want to remove this transaction picture?').then(() => {
+        removingPictureId.value = pictureInfo.pictureId;
+        submitting.value = true;
+
+        transactionsStore.removeUnusedTransactionPicture({ pictureInfo }).then(response => {
+            if (response) {
+                transaction.value.removePicture(pictureInfo);
+            }
+
+            removingPictureId.value = '';
+            submitting.value = false;
+        }).catch(error => {
+            if (error.error && error.error.errorCode === KnownErrorCode.TransactionPictureNotFound) {
+                transaction.value.removePicture(pictureInfo);
+            } else if (!error.processed) {
+                snackbar.value?.showError(error);
+            }
+
+            removingPictureId.value = '';
+            submitting.value = false;
+        });
+    });
+}
+
+function onShowDateTimeError(error: string): void {
+    snackbar.value?.showError(error);
+}
+
+watch(activeTab, (newValue) => {
+    if (newValue === 'map') {
+        nextTick(() => {
+            map.value?.initMapView();
+        });
+    }
+});
+
+defineExpose({
+    open
+});
 </script>
 
 <style>
diff --git a/src/views/mobile/transactions/EditPage.vue b/src/views/mobile/transactions/EditPage.vue
index d2b06087..0168e424 100644
--- a/src/views/mobile/transactions/EditPage.vue
+++ b/src/views/mobile/transactions/EditPage.vue
@@ -1,45 +1,45 @@
 <template>
     <f7-page with-subnavbar @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
         <f7-navbar>
-            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
-            <f7-nav-title :title="$t(title)"></f7-nav-title>
+            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
+            <f7-nav-title :title="tt(title)"></f7-nav-title>
             <f7-nav-right>
-                <f7-link icon-f7="ellipsis" @click="showMoreActionSheet = true" v-if="mode !== 'view'"></f7-link>
-                <f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="$t(saveButtonTitle)" @click="save" v-if="mode !== 'view'"></f7-link>
+                <f7-link icon-f7="ellipsis" @click="showMoreActionSheet = true" v-if="mode !== TransactionEditPageMode.View"></f7-link>
+                <f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="tt(saveButtonTitle)" @click="save" v-if="mode !== TransactionEditPageMode.View"></f7-link>
             </f7-nav-right>
 
             <f7-subnavbar>
-                <f7-segmented strong :class="{ 'readonly': type === 'transaction' && mode !== 'add' }">
-                    <f7-button :text="$t('Expense')" :active="transaction.type === allTransactionTypes.Expense"
-                               :disabled="type === 'transaction' && mode !== 'add' && transaction.type !== allTransactionTypes.Expense"
-                               v-if="transaction.type !== allTransactionTypes.ModifyBalance"
-                               @click="transaction.type = allTransactionTypes.Expense"></f7-button>
-                    <f7-button :text="$t('Income')" :active="transaction.type === allTransactionTypes.Income"
-                               :disabled="type === 'transaction' && mode !== 'add' && transaction.type !== allTransactionTypes.Income"
-                               v-if="transaction.type !== allTransactionTypes.ModifyBalance"
-                               @click="transaction.type = allTransactionTypes.Income"></f7-button>
-                    <f7-button :text="$t('Transfer')" :active="transaction.type === allTransactionTypes.Transfer"
-                               :disabled="type === 'transaction' && mode !== 'add' && transaction.type !== allTransactionTypes.Transfer"
-                               v-if="transaction.type !== allTransactionTypes.ModifyBalance"
-                               @click="transaction.type = allTransactionTypes.Transfer"></f7-button>
-                    <f7-button :text="$t('Modify Balance')" :active="transaction.type === allTransactionTypes.ModifyBalance"
-                               v-if="type === 'transaction' && transaction.type === allTransactionTypes.ModifyBalance"></f7-button>
+                <f7-segmented strong :class="{ 'readonly': pageTypeAndMode?.type === TransactionEditPageType.Transaction && mode !== TransactionEditPageMode.Add }">
+                    <f7-button :text="tt('Expense')" :active="transaction.type === TransactionType.Expense"
+                               :disabled="pageTypeAndMode?.type === TransactionEditPageType.Transaction && mode !== TransactionEditPageMode.Add && transaction.type !== TransactionType.Expense"
+                               v-if="transaction.type !== TransactionType.ModifyBalance"
+                               @click="transaction.type = TransactionType.Expense"></f7-button>
+                    <f7-button :text="tt('Income')" :active="transaction.type === TransactionType.Income"
+                               :disabled="pageTypeAndMode?.type === TransactionEditPageType.Transaction && mode !== TransactionEditPageMode.Add && transaction.type !== TransactionType.Income"
+                               v-if="transaction.type !== TransactionType.ModifyBalance"
+                               @click="transaction.type = TransactionType.Income"></f7-button>
+                    <f7-button :text="tt('Transfer')" :active="transaction.type === TransactionType.Transfer"
+                               :disabled="pageTypeAndMode?.type === TransactionEditPageType.Transaction && mode !== TransactionEditPageMode.Add && transaction.type !== TransactionType.Transfer"
+                               v-if="transaction.type !== TransactionType.ModifyBalance"
+                               @click="transaction.type = TransactionType.Transfer"></f7-button>
+                    <f7-button :text="tt('Modify Balance')" :active="transaction.type === TransactionType.ModifyBalance"
+                               v-if="pageTypeAndMode?.type === TransactionEditPageType.Transaction && transaction.type === TransactionType.ModifyBalance"></f7-button>
                 </f7-segmented>
             </f7-subnavbar>
         </f7-navbar>
 
         <f7-list strong inset dividers class="margin-vertical skeleton-text" v-if="loading">
-            <f7-list-input label="Template Name" placeholder="Template Name" v-if="type === 'template'"></f7-list-input>
+            <f7-list-input label="Template Name" placeholder="Template Name" v-if="pageTypeAndMode?.type === TransactionEditPageType.Template"></f7-list-input>
             <f7-list-item
                 class="transaction-edit-amount ebk-large-amount"
                 header="Expense Amount" title="0.00">
             </f7-list-item>
             <f7-list-item class="list-item-with-header-and-title list-item-title-hide-overflow" header="Category" title="Category Names"></f7-list-item>
             <f7-list-item class="list-item-with-header-and-title" header="Account" title="Account Name"></f7-list-item>
-            <f7-list-item class="list-item-with-header-and-title" header="Transaction Time" title="YYYY/MM/DD HH:mm:ss" v-if="type === 'transaction'"></f7-list-item>
-            <f7-list-item class="list-item-with-header-and-title" header="Scheduled Transaction Frequency" title="Every XXXXX" v-if="type === 'template' && transaction.templateType === allTemplateTypes.Schedule.type"></f7-list-item>
-            <f7-list-item class="list-item-with-header-and-title list-item-title-hide-overflow list-item-no-item-after" header="Transaction Timezone" title="(UTC XX:XX) System Default" link="#" :no-chevron="mode === 'view'" v-if="type === 'transaction' || (type === 'template' && transaction.templateType === allTemplateTypes.Schedule.type)"></f7-list-item>
-            <f7-list-item class="list-item-with-header-and-title list-item-title-hide-overflow" header="Geographic Location" title="No Location" v-if="type === 'transaction'"></f7-list-item>
+            <f7-list-item class="list-item-with-header-and-title" header="Transaction Time" title="YYYY/MM/DD HH:mm:ss" v-if="pageTypeAndMode?.type === TransactionEditPageType.Transaction"></f7-list-item>
+            <f7-list-item class="list-item-with-header-and-title" header="Scheduled Transaction Frequency" title="Every XXXXX" v-if="pageTypeAndMode?.type === TransactionEditPageType.Template && transaction instanceof TransactionTemplate && transaction.templateType === TemplateType.Schedule.type"></f7-list-item>
+            <f7-list-item class="list-item-with-header-and-title list-item-title-hide-overflow list-item-no-item-after" header="Transaction Timezone" title="(UTC XX:XX) System Default" link="#" :no-chevron="mode === TransactionEditPageMode.View" v-if="pageTypeAndMode?.type === TransactionEditPageType.Transaction || (pageTypeAndMode?.type === TransactionEditPageType.Template && transaction instanceof TransactionTemplate && transaction.templateType === TemplateType.Schedule.type)"></f7-list-item>
+            <f7-list-item class="list-item-with-header-and-title list-item-title-hide-overflow" header="Geographic Location" title="No Location" v-if="pageTypeAndMode?.type === TransactionEditPageType.Transaction"></f7-list-item>
             <f7-list-item header="Tags">
                 <template #footer>
                     <f7-block class="margin-top-half no-padding no-margin">
@@ -54,22 +54,22 @@
             <f7-list-input
                 type="text"
                 clear-button
-                :label="$t('Template Name')"
-                :placeholder="$t('Template Name')"
+                :label="tt('Template Name')"
+                :placeholder="tt('Template Name')"
                 v-model:value="transaction.name"
-                v-if="type === 'template'"
+                v-if="pageTypeAndMode?.type === TransactionEditPageType.Template && transaction instanceof TransactionTemplate"
             ></f7-list-input>
 
             <f7-list-item
                 class="transaction-edit-amount"
                 link="#" no-chevron
                 :class="sourceAmountClass"
-                :header="$t(sourceAmountName)"
+                :header="tt(sourceAmountName)"
                 :title="getDisplayAmount(transaction.sourceAmount, transaction.hideAmount, sourceAccountCurrency)"
                 @click="showSourceAmountSheet = true"
             >
-                <number-pad-sheet :min-value="allowedMinAmount"
-                                  :max-value="allowedMaxAmount"
+                <number-pad-sheet :min-value="TRANSACTION_MIN_AMOUNT"
+                                  :max-value="TRANSACTION_MAX_AMOUNT"
                                   :currency="sourceAccountCurrency"
                                   v-model:show="showSourceAmountSheet"
                                   v-model="transaction.sourceAmount"
@@ -83,10 +83,10 @@
                 :header="transferInAmountTitle"
                 :title="getDisplayAmount(transaction.destinationAmount, transaction.hideAmount, destinationAccountCurrency)"
                 @click="showDestinationAmountSheet = true"
-                v-if="transaction.type === allTransactionTypes.Transfer"
+                v-if="transaction.type === TransactionType.Transfer"
             >
-                <number-pad-sheet :min-value="allowedMinAmount"
-                                  :max-value="allowedMaxAmount"
+                <number-pad-sheet :min-value="TRANSACTION_MIN_AMOUNT"
+                                  :max-value="TRANSACTION_MAX_AMOUNT"
                                   :currency="destinationAccountCurrency"
                                   v-model:show="showDestinationAmountSheet"
                                   v-model="transaction.destinationAmount"
@@ -97,19 +97,19 @@
                 class="list-item-with-header-and-title list-item-title-hide-overflow"
                 key="expenseCategorySelection"
                 link="#" no-chevron
-                :class="{ 'disabled': !hasAvailableExpenseCategories, 'readonly': mode === 'view' }"
-                :header="$t('Category')"
+                :class="{ 'disabled': !hasAvailableExpenseCategories, 'readonly': mode === TransactionEditPageMode.View }"
+                :header="tt('Category')"
                 @click="showCategorySheet = true"
-                v-if="transaction.type === allTransactionTypes.Expense"
+                v-if="transaction.type === TransactionType.Expense"
             >
                 <template #title>
                     <div class="list-item-custom-title" v-if="hasAvailableExpenseCategories">
-                        <span>{{ getPrimaryCategoryName(transaction.expenseCategoryId, allCategories[allCategoryTypes.Expense]) }}</span>
+                        <span>{{ getTransactionPrimaryCategoryName(transaction.expenseCategoryId, allCategories[CategoryType.Expense]) }}</span>
                         <f7-icon class="category-separate-icon" f7="chevron_right"></f7-icon>
-                        <span>{{ getSecondaryCategoryName(transaction.expenseCategoryId, allCategories[allCategoryTypes.Expense]) }}</span>
+                        <span>{{ getTransactionSecondaryCategoryName(transaction.expenseCategoryId, allCategories[CategoryType.Expense]) }}</span>
                     </div>
                     <div class="list-item-custom-title" v-else-if="!hasAvailableExpenseCategories">
-                        <span>{{ $t('None') }}</span>
+                        <span>{{ tt('None') }}</span>
                     </div>
                 </template>
                 <tree-view-selection-sheet primary-key-field="id" primary-title-field="name"
@@ -118,7 +118,7 @@
                                            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"
-                                           :items="allCategories[allCategoryTypes.Expense]"
+                                           :items="allCategories[CategoryType.Expense]"
                                            v-model:show="showCategorySheet"
                                            v-model="transaction.expenseCategoryId">
                 </tree-view-selection-sheet>
@@ -128,19 +128,19 @@
                 class="list-item-with-header-and-title list-item-title-hide-overflow"
                 key="incomeCategorySelection"
                 link="#" no-chevron
-                :class="{ 'disabled': !hasAvailableIncomeCategories, 'readonly': mode === 'view' }"
-                :header="$t('Category')"
+                :class="{ 'disabled': !hasAvailableIncomeCategories, 'readonly': mode === TransactionEditPageMode.View }"
+                :header="tt('Category')"
                 @click="showCategorySheet = true"
-                v-if="transaction.type === allTransactionTypes.Income"
+                v-if="transaction.type === TransactionType.Income"
             >
                 <template #title>
                     <div class="list-item-custom-title" v-if="hasAvailableIncomeCategories">
-                        <span>{{ getPrimaryCategoryName(transaction.incomeCategoryId, allCategories[allCategoryTypes.Income]) }}</span>
+                        <span>{{ getTransactionPrimaryCategoryName(transaction.incomeCategoryId, allCategories[CategoryType.Income]) }}</span>
                         <f7-icon class="category-separate-icon" f7="chevron_right"></f7-icon>
-                        <span>{{ getSecondaryCategoryName(transaction.incomeCategoryId, allCategories[allCategoryTypes.Income]) }}</span>
+                        <span>{{ getTransactionSecondaryCategoryName(transaction.incomeCategoryId, allCategories[CategoryType.Income]) }}</span>
                     </div>
                     <div class="list-item-custom-title" v-else-if="!hasAvailableIncomeCategories">
-                        <span>{{ $t('None') }}</span>
+                        <span>{{ tt('None') }}</span>
                     </div>
                 </template>
                 <tree-view-selection-sheet primary-key-field="id" primary-title-field="name"
@@ -149,7 +149,7 @@
                                            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"
-                                           :items="allCategories[allCategoryTypes.Income]"
+                                           :items="allCategories[CategoryType.Income]"
                                            v-model:show="showCategorySheet"
                                            v-model="transaction.incomeCategoryId">
                 </tree-view-selection-sheet>
@@ -159,19 +159,19 @@
                 class="list-item-with-header-and-title list-item-title-hide-overflow"
                 key="transferCategorySelection"
                 link="#" no-chevron
-                :class="{ 'disabled': !hasAvailableTransferCategories, 'readonly': mode === 'view' }"
-                :header="$t('Category')"
+                :class="{ 'disabled': !hasAvailableTransferCategories, 'readonly': mode === TransactionEditPageMode.View }"
+                :header="tt('Category')"
                 @click="showCategorySheet = true"
-                v-if="transaction.type === allTransactionTypes.Transfer"
+                v-if="transaction.type === TransactionType.Transfer"
             >
                 <template #title>
                     <div class="list-item-custom-title" v-if="hasAvailableTransferCategories">
-                        <span>{{ getPrimaryCategoryName(transaction.transferCategoryId, allCategories[allCategoryTypes.Transfer]) }}</span>
+                        <span>{{ getTransactionPrimaryCategoryName(transaction.transferCategoryId, allCategories[CategoryType.Transfer]) }}</span>
                         <f7-icon class="category-separate-icon" f7="chevron_right"></f7-icon>
-                        <span>{{ getSecondaryCategoryName(transaction.transferCategoryId, allCategories[allCategoryTypes.Transfer]) }}</span>
+                        <span>{{ getTransactionSecondaryCategoryName(transaction.transferCategoryId, allCategories[CategoryType.Transfer]) }}</span>
                     </div>
                     <div class="list-item-custom-title" v-else-if="!hasAvailableTransferCategories">
-                        <span>{{ $t('None') }}</span>
+                        <span>{{ tt('None') }}</span>
                     </div>
                 </template>
                 <tree-view-selection-sheet primary-key-field="id" primary-title-field="name"
@@ -180,7 +180,7 @@
                                            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"
-                                           :items="allCategories[allCategoryTypes.Transfer]"
+                                           :items="allCategories[CategoryType.Transfer]"
                                            v-model:show="showCategorySheet"
                                            v-model="transaction.transferCategoryId">
                 </tree-view-selection-sheet>
@@ -189,8 +189,8 @@
             <f7-list-item
                 class="list-item-with-header-and-title"
                 link="#" no-chevron
-                :class="{ 'disabled': !allVisibleAccounts.length, 'readonly': mode === 'view' }"
-                :header="$t(sourceAccountTitle)"
+                :class="{ 'disabled': !allVisibleAccounts.length, 'readonly': mode === TransactionEditPageMode.View }"
+                :header="tt(sourceAccountTitle)"
                 :title="sourceAccountName"
                 @click="showSourceAccountSheet = true"
             >
@@ -211,10 +211,10 @@
             <f7-list-item
                 class="list-item-with-header-and-title"
                 link="#" no-chevron
-                :class="{ 'disabled': !allVisibleAccounts.length, 'readonly': mode === 'view' }"
-                :header="$t('Destination Account')"
+                :class="{ 'disabled': !allVisibleAccounts.length, 'readonly': mode === TransactionEditPageMode.View }"
+                :header="tt('Destination Account')"
                 :title="destinationAccountName"
-                v-if="transaction.type === allTransactionTypes.Transfer"
+                v-if="transaction.type === TransactionType.Transfer"
                 @click="showDestinationAccountSheet = true"
             >
                 <two-column-list-item-selection-sheet primary-key-field="id" primary-value-field="category"
@@ -234,11 +234,11 @@
             <f7-list-item
                 class="transaction-edit-datetime list-item-with-header-and-title"
                 link="#" no-chevron
-                :class="{ 'readonly': mode === 'view' && transaction.utcOffset === currentTimezoneOffsetMinutes }"
-                v-if="type === 'transaction'"
+                :class="{ 'readonly': mode === TransactionEditPageMode.View && transaction.utcOffset === currentTimezoneOffsetMinutes }"
+                v-if="pageTypeAndMode?.type === TransactionEditPageType.Transaction"
             >
                 <template #header>
-                    <div class="transaction-edit-datetime-header" @click="showDateTimeDialog('time')">{{ $t('Transaction Time') }}</div>
+                    <div class="transaction-edit-datetime-header" @click="showDateTimeDialog('time')">{{ tt('Transaction Time') }}</div>
                 </template>
                 <template #title>
                     <div class="transaction-edit-datetime-title">
@@ -254,11 +254,11 @@
             <f7-list-item
                 class="list-item-with-header-and-title"
                 link="#" no-chevron
-                :class="{ 'readonly': mode === 'view' }"
-                :header="$t('Scheduled Transaction Frequency')"
+                :class="{ 'readonly': mode === TransactionEditPageMode.View }"
+                :header="tt('Scheduled Transaction Frequency')"
                 :title="transactionDisplayScheduledFrequency"
                 @click="showTransactionScheduledFrequencySheet = true"
-                v-if="type === 'template' && transaction.templateType === allTemplateTypes.Schedule.type"
+                v-if="pageTypeAndMode?.type === TransactionEditPageType.Template && transaction instanceof TransactionTemplate && transaction.templateType === TemplateType.Schedule.type"
             >
                 <schedule-frequency-sheet v-model:show="showTransactionScheduledFrequencySheet"
                                           v-model:type="transaction.scheduledFrequencyType"
@@ -267,12 +267,12 @@
             </f7-list-item>
 
             <f7-list-item
-                :no-chevron="mode === 'view'"
+                :no-chevron="mode === TransactionEditPageMode.View"
                 class="list-item-with-header-and-title list-item-title-hide-overflow list-item-no-item-after"
-                :class="{ 'readonly': mode === 'view' }"
-                :header="$t('Transaction Timezone')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Timezone'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Transaction Timezone'), popupCloseLinkText: $t('Done') }"
-                v-if="type === 'transaction' || (type === 'template' && transaction.templateType === allTemplateTypes.Schedule.type)"
+                :class="{ 'readonly': mode === TransactionEditPageMode.View }"
+                :header="tt('Transaction Timezone')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Timezone'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Transaction Timezone'), popupCloseLinkText: tt('Done') }"
+                v-if="pageTypeAndMode?.type === TransactionEditPageType.Transaction || (pageTypeAndMode?.type === TransactionEditPageType.Template && transaction instanceof TransactionTemplate && transaction.templateType === TemplateType.Schedule.type)"
             >
                 <select v-model="transaction.timeZone">
                     <option :value="timezone.name" :key="timezone.name"
@@ -290,10 +290,10 @@
             <f7-list-item
                 link="#" no-chevron
                 class="list-item-with-header-and-title list-item-title-hide-overflow"
-                :class="{ 'readonly': mode === 'view' && !transaction.geoLocation }"
-                :header="$t('Geographic Location')"
+                :class="{ 'readonly': mode === TransactionEditPageMode.View && !transaction.geoLocation }"
+                :header="tt('Geographic Location')"
                 @click="showGeoLocationActionSheet = true"
-                v-if="type === 'transaction'"
+                v-if="pageTypeAndMode?.type === TransactionEditPageType.Transaction"
             >
                 <template #title>
                     <f7-block class="list-item-custom-title no-padding no-margin">
@@ -309,8 +309,8 @@
 
             <f7-list-item
                 link="#" no-chevron
-                :class="{ 'readonly': mode === 'view' }"
-                :header="$t('Tags')"
+                :class="{ 'readonly': mode === TransactionEditPageMode.View }"
+                :header="tt('Tags')"
                 @click="showTransactionTagSheet = true"
             >
                 <transaction-tag-selection-sheet :allow-add-new-tag="true"
@@ -330,7 +330,7 @@
                         </f7-chip>
                     </f7-block>
                     <f7-block class="margin-top-half no-padding no-margin" v-else-if="!transaction.tagIds || !transaction.tagIds.length">
-                        <f7-chip class="transaction-edit-tag" :text="$t('None')">
+                        <f7-chip class="transaction-edit-tag" :text="tt('None')">
                         </f7-chip>
                     </f7-block>
                 </template>
@@ -338,7 +338,7 @@
 
             <f7-list-item
                 link="#" no-chevron
-                :header="$t('Pictures')"
+                :header="tt('Pictures')"
                 v-if="showTransactionPictures || (transaction.pictures && transaction.pictures.length > 0)"
             >
                 <template #footer>
@@ -354,7 +354,7 @@
                                           @click="viewOrRemovePicture(pictureInfo)">
                                 <div class="transaction-picture">
                                     <div class="display-flex justify-content-center align-items-center transaction-picture-control-backdrop"
-                                         v-if="mode === 'add' || mode === 'edit'">
+                                         v-if="mode === TransactionEditPageMode.Add || mode === TransactionEditPageMode.Edit">
                                         <f7-icon class="picture-control-icon picture-remove-icon" f7="trash" v-if="pictureInfo.pictureId !== removingPictureId"></f7-icon>
                                         <f7-preloader color="white" :size="28" v-if="pictureInfo.pictureId === removingPictureId" />
                                     </div>
@@ -376,9 +376,9 @@
                 type="textarea"
                 class="transaction-edit-comment"
                 style="height: auto"
-                :class="{ 'readonly': mode === 'view' }"
-                :label="$t('Description')"
-                :placeholder="mode !== 'view' ? $t('Your transaction description (optional)') : ''"
+                :class="{ 'readonly': mode === TransactionEditPageMode.View }"
+                :label="tt('Description')"
+                :placeholder="mode !== TransactionEditPageMode.View ? tt('Your transaction description (optional)') : ''"
                 v-textarea-auto-size
                 v-model:value="transaction.comment"
             ></f7-list-input>
@@ -386,50 +386,61 @@
 
         <f7-actions close-by-outside-click close-on-escape :opened="showGeoLocationActionSheet" @actions:closed="showGeoLocationActionSheet = false">
             <f7-actions-group>
-                <f7-actions-button v-if="mode !== 'view'" @click="updateGeoLocation(true)">{{ $t('Update Geographic Location') }}</f7-actions-button>
-                <f7-actions-button v-if="mode !== 'view'" @click="clearGeoLocation">{{ $t('Clear Geographic Location') }}</f7-actions-button>
+                <f7-actions-button v-if="mode !== TransactionEditPageMode.View" @click="updateGeoLocation(true)">{{ tt('Update Geographic Location') }}</f7-actions-button>
+                <f7-actions-button v-if="mode !== TransactionEditPageMode.View" @click="clearGeoLocation">{{ tt('Clear Geographic Location') }}</f7-actions-button>
             </f7-actions-group>
-            <f7-actions-group v-if="mapProvider">
-                <f7-actions-button :class="{ 'disabled': !transaction.geoLocation }" @click="showGeoLocationMapSheet = true">{{ $t('Show on the map') }}</f7-actions-button>
+            <f7-actions-group v-if="!!getMapProvider()">
+                <f7-actions-button :class="{ 'disabled': !transaction.geoLocation }" @click="showGeoLocationMapSheet = true">{{ tt('Show on the map') }}</f7-actions-button>
             </f7-actions-group>
             <f7-actions-group>
-                <f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
+                <f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
             </f7-actions-group>
         </f7-actions>
 
         <f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
-            <f7-actions-group v-if="transaction.type === allTransactionTypes.Transfer">
-                <f7-actions-button @click="swapTransactionData(true, false)">{{ $t('Swap Account') }}</f7-actions-button>
-                <f7-actions-button @click="swapTransactionData(false, true)">{{ $t('Swap Amount') }}</f7-actions-button>
-                <f7-actions-button @click="swapTransactionData(true, true)">{{ $t('Swap Account and Amount') }}</f7-actions-button>
+            <f7-actions-group v-if="transaction.type === TransactionType.Transfer">
+                <f7-actions-button @click="swapTransactionData(true, false)">{{ tt('Swap Account') }}</f7-actions-button>
+                <f7-actions-button @click="swapTransactionData(false, true)">{{ tt('Swap Amount') }}</f7-actions-button>
+                <f7-actions-button @click="swapTransactionData(true, true)">{{ tt('Swap Account and Amount') }}</f7-actions-button>
             </f7-actions-group>
             <f7-actions-group>
-                <f7-actions-button v-if="transaction.hideAmount" @click="transaction.hideAmount = false">{{ $t('Show Amount') }}</f7-actions-button>
-                <f7-actions-button v-if="!transaction.hideAmount" @click="transaction.hideAmount = true">{{ $t('Hide Amount') }}</f7-actions-button>
+                <f7-actions-button v-if="transaction.hideAmount" @click="transaction.hideAmount = false">{{ tt('Show Amount') }}</f7-actions-button>
+                <f7-actions-button v-if="!transaction.hideAmount" @click="transaction.hideAmount = true">{{ tt('Hide Amount') }}</f7-actions-button>
             </f7-actions-group>
-            <f7-actions-group v-if="type === 'transaction' && (mode === 'add' || mode === 'edit') && isTransactionPicturesEnabled && !showTransactionPictures">
-                <f7-actions-button @click="showTransactionPictures = true">{{ $t('Add Picture') }}</f7-actions-button>
+            <f7-actions-group v-if="pageTypeAndMode?.type === TransactionEditPageType.Transaction && (mode === TransactionEditPageMode.Add || mode === TransactionEditPageMode.Edit) && isTransactionPicturesEnabled() && !showTransactionPictures">
+                <f7-actions-button @click="showTransactionPictures = true">{{ tt('Add Picture') }}</f7-actions-button>
             </f7-actions-group>
             <f7-actions-group>
-                <f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
+                <f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
             </f7-actions-group>
         </f7-actions>
 
-        <f7-toolbar tabbar bottom v-if="mode !== 'view'">
+        <f7-toolbar tabbar bottom v-if="mode !== TransactionEditPageMode.View">
             <f7-link :class="{ 'disabled': inputIsEmpty || submitting }" @click="save">
-                <span class="tabbar-primary-link">{{ $t(saveButtonTitle) }}</span>
+                <span class="tabbar-primary-link">{{ tt(saveButtonTitle) }}</span>
             </f7-link>
         </f7-toolbar>
 
         <f7-photo-browser ref="pictureBrowser" type="popup" navbar-of-text="/"
                           :theme="isDarkMode ? 'dark' : 'light'" :navbar-show-count="true" :exposition="false"
                           :photos="transactionPictures" :thumbs="transactionThumbs" />
-        <input ref="pictureInput" type="file" style="display: none" :accept="supportedImageExtensions" @change="uploadPicture($event)" />
+        <input ref="pictureInput" type="file" style="display: none" :accept="SUPPORTED_IMAGE_EXTENSIONS" @change="uploadPicture($event)" />
     </f7-page>
 </template>
 
-<script>
-import { mapStores } from 'pinia';
+<script setup lang="ts">
+import { ref, computed, useTemplateRef } from 'vue';
+import type { PhotoBrowser, Router } from 'framework7/types';
+
+import { useI18n } from '@/locales/helpers.ts';
+import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
+import {
+    TransactionEditPageMode,
+    TransactionEditPageType,
+    GeoLocationStatus,
+    useTransactionEditPageBase
+} from '@/views/base/transactions/TransactionEditPageBase.ts';
+
 import { useSettingsStore } from '@/stores/setting.ts';
 import { useEnvironmentsStore } from '@/stores/environment.ts';
 import { useUserStore } from '@/stores/user.ts';
@@ -438,931 +449,699 @@ import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
 import { useTransactionsStore } from '@/stores/transaction.ts';
 import { useTransactionTemplatesStore } from '@/stores/transactionTemplate.ts';
-import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
 
 import { CategoryType } from '@/core/category.ts';
-import { TransactionType, TransactionEditScopeType } from '@/core/transaction.ts';
-import { TemplateType, ScheduledTemplateFrequencyType } from '@/core/template.ts';
-import { TRANSACTION_MIN_AMOUNT, TRANSACTION_MAX_AMOUNT, TRANSACTION_MAX_PICTURE_COUNT } from '@/consts/transaction.ts';
+import { TransactionEditScopeType, TransactionType } from '@/core/transaction.ts';
+import { ScheduledTemplateFrequencyType, TemplateType } from '@/core/template.ts';
+import { TRANSACTION_MAX_AMOUNT, TRANSACTION_MIN_AMOUNT } from '@/consts/transaction.ts';
 import { KnownErrorCode } from '@/consts/api.ts';
 import { SUPPORTED_IMAGE_EXTENSIONS } from '@/consts/file.ts';
-import { TransactionTemplate } from '@/models/transaction_template.ts';
 
-import logger from '@/lib/logger.ts';
+import { TransactionTemplate } from '@/models/transaction_template.ts';
+import type { TransactionPictureInfoBasicResponse } from '@/models/transaction_picture_info.ts';
+import { Transaction } from '@/models/transaction.ts';
+
 import {
-    isArray,
-    getNameByKeyValue
-} from '@/lib/common.ts';
-import {
-    getTimezoneOffset,
-    getTimezoneOffsetMinutes,
+    getActualUnixTimeForStore,
     getBrowserTimezoneOffsetMinutes,
-    getUtcOffsetByUtcOffsetMinutes,
-    getActualUnixTimeForStore
+    getTimezoneOffset,
+    getTimezoneOffsetMinutes
 } from '@/lib/datetime.ts';
 import { generateRandomUUID } from '@/lib/misc.ts';
-import {
-    getTransactionPrimaryCategoryName,
-    getTransactionSecondaryCategoryName,
-    getFirstAvailableCategoryId
-} from '@/lib/category.ts';
+import { getTransactionPrimaryCategoryName, getTransactionSecondaryCategoryName } from '@/lib/category.ts';
 import { setTransactionModelByTransaction } from '@/lib/transaction.ts';
-import {
-    isTransactionPicturesEnabled,
-    getMapProvider
-} from '@/lib/server_settings.ts';
+import { getMapProvider, isTransactionPicturesEnabled } from '@/lib/server_settings.ts';
+import logger from '@/lib/logger.ts';
 
-export default {
-    props: [
-        'f7route',
-        'f7router'
-    ],
-    data() {
-        const query = this.f7route.query;
-        const transactionsStore = useTransactionsStore();
-        const newTransaction = transactionsStore.generateNewTransactionModel(query.type);
+const props = defineProps<{
+    f7route: Router.Route;
+    f7router: Router.Router;
+}>();
 
-        return {
-            type: 'transaction',
-            mode: 'add',
-            addByTemplateId: null,
-            duplicateFromId: null,
-            editId: null,
-            transaction: newTransaction,
-            clientSessionId: '',
-            loading: true,
-            loadingError: null,
-            geoLocationStatus: null,
-            submitting: false,
-            submitted: false,
-            uploadingPicture: false,
-            removingPictureId: null,
-            isSupportGeoLocation: !!navigator.geolocation,
-            transactionDateTimeSheetMode: 'time',
-            showTimeInDefaultTimezone: false,
-            showGeoLocationActionSheet: false,
-            showMoreActionSheet: false,
-            showSourceAmountSheet: false,
-            showDestinationAmountSheet: false,
-            showCategorySheet: false,
-            showSourceAccountSheet: false,
-            showDestinationAccountSheet: false,
-            showTransactionDateTimeSheet: false,
-            showTransactionScheduledFrequencySheet: false,
-            showGeoLocationMapSheet: false,
-            showTransactionTagSheet: false,
-            showTransactionPictures: false
-        };
-    },
-    computed: {
-        ...mapStores(useSettingsStore, useEnvironmentsStore, useUserStore, useAccountsStore, useTransactionCategoriesStore, useTransactionTagsStore, useTransactionsStore, useTransactionTemplatesStore, useExchangeRatesStore),
-        isDarkMode() {
-            return this.environmentsStore.framework7DarkMode;
-        },
-        title() {
-            if (this.type === 'transaction') {
-                if (this.mode === 'add') {
-                    return 'Add Transaction';
-                } else if (this.mode === 'edit') {
-                    return 'Edit Transaction';
-                } else {
-                    return 'Transaction Detail';
-                }
-            } else if (this.type === 'template' && this.transaction.templateType === TemplateType.Normal.type) {
-                if (this.mode === 'add') {
-                    return 'Add Transaction Template';
-                } else if (this.mode === 'edit') {
-                    return 'Edit Transaction Template';
-                }
-            } else if (this.type === 'template' && this.transaction.templateType === TemplateType.Schedule.type) {
-                if (this.mode === 'add') {
-                    return 'Add Scheduled Transaction';
-                } else if (this.mode === 'edit') {
-                    return 'Edit Scheduled Transaction';
-                }
-            }
+const query = props.f7route.query;
+const pageTypeAndMode = getPageTypeNameMode();
 
-            return '';
-        },
-        saveButtonTitle() {
-            if (this.mode === 'add') {
-                return 'Add';
-            } else {
-                return 'Save';
-            }
-        },
-        sourceAmountName() {
-            if (this.transaction.type === this.allTransactionTypes.Expense) {
-                return 'Expense Amount';
-            } else if (this.transaction.type === this.allTransactionTypes.Income) {
-                return 'Income Amount';
-            } else if (this.transaction.type === this.allTransactionTypes.Transfer) {
-                return 'Transfer Out Amount';
-            } else {
-                return 'Amount';
-            }
-        },
-        sourceAccountTitle() {
-            if (this.transaction.type === this.allTransactionTypes.Expense || this.transaction.type === this.allTransactionTypes.Income) {
-                return 'Account';
-            } else if (this.transaction.type === this.allTransactionTypes.Transfer) {
-                return 'Source Account';
-            } else {
-                return 'Account';
-            }
-        },
-        transferInAmountTitle() {
-            const sourceAccount = this.allAccountsMap[this.transaction.sourceAccountId];
-            const destinationAccount = this.allAccountsMap[this.transaction.destinationAccountId];
+const {
+    tt,
+    getMultiMonthdayShortNames,
+    getMultiWeekdayLongNames,
+    formatUnixTimeToLongDate,
+    formatUnixTimeToLongTime
+} = useI18n();
+const { showAlert, showConfirm, showToast, routeBackOnError } = useI18nUIComponents();
 
-            if (!sourceAccount || !destinationAccount || sourceAccount.currency === destinationAccount.currency) {
-                return this.$t('Transfer In Amount');
-            }
+const {
+    mode,
+    isSupportGeoLocation,
+    editId,
+    addByTemplateId,
+    duplicateFromId,
+    clientSessionId,
+    loading,
+    submitting,
+    uploadingPicture,
+    geoLocationStatus,
+    transaction,
+    currentTimezoneOffsetMinutes,
+    defaultCurrency,
+    firstDayOfWeek,
+    defaultAccountId,
+    allTimezones,
+    allVisibleAccounts,
+    allAccountsMap,
+    allVisibleCategorizedAccounts,
+    allCategories,
+    allCategoriesMap,
+    allTags,
+    allTagsMap,
+    canAddTransactionPicture,
+    title,
+    saveButtonTitle,
+    sourceAmountName,
+    sourceAccountTitle,
+    transferInAmountTitle,
+    hasAvailableExpenseCategories,
+    hasAvailableIncomeCategories,
+    hasAvailableTransferCategories,
+    sourceAccountName,
+    destinationAccountName,
+    sourceAccountCurrency,
+    destinationAccountCurrency,
+    transactionDisplayTimezone,
+    transactionTimezoneTimeDifference,
+    geoLocationStatusInfo,
+    inputEmptyProblemMessage,
+    inputIsEmpty,
+    swapTransactionData,
+    getDisplayAmount,
+    getTransactionPictureUrl
+} = useTransactionEditPageBase(pageTypeAndMode?.type || TransactionEditPageType.Transaction, pageTypeAndMode?.mode, query['type'] ? parseInt(query['type']) : undefined);
 
-            const fromExchangeRate = this.exchangeRatesStore.latestExchangeRateMap[sourceAccount.currency];
-            const toExchangeRate = this.exchangeRatesStore.latestExchangeRateMap[destinationAccount.currency];
-            const amountRate = this.$locale.getAdaptiveAmountRate(this.userStore, this.transaction.sourceAmount, this.transaction.destinationAmount, fromExchangeRate, toExchangeRate);
+const settingsStore = useSettingsStore();
+const environmentsStore = useEnvironmentsStore();
+const userStore = useUserStore();
+const accountsStore = useAccountsStore();
+const transactionCategoriesStore = useTransactionCategoriesStore();
+const transactionTagsStore = useTransactionTagsStore();
+const transactionsStore = useTransactionsStore();
+const transactionTemplatesStore = useTransactionTemplatesStore();
 
-            if (!amountRate) {
-                return this.$t('Transfer In Amount');
-            }
+const pictureBrowser = useTemplateRef<PhotoBrowser.PhotoBrowser>('pictureBrowser');
+const pictureInput = useTemplateRef<HTMLInputElement>('pictureInput');
 
-            return this.$t('Transfer In Amount') + ` (${amountRate})`;
-        },
-        currentTimezoneOffsetMinutes() {
-            return getTimezoneOffsetMinutes(this.settingsStore.appSettings.timeZone);
-        },
-        defaultCurrency() {
-            return this.userStore.currentUserDefaultCurrency;
-        },
-        defaultAccountId() {
-            return this.userStore.currentUserDefaultAccountId;
-        },
-        firstDayOfWeek() {
-            return this.userStore.currentUserFirstDayOfWeek;
-        },
-        allTransactionTypes() {
-            return TransactionType;
-        },
-        allCategoryTypes() {
-            return CategoryType;
-        },
-        allTemplateTypes() {
-            return TemplateType.all();
-        },
-        allTimezones() {
-            return this.$locale.getAllTimezones(true);
-        },
-        allAccounts() {
-            return this.accountsStore.allPlainAccounts;
-        },
-        allVisibleAccounts() {
-            return this.accountsStore.allVisiblePlainAccounts;
-        },
-        allAccountsMap() {
-            return this.accountsStore.allAccountsMap;
-        },
-        allVisibleCategorizedAccounts() {
-            return this.$locale.getCategorizedAccountsWithDisplayBalance(this.allVisibleAccounts, this.showAccountBalance, this.defaultCurrency, this.settingsStore, this.userStore, this.exchangeRatesStore);
-        },
-        allCategories() {
-            return this.transactionCategoriesStore.allTransactionCategories;
-        },
-        allCategoriesMap() {
-            return this.transactionCategoriesStore.allTransactionCategoriesMap;
-        },
-        allTags() {
-            return this.transactionTagsStore.allTransactionTags;
-        },
-        allTagsMap() {
-            return this.transactionTagsStore.allTransactionTagsMap;
-        },
-        supportedImageExtensions() {
-            return SUPPORTED_IMAGE_EXTENSIONS;
-        },
-        hasAvailableExpenseCategories() {
-            if (!this.allCategories || !this.allCategories[this.allCategoryTypes.Expense] || !this.allCategories[this.allCategoryTypes.Expense].length) {
-                return false;
-            }
+const loadingError = ref<unknown | null>(null);
+const submitted = ref<boolean>(false);
+const removingPictureId = ref<string | null>(null);
+const transactionDateTimeSheetMode = ref<string>('time');
+const showTimeInDefaultTimezone = ref<boolean>(false);
+const showGeoLocationActionSheet = ref<boolean>(false);
+const showMoreActionSheet = ref<boolean>(false);
+const showSourceAmountSheet = ref<boolean>(false);
+const showDestinationAmountSheet = ref<boolean>(false);
+const showCategorySheet = ref<boolean>(false);
+const showSourceAccountSheet = ref<boolean>(false);
+const showDestinationAccountSheet = ref<boolean>(false);
+const showTransactionDateTimeSheet = ref<boolean>(false);
+const showTransactionScheduledFrequencySheet = ref<boolean>(false);
+const showGeoLocationMapSheet = ref<boolean>(false);
+const showTransactionTagSheet = ref<boolean>(false);
+const showTransactionPictures = ref<boolean>(false);
 
-            const firstAvailableCategoryId = getFirstAvailableCategoryId(this.allCategories[this.allCategoryTypes.Expense]);
-            return firstAvailableCategoryId !== '';
-        },
-        hasAvailableIncomeCategories() {
-            if (!this.allCategories || !this.allCategories[this.allCategoryTypes.Income] || !this.allCategories[this.allCategoryTypes.Income].length) {
-                return false;
-            }
+const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
 
-            const firstAvailableCategoryId = getFirstAvailableCategoryId(this.allCategories[this.allCategoryTypes.Income]);
-            return firstAvailableCategoryId !== '';
-        },
-        hasAvailableTransferCategories() {
-            if (!this.allCategories || !this.allCategories[this.allCategoryTypes.Transfer] || !this.allCategories[this.allCategoryTypes.Transfer].length) {
-                return false;
-            }
+const sourceAmountClass = computed<Record<string, boolean>>(() => {
+    const classes: Record<string, boolean> = {
+        'readonly': mode.value === TransactionEditPageMode.View,
+        'text-expense': transaction.value.type === TransactionType.Expense,
+        'text-income': transaction.value.type === TransactionType.Income,
+        'text-color-primary': transaction.value.type === TransactionType.Transfer
+    };
 
-            const firstAvailableCategoryId = getFirstAvailableCategoryId(this.allCategories[this.allCategoryTypes.Transfer]);
-            return firstAvailableCategoryId !== '';
-        },
-        sourceAccountName() {
-            if (this.transaction.sourceAccountId) {
-                return getNameByKeyValue(this.allAccounts, this.transaction.sourceAccountId, 'id', 'name');
-            } else {
-                return this.$t('None');
-            }
-        },
-        destinationAccountName() {
-            if (this.transaction.destinationAccountId) {
-                return getNameByKeyValue(this.allAccounts, this.transaction.destinationAccountId, 'id', 'name');
-            } else {
-                return this.$t('None');
-            }
-        },
-        sourceAccountCurrency() {
-            const sourceAccount = this.allAccountsMap[this.transaction.sourceAccountId];
+    classes[getFontClassByAmount(transaction.value.sourceAmount)] = true;
 
-            if (sourceAccount) {
-                return sourceAccount.currency;
-            }
+    return classes;
+});
 
-            return this.defaultCurrency;
-        },
-        destinationAccountCurrency() {
-            const destinationAccount = this.allAccountsMap[this.transaction.destinationAccountId];
+const destinationAmountClass = computed<Record<string, boolean>>(() => {
+    const classes: Record<string, boolean> = {
+        'readonly': mode.value === TransactionEditPageMode.View
+    };
 
-            if (destinationAccount) {
-                return destinationAccount.currency;
-            }
+    classes[getFontClassByAmount(transaction.value.destinationAmount)] = true;
 
-            return this.defaultCurrency;
-        },
-        transactionDisplayDate() {
-            if (this.mode !== 'view' || !this.showTimeInDefaultTimezone) {
-                return this.$locale.formatUnixTimeToLongDate(this.userStore, getActualUnixTimeForStore(this.transaction.time, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
-            }
+    return classes;
+});
 
-            return this.$locale.formatUnixTimeToLongDate(this.userStore, getActualUnixTimeForStore(this.transaction.time, this.transaction.utcOffset, getBrowserTimezoneOffsetMinutes()));
-        },
-        transactionDisplayTime() {
-            if (this.mode !== 'view' || !this.showTimeInDefaultTimezone) {
-                return this.$locale.formatUnixTimeToLongTime(this.userStore, getActualUnixTimeForStore(this.transaction.time, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
-            }
+const transactionDisplayDate = computed<string>(() => {
+    if (mode.value !== TransactionEditPageMode.View || !showTimeInDefaultTimezone.value) {
+        return formatUnixTimeToLongDate(getActualUnixTimeForStore(transaction.value.time, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
+    }
 
-            return `${this.$locale.formatUnixTimeToLongTime(this.userStore, getActualUnixTimeForStore(this.transaction.time, this.transaction.utcOffset, getBrowserTimezoneOffsetMinutes()))} (UTC${getTimezoneOffset(this.settingsStore.appSettings.timeZone)})`;
-        },
-        transactionDisplayScheduledFrequency() {
-            if (this.type !== 'template') {
-                return '';
-            }
+    return formatUnixTimeToLongDate(getActualUnixTimeForStore(transaction.value.time, transaction.value.utcOffset, getBrowserTimezoneOffsetMinutes()));
+});
 
-            if (this.transaction.scheduledFrequencyType === ScheduledTemplateFrequencyType.Disabled.type) {
-                return this.$t('Disabled');
-            }
+const transactionDisplayTime = computed<string>(() => {
+    if (mode.value !== TransactionEditPageMode.View || !showTimeInDefaultTimezone.value) {
+        return formatUnixTimeToLongTime(getActualUnixTimeForStore(transaction.value.time, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
+    }
 
-            const items = this.transaction.scheduledFrequency.split(',');
-            const scheduledFrequencyValues = [];
+    return `${formatUnixTimeToLongTime(getActualUnixTimeForStore(transaction.value.time, transaction.value.utcOffset, getBrowserTimezoneOffsetMinutes()))} (UTC${getTimezoneOffset(settingsStore.appSettings.timeZone)})`;
+});
 
-            for (let i = 0; i < items.length; i++) {
-                if (items[i]) {
-                    scheduledFrequencyValues.push(parseInt(items[i]));
-                }
-            }
-
-            if (this.transaction.scheduledFrequencyType === ScheduledTemplateFrequencyType.Weekly.type) {
-                if (scheduledFrequencyValues.length) {
-                    return this.$t('format.misc.everyMultiDaysOfWeek', {
-                        days: this.$locale.getMultiWeekdayLongNames(scheduledFrequencyValues, this.firstDayOfWeek)
-                    });
-                } else {
-                    return this.$t('Weekly');
-                }
-            } else if (this.transaction.scheduledFrequencyType === ScheduledTemplateFrequencyType.Monthly.type) {
-                if (scheduledFrequencyValues.length) {
-                    return this.$t('format.misc.everyMultiDaysOfMonth', {
-                        days: this.$locale.getMultiMonthdayShortNames(scheduledFrequencyValues)
-                    });
-                } else {
-                    return this.$t('Monthly');
-                }
-            } else {
-                return '';
-            }
-        },
-        transactionDisplayTimezone() {
-            return `UTC${getUtcOffsetByUtcOffsetMinutes(this.transaction.utcOffset)}`;
-        },
-        transactionDisplayTimezoneName() {
-            return getNameByKeyValue(this.allTimezones, this.transaction.timeZone, 'name', 'displayName');
-        },
-        transactionTimezoneTimeDifference() {
-            return this.$locale.getTimezoneDifferenceDisplayText(this.transaction.utcOffset);
-        },
-        sourceAmountClass() {
-            const classes = {
-                'readonly': this.mode === 'view',
-                'text-expense': this.transaction.type === this.allTransactionTypes.Expense,
-                'text-income': this.transaction.type === this.allTransactionTypes.Income,
-                'text-color-primary': this.transaction.type === this.allTransactionTypes.Transfer
-            };
-
-            classes[this.getFontClassByAmount(this.transaction.sourceAmount)] = true;
-
-            return classes;
-        },
-        destinationAmountClass() {
-            const classes = {
-                'readonly': this.mode === 'view'
-            };
-
-            classes[this.getFontClassByAmount(this.transaction.destinationAmount)] = true;
-
-            return classes;
-        },
-        geoLocationStatusInfo() {
-            if (this.geoLocationStatus === 'success') {
-                return '';
-            } else if (this.geoLocationStatus === 'getting') {
-                return this.$t('Getting Location...');
-            } else {
-                return this.$t('No Location');
-            }
-        },
-        transactionPictures() {
-            const thumbs = [];
-
-            if (!this.transaction.pictures || !this.transaction.pictures.length) {
-                return thumbs;
-            }
-
-            for (let i = 0; i < this.transaction.pictures.length; i++) {
-                thumbs.push({
-                    url: this.getTransactionPictureUrl(this.transaction.pictures[i])
-                });
-            }
-
-            return thumbs;
-        },
-        transactionThumbs() {
-            const thumbs = [];
-
-            if (!this.transaction.pictures || !this.transaction.pictures.length) {
-                return thumbs;
-            }
-
-            for (let i = 0; i < this.transaction.pictures.length; i++) {
-                thumbs.push(this.getTransactionPictureUrl(this.transaction.pictures[i]));
-            }
-
-            return thumbs;
-        },
-        allowedMinAmount() {
-            return TRANSACTION_MIN_AMOUNT;
-        },
-        allowedMaxAmount() {
-            return TRANSACTION_MAX_AMOUNT;
-        },
-        showAccountBalance() {
-            return this.settingsStore.appSettings.showAccountBalance;
-        },
-        isTransactionPicturesEnabled() {
-            return isTransactionPicturesEnabled();
-        },
-        canAddTransactionPicture() {
-            if (this.type !== 'transaction' || (this.mode !== 'add' && this.mode !== 'edit')) {
-                return false;
-            }
-
-            return !isArray(this.transaction.pictures) || this.transaction.pictures.length < TRANSACTION_MAX_PICTURE_COUNT;
-        },
-        mapProvider() {
-            return getMapProvider();
-        },
-        inputIsEmpty() {
-            return !!this.inputEmptyProblemMessage;
-        },
-        inputEmptyProblemMessage() {
-            if (this.transaction.type === this.allTransactionTypes.Expense) {
-                if (!this.transaction.expenseCategoryId || this.transaction.expenseCategoryId === '') {
-                    return 'Transaction category cannot be blank';
-                }
-
-                if (!this.transaction.sourceAccountId || this.transaction.sourceAccountId === '') {
-                    return 'Transaction account cannot be blank';
-                }
-            } else if (this.transaction.type === this.allTransactionTypes.Income) {
-                if (!this.transaction.incomeCategoryId || this.transaction.incomeCategoryId === '') {
-                    return 'Transaction category cannot be blank';
-                }
-
-                if (!this.transaction.sourceAccountId || this.transaction.sourceAccountId === '') {
-                    return 'Transaction account cannot be blank';
-                }
-            } else if (this.transaction.type === this.allTransactionTypes.Transfer) {
-                if (!this.transaction.transferCategoryId || this.transaction.transferCategoryId === '') {
-                    return 'Transaction category cannot be blank';
-                }
-
-                if (!this.transaction.sourceAccountId || this.transaction.sourceAccountId === '') {
-                    return 'Source account cannot be blank';
-                }
-
-                if (!this.transaction.destinationAccountId || this.transaction.destinationAccountId === '') {
-                    return 'Destination account cannot be blank';
-                }
-            }
-
-            if (this.type === 'template') {
-                if (!this.transaction.name) {
-                    return 'Template name cannot be blank';
-                }
-            }
-
-            return null;
+const transactionDisplayTimezoneName = computed<string>(() => {
+    for (const timezone of allTimezones.value) {
+        if (timezone.name === transaction.value.timeZone) {
+            return timezone.displayName;
         }
-    },
-    watch: {
-        'transaction.sourceAmount': function (newValue, oldValue) {
-            if (this.mode === 'view' || this.loading) {
-                return;
-            }
+    }
 
-            this.transactionsStore.setTransactionSuitableDestinationAmount(this.transaction, oldValue, newValue);
-        },
-        'transaction.destinationAmount': function (newValue) {
-            if (this.mode === 'view' || this.loading) {
-                return;
-            }
+    return '';
+});
 
-            if (this.transaction.type === this.allTransactionTypes.Expense || this.transaction.type === this.allTransactionTypes.Income) {
-                this.transaction.sourceAmount = newValue;
-            }
-        },
-        'transaction.timeZone': function (newValue) {
-            for (let i = 0; i < this.allTimezones.length; i++) {
-                if (this.allTimezones[i].name === newValue) {
-                    this.transaction.utcOffset = this.allTimezones[i].utcOffsetMinutes;
-                    break;
-                }
-            }
+const transactionPictures = computed<Record<string, string | undefined>[]>(() => {
+    const thumbs: Record<string, string | undefined>[] = [];
+
+    if (!transaction.value.pictures || !transaction.value.pictures.length) {
+        return thumbs;
+    }
+
+    for (let i = 0; i < transaction.value.pictures.length; i++) {
+        thumbs.push({
+            url: getTransactionPictureUrl(transaction.value.pictures[i])
+        });
+    }
+
+    return thumbs;
+});
+
+const transactionThumbs = computed<(string | undefined)[]>(() => {
+    const thumbs: (string | undefined)[] = [];
+
+    if (!transaction.value.pictures || !transaction.value.pictures.length) {
+        return thumbs;
+    }
+
+    for (let i = 0; i < transaction.value.pictures.length; i++) {
+        thumbs.push(getTransactionPictureUrl(transaction.value.pictures[i]));
+    }
+
+    return thumbs;
+});
+
+const transactionDisplayScheduledFrequency = computed<string>(() => {
+    if (pageTypeAndMode?.type !== TransactionEditPageType.Template) {
+        return '';
+    }
+
+    const template = transaction.value as TransactionTemplate;
+
+    if (template.scheduledFrequencyType === ScheduledTemplateFrequencyType.Disabled.type) {
+        return tt('Disabled');
+    }
+
+    const items = (template.scheduledFrequency || '').split(',');
+    const scheduledFrequencyValues: number[] = [];
+
+    for (let i = 0; i < items.length; i++) {
+        if (items[i]) {
+            scheduledFrequencyValues.push(parseInt(items[i]));
         }
-    },
-    created() {
-        const self = this;
-        const query = self.f7route.query;
+    }
 
-        if (self.f7route.path === '/transaction/add') {
-            self.type = 'transaction';
-            self.mode = 'add';
-        } else if (self.f7route.path === '/transaction/edit') {
-            self.type = 'transaction';
-            self.mode = 'edit';
-        } else if (self.f7route.path === '/transaction/detail') {
-            self.type = 'transaction';
-            self.mode = 'view';
-        } else if (self.f7route.path === '/template/add') {
-            self.type = 'template';
-            self.mode = 'add';
-        } else if (self.f7route.path === '/template/edit') {
-            self.type = 'template';
-            self.mode = 'edit';
+    if (template.scheduledFrequencyType === ScheduledTemplateFrequencyType.Weekly.type) {
+        if (scheduledFrequencyValues.length) {
+            return tt('format.misc.everyMultiDaysOfWeek', {
+                days: getMultiWeekdayLongNames(scheduledFrequencyValues, firstDayOfWeek.value)
+            });
         } else {
-            self.$toast('Parameter Invalid');
-            self.loadingError = 'Parameter Invalid';
+            return tt('Weekly');
+        }
+    } else if (template.scheduledFrequencyType === ScheduledTemplateFrequencyType.Monthly.type) {
+        if (scheduledFrequencyValues.length) {
+            return tt('format.misc.everyMultiDaysOfMonth', {
+                days: getMultiMonthdayShortNames(scheduledFrequencyValues)
+            });
+        } else {
+            return tt('Monthly');
+        }
+    } else {
+        return '';
+    }
+});
+
+function getPageTypeNameMode(): { type: TransactionEditPageType, mode: TransactionEditPageMode } | null {
+    if (props.f7route.path === '/transaction/add') {
+        return {
+            type: TransactionEditPageType.Transaction,
+            mode: TransactionEditPageMode.Add
+        };
+    } else if (props.f7route.path === '/transaction/edit') {
+        return {
+            type: TransactionEditPageType.Transaction,
+            mode: TransactionEditPageMode.Edit
+        };
+    } else if (props.f7route.path === '/transaction/detail') {
+        return {
+            type: TransactionEditPageType.Transaction,
+            mode: TransactionEditPageMode.View
+        };
+    } else if (props.f7route.path === '/template/add') {
+        return {
+            type: TransactionEditPageType.Template,
+            mode: TransactionEditPageMode.Add
+        };
+    } else if (props.f7route.path === '/template/edit') {
+        return {
+            type: TransactionEditPageType.Template,
+            mode: TransactionEditPageMode.Edit
+        };
+    } else {
+        return null;
+    }
+}
+
+function getFontClassByAmount(amount: number): string {
+    if (amount >= 100000000 || amount <= -100000000) {
+        return 'ebk-small-amount';
+    } else if (amount >= 1000000 || amount <= -1000000) {
+        return 'ebk-normal-amount';
+    } else {
+        return 'ebk-large-amount';
+    }
+}
+
+function getTagName(tagId: string): string {
+    for (const tag of allTags.value) {
+        if (tag.id === tagId) {
+            return tag.name;
+        }
+    }
+
+    return '';
+}
+
+function init(): void {
+    if (!pageTypeAndMode) {
+        showToast('Parameter Invalid');
+        loadingError.value = 'Parameter Invalid';
+        return;
+    }
+
+    loading.value = true;
+
+    const promises: Promise<unknown>[] = [
+        accountsStore.loadAllAccounts({ force: false }),
+        transactionCategoriesStore.loadAllCategories({ force: false }),
+        transactionTagsStore.loadAllTags({ force: false }),
+        transactionTemplatesStore.loadAllTemplates({ force: false, templateType: TemplateType.Normal.type })
+    ];
+
+    if (pageTypeAndMode.type === TransactionEditPageType.Transaction) {
+        if (query['id']) {
+            if (mode.value === TransactionEditPageMode.Edit) {
+                editId.value = query['id'];
+            } else if (mode.value === TransactionEditPageMode.Add) {
+                duplicateFromId.value = query['id'];
+            }
+
+            promises.push(transactionsStore.getTransaction({ transactionId: query['id'], withPictures: mode.value !== TransactionEditPageMode.Add }));
+        }
+    } else if (pageTypeAndMode.type === TransactionEditPageType.Template) {
+        const template = TransactionTemplate.createNewTransactionTemplate(transaction.value);
+        template.name = '';
+
+        if (query['templateType']) {
+            template.templateType = parseInt(query['templateType']);
+        }
+
+        if (template.templateType === TemplateType.Schedule.type) {
+            template.scheduledFrequencyType = ScheduledTemplateFrequencyType.Disabled.type;
+            template.scheduledFrequency = '';
+        }
+
+        transaction.value = template;
+
+        if (query['id']) {
+            if (mode.value === TransactionEditPageMode.Edit) {
+                editId.value = query['id'];
+            }
+
+            promises.push(transactionTemplatesStore.getTemplate({ templateId: query['id'] }));
+        }
+    }
+
+    const queryType = query['type'] ? parseInt(query['type']) : 0;
+
+    if (queryType &&
+        queryType >= TransactionType.Income &&
+        queryType <= TransactionType.Transfer) {
+        transaction.value.type = queryType;
+    }
+
+    if (mode.value === TransactionEditPageMode.Add) {
+        clientSessionId.value = generateRandomUUID();
+    }
+
+    Promise.all(promises).then(function (responses) {
+        if (query['id'] && !responses[4]) {
+            if (pageTypeAndMode.type === TransactionEditPageType.Transaction) {
+                showToast('Unable to retrieve transaction');
+                loadingError.value = 'Unable to retrieve transaction';
+            } else if (pageTypeAndMode.type === TransactionEditPageType.Template) {
+                showToast('Unable to retrieve template');
+                loadingError.value = 'Unable to retrieve template';
+            }
+
             return;
         }
 
-        self.loading = true;
+        let fromTransaction: Transaction | TransactionTemplate | null = null;
 
-        const promises = [
-            self.accountsStore.loadAllAccounts({ force: false }),
-            self.transactionCategoriesStore.loadAllCategories({ force: false }),
-            self.transactionTagsStore.loadAllTags({ force: false }),
-            self.transactionTemplatesStore.loadAllTemplates({ force: false, templateType: TemplateType.Normal.type })
-        ];
+        if (pageTypeAndMode.type === TransactionEditPageType.Transaction) {
+            if (query['id'] && responses[4] instanceof Transaction) {
+                fromTransaction = responses[4];
+            } else if (query['templateId'] && transactionTemplatesStore.allTransactionTemplatesMap && transactionTemplatesStore.allTransactionTemplatesMap[TemplateType.Normal.type]) {
+                fromTransaction = transactionTemplatesStore.allTransactionTemplatesMap[TemplateType.Normal.type][query['templateId']];
 
-        if (self.type === 'transaction') {
-            if (query.id) {
-                if (self.mode === 'edit') {
-                    self.editId = query.id;
-                } else if (self.mode === 'add') {
-                    self.duplicateFromId = query.id;
+                if (fromTransaction) {
+                    addByTemplateId.value = fromTransaction.id;
                 }
-
-                promises.push(self.transactionsStore.getTransaction({ transactionId: query.id, withPictures: self.mode !== 'add' }));
+            } else if ((settingsStore.appSettings.autoSaveTransactionDraft === 'enabled' || settingsStore.appSettings.autoSaveTransactionDraft === 'confirmation') && transactionsStore.transactionDraft) {
+                fromTransaction = Transaction.ofDraft(transactionsStore.transactionDraft);
             }
-        } else if (self.type === 'template') {
-            self.transaction = TransactionTemplate.createNewTransactionTemplate(self.transaction);
-            self.transaction.name = '';
-
-            if (query.templateType) {
-                self.transaction.templateType = parseInt(query.templateType);
-            }
-
-            if (self.transaction.templateType === TemplateType.Schedule.type) {
-                self.transaction.scheduledFrequencyType = ScheduledTemplateFrequencyType.Disabled.type;
-                self.transaction.scheduledFrequency = '';
-            }
-
-            if (query.id) {
-                if (self.mode === 'edit') {
-                    self.editId = query.id;
-                }
-
-                promises.push(self.transactionTemplatesStore.getTemplate({ templateId: query.id }));
+        } else if (pageTypeAndMode.type === TransactionEditPageType.Template && responses[4] instanceof TransactionTemplate) {
+            if (query['id']) {
+                fromTransaction = responses[4];
             }
         }
 
-        if (query.type && query.type !== '0' &&
-            query.type >= self.allTransactionTypes.Income &&
-            query.type <= self.allTransactionTypes.Transfer) {
-            self.transaction.type = parseInt(query.type);
+        setTransactionModelByTransaction(
+            transaction.value,
+            fromTransaction,
+            allCategories.value,
+            allCategoriesMap.value,
+            allVisibleAccounts.value,
+            allAccountsMap.value,
+            allTagsMap.value,
+            defaultAccountId.value,
+            {
+                type: queryType,
+                categoryId: query['categoryId'],
+                accountId: query['accountId'],
+                destinationAccountId: query['destinationAccountId'],
+                amount: query['amount'] ? parseInt(query['amount']) : undefined,
+                destinationAmount: query['destinationAmount'] ? parseInt(query['destinationAmount']) : undefined,
+                tagIds: query['tagIds'],
+                comment: query['comment']
+            },
+            pageTypeAndMode.type === TransactionEditPageType.Transaction && (mode.value === TransactionEditPageMode.Edit || mode.value === TransactionEditPageMode.View),
+            pageTypeAndMode.type === TransactionEditPageType.Transaction && (mode.value === TransactionEditPageMode.Edit || mode.value === TransactionEditPageMode.View)
+        );
+
+        if (pageTypeAndMode.type === TransactionEditPageType.Template && query['id'] && responses[4] instanceof TransactionTemplate) {
+            const template = responses[4];
+            transaction.value.id = template.id;
+
+            if (!(transaction.value instanceof TransactionTemplate)) {
+                transaction.value = TransactionTemplate.createNewTransactionTemplate(transaction.value);
+            }
+
+            (transaction.value as TransactionTemplate).from(template);
         }
 
-        if (self.mode === 'add') {
-            self.clientSessionId = generateRandomUUID();
+        loading.value = false;
+    }).catch(error => {
+        logger.error('failed to load essential data for editing transaction', error);
+
+        if (error.processed) {
+            loading.value = false;
+        } else {
+            loadingError.value = error;
+            showToast(error.message || error);
         }
+    });
+}
 
-        Promise.all(promises).then(function (responses) {
-            if (query.id && !responses[4]) {
-                if (self.type === 'transaction') {
-                    self.$toast('Unable to retrieve transaction');
-                    self.loadingError = 'Unable to retrieve transaction';
-                } else if (self.type === 'template') {
-                    self.$toast('Unable to retrieve template');
-                    self.loadingError = 'Unable to retrieve template';
+function save(): void {
+    const router = props.f7router;
+
+    if (mode.value === TransactionEditPageMode.View) {
+        return;
+    }
+
+    const problemMessage = inputEmptyProblemMessage.value;
+
+    if (problemMessage) {
+        showAlert(problemMessage);
+        return;
+    }
+
+    if (pageTypeAndMode?.type === TransactionEditPageType.Transaction && (mode.value === TransactionEditPageMode.Add || mode.value === TransactionEditPageMode.Edit)) {
+        const doSubmit = function () {
+            submitting.value = true;
+            showLoading(() => submitting.value);
+
+            transactionsStore.saveTransaction({
+                transaction: transaction.value as Transaction,
+                defaultCurrency: defaultCurrency.value,
+                isEdit: mode.value === TransactionEditPageMode.Edit,
+                clientSessionId: clientSessionId.value
+            }).then(() => {
+                submitting.value = false;
+                hideLoading();
+
+                if (mode.value === TransactionEditPageMode.Add) {
+                    showToast('You have added a new transaction');
+                } else if (mode.value === TransactionEditPageMode.Edit) {
+                    showToast('You have saved this transaction');
                 }
 
-                return;
+                if (mode.value === TransactionEditPageMode.Add && !addByTemplateId.value && !duplicateFromId.value) {
+                    transactionsStore.clearTransactionDraft();
+                }
+
+                submitted.value = true;
+                router.back();
+            }).catch(error => {
+                submitting.value = false;
+                hideLoading();
+
+                if (error.error && (error.error.errorCode === KnownErrorCode.TransactionCannotCreateInThisTime || error.error.errorCode === KnownErrorCode.TransactionCannotModifyInThisTime)) {
+                    showConfirm('You have set this time range to prevent editing transactions. Would you like to change the editable transaction range to All?', () => {
+                        submitting.value = true;
+                        showLoading(() => submitting.value);
+
+                        userStore.updateUserTransactionEditScope({
+                            transactionEditScope: TransactionEditScopeType.All.type
+                        }).then(() => {
+                            submitting.value = false;
+                            hideLoading();
+
+                            showToast('Your editable transaction range has been set to All');
+                        }).catch(error => {
+                            submitting.value = false;
+                            hideLoading();
+
+                            if (!error.processed) {
+                                showToast(error.message || error);
+                            }
+                        });
+                    });
+                } else if (!error.processed) {
+                    showToast(error.message || error);
+                }
+            });
+        };
+
+        if (transaction.value.sourceAmount === 0) {
+            showConfirm('Are you sure you want to save this transaction with a zero amount?', () => {
+                doSubmit();
+            });
+        } else {
+            doSubmit();
+        }
+    } else if (pageTypeAndMode?.type === TransactionEditPageType.Template && (mode.value === TransactionEditPageMode.Add || mode.value === TransactionEditPageMode.Edit)) {
+        submitting.value = true;
+        showLoading(() => submitting.value);
+
+        transactionTemplatesStore.saveTemplateContent({
+            template: transaction.value as TransactionTemplate,
+            isEdit: mode.value === TransactionEditPageMode.Edit,
+            clientSessionId: clientSessionId.value
+        }).then(() => {
+            submitting.value = false;
+            hideLoading();
+
+            if (mode.value === TransactionEditPageMode.Add) {
+                showToast('You have added a new template');
+            } else if (mode.value === TransactionEditPageMode.Edit) {
+                showToast('You have saved this template');
             }
 
-            let fromTransaction = null;
-
-            if (self.type === 'transaction') {
-                if (query.id) {
-                    fromTransaction = responses[4];
-                } else if (query.templateId && self.transactionTemplatesStore.allTransactionTemplatesMap && self.transactionTemplatesStore.allTransactionTemplatesMap[TemplateType.Normal.type]) {
-                    fromTransaction = self.transactionTemplatesStore.allTransactionTemplatesMap[TemplateType.Normal.type][query.templateId];
-
-                    if (fromTransaction) {
-                        self.addByTemplateId = fromTransaction.id;
-                    }
-                } else if ((self.settingsStore.appSettings.autoSaveTransactionDraft === 'enabled' || self.settingsStore.appSettings.autoSaveTransactionDraft === 'confirmation') && self.transactionsStore.transactionDraft) {
-                    fromTransaction = self.transactionsStore.transactionDraft;
-                }
-            } else if (self.type === 'template') {
-                if (query.id) {
-                    fromTransaction = responses[4];
-                }
-            }
-
-            setTransactionModelByTransaction(
-                self.transaction,
-                fromTransaction,
-                self.allCategories,
-                self.allCategoriesMap,
-                self.allVisibleAccounts,
-                self.allAccountsMap,
-                self.allTagsMap,
-                self.defaultAccountId,
-                {
-                    type: query.type,
-                    categoryId: query.categoryId,
-                    accountId: query.accountId,
-                    destinationAccountId: query.destinationAccountId,
-                    amount: query.amount,
-                    destinationAmount: query.destinationAmount,
-                    tagIds: query.tagIds,
-                    comment: query.comment
-                },
-                self.type === 'transaction' && (self.mode === 'edit' || self.mode === 'view'),
-                self.type === 'transaction' && (self.mode === 'edit' || self.mode === 'view')
-            );
-
-            if (self.type === 'template' && query.id) {
-                const template = responses[4];
-                self.transaction.id = template.id;
-                self.transaction.templateType = template.templateType;
-                self.transaction.name = template.name;
-
-                if (self.transaction.templateType === TemplateType.Schedule.type) {
-                    self.transaction.scheduledFrequencyType = template.scheduledFrequencyType;
-                    self.transaction.scheduledFrequency = template.scheduledFrequency;
-                    self.transaction.utcOffset = template.utcOffset;
-                    self.transaction.timeZone = undefined;
-                }
-            }
-
-            self.loading = false;
+            submitted.value = true;
+            router.back();
         }).catch(error => {
-            logger.error('failed to load essential data for editing transaction', error);
+            submitting.value = false;
+            hideLoading();
 
-            if (error.processed) {
-                self.loading = false;
-            } else {
-                self.loadingError = error;
-                self.$toast(error.message || error);
+            if (!error.processed) {
+                showToast(error.message || error);
             }
         });
-    },
-    methods: {
-        onPageAfterIn() {
-            this.$routeBackOnError(this.f7router, 'loadingError');
-
-            if (this.settingsStore.appSettings.autoGetCurrentGeoLocation && this.mode === 'add'
-                && !this.geoLocationStatus && !this.transaction.geoLocation) {
-                this.updateGeoLocation(false);
-            }
-        },
-        onPageBeforeOut() {
-            const self = this;
-
-            if (self.submitted || self.type !== 'transaction' || self.mode !== 'add' || self.addByTemplateId || self.duplicateFromId) {
-                return;
-            }
-
-            if (self.settingsStore.appSettings.autoSaveTransactionDraft === 'confirmation') {
-                if (self.transactionsStore.isTransactionDraftModified(self.transaction)) {
-                    self.$confirm('Do you want to save this transaction draft?', () => {
-                        self.transactionsStore.saveTransactionDraft(self.transaction);
-                    }, () => {
-                        self.transactionsStore.clearTransactionDraft();
-                    });
-                } else {
-                    self.transactionsStore.clearTransactionDraft();
-                }
-            } else if (self.settingsStore.appSettings.autoSaveTransactionDraft === 'enabled') {
-                self.transactionsStore.saveTransactionDraft(self.transaction);
-            }
-        },
-        save() {
-            const self = this;
-            const router = self.f7router;
-
-            if (self.mode === 'view') {
-                return;
-            }
-
-            const problemMessage = self.inputEmptyProblemMessage;
-
-            if (problemMessage) {
-                self.$alert(problemMessage);
-                return;
-            }
-
-            if (self.type === 'transaction' && (self.mode === 'add' || self.mode === 'edit')) {
-                const doSubmit = function () {
-                    self.submitting = true;
-                    self.$showLoading(() => self.submitting);
-
-                    self.transactionsStore.saveTransaction({
-                        transaction: self.transaction,
-                        defaultCurrency: self.defaultCurrency,
-                        isEdit: self.mode === 'edit',
-                        clientSessionId: self.clientSessionId
-                    }).then(() => {
-                        self.submitting = false;
-                        self.$hideLoading();
-
-                        if (self.mode === 'add') {
-                            self.$toast('You have added a new transaction');
-                        } else if (self.mode === 'edit') {
-                            self.$toast('You have saved this transaction');
-                        }
-
-                        if (self.mode === 'add' && !self.addByTemplateId && !self.duplicateFromId) {
-                            self.transactionsStore.clearTransactionDraft();
-                        }
-
-                        self.submitted = true;
-                        router.back();
-                    }).catch(error => {
-                        self.submitting = false;
-                        self.$hideLoading();
-
-                        if (error.error && (error.error.errorCode === KnownErrorCode.TransactionCannotCreateInThisTime || error.error.errorCode === KnownErrorCode.TransactionCannotModifyInThisTime)) {
-                            self.$confirm('You have set this time range to prevent editing transactions. Would you like to change the editable transaction range to All?', () => {
-                                self.submitting = true;
-                                self.$showLoading(() => self.submitting);
-
-                                self.userStore.updateUserTransactionEditScope({
-                                    transactionEditScope: TransactionEditScopeType.All.type
-                                }).then(() => {
-                                    self.submitting = false;
-                                    self.$hideLoading();
-
-                                    self.$toast('Your editable transaction range has been set to All');
-                                }).catch(error => {
-                                    self.submitting = false;
-                                    self.$hideLoading();
-
-                                    if (!error.processed) {
-                                        self.$toast(error.message || error);
-                                    }
-                                });
-                            });
-                        } else if (!error.processed) {
-                            self.$toast(error.message || error);
-                        }
-                    });
-                };
-
-                if (self.transaction.sourceAmount === 0) {
-                    self.$confirm('Are you sure you want to save this transaction with a zero amount?', () => {
-                        doSubmit();
-                    });
-                } else {
-                    doSubmit();
-                }
-            } else if (self.type === 'template' && (self.mode === 'add' || self.mode === 'edit')) {
-                self.submitting = true;
-                self.$showLoading(() => self.submitting);
-
-                self.transactionTemplatesStore.saveTemplateContent({
-                    template: self.transaction,
-                    isEdit: self.mode === 'edit',
-                    clientSessionId: self.clientSessionId
-                }).then(() => {
-                    self.submitting = false;
-                    self.$hideLoading();
-
-                    if (self.mode === 'add') {
-                        self.$toast('You have added a new template');
-                    } else if (self.mode === 'edit') {
-                        self.$toast('You have saved this template');
-                    }
-
-                    self.submitted = true;
-                    router.back();
-                }).catch(error => {
-                    self.submitting = false;
-                    self.$hideLoading();
-
-                    if (!error.processed) {
-                        self.$toast(error.message || error);
-                    }
-                });
-            }
-        },
-        updateGeoLocation(forceUpdate) {
-            const self = this;
-
-            if (!self.isSupportGeoLocation) {
-                logger.warn('this browser does not support geo location');
-
-                if (forceUpdate) {
-                    self.$toast('Unable to retrieve current position');
-                }
-                return;
-            }
-
-            navigator.geolocation.getCurrentPosition(function (position) {
-                if (!position || !position.coords) {
-                    logger.error('current position is null');
-                    self.geoLocationStatus = 'error';
-
-                    if (forceUpdate) {
-                        self.$toast('Unable to retrieve current position');
-                    }
-
-                    return;
-                }
-
-                self.geoLocationStatus = 'success';
-
-                self.transaction.setLatitudeAndLongitude(position.coords.latitude, position.coords.longitude);
-            }, function (err) {
-                logger.error('cannot retrieve current position', err);
-                self.geoLocationStatus = 'error';
-
-                if (forceUpdate) {
-                    self.$toast('Unable to retrieve current position');
-                }
-            });
-
-            self.geoLocationStatus = 'getting';
-        },
-        clearGeoLocation() {
-            this.geoLocationStatus = null;
-            this.transaction.removeGeoLocation();
-        },
-        swapTransactionData(swapAccount, swapAmount) {
-            if (swapAccount) {
-                const oldSourceAccountId = this.transaction.sourceAccountId;
-                this.transaction.sourceAccountId = this.transaction.destinationAccountId;
-                this.transaction.destinationAccountId = oldSourceAccountId;
-            }
-
-            if (swapAmount) {
-                const oldSourceAmount = this.transaction.sourceAmount;
-                this.transaction.sourceAmount = this.transaction.destinationAmount;
-                this.transaction.destinationAmount = oldSourceAmount;
-            }
-        },
-        showDateTimeDialog(sheetMode) {
-            if (this.mode === 'view') {
-                this.showTimeInDefaultTimezone = !this.showTimeInDefaultTimezone;
-            } else {
-                this.transactionDateTimeSheetMode = sheetMode;
-                this.showTransactionDateTimeSheet = true;
-            }
-        },
-        showOpenPictureDialog() {
-            if (!this.canAddTransactionPicture || this.submitting) {
-                return;
-            }
-
-            this.$refs.pictureInput.click();
-        },
-        uploadPicture(event) {
-            if (!event || !event.target || !event.target.files || !event.target.files.length) {
-                return;
-            }
-
-            const self = this;
-            const pictureFile = event.target.files[0];
-
-            event.target.value = null;
-
-            self.uploadingPicture = true;
-            self.submitting = true;
-
-            self.transactionsStore.uploadTransactionPicture({ pictureFile }).then(response => {
-                self.transaction.addPicture(response);
-                self.uploadingPicture = false;
-                self.submitting = false;
-            }).catch(error => {
-                self.uploadingPicture = false;
-                self.submitting = false;
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        viewOrRemovePicture(pictureInfo) {
-            if (this.mode !== 'add' && this.mode !== 'edit' && this.transaction.pictures && this.transaction.pictures.length) {
-                this.$refs.pictureBrowser.open();
-                return;
-            }
-
-            const self = this;
-
-            self.$confirm('Are you sure you want to remove this transaction picture?', () => {
-                self.removingPictureId = pictureInfo.pictureId;
-                self.submitting = true;
-
-                self.transactionsStore.removeUnusedTransactionPicture({ pictureInfo }).then(response => {
-                    if (response) {
-                        self.transaction.removePicture(pictureInfo);
-                    }
-
-                    self.removingPictureId = '';
-                    self.submitting = false;
-                }).catch(error => {
-                    if (error.error && error.error.errorCode === KnownErrorCode.TransactionPictureNotFound) {
-                        self.transaction.removePicture(pictureInfo);
-                    } else if (!error.processed) {
-                        self.$toast(error.message || error);
-                    }
-
-                    self.removingPictureId = '';
-                    self.submitting = false;
-                });
-            });
-        },
-        getTransactionPictureUrl(pictureInfo) {
-            return this.transactionsStore.getTransactionPictureUrl(pictureInfo);
-        },
-        getFontClassByAmount(amount) {
-            if (amount >= 100000000 || amount <= -100000000) {
-                return 'ebk-small-amount';
-            } else if (amount >= 1000000 || amount <= -1000000) {
-                return 'ebk-normal-amount';
-            } else {
-                return 'ebk-large-amount';
-            }
-        },
-        getDisplayAmount(amount, hideAmount, currencyCode) {
-            if (hideAmount) {
-                return this.getDisplayCurrency('***', currencyCode);
-            }
-
-            return this.getDisplayCurrency(amount, currencyCode);
-        },
-        getDisplayCurrency(value, currencyCode) {
-            return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
-        },
-        getPrimaryCategoryName(categoryId, allCategories) {
-            return getTransactionPrimaryCategoryName(categoryId, allCategories);
-        },
-        getSecondaryCategoryName(categoryId, allCategories) {
-            return getTransactionSecondaryCategoryName(categoryId, allCategories);
-        },
-        getTagName(tagId) {
-            return getNameByKeyValue(this.allTags, tagId, 'id', 'name');
-        }
     }
-};
+}
+
+function updateGeoLocation(forceUpdate: boolean): void {
+    if (!isSupportGeoLocation) {
+        logger.warn('this browser does not support geo location');
+
+        if (forceUpdate) {
+            showToast('Unable to retrieve current position');
+        }
+        return;
+    }
+
+    navigator.geolocation.getCurrentPosition(function (position) {
+        if (!position || !position.coords) {
+            logger.error('current position is null');
+            geoLocationStatus.value = GeoLocationStatus.Error;
+
+            if (forceUpdate) {
+                showToast('Unable to retrieve current position');
+            }
+
+            return;
+        }
+
+        geoLocationStatus.value = GeoLocationStatus.Success;
+
+        transaction.value.setLatitudeAndLongitude(position.coords.latitude, position.coords.longitude);
+    }, function (err) {
+        logger.error('cannot retrieve current position', err);
+        geoLocationStatus.value = GeoLocationStatus.Error;
+
+        if (forceUpdate) {
+            showToast('Unable to retrieve current position');
+        }
+    });
+
+    geoLocationStatus.value = GeoLocationStatus.Getting;
+}
+
+function clearGeoLocation(): void {
+    geoLocationStatus.value = null;
+    transaction.value.removeGeoLocation();
+}
+
+function showDateTimeDialog(sheetMode: string): void {
+    if (mode.value === TransactionEditPageMode.View) {
+        showTimeInDefaultTimezone.value = !showTimeInDefaultTimezone.value;
+    } else {
+        transactionDateTimeSheetMode.value = sheetMode;
+        showTransactionDateTimeSheet.value = true;
+    }
+}
+
+function showOpenPictureDialog(): void {
+    if (!canAddTransactionPicture.value || submitting.value) {
+        return;
+    }
+
+    pictureInput.value?.click();
+}
+
+function uploadPicture(event: Event): void {
+    if (!event || !event.target) {
+        return;
+    }
+
+    const el = event.target as HTMLInputElement;
+
+    if (!el.files || !el.files.length) {
+        return;
+    }
+
+    const pictureFile = el.files[0];
+
+    el.value = '';
+
+    uploadingPicture.value = true;
+    submitting.value = true;
+
+    transactionsStore.uploadTransactionPicture({ pictureFile }).then(response => {
+        transaction.value.addPicture(response);
+        uploadingPicture.value = false;
+        submitting.value = false;
+    }).catch(error => {
+        uploadingPicture.value = false;
+        submitting.value = false;
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function viewOrRemovePicture(pictureInfo: TransactionPictureInfoBasicResponse): void {
+    if (mode.value !== TransactionEditPageMode.Add && mode.value !== TransactionEditPageMode.Edit && transaction.value.pictures && transaction.value.pictures.length) {
+        pictureBrowser.value?.open();
+        return;
+    }
+
+    showConfirm('Are you sure you want to remove this transaction picture?', () => {
+        removingPictureId.value = pictureInfo.pictureId;
+        submitting.value = true;
+
+        transactionsStore.removeUnusedTransactionPicture({ pictureInfo }).then(response => {
+            if (response) {
+                transaction.value.removePicture(pictureInfo);
+            }
+
+            removingPictureId.value = '';
+            submitting.value = false;
+        }).catch(error => {
+            if (error.error && error.error.errorCode === KnownErrorCode.TransactionPictureNotFound) {
+                transaction.value.removePicture(pictureInfo);
+            } else if (!error.processed) {
+                showToast(error.message || error);
+            }
+
+            removingPictureId.value = '';
+            submitting.value = false;
+        });
+    });
+}
+
+function onPageAfterIn(): void {
+    routeBackOnError(props.f7router, loadingError);
+
+    if (settingsStore.appSettings.autoGetCurrentGeoLocation && mode.value === TransactionEditPageMode.Add
+        && !geoLocationStatus.value && !transaction.value.geoLocation) {
+        updateGeoLocation(false);
+    }
+}
+
+function onPageBeforeOut(): void {
+    if (submitted.value || pageTypeAndMode?.type !== TransactionEditPageType.Transaction || mode.value !== TransactionEditPageMode.Add || addByTemplateId.value || duplicateFromId.value) {
+        return;
+    }
+
+    if (settingsStore.appSettings.autoSaveTransactionDraft === 'confirmation') {
+        if (transactionsStore.isTransactionDraftModified(transaction.value)) {
+            showConfirm('Do you want to save this transaction draft?', () => {
+                transactionsStore.saveTransactionDraft(transaction.value);
+            }, () => {
+                transactionsStore.clearTransactionDraft();
+            });
+        } else {
+            transactionsStore.clearTransactionDraft();
+        }
+    } else if (settingsStore.appSettings.autoSaveTransactionDraft === 'enabled') {
+        transactionsStore.saveTransactionDraft(transaction.value);
+    }
+}
+
+init();
 </script>
 
 <style>