diff --git a/pkg/models/transaction.go b/pkg/models/transaction.go
index 24a54eea..eab98482 100644
--- a/pkg/models/transaction.go
+++ b/pkg/models/transaction.go
@@ -126,8 +126,8 @@ type TransactionListInMonthByPageRequest struct {
 	CategoryId   int64             `form:"category_id" binding:"min=0"`
 	AccountId    int64             `form:"account_id" binding:"min=0"`
 	Keyword      string            `form:"keyword"`
-	Page         int32             `form:"page" binding:"required,min=1"`
-	Count        int32             `form:"count" binding:"required,min=1,max=50"`
+	Page         int32             `form:"page" binding:"min=0"`
+	Count        int32             `form:"count" binding:"min=0,max=50"`
 	TrimAccount  bool              `form:"trim_account"`
 	TrimCategory bool              `form:"trim_category"`
 	TrimTag      bool              `form:"trim_tag"`
diff --git a/pkg/services/transactions.go b/pkg/services/transactions.go
index e1277c85..b458f617 100644
--- a/pkg/services/transactions.go
+++ b/pkg/services/transactions.go
@@ -98,11 +98,11 @@ func (s *TransactionService) GetTransactionsInMonthByPage(uid int64, year int32,
 		return nil, errs.ErrUserIdInvalid
 	}
 
-	if page < 1 {
+	if page < 0 || (count > 0 && page < 1) {
 		return nil, errs.ErrPageIndexInvalid
 	}
 
-	if count < 1 {
+	if count < 0 {
 		return nil, errs.ErrPageCountInvalid
 	}
 
@@ -120,7 +120,13 @@ func (s *TransactionService) GetTransactionsInMonthByPage(uid int64, year int32,
 	var transactions []*models.Transaction
 
 	condition, conditionParams := s.getTransactionQueryCondition(uid, maxTransactionTime, minTransactionTime, transactionType, categoryIds, accountIds, keyword, true)
-	err = s.UserDataDB(uid).Where(condition, conditionParams...).Limit(int(count), int(count*(page-1))).OrderBy("transaction_time desc").Find(&transactions)
+	sess := s.UserDataDB(uid).Where(condition, conditionParams...)
+
+	if count > 0 {
+		sess = sess.Limit(int(count), int(count*(page-1)))
+	}
+
+	err = sess.OrderBy("transaction_time desc").Find(&transactions)
 
 	return transactions, err
 }
diff --git a/src/lib/datetime.js b/src/lib/datetime.js
index 4560f386..fdf14801 100644
--- a/src/lib/datetime.js
+++ b/src/lib/datetime.js
@@ -331,6 +331,70 @@ export function getDateRangeByDateType(dateType, firstDayOfWeek) {
     };
 }
 
+export function getRecentMonthDateRanges(monthCount) {
+    const recentDateRanges = [];
+    const thisMonthFirstUnixTime = getThisMonthFirstUnixTime();
+
+    for (let i = 0; i < monthCount; i++) {
+        let minTime = thisMonthFirstUnixTime;
+
+        if (i > 0) {
+            minTime = getUnixTimeBeforeUnixTime(thisMonthFirstUnixTime, i, 'months');
+        }
+
+        let maxTime = getUnixTimeBeforeUnixTime(getUnixTimeAfterUnixTime(minTime, 1, 'months'), 1, 'seconds');
+        let dateType = dateTimeConstants.allDateRanges.Custom.type;
+        let year = getYear(parseDateFromUnixTime(minTime));
+        let month = getMonth(parseDateFromUnixTime(minTime));
+
+        if (i === 0) {
+            dateType = dateTimeConstants.allDateRanges.ThisMonth.type;
+        } else if (i === 1) {
+            dateType = dateTimeConstants.allDateRanges.LastMonth.type;
+        }
+
+        recentDateRanges.push({
+            dateType: dateType,
+            minTime: minTime,
+            maxTime: maxTime,
+            year: year,
+            month: month
+        });
+    }
+
+    return recentDateRanges;
+}
+
+export function getRecentDateRangeType(allRecentMonthDateRanges, dateType, minTime, maxTime, firstDayOfWeek) {
+    let dateRange = getDateRangeByDateType(dateType, firstDayOfWeek);
+
+    if (dateRange && dateRange.dateType === dateTimeConstants.allDateRanges.All.type) {
+        return allRecentMonthDateRanges.length - 1; // Custom
+    }
+
+    if (!dateRange && (!maxTime || !minTime)) {
+        return allRecentMonthDateRanges.length - 1; // Custom
+    }
+
+    if (!dateRange) {
+        dateRange = {
+            dateType: dateTimeConstants.allDateRanges.Custom.type,
+            maxTime: maxTime,
+            minTime: minTime
+        };
+    }
+
+    for (let i = 0; i < allRecentMonthDateRanges.length - 1; i++) {
+        const recentDateRange = allRecentMonthDateRanges[i];
+
+        if (recentDateRange.minTime === dateRange.minTime && recentDateRange.maxTime === dateRange.maxTime) {
+            return i;
+        }
+    }
+
+    return allRecentMonthDateRanges.length - 1; // Custom
+}
+
 export function isDateRangeMatchFullYears(minTime, maxTime) {
     const minDateTime = parseDateFromUnixTime(minTime).set({ second: 0, millisecond: 0 });
     const maxDateTime = parseDateFromUnixTime(maxTime).set({ second: 59, millisecond: 999 });
diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index d3e7b756..4b9bd83c 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -22,6 +22,7 @@ import {
     getBrowserTimezoneOffset,
     getBrowserTimezoneOffsetMinutes,
     getDateTimeFormatType,
+    getRecentMonthDateRanges,
     isDateRangeMatchFullYears,
     isDateRangeMatchFullMonths
 } from './datetime.js';
@@ -388,10 +389,18 @@ function getMonthShortName(month, translateFn) {
     return translateFn(`datetime.${month}.short`);
 }
 
+function getMonthLongName(month, translateFn) {
+    return translateFn(`datetime.${month}.long`);
+}
+
 function getWeekdayShortName(weekDay, translateFn) {
     return translateFn(`datetime.${weekDay}.short`);
 }
 
+function getWeekdayLongName(weekDay, translateFn) {
+    return translateFn(`datetime.${weekDay}.long`);
+}
+
 function getI18nLongDateFormat(translateFn, formatTypeValue) {
     const defaultLongDateFormatTypeName = translateFn('default.longDateFormat');
     return getDateTimeFormat(translateFn, datetime.allLongDateFormat, datetime.allLongDateFormatArray, 'format.longDate', defaultLongDateFormatTypeName, datetime.defaultLongDateFormat, formatTypeValue);
@@ -588,6 +597,35 @@ function getAllDateRanges(includeCustom, translateFn) {
     return allDateRanges;
 }
 
+function getAllRecentMonthDateRanges(userStore, includeCustom, translateFn) {
+    const allRecentMonthDateRanges = [];
+    const recentDateRanges = getRecentMonthDateRanges(12);
+
+    for (let i = 0; i < recentDateRanges.length; i++) {
+        const recentDateRange = recentDateRanges[i];
+
+        allRecentMonthDateRanges.push({
+            dateType: recentDateRange.dateType,
+            minTime: recentDateRange.minTime,
+            maxTime: recentDateRange.maxTime,
+            year: recentDateRange.year,
+            month: recentDateRange.month,
+            displayName: formatUnixTime(recentDateRange.minTime, getI18nLongYearMonthFormat(translateFn, userStore.currentUserLongDateFormat))
+        });
+    }
+
+    if (includeCustom) {
+        allRecentMonthDateRanges.push({
+            dateType: datetime.allDateRanges.Custom.type,
+            minTime: 0,
+            maxTime: 0,
+            displayName: translateFn('Custom Date')
+        });
+    }
+
+    return allRecentMonthDateRanges;
+}
+
 function getDateRangeDisplayName(userStore, dateType, startTime, endTime, translateFn) {
     if (dateType === datetime.allDateRanges.All.type) {
         return translateFn(datetime.allDateRanges.All.name);
@@ -993,7 +1031,9 @@ export function i18nFunctions(i18nGlobal) {
         getAllLongTimeFormats: () => getAllLongTimeFormats(i18nGlobal.t),
         getAllShortTimeFormats: () => getAllShortTimeFormats(i18nGlobal.t),
         getMonthShortName: (month) => getMonthShortName(month, i18nGlobal.t),
+        getMonthLongName: (month) => getMonthLongName(month, i18nGlobal.t),
         getWeekdayShortName: (weekDay) => getWeekdayShortName(weekDay, i18nGlobal.t),
+        getWeekdayLongName: (weekDay) => getWeekdayLongName(weekDay, i18nGlobal.t),
         formatUnixTimeToLongDateTime: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nLongDateFormat(i18nGlobal.t, userStore.currentUserLongDateFormat) + ' ' + getI18nLongTimeFormat(i18nGlobal.t, userStore.currentUserLongTimeFormat), utcOffset, currentUtcOffset),
         formatUnixTimeToShortDateTime: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nShortDateFormat(i18nGlobal.t, userStore.currentUserShortDateFormat) + ' ' + getI18nShortTimeFormat(i18nGlobal.t, userStore.currentUserShortTimeFormat), utcOffset, currentUtcOffset),
         formatUnixTimeToLongDate: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nLongDateFormat(i18nGlobal.t, userStore.currentUserLongDateFormat), utcOffset, currentUtcOffset),
@@ -1014,6 +1054,7 @@ export function i18nFunctions(i18nGlobal) {
         getAllCurrencies: () => getAllCurrencies(i18nGlobal.t),
         getAllWeekDays: () => getAllWeekDays(i18nGlobal.t),
         getAllDateRanges: (includeCustom) => getAllDateRanges(includeCustom, i18nGlobal.t),
+        getAllRecentMonthDateRanges: (userStore, includeCustom) => getAllRecentMonthDateRanges(userStore, includeCustom, i18nGlobal.t),
         getDateRangeDisplayName: (userStore, dateType, startTime, endTime) => getDateRangeDisplayName(userStore, dateType, startTime, endTime, i18nGlobal.t),
         getAllStatisticsChartDataTypes: () => getAllStatisticsChartDataTypes(i18nGlobal.t),
         getAllStatisticsSortingTypes: () => getAllStatisticsSortingTypes(i18nGlobal.t),
diff --git a/src/lib/services.js b/src/lib/services.js
index 0cd3a153..4ca3780d 100644
--- a/src/lib/services.js
+++ b/src/lib/services.js
@@ -13,7 +13,7 @@ let needBlockRequest = false;
 let blockedRequests = [];
 
 axios.defaults.baseURL = api.baseApiUrlPath;
-axios.defaults.timeout = 10000; // 10s
+axios.defaults.timeout = 100000; // 10s
 axios.interceptors.request.use(config => {
     const token = userState.getToken();
 
@@ -240,6 +240,9 @@ export default {
     getTransactions: ({ maxTime, minTime, type, categoryId, accountId, keyword }) => {
         return axios.get(`v1/transactions/list.json?max_time=${maxTime}&min_time=${minTime}&type=${type}&category_id=${categoryId}&account_id=${accountId}&keyword=${keyword}&count=50&trim_account=true&trim_category=true&trim_tag=true`);
     },
+    getAllTransactionsByMonth: ({ year, month, type, categoryId, accountId, keyword }) => {
+        return axios.get(`v1/transactions/list/by_month.json?year=${year}&month=${month}&type=${type}&category_id=${categoryId}&account_id=${accountId}&keyword=${keyword}&trim_account=true&trim_category=true&trim_tag=true`);
+    },
     getTransactionStatistics: ({ startTime, endTime }) => {
         const queryParams = [];
 
diff --git a/src/lib/ui.desktop.js b/src/lib/ui.desktop.js
new file mode 100644
index 00000000..b9a868fa
--- /dev/null
+++ b/src/lib/ui.desktop.js
@@ -0,0 +1,52 @@
+export function getOuterHeight(element) {
+    if (!element) {
+        return 0;
+    }
+
+    const computedStyle = window.getComputedStyle(element);
+
+    return ['height', 'padding-top', 'padding-bottom', 'margin-top', 'margin-bottom']
+        .map((key) => parseInt(computedStyle.getPropertyValue(key), 10))
+        .reduce((prev, cur) => prev + cur);
+}
+
+export function getCssValue(element, name) {
+    if (!element) {
+        return 0;
+    }
+
+    const computedStyle = window.getComputedStyle(element);
+    return computedStyle.getPropertyValue(name);
+}
+
+export function scrollToMenuListItem(listContentEl) {
+    if (!listContentEl) {
+        return;
+    }
+
+    const lists = listContentEl.querySelectorAll('div.v-list');
+
+    if (!lists.length || !lists[0]) {
+        return;
+    }
+
+    const container = lists[0];
+    const selectedItems = container.querySelectorAll('div.v-list-item.list-item-selected');
+
+    if (!selectedItems.length || !selectedItems[0]) {
+        return;
+    }
+
+    const selectedItem = selectedItems[0];
+    const containerOuterHeight = getOuterHeight(container);
+    const selectedItemOuterHeight = getOuterHeight(selectedItem);
+
+    const targetPos = selectedItem.offsetTop - container.offsetTop - parseInt(getCssValue(container, 'padding-top'), 10)
+        - (containerOuterHeight - selectedItemOuterHeight) / 2;
+
+    if (targetPos <= 0) {
+        return;
+    }
+
+    container.scrollTop = targetPos;
+}
diff --git a/src/locales/en.js b/src/locales/en.js
index b02ee79d..97004aaa 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -730,7 +730,9 @@ export default {
     'Duplicate': 'Duplicate',
     'Sort': 'Sort',
     'Date': 'Date',
+    'Time': 'Time',
     'Type': 'Type',
+    'All Types': 'All Types',
     'More': 'More',
     'All': 'All',
     'Today': 'Today',
@@ -862,6 +864,7 @@ export default {
     'Unable to get account list': 'Unable to get account list',
     'Account list is up to date': 'Account list is up to date',
     'Account list has been updated': 'Account list has been updated',
+    'All Accounts': 'All Accounts',
     'No available account': 'No available account',
     'Add Account': 'Add Account',
     'Edit Account': 'Edit Account',
@@ -1071,6 +1074,7 @@ export default {
     'Income Secondary Categories': 'Income Secondary Categories',
     'Transfer Secondary Categories': 'Transfer Secondary Categories',
     'Transaction Secondary Categories': 'Transaction Secondary Categories',
+    'All Categories': 'All Categories',
     'No available category': 'No available category',
     'Add Default Categories': 'Add Default Categories',
     'Default Categories': 'Default Categories',
diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js
index 243bf430..0ef5e399 100644
--- a/src/locales/zh_Hans.js
+++ b/src/locales/zh_Hans.js
@@ -730,7 +730,9 @@ export default {
     'Duplicate': '复制',
     'Sort': '排序',
     'Date': '日期',
+    'Time': '时间',
     'Type': '类型',
+    'All Types': '全部类型',
     'More': '更多',
     'All': '全部',
     'Today': '今天',
@@ -862,6 +864,7 @@ export default {
     'Unable to get account list': '无法获取账户列表',
     'Account list is up to date': '账户列表已是最新',
     'Account list has been updated': '账户列表已更新',
+    'All Accounts': '全部账户',
     'No available account': '没有可用的账户',
     'Add Account': '添加账户',
     'Edit Account': '编辑账户',
@@ -1071,6 +1074,7 @@ export default {
     'Income Secondary Categories': '收入二级分类',
     'Transfer Secondary Categories': '转账二级分类',
     'Transaction Secondary Categories': '交易二级分类',
+    'All Categories': '全部分类',
     'No available category': '没有可用的分类',
     'Add Default Categories': '添加默认分类',
     'Default Categories': '默认分类',
diff --git a/src/router/desktop.js b/src/router/desktop.js
index 7fa4bd8f..b76b458e 100644
--- a/src/router/desktop.js
+++ b/src/router/desktop.js
@@ -82,7 +82,15 @@ const router = createRouter({
                 {
                     path: '/transactions',
                     component: TransactionsPage,
-                    beforeEnter: checkLogin
+                    beforeEnter: checkLogin,
+                    props: route => ({
+                        initDateType: route.query.dateType,
+                        initMaxTime: route.query.maxTime,
+                        initMinTime: route.query.minTime,
+                        initType: route.query.type,
+                        initCategoryId: route.query.categoryId,
+                        initAccountId: route.query.accountId
+                    })
                 },
                 {
                     path: '/statistics/transaction',
diff --git a/src/stores/transaction.js b/src/stores/transaction.js
index bfe31d2a..aacfe3f9 100644
--- a/src/stores/transaction.js
+++ b/src/stores/transaction.js
@@ -377,7 +377,31 @@ export const useTransactionsStore = defineStore('transactions', {
                 this.transactionsFilter.keyword = filter.keyword;
             }
         },
-        loadTransactions({ reload, autoExpand, defaultCurrency }) {
+        getTransactionListPageParams() {
+            const querys = [];
+
+            if (this.transactionsFilter.type) {
+                querys.push('type=' + this.transactionsFilter.type);
+            }
+
+            if (this.transactionsFilter.accountId && this.transactionsFilter.accountId !== '0') {
+                querys.push('accountId=' + this.transactionsFilter.accountId);
+            }
+
+            if (this.transactionsFilter.categoryId && this.transactionsFilter.categoryId !== '0') {
+                querys.push('categoryId=' + this.transactionsFilter.categoryId);
+            }
+
+            querys.push('dateType=' + this.transactionsFilter.dateType);
+
+            if (this.transactionsFilter.dateType === datetimeConstants.allDateRanges.Custom.type) {
+                querys.push('maxTime=' + this.transactionsFilter.maxTime);
+                querys.push('minTime=' + this.transactionsFilter.minTime);
+            }
+
+            return querys.join('&');
+        },
+        loadTransactions({ reload, yearMonth, autoExpand, defaultCurrency }) {
             const self = this;
             const settingsStore = useSettingsStore();
             const exchangeRatesStore = useExchangeRatesStore();
@@ -390,14 +414,29 @@ export const useTransactionsStore = defineStore('transactions', {
             }
 
             return new Promise((resolve, reject) => {
-                services.getTransactions({
+                let promise = null;
+
+                if (yearMonth) {
+                    promise = services.getAllTransactionsByMonth({
+                        year: yearMonth.year,
+                        month: yearMonth.month,
+                        type: self.transactionsFilter.type,
+                        categoryId: self.transactionsFilter.categoryId,
+                        accountId: self.transactionsFilter.accountId,
+                        keyword: self.transactionsFilter.keyword
+                    });
+                } else {
+                    promise = services.getTransactions({
                         maxTime: actualMaxTime,
                         minTime: self.transactionsFilter.minTime * 1000,
                         type: self.transactionsFilter.type,
                         categoryId: self.transactionsFilter.categoryId,
                         accountId: self.transactionsFilter.accountId,
                         keyword: self.transactionsFilter.keyword
-                }).then(response => {
+                    });
+                }
+
+                promise.then(response => {
                     const data = response.data;
 
                     if (!data || !data.success || !data.result) {
diff --git a/src/styles/desktop/global.scss b/src/styles/desktop/global.scss
index 15ac90b8..9ab17348 100644
--- a/src/styles/desktop/global.scss
+++ b/src/styles/desktop/global.scss
@@ -113,16 +113,22 @@ input[type=number] {
     tr.even-row {
         background: #fcfcfc;
     }
+
+    tbody.has-bottom-border > tr:last-child > td {
+        border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+    }
+}
+
+.v-table.v-table--hover {
+    tbody > tr.no-hover:hover td {
+        background: inherit !important;
+    }
 }
 
 .v-table.table-striped {
     tr:nth-child(even) {
         background: #fcfcfc;
     }
-
-    tbody.has-bottom-border > tr:last-child > td {
-        border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
-    }
 }
 
 .v-theme--dark {
diff --git a/src/views/desktop/MainLayout.vue b/src/views/desktop/MainLayout.vue
index 7b257ab8..38340499 100644
--- a/src/views/desktop/MainLayout.vue
+++ b/src/views/desktop/MainLayout.vue
@@ -27,7 +27,7 @@
                     </div>
                 </li>
                 <li class="nav-link">
-                    <router-link to="/transactions">
+                    <router-link to="/transactions?dateType=7">
                         <v-icon class="nav-item-icon" :icon="icons.transactions"/>
                         <span class="nav-item-title">{{ $t('Transaction List') }}</span>
                     </router-link>
diff --git a/src/views/desktop/TransactionsPage.vue b/src/views/desktop/TransactionsPage.vue
index fb4979f8..67cc946d 100644
--- a/src/views/desktop/TransactionsPage.vue
+++ b/src/views/desktop/TransactionsPage.vue
@@ -1,13 +1,994 @@
 <template>
     <v-row class="match-height">
-        transactions
+        <v-col cols="12">
+            <v-card>
+                <div class="d-flex flex-column flex-md-row">
+                    <div>
+                        <div class="mx-6 my-4">
+                            <div class="transaction-type-buttons d-flex flex-column">
+                                <v-btn border :color="query.type === 0 ? 'primary' : 'default'"
+                                       :variant="query.type === 0 ? 'tonal' : 'outlined'" :disabled="loading"
+                                       @click="changeTypeFilter(0)">
+                                    {{ $t('All Types') }}
+                                </v-btn>
+                                <v-btn border :color="query.type === 1 ? 'primary' : 'default'"
+                                       :variant="query.type === 1 ? 'tonal' : 'outlined'" :disabled="loading"
+                                       @click="changeTypeFilter(1)">
+                                    {{ $t('Modify Balance') }}
+                                </v-btn>
+                                <v-btn border :color="query.type === 2 ? 'primary' : 'default'"
+                                       :variant="query.type === 2 ? 'tonal' : 'outlined'" :disabled="loading"
+                                       @click="changeTypeFilter(2)">
+                                    {{ $t('Income') }}
+                                </v-btn>
+                                <v-btn border :color="query.type === 3 ? 'primary' : 'default'"
+                                       :variant="query.type === 3 ? 'tonal' : 'outlined'" :disabled="loading"
+                                       @click="changeTypeFilter(3)">
+                                    {{ $t('Expense') }}
+                                </v-btn>
+                                <v-btn border :color="query.type === 4 ? 'primary' : 'default'"
+                                       :variant="query.type === 4 ? 'tonal' : 'outlined'" :disabled="loading"
+                                       @click="changeTypeFilter(4)">
+                                    {{ $t('Transfer') }}
+                                </v-btn>
+                            </div>
+                        </div>
+                        <v-divider />
+                        <v-tabs show-arrows class="my-4" direction="vertical"
+                                :disabled="loading" v-model="recentDateRangeType">
+                            <v-tab :key="idx" :value="idx" v-for="(recentDateRange, idx) in recentMonthDateRanges"
+                                   @click="changeDateFilter(recentDateRange)">
+                                {{ recentDateRange.displayName }}
+                            </v-tab>
+                        </v-tabs>
+                    </div>
+                    <v-window class="d-flex flex-grow-1 ml-md-5 disable-tab-transition w-100-window-container" v-model="activeTab">
+                        <v-window-item value="transactionPage">
+                            <v-card variant="flat">
+                                <template #title>
+                                    <div class="transaction-list-title d-flex align-center text-no-wrap">
+                                        <span>{{ $t('Transaction List') }}</span>
+                                        <v-btn class="ml-3" color="default" variant="outlined"
+                                               :disabled="loading" @click="add">{{ $t('Add') }}</v-btn>
+                                        <v-btn density="compact" color="default" variant="text"
+                                               class="ml-2" :icon="true" :disabled="loading"
+                                               v-if="!loading" @click="reload">
+                                            <v-icon :icon="icons.refresh" size="24" />
+                                            <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
+                                        </v-btn>
+                                        <v-progress-circular indeterminate size="24" class="ml-2" v-if="loading"></v-progress-circular>
+                                        <v-spacer/>
+                                        <div class="transaction-keyword-filter ml-2">
+                                            <v-text-field density="compact" :disabled="loading"
+                                                          :prepend-inner-icon="icons.search"
+                                                          :append-inner-icon="searchKeyword !== query.keyword ? icons.check : null"
+                                                          :placeholder="$t('Search transaction description')"
+                                                          v-model="searchKeyword"
+                                                          @click:append-inner="changeKeywordFilter(searchKeyword)"
+                                                          @keyup.enter="changeKeywordFilter(searchKeyword)"
+                                            />
+                                        </div>
+                                    </div>
+                                </template>
+
+                                <v-card-text class="pt-0">
+                                    <div class="transaction-list-datetime-range d-flex align-center">
+                                        <span class="text-body-1">{{ $t('Date Range') }}</span>
+                                        <span class="text-body-1 transaction-list-datetime-range-text ml-2">
+                                            <span v-if="!this.query.minTime && !this.query.maxTime">{{ $t('All') }}</span>
+                                            <span v-if="this.query.minTime || this.query.maxTime">{{ queryMinTime }}</span>
+                                            <span v-if="this.query.minTime || this.query.maxTime">&nbsp;-&nbsp;</span>
+                                            <span v-if="this.query.minTime || this.query.maxTime">{{ queryMaxTime }}</span>
+                                        </span>
+                                        <v-spacer/>
+                                        <div class="transaction-list-total-amount-text d-flex align-center" v-if="isShowMonthlyData">
+                                            <span class="ml-2 text-subtitle-1">{{ $t('Total Income') }}</span>
+                                            <span class="text-income ml-2" v-if="loading">
+                                                <v-skeleton-loader type="text" style="width: 60px" :loading="true"></v-skeleton-loader>
+                                            </span>
+                                            <span class="text-income ml-2" v-else-if="!loading">
+                                                {{ monthlyDataTotalIncome }}
+                                            </span>
+                                            <span class="text-subtitle-1 ml-2">{{ $t('Total Expense') }}</span>
+                                            <span class="text-income ml-2" v-if="loading">
+                                                <v-skeleton-loader type="text" style="width: 60px" :loading="true"></v-skeleton-loader>
+                                            </span>
+                                            <span class="text-expense ml-2" v-else-if="!loading">
+                                                {{ monthlyDataTotalExpense }}
+                                            </span>
+                                        </div>
+                                    </div>
+                                </v-card-text>
+
+                                <v-table class="transaction-table" :hover="!loading">
+                                    <thead>
+                                    <tr>
+                                        <th class="transaction-table-column-time text-uppercase">{{ $t('Time') }}</th>
+                                        <th class="transaction-table-column-category text-uppercase">
+                                            <v-menu ref="categoryFilterMenu" class="transaction-category-menu"
+                                                    eager location="bottom" max-height="500"
+                                                    :close-on-content-click="false"
+                                                    @update:model-value="scrollCategoryMenuToSelectedItem">
+                                                <template #activator="{ props }">
+                                                    <div class="cursor-pointer"
+                                                         :class="{ 'readonly': loading, 'text-primary': query.categoryId > 0 }" v-bind="props">
+                                                        <span>{{ queryCategoryName }}</span>
+                                                        <v-icon :icon="icons.dropdownMenu" />
+                                                    </div>
+                                                </template>
+                                                <v-list :selected="[query.categoryId]">
+                                                    <v-list-item key="0" value="0" class="text-sm" density="compact"
+                                                                 :class="{ 'list-item-selected': query.categoryId === '0' }"
+                                                                 :append-icon="(query.categoryId === '0' ? icons.check : null)">
+                                                        <v-list-item-title class="cursor-pointer"
+                                                                           @click="changeCategoryFilter('0')">
+                                                            <div class="d-flex align-center">
+                                                                <v-icon :icon="icons.all" />
+                                                                <span class="text-sm ml-3">{{ $t('All') }}</span>
+                                                            </div>
+                                                        </v-list-item-title>
+                                                    </v-list-item>
+
+                                                    <template :key="categoryType"
+                                                              v-for="(categories, categoryType) in allPrimaryCategories"
+                                                              v-show="!query.type || getTransactionTypeFromCategoryType(categoryType) === query.type">
+                                                        <v-list-item density="compact">
+                                                            <v-list-item-title>
+                                                                <span class="text-sm">{{ getTransactionTypeName(getTransactionTypeFromCategoryType(categoryType), 'Type') }}</span>
+                                                            </v-list-item-title>
+                                                        </v-list-item>
+
+                                                        <v-list-group :key="category.id" v-for="category in categories">
+                                                            <template v-slot:activator="{ props }" v-if="!category.hidden">
+                                                                <v-divider />
+                                                                <v-list-item class="text-sm" density="compact"
+                                                                             :class="getCategoryListItemCheckedClass(category, query.categoryId)"
+                                                                             v-bind="props">
+                                                                    <v-list-item-title>
+                                                                        <div class="d-flex align-center">
+                                                                            <ItemIcon icon-type="category" size="24px" :icon-id="category.icon" :color="category.color"></ItemIcon>
+                                                                            <span class="text-sm ml-3">{{ category.name }}</span>
+                                                                        </div>
+                                                                    </v-list-item-title>
+                                                                </v-list-item>
+                                                            </template>
+
+                                                            <v-divider />
+                                                            <v-list-item class="text-sm" density="compact"
+                                                                         :value="category.id"
+                                                                         :append-icon="(query.categoryId === category.id ? icons.check : null)">
+                                                                <v-list-item-title class="cursor-pointer"
+                                                                                   @click="changeCategoryFilter(category.id)">
+                                                                    <div class="d-flex align-center">
+                                                                        <v-icon :icon="icons.all" />
+                                                                        <span class="text-sm ml-3">{{ $t('All') }}</span>
+                                                                    </div>
+                                                                </v-list-item-title>
+                                                            </v-list-item>
+
+                                                            <template :key="subCategory.id"
+                                                                      v-for="subCategory in category.subCategories">
+                                                                <v-divider v-if="!subCategory.hidden" />
+                                                                <v-list-item class="text-sm" density="compact"
+                                                                             :value="subCategory.id"
+                                                                             :class="{ 'list-item-selected': query.categoryId === subCategory.id }"
+                                                                             :append-icon="(query.categoryId === subCategory.id ? icons.check : null)"
+                                                                             v-if="!subCategory.hidden">
+                                                                    <v-list-item-title class="cursor-pointer"
+                                                                                       @click="changeCategoryFilter(subCategory.id)">
+                                                                        <div class="d-flex align-center">
+                                                                            <ItemIcon icon-type="category" size="24px" :icon-id="subCategory.icon" :color="subCategory.color"></ItemIcon>
+                                                                            <span class="text-sm ml-3">{{ subCategory.name }}</span>
+                                                                        </div>
+                                                                    </v-list-item-title>
+                                                                </v-list-item>
+                                                            </template>
+                                                        </v-list-group>
+                                                    </template>
+                                                </v-list>
+                                            </v-menu>
+                                        </th>
+                                        <th class="transaction-table-column-amount text-uppercase">{{ $t('Amount') }}</th>
+                                        <th class="transaction-table-column-account text-uppercase">
+                                            <v-menu ref="accountFilterMenu" class="transaction-account-menu"
+                                                    eager location="bottom" max-height="500"
+                                                    @update:model-value="scrollAccountMenuToSelectedItem">
+                                                <template #activator="{ props }">
+                                                    <div class="cursor-pointer"
+                                                         :class="{ 'readonly': loading, 'text-primary': query.accountId > 0 }" v-bind="props">
+                                                        <span>{{ queryAccountName }}</span>
+                                                        <v-icon :icon="icons.dropdownMenu" />
+                                                    </div>
+                                                </template>
+                                                <v-list :selected="[query.accountId]">
+                                                    <v-list-item key="0" value="0" class="text-sm" density="compact"
+                                                                 :class="{ 'list-item-selected': query.accountId === '0' }"
+                                                                 :append-icon="(query.accountId === '0' ? icons.check : null)">
+                                                        <v-list-item-title class="cursor-pointer"
+                                                                           @click="changeAccountFilter('0')">
+                                                            <div class="d-flex align-center">
+                                                                <v-icon :icon="icons.all" />
+                                                                <span class="text-sm ml-3">{{ $t('All') }}</span>
+                                                            </div>
+                                                        </v-list-item-title>
+                                                    </v-list-item>
+                                                    <template :key="account.id"
+                                                              v-for="account in allAccounts">
+                                                        <v-divider v-if="!account.hidden" />
+                                                        <v-list-item class="text-sm" density="compact"
+                                                                     :value="account.id"
+                                                                     :class="{ 'list-item-selected': query.accountId === account.id }"
+                                                                     :append-icon="(query.accountId === account.id ? icons.check : null)"
+                                                                     v-if="!account.hidden">
+                                                            <v-list-item-title class="cursor-pointer"
+                                                                               @click="changeAccountFilter(account.id)">
+                                                                <div class="d-flex align-center">
+                                                                    <ItemIcon icon-type="account" size="24px" :icon-id="account.icon" :color="account.color"></ItemIcon>
+                                                                    <span class="text-sm ml-3">{{ account.name }}</span>
+                                                                </div>
+                                                            </v-list-item-title>
+                                                        </v-list-item>
+                                                    </template>
+                                                </v-list>
+                                            </v-menu>
+                                        </th>
+                                        <th class="transaction-table-column-description text-uppercase">{{ $t('Description') }}</th>
+                                    </tr>
+                                    </thead>
+
+                                    <tbody v-if="loading">
+                                    <tr :key="itemIdx" v-for="itemIdx in [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]">
+                                        <td class="px-0" colspan="5">
+                                            <v-skeleton-loader type="text" :loading="true"></v-skeleton-loader>
+                                        </td>
+                                    </tr>
+                                    </tbody>
+
+                                    <tbody v-if="!loading && noTransaction">
+                                    <tr>
+                                        <td colspan="5">{{ $t('No transaction data') }}</td>
+                                    </tr>
+                                    </tbody>
+
+                                    <template :key="transactionMonthList.yearMonth" :class="{ 'has-bottom-border': monthIdx < transactions.length - 1 }"
+                                              v-for="(transactionMonthList, monthIdx) in transactions">
+                                        <tbody v-if="shouldShowMonthlyData(transactionMonthList)">
+                                        <template :key="transaction.id" v-for="(transaction, idx) in transactionMonthList.items">
+                                            <template v-if="monthlyDatePageFirstIndex <= idx && idx < monthlyDatePageLastIndex">
+                                                <tr class="transaction-list-row-date no-hover text-sm"
+                                                    v-if="idx === 0 || monthlyDatePageFirstIndex === idx || (idx > 0 && (transaction.day !== transactionMonthList.items[idx - 1].day))">
+                                                    <td colspan="5" class="font-weight-bold">
+                                                        <div class="d-flex align-center">
+                                                            <span>{{ getLongDate(transaction) }}</span>
+                                                            <v-chip class="ml-1" color="default" size="x-small">
+                                                                {{ getWeekdayLongName(transaction) }}
+                                                            </v-chip>
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                                <tr class="transaction-table-row-data text-sm cursor-pointer"
+                                                    @click="show(transaction)">
+                                                    <td class="transaction-table-column-time">
+                                                        <div class="d-flex flex-column">
+                                                            <span>{{ getDisplayTime(transaction) }}</span>
+                                                            <span class="text-caption" v-if="transaction.utcOffset !== currentTimezoneOffsetMinutes">{{ getDisplayTimezone(transaction) }}</span>
+                                                        </div>
+                                                    </td>
+                                                    <td class="transaction-table-column-category">
+                                                        <div class="d-flex align-center">
+                                                            <ItemIcon size="24px" icon-type="category"
+                                                                      :icon-id="transaction.category.icon"
+                                                                      :color="transaction.category.color"
+                                                                      v-if="transaction.category && transaction.category.color"></ItemIcon>
+                                                            <v-icon size="24" :icon="icons.modifyBalance" v-else-if="!transaction.category || !transaction.category.color" />
+                                                            <span class="ml-2" v-if="transaction.type === allTransactionTypes.ModifyBalance">
+                                                                {{ $t('Modify Balance') }}
+                                                            </span>
+                                                            <span class="ml-2" v-else-if="transaction.type !== allTransactionTypes.ModifyBalance && transaction.category">
+                                                                {{ transaction.category.name }}
+                                                            </span>
+                                                            <span class="ml-2" v-else-if="transaction.type !== allTransactionTypes.ModifyBalance && !transaction.category">
+                                                                {{ getTransactionTypeName(transaction.type, 'Transaction') }}
+                                                            </span>
+                                                        </div>
+                                                    </td>
+                                                    <td class="transaction-table-column-amount" :class="{ 'text-expense': transaction.type === allTransactionTypes.Expense, 'text-income': transaction.type === allTransactionTypes.Income }">
+                                                        <div v-if="transaction.sourceAccount">
+                                                            <span v-if="!query.accountId || query.accountId === '0' || (transaction.sourceAccount && (transaction.sourceAccount.id === query.accountId || transaction.sourceAccount.parentId === query.accountId))">{{ getDisplayAmount(transaction.sourceAmount, transaction.sourceAccount.currency, transaction.hideAmount) }}</span>
+                                                            <span v-else-if="query.accountId && query.accountId !== '0' && transaction.destinationAccount && (transaction.destinationAccount.id === query.accountId || transaction.destinationAccount.parentId === query.accountId)">{{ getDisplayAmount(transaction.destinationAmount, transaction.destinationAccount.currency, transaction.hideAmount) }}</span>
+                                                            <span v-else></span>
+                                                        </div>
+                                                    </td>
+                                                    <td class="transaction-table-column-account">
+                                                        <span v-if="transaction.sourceAccount">{{ transaction.sourceAccount.name }}</span>
+                                                        <v-icon :icon="icons.arrowRight" v-if="transaction.sourceAccount && transaction.type === allTransactionTypes.Transfer && transaction.destinationAccount && transaction.sourceAccount.id !== transaction.destinationAccount.id"></v-icon>
+                                                        <span v-if="transaction.sourceAccount && transaction.type === allTransactionTypes.Transfer && transaction.destinationAccount && transaction.sourceAccount.id !== transaction.destinationAccount.id">{{ transaction.destinationAccount.name }}</span>
+                                                    </td>
+                                                    <td class="transaction-table-column-description">
+                                                        <div class="d-flex align-center">
+                                                            <span>{{ transaction.comment }}</span>
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                            </template>
+                                        </template>
+                                        </tbody>
+                                    </template>
+                                </v-table>
+
+                                <div class="mt-2 mb-4" v-if="isShowMonthlyData">
+                                    <v-pagination :total-visible="5" :length="monthlyDatePageCount"
+                                                  v-model="currentPage"></v-pagination>
+                                </div>
+                            </v-card>
+                        </v-window-item>
+                    </v-window>
+                </div>
+            </v-card>
+        </v-col>
     </v-row>
+
+    <date-range-selection-dialog :title="$t('Custom Date Range')" :persistent="true"
+                                 :min-time="query.minTime"
+                                 :max-time="query.maxTime"
+                                 v-model:show="showCustomDateRangeDialog"
+                                 @dateRange:change="changeCustomDateFilter" />
+
+    <confirm-dialog ref="confirmDialog"/>
+    <snack-bar ref="snackbar" />
 </template>
 
 <script>
-export default {
-    created() {
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/setting.js';
+import { useUserStore } from '@/stores/user.js';
+import { useAccountsStore } from '@/stores/account.js';
+import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
+import { useTransactionsStore } from '@/stores/transaction.js';
 
+import datetimeConstants from '@/consts/datetime.js';
+import currencyConstants from '@/consts/currency.js';
+import accountConstants from '@/consts/account.js';
+import transactionConstants from '@/consts/transaction.js';
+import { getNameByKeyValue } from '@/lib/common.js';
+import {
+    getCurrentUnixTime,
+    parseDateFromUnixTime,
+    getUnixTime,
+    getSpecifiedDayFirstUnixTime,
+    getUtcOffsetByUtcOffsetMinutes,
+    getTimezoneOffsetMinutes,
+    getBrowserTimezoneOffsetMinutes,
+    getActualUnixTimeForStore,
+    getDateRangeByDateType,
+    getRecentDateRangeType
+} from '@/lib/datetime.js';
+import {
+    categoryTypeToTransactionType,
+    transactionTypeToCategoryType
+} from '@/lib/category.js';
+import { scrollToMenuListItem } from '@/lib/ui.desktop.js';
+
+import {
+    mdiMagnify,
+    mdiCheck,
+    mdiTextBoxCheckOutline,
+    mdiRefresh,
+    mdiMenuDown,
+    mdiPencilBoxOutline,
+    mdiArrowRightThin,
+    mdiDeleteOutline,
+    mdiDotsVertical
+} from '@mdi/js';
+
+export default {
+    props: [
+        'initDateType',
+        'initMaxTime',
+        'initMinTime',
+        'initType',
+        'initCategoryId',
+        'initAccountId'
+    ],
+    data() {
+        return {
+            loading: true,
+            updating: false,
+            activeTab: 'transactionPage',
+            currentPage: 1,
+            countPerPage: 15,
+            searchKeyword: '',
+            showCustomDateRangeDialog: false,
+            transactionRemoving: {},
+            icons: {
+                search: mdiMagnify,
+                check: mdiCheck,
+                all: mdiTextBoxCheckOutline,
+                refresh: mdiRefresh,
+                dropdownMenu: mdiMenuDown,
+                modifyBalance: mdiPencilBoxOutline,
+                arrowRight: mdiArrowRightThin,
+                remove: mdiDeleteOutline,
+                more: mdiDotsVertical
+            }
+        };
+    },
+    computed: {
+        ...mapStores(useSettingsStore, useUserStore, useAccountsStore, useTransactionCategoriesStore, useTransactionsStore),
+        defaultCurrency() {
+            if (this.query.accountId && this.query.accountId !== '0') {
+                const account = this.allAccounts[this.query.accountId];
+
+                if (account && account.currency && account.currency !== currencyConstants.parentAccountCurrencyPlaceholder) {
+                    return account.currency;
+                }
+            }
+
+            return this.userStore.currentUserDefaultCurrency;
+        },
+        canAddTransaction() {
+            if (this.query.accountId && this.query.accountId !== '0') {
+                const account = this.allAccounts[this.query.accountId];
+
+                if (account && account.type === accountConstants.allAccountTypes.MultiSubAccounts) {
+                    return false;
+                }
+            }
+
+            return true;
+        },
+        currentTimezoneOffsetMinutes() {
+            return getTimezoneOffsetMinutes(this.settingsStore.appSettings.timeZone);
+        },
+        firstDayOfWeek() {
+            return this.userStore.currentUserFirstDayOfWeek;
+        },
+        recentDateRangeType: {
+            get: function () {
+                return getRecentDateRangeType(this.recentMonthDateRanges, this.query.dateType, this.query.minTime, this.query.maxTime, this.firstDayOfWeek);
+            },
+            set: function (value) {
+                if (value < 0 || value >= this.recentMonthDateRanges.length) {
+                    value = 0;
+                }
+
+                this.changeDateFilter(this.recentMonthDateRanges[value]);
+            }
+        },
+        query() {
+            return this.transactionsStore.transactionsFilter;
+        },
+        queryMinTime() {
+            return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.minTime);
+        },
+        queryMaxTime() {
+            return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.maxTime);
+        },
+        queryCategoryName() {
+            return getNameByKeyValue(this.allCategories, this.query.categoryId, null, 'name', this.$t('Category'));
+        },
+        queryAccountName() {
+            return getNameByKeyValue(this.allAccounts, this.query.accountId, null, 'name', this.$t('Account'));
+        },
+        transactions() {
+            if (this.loading) {
+                return [];
+            }
+
+            return this.transactionsStore.transactions;
+        },
+        noTransaction() {
+            return this.transactionsStore.noTransaction;
+        },
+        hasMoreTransaction() {
+            return this.transactionsStore.hasMoreTransaction;
+        },
+        isShowMonthlyData() {
+            const recentDateRange = this.recentMonthDateRanges[this.recentDateRangeType];
+            return recentDateRange.year && recentDateRange.month;
+        },
+        monthlyDatePageCount() {
+            const recentDateRange = this.recentMonthDateRanges[this.recentDateRangeType];
+
+            if (!recentDateRange || !recentDateRange.year || !recentDateRange.month) {
+                return 1;
+            }
+
+            if (!this.transactions || !this.transactions.length) {
+                return 1;
+            }
+
+            for (let i = 0; i < this.transactions.length; i++) {
+                if (this.transactions[i].year === recentDateRange.year &&
+                    this.transactions[i].month === recentDateRange.month) {
+                    return Math.ceil(this.transactions[i].items.length / this.countPerPage);
+                }
+            }
+
+            return 1;
+        },
+        monthlyDatePageFirstIndex() {
+            const currentPage = this.currentPage >= 1 ? this.currentPage : 1;
+
+            if (this.isShowMonthlyData) {
+                return (currentPage - 1) * this.countPerPage;
+            } else {
+                return 0;
+            }
+        },
+        monthlyDatePageLastIndex() {
+            const currentPage = this.currentPage >= 1 ? this.currentPage : 1;
+
+            if (this.isShowMonthlyData) {
+                return currentPage * this.countPerPage;
+            } else {
+                return Number.MAX_SAFE_INTEGER;
+            }
+        },
+        monthlyDataTotalIncome() {
+            const recentDateRange = this.recentMonthDateRanges[this.recentDateRangeType];
+
+            if (!recentDateRange || !recentDateRange.year || !recentDateRange.month) {
+                return '-';
+            }
+
+            if (!this.transactions || !this.transactions.length) {
+                return '-';
+            }
+
+            for (let i = 0; i < this.transactions.length; i++) {
+                if (this.transactions[i].year === recentDateRange.year &&
+                    this.transactions[i].month === recentDateRange.month) {
+                    return this.getDisplayMonthTotalAmount(this.transactions[i].totalAmount.income, this.defaultCurrency, '', this.transactions[i].totalAmount.incompleteIncome)
+                }
+            }
+
+            return '-';
+        },
+        monthlyDataTotalExpense() {
+            const recentDateRange = this.recentMonthDateRanges[this.recentDateRangeType];
+
+            if (!recentDateRange || !recentDateRange.year || !recentDateRange.month) {
+                return '-';
+            }
+
+            if (!this.transactions || !this.transactions.length) {
+                return '-';
+            }
+
+            for (let i = 0; i < this.transactions.length; i++) {
+                if (this.transactions[i].year === recentDateRange.year &&
+                    this.transactions[i].month === recentDateRange.month) {
+                    return this.getDisplayMonthTotalAmount(this.transactions[i].totalAmount.expense, this.defaultCurrency, '', this.transactions[i].totalAmount.incompleteExpense)
+                }
+            }
+
+            return '-';
+        },
+        allTransactionTypes() {
+            return transactionConstants.allTransactionTypes;
+        },
+        allAccounts() {
+            return this.accountsStore.allAccountsMap;
+        },
+        allCategories() {
+            return this.transactionCategoriesStore.allTransactionCategoriesMap;
+        },
+        allPrimaryCategories() {
+            return this.transactionCategoriesStore.allTransactionCategories;
+        },
+        recentMonthDateRanges() {
+            return this.$locale.getAllRecentMonthDateRanges(this.userStore, true);
+        },
+        showTotalAmountInTransactionListPage() {
+            return this.settingsStore.appSettings.showTotalAmountInTransactionListPage;
+        }
+    },
+    created() {
+        this.init({
+            dateType: this.initDateType,
+            minTime: this.initMinTime,
+            maxTime: this.initMaxTime,
+            type: this.initType,
+            categoryId: this.initCategoryId,
+            accountId: this.initAccountId
+        });
+    },
+    beforeRouteUpdate(to) {
+        if (to.query) {
+            this.init({
+                dateType: to.query.dateType,
+                minTime: to.query.minTime,
+                maxTime: to.query.maxTime,
+                type: to.query.type,
+                categoryId: to.query.categoryId,
+                accountId: to.query.accountId
+            });
+        }
+    },
+    methods: {
+        init(query) {
+            let dateRange = getDateRangeByDateType(query.dateType ? parseInt(query.dateType) : undefined, self.firstDayOfWeek);
+
+            if (!dateRange &&
+                query.dateType === datetimeConstants.allDateRanges.Custom.type.toString() &&
+                parseInt(query.maxTime) > 0 && parseInt(query.minTime) > 0) {
+                dateRange = {
+                    dateType: parseInt(query.dateType),
+                    maxTime: parseInt(query.maxTime),
+                    minTime: parseInt(query.minTime)
+                };
+            }
+
+            this.transactionsStore.initTransactionListFilter({
+                dateType: dateRange ? dateRange.dateType : undefined,
+                maxTime: dateRange ? dateRange.maxTime : undefined,
+                minTime: dateRange ? dateRange.minTime : undefined,
+                type: parseInt(query.type) > 0 ? parseInt(query.type) : undefined,
+                categoryId: query.categoryId,
+                accountId: query.accountId,
+                keyword: this.searchKeyword
+            });
+
+            this.reload(false);
+        },
+        reload(force) {
+            const self = this;
+
+            self.loading = true;
+
+            Promise.all([
+                self.accountsStore.loadAllAccounts({ force: false }),
+                self.transactionCategoriesStore.loadAllCategories({ force: false })
+            ]).then(() => {
+                const recentDateRange = this.recentMonthDateRanges[this.recentDateRangeType];
+                let yearMonth = null;
+
+                if (recentDateRange.year && recentDateRange.month) {
+                    yearMonth = {
+                        year: recentDateRange.year,
+                        month: recentDateRange.month
+                    };
+                }
+
+                return self.transactionsStore.loadTransactions({
+                    reload: true,
+                    yearMonth: yearMonth,
+                    force: force,
+                    autoExpand: true,
+                    defaultCurrency: self.defaultCurrency
+                });
+            }).then(() => {
+                self.loading = false;
+                self.currentPage = 1;
+
+                if (force) {
+                    self.$refs.snackbar.showMessage('Data has been updated');
+                }
+            }).catch(error => {
+                self.loading = false;
+                self.currentPage = 1;
+
+                if (!error.processed) {
+                    self.$refs.snackbar.showError(error);
+                }
+            });
+        },
+        changeDateFilter(recentDateRange) {
+            if (recentDateRange.dateType === datetimeConstants.allDateRanges.Custom.type &&
+                !recentDateRange.minTime && !recentDateRange.maxTime) { // Custom
+                if (!this.query.minTime || !this.query.maxTime) {
+                    this.query.maxTime = getActualUnixTimeForStore(getCurrentUnixTime(), this.currentTimezoneOffsetMinutes, getBrowserTimezoneOffsetMinutes());
+                    this.query.minTime = getSpecifiedDayFirstUnixTime(this.query.maxTime);
+                }
+
+                this.showCustomDateRangeDialog = true;
+                return;
+            }
+
+            this.transactionsStore.updateTransactionListFilter({
+                dateType: recentDateRange.dateType,
+                maxTime: recentDateRange.maxTime,
+                minTime: recentDateRange.minTime
+            });
+
+            this.$router.push(this.getFilterLinkUrl());
+        },
+        changeCustomDateFilter(minTime, maxTime) {
+            if (!minTime || !maxTime) {
+                return;
+            }
+
+            this.transactionsStore.updateTransactionListFilter({
+                dateType: datetimeConstants.allDateRanges.Custom.type,
+                maxTime: maxTime,
+                minTime: minTime
+            });
+
+            this.showCustomDateRangeDialog = false;
+
+            this.$router.push(this.getFilterLinkUrl());
+        },
+        changeTypeFilter(type) {
+            if (this.query.type === type) {
+                return;
+            }
+
+            let removeCategoryFilter = false;
+
+            if (type && this.query.categoryId) {
+                const category = this.allCategories[this.query.categoryId];
+
+                if (category && category.type !== transactionTypeToCategoryType(type)) {
+                    removeCategoryFilter = true;
+                }
+            }
+
+            this.transactionsStore.updateTransactionListFilter({
+                type: type,
+                categoryId: removeCategoryFilter ? '0' : undefined
+            });
+
+            this.$router.push(this.getFilterLinkUrl());
+        },
+        changeCategoryFilter(categoryId) {
+            if (this.query.categoryId === categoryId) {
+                return;
+            }
+
+            this.transactionsStore.updateTransactionListFilter({
+                categoryId: categoryId
+            });
+
+            this.showCategoryPopover = false;
+            this.$router.push(this.getFilterLinkUrl());
+        },
+        changeAccountFilter(accountId) {
+            if (this.query.accountId === accountId) {
+                return;
+            }
+
+            this.transactionsStore.updateTransactionListFilter({
+                accountId: accountId
+            });
+
+            this.$router.push(this.getFilterLinkUrl());
+        },
+        changeKeywordFilter(keyword) {
+            if (this.query.keyword === keyword) {
+                return;
+            }
+
+            this.transactionsStore.updateTransactionListFilter({
+                keyword: keyword
+            });
+
+            this.reload(false);
+        },
+        add() {
+
+        },
+        duplicate() {
+
+        },
+        show() {
+
+        },
+        edit() {
+
+        },
+        remove(transaction) {
+            const self = this;
+
+            self.$refs.confirmDialog.open('Are you sure you want to delete this transaction?').then(() => {
+                self.updating = true;
+                self.transactionRemoving[transaction.id] = true;
+
+                self.transactionsStore.deleteTransaction({
+                    transaction: transaction,
+                    defaultCurrency: self.defaultCurrency
+                }).then(() => {
+                    self.updating = false;
+                    self.transactionRemoving[transaction.id] = false;
+                }).catch(error => {
+                    self.updating = false;
+                    self.transactionRemoving[transaction.id] = false;
+
+                    if (!error.processed) {
+                        self.$refs.snackbar.showError(error);
+                    }
+                });
+            });
+        },
+        shouldShowMonthlyData(transactionMonthList) {
+            const recentDateRange = this.recentMonthDateRanges[this.recentDateRangeType];
+
+            if (!recentDateRange || !recentDateRange.year || !recentDateRange.month) {
+                return true;
+            }
+
+            return transactionMonthList.year === recentDateRange.year && transactionMonthList.month === recentDateRange.month;
+        },
+        scrollCategoryMenuToSelectedItem(opened) {
+            if (opened) {
+                this.scrollMenuToSelectedItem(this.$refs.categoryFilterMenu);
+            }
+        },
+        scrollAccountMenuToSelectedItem(opened) {
+            if (opened) {
+                this.scrollMenuToSelectedItem(this.$refs.accountFilterMenu);
+            }
+        },
+        scrollMenuToSelectedItem(menu) {
+            this.$nextTick(() => {
+                scrollToMenuListItem(menu.contentEl);
+            });
+        },
+        getDisplayTime(transaction) {
+            return this.$locale.formatUnixTimeToShortTime(this.userStore, transaction.time, transaction.utcOffset, this.currentTimezoneOffsetMinutes);
+        },
+        getDisplayTimezone(transaction) {
+            return `UTC${getUtcOffsetByUtcOffsetMinutes(transaction.utcOffset)}`;
+        },
+        getDisplayAmount(amount, currency, hideAmount) {
+            if (hideAmount) {
+                return this.getDisplayCurrency('***', currency);
+            }
+
+            return this.getDisplayCurrency(amount, currency);
+        },
+        getDisplayMonthTotalAmount(amount, currency, symbol, incomplete) {
+            const displayAmount = this.getDisplayCurrency(amount, currency);
+            return symbol + displayAmount + (incomplete ? '+' : '');
+        },
+        getDisplayCurrency(value, currencyCode) {
+            return this.$locale.getDisplayCurrency(value, currencyCode, {
+                currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
+                enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
+            });
+        },
+        getLongDate(transaction) {
+            const transactionTime = getUnixTime(parseDateFromUnixTime(transaction.time, transaction.utcOffset, this.currentTimezoneOffsetMinutes));
+            return this.$locale.formatUnixTimeToLongDate(this.userStore, transactionTime);
+        },
+        getWeekdayLongName(transaction) {
+            return this.$locale.getWeekdayLongName(transaction.dayOfWeek);
+        },
+        getTransactionTypeName(type, defaultName) {
+            switch (type){
+                case this.allTransactionTypes.ModifyBalance:
+                    return this.$t('Modify Balance');
+                case this.allTransactionTypes.Income:
+                    return this.$t('Income');
+                case this.allTransactionTypes.Expense:
+                    return this.$t('Expense');
+                case this.allTransactionTypes.Transfer:
+                    return this.$t('Transfer');
+                default:
+                    return this.$t(defaultName);
+            }
+        },
+        getTransactionTypeFromCategoryType(categoryType) {
+            return categoryTypeToTransactionType(parseInt(categoryType));
+        },
+        getCategoryListItemCheckedClass(category, queryCategoryId) {
+            if (category.id === queryCategoryId) {
+                return {
+                    'list-item-selected': true,
+                    'has-children-item-selected': true
+                };
+            }
+
+            for (let i = 0; i < category.subCategories.length; i++) {
+                if (category.subCategories[i].id === queryCategoryId) {
+                    return {
+                        'list-item-selected': true,
+                        'has-children-item-selected': true
+                    };
+                }
+            }
+
+            return [];
+        },
+        getFilterLinkUrl() {
+            return `/transactions?${this.transactionsStore.getTransactionListPageParams()}`;
+        }
     }
-}
+};
 </script>
+
+<style>
+.transaction-keyword-filter .v-input--density-compact {
+    --v-input-control-height: 36px;
+    --v-input-padding-top: 5px;
+    --v-input-padding-bottom: 5px;
+    inline-size: 20rem;
+}
+
+.transaction-type-buttons .v-btn:not(:first-child) {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+}
+
+.transaction-type-buttons .v-btn:not(:last-child) {
+    border-bottom: 0;
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+}
+
+.transaction-list-title {
+    overflow-x: auto;
+    white-space: nowrap;
+}
+
+.transaction-list-datetime-range {
+    overflow-x: auto;
+    white-space: nowrap;
+}
+
+.transaction-list-datetime-range .transaction-list-datetime-range-text {
+    color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)) !important;
+}
+
+.transaction-list-total-amount-text .v-skeleton-loader__text {
+    margin: 0;
+}
+
+.v-table.transaction-table .transaction-list-row-date > td {
+    height: 40px !important;
+}
+
+.transaction-table tr.transaction-table-row-data .hover-display {
+    display: none;
+}
+
+.transaction-table tr.transaction-table-row-data:hover .hover-display {
+    display: grid;
+}
+
+.transaction-table .transaction-table-column-time {
+    width: 110px;
+    white-space: nowrap;
+}
+
+.transaction-table .transaction-table-column-category {
+    width: 140px;
+    white-space: nowrap;
+}
+
+.transaction-table .transaction-table-column-amount {
+    width: 120px;
+    white-space: nowrap;
+}
+
+.transaction-table .transaction-table-column-account {
+    width: 160px;
+    white-space: nowrap;
+}
+
+.transaction-table .transaction-table-column-description {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.transaction-table .transaction-table-column-category .v-btn,
+.transaction-table .transaction-table-column-account .v-btn {
+    font-size: 0.75rem;
+}
+
+.transaction-table .transaction-table-column-category .v-btn .v-btn__append,
+.transaction-table .transaction-table-column-account .v-btn .v-btn__append {
+    margin-left: 0in;
+}
+
+.transaction-category-menu .item-icon,
+.transaction-account-menu .item-icon,
+.transaction-table .item-icon {
+    padding-bottom: 3px;
+}
+
+.transaction-category-menu .has-children-item-selected span {
+    font-weight: bold;
+}
+</style>