Show the debited and reimbursed amounts on the reconciliation dashboard

src/CONST/index.ts

@@ -7053,6 +7053,8 @@ const CONST = {
                     BANK_ACCOUNT: this.TABLE_COLUMNS.GROUP_BANK_ACCOUNT,
                     WITHDRAWAL_ID: this.TABLE_COLUMNS.GROUP_WITHDRAWAL_ID,
                     EXPENSES: this.TABLE_COLUMNS.GROUP_EXPENSES,
+                    AMOUNT_DEBITED: this.TABLE_COLUMNS.GROUP_AMOUNT_DEBITED,
+                    AMOUNT_REIMBURSED: this.TABLE_COLUMNS.GROUP_AMOUNT_REIMBURSED,
                     TOTAL: this.TABLE_COLUMNS.GROUP_TOTAL,
                 },
                 CATEGORY: {
@@ -7131,6 +7133,8 @@ const CONST = {
                     this.TABLE_COLUMNS.GROUP_BANK_ACCOUNT,
                     this.TABLE_COLUMNS.GROUP_WITHDRAWAL_ID,
                     this.TABLE_COLUMNS.GROUP_EXPENSES,
+                    this.TABLE_COLUMNS.GROUP_AMOUNT_DEBITED,
+                    this.TABLE_COLUMNS.GROUP_AMOUNT_REIMBURSED,
                     this.TABLE_COLUMNS.GROUP_TOTAL,
                 ],
                 CATEGORY: [this.TABLE_COLUMNS.GROUP_CATEGORY, this.TABLE_COLUMNS.GROUP_EXPENSES, this.TABLE_COLUMNS.GROUP_TOTAL],
@@ -7251,6 +7255,8 @@ const CONST = {
             GROUP_YEAR: 'groupyear',
             GROUP_QUARTER: 'groupquarter',
             GROUP_WITHDRAWAL_STATUS: 'groupWithdrawalStatus',
+            GROUP_AMOUNT_DEBITED: 'groupAmountDebited',
+            GROUP_AMOUNT_REIMBURSED: 'groupAmountReimbursed',
         },
         SYNTAX_OPERATORS: {
             AND: 'and',
@@ -7470,6 +7476,8 @@ const CONST = {
                 [this.TABLE_COLUMNS.GROUP_YEAR]: 'group-year',
                 [this.TABLE_COLUMNS.GROUP_QUARTER]: 'group-quarter',
                 [this.TABLE_COLUMNS.GROUP_WITHDRAWAL_STATUS]: 'group-withdrawal-status',
+                [this.TABLE_COLUMNS.GROUP_AMOUNT_DEBITED]: 'group-amount-debited',
+                [this.TABLE_COLUMNS.GROUP_AMOUNT_REIMBURSED]: 'group-amount-reimbursed',
             };
         },
         NOT_PREFIX: '-',

src/components/Search/FilterDropdowns/SortByPopup.tsx

@@ -55,7 +55,7 @@ function SortByPopup({searchResults, queryJSON, groupBy, onSort, onSortOrderPres
     const searchDataType = shouldUseLiveData ? CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT : searchResults?.search?.type;
     const currentColumns = !searchResults?.data
         ? []
-        : getColumnsToShow({currentAccountID: accountID, data: searchResults.data, visibleColumns, type: searchDataType, groupBy: groupBy?.value});
+        : getColumnsToShow({currentAccountID: accountID, data: searchResults.data, visibleColumns, type: searchDataType, groupBy: groupBy?.value, sortBy: queryJSON.sortBy});
     const sortableColumns = getSortByOptions(currentColumns, translate);
     const sortOrder = queryJSON.sortOrder;
 

src/components/Search/SearchList/ListItem/WithdrawalIDListItemHeader.tsx

@@ -93,6 +93,8 @@ function WithdrawalIDListItemHeaderImpl({
         withdrawalIDItem.debitPosted,
         DateUtils.doesDateBelongToAPastYear(withdrawalIDItem.debitPosted) ? CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT : CONST.DATE.MONTH_DAY_ABBR_FORMAT,
     );
+    const {debitedAmount, debitedCurrency, creditedAmount, creditedCurrency} = withdrawalIDItem;
+
     const badgeProps = getSettlementStatusBadgeProps(withdrawalIDItem.state, translate, theme);
     const settlementStatus = getSettlementStatus(withdrawalIDItem.state);
     const statusBadge = !!badgeProps && (
@@ -177,6 +179,33 @@ function WithdrawalIDListItemHeaderImpl({
                 <TextCell text={String(withdrawalIDItem.count)} />
             </View>
         ),
+        // A settlement that did not convert currencies reports neither amount, and an amount says nothing without the currency it moved in.
+        [CONST.SEARCH.TABLE_COLUMNS.GROUP_AMOUNT_DEBITED]: (
+            <View
+                key={CONST.SEARCH.TABLE_COLUMNS.GROUP_AMOUNT_DEBITED}
+                style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.GROUP_AMOUNT_DEBITED)}
+            >
+                {!!debitedAmount && !!debitedCurrency && (
+                    <TotalCell
+                        total={debitedAmount}
+                        currency={debitedCurrency}
+                    />
+                )}
+            </View>
+        ),
+        [CONST.SEARCH.TABLE_COLUMNS.GROUP_AMOUNT_REIMBURSED]: (
+            <View
+                key={CONST.SEARCH.TABLE_COLUMNS.GROUP_AMOUNT_REIMBURSED}
+                style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.GROUP_AMOUNT_REIMBURSED)}
+            >
+                {!!creditedAmount && !!creditedCurrency && (
+                    <TotalCell
+                        total={creditedAmount}
+                        currency={creditedCurrency}
+                    />
+                )}
+            </View>
+        ),
         [CONST.SEARCH.TABLE_COLUMNS.GROUP_TOTAL]: (
             <View
                 key={CONST.SEARCH.TABLE_COLUMNS.TOTAL}

src/components/Search/SearchTableHeader.tsx

@@ -336,18 +336,17 @@ const getExpenseReportHeaders = (profileIcon?: IconAsset): SearchColumnConfig[]
 ];
 
 const getTransactionGroupHeaders = (groupBy: SearchGroupBy, icons: SearchHeaderIcons): SearchColumnConfig[] => {
-    const commonGroupHeaders: SearchColumnConfig[] = [
-        {
-            columnName: CONST.SEARCH.TABLE_COLUMNS.GROUP_EXPENSES,
-            translationKey: 'common.expenses' as TranslationPaths,
-            isColumnSortable: true,
-        },
-        {
-            columnName: CONST.SEARCH.TABLE_COLUMNS.GROUP_TOTAL,
-            translationKey: 'common.total' as TranslationPaths,
-            isColumnSortable: true,
-        },
-    ];
+    const groupExpensesHeader: SearchColumnConfig = {
+        columnName: CONST.SEARCH.TABLE_COLUMNS.GROUP_EXPENSES,
+        translationKey: 'common.expenses' as TranslationPaths,
+        isColumnSortable: true,
+    };
+    const groupTotalHeader: SearchColumnConfig = {
+        columnName: CONST.SEARCH.TABLE_COLUMNS.GROUP_TOTAL,
+        translationKey: 'common.total' as TranslationPaths,
+        isColumnSortable: true,
+    };
+    const commonGroupHeaders: SearchColumnConfig[] = [groupExpensesHeader, groupTotalHeader];
     switch (groupBy) {
         case CONST.SEARCH.GROUP_BY.FROM:
             return [
@@ -405,7 +404,18 @@ const getTransactionGroupHeaders = (groupBy: SearchGroupBy, icons: SearchHeaderI
                     columnName: CONST.SEARCH.TABLE_COLUMNS.GROUP_WITHDRAWAL_ID,
                     translationKey: 'common.withdrawalID',
                 },
-                ...commonGroupHeaders,
+                groupExpensesHeader,
+                {
+                    columnName: CONST.SEARCH.TABLE_COLUMNS.GROUP_AMOUNT_DEBITED,
+                    translationKey: 'common.amountDebited',
+                    isColumnSortable: true,
+                },
+                {
+                    columnName: CONST.SEARCH.TABLE_COLUMNS.GROUP_AMOUNT_REIMBURSED,
+                    translationKey: 'common.amountReimbursed',
+                    isColumnSortable: true,
+                },
+                groupTotalHeader,
             ];
         case CONST.SEARCH.GROUP_BY.CATEGORY:
             return [

src/components/Search/SortableTableHeader.tsx

@@ -80,9 +80,10 @@ function SortableTableHeader({
                     const sortByColumnName = sortColumnName ?? columnName;
                     const isActive = sortBy === sortByColumnName;
                     const isReimbursableOrBillableColumn = columnName === CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE || columnName === CONST.SEARCH.TABLE_COLUMNS.BILLABLE;
+                    const isConversionAmountColumn = columnName === CONST.SEARCH.TABLE_COLUMNS.GROUP_AMOUNT_DEBITED || columnName === CONST.SEARCH.TABLE_COLUMNS.GROUP_AMOUNT_REIMBURSED;
                     const textStyle = [
                         columnName === CONST.SEARCH.TABLE_COLUMNS.RECEIPT ? StyleUtils.getTextOverflowStyle('clip') : null,
-                        isReimbursableOrBillableColumn ? styles.flexShrink1 : null,
+                        isReimbursableOrBillableColumn || isConversionAmountColumn ? styles.flexShrink1 : null,
                     ];
 
                     return (

src/components/Search/hooks/useSearchSnapshot.ts

@@ -377,6 +377,7 @@ function useSearchSnapshot({queryJSON, searchResults, newSearchResultKeys, trans
             groupBy: validGroupBy,
             shouldUseStrictDefaultExpenseColumns: currentSearchKey === CONST.SEARCH.SEARCH_KEYS.EXPENSES && isDefaultExpensesQuery(queryJSON),
             fallbackPolicyID: policyForMovingExpensesID,
+            sortBy: queryJSON.sortBy,
         });
     })();
 

src/hooks/useSearchOverlay.tsx

@@ -122,6 +122,7 @@ function useSearchOverlay({
             groupBy: validGroupBy,
             shouldUseStrictDefaultExpenseColumns,
             fallbackPolicyID: policyForMovingExpensesID,
+            sortBy: queryJSON.sortBy,
         });
     })();
 

src/languages/de.ts

@@ -405,6 +405,8 @@ const translations: TranslationDeepObject<typeof en> = {
         longReportID: 'Langer Bericht-ID',
         withdrawalID: 'Auszahlungs-ID',
         internationalReimbursementIDs: 'Internationale Erstattungs-IDs',
+        amountDebited: 'Belasteter Betrag',
+        amountReimbursed: 'Erstatteter Betrag',
         withdrawalStatus: 'Auszahlungsstatus',
         paidStatus: 'Status: Bezahlt',
         bankAccounts: 'Bankkonten',

src/languages/en.ts

@@ -434,6 +434,8 @@ const translations = {
         longReportID: 'Long Report ID',
         withdrawalID: 'Withdrawal ID',
         internationalReimbursementIDs: 'International reimbursement IDs',
+        amountDebited: 'Amount debited',
+        amountReimbursed: 'Amount reimbursed',
         withdrawalStatus: 'Withdrawal status',
         paidStatus: 'Paid status',
         bankAccounts: 'Bank accounts',

src/languages/es.ts

@@ -463,6 +463,8 @@ const translations: TranslationDeepObject<typeof en> = {
         reimbursableTotal: 'Total reembolsable',
         nonReimbursableTotal: 'Total no reembolsable',
         internationalReimbursementIDs: 'IDs de reembolso internacional',
+        amountDebited: 'Importe debitado',
+        amountReimbursed: 'Importe reembolsado',
         opensInNewTab: 'Se abre en una nueva pestaña',
         locked: 'Bloqueado',
         month: 'Monat',

src/languages/fr.ts

@@ -404,6 +404,8 @@ const translations: TranslationDeepObject<typeof en> = {
         longReportID: 'ID de note de frais longue',
         withdrawalID: 'ID de retrait',
         internationalReimbursementIDs: 'ID de remboursement international',
+        amountDebited: 'Montant débité',
+        amountReimbursed: 'Montant remboursé',
         withdrawalStatus: 'Statut de retrait',
         paidStatus: 'Statut payé',
         bankAccounts: 'Comptes bancaires',

src/languages/it.ts

@@ -405,6 +405,8 @@ const translations: TranslationDeepObject<typeof en> = {
         longReportID: 'ID report dettagliato',
         withdrawalID: 'ID prelievo',
         internationalReimbursementIDs: 'ID di rimborso internazionale',
+        amountDebited: 'Importo addebitato',
+        amountReimbursed: 'Importo rimborsato',
         withdrawalStatus: 'Stato del prelievo',
         paidStatus: 'Stato di pagamento',
         bankAccounts: 'Conti bancari',

src/languages/ja.ts

@@ -404,6 +404,8 @@ const translations: TranslationDeepObject<typeof en> = {
         longReportID: '長いレポートID',
         withdrawalID: '出金ID',
         internationalReimbursementIDs: '国際払い戻しID',
+        amountDebited: '引き落とし金額',
+        amountReimbursed: '払い戻し金額',
         withdrawalStatus: '出金ステータス',
         paidStatus: '支払済みステータス',
         bankAccounts: '銀行口座',

src/languages/nl.ts

@@ -404,6 +404,8 @@ const translations: TranslationDeepObject<typeof en> = {
         longReportID: 'Lang rapport-ID',
         withdrawalID: 'Opname-ID',
         internationalReimbursementIDs: 'Internationale terugbetalings-ID’s',
+        amountDebited: 'Afgeschreven bedrag',
+        amountReimbursed: 'Terugbetaald bedrag',
         withdrawalStatus: 'Opnamestatus',
         paidStatus: 'Betaald-status',
         bankAccounts: 'Bankrekeningen',

src/languages/pl.ts

@@ -404,6 +404,8 @@ const translations: TranslationDeepObject<typeof en> = {
         longReportID: 'Długi identyfikator raportu',
         withdrawalID: 'Identyfikator wypłaty',
         internationalReimbursementIDs: 'Identyfikatory zwrotów międzynarodowych',
+        amountDebited: 'Kwota obciążenia',
+        amountReimbursed: 'Kwota zwrotu',
         withdrawalStatus: 'Status wypłaty',
         paidStatus: 'Status: opłacono',
         bankAccounts: 'Konta bankowe',

src/languages/pt-BR.ts

@@ -404,6 +404,8 @@ const translations: TranslationDeepObject<typeof en> = {
         longReportID: 'ID de relatório longo',
         withdrawalID: 'ID do saque',
         internationalReimbursementIDs: 'IDs de reembolso internacional',
+        amountDebited: 'Valor debitado',
+        amountReimbursed: 'Valor reembolsado',
         withdrawalStatus: 'Status do saque',
         paidStatus: 'Status pago',
         bankAccounts: 'Contas bancárias',

src/languages/zh-hans.ts

@@ -404,6 +404,8 @@ const translations: TranslationDeepObject<typeof en> = {
         longReportID: '长报表 ID',
         withdrawalID: '提现编号',
         internationalReimbursementIDs: '国际报销 ID',
+        amountDebited: '扣款金额',
+        amountReimbursed: '报销金额',
         withdrawalStatus: '提现状态',
         paidStatus: '已付款状态',
         bankAccounts: '银行账户',