Merge pull request #42932 from Expensify/cmartins-fixReportTotalAndAlignment

Fix report total and alignment

Author: jasperhuangg

src/components/SelectionList/Search/ReportListItem.tsx

@@ -52,7 +52,7 @@ function ReportListItem<TItem extends ListItem>({
     const totalCell = (
         <TextWithTooltip
             shouldShowTooltip={showTooltip}
-            text={CurrencyUtils.convertToDisplayString(reportItem?.total, reportItem?.currency)}
+            text={CurrencyUtils.convertToDisplayString((reportItem?.type === CONST.REPORT.TYPE.EXPENSE ? -1 : 1) * (reportItem?.total ?? 0), reportItem?.currency)}
             style={[styles.optionDisplayName, styles.textNewKansasNormal, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight]}
         />
     );
@@ -130,7 +130,7 @@ function ReportListItem<TItem extends ListItem>({
                             onButtonPress={handleOnButtonPress}
                         />
                     )}
-                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
                         <View style={[styles.flexRow, styles.flex1, styles.alignItemsCenter, styles.justifyContentBetween]}>
                             <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex2]}>
                                 <View style={[styles.flexShrink1]}>
@@ -140,9 +140,12 @@ function ReportListItem<TItem extends ListItem>({
                             </View>
                             <View style={[styles.flexRow, styles.flex1, styles.justifyContentEnd]}>{totalCell}</View>
                         </View>
-                        {/** styles.reportListItemActionButtonMargin added here to move the action button by the type column distance */}
                         {isLargeScreenWidth && (
-                            <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION), styles.reportListItemActionButtonMargin]}>{actionCell}</View>
+                            <>
+                                {/** We add an empty view with type style to align the total with the table header */}
+                                <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TYPE)} />
+                                <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)}>{actionCell}</View>
+                            </>
                         )}
                     </View>
                     <View style={[styles.mt3, styles.reportListItemSeparator]} />
@@ -156,6 +159,7 @@ function ReportListItem<TItem extends ListItem>({
                             showItemHeaderOnNarrowLayout={false}
                             containerStyle={styles.mt3}
                             isHovered={hovered}
+                            isChildListItem
                         />
                     ))}
                 </View>

src/components/SelectionList/Search/TransactionListItemRow.tsx

@@ -41,13 +41,18 @@ type ActionCellProps = {
     onButtonPress: () => void;
 } & CellProps;
 
+type TotalCellProps = {
+    isChildListItem: boolean;
+} & TransactionCellProps;
+
 type TransactionListItemRowProps = {
     item: TransactionListItemType;
     showTooltip: boolean;
     onButtonPress: () => void;
     showItemHeaderOnNarrowLayout?: boolean;
     containerStyle?: StyleProp<ViewStyle>;
     isHovered?: boolean;
+    isChildListItem?: boolean;
 };
 
 const getTypeIcon = (type?: SearchTransactionType) => {
@@ -112,15 +117,15 @@ function MerchantCell({transactionItem, showTooltip}: TransactionCellProps) {
     );
 }
 
-function TotalCell({showTooltip, isLargeScreenWidth, transactionItem}: TransactionCellProps) {
+function TotalCell({showTooltip, isLargeScreenWidth, transactionItem, isChildListItem}: TotalCellProps) {
     const styles = useThemeStyles();
     const currency = TransactionUtils.getCurrency(transactionItem);
 
     return (
         <TextWithTooltip
             shouldShowTooltip={showTooltip}
             text={CurrencyUtils.convertToDisplayString(transactionItem.formattedTotal, currency)}
-            style={[styles.optionDisplayName, styles.textNewKansasNormal, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight]}
+            style={[styles.optionDisplayName, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight, isChildListItem ? styles.label : undefined]}
         />
     );
 }
@@ -204,7 +209,15 @@ function TaxCell({transactionItem, showTooltip}: TransactionCellProps) {
     );
 }
 
-function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeaderOnNarrowLayout = true, containerStyle, isHovered = false}: TransactionListItemRowProps) {
+function TransactionListItemRow({
+    item,
+    showTooltip,
+    onButtonPress,
+    showItemHeaderOnNarrowLayout = true,
+    containerStyle,
+    isHovered = false,
+    isChildListItem = false,
+}: TransactionListItemRowProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isLargeScreenWidth} = useWindowDimensions();
@@ -255,6 +268,7 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                             showTooltip={showTooltip}
                             transactionItem={item}
                             isLargeScreenWidth={isLargeScreenWidth}
+                            isChildListItem={isChildListItem}
                         />
                         <View style={[styles.flexRow, styles.gap1, styles.justifyContentCenter]}>
                             <TypeCell
@@ -344,6 +358,7 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                         showTooltip={showTooltip}
                         transactionItem={item}
                         isLargeScreenWidth={isLargeScreenWidth}
+                        isChildListItem={isChildListItem}
                     />
                 </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TYPE)]}>

src/languages/es.ts

@@ -325,9 +325,9 @@ export default {
         action: 'Acción',
         expenses: 'Gastos',
         tax: 'Impuesto',
-        shared: 'Compartido',
+        shared: 'Compartidos',
         drafts: 'Borradores',
-        finished: 'Finalizado',
+        finished: 'Finalizados',
     },
     connectionComplete: {
         title: 'Conexión Completa',

src/styles/index.ts

@@ -4950,10 +4950,6 @@ const styles = (theme: ThemeColors) =>
             fontSize: variables.fontSizeNormal,
             fontWeight: FontUtils.fontWeight.bold,
         },
-
-        reportListItemActionButtonMargin: {
-            marginLeft: variables.searchTypeColumnWidth,
-        },
     } satisfies Styles);
 
 type ThemeStyles = ReturnType<typeof styles>;

src/types/onyx/SearchResults.ts

@@ -60,6 +60,9 @@ type SearchReport = {
     /** The report currency */
     currency?: string;
 
+    /** The report type */
+    type?: string;
+
     /** The action that can be performed for the report */
     action?: string;
 };