From 1e6ff814b07b699a51e4b144bd3ee5034b465513 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
Date: Fri, 31 May 2024 08:59:54 -0600
Subject: [PATCH 1/8] fix report total and alignment

---
 .../SelectionList/Search/ReportListItem.tsx           | 11 +++++++----
 src/styles/index.ts                                   |  4 ----
 src/types/onyx/SearchResults.ts                       |  3 +++
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index c1a38cf6e7cd..6e9b138884c7 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/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 === 'expense' ? -1 : 1) * reportItem?.total , 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]} />
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 7d4366b5723d..823e7051baf3 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4939,10 +4939,6 @@ const styles = (theme: ThemeColors) =>
             fontSize: variables.fontSizeNormal,
             fontWeight: FontUtils.fontWeight.bold,
         },
-
-        reportListItemActionButtonMargin: {
-            marginLeft: variables.searchTypeColumnWidth,
-        },
     } satisfies Styles);
 
 type ThemeStyles = ReturnType<typeof styles>;
diff --git a/src/types/onyx/SearchResults.ts b/src/types/onyx/SearchResults.ts
index 73cb5007e398..c7d63e95fd3d 100644
--- a/src/types/onyx/SearchResults.ts
+++ b/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;
 };

From 93d8a50be088cf13bb381afe42248e90271b64e8 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
Date: Fri, 31 May 2024 09:05:42 -0600
Subject: [PATCH 2/8] rm type and total calc

---
 src/components/SelectionList/Search/ReportListItem.tsx | 2 +-
 src/types/onyx/SearchResults.ts                        | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index 6e9b138884c7..78081e423e00 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -52,7 +52,7 @@ function ReportListItem<TItem extends ListItem>({
     const totalCell = (
         <TextWithTooltip
             shouldShowTooltip={showTooltip}
-            text={CurrencyUtils.convertToDisplayString((reportItem?.type === 'expense' ? -1 : 1) * reportItem?.total , reportItem?.currency)}
+            text={CurrencyUtils.convertToDisplayString(reportItem?.total , reportItem?.currency)}
             style={[styles.optionDisplayName, styles.textNewKansasNormal, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight]}
         />
     );
diff --git a/src/types/onyx/SearchResults.ts b/src/types/onyx/SearchResults.ts
index c7d63e95fd3d..73cb5007e398 100644
--- a/src/types/onyx/SearchResults.ts
+++ b/src/types/onyx/SearchResults.ts
@@ -60,9 +60,6 @@ type SearchReport = {
     /** The report currency */
     currency?: string;
 
-    /** The report type */
-    type?: string;
-
     /** The action that can be performed for the report */
     action?: string;
 };

From 7966a062016042989e90fcd4e14494036c82b9b2 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
Date: Fri, 31 May 2024 09:07:26 -0600
Subject: [PATCH 3/8] lint

---
 src/components/SelectionList/Search/ReportListItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index 78081e423e00..4d450796d056 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/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?.total, reportItem?.currency)}
             style={[styles.optionDisplayName, styles.textNewKansasNormal, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight]}
         />
     );

From 642baa4314fe5bb927f14054ab89aa3824dae5de Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
Date: Fri, 31 May 2024 09:54:27 -0600
Subject: [PATCH 4/8] calculate report total by type

---
 src/components/SelectionList/Search/ReportListItem.tsx | 2 +-
 src/types/onyx/SearchResults.ts                        | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index 4d450796d056..6c68f86c9f85 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/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]}
         />
     );
diff --git a/src/types/onyx/SearchResults.ts b/src/types/onyx/SearchResults.ts
index 73cb5007e398..c7d63e95fd3d 100644
--- a/src/types/onyx/SearchResults.ts
+++ b/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;
 };

From 145e79b3c969ac30ab0fed49ea4c59decf18cab8 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
Date: Fri, 31 May 2024 10:27:15 -0600
Subject: [PATCH 5/8] fix lint

---
 src/components/SelectionList/Search/ReportListItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index 6c68f86c9f85..f7f3002a68c4 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -52,7 +52,7 @@ function ReportListItem<TItem extends ListItem>({
     const totalCell = (
         <TextWithTooltip
             shouldShowTooltip={showTooltip}
-            text={CurrencyUtils.convertToDisplayString((reportItem?.type === CONST.REPORT.TYPE.EXPENSE ? - 1 : 1) * (reportItem?.total ?? 0), 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]}
         />
     );

From e50bf48dc93f4789b435014ca1e5682f7fd76e5c Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
Date: Mon, 3 Jun 2024 17:45:43 -0600
Subject: [PATCH 6/8] update copy

---
 src/languages/es.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/languages/es.ts b/src/languages/es.ts
index 92c1e3f30a1c..5380b324d5be 100644
--- a/src/languages/es.ts
+++ b/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',

From 719f3b5a7d4ea421eb45c1921b0f88973e7bc913 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
Date: Tue, 4 Jun 2024 09:46:03 -0600
Subject: [PATCH 7/8] update hild total style

---
 .../SelectionList/Search/ReportListItem.tsx         |  1 +
 .../SelectionList/Search/TransactionListItemRow.tsx | 13 ++++++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index f7f3002a68c4..cfd047ffd115 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -159,6 +159,7 @@ function ReportListItem<TItem extends ListItem>({
                             showItemHeaderOnNarrowLayout={false}
                             containerStyle={styles.mt3}
                             isHovered={hovered}
+                            isChildListItem
                         />
                     ))}
                 </View>
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index c0c1a9415b30..8d703ae53b15 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -41,6 +41,10 @@ type ActionCellProps = {
     onButtonPress: () => void;
 } & CellProps;
 
+type TotalCellProps = {
+    isChildListItem: boolean;
+} & TransactionCellProps;
+
 type TransactionListItemRowProps = {
     item: TransactionListItemType;
     showTooltip: boolean;
@@ -48,6 +52,7 @@ type TransactionListItemRowProps = {
     showItemHeaderOnNarrowLayout?: boolean;
     containerStyle?: StyleProp<ViewStyle>;
     isHovered?: boolean;
+    isChildListItem?: boolean;
 };
 
 const getTypeIcon = (type?: SearchTransactionType) => {
@@ -112,7 +117,7 @@ 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);
 
@@ -120,7 +125,7 @@ function TotalCell({showTooltip, isLargeScreenWidth, transactionItem}: Transacti
         <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,7 @@ 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 +260,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 +350,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)]}>

From bcfa1ef1439a67f5f00125549479388dd343ad40 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
Date: Tue, 4 Jun 2024 09:48:34 -0600
Subject: [PATCH 8/8] fix lint

---
 .../SelectionList/Search/TransactionListItemRow.tsx    | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index 8d703ae53b15..7a1fa8709c49 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -209,7 +209,15 @@ function TaxCell({transactionItem, showTooltip}: TransactionCellProps) {
     );
 }
 
-function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeaderOnNarrowLayout = true, containerStyle, isHovered = false, isChildListItem = false}: TransactionListItemRowProps) {
+function TransactionListItemRow({
+    item,
+    showTooltip,
+    onButtonPress,
+    showItemHeaderOnNarrowLayout = true,
+    containerStyle,
+    isHovered = false,
+    isChildListItem = false,
+}: TransactionListItemRowProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isLargeScreenWidth} = useWindowDimensions();