transaction reconciliation statement supports sorting by account name and category name on desktop version

mayswind · mayswind · commit 44dc45de51e6 · 2025-11-23T00:33:54.000+08:00
diff --git a/src/models/transaction.ts b/src/models/transaction.ts
@@ -690,6 +690,22 @@ export interface TransactionReconciliationStatementResponse {
     readonly closingBalance: number;
 }
 
+export interface TransactionReconciliationStatementResponseItemWithInfo extends TransactionReconciliationStatementResponseItem {
+    readonly sourceAccount?: Account;
+    readonly sourceAccountName: string;
+    readonly destinationAccount?: Account;
+    readonly category?: TransactionCategory;
+    readonly categoryName: string;
+}
+
+export interface TransactionReconciliationStatementResponseWithInfo {
+    readonly transactions: TransactionReconciliationStatementResponseItemWithInfo[];
+    readonly totalInflows: number;
+    readonly totalOutflows: number;
+    readonly openingBalance: number;
+    readonly closingBalance: number;
+}
+
 export interface TransactionPageWrapper {
     readonly items: Transaction[];
     readonly totalCount?: number;
diff --git a/src/views/base/accounts/ReconciliationStatementPageBase.ts b/src/views/base/accounts/ReconciliationStatementPageBase.ts
@@ -16,7 +16,8 @@ import type { Account } from '@/models/account.ts';
 import type { TransactionCategory } from '@/models/transaction_category.ts';
 import type {
     TransactionReconciliationStatementResponse,
-    TransactionReconciliationStatementResponseItem
+    TransactionReconciliationStatementResponseItemWithInfo,
+    TransactionReconciliationStatementResponseWithInfo
 } from '@/models/transaction.ts';
 
 import { replaceAll } from '@/lib/common.ts';
@@ -48,7 +49,7 @@ export function useReconciliationStatementPageBase() {
     const accountId = ref<string>('');
     const startTime = ref<number>(0);
     const endTime = ref<number>(0);
-    const reconciliationStatements = ref<TransactionReconciliationStatementResponse | undefined>(undefined);
+    const reconciliationStatements = ref<TransactionReconciliationStatementResponseWithInfo | undefined>(undefined);
 
     const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
     const fiscalYearStart = computed<number>(() => userStore.currentUserFiscalYearStart);
@@ -113,7 +114,34 @@ export function useReconciliationStatementPageBase() {
         }
     });
 
-    function getDisplayTransactionType(transaction: TransactionReconciliationStatementResponseItem): string {
+    function setReconciliationStatements(response: TransactionReconciliationStatementResponse | undefined) {
+        if (!response) {
+            reconciliationStatements.value = undefined;
+            return;
+        }
+
+        const responseWithInfo: TransactionReconciliationStatementResponseWithInfo = {
+            transactions: response.transactions.map(transaction => {
+                const transactionWithInfo: TransactionReconciliationStatementResponseItemWithInfo = {
+                    ...transaction,
+                    sourceAccount: allAccountsMap.value[transaction.sourceAccountId],
+                    sourceAccountName: allAccountsMap.value[transaction.sourceAccountId]?.name || '',
+                    destinationAccount: transaction.destinationAccountId && transaction.destinationAccountId !== '0' ? allAccountsMap.value[transaction.destinationAccountId] : undefined,
+                    category: allCategoriesMap.value[transaction.categoryId],
+                    categoryName: allCategoriesMap.value[transaction.categoryId]?.name || ''
+                };
+                return transactionWithInfo;
+            }),
+            totalInflows: response.totalInflows,
+            totalOutflows: response.totalOutflows,
+            openingBalance: response.openingBalance,
+            closingBalance: response.closingBalance
+        };
+
+        reconciliationStatements.value = responseWithInfo;
+    }
+
+    function getDisplayTransactionType(transaction: TransactionReconciliationStatementResponseItemWithInfo): string {
         if (transaction.type === TransactionType.ModifyBalance) {
             return tt('Modify Balance');
         } else if (transaction.type === TransactionType.Income) {
@@ -131,54 +159,44 @@ export function useReconciliationStatementPageBase() {
         }
     }
 
-    function getDisplayDateTime(transaction: TransactionReconciliationStatementResponseItem): string {
+    function getDisplayDateTime(transaction: TransactionReconciliationStatementResponseItemWithInfo): string {
         return formatUnixTimeToLongDateTime(transaction.time, transaction.utcOffset, currentTimezoneOffsetMinutes.value);
     }
 
-    function getDisplayDate(transaction: TransactionReconciliationStatementResponseItem): string {
+    function getDisplayDate(transaction: TransactionReconciliationStatementResponseItemWithInfo): string {
         return formatUnixTimeToLongDate(transaction.time, transaction.utcOffset, currentTimezoneOffsetMinutes.value);
     }
 
-    function getDisplayTime(transaction: TransactionReconciliationStatementResponseItem): string {
+    function getDisplayTime(transaction: TransactionReconciliationStatementResponseItemWithInfo): string {
         return formatUnixTimeToShortTime(transaction.time, transaction.utcOffset, currentTimezoneOffsetMinutes.value);
     }
 
-    function getDisplayTimezone(transaction: TransactionReconciliationStatementResponseItem): string {
+    function getDisplayTimezone(transaction: TransactionReconciliationStatementResponseItemWithInfo): string {
         return `UTC${getUtcOffsetByUtcOffsetMinutes(transaction.utcOffset)}`;
     }
 
-    function getDisplaySourceAmount(transaction: TransactionReconciliationStatementResponseItem): string {
-        let currency = defaultCurrency.value;
-
-        if (allAccountsMap.value[transaction.sourceAccountId]) {
-            currency = allAccountsMap.value[transaction.sourceAccountId]!.currency;
-        }
-
+    function getDisplaySourceAmount(transaction: TransactionReconciliationStatementResponseItemWithInfo): string {
+        const currency = transaction.sourceAccount?.currency ?? defaultCurrency.value;
         return formatAmountToLocalizedNumeralsWithCurrency(transaction.sourceAmount, currency);
     }
 
-    function getDisplayDestinationAmount(transaction: TransactionReconciliationStatementResponseItem): string {
-        let currency = defaultCurrency.value;
-
-        if (allAccountsMap.value[transaction.destinationAccountId]) {
-            currency = allAccountsMap.value[transaction.destinationAccountId]!.currency;
-        }
-
+    function getDisplayDestinationAmount(transaction: TransactionReconciliationStatementResponseItemWithInfo): string {
+        const currency = transaction.destinationAccount?.currency ?? defaultCurrency.value;
         return formatAmountToLocalizedNumeralsWithCurrency(transaction.destinationAmount, currency);
     }
 
-    function getDisplayAccountBalance(transaction: TransactionReconciliationStatementResponseItem): string {
+    function getDisplayAccountBalance(transaction: TransactionReconciliationStatementResponseItemWithInfo): string {
         let currency = defaultCurrency.value;
         let isLiabilityAccount = false;
 
         if (transaction.type === TransactionType.Transfer && transaction.destinationAccountId === accountId.value) {
-            if (allAccountsMap.value[transaction.destinationAccountId]) {
-                currency = allAccountsMap.value[transaction.destinationAccountId]!.currency;
-                isLiabilityAccount = allAccountsMap.value[transaction.destinationAccountId]!.isLiability;
+            if (transaction.destinationAccount) {
+                currency = transaction.destinationAccount.currency;
+                isLiabilityAccount = transaction.destinationAccount.isLiability;
             }
-        } else if (allAccountsMap.value[transaction.sourceAccountId]) {
-            currency = allAccountsMap.value[transaction.sourceAccountId]!.currency;
-            isLiabilityAccount = allAccountsMap.value[transaction.sourceAccountId]!.isLiability;
+        } else if (transaction.sourceAccount) {
+            currency = transaction.sourceAccount.currency;
+            isLiabilityAccount = transaction.sourceAccount.isLiability;
         }
 
         if (isLiabilityAccount) {
@@ -211,18 +229,18 @@ export function useReconciliationStatementPageBase() {
         const rows = transactions.map(transaction => {
             const transactionTime = parseDateTimeFromUnixTime(transaction.time, transaction.utcOffset, currentTimezoneOffsetMinutes.value).getUnixTime();
             const type = getDisplayTransactionType(transaction);
-            let categoryName = allCategoriesMap.value[transaction.categoryId]?.name || '';
+            let categoryName = transaction.categoryName;
             let displayAmount = formatAmountToWesternArabicNumeralsWithoutDigitGrouping(transaction.sourceAmount);
-            let displayAccountName = allAccountsMap.value[transaction.sourceAccountId]?.name || '';
+            let displayAccountName = transaction.sourceAccountName;
 
             if (transaction.type === TransactionType.ModifyBalance) {
                 categoryName = tt('Modify Balance');
             } else if (transaction.type === TransactionType.Transfer && transaction.destinationAccountId === accountId.value) {
                 displayAmount = formatAmountToWesternArabicNumeralsWithoutDigitGrouping(transaction.destinationAmount);
             }
 
-            if (transaction.type === TransactionType.Transfer && allAccountsMap.value[transaction.destinationAccountId]) {
-                displayAccountName = displayAccountName + ' → ' + (allAccountsMap.value[transaction.destinationAccountId]?.name || '');
+            if (transaction.type === TransactionType.Transfer && transaction.destinationAccount) {
+                displayAccountName = displayAccountName + ' → ' + (transaction.destinationAccount?.name || '');
             }
 
             let displayAccountBalance = '';
@@ -272,8 +290,6 @@ export function useReconciliationStatementPageBase() {
         currentAccountCurrency,
         isCurrentLiabilityAccount,
         exportFileName,
-        allAccountsMap,
-        allCategoriesMap,
         displayStartDateTime,
         displayEndDateTime,
         displayTotalInflows,
@@ -282,6 +298,7 @@ export function useReconciliationStatementPageBase() {
         displayOpeningBalance,
         displayClosingBalance,
         // functions
+        setReconciliationStatements,
         getDisplayTransactionType,
         getDisplayDateTime,
         getDisplayDate,
diff --git a/src/views/desktop/accounts/list/dialogs/ReconciliationStatementDialog.vue b/src/views/desktop/accounts/list/dialogs/ReconciliationStatementDialog.vue
@@ -155,18 +155,18 @@
                             :class="{ 'text-income' : item.type === TransactionType.Income, 'text-expense': item.type === TransactionType.Expense }"
                             :color="getTransactionTypeColor(item)">{{ getDisplayTransactionType(item) }}</v-chip>
                 </template>
-                <template #item.categoryId="{ item }">
+                <template #item.categoryName="{ item }">
                     <div class="d-flex align-center">
                         <ItemIcon size="24px" icon-type="category"
-                                  :icon-id="allCategoriesMap[item.categoryId]?.icon ?? ''"
-                                  :color="allCategoriesMap[item.categoryId]?.color ?? ''"
-                                  v-if="allCategoriesMap[item.categoryId] && allCategoriesMap[item.categoryId]?.color"></ItemIcon>
-                        <v-icon size="24" :icon="mdiPencilBoxOutline" v-else-if="!allCategoriesMap[item.categoryId] || !allCategoriesMap[item.categoryId]?.color" />
+                                  :icon-id="item.category?.icon ?? ''"
+                                  :color="item.category?.color ?? ''"
+                                  v-if="item.category && item.category?.color"></ItemIcon>
+                        <v-icon size="24" :icon="mdiPencilBoxOutline" v-else-if="!item.category || !item.category?.color" />
                         <span class="ms-2" v-if="item.type === TransactionType.ModifyBalance">
                             {{ tt('Modify Balance') }}
                         </span>
-                        <span class="ms-2" v-else-if="item.type !== TransactionType.ModifyBalance && allCategoriesMap[item.categoryId]">
-                            {{ allCategoriesMap[item.categoryId]?.name }}
+                        <span class="ms-2" v-else-if="item.type !== TransactionType.ModifyBalance && item.category">
+                            {{ item.category?.name }}
                         </span>
                     </div>
                 </template>
@@ -175,11 +175,11 @@
                     <v-icon class="icon-with-direction mx-1" size="13" :icon="mdiArrowRight" v-if="item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId && getDisplaySourceAmount(item) !== getDisplayDestinationAmount(item)"></v-icon>
                     <span v-if="item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId && getDisplaySourceAmount(item) !== getDisplayDestinationAmount(item)">{{ getDisplayDestinationAmount(item) }}</span>
                 </template>
-                <template #item.sourceAccountId="{ item }">
+                <template #item.sourceAccountName="{ item }">
                     <div class="d-flex align-center">
-                        <span v-if="item.sourceAccountId && allAccountsMap[item.sourceAccountId]">{{ allAccountsMap[item.sourceAccountId]?.name }}</span>
+                        <span v-if="item.sourceAccount">{{ item.sourceAccount?.name }}</span>
                         <v-icon class="icon-with-direction mx-1" size="13" :icon="mdiArrowRight" v-if="item.type === TransactionType.Transfer"></v-icon>
-                        <span v-if="item.type === TransactionType.Transfer && item.destinationAccountId && allAccountsMap[item.destinationAccountId]">{{ allAccountsMap[item.destinationAccountId]?.name }}</span>
+                        <span v-if="item.type === TransactionType.Transfer && item.destinationAccount">{{ item.destinationAccount?.name }}</span>
                     </div>
                 </template>
                 <template #item.accountBalance="{ item }">
@@ -326,8 +326,6 @@ const {
     currentAccount,
     currentAccountCurrency,
     isCurrentLiabilityAccount,
-    allAccountsMap,
-    allCategoriesMap,
     exportFileName,
     displayStartDateTime,
     displayEndDateTime,
@@ -336,6 +334,7 @@ const {
     displayTotalBalance,
     displayOpeningBalance,
     displayClosingBalance,
+    setReconciliationStatements,
     getDisplayTransactionType,
     getDisplayDateTime,
     getDisplayTimezone,
@@ -395,9 +394,9 @@ const dataTableHeaders = computed<object[]>(() => {
 
     headers.push({ key: 'time', value: 'time', title: tt('Transaction Time'), sortable: true, nowrap: true });
     headers.push({ key: 'type', value: 'type', title: tt('Type'), sortable: true, nowrap: true });
-    headers.push({ key: 'categoryId', value: 'categoryId', title: tt('Category'), sortable: true, nowrap: true });
+    headers.push({ key: 'categoryName', value: 'categoryName', title: tt('Category'), sortable: true, nowrap: true });
     headers.push({ key: 'sourceAmount', value: 'sourceAmount', title: tt('Amount'), sortable: true, nowrap: true });
-    headers.push({ key: 'sourceAccountId', value: 'sourceAccountId', title: tt('Account'), sortable: true, nowrap: true });
+    headers.push({ key: 'sourceAccountName', value: 'sourceAccountName', title: tt('Account'), sortable: true, nowrap: true });
     headers.push({ key: 'accountBalance', value: 'accountBalance', title: tt(accountBalanceName), sortable: true, nowrap: true });
     headers.push({ key: 'comment', value: 'comment', title: tt('Description'), sortable: true, nowrap: true });
     headers.push({ key: 'operation', title: tt('Operation'), sortable: false, nowrap: true, align: 'end' });
@@ -464,7 +463,7 @@ function open(options: { accountId: string, startTime: number, endTime: number }
             endTime: options.endTime
         });
     }).then(result => {
-        reconciliationStatements.value = result;
+        setReconciliationStatements(result);
         loading.value = false;
     }).catch(error => {
         loading.value = false;
@@ -496,7 +495,7 @@ function reload(force: boolean): void {
             }
         }
 
-        reconciliationStatements.value = result;
+        setReconciliationStatements(result);
         loading.value = false;
     }).catch(error => {
         loading.value = false;
diff --git a/src/views/mobile/accounts/ReconciliationStatementPage.vue b/src/views/mobile/accounts/ReconciliationStatementPage.vue
