feat: Person Amount and Attendees in Expense Table

src/CONST/index.ts

@@ -7455,6 +7455,8 @@ const CONST = {
                     POLICY_NAME: this.TABLE_COLUMNS.POLICY_NAME,
                     CARD: this.TABLE_COLUMNS.CARD,
                     CATEGORY: this.TABLE_COLUMNS.CATEGORY,
+                    ATTENDEES: this.TABLE_COLUMNS.ATTENDEES,
+                    TOTAL_PER_ATTENDEE: this.TABLE_COLUMNS.TOTAL_PER_ATTENDEE,
                     TAG: this.TABLE_COLUMNS.TAG,
                     EXCHANGE_RATE: this.TABLE_COLUMNS.EXCHANGE_RATE,
                     ORIGINAL_AMOUNT: this.TABLE_COLUMNS.ORIGINAL_AMOUNT,
@@ -7578,6 +7580,8 @@ const CONST = {
                     this.TABLE_COLUMNS.MERCHANT,
                     this.TABLE_COLUMNS.FROM,
                     this.TABLE_COLUMNS.CATEGORY,
+                    this.TABLE_COLUMNS.ATTENDEES,
+                    this.TABLE_COLUMNS.TOTAL_PER_ATTENDEE,
                     this.TABLE_COLUMNS.TAG,
                     this.TABLE_COLUMNS.TOTAL_AMOUNT,
                 ],
@@ -7679,6 +7683,8 @@ const CONST = {
             BILLABLE: 'billable',
             TAX_RATE: 'taxrate',
             TOTAL_AMOUNT: 'amount',
+            ATTENDEES: 'attendees',
+            TOTAL_PER_ATTENDEE: 'totalPerAttendee',
             TOTAL: 'total',
             TYPE: 'type',
             ACTION: 'action',

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -266,8 +266,9 @@ function MoneyRequestReportTransactionList({
             shouldShowBillableColumn,
             shouldShowReimbursableColumn: hasNonReimbursableTransactions(transactions),
             reportCurrency: report?.currency,
+            policy,
         });
-    }, [transactions, currentUserDetails?.accountID, isExpenseReportViewFromIOUReport, shouldShowBillableColumn, reportDetailsColumns, report?.currency]);
+    }, [currentUserDetails?.accountID, transactions, isExpenseReportViewFromIOUReport, reportDetailsColumns, shouldShowBillableColumn, report?.currency, policy]);
 
     const {windowWidth, windowHeight} = useWindowDimensions();
     const minTableWidth = getTableMinWidth(columnsToShow);

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

@@ -0,0 +1,136 @@
+import React from 'react';
+import {View} from 'react-native';
+import Avatar from '@components/Avatar';
+import Text from '@components/Text';
+import Tooltip from '@components/Tooltip';
+import UserDetailsTooltip from '@components/UserDetailsTooltip';
+import useDefaultAvatars from '@hooks/useDefaultAvatars';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {getUserDetailTooltipText, sortIconsByName} from '@libs/ReportUtils';
+import {getDefaultAvatar} from '@libs/UserAvatarUtils';
+import colors from '@styles/theme/colors';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Attendee} from '@src/types/onyx/IOU';
+import type {Icon as IconType} from '@src/types/onyx/OnyxCommon';
+
+type AttendeesCellProps = {
+    attendees: Attendee[];
+    isHovered: boolean;
+    isPressed: boolean;
+};
+
+function AttendeesCell({attendees, isHovered, isPressed}: AttendeesCellProps) {
+    const defaultAvatars = useDefaultAvatars();
+    const attendeeIcons: IconType[] = attendees.map((attendee) => ({
+        id: attendee.accountID ?? CONST.DEFAULT_NUMBER_ID,
+        name: attendee.displayName ?? attendee.email,
+        source: (attendee.avatarUrl || getDefaultAvatar({accountID: attendee.accountID, accountEmail: attendee.email, defaultAvatars})) ?? '',
+        type: CONST.ICON_TYPE_AVATAR,
+    }));
+
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const {localeCompare, formatPhoneNumber} = useLocalize();
+
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+
+    const size = CONST.AVATAR_SIZE.SMALLER;
+    const maxAvatarsInRow = CONST.AVATAR_ROW_SIZE.DEFAULT;
+    const oneAvatarSize = StyleUtils.getAvatarStyle(size);
+    const oneAvatarBorderWidth = StyleUtils.getAvatarBorderWidth(size).borderWidth ?? 0;
+    const overlapSize = oneAvatarSize.width / 3 + 2 * oneAvatarBorderWidth;
+    const height = oneAvatarSize.height;
+    const avatarContainerStyles = StyleUtils.combineStyles([styles.alignItemsCenter, styles.flexRow, StyleUtils.getHeight(height), styles.overflowHidden]);
+
+    const icons = sortIconsByName(attendeeIcons, personalDetails, localeCompare);
+    const tooltipTexts = icons.map((icon) => getUserDetailTooltipText(Number(icon.id), formatPhoneNumber, icon.name));
+
+    return (
+        <View
+            style={avatarContainerStyles}
+            testID="AttendeesCell-Row"
+        >
+            {[...icons].splice(0, maxAvatarsInRow).map((icon, index) => (
+                <UserDetailsTooltip
+                    // eslint-disable-next-line react/no-array-index-key
+                    key={`stackedAvatars-${icon.id}-${index}`}
+                    accountID={Number(icon.id)}
+                    icon={icon}
+                    fallbackUserDetails={{
+                        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                        displayName: icon.name,
+                    }}
+                    shouldRender
+                >
+                    <View style={[StyleUtils.getHorizontalStackedAvatarStyle(index, overlapSize, -oneAvatarBorderWidth), StyleUtils.getAvatarBorderRadius(size, icon.type)]}>
+                        <Avatar
+                            iconAdditionalStyles={[
+                                StyleUtils.getHorizontalStackedAvatarBorderStyle({
+                                    theme,
+                                    isHovered,
+                                    isPressed,
+                                    isInReportAction: true,
+                                    shouldUseCardBackground: true,
+                                    isActive: false,
+                                    customPressedBorderColor: theme.activeComponentBG,
+                                }),
+                                StyleUtils.getAvatarBorderWidth(size),
+                            ]}
+                            source={icon.source}
+                            size={size}
+                            name={icon.name}
+                            avatarID={icon.id}
+                            type={icon.type}
+                            fallbackIcon={icon.fallbackIcon}
+                            testID="AttendeesCell-Avatar"
+                        />
+                    </View>
+                </UserDetailsTooltip>
+            ))}
+            {icons.length > maxAvatarsInRow && (
+                <Tooltip
+                    // We only want to cap tooltips to only 10 users or so since some reports have hundreds of users, causing performance to degrade.
+                    text={tooltipTexts.slice(maxAvatarsInRow - 1, maxAvatarsInRow + 9).join(', ')}
+                    shouldRender
+                >
+                    <View
+                        testID="AttendeesCell-LimitReached"
+                        style={[
+                            styles.alignItemsCenter,
+                            styles.justifyContentCenter,
+                            StyleUtils.getHorizontalStackedAvatarBorderStyle({
+                                theme,
+                                isHovered,
+                                isPressed,
+                                isInReportAction: true,
+                                shouldUseCardBackground: true,
+                                customPressedBorderColor: theme.activeComponentBG,
+                            }),
+
+                            // Set overlay background color with RGBA value so that the text will not inherit opacity
+                            StyleUtils.getHorizontalStackedOverlayAvatarStyle(oneAvatarSize, oneAvatarBorderWidth),
+                            icons.at(3)?.type === CONST.ICON_TYPE_WORKSPACE && StyleUtils.getAvatarBorderRadius(size, icons.at(3)?.type),
+                            StyleUtils.getBackgroundColorWithOpacityStyle(colors.productDark400, variables.overlayOpacity),
+                        ]}
+                    >
+                        <View style={[styles.justifyContentCenter, styles.alignItemsCenter, StyleUtils.getHeight(oneAvatarSize.height), StyleUtils.getWidthStyle(oneAvatarSize.width)]}>
+                            <Text
+                                style={[styles.avatarInnerTextSmall, StyleUtils.getAvatarExtraFontSizeStyle(size), styles.userSelectNone, styles.textMicroBold, styles.buttonSuccessText]}
+                                dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+                            >{`+${icons.length - maxAvatarsInRow}`}</Text>
+                        </View>
+                    </View>
+                </Tooltip>
+            )}
+        </View>
+    );
+}
+
+export default AttendeesCell;

src/components/Search/SearchTableHeader.tsx

@@ -82,6 +82,14 @@ const getExpenseHeaders = (groupBy?: SearchGroupBy): SearchColumnConfig[] => [
         columnName: CONST.SEARCH.TABLE_COLUMNS.CATEGORY,
         translationKey: 'common.category',
     },
+    {
+        columnName: CONST.SEARCH.TABLE_COLUMNS.ATTENDEES,
+        translationKey: 'iou.attendees',
+    },
+    {
+        columnName: CONST.SEARCH.TABLE_COLUMNS.TOTAL_PER_ATTENDEE,
+        translationKey: 'iou.totalPerAttendee',
+    },
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.TAG,
         translationKey: 'common.tag',

src/components/TransactionItemRow/index.tsx

@@ -7,6 +7,7 @@ import type {TransactionWithOptionalHighlight} from '@components/MoneyRequestRep
 import {PressableWithFeedback} from '@components/Pressable';
 import RadioButton from '@components/RadioButton';
 import ActionCell from '@components/Search/SearchList/ListItem/ActionCell';
+import AttendeesCell from '@components/Search/SearchList/ListItem/AttendeesCell';
 import DateCell from '@components/Search/SearchList/ListItem/DateCell';
 import ExportedIconCell from '@components/Search/SearchList/ListItem/ExportedIconCell';
 import StatusCell from '@components/Search/SearchList/ListItem/StatusCell';
@@ -16,6 +17,7 @@ import UserInfoCell from '@components/Search/SearchList/ListItem/UserInfoCell';
 import WorkspaceCell from '@components/Search/SearchList/ListItem/WorkspaceCell';
 import type {SearchColumnType, TableColumnSize} from '@components/Search/types';
 import Text from '@components/Text';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -29,6 +31,9 @@ import {getReportName} from '@libs/ReportNameUtils';
 import {isExpenseReport, isIOUReport, isSettled} from '@libs/ReportUtils';
 import StringUtils from '@libs/StringUtils';
 import {
+    getAmount,
+    getAttendees,
+    getCurrency,
     getDescription,
     getExchangeRate,
     getMerchant,
@@ -43,6 +48,7 @@ import {
     isScanning,
     isTimeRequest,
     isUnreportedAndHasInvalidDistanceRateTransaction,
+    shouldShowAttendees as shouldShowAttendeesUtils,
 } from '@libs/TransactionUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -202,6 +208,7 @@ function TransactionItemRow({
     const hasCategoryOrTag = !isCategoryMissing(transactionItem?.category) || !!transactionItem.tag;
     const createdAt = getTransactionCreated(transactionItem);
     const expensicons = useMemoizedLazyExpensifyIcons(['ArrowRight']);
+    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const transactionThreadReportID = reportActions ? getIOUActionForTransactionID(reportActions, transactionItem.transactionID)?.childReportID : undefined;
 
     const isDateColumnWide = dateColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE;
@@ -267,6 +274,21 @@ function TransactionItemRow({
         return transactionItem.cardName;
     }, [transactionItem.cardID, transactionItem.cardName, transactionItem.isCardFeedDeleted, customCardNames, translate]);
 
+    const transactionAttendees = useMemo(() => getAttendees(transactionItem, currentUserPersonalDetails), [transactionItem, currentUserPersonalDetails]);
+
+    const shouldShowAttendees = shouldShowAttendeesUtils(CONST.IOU.TYPE.SUBMIT, policy) && transactionAttendees.length > 0;
+
+    const totalPerAttendee = useMemo(() => {
+        const attendeesCount = transactionAttendees.length ?? 0;
+        const totalAmount = getAmount(transactionItem);
+
+        if (!attendeesCount || totalAmount === undefined) {
+            return undefined;
+        }
+
+        return totalAmount / attendeesCount;
+    }, [transactionAttendees.length, transactionItem]);
+
     const renderColumn = (column: SearchColumnType): React.ReactNode => {
         switch (column) {
             case CONST.SEARCH.TABLE_COLUMNS.TYPE:
@@ -495,6 +517,21 @@ function TransactionItemRow({
                         <TextCell text={cardName} />
                     </View>
                 );
+            case CONST.SEARCH.TABLE_COLUMNS.ATTENDEES:
+                return (
+                    <View
+                        key={column}
+                        style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ATTENDEES)]}
+                    >
+                        {shouldShowAttendees && (
+                            <AttendeesCell
+                                attendees={transactionAttendees}
+                                isHovered={isHover}
+                                isPressed={isSelected}
+                            />
+                        )}
+                    </View>
+                );
             case CONST.SEARCH.TABLE_COLUMNS.COMMENTS:
                 return (
                     <View
@@ -529,6 +566,21 @@ function TransactionItemRow({
                         />
                     </View>
                 );
+            case CONST.SEARCH.TABLE_COLUMNS.TOTAL_PER_ATTENDEE:
+                return (
+                    <View
+                        key={column}
+                        style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL_PER_ATTENDEE, undefined, isAmountColumnWide)]}
+                    >
+                        {shouldShowAttendees && (
+                            <AmountCell
+                                total={totalPerAttendee ?? 0}
+                                currency={getCurrency(transactionItem)}
+                                isScanning={isScanning(transactionItem)}
+                            />
+                        )}
+                    </View>
+                );
             case CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT:
                 return (
                     <View

src/languages/de.ts

@@ -1541,6 +1541,7 @@ const translations: TranslationDeepObject<typeof en> = {
         bookingArchived: 'Diese Buchung ist archiviert',
         bookingArchivedDescription: 'Diese Buchung ist archiviert, weil das Reisedatum verstrichen ist. Füge bei Bedarf eine Ausgabe für den endgültigen Betrag hinzu.',
         attendees: 'Teilnehmende',
+        totalPerAttendee: 'Pro Teilnehmendem',
         whoIsYourAccountant: 'Wer ist Ihre Steuerberaterin bzw. Ihr Steuerberater?',
         paymentComplete: 'Zahlung abgeschlossen',
         time: 'Zeit',

src/languages/en.ts

@@ -1594,6 +1594,7 @@ const translations = {
         bookingArchived: 'This booking is archived',
         bookingArchivedDescription: 'This booking is archived because the trip date has passed. Add an expense for the final amount if needed.',
         attendees: 'Attendees',
+        totalPerAttendee: 'Per attendee',
         whoIsYourAccountant: 'Who is your accountant?',
         paymentComplete: 'Payment complete',
         time: 'Time',

src/languages/es.ts

@@ -1462,6 +1462,7 @@ const translations: TranslationDeepObject<typeof en> = {
         bookingArchived: 'Esta reserva está archivada',
         bookingArchivedDescription: 'Esta reserva está archivada porque la fecha del viaje ha pasado. Agregue un gasto por el monto final si es necesario.',
         attendees: 'Asistentes',
+        totalPerAttendee: 'Por asistente',
         whoIsYourAccountant: '¿Quién es tu contador?',
         paymentComplete: 'Pago completo',
         time: 'Tiempo',

src/languages/fr.ts

@@ -1545,6 +1545,7 @@ const translations: TranslationDeepObject<typeof en> = {
         bookingArchived: 'Cette réservation est archivée',
         bookingArchivedDescription: 'Cette réservation est archivée car la date du voyage est passée. Ajoutez une dépense pour le montant final si nécessaire.',
         attendees: 'Participants',
+        totalPerAttendee: 'Par participant',
         whoIsYourAccountant: 'Qui est votre comptable ?',
         paymentComplete: 'Paiement terminé',
         time: 'Heure',

src/languages/it.ts

@@ -1543,6 +1543,7 @@ const translations: TranslationDeepObject<typeof en> = {
         bookingArchived: 'Questa prenotazione è archiviata',
         bookingArchivedDescription: 'Questa prenotazione è archiviata perché la data del viaggio è passata. Aggiungi una spesa per l’importo finale, se necessario.',
         attendees: 'Partecipanti',
+        totalPerAttendee: 'Per partecipante',
         whoIsYourAccountant: 'Chi è il tuo commercialista?',
         paymentComplete: 'Pagamento completato',
         time: 'Ora',

src/languages/ja.ts

@@ -1524,6 +1524,7 @@ const translations: TranslationDeepObject<typeof en> = {
         bookingArchived: 'この予約はアーカイブされています',
         bookingArchivedDescription: 'この予約は旅行日が過ぎたためアーカイブされています。必要に応じて、最終金額の経費を追加してください。',
         attendees: '参加者',
+        totalPerAttendee: '参加者ごと',
         whoIsYourAccountant: 'あなたの会計士は誰ですか？',
         paymentComplete: '支払いが完了しました',
         time: '時間',

src/languages/nl.ts

@@ -1540,6 +1540,7 @@ const translations: TranslationDeepObject<typeof en> = {
         bookingArchived: 'Deze boeking is gearchiveerd',
         bookingArchivedDescription: 'Deze boeking is gearchiveerd omdat de reisdatum is verstreken. Voeg indien nodig een uitgave toe voor het eindbedrag.',
         attendees: 'Deelnemers',
+        totalPerAttendee: 'Per deelnemer',
         whoIsYourAccountant: 'Wie is jouw accountant?',
         paymentComplete: 'Betaling voltooid',
         time: 'Tijd',

src/languages/pl.ts

@@ -1538,6 +1538,7 @@ const translations: TranslationDeepObject<typeof en> = {
         bookingArchived: 'Ta rezerwacja jest zarchiwizowana',
         bookingArchivedDescription: 'Ta rezerwacja została zarchiwizowana, ponieważ data podróży już minęła. W razie potrzeby dodaj wydatek na ostateczną kwotę.',
         attendees: 'Uczestnicy',
+        totalPerAttendee: 'Na uczestnika',
         whoIsYourAccountant: 'Kim jest twój księgowy?',
         paymentComplete: 'Płatność zakończona',
         time: 'Czas',

src/languages/pt-BR.ts

@@ -1537,6 +1537,7 @@ const translations: TranslationDeepObject<typeof en> = {
         bookingArchived: 'Esta reserva está arquivada',
         bookingArchivedDescription: 'Esta reserva está arquivada porque a data da viagem já passou. Adicione uma despesa com o valor final, se necessário.',
         attendees: 'Participantes',
+        totalPerAttendee: 'Por participante',
         whoIsYourAccountant: 'Quem é seu contador?',
         paymentComplete: 'Pagamento concluído',
         time: 'Hora',

src/languages/zh-hans.ts

@@ -1490,6 +1490,7 @@ const translations: TranslationDeepObject<typeof en> = {
         bookingArchived: '此预订已归档',
         bookingArchivedDescription: '此预订已归档，因为行程日期已过。如有需要，请为最终金额添加一笔报销。',
         attendees: '参与者',
+        totalPerAttendee: '每位参与者',
         whoIsYourAccountant: '你的会计是谁？',
         paymentComplete: '付款完成',
         time: '时间',