Add Paid by search filter UI, table column, sorting, and export

src/CONST/index.ts

@@ -7153,6 +7153,7 @@ const CONST = {
                     APPROVED: this.TABLE_COLUMNS.APPROVED,
                     FIRST_APPROVER: this.TABLE_COLUMNS.FIRST_APPROVER,
                     FIRST_APPROVED: this.TABLE_COLUMNS.FIRST_APPROVED,
+                    PAID_BY: this.TABLE_COLUMNS.PAID_BY,
                     EXPORTED: this.TABLE_COLUMNS.EXPORTED,
                     STATUS: this.TABLE_COLUMNS.STATUS,
                     PAID_STATUS: this.TABLE_COLUMNS.PAID_STATUS,
@@ -7349,6 +7350,7 @@ const CONST = {
             APPROVED: 'approved',
             FIRST_APPROVER: 'firstapprover',
             FIRST_APPROVED: 'firstapproved',
+            PAID_BY: 'paidBy',
             POSTED: 'posted',
             EXPORTED: 'exported',
             MERCHANT: 'merchant',
@@ -7457,6 +7459,7 @@ const CONST = {
             FROM: 'from',
             TO: 'to',
             PAYER: 'payer',
+            PAID_BY: 'paidBy',
             EXPORTER: 'exporter',
             CATEGORY: 'category',
             TAG: 'tag',
@@ -7542,6 +7545,7 @@ const CONST = {
             FROM: 'from',
             TO: 'to',
             PAYER: 'payer',
+            PAID_BY: 'paid-by',
             EXPORTER: 'exporter',
             CATEGORY: 'category',
             TAG: 'tag',

src/components/Search/FilterComponents/ListFilterContent.tsx

@@ -218,6 +218,7 @@ function ListFilterContent({
         case CONST.SEARCH.SYNTAX_FILTER_KEYS.ASSIGNEE:
         case CONST.SEARCH.SYNTAX_FILTER_KEYS.ATTENDEE:
         case CONST.SEARCH.SYNTAX_FILTER_KEYS.TO:
+        case CONST.SEARCH.SYNTAX_FILTER_KEYS.PAID_BY:
         case CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM: {
             content = (
                 <UserSelector

src/components/Search/SearchList/ListItem/ExpenseReportListItemRow/ExpenseReportListItemRowWide.tsx

@@ -120,6 +120,18 @@ function ExpenseReportListItemRowWide({
                 />
             </View>
         ),
+        [CONST.SEARCH.TABLE_COLUMNS.PAID_BY]: (
+            <View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.PAID_BY)]}>
+                {!!item.paidByAccountID && (
+                    <UserInfoCell
+                        accountID={item.paidByAccountID}
+                        avatar={item.paidByAvatar}
+                        displayName={item.formattedPaidBy ?? ''}
+                        isLargeScreenWidth
+                    />
+                )}
+            </View>
+        ),
         [CONST.SEARCH.TABLE_COLUMNS.EXPORTED]: (
             <View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.EXPORTED, {isExportedColumnWide: item.shouldShowYearExported})]}>
                 <DateCell

src/components/Search/SearchList/ListItem/types.ts

@@ -267,6 +267,15 @@ type TransactionReportGroupListItemType = TransactionGroupListItemType & {groupe
         /** Final and formatted "first approver" value used for displaying and sorting */
         formattedFirstApprover?: string;
 
+        /** The avatar of the user the report was paid by */
+        paidByAvatar?: AvatarSource;
+
+        /** Account ID of the user the report was paid by (actor on the latest payment report action) */
+        paidByAccountID?: number;
+
+        /** Final and formatted "paid by" value used for displaying and sorting */
+        formattedPaidBy?: string;
+
         /** Whether the status field should be shown in a pending state */
         shouldShowStatusAsPending?: boolean;
 

src/components/Search/SearchPageHeader/SearchFilterBar.tsx

@@ -114,6 +114,7 @@ function ReportDropdown({label, value, PopoverComponent, sentryLabel, onClosePre
 const FILTER_COMPONENT_MAP: Partial<Record<SearchFilter['key'], React.ComponentType<DropdownProps>>> = {
     [CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM]: UserDropdown,
     [CONST.SEARCH.SYNTAX_FILTER_KEYS.TO]: UserDropdown,
+    [CONST.SEARCH.SYNTAX_FILTER_KEYS.PAID_BY]: UserDropdown,
     [CONST.SEARCH.SYNTAX_FILTER_KEYS.ATTENDEE]: UserDropdown,
     [CONST.SEARCH.SYNTAX_FILTER_KEYS.ASSIGNEE]: UserDropdown,
 

src/components/Search/SearchRouter/buildSubstitutionsMap.ts

@@ -86,6 +86,7 @@ function buildSubstitutionsMap(
             filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.ASSIGNEE ||
             filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.EXPORTER ||
             filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.PAYER ||
+            filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.PAID_BY ||
             filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.ATTENDEE
         ) {
             const displayValue = getFilterDisplayValue({

src/components/Search/SearchRouter/getQueryWithSubstitutions.ts

@@ -14,6 +14,7 @@ const USER_FILTER_KEYS = new Set<string>([
     CONST.SEARCH.SYNTAX_FILTER_KEYS.TO,
     CONST.SEARCH.SYNTAX_FILTER_KEYS.ASSIGNEE,
     CONST.SEARCH.SYNTAX_FILTER_KEYS.PAYER,
+    CONST.SEARCH.SYNTAX_FILTER_KEYS.PAID_BY,
     CONST.SEARCH.SYNTAX_FILTER_KEYS.EXPORTER,
     CONST.SEARCH.SYNTAX_FILTER_KEYS.ATTENDEE,
 ]);

src/components/Search/SearchTableHeader.tsx

@@ -264,6 +264,10 @@ const getExpenseReportHeaders = (profileIcon?: IconAsset): SearchColumnConfig[]
         columnName: CONST.SEARCH.TABLE_COLUMNS.FIRST_APPROVED,
         translationKey: 'search.filters.firstApproved',
     },
+    {
+        columnName: CONST.SEARCH.TABLE_COLUMNS.PAID_BY,
+        translationKey: 'search.filters.paidBy',
+    },
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.EXPORTED,
         translationKey: 'search.filters.exported',

src/hooks/useAdvancedSearchFilters.ts

@@ -31,6 +31,7 @@ const typeFiltersKeys = {
             CONST.SEARCH.SYNTAX_FILTER_KEYS.STATUS,
             CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM,
             CONST.SEARCH.SYNTAX_FILTER_KEYS.TO,
+            CONST.SEARCH.SYNTAX_FILTER_KEYS.PAID_BY,
             CONST.SEARCH.SYNTAX_FILTER_KEYS.POLICY_ID,
         ],
         [
@@ -81,6 +82,7 @@ const typeFiltersKeys = {
             CONST.SEARCH.SYNTAX_FILTER_KEYS.STATUS,
             CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM,
             CONST.SEARCH.SYNTAX_FILTER_KEYS.TO,
+            CONST.SEARCH.SYNTAX_FILTER_KEYS.PAID_BY,
             CONST.SEARCH.SYNTAX_FILTER_KEYS.POLICY_ID,
         ],
         [
@@ -113,6 +115,7 @@ const typeFiltersKeys = {
             CONST.SEARCH.SYNTAX_FILTER_KEYS.STATUS,
             CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM,
             CONST.SEARCH.SYNTAX_FILTER_KEYS.TO,
+            CONST.SEARCH.SYNTAX_FILTER_KEYS.PAID_BY,
             CONST.SEARCH.SYNTAX_FILTER_KEYS.POLICY_ID,
         ],
         [
@@ -153,6 +156,7 @@ const typeFiltersKeys = {
             CONST.SEARCH.SYNTAX_FILTER_KEYS.STATUS,
             CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM,
             CONST.SEARCH.SYNTAX_FILTER_KEYS.TO,
+            CONST.SEARCH.SYNTAX_FILTER_KEYS.PAID_BY,
             CONST.SEARCH.SYNTAX_FILTER_KEYS.POLICY_ID,
         ],
         [

src/hooks/useAutocompleteSuggestions.ts

@@ -240,6 +240,7 @@ function useAutocompleteSuggestions({
         case CONST.SEARCH.SYNTAX_FILTER_KEYS.TO:
         case CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM:
         case CONST.SEARCH.SYNTAX_FILTER_KEYS.PAYER:
+        case CONST.SEARCH.SYNTAX_FILTER_KEYS.PAID_BY:
         case CONST.SEARCH.SYNTAX_FILTER_KEYS.ATTENDEE:
         case CONST.SEARCH.SYNTAX_FILTER_KEYS.EXPORTER: {
             // Soft-exclude Expensify-team logins (current and former AMs/Guides) from user filter suggestions. Users can still type any email manually because the search bar accepts free text.
@@ -273,7 +274,7 @@ function useAutocompleteSuggestions({
             }).options.personalDetails.filter((participant) => participant.text && !alreadyAutocompletedKeys.has(participant.text.toLowerCase()));
 
             return participants.map((participant) => ({
-                filterKey: autocompleteKey,
+                filterKey: getUserFriendlyKey(autocompleteKey),
                 text: participant.login === currentUserEmail ? CONST.SEARCH.ME : (participant.text ?? ''),
                 autocompleteID: String(participant.accountID),
                 mapKey: autocompleteKey,

src/languages/de.ts

@@ -9096,6 +9096,7 @@ Fügen Sie weitere Ausgabelimits hinzu, um den Cashflow Ihres Unternehmens zu sc
             approved: 'Genehmigt',
             firstApprover: 'Erste:r Genehmiger:in',
             firstApproved: 'Zuerst genehmigt',
+            paidBy: 'Bezahlt von',
             paid: 'Bezahlt',
             exported: 'Exportiert',
             posted: 'Gebucht',

src/languages/el.ts

@@ -9321,6 +9321,7 @@ ${reportName}`,
             approved: 'Εγκρίθηκε',
             firstApprover: 'Πρώτος εγκρίνων',
             firstApproved: 'Πρώτη έγκριση',
+            paidBy: 'Πληρώθηκε από',
             paid: 'Πληρωμένο',
             exported: 'Έγινε εξαγωγή',
             posted: 'Καταχωρισμένο',

src/languages/en.ts

@@ -9238,6 +9238,7 @@ const translations = {
             approved: 'Approved',
             firstApprover: 'First approver',
             firstApproved: 'First approved',
+            paidBy: 'Paid by',
             paid: 'Paid',
             exported: 'Exported',
             posted: 'Posted',

src/languages/es.ts

@@ -8955,6 +8955,7 @@ El plan Controlar empieza en 9 $ por miembro activo al mes.`,
             approved: 'Aprobación',
             firstApprover: 'Primer aprobador',
             firstApproved: 'Primera aprobación',
+            paidBy: 'Pagado por',
             paid: 'Pago',
             exported: 'Exportación',
             posted: 'Contabilización',

src/languages/fr.ts

@@ -9131,6 +9131,7 @@ Ajoutez davantage de règles de dépenses pour protéger la trésorerie de l’e
             approved: 'Approuvé',
             firstApprover: 'Premier approbateur',
             firstApproved: 'Approuvé en premier',
+            paidBy: 'Payé par',
             paid: 'Payé',
             exported: 'Exporté',
             posted: 'Publié',

src/languages/it.ts

@@ -9068,6 +9068,7 @@ Aggiungi altre regole di spesa per proteggere il flusso di cassa aziendale.`,
             approved: 'Approvato',
             firstApprover: 'Primo approvatore',
             firstApproved: 'Approvato per primo',
+            paidBy: 'Pagato da',
             paid: 'Pagato',
             exported: 'Esportato',
             posted: 'Pubblicato',

src/languages/ja.ts

@@ -8955,6 +8955,7 @@ ${reportName}`,
             approved: '承認済み',
             firstApprover: '最初の承認者',
             firstApproved: '最初に承認済み',
+            paidBy: '支払者',
             paid: '支払い済み',
             exported: 'エクスポート済み',
             posted: '投稿日',

src/languages/nl.ts

@@ -9039,6 +9039,7 @@ er bestedingsregels toe om de kasstroom van het bedrijf te beschermen.`,
             approved: 'Goedgekeurd',
             firstApprover: 'Eerste gemachtigde',
             firstApproved: 'Eerst goedgekeurd',
+            paidBy: 'Betaald door',
             paid: 'Betaald',
             exported: 'Geëxporteerd',
             posted: 'Gepost',

src/languages/pl.ts

@@ -9016,6 +9016,7 @@ Dodaj więcej zasad wydatków, żeby chronić płynność finansową firmy.`,
             approved: 'Zatwierdzono',
             firstApprover: 'Pierwszy zatwierdzający',
             firstApproved: 'Najpierw zatwierdzono',
+            paidBy: 'Zapłacone przez',
             paid: 'Zapłacono',
             exported: 'Wyeksportowano',
             posted: 'Opublikowano',

src/languages/pt-BR.ts

@@ -9034,6 +9034,7 @@ Adicione mais regras de gasto para proteger o fluxo de caixa da empresa.`,
             approved: 'Aprovado',
             firstApprover: 'Primeira pessoa aprovadora',
             firstApproved: 'Primeira aprovada',
+            paidBy: 'Pago por',
             paid: 'Pago',
             exported: 'Exportado',
             posted: 'Publicado',

src/languages/zh-hans.ts

@@ -8719,6 +8719,7 @@ ${reportName}`,
             approved: '已批准',
             firstApprover: '首位审批人',
             firstApproved: '首次批准',
+            paidBy: '付款人',
             paid: '已支付',
             exported: '已导出',
             posted: '已发布',

src/libs/SearchAutocompleteUtils.ts

@@ -207,6 +207,7 @@ function filterOutRangesWithCorrectValue(
         case CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM:
         case CONST.SEARCH.SYNTAX_FILTER_KEYS.ASSIGNEE:
         case CONST.SEARCH.SYNTAX_FILTER_KEYS.PAYER:
+        case CONST.SEARCH.SYNTAX_FILTER_KEYS.PAID_BY:
         case CONST.SEARCH.SYNTAX_FILTER_KEYS.EXPORTER:
         case CONST.SEARCH.SYNTAX_FILTER_KEYS.ATTENDEE:
             return substitutionMap[`${range.key}:${range.value}`] !== undefined || userLogins.get().includes(range.value) || range.value === CONST.SEARCH.ME;