[CFI] Add group-by columns

cspell.json

@@ -24,6 +24,7 @@
         "alrt",
         "Amal",
         "Amal's",
+        "americanexpress",
         "americanexpressfdx",
         "Amina",
         "androiddebugkey",

src/CONST/index.ts

@@ -6832,6 +6832,10 @@ const CONST = {
             WITHDRAWAL_ID: 'withdrawalID',
             AVATAR: 'avatar',
             STATUS: 'status',
+            EXPENSES: 'expenses',
+            FEED: 'feed',
+            WITHDRAWN: 'withdrawn',
+            BANK_ACCOUNT: 'bankAccount',
             REPORT_ID: 'reportID',
             BASE_62_REPORT_ID: 'base62ReportID',
             TAX: 'tax',

src/components/MoneyRequestReportView/MoneyRequestReportNavigation.tsx

@@ -34,6 +34,8 @@ function MoneyRequestReportNavigation({reportID, shouldDisplayNarrowVersion}: Mo
         selector: selectFilteredReportActions,
     });
 
+    const [cardFeeds] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER, {canBeMissing: true});
+
     const archivedReportsIdSet = useArchivedReportsIdSet();
 
     const {type, status, sortBy, sortOrder, groupBy} = lastSearchQuery?.queryJSON ?? {};
@@ -50,6 +52,7 @@ function MoneyRequestReportNavigation({reportID, shouldDisplayNarrowVersion}: Mo
             currentSearch: lastSearchQuery?.searchKey,
             archivedReportsIDList: archivedReportsIdSet,
             isActionLoadingSet,
+            cardFeeds,
         });
         results = getSortedSections(type, status ?? '', searchData, localeCompare, translate, sortBy, sortOrder, groupBy).map((value) => value.reportID);
     }

src/components/Search/SearchList/index.tsx

@@ -9,7 +9,7 @@
 import type {NativeSyntheticEvent, StyleProp, ViewStyle} from 'react-native';
 import Animated, {Easing, FadeOutUp, LinearTransition} from 'react-native-reanimated';
 import Checkbox from '@components/Checkbox';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import Modal from '@components/Modal';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
@@ -378,7 +378,7 @@
         ],
     );
 
-    const tableHeaderVisible = (canSelectMultiple || !!SearchTableHeader) && (!groupBy || type === CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT);
+    const tableHeaderVisible = canSelectMultiple || !!SearchTableHeader;
     const selectAllButtonVisible = canSelectMultiple && !SearchTableHeader;
     const isSelectAllChecked = selectedItemsLength > 0 && selectedItemsLength === flattenedItemsWithoutPendingDelete.length;
 

src/components/Search/index.tsx

@@ -335,6 +335,8 @@ function Search({
         selector: selectFilteredReportActions,
     });
 
+    const [cardFeeds] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER, {canBeMissing: true});
+
     const {defaultCardFeed} = useCardFeedsForDisplay();
     const suggestedSearches = useMemo(() => getSuggestedSearches(accountID, defaultCardFeed?.id), [defaultCardFeed?.id, accountID]);
 
@@ -459,9 +461,24 @@ function Search({
             archivedReportsIDList: archivedReportsIdSet,
             queryJSON,
             isActionLoadingSet,
+            cardFeeds,
         });
         return [filteredData1, filteredData1.length, allLength];
-    }, [searchKey, exportReportActions, validGroupBy, isDataLoaded, searchResults, type, archivedReportsIdSet, formatPhoneNumber, accountID, queryJSON, email, isActionLoadingSet]);
+    }, [
+        searchKey,
+        exportReportActions,
+        validGroupBy,
+        isDataLoaded,
+        searchResults,
+        type,
+        archivedReportsIdSet,
+        formatPhoneNumber,
+        accountID,
+        queryJSON,
+        email,
+        isActionLoadingSet,
+        cardFeeds,
+    ]);
 
     useEffect(() => {
         /** We only want to display the skeleton for the status filters the first time we load them for a specific data type */
@@ -831,10 +848,10 @@ function Search({
         if (!searchResults?.data) {
             return [];
         }
-        const columns = getColumnsToShow(accountID, searchResults?.data, visibleColumns, false, searchResults?.search?.type);
+        const columns = getColumnsToShow(accountID, searchResults?.data, visibleColumns, false, searchResults?.search?.type, validGroupBy);
 
         return (Object.keys(columns) as SearchColumnType[]).filter((col) => columns[col]);
-    }, [accountID, searchResults?.data, searchResults?.search?.type, visibleColumns]);
+    }, [accountID, searchResults?.data, searchResults?.search?.type, visibleColumns, validGroupBy]);
 
     const opacity = useSharedValue(1);
     const animatedStyle = useAnimatedStyle(() => ({
@@ -862,7 +879,7 @@ function Search({
 
     const isChat = type === CONST.SEARCH.DATA_TYPES.CHAT;
     const isTask = type === CONST.SEARCH.DATA_TYPES.TASK;
-    const canSelectMultiple = !isChat && !isTask && (!isSmallScreenWidth || isMobileSelectionModeEnabled) && validGroupBy !== CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID;
+    const canSelectMultiple = !isChat && !isTask && (!isSmallScreenWidth || isMobileSelectionModeEnabled);
     const ListItem = getListItem(type, status, validGroupBy);
 
     const sortedSelectedData = useMemo(
@@ -1046,9 +1063,8 @@ function Search({
         isExpenseReportType ?? false,
     );
     const {shouldShowAmountInWideColumn, shouldShowTaxAmountInWideColumn} = getWideAmountIndicators(searchResults?.data);
-    const shouldShowSorting = !validGroupBy;
-    const shouldShowTableHeader = isLargeScreenWidth && !isChat && !validGroupBy;
-    const tableHeaderVisible = (canSelectMultiple || shouldShowTableHeader) && (!validGroupBy || isExpenseReportType);
+    const shouldShowTableHeader = isLargeScreenWidth && !isChat;
+    const tableHeaderVisible = canSelectMultiple || shouldShowTableHeader;
 
     return (
         <SearchScopeProvider>
@@ -1081,7 +1097,7 @@ function Search({
                                     shouldShowYearExported={shouldShowYearExported}
                                     isAmountColumnWide={shouldShowAmountInWideColumn}
                                     isTaxAmountColumnWide={shouldShowTaxAmountInWideColumn}
-                                    shouldShowSorting={shouldShowSorting}
+                                    shouldShowSorting
                                     areAllOptionalColumnsHidden={areAllOptionalColumnsHidden}
                                     groupBy={validGroupBy}
                                 />

src/components/SelectionListWithSections/Search/CardListItemHeader.tsx

@@ -1,12 +1,10 @@
-import React, {useMemo} from 'react';
+import React from 'react';
 import {View} from 'react-native';
 import Checkbox from '@components/Checkbox';
-import Icon from '@components/Icon';
-import * as Expensicons from '@components/Icon/Expensicons';
-import {PressableWithFeedback} from '@components/Pressable';
 import ReportActionAvatars from '@components/ReportActionAvatars';
 import type {ListItem, TransactionCardGroupListItemType} from '@components/SelectionListWithSections/types';
 import TextWithTooltip from '@components/TextWithTooltip';
+import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -15,6 +13,8 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils';
 import CONST from '@src/CONST';
 import type {CompanyCardFeed} from '@src/types/onyx/CardFeeds';
+import ExpandCollapseArrowButton from './ExpandCollapseArrowButton';
+import ExpensesCell from './ExpensesCell';
 import TotalCell from './TotalCell';
 
 type CardListItemHeaderProps<TItem extends ListItem> = {
@@ -62,13 +62,13 @@ function CardListItemHeader<TItem extends ListItem>({
     const {isLargeScreenWidth} = useResponsiveLayout();
     const StyleUtils = useStyleUtils();
     const {translate, formatPhoneNumber} = useLocalize();
-    const formattedDisplayName = useMemo(() => formatPhoneNumber(getDisplayNameOrDefault(cardItem)), [cardItem, formatPhoneNumber]);
+    const formattedDisplayName = formatPhoneNumber(getDisplayNameOrDefault(cardItem));
     const backgroundColor =
         StyleUtils.getItemBackgroundColorStyle(!!cardItem.isSelected, !!isFocused, !!isDisabled, theme.activeComponentBG, theme.hoverComponentBG)?.backgroundColor ?? theme.highlightBG;
 
     return (
         <View>
-            <View style={[styles.pv1Half, styles.pl3, styles.flexRow, styles.alignItemsCenter, styles.justifyContentStart]}>
+            <View style={[styles.pv1Half, styles.pl3, styles.flexRow, styles.alignItemsCenter, isLargeScreenWidth ? styles.gap3 : styles.justifyContentStart]}>
                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.mnh40, styles.flex1, styles.gap3]}>
                     {!!canSelectMultiple && (
                         <Checkbox
@@ -77,52 +77,80 @@ function CardListItemHeader<TItem extends ListItem>({
                             isIndeterminate={isIndeterminate}
                             disabled={!!isDisabled || cardItem.isDisabledCheckbox}
                             accessibilityLabel={translate('common.select')}
+                            style={isLargeScreenWidth && styles.mr1}
                         />
                     )}
-                    <View style={[styles.flexRow, styles.flex1, styles.gap3]}>
-                        <ReportActionAvatars
-                            subscriptCardFeed={cardItem.bank as CompanyCardFeed}
-                            subscriptAvatarBorderColor={backgroundColor}
-                            noRightMarginOnSubscriptContainer
-                            accountIDs={[cardItem.accountID]}
-                        />
-                        <View style={[styles.gapHalf, styles.flexShrink1]}>
-                            <TextWithTooltip
-                                text={formattedDisplayName}
-                                style={[styles.optionDisplayName, styles.sidebarLinkTextBold, styles.pre, styles.fontWeightNormal]}
-                            />
-                            <TextWithTooltip
-                                text={`${cardItem.cardName}${cardItem.lastFourPAN ? ` ${CONST.DOT_SEPARATOR} ` : ''}${cardItem.lastFourPAN}`}
-                                style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
+                    {!isLargeScreenWidth && (
+                        <View style={[styles.flexRow, styles.flex1, styles.gap3]}>
+                            <ReportActionAvatars
+                                subscriptCardFeed={cardItem.bank as CompanyCardFeed}
+                                subscriptAvatarBorderColor={backgroundColor}
+                                noRightMarginOnSubscriptContainer
+                                accountIDs={[cardItem.accountID]}
                             />
-                        </View>
-                    </View>
-                </View>
-                <View style={[styles.flexShrink0, styles.mr3, styles.gap1]}>
-                    <TotalCell
-                        total={cardItem.total}
-                        currency={cardItem.currency}
-                    />
-                    {!isLargeScreenWidth && !!onDownArrowClick && (
-                        <View>
-                            <PressableWithFeedback
-                                onPress={onDownArrowClick}
-                                style={[styles.pl3, styles.justifyContentCenter, styles.alignItemsEnd]}
-                                accessibilityRole={CONST.ROLE.BUTTON}
-                                accessibilityLabel={isExpanded ? CONST.ACCESSIBILITY_LABELS.COLLAPSE : CONST.ACCESSIBILITY_LABELS.EXPAND}
-                            >
-                                {({hovered}) => (
-                                    <Icon
-                                        src={isExpanded ? Expensicons.UpArrow : Expensicons.DownArrow}
-                                        fill={theme.icon}
-                                        additionalStyles={!hovered && styles.opacitySemiTransparent}
-                                        small
-                                    />
-                                )}
-                            </PressableWithFeedback>
+                            <View style={[styles.gapHalf, styles.flexShrink1]}>
+                                <TextWithTooltip
+                                    text={formattedDisplayName}
+                                    style={[styles.optionDisplayName, styles.sidebarLinkTextBold, styles.pre, styles.fontWeightNormal]}
+                                />
+                                <TextWithTooltip
+                                    text={`${cardItem.cardName}${cardItem.lastFourPAN ? ` ${CONST.DOT_SEPARATOR} ` : ''}${cardItem.lastFourPAN}`}
+                                    style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
+                                />
+                            </View>
                         </View>
                     )}
+                    {isLargeScreenWidth && (
+                        <>
+                            <View style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.AVATAR)}>
+                                <UserDetailsTooltip accountID={cardItem.accountID}>
+                                    <View>
+                                        <ReportActionAvatars
+                                            subscriptCardFeed={cardItem.bank as CompanyCardFeed}
+                                            subscriptAvatarBorderColor={backgroundColor}
+                                            noRightMarginOnSubscriptContainer
+                                            accountIDs={[cardItem.accountID]}
+                                        />
+                                    </View>
+                                </UserDetailsTooltip>
+                            </View>
+                            <View style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.CARD)}>
+                                <View style={[styles.gapHalf, styles.flexShrink1]}>
+                                    <TextWithTooltip text={cardItem.formattedCardName ?? ''} />
+                                </View>
+                            </View>
+                            <View style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.FEED)}>
+                                <TextWithTooltip
+                                    text={cardItem.formattedFeedName ?? ''}
+                                    style={[styles.optionDisplayName, styles.lineHeightLarge, styles.pre]}
+                                />
+                            </View>
+                            <View style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.EXPENSES)}>
+                                <ExpensesCell count={cardItem.count} />
+                            </View>
+                            <View style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL, false, false, false, false, false, false, false, false, true)}>
+                                <TotalCell
+                                    total={cardItem.total}
+                                    currency={cardItem.currency}
+                                />
+                            </View>
+                        </>
+                    )}
                 </View>
+                {!isLargeScreenWidth && (
+                    <View style={[[styles.flexShrink0, styles.mr3, styles.gap1]]}>
+                        <TotalCell
+                            total={cardItem.total}
+                            currency={cardItem.currency}
+                        />
+                        {!!onDownArrowClick && (
+                            <ExpandCollapseArrowButton
+                                isExpanded={isExpanded}
+                                onPress={onDownArrowClick}
+                            />
+                        )}
+                    </View>
+                )}
             </View>
         </View>
     );

src/components/SelectionListWithSections/Search/ExpandCollapseArrowButton.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Icon from '@components/Icon';
+import {PressableWithFeedback} from '@components/Pressable';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+
+type ExpandCollapseArrowButtonProps = {
+    isExpanded?: boolean;
+
+    onPress: () => void;
+};
+
+function ExpandCollapseArrowButton({isExpanded, onPress}: ExpandCollapseArrowButtonProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const icons = useMemoizedLazyExpensifyIcons(['UpArrow', 'DownArrow']);
+
+    return (
+        <PressableWithFeedback
+            onPress={onPress}
+            style={[styles.pl3, styles.justifyContentCenter, styles.alignItemsEnd]}
+            accessibilityRole={CONST.ROLE.BUTTON}
+            accessibilityLabel={isExpanded ? CONST.ACCESSIBILITY_LABELS.COLLAPSE : CONST.ACCESSIBILITY_LABELS.EXPAND}
+        >
+            {({hovered}) => (
+                <Icon
+                    src={isExpanded ? icons.UpArrow : icons.DownArrow}
+                    fill={theme.icon}
+                    additionalStyles={!hovered && styles.opacitySemiTransparent}
+                    small
+                />
+            )}
+        </PressableWithFeedback>
+    );
+}
+
+export default ExpandCollapseArrowButton;

src/components/SelectionListWithSections/Search/ExpensesCell.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import TextWithTooltip from '@components/TextWithTooltip';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+type ExpensesDataCellProps = {
+    count: number;
+
+    shouldShowTooltip?: boolean;
+};
+
+function ExpensesDataCell({count, shouldShowTooltip = true}: ExpensesDataCellProps) {
+    const styles = useThemeStyles();
+
+    return (
+        <TextWithTooltip
+            shouldShowTooltip={shouldShowTooltip}
+            text={String(count)}
+            style={[styles.optionDisplayName, styles.lineHeightLarge, styles.pre]}
+        />
+    );
+}
+
+ExpensesDataCell.displayName = 'ExpensesDataCell';
+
+export default ExpensesDataCell;