From 8300b62fda57b51c43d96d96408c88b13e479cb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Wed, 16 Jul 2025 12:43:09 +0200
Subject: [PATCH 01/42] Show report total and report status in the new report
 preview component

---
 .../MoneyRequestReportPreviewContent.tsx      | 103 +++++++++++++-----
 src/languages/en.ts                           |   1 +
 src/languages/es.ts                           |   1 +
 3 files changed, 80 insertions(+), 25 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 95d9a3c65c43..ed31eebd5d0b 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -72,6 +72,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {Transaction} from '@src/types/onyx';
 import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
+import { convertToDisplayString } from '@libs/CurrencyUtils';
 import EmptyMoneyRequestReportPreview from './EmptyMoneyRequestReportPreview';
 import type {MoneyRequestReportPreviewContentProps} from './types';
 
@@ -293,19 +294,53 @@ function MoneyRequestReportPreviewContent({
      * There is an edge case when there is only one distance expense with a pending route and amount = 0.
        In this case, we don't want to show the merchant or description because it says: "Pending route...", which is already displayed in the amount field.
      */
-    const {supportText} = useMemo(() => {
-        if (numberOfRequests === 1) {
-            return {
-                supportText: '',
-            };
-        }
+    const {expenseCountText} = useMemo(() => {
         return {
-            supportText: translate('iou.expenseCount', {
+            expenseCountText: translate('iou.expenseCount', {
                 count: numberOfRequests,
             }),
         };
     }, [translate, numberOfRequests]);
 
+    const isReportDeleted = action?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
+
+    // Nedded for the status in the subheader of the report preview
+    // ======================================
+    // State  |  Status | What to display?  |
+    // 0	  |  0	    | Draft             |   
+    // 1	  |  1	    | Outstanding       |
+    // 2	  |  2	    | Done              |
+    // 2	  |  3	    | Approved          |
+    // 2	  |  4	    | Paid              |
+    // 3	  |  4	    | Paid              |
+    // 6	  |  4	    | Paid              |
+    // ======================================
+    const {getReportStatus} = useMemo(() => {
+        if (iouReport?.stateNum === CONST.REPORT.STATE_NUM.OPEN && iouReport?.statusNum === CONST.REPORT.STATUS_NUM.OPEN) {
+            return {
+                getReportStatus: translate('common.draft'),
+            };
+        }
+        if (iouReport?.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && iouReport?.statusNum === CONST.REPORT.STATUS_NUM.SUBMITTED) {
+            return {
+                getReportStatus: translate('common.outstanding'),
+            };
+        }
+        if (iouReport?.stateNum === CONST.REPORT.STATE_NUM.APPROVED && iouReport?.statusNum === CONST.REPORT.STATUS_NUM.CLOSED) {
+            return {
+                getReportStatus: translate('common.done'),
+            };
+        }
+        if (iouReport?.stateNum === CONST.REPORT.STATE_NUM.APPROVED && iouReport?.statusNum === CONST.REPORT.STATUS_NUM.APPROVED) {
+            return {
+                getReportStatus: translate('iou.approved'),
+            };
+        }
+        return {
+            getReportStatus: translate('iou.settledExpensify'),
+        };
+    }, [translate, iouReport]);
+
     useEffect(() => {
         if (!isPaidAnimationRunning || isApprovedAnimationRunning) {
             return;
@@ -492,8 +527,6 @@ function MoneyRequestReportPreviewContent({
         [chatReportID, iouReport?.parentReportID, iouReport?.reportID, policy, translate],
     );
 
-    const isReportDeleted = action?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
-
     const reportPreviewActions = {
         [CONST.REPORT.REPORT_PREVIEW_ACTIONS.SUBMIT]: (
             <Button
@@ -644,7 +677,7 @@ function MoneyRequestReportPreviewContent({
                         >
                             <View style={[reportPreviewStyles.wrapperStyle]}>
                                 <View style={[reportPreviewStyles.contentContainerStyle]}>
-                                    <View style={[styles.expenseAndReportPreviewTextContainer, styles.overflowHidden]}>
+                                    <View style={[styles.expenseAndReportPreviewTextContainer, styles.overflowHidden, styles.mbn1]}>
                                         <View style={[styles.flexRow, styles.justifyContentBetween, styles.gap3, StyleUtils.getMinimumHeight(variables.h28)]}>
                                             <View style={[styles.flexRow, styles.mw100, styles.flexShrink1]}>
                                                 <Animated.View style={[styles.flexRow, styles.alignItemsCenter, previewMessageStyle, styles.flexShrink1]}>
@@ -671,7 +704,7 @@ function MoneyRequestReportPreviewContent({
                                             </View>
                                             {!shouldUseNarrowLayout && transactions.length > 2 && reportPreviewStyles.expenseCountVisible && (
                                                 <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                                    <Text style={[styles.textLabelSupporting, styles.textLabelSupporting, styles.lh20, styles.mr1]}>{supportText}</Text>
+                                                    {/* <Text style={[styles.textLabelSupporting, styles.textLabelSupporting, styles.lh20, styles.mr1]}>{expenseCountText}</Text> */}
                                                     <PressableWithFeedback
                                                         accessibilityRole="button"
                                                         accessible
@@ -712,6 +745,18 @@ function MoneyRequestReportPreviewContent({
                                             )}
                                         </View>
                                     </View>
+
+                                    {/* Subheader with status and count */}
+                                    <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.mtn2, styles.mb1]}>
+                                        <Text
+                                            style={[styles.textLabelSupporting, styles.lh16, styles.mt0]}
+                                            numberOfLines={1}
+                                            testID = "MoneyRequestReportPreview-statusAndCount"
+                                        >
+                                            {`${getReportStatus} • ${expenseCountText}`}
+                                        </Text>
+                                    </View>
+
                                     {!currentWidth || shouldShowLoading || shouldShowLoadingDeferred ? (
                                         <View
                                             style={[
@@ -755,21 +800,29 @@ function MoneyRequestReportPreviewContent({
                                             {shouldShowEmptyPlaceholder && <EmptyMoneyRequestReportPreview emptyReportPreviewAction={reportPreviewActions[reportPreviewAction]} />}
                                         </View>
                                     )}
-                                    {shouldUseNarrowLayout && transactions.length > 1 && (
-                                        <View style={[styles.flexRow, styles.alignSelfCenter, styles.gap2]}>
-                                            {carouselTransactions.map((item, index) => (
-                                                <PressableWithFeedback
-                                                    accessibilityRole="button"
-                                                    accessible
-                                                    accessibilityLabel="button"
-                                                    style={[styles.reportPreviewCarouselDots, {backgroundColor: index === currentIndex ? theme.icon : theme.buttonDefaultBG}]}
-                                                    onPress={() => handleChange(index)}
-                                                />
-                                            ))}
+                                    <View style={[styles.expenseAndReportPreviewTextContainer, styles.overflowHidden]}>
+                                        <View style={[shouldUseNarrowLayout ? styles.flexColumnReverse : styles.flexRow, shouldUseNarrowLayout ? styles.alignItemsStretch : styles.alignItemsBaseline, styles.justifyContentBetween, styles.gap3, StyleUtils.getMinimumHeight(variables.h28)]}>
+                                            {/* height is needed to avoid flickering on animation */}
+                                            {!shouldShowEmptyPlaceholder && <View style={[buttonMaxWidth, styles.flex1, {height: variables.h40}]}>{reportPreviewActions[reportPreviewAction]}</View>}
+                                            {transactions.length > 1 &&(
+                                                <View style={[styles.flexRow, shouldUseNarrowLayout ? styles.justifyContentBetween : styles.gap2, styles.alignItemsBaseline]}>
+
+                                                    <Text
+                                                        style={[styles.textLabelSupporting]}
+                                                        numberOfLines={1}
+                                                    >
+                                                        Total
+                                                    </Text>
+                                                    <Text
+                                                        style={[styles.headerText]}
+                                                        testID="MoneyRequestReportPreview-currencyAndAmount"
+                                                    >
+                                                        {convertToDisplayString(totalDisplaySpend, iouReport?.currency)}
+                                                    </Text>
+                                                </View>
+                                            )}
                                         </View>
-                                    )}
-                                    {/* height is needed to avoid flickering on animation */}
-                                    {!shouldShowEmptyPlaceholder && <View style={[buttonMaxWidth, {height: variables.h40}]}>{reportPreviewActions[reportPreviewAction]}</View>}
+                                    </View>
                                 </View>
                             </View>
                         </View>
diff --git a/src/languages/en.ts b/src/languages/en.ts
index a79f01e124dc..016d0b4dc16f 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -536,6 +536,7 @@ const translations = {
         tax: 'Tax',
         shared: 'Shared',
         drafts: 'Drafts',
+        draft: 'Draft',
         finished: 'Finished',
         upgrade: 'Upgrade',
         downgradeWorkspace: 'Downgrade workspace',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index f69909c45fac..a2fb2627bc45 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -529,6 +529,7 @@ const translations = {
         tax: 'Impuesto',
         shared: 'Compartidos',
         drafts: 'Borradores',
+        draft: 'Borrador',
         finished: 'Finalizados',
         upgrade: 'Mejora',
         downgradeWorkspace: 'Desmejora tu espacio de trabajo',

From 461eb5c66ac43bb9e15e3ef3bca717f41ec2d7c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Wed, 16 Jul 2025 14:36:55 +0200
Subject: [PATCH 02/42] Small fixes to the comments

---
 .../MoneyRequestReportPreviewContent.tsx      | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index ed31eebd5d0b..43ab2037e2c2 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -305,16 +305,16 @@ function MoneyRequestReportPreviewContent({
     const isReportDeleted = action?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
 
     // Nedded for the status in the subheader of the report preview
-    // ======================================
-    // State  |  Status | What to display?  |
-    // 0	  |  0	    | Draft             |   
-    // 1	  |  1	    | Outstanding       |
-    // 2	  |  2	    | Done              |
-    // 2	  |  3	    | Approved          |
-    // 2	  |  4	    | Paid              |
-    // 3	  |  4	    | Paid              |
-    // 6	  |  4	    | Paid              |
-    // ======================================
+    // ============================================
+    // State    |   Status  |   What to display?  |
+    // 0	    |   0	    |   Draft             |
+    // 1	    |   1	    |   Outstanding       |
+    // 2	    |   2	    |   Done              |
+    // 2	    |   3	    |   Approved          |
+    // 2	    |   4	    |   Paid              |
+    // 3	    |   4	    |   Paid              |
+    // 6	    |   4	    |   Paid              |
+    // ============================================
     const {getReportStatus} = useMemo(() => {
         if (iouReport?.stateNum === CONST.REPORT.STATE_NUM.OPEN && iouReport?.statusNum === CONST.REPORT.STATUS_NUM.OPEN) {
             return {

From f869b7f9b16d98868af4655e7ae14cbbf30f18c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Wed, 16 Jul 2025 15:48:47 +0200
Subject: [PATCH 03/42] Small code cleanup in the
 MoneyRequestReportPreviewContent.tsx component

---
 .../MoneyRequestReportPreviewContent.tsx      | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 43ab2037e2c2..9d8ac70a31ae 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -302,19 +302,17 @@ function MoneyRequestReportPreviewContent({
         };
     }, [translate, numberOfRequests]);
 
-    const isReportDeleted = action?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
-
     // Nedded for the status in the subheader of the report preview
-    // ============================================
-    // State    |   Status  |   What to display?  |
-    // 0	    |   0	    |   Draft             |
-    // 1	    |   1	    |   Outstanding       |
-    // 2	    |   2	    |   Done              |
-    // 2	    |   3	    |   Approved          |
-    // 2	    |   4	    |   Paid              |
-    // 3	    |   4	    |   Paid              |
-    // 6	    |   4	    |   Paid              |
-    // ============================================
+    // ========================================
+    // State  |  Status  |  What to display?  |
+    // 0	  |  0	     |  Draft             |   
+    // 1	  |  1	     |  Outstanding       |
+    // 2	  |  2	     |  Done              |
+    // 2	  |  3	     |  Approved          |
+    // 2	  |  4	     |  Paid              |
+    // 3	  |  4	     |  Paid              |
+    // 6	  |  4	     |  Paid              |
+    // ========================================
     const {getReportStatus} = useMemo(() => {
         if (iouReport?.stateNum === CONST.REPORT.STATE_NUM.OPEN && iouReport?.statusNum === CONST.REPORT.STATUS_NUM.OPEN) {
             return {
@@ -527,6 +525,8 @@ function MoneyRequestReportPreviewContent({
         [chatReportID, iouReport?.parentReportID, iouReport?.reportID, policy, translate],
     );
 
+    const isReportDeleted = action?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
+
     const reportPreviewActions = {
         [CONST.REPORT.REPORT_PREVIEW_ACTIONS.SUBMIT]: (
             <Button
@@ -704,7 +704,6 @@ function MoneyRequestReportPreviewContent({
                                             </View>
                                             {!shouldUseNarrowLayout && transactions.length > 2 && reportPreviewStyles.expenseCountVisible && (
                                                 <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                                    {/* <Text style={[styles.textLabelSupporting, styles.textLabelSupporting, styles.lh20, styles.mr1]}>{expenseCountText}</Text> */}
                                                     <PressableWithFeedback
                                                         accessibilityRole="button"
                                                         accessible

From fc314cac4563b0dd703bada2ca4a427799140564 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Wed, 16 Jul 2025 18:33:06 +0200
Subject: [PATCH 04/42] Updating code style after running prettier

---
 .../MoneyRequestReportPreviewContent.tsx      | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 9d8ac70a31ae..60c7f4d759cf 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -30,6 +30,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {openUnreportedExpense} from '@libs/actions/Report';
 import ControlSelection from '@libs/ControlSelection';
+import {convertToDisplayString} from '@libs/CurrencyUtils';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import {getTotalAmountForIOUReportPreviewButton} from '@libs/MoneyRequestReportUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -72,7 +73,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {Transaction} from '@src/types/onyx';
 import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
-import { convertToDisplayString } from '@libs/CurrencyUtils';
 import EmptyMoneyRequestReportPreview from './EmptyMoneyRequestReportPreview';
 import type {MoneyRequestReportPreviewContentProps} from './types';
 
@@ -305,7 +305,7 @@ function MoneyRequestReportPreviewContent({
     // Nedded for the status in the subheader of the report preview
     // ========================================
     // State  |  Status  |  What to display?  |
-    // 0	  |  0	     |  Draft             |   
+    // 0	  |  0	     |  Draft             |
     // 1	  |  1	     |  Outstanding       |
     // 2	  |  2	     |  Done              |
     // 2	  |  3	     |  Approved          |
@@ -750,7 +750,7 @@ function MoneyRequestReportPreviewContent({
                                         <Text
                                             style={[styles.textLabelSupporting, styles.lh16, styles.mt0]}
                                             numberOfLines={1}
-                                            testID = "MoneyRequestReportPreview-statusAndCount"
+                                            testID="MoneyRequestReportPreview-statusAndCount"
                                         >
                                             {`${getReportStatus} • ${expenseCountText}`}
                                         </Text>
@@ -800,12 +800,21 @@ function MoneyRequestReportPreviewContent({
                                         </View>
                                     )}
                                     <View style={[styles.expenseAndReportPreviewTextContainer, styles.overflowHidden]}>
-                                        <View style={[shouldUseNarrowLayout ? styles.flexColumnReverse : styles.flexRow, shouldUseNarrowLayout ? styles.alignItemsStretch : styles.alignItemsBaseline, styles.justifyContentBetween, styles.gap3, StyleUtils.getMinimumHeight(variables.h28)]}>
+                                        <View
+                                            style={[
+                                                shouldUseNarrowLayout ? styles.flexColumnReverse : styles.flexRow,
+                                                shouldUseNarrowLayout ? styles.alignItemsStretch : styles.alignItemsBaseline,
+                                                styles.justifyContentBetween,
+                                                styles.gap3,
+                                                StyleUtils.getMinimumHeight(variables.h28),
+                                            ]}
+                                        >
                                             {/* height is needed to avoid flickering on animation */}
-                                            {!shouldShowEmptyPlaceholder && <View style={[buttonMaxWidth, styles.flex1, {height: variables.h40}]}>{reportPreviewActions[reportPreviewAction]}</View>}
-                                            {transactions.length > 1 &&(
+                                            {!shouldShowEmptyPlaceholder && (
+                                                <View style={[buttonMaxWidth, styles.flex1, {height: variables.h40}]}>{reportPreviewActions[reportPreviewAction]}</View>
+                                            )}
+                                            {transactions.length > 1 && (
                                                 <View style={[styles.flexRow, shouldUseNarrowLayout ? styles.justifyContentBetween : styles.gap2, styles.alignItemsBaseline]}>
-
                                                     <Text
                                                         style={[styles.textLabelSupporting]}
                                                         numberOfLines={1}

From ebc481731c00e4dd8f8f00c2628d984da3922041 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Thu, 17 Jul 2025 10:31:15 +0200
Subject: [PATCH 05/42] Code adjusted to PR comments

---
 .../MoneyRequestReportPreviewContent.tsx      | 52 +++----------------
 src/libs/ReportUtils.ts                       | 37 +++++++++++++
 2 files changed, 44 insertions(+), 45 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 60c7f4d759cf..68dbc09c2d02 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -59,6 +59,7 @@ import {
     isSettled,
     isTripRoom as isTripRoomReportUtils,
     isWaitingForSubmissionFromCurrentUser as isWaitingForSubmissionFromCurrentUserReportUtils,
+    getReportStatus,
 } from '@libs/ReportUtils';
 import shouldAdjustScroll from '@libs/shouldAdjustScroll';
 import {shouldRestrictUserBillableActions} from '@libs/SubscriptionUtils';
@@ -294,50 +295,11 @@ function MoneyRequestReportPreviewContent({
      * There is an edge case when there is only one distance expense with a pending route and amount = 0.
        In this case, we don't want to show the merchant or description because it says: "Pending route...", which is already displayed in the amount field.
      */
-    const {expenseCountText} = useMemo(() => {
-        return {
-            expenseCountText: translate('iou.expenseCount', {
-                count: numberOfRequests,
-            }),
-        };
-    }, [translate, numberOfRequests]);
-
-    // Nedded for the status in the subheader of the report preview
-    // ========================================
-    // State  |  Status  |  What to display?  |
-    // 0	  |  0	     |  Draft             |
-    // 1	  |  1	     |  Outstanding       |
-    // 2	  |  2	     |  Done              |
-    // 2	  |  3	     |  Approved          |
-    // 2	  |  4	     |  Paid              |
-    // 3	  |  4	     |  Paid              |
-    // 6	  |  4	     |  Paid              |
-    // ========================================
-    const {getReportStatus} = useMemo(() => {
-        if (iouReport?.stateNum === CONST.REPORT.STATE_NUM.OPEN && iouReport?.statusNum === CONST.REPORT.STATUS_NUM.OPEN) {
-            return {
-                getReportStatus: translate('common.draft'),
-            };
-        }
-        if (iouReport?.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && iouReport?.statusNum === CONST.REPORT.STATUS_NUM.SUBMITTED) {
-            return {
-                getReportStatus: translate('common.outstanding'),
-            };
-        }
-        if (iouReport?.stateNum === CONST.REPORT.STATE_NUM.APPROVED && iouReport?.statusNum === CONST.REPORT.STATUS_NUM.CLOSED) {
-            return {
-                getReportStatus: translate('common.done'),
-            };
-        }
-        if (iouReport?.stateNum === CONST.REPORT.STATE_NUM.APPROVED && iouReport?.statusNum === CONST.REPORT.STATUS_NUM.APPROVED) {
-            return {
-                getReportStatus: translate('iou.approved'),
-            };
-        }
-        return {
-            getReportStatus: translate('iou.settledExpensify'),
-        };
-    }, [translate, iouReport]);
+    const expenseCount = useMemo(() => translate('iou.expenseCount', {
+        count: numberOfRequests,
+    }), [translate, numberOfRequests]);
+
+    const reportStatus = useMemo(() => getReportStatus(iouReport), [iouReport]);
 
     useEffect(() => {
         if (!isPaidAnimationRunning || isApprovedAnimationRunning) {
@@ -752,7 +714,7 @@ function MoneyRequestReportPreviewContent({
                                             numberOfLines={1}
                                             testID="MoneyRequestReportPreview-statusAndCount"
                                         >
-                                            {`${getReportStatus} • ${expenseCountText}`}
+                                            {`${reportStatus} • ${expenseCount}`}
                                         </Text>
                                     </View>
 
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index fe78c181f52d..1322e47b81fa 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -11125,6 +11125,42 @@ function getMoneyReportPreviewName(action: ReportAction, iouReport: OnyxEntry<Re
     return getReportName(iouReport) || action.childReportName;
 }
 
+/**
+ * Returns the current status of the report based on its state and status numbers.
+ * The status is determined by the stateNum and statusNum of the report.
+ * The mapping is as follows:
+ * ========================================
+ * State  |  Status  |  What to display?  |
+ * 0	  |  0	     |  Draft             |
+ * 1	  |  1	     |  Outstanding       |
+ * 2	  |  2	     |  Done              |
+ * 2	  |  3	     |  Approved          |
+ * 2	  |  4	     |  Paid              |
+ * 3	  |  4	     |  Paid              |
+ * ========================================
+ */
+function getReportStatus(report?: Report) {
+    if (report?.stateNum === CONST.REPORT.STATE_NUM.OPEN && report?.statusNum === CONST.REPORT.STATUS_NUM.OPEN) {
+        return translateLocal('common.draft');
+    }
+    if (report?.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && report?.statusNum === CONST.REPORT.STATUS_NUM.SUBMITTED) {
+        return translateLocal('common.outstanding');
+    }
+    if (report?.stateNum === CONST.REPORT.STATE_NUM.APPROVED && report?.statusNum === CONST.REPORT.STATUS_NUM.CLOSED) {
+        return translateLocal('common.done');
+    }
+    if (report?.stateNum === CONST.REPORT.STATE_NUM.APPROVED && report?.statusNum === CONST.REPORT.STATUS_NUM.APPROVED) {
+        return translateLocal('iou.approved');
+    }
+    if (
+        (report?.stateNum === CONST.REPORT.STATE_NUM.APPROVED && report?.statusNum === CONST.REPORT.STATUS_NUM.REIMBURSED) || 
+        (report?.stateNum === CONST.REPORT.STATE_NUM.BILLING && report?.statusNum === CONST.REPORT.STATUS_NUM.REIMBURSED)
+    ) {
+        return translateLocal('iou.settledExpensify');
+    }
+    return ('');
+};
+
 export {
     addDomainToShortMention,
     completeShortMention,
@@ -11504,6 +11540,7 @@ export {
     getNextApproverAccountID,
     isWorkspaceTaskReport,
     isWorkspaceThread,
+    getReportStatus,
 };
 
 export type {

From 0aaa2b9befb1072a2c68446e164bc30defb164f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Thu, 17 Jul 2025 10:56:57 +0200
Subject: [PATCH 06/42] Commit after prettier changes

---
 .../MoneyRequestReportPreviewContent.tsx             | 12 ++++++++----
 src/libs/ReportUtils.ts                              |  6 +++---
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 68dbc09c2d02..46d1db70a73c 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -46,6 +46,7 @@ import {
     getMoneyRequestSpendBreakdown,
     getNonHeldAndFullAmount,
     getPolicyName,
+    getReportStatus,
     getTransactionsWithReceipts,
     hasHeldExpenses as hasHeldExpensesReportUtils,
     hasNonReimbursableTransactions as hasNonReimbursableTransactionsReportUtils,
@@ -59,7 +60,6 @@ import {
     isSettled,
     isTripRoom as isTripRoomReportUtils,
     isWaitingForSubmissionFromCurrentUser as isWaitingForSubmissionFromCurrentUserReportUtils,
-    getReportStatus,
 } from '@libs/ReportUtils';
 import shouldAdjustScroll from '@libs/shouldAdjustScroll';
 import {shouldRestrictUserBillableActions} from '@libs/SubscriptionUtils';
@@ -295,9 +295,13 @@ function MoneyRequestReportPreviewContent({
      * There is an edge case when there is only one distance expense with a pending route and amount = 0.
        In this case, we don't want to show the merchant or description because it says: "Pending route...", which is already displayed in the amount field.
      */
-    const expenseCount = useMemo(() => translate('iou.expenseCount', {
-        count: numberOfRequests,
-    }), [translate, numberOfRequests]);
+    const expenseCount = useMemo(
+        () =>
+            translate('iou.expenseCount', {
+                count: numberOfRequests,
+            }),
+        [translate, numberOfRequests],
+    );
 
     const reportStatus = useMemo(() => getReportStatus(iouReport), [iouReport]);
 
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 1322e47b81fa..aee867d88b0f 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -11153,13 +11153,13 @@ function getReportStatus(report?: Report) {
         return translateLocal('iou.approved');
     }
     if (
-        (report?.stateNum === CONST.REPORT.STATE_NUM.APPROVED && report?.statusNum === CONST.REPORT.STATUS_NUM.REIMBURSED) || 
+        (report?.stateNum === CONST.REPORT.STATE_NUM.APPROVED && report?.statusNum === CONST.REPORT.STATUS_NUM.REIMBURSED) ||
         (report?.stateNum === CONST.REPORT.STATE_NUM.BILLING && report?.statusNum === CONST.REPORT.STATUS_NUM.REIMBURSED)
     ) {
         return translateLocal('iou.settledExpensify');
     }
-    return ('');
-};
+    return '';
+}
 
 export {
     addDomainToShortMention,

From 6b4af2a1f54f1dfec946bfba511d0c6edf83161b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Thu, 17 Jul 2025 11:58:09 +0200
Subject: [PATCH 07/42] Fixing typecheck in languages

---
 src/languages/de.ts      | 1 +
 src/languages/fr.ts      | 1 +
 src/languages/it.ts      | 1 +
 src/languages/ja.ts      | 1 +
 src/languages/nl.ts      | 1 +
 src/languages/pl.ts      | 1 +
 src/languages/pt-BR.ts   | 1 +
 src/languages/zh-hans.ts | 1 +
 8 files changed, 8 insertions(+)

diff --git a/src/languages/de.ts b/src/languages/de.ts
index 222fe43ab307..b8cb212a3ca2 100644
--- a/src/languages/de.ts
+++ b/src/languages/de.ts
@@ -545,6 +545,7 @@ const translations = {
         tax: 'Steuer',
         shared: 'Geteilt',
         drafts: 'Entwürfe',
+        draft: 'Entwurf',
         finished: 'Fertiggestellt',
         upgrade: 'Upgrade',
         downgradeWorkspace: 'Arbeitsbereich herabstufen',
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
index dbe4d5b86c64..1e6c59ea6cce 100644
--- a/src/languages/fr.ts
+++ b/src/languages/fr.ts
@@ -545,6 +545,7 @@ const translations = {
         tax: 'Taxe',
         shared: 'Partagé',
         drafts: 'Brouillons',
+        draft: 'Brouillon',
         finished: 'Terminé',
         upgrade: 'Mise à niveau',
         downgradeWorkspace: "Rétrograder l'espace de travail",
diff --git a/src/languages/it.ts b/src/languages/it.ts
index dc6864afdd48..b27df4716813 100644
--- a/src/languages/it.ts
+++ b/src/languages/it.ts
@@ -545,6 +545,7 @@ const translations = {
         tax: 'Tassa',
         shared: 'Condiviso',
         drafts: 'Bozze',
+        draft: 'Bozza',
         finished: 'Finito',
         upgrade: 'Aggiorna',
         downgradeWorkspace: 'Declassa spazio di lavoro',
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
index 6b4770476f84..ac38e8c6c2c8 100644
--- a/src/languages/ja.ts
+++ b/src/languages/ja.ts
@@ -545,6 +545,7 @@ const translations = {
         tax: '税金',
         shared: '共有',
         drafts: '下書き',
+        draft: 'ドラフト',
         finished: '完了',
         upgrade: 'アップグレード',
         downgradeWorkspace: 'ワークスペースをダウングレードする',
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
index 9a9fecfc7f72..fd0760d6e9be 100644
--- a/src/languages/nl.ts
+++ b/src/languages/nl.ts
@@ -545,6 +545,7 @@ const translations = {
         tax: 'Belasting',
         shared: 'Gedeeld',
         drafts: 'Concepten',
+        draft: 'Ontwerp',
         finished: 'Voltooid',
         upgrade: 'Upgrade',
         downgradeWorkspace: 'Werkruimte downgraden',
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
index dd94fa9fa7af..6ded229d3da1 100644
--- a/src/languages/pl.ts
+++ b/src/languages/pl.ts
@@ -545,6 +545,7 @@ const translations = {
         tax: 'Podatek',
         shared: 'Udostępnione',
         drafts: 'Szkice',
+        draft: 'Szkic',
         finished: 'Zakończono',
         upgrade: 'Ulepszanie',
         downgradeWorkspace: 'Obniż poziom przestrzeni roboczej',
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
index 878e7eebcda5..94f8d956eb04 100644
--- a/src/languages/pt-BR.ts
+++ b/src/languages/pt-BR.ts
@@ -545,6 +545,7 @@ const translations = {
         tax: 'Imposto',
         shared: 'Compartilhado',
         drafts: 'Rascunhos',
+        draft: 'Rascunho',
         finished: 'Concluído',
         upgrade: 'Atualizar',
         downgradeWorkspace: 'Reduzir espaço de trabalho',
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
index 997642d02fe7..8742cadcfef6 100644
--- a/src/languages/zh-hans.ts
+++ b/src/languages/zh-hans.ts
@@ -545,6 +545,7 @@ const translations = {
         tax: '税务',
         shared: '共享',
         drafts: '草稿',
+        draft: '草稿',
         finished: '完成',
         upgrade: '升级',
         downgradeWorkspace: '降级工作区',

From 399c57422c8ecd635f29cfa9eed9262a1a2f179f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Thu, 17 Jul 2025 16:09:41 +0200
Subject: [PATCH 08/42] Small style cleanup

---
 .../MoneyRequestReportPreviewContent.tsx                        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 46d1db70a73c..a8dc8127c014 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -714,7 +714,7 @@ function MoneyRequestReportPreviewContent({
                                     {/* Subheader with status and count */}
                                     <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.mtn2, styles.mb1]}>
                                         <Text
-                                            style={[styles.textLabelSupporting, styles.lh16, styles.mt0]}
+                                            style={[styles.textLabelSupporting, styles.lh16]}
                                             numberOfLines={1}
                                             testID="MoneyRequestReportPreview-statusAndCount"
                                         >

From 2edf3e6ea5279112c4d6be00fb07e4660ce5ad01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Fri, 18 Jul 2025 09:36:01 +0200
Subject: [PATCH 09/42] Update src/libs/ReportUtils.ts

Co-authored-by: Mateusz Titz <titzmateusz@gmail.com>
---
 src/libs/ReportUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index aee867d88b0f..b6bb78682d31 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -11126,7 +11126,7 @@ function getMoneyReportPreviewName(action: ReportAction, iouReport: OnyxEntry<Re
 }
 
 /**
- * Returns the current status of the report based on its state and status numbers.
+ * Returns the translated, human-readable status of the report based on its state and status values.
  * The status is determined by the stateNum and statusNum of the report.
  * The mapping is as follows:
  * ========================================

From 8e8c3d3e0ab3f356242eae1a7c9ffffe8692c4df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Fri, 18 Jul 2025 09:55:36 +0200
Subject: [PATCH 10/42] Resolving comments pointed out by @Kicu in review

---
 .../MoneyRequestReportPreviewContent.tsx        | 17 +++++++----------
 src/libs/ReportUtils.ts                         | 10 ++++++----
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index a8dc8127c014..4a3c29a4c3f9 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -46,7 +46,7 @@ import {
     getMoneyRequestSpendBreakdown,
     getNonHeldAndFullAmount,
     getPolicyName,
-    getReportStatus,
+    getReportStatusTranslation,
     getTransactionsWithReceipts,
     hasHeldExpenses as hasHeldExpensesReportUtils,
     hasNonReimbursableTransactions as hasNonReimbursableTransactionsReportUtils,
@@ -303,7 +303,9 @@ function MoneyRequestReportPreviewContent({
         [translate, numberOfRequests],
     );
 
-    const reportStatus = useMemo(() => getReportStatus(iouReport), [iouReport]);
+    const reportStatus = useMemo(() => getReportStatusTranslation(iouReport), [iouReport]);
+
+    const totalAmountStyle = shouldUseNarrowLayout ? [styles.flexColumnReverse, styles.alignItemsStretch] : [styles.flexRow, styles.alignItemsBaseline];
 
     useEffect(() => {
         if (!isPaidAnimationRunning || isApprovedAnimationRunning) {
@@ -710,18 +712,15 @@ function MoneyRequestReportPreviewContent({
                                             )}
                                         </View>
                                     </View>
-
-                                    {/* Subheader with status and count */}
                                     <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.mtn2, styles.mb1]}>
                                         <Text
                                             style={[styles.textLabelSupporting, styles.lh16]}
                                             numberOfLines={1}
                                             testID="MoneyRequestReportPreview-statusAndCount"
                                         >
-                                            {`${reportStatus} • ${expenseCount}`}
+                                            {`${reportStatus} ${CONST.DOT_SEPARATOR} ${expenseCount}`}
                                         </Text>
                                     </View>
-
                                     {!currentWidth || shouldShowLoading || shouldShowLoadingDeferred ? (
                                         <View
                                             style={[
@@ -765,11 +764,10 @@ function MoneyRequestReportPreviewContent({
                                             {shouldShowEmptyPlaceholder && <EmptyMoneyRequestReportPreview emptyReportPreviewAction={reportPreviewActions[reportPreviewAction]} />}
                                         </View>
                                     )}
-                                    <View style={[styles.expenseAndReportPreviewTextContainer, styles.overflowHidden]}>
+                                    <View style={[styles.expenseAndReportPreviewTextContainer]}>
                                         <View
                                             style={[
-                                                shouldUseNarrowLayout ? styles.flexColumnReverse : styles.flexRow,
-                                                shouldUseNarrowLayout ? styles.alignItemsStretch : styles.alignItemsBaseline,
+                                                totalAmountStyle,
                                                 styles.justifyContentBetween,
                                                 styles.gap3,
                                                 StyleUtils.getMinimumHeight(variables.h28),
@@ -789,7 +787,6 @@ function MoneyRequestReportPreviewContent({
                                                     </Text>
                                                     <Text
                                                         style={[styles.headerText]}
-                                                        testID="MoneyRequestReportPreview-currencyAndAmount"
                                                     >
                                                         {convertToDisplayString(totalDisplaySpend, iouReport?.currency)}
                                                     </Text>
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index aee867d88b0f..3279aa0550f9 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -11126,7 +11126,7 @@ function getMoneyReportPreviewName(action: ReportAction, iouReport: OnyxEntry<Re
 }
 
 /**
- * Returns the current status of the report based on its state and status numbers.
+ * Returns the translated, human-readable status of the report based on its state and status values.
  * The status is determined by the stateNum and statusNum of the report.
  * The mapping is as follows:
  * ========================================
@@ -11139,7 +11139,10 @@ function getMoneyReportPreviewName(action: ReportAction, iouReport: OnyxEntry<Re
  * 3	  |  4	     |  Paid              |
  * ========================================
  */
-function getReportStatus(report?: Report) {
+function getReportStatusTranslation(report?: Report) {
+    if (!report) {
+        return '';
+    }
     if (report?.stateNum === CONST.REPORT.STATE_NUM.OPEN && report?.statusNum === CONST.REPORT.STATUS_NUM.OPEN) {
         return translateLocal('common.draft');
     }
@@ -11158,7 +11161,6 @@ function getReportStatus(report?: Report) {
     ) {
         return translateLocal('iou.settledExpensify');
     }
-    return '';
 }
 
 export {
@@ -11540,7 +11542,7 @@ export {
     getNextApproverAccountID,
     isWorkspaceTaskReport,
     isWorkspaceThread,
-    getReportStatus,
+    getReportStatusTranslation,
 };
 
 export type {

From 12fd5aa1631dd71f4e1aaf4b6f970efe54b44497 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Fri, 18 Jul 2025 11:17:41 +0200
Subject: [PATCH 11/42] Removing testID from subheader

---
 .../MoneyRequestReportPreviewContent.tsx                      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 4a3c29a4c3f9..0ff0352a7708 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -646,7 +646,7 @@ function MoneyRequestReportPreviewContent({
                             <View style={[reportPreviewStyles.wrapperStyle]}>
                                 <View style={[reportPreviewStyles.contentContainerStyle]}>
                                     <View style={[styles.expenseAndReportPreviewTextContainer, styles.overflowHidden, styles.mbn1]}>
-                                        <View style={[styles.flexRow, styles.justifyContentBetween, styles.gap3, StyleUtils.getMinimumHeight(variables.h28)]}>
+                                        <View style={[styles.flexRow, styles.justifyContentBetween, styles.gap3]}>
                                             <View style={[styles.flexRow, styles.mw100, styles.flexShrink1]}>
                                                 <Animated.View style={[styles.flexRow, styles.alignItemsCenter, previewMessageStyle, styles.flexShrink1]}>
                                                     <Text
@@ -769,7 +769,7 @@ function MoneyRequestReportPreviewContent({
                                             style={[
                                                 totalAmountStyle,
                                                 styles.justifyContentBetween,
-                                                styles.gap3,
+                                                styles.gap4,
                                                 StyleUtils.getMinimumHeight(variables.h28),
                                             ]}
                                         >

From 19649f6656d4109a32ee438687e4702bec781aae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Fri, 18 Jul 2025 11:44:23 +0200
Subject: [PATCH 12/42] Removed min-height from the report title

---
 .../MoneyRequestReportPreviewContent.tsx                         | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 0ff0352a7708..47145246bd85 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -716,7 +716,6 @@ function MoneyRequestReportPreviewContent({
                                         <Text
                                             style={[styles.textLabelSupporting, styles.lh16]}
                                             numberOfLines={1}
-                                            testID="MoneyRequestReportPreview-statusAndCount"
                                         >
                                             {`${reportStatus} ${CONST.DOT_SEPARATOR} ${expenseCount}`}
                                         </Text>

From 38cfcd4bd76a7e9b6adca6467fd9ca710b6c1e3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Fri, 18 Jul 2025 11:56:17 +0200
Subject: [PATCH 13/42] Changes after running prettier

---
 .../MoneyRequestReportPreviewContent.tsx          | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 47145246bd85..d14d8bc4170f 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -764,14 +764,7 @@ function MoneyRequestReportPreviewContent({
                                         </View>
                                     )}
                                     <View style={[styles.expenseAndReportPreviewTextContainer]}>
-                                        <View
-                                            style={[
-                                                totalAmountStyle,
-                                                styles.justifyContentBetween,
-                                                styles.gap4,
-                                                StyleUtils.getMinimumHeight(variables.h28),
-                                            ]}
-                                        >
+                                        <View style={[totalAmountStyle, styles.justifyContentBetween, styles.gap4, StyleUtils.getMinimumHeight(variables.h28)]}>
                                             {/* height is needed to avoid flickering on animation */}
                                             {!shouldShowEmptyPlaceholder && (
                                                 <View style={[buttonMaxWidth, styles.flex1, {height: variables.h40}]}>{reportPreviewActions[reportPreviewAction]}</View>
@@ -784,11 +777,7 @@ function MoneyRequestReportPreviewContent({
                                                     >
                                                         Total
                                                     </Text>
-                                                    <Text
-                                                        style={[styles.headerText]}
-                                                    >
-                                                        {convertToDisplayString(totalDisplaySpend, iouReport?.currency)}
-                                                    </Text>
+                                                    <Text style={[styles.headerText]}>{convertToDisplayString(totalDisplaySpend, iouReport?.currency)}</Text>
                                                 </View>
                                             )}
                                         </View>

From dfd6f8d0671131d9ec61f9e1e30f929462ab7c6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Fri, 18 Jul 2025 13:22:56 +0200
Subject: [PATCH 14/42] Added skeleton for the subheader

---
 .../MoneyRequestReportPreviewContent.tsx      | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index d14d8bc4170f..7c3daf832420 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -76,6 +76,8 @@ import type {Transaction} from '@src/types/onyx';
 import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
 import EmptyMoneyRequestReportPreview from './EmptyMoneyRequestReportPreview';
 import type {MoneyRequestReportPreviewContentProps} from './types';
+import SearchRowSkeleton from '@components/Skeletons/SearchRowSkeleton';
+import MoneyReportHeaderStatusBarSkeleton from '@components/MoneyReportHeaderStatusBarSkeleton';
 
 type WebLayoutNativeEvent = {
     layout: LayoutRectangle;
@@ -712,14 +714,19 @@ function MoneyRequestReportPreviewContent({
                                             )}
                                         </View>
                                     </View>
-                                    <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.mtn2, styles.mb1]}>
-                                        <Text
-                                            style={[styles.textLabelSupporting, styles.lh16]}
-                                            numberOfLines={1}
-                                        >
-                                            {`${reportStatus} ${CONST.DOT_SEPARATOR} ${expenseCount}`}
-                                        </Text>
-                                    </View>
+                                    {shouldShowEmptyPlaceholder && (
+                                        MoneyReportHeaderStatusBarSkeleton()
+                                    )}
+                                    {!shouldShowEmptyPlaceholder && (
+                                        <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.mtn2, styles.mb1]}>
+                                            <Text
+                                                style={[styles.textLabelSupporting, styles.lh16]}
+                                                numberOfLines={1}
+                                            >
+                                                {`${reportStatus} ${CONST.DOT_SEPARATOR} ${expenseCount}`}
+                                            </Text>
+                                        </View>
+                                    )}
                                     {!currentWidth || shouldShowLoading || shouldShowLoadingDeferred ? (
                                         <View
                                             style={[

From fc5ffa2ad61c703befb4c01e3834f09b7e37a652 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Fri, 18 Jul 2025 13:48:14 +0200
Subject: [PATCH 15/42] Changed the localization of approve/paid icon to the
 subheader

---
 .../MoneyRequestReportPreviewContent.tsx                  | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 7c3daf832420..3185263ff4c8 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -663,13 +663,7 @@ function MoneyRequestReportPreviewContent({
                                                         >
                                                             {getMoneyReportPreviewName(action, iouReport, isInvoice)}
                                                         </Text>
-                                                        {!doesReportNameOverflow && <>&nbsp;{approvedOrSettledIcon}</>}
                                                     </Text>
-                                                    {doesReportNameOverflow && (
-                                                        <View style={[styles.mtn0Half, (transactions.length < 3 || shouldUseNarrowLayout) && styles.alignSelfStart]}>
-                                                            {approvedOrSettledIcon}
-                                                        </View>
-                                                    )}
                                                 </Animated.View>
                                             </View>
                                             {!shouldUseNarrowLayout && transactions.length > 2 && reportPreviewStyles.expenseCountVisible && (
@@ -723,7 +717,7 @@ function MoneyRequestReportPreviewContent({
                                                 style={[styles.textLabelSupporting, styles.lh16]}
                                                 numberOfLines={1}
                                             >
-                                                {`${reportStatus} ${CONST.DOT_SEPARATOR} ${expenseCount}`}
+                                                {approvedOrSettledIcon} {`${reportStatus} ${CONST.DOT_SEPARATOR} ${expenseCount}`}
                                             </Text>
                                         </View>
                                     )}

From 96674d5a1dc0af3d02e13802bb37e97fd73f7be6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Fri, 18 Jul 2025 14:05:55 +0200
Subject: [PATCH 16/42] Added the visible 'View' button during loading

---
 .../MoneyRequestReportPreviewContent.tsx            | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 3185263ff4c8..7870ea0f9f91 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -10,6 +10,7 @@ import {DelegateNoAccessContext} from '@components/DelegateNoAccessModalProvider
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import ImageSVG from '@components/ImageSVG';
+import MoneyReportHeaderStatusBarSkeleton from '@components/MoneyReportHeaderStatusBarSkeleton';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {PressableWithFeedback} from '@components/Pressable';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
@@ -18,6 +19,7 @@ import type {ActionHandledType} from '@components/ProcessMoneyReportHoldMenu';
 import ExportWithDropdownMenu from '@components/ReportActionItem/ExportWithDropdownMenu';
 import AnimatedSettlementButton from '@components/SettlementButton/AnimatedSettlementButton';
 import {showContextMenuForReport} from '@components/ShowContextMenuContext';
+import SearchRowSkeleton from '@components/Skeletons/SearchRowSkeleton';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
@@ -76,8 +78,6 @@ import type {Transaction} from '@src/types/onyx';
 import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
 import EmptyMoneyRequestReportPreview from './EmptyMoneyRequestReportPreview';
 import type {MoneyRequestReportPreviewContentProps} from './types';
-import SearchRowSkeleton from '@components/Skeletons/SearchRowSkeleton';
-import MoneyReportHeaderStatusBarSkeleton from '@components/MoneyReportHeaderStatusBarSkeleton';
 
 type WebLayoutNativeEvent = {
     layout: LayoutRectangle;
@@ -708,10 +708,7 @@ function MoneyRequestReportPreviewContent({
                                             )}
                                         </View>
                                     </View>
-                                    {shouldShowEmptyPlaceholder && (
-                                        MoneyReportHeaderStatusBarSkeleton()
-                                    )}
-                                    {!shouldShowEmptyPlaceholder && (
+                                    {shouldShowEmptyPlaceholder? <MoneyReportHeaderStatusBarSkeleton/> : (
                                         <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.mtn2, styles.mb1]}>
                                             <Text
                                                 style={[styles.textLabelSupporting, styles.lh16]}
@@ -767,9 +764,7 @@ function MoneyRequestReportPreviewContent({
                                     <View style={[styles.expenseAndReportPreviewTextContainer]}>
                                         <View style={[totalAmountStyle, styles.justifyContentBetween, styles.gap4, StyleUtils.getMinimumHeight(variables.h28)]}>
                                             {/* height is needed to avoid flickering on animation */}
-                                            {!shouldShowEmptyPlaceholder && (
-                                                <View style={[buttonMaxWidth, styles.flex1, {height: variables.h40}]}>{reportPreviewActions[reportPreviewAction]}</View>
-                                            )}
+                                            <View style={[buttonMaxWidth, styles.flex1, {height: variables.h40}]}>{reportPreviewActions[reportPreviewAction]}</View>
                                             {transactions.length > 1 && (
                                                 <View style={[styles.flexRow, shouldUseNarrowLayout ? styles.justifyContentBetween : styles.gap2, styles.alignItemsBaseline]}>
                                                     <Text

From e7a8682cc3d49297ad56caed0f2b56c4d5d8e166 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Fri, 18 Jul 2025 14:12:00 +0200
Subject: [PATCH 17/42] Small code styling changes

---
 .../MoneyRequestReportPreviewContent.tsx                      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 7870ea0f9f91..4fb213ab00ba 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -708,7 +708,9 @@ function MoneyRequestReportPreviewContent({
                                             )}
                                         </View>
                                     </View>
-                                    {shouldShowEmptyPlaceholder? <MoneyReportHeaderStatusBarSkeleton/> : (
+                                    {shouldShowEmptyPlaceholder ? (
+                                        <MoneyReportHeaderStatusBarSkeleton />
+                                    ) : (
                                         <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.mtn2, styles.mb1]}>
                                             <Text
                                                 style={[styles.textLabelSupporting, styles.lh16]}

From 509f3c2c65b93ef8d9899c69187e875f87eecc2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Fri, 18 Jul 2025 16:00:50 +0200
Subject: [PATCH 18/42] Commit after running prettier

---
 .../MoneyRequestReportPreviewContent.tsx                         | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 4fb213ab00ba..2f20b58ac4ef 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -19,7 +19,6 @@ import type {ActionHandledType} from '@components/ProcessMoneyReportHoldMenu';
 import ExportWithDropdownMenu from '@components/ReportActionItem/ExportWithDropdownMenu';
 import AnimatedSettlementButton from '@components/SettlementButton/AnimatedSettlementButton';
 import {showContextMenuForReport} from '@components/ShowContextMenuContext';
-import SearchRowSkeleton from '@components/Skeletons/SearchRowSkeleton';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';

From 9e708102624b30b4d674dd848c549bf0e22c0cfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Fri, 18 Jul 2025 17:02:58 +0200
Subject: [PATCH 19/42] Small adjustments to the icons

---
 .../MoneyRequestReportPreviewContent.tsx      | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 2f20b58ac4ef..a44788f9455a 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -423,9 +423,9 @@ function MoneyRequestReportPreviewContent({
         <ImageSVG
             src={isApproved ? Expensicons.ThumbsUp : Expensicons.Checkmark}
             fill={isApproved ? theme.icon : theme.iconSuccessFill}
-            width={variables.iconSizeNormal}
-            height={variables.iconSizeNormal}
-            style={{transform: 'translateY(4px)'}}
+            width={variables.iconSizeExtraSmall}
+            height={variables.iconSizeExtraSmall}
+            style={{transform: 'translateY(1px)'}}
             contentFit="cover"
         />
     );
@@ -707,16 +707,22 @@ function MoneyRequestReportPreviewContent({
                                             )}
                                         </View>
                                     </View>
-                                    {shouldShowEmptyPlaceholder ? (
-                                        <MoneyReportHeaderStatusBarSkeleton />
-                                    ) : (
-                                        <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.mtn2, styles.mb1]}>
-                                            <Text
-                                                style={[styles.textLabelSupporting, styles.lh16]}
-                                                numberOfLines={1}
-                                            >
-                                                {approvedOrSettledIcon} {`${reportStatus} ${CONST.DOT_SEPARATOR} ${expenseCount}`}
-                                            </Text>
+                                    {shouldShowEmptyPlaceholder ? <MoneyReportHeaderStatusBarSkeleton/> : (
+                                        <View style={[styles.flexRow, styles.justifyContentStart, styles.alignItemsCenter, styles.mtn2, styles.mb1]}>
+                                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1]}>
+                                                <Text
+                                                    style={[styles.textLabelSupporting, styles.lh16]}
+                                                    numberOfLines={1}
+                                                >
+                                                    {approvedOrSettledIcon}
+                                                </Text>
+                                                <Text
+                                                    style={[styles.textLabelSupporting, styles.lh16]}
+                                                    numberOfLines={1}
+                                                >
+                                                    {`${reportStatus} ${CONST.DOT_SEPARATOR} ${expenseCount}`}
+                                                </Text>
+                                            </View>
                                         </View>
                                     )}
                                     {!currentWidth || shouldShowLoading || shouldShowLoadingDeferred ? (

From e14c1f7a5c7dc47f5eacdf09f30d7a30ea1edb72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Mon, 21 Jul 2025 09:46:37 +0200
Subject: [PATCH 20/42] Fixed gap when the icon is missing

---
 .../MoneyRequestReportPreviewContent.tsx                  | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index a44788f9455a..0277dd7c9353 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -419,7 +419,11 @@ function MoneyRequestReportPreviewContent({
             ? {maxWidth: reportPreviewStyles.transactionPreviewCarouselStyle.width}
             : {};
 
-    const approvedOrSettledIcon = (iouSettled || isApproved) && (
+    const isIconNeeded = useMemo(() => {
+        return iouSettled || isApproved;
+    }, [iouSettled, isApproved]);
+
+    const approvedOrSettledIcon = isIconNeeded && (
         <ImageSVG
             src={isApproved ? Expensicons.ThumbsUp : Expensicons.Checkmark}
             fill={isApproved ? theme.icon : theme.iconSuccessFill}
@@ -709,7 +713,7 @@ function MoneyRequestReportPreviewContent({
                                     </View>
                                     {shouldShowEmptyPlaceholder ? <MoneyReportHeaderStatusBarSkeleton/> : (
                                         <View style={[styles.flexRow, styles.justifyContentStart, styles.alignItemsCenter, styles.mtn2, styles.mb1]}>
-                                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1]}>
+                                            <View style={[styles.flexRow, styles.alignItemsCenter, isIconNeeded && styles.gap1]}>
                                                 <Text
                                                     style={[styles.textLabelSupporting, styles.lh16]}
                                                     numberOfLines={1}

From 92e710b0ba07a7019a16f823185f7daae4c802b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Mon, 21 Jul 2025 12:30:58 +0200
Subject: [PATCH 21/42] Centered icons and placed title, subheader and arrow
 buttons in one block

---
 .../MoneyRequestReportPreviewContent.tsx      | 72 +++++++++----------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 0277dd7c9353..81b8c4e0540b 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -429,7 +429,6 @@ function MoneyRequestReportPreviewContent({
             fill={isApproved ? theme.icon : theme.iconSuccessFill}
             width={variables.iconSizeExtraSmall}
             height={variables.iconSizeExtraSmall}
-            style={{transform: 'translateY(1px)'}}
             contentFit="cover"
         />
     );
@@ -649,25 +648,44 @@ function MoneyRequestReportPreviewContent({
                             ]}
                         >
                             <View style={[reportPreviewStyles.wrapperStyle]}>
-                                <View style={[reportPreviewStyles.contentContainerStyle]}>
-                                    <View style={[styles.expenseAndReportPreviewTextContainer, styles.overflowHidden, styles.mbn1]}>
-                                        <View style={[styles.flexRow, styles.justifyContentBetween, styles.gap3]}>
-                                            <View style={[styles.flexRow, styles.mw100, styles.flexShrink1]}>
-                                                <Animated.View style={[styles.flexRow, styles.alignItemsCenter, previewMessageStyle, styles.flexShrink1]}>
-                                                    <Text
-                                                        onLayout={onTextLayoutChange}
-                                                        style={[styles.lh20]}
-                                                        numberOfLines={3}
-                                                    >
-                                                        {FixIconPadding}
+                                <View style={[reportPreviewStyles.contentContainerStyle, styles.gap4]}>
+                                    <View style={[styles.expenseAndReportPreviewTextContainer, styles.overflowHidden]}>
+                                        <View style={[styles.flexRow, styles.justifyContentBetween, styles.gap1]}>
+                                            <View style={[styles.flexColumn, styles.gap1]}>
+                                                <View style={[styles.flexRow, styles.mw100, styles.flexShrink1]}>
+                                                    <Animated.View style={[styles.flexRow, styles.alignItemsCenter, previewMessageStyle, styles.flexShrink1]}>
                                                         <Text
-                                                            style={[styles.headerText]}
-                                                            testID="MoneyRequestReportPreview-reportName"
+                                                            onLayout={onTextLayoutChange}
+                                                            style={[styles.lh20]}
+                                                            numberOfLines={3}
                                                         >
-                                                            {getMoneyReportPreviewName(action, iouReport, isInvoice)}
+                                                            {FixIconPadding}
+                                                            <Text
+                                                                style={[styles.headerText]}
+                                                                testID="MoneyRequestReportPreview-reportName"
+                                                            >
+                                                                {getMoneyReportPreviewName(action, iouReport, isInvoice)}
+                                                            </Text>
                                                         </Text>
-                                                    </Text>
-                                                </Animated.View>
+                                                    </Animated.View>
+                                                </View>
+                                                {shouldShowEmptyPlaceholder ? <MoneyReportHeaderStatusBarSkeleton/> : (
+                                                    <View style={[styles.flexRow, styles.justifyContentStart, styles.alignItemsCenter]}>
+                                                        <View style={[styles.flexRow, styles.alignItemsCenter, isIconNeeded && styles.gap1]}>
+                                                            <Text
+                                                                style={[styles.flex1, styles.alignItemsCenter, styles.lh16]}
+                                                            >
+                                                                {approvedOrSettledIcon}
+                                                            </Text>
+                                                            <Text
+                                                                style={[styles.textLabelSupporting, styles.lh16]}
+                                                                numberOfLines={1}
+                                                            >
+                                                                {`${reportStatus} ${CONST.DOT_SEPARATOR} ${expenseCount}`}
+                                                            </Text>
+                                                        </View>
+                                                    </View>
+                                                )}
                                             </View>
                                             {!shouldUseNarrowLayout && transactions.length > 2 && reportPreviewStyles.expenseCountVisible && (
                                                 <View style={[styles.flexRow, styles.alignItemsCenter]}>
@@ -711,24 +729,6 @@ function MoneyRequestReportPreviewContent({
                                             )}
                                         </View>
                                     </View>
-                                    {shouldShowEmptyPlaceholder ? <MoneyReportHeaderStatusBarSkeleton/> : (
-                                        <View style={[styles.flexRow, styles.justifyContentStart, styles.alignItemsCenter, styles.mtn2, styles.mb1]}>
-                                            <View style={[styles.flexRow, styles.alignItemsCenter, isIconNeeded && styles.gap1]}>
-                                                <Text
-                                                    style={[styles.textLabelSupporting, styles.lh16]}
-                                                    numberOfLines={1}
-                                                >
-                                                    {approvedOrSettledIcon}
-                                                </Text>
-                                                <Text
-                                                    style={[styles.textLabelSupporting, styles.lh16]}
-                                                    numberOfLines={1}
-                                                >
-                                                    {`${reportStatus} ${CONST.DOT_SEPARATOR} ${expenseCount}`}
-                                                </Text>
-                                            </View>
-                                        </View>
-                                    )}
                                     {!currentWidth || shouldShowLoading || shouldShowLoadingDeferred ? (
                                         <View
                                             style={[
@@ -748,7 +748,7 @@ function MoneyRequestReportPreviewContent({
                                             />
                                         </View>
                                     ) : (
-                                        <View style={[styles.flex1, styles.flexColumn, styles.overflowVisible, styles.mtn1]}>
+                                        <View style={[styles.flex1, styles.flexColumn, styles.overflowVisible]}>
                                             <FlatList
                                                 snapToAlignment="start"
                                                 decelerationRate="fast"

From ba9476816bd323bb5b7fb5d140c38b966a1750d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Mon, 21 Jul 2025 12:46:42 +0200
Subject: [PATCH 22/42] Improved the performence of status translation by
 limiting report guarantee checks

---
 src/libs/ReportUtils.ts | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 3279aa0550f9..d9dee68419a6 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -11137,30 +11137,31 @@ function getMoneyReportPreviewName(action: ReportAction, iouReport: OnyxEntry<Re
  * 2	  |  3	     |  Approved          |
  * 2	  |  4	     |  Paid              |
  * 3	  |  4	     |  Paid              |
+ * 6      |  4	     |  Paid              | <- this case is problematic as stateNum = 6 does not exist on NewDot at the moment of writing
  * ========================================
  */
 function getReportStatusTranslation(report?: Report) {
     if (!report) {
         return '';
     }
-    if (report?.stateNum === CONST.REPORT.STATE_NUM.OPEN && report?.statusNum === CONST.REPORT.STATUS_NUM.OPEN) {
+
+    if (report.statusNum === CONST.REPORT.STATUS_NUM.OPEN) {
         return translateLocal('common.draft');
     }
-    if (report?.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && report?.statusNum === CONST.REPORT.STATUS_NUM.SUBMITTED) {
+    if (report.statusNum === CONST.REPORT.STATUS_NUM.SUBMITTED) {
         return translateLocal('common.outstanding');
     }
-    if (report?.stateNum === CONST.REPORT.STATE_NUM.APPROVED && report?.statusNum === CONST.REPORT.STATUS_NUM.CLOSED) {
+    if (report.statusNum === CONST.REPORT.STATUS_NUM.CLOSED) {
         return translateLocal('common.done');
     }
-    if (report?.stateNum === CONST.REPORT.STATE_NUM.APPROVED && report?.statusNum === CONST.REPORT.STATUS_NUM.APPROVED) {
+    if (report.statusNum === CONST.REPORT.STATUS_NUM.APPROVED) {
         return translateLocal('iou.approved');
     }
-    if (
-        (report?.stateNum === CONST.REPORT.STATE_NUM.APPROVED && report?.statusNum === CONST.REPORT.STATUS_NUM.REIMBURSED) ||
-        (report?.stateNum === CONST.REPORT.STATE_NUM.BILLING && report?.statusNum === CONST.REPORT.STATUS_NUM.REIMBURSED)
-    ) {
+    if (report.statusNum === CONST.REPORT.STATUS_NUM.REIMBURSED) {
         return translateLocal('iou.settledExpensify');
     }
+
+    return '';
 }
 
 export {

From 04af12feef70f8582bfe48d28eea664fa0143eaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Mon, 21 Jul 2025 12:57:57 +0200
Subject: [PATCH 23/42] Commit after prettier run

---
 .../MoneyRequestReportPreviewContent.tsx               | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 81b8c4e0540b..16937bac6d38 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -669,14 +669,12 @@ function MoneyRequestReportPreviewContent({
                                                         </Text>
                                                     </Animated.View>
                                                 </View>
-                                                {shouldShowEmptyPlaceholder ? <MoneyReportHeaderStatusBarSkeleton/> : (
+                                                {shouldShowEmptyPlaceholder ? (
+                                                    <MoneyReportHeaderStatusBarSkeleton />
+                                                ) : (
                                                     <View style={[styles.flexRow, styles.justifyContentStart, styles.alignItemsCenter]}>
                                                         <View style={[styles.flexRow, styles.alignItemsCenter, isIconNeeded && styles.gap1]}>
-                                                            <Text
-                                                                style={[styles.flex1, styles.alignItemsCenter, styles.lh16]}
-                                                            >
-                                                                {approvedOrSettledIcon}
-                                                            </Text>
+                                                            <Text style={[styles.flex1, styles.alignItemsCenter, styles.lh16]}>{approvedOrSettledIcon}</Text>
                                                             <Text
                                                                 style={[styles.textLabelSupporting, styles.lh16]}
                                                                 numberOfLines={1}

From 54d11c54c7a7aa2aeb2db9210d9240997f1ac367 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Mon, 21 Jul 2025 13:34:34 +0200
Subject: [PATCH 24/42] Added missing stateNum to CONST

---
 src/CONST/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/CONST/index.ts b/src/CONST/index.ts
index d29abae629e3..657faeebf661 100755
--- a/src/CONST/index.ts
+++ b/src/CONST/index.ts
@@ -1347,6 +1347,7 @@ const CONST = {
             SUBMITTED: 1,
             APPROVED: 2,
             BILLING: 3,
+            AUTOREIMBURSED: 6,
         },
         STATUS_NUM: {
             OPEN: 0,

From 8c6292a821b17ed1d97d12b83b274c6899a06676 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Mon, 21 Jul 2025 13:38:18 +0200
Subject: [PATCH 25/42] Added proper checks for all the state/status pairs in
 the getReportStatusTranslation function

---
 src/libs/ReportUtils.ts | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index d9dee68419a6..b45a43b21231 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -11137,30 +11137,34 @@ function getMoneyReportPreviewName(action: ReportAction, iouReport: OnyxEntry<Re
  * 2	  |  3	     |  Approved          |
  * 2	  |  4	     |  Paid              |
  * 3	  |  4	     |  Paid              |
- * 6      |  4	     |  Paid              | <- this case is problematic as stateNum = 6 does not exist on NewDot at the moment of writing
+ * 6      |  4	     |  Paid              |
  * ========================================
  */
 function getReportStatusTranslation(report?: Report) {
     if (!report) {
         return '';
     }
-
-    if (report.statusNum === CONST.REPORT.STATUS_NUM.OPEN) {
+    
+    if (report.stateNum === CONST.REPORT.STATE_NUM.OPEN && report.statusNum === CONST.REPORT.STATUS_NUM.OPEN) {
         return translateLocal('common.draft');
     }
-    if (report.statusNum === CONST.REPORT.STATUS_NUM.SUBMITTED) {
+    if (report.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && report.statusNum === CONST.REPORT.STATUS_NUM.SUBMITTED) {
         return translateLocal('common.outstanding');
     }
-    if (report.statusNum === CONST.REPORT.STATUS_NUM.CLOSED) {
+    if (report.stateNum === CONST.REPORT.STATE_NUM.APPROVED && report.statusNum === CONST.REPORT.STATUS_NUM.CLOSED) {
         return translateLocal('common.done');
     }
-    if (report.statusNum === CONST.REPORT.STATUS_NUM.APPROVED) {
+    if (report.stateNum === CONST.REPORT.STATE_NUM.APPROVED && report.statusNum === CONST.REPORT.STATUS_NUM.APPROVED) {
         return translateLocal('iou.approved');
     }
-    if (report.statusNum === CONST.REPORT.STATUS_NUM.REIMBURSED) {
+    if (
+        (report.stateNum === CONST.REPORT.STATE_NUM.APPROVED && report.statusNum === CONST.REPORT.STATUS_NUM.REIMBURSED) ||
+        (report.stateNum === CONST.REPORT.STATE_NUM.BILLING && report.statusNum === CONST.REPORT.STATUS_NUM.REIMBURSED) ||
+        (report.stateNum === CONST.REPORT.STATE_NUM.AUTOREIMBURSED && report.statusNum === CONST.REPORT.STATUS_NUM.REIMBURSED)
+    ) {
         return translateLocal('iou.settledExpensify');
     }
-
+    
     return '';
 }
 

From ce500b5fe642f9cc1d7fb425181d42c85c4d95f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Mon, 21 Jul 2025 13:40:02 +0200
Subject: [PATCH 26/42] Commit afted prettier run in ReportUtils.ts

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

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index b45a43b21231..4c2f36d07914 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -11144,7 +11144,7 @@ function getReportStatusTranslation(report?: Report) {
     if (!report) {
         return '';
     }
-    
+
     if (report.stateNum === CONST.REPORT.STATE_NUM.OPEN && report.statusNum === CONST.REPORT.STATUS_NUM.OPEN) {
         return translateLocal('common.draft');
     }
@@ -11164,7 +11164,7 @@ function getReportStatusTranslation(report?: Report) {
     ) {
         return translateLocal('iou.settledExpensify');
     }
-    
+
     return '';
 }
 

From 2f75a6d8c0cd4d18011b0cd09083b71b77010323 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Mon, 21 Jul 2025 15:32:40 +0200
Subject: [PATCH 27/42] Removed total from the bottom button

---
 .../MoneyRequestReportPreviewContent.tsx              | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 16937bac6d38..38ea4a61b933 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -33,7 +33,6 @@ import {openUnreportedExpense} from '@libs/actions/Report';
 import ControlSelection from '@libs/ControlSelection';
 import {convertToDisplayString} from '@libs/CurrencyUtils';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
-import {getTotalAmountForIOUReportPreviewButton} from '@libs/MoneyRequestReportUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import Performance from '@libs/Performance';
 import {getConnectedIntegration} from '@libs/PolicyUtils';
@@ -503,13 +502,13 @@ function MoneyRequestReportPreviewContent({
         [CONST.REPORT.REPORT_PREVIEW_ACTIONS.SUBMIT]: (
             <Button
                 success={isWaitingForSubmissionFromCurrentUser}
-                text={translate('iou.submitAmount', {amount: getTotalAmountForIOUReportPreviewButton(iouReport, policy, reportPreviewAction)})}
+                text={translate('common.submit')}
                 onPress={() => submitReport(iouReport)}
             />
         ),
         [CONST.REPORT.REPORT_PREVIEW_ACTIONS.APPROVE]: (
             <Button
-                text={translate('iou.approve', {formattedAmount: getTotalAmountForIOUReportPreviewButton(iouReport, policy, reportPreviewAction)})}
+                text={translate('iou.approve')}
                 success
                 onPress={() => confirmApproval()}
             />
@@ -521,8 +520,6 @@ function MoneyRequestReportPreviewContent({
                 isApprovedAnimationRunning={isApprovedAnimationRunning}
                 canIOUBePaid={canIOUBePaidAndApproved || isPaidAnimationRunning}
                 onAnimationFinish={stopAnimation}
-                formattedAmount={getTotalAmountForIOUReportPreviewButton(iouReport, policy, reportPreviewAction)}
-                currency={iouReport?.currency}
                 chatReportID={chatReportID}
                 policyID={policy?.id}
                 iouReport={iouReport}
@@ -563,9 +560,7 @@ function MoneyRequestReportPreviewContent({
                 icon={Expensicons.DotIndicator}
                 iconFill={theme.danger}
                 iconHoverFill={theme.danger}
-                text={translate('common.review', {
-                    amount: getTotalAmountForIOUReportPreviewButton(iouReport, policy, reportPreviewAction),
-                })}
+                text={translate('common.review')}
                 onPress={() => openReportFromPreview()}
             />
         ),

From 63e99cb7a2308f77f2dbaaebd130a9ddf7c673f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Mon, 21 Jul 2025 15:46:40 +0200
Subject: [PATCH 28/42] Added unit tests for getReportStatusTranslation
 function

---
 tests/unit/ReportUtilsTest.ts | 66 +++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)

diff --git a/tests/unit/ReportUtilsTest.ts b/tests/unit/ReportUtilsTest.ts
index bf31871bdc66..883fce6e59bd 100644
--- a/tests/unit/ReportUtilsTest.ts
+++ b/tests/unit/ReportUtilsTest.ts
@@ -46,6 +46,7 @@ import {
     getReasonAndReportActionThatRequiresAttention,
     getReportIDFromLink,
     getReportName,
+    getReportStatusTranslation,
     getWorkspaceIcon,
     getWorkspaceNameUpdatedMessage,
     hasReceiptError,
@@ -4719,4 +4720,69 @@ describe('ReportUtils', () => {
             });
         });
     });
+
+    describe('getReportStatusTranslation', () => {
+        it('should return "Draft" for state 0, status 0', () => {
+            const report: Report = {
+                ...createRandomReport(0),
+                stateNum: CONST.REPORT.STATE_NUM.OPEN,
+                statusNum: CONST.REPORT.STATUS_NUM.OPEN
+            };
+            expect(getReportStatusTranslation(report)).toBe(translateLocal('common.draft'));
+        });
+
+        it('should return "Outstanding" for state 1, status 1', () => {
+            const report: Report = {
+                ...createRandomReport(1),
+                stateNum: CONST.REPORT.STATE_NUM.SUBMITTED,
+                statusNum: CONST.REPORT.STATUS_NUM.SUBMITTED
+            };
+            expect(getReportStatusTranslation(report)).toBe(translateLocal('common.outstanding'));
+        });
+
+        it('should return "Done" for state 2, status 2', () => {
+            const report: Report = {
+                ...createRandomReport(2),
+                stateNum: CONST.REPORT.STATE_NUM.APPROVED,
+                statusNum: CONST.REPORT.STATUS_NUM.CLOSED
+            };
+            expect(getReportStatusTranslation(report)).toBe(translateLocal('common.done'));
+        });
+
+        it('should return "Approved" for state 2, status 3', () => {
+            const report: Report = {
+                ...createRandomReport(3),
+                stateNum: CONST.REPORT.STATE_NUM.APPROVED,
+                statusNum: CONST.REPORT.STATUS_NUM.APPROVED
+            };
+            expect(getReportStatusTranslation(report)).toBe(translateLocal('iou.approved'));
+        });
+
+        it('should return "Paid" for state 2, status 4', () => {
+            const report: Report = {
+                ...createRandomReport(4),
+                stateNum: CONST.REPORT.STATE_NUM.APPROVED,
+                statusNum: CONST.REPORT.STATUS_NUM.REIMBURSED
+            };
+            expect(getReportStatusTranslation(report)).toBe(translateLocal('iou.settledExpensify'));
+        });
+
+        it('should return "Paid" for state 3, status 4', () => {
+            const report: Report = {
+                ...createRandomReport(5),
+                stateNum: CONST.REPORT.STATE_NUM.BILLING,
+                statusNum: CONST.REPORT.STATUS_NUM.REIMBURSED
+            };
+            expect(getReportStatusTranslation(report)).toBe(translateLocal('iou.settledExpensify'));
+        });
+
+        it('should return "Paid" for state 6, status 4', () => {
+            const report: Report = {
+                ...createRandomReport(6),
+                stateNum: CONST.REPORT.STATE_NUM.AUTOREIMBURSED,
+                statusNum: CONST.REPORT.STATUS_NUM.REIMBURSED
+            };
+            expect(getReportStatusTranslation(report)).toBe(translateLocal('iou.settledExpensify'));
+        });
+    });
 });

From 8af16d5aba86695e31ef36b219565763d60f361b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Mon, 21 Jul 2025 15:49:46 +0200
Subject: [PATCH 29/42] Commit after prettier run in ReportUtilsTest.ts

---
 tests/unit/ReportUtilsTest.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/tests/unit/ReportUtilsTest.ts b/tests/unit/ReportUtilsTest.ts
index 883fce6e59bd..be0fc359620a 100644
--- a/tests/unit/ReportUtilsTest.ts
+++ b/tests/unit/ReportUtilsTest.ts
@@ -4726,7 +4726,7 @@ describe('ReportUtils', () => {
             const report: Report = {
                 ...createRandomReport(0),
                 stateNum: CONST.REPORT.STATE_NUM.OPEN,
-                statusNum: CONST.REPORT.STATUS_NUM.OPEN
+                statusNum: CONST.REPORT.STATUS_NUM.OPEN,
             };
             expect(getReportStatusTranslation(report)).toBe(translateLocal('common.draft'));
         });
@@ -4735,7 +4735,7 @@ describe('ReportUtils', () => {
             const report: Report = {
                 ...createRandomReport(1),
                 stateNum: CONST.REPORT.STATE_NUM.SUBMITTED,
-                statusNum: CONST.REPORT.STATUS_NUM.SUBMITTED
+                statusNum: CONST.REPORT.STATUS_NUM.SUBMITTED,
             };
             expect(getReportStatusTranslation(report)).toBe(translateLocal('common.outstanding'));
         });
@@ -4744,7 +4744,7 @@ describe('ReportUtils', () => {
             const report: Report = {
                 ...createRandomReport(2),
                 stateNum: CONST.REPORT.STATE_NUM.APPROVED,
-                statusNum: CONST.REPORT.STATUS_NUM.CLOSED
+                statusNum: CONST.REPORT.STATUS_NUM.CLOSED,
             };
             expect(getReportStatusTranslation(report)).toBe(translateLocal('common.done'));
         });
@@ -4753,7 +4753,7 @@ describe('ReportUtils', () => {
             const report: Report = {
                 ...createRandomReport(3),
                 stateNum: CONST.REPORT.STATE_NUM.APPROVED,
-                statusNum: CONST.REPORT.STATUS_NUM.APPROVED
+                statusNum: CONST.REPORT.STATUS_NUM.APPROVED,
             };
             expect(getReportStatusTranslation(report)).toBe(translateLocal('iou.approved'));
         });
@@ -4762,7 +4762,7 @@ describe('ReportUtils', () => {
             const report: Report = {
                 ...createRandomReport(4),
                 stateNum: CONST.REPORT.STATE_NUM.APPROVED,
-                statusNum: CONST.REPORT.STATUS_NUM.REIMBURSED
+                statusNum: CONST.REPORT.STATUS_NUM.REIMBURSED,
             };
             expect(getReportStatusTranslation(report)).toBe(translateLocal('iou.settledExpensify'));
         });
@@ -4771,7 +4771,7 @@ describe('ReportUtils', () => {
             const report: Report = {
                 ...createRandomReport(5),
                 stateNum: CONST.REPORT.STATE_NUM.BILLING,
-                statusNum: CONST.REPORT.STATUS_NUM.REIMBURSED
+                statusNum: CONST.REPORT.STATUS_NUM.REIMBURSED,
             };
             expect(getReportStatusTranslation(report)).toBe(translateLocal('iou.settledExpensify'));
         });
@@ -4780,7 +4780,7 @@ describe('ReportUtils', () => {
             const report: Report = {
                 ...createRandomReport(6),
                 stateNum: CONST.REPORT.STATE_NUM.AUTOREIMBURSED,
-                statusNum: CONST.REPORT.STATUS_NUM.REIMBURSED
+                statusNum: CONST.REPORT.STATUS_NUM.REIMBURSED,
             };
             expect(getReportStatusTranslation(report)).toBe(translateLocal('iou.settledExpensify'));
         });

From 83072bba862e86b38ad2d63910374589c3639611 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Mon, 21 Jul 2025 15:59:49 +0200
Subject: [PATCH 30/42] Added AUTOREIMBURSED to the spellcheck

---
 cspell.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cspell.json b/cspell.json
index 5efd4621b29e..e25a9dae0da0 100644
--- a/cspell.json
+++ b/cspell.json
@@ -52,6 +52,7 @@
         "autofilled",
         "automations",
         "autoplay",
+        "AUTOREIMBURSED",
         "autoreleasepool",
         "AUTOREPORTING",
         "autoresizesSubviews",

From 7ad157cb0e7bbe3096ce3211e4626f967dec2229 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Tue, 22 Jul 2025 09:50:39 +0200
Subject: [PATCH 31/42] Removed workaround for icon padding at the end of
 report preview name

---
 .../MoneyRequestReportPreviewContent.tsx      | 36 +++----------------
 1 file changed, 4 insertions(+), 32 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 38ea4a61b933..f364583e379e 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -1,8 +1,7 @@
 import React, {useCallback, useContext, useDeferredValue, useEffect, useMemo, useRef, useState} from 'react';
 import {ActivityIndicator, FlatList, View} from 'react-native';
-import type {LayoutChangeEvent, ListRenderItemInfo, ViewToken} from 'react-native';
+import type {ListRenderItemInfo, ViewToken} from 'react-native';
 import Animated, {useAnimatedStyle, useSharedValue, withDelay, withSpring, withTiming} from 'react-native-reanimated';
-import type {LayoutRectangle} from 'react-native/Libraries/Types/CoreEventTypes';
 import Button from '@components/Button';
 import {getButtonRole} from '@components/Button/utils';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
@@ -77,17 +76,6 @@ import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
 import EmptyMoneyRequestReportPreview from './EmptyMoneyRequestReportPreview';
 import type {MoneyRequestReportPreviewContentProps} from './types';
 
-type WebLayoutNativeEvent = {
-    layout: LayoutRectangle;
-    target: Element;
-};
-
-const checkIfReportNameOverflows = <T extends LayoutChangeEvent>({nativeEvent}: T) =>
-    'target' in nativeEvent ? (nativeEvent as WebLayoutNativeEvent).target.scrollHeight > variables.h70 : false;
-
-// Do not remove this empty view, it is a workaround for the icon padding at the end of the preview text
-const FixIconPadding = <View style={{height: variables.iconSizeNormal}} />;
-
 function MoneyRequestReportPreviewContent({
     iouReportID,
     chatReportID,
@@ -131,8 +119,6 @@ function MoneyRequestReportPreviewContent({
     const {isOffline} = useNetwork();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 
-    const [doesReportNameOverflow, setDoesReportNameOverflow] = useState(false);
-
     const {areAllRequestsBeingSmartScanned, hasNonReimbursableTransactions} = useMemo(
         () => ({
             areAllRequestsBeingSmartScanned: areAllRequestsBeingSmartScannedReportUtils(iouReportID, action),
@@ -389,13 +375,6 @@ function MoneyRequestReportPreviewContent({
         carouselRef.current?.scrollToIndex({index, animated: true, viewOffset: 2 * styles.gap2.gap});
     };
 
-    const onTextLayoutChange = (e: LayoutChangeEvent) => {
-        const doesOverflow = checkIfReportNameOverflows(e);
-        if (doesOverflow !== doesReportNameOverflow) {
-            setDoesReportNameOverflow(doesOverflow);
-        }
-    };
-
     const renderFlatlistItem = (itemInfo: ListRenderItemInfo<Transaction>) => {
         if (itemInfo.index > 9) {
             return (
@@ -650,17 +629,10 @@ function MoneyRequestReportPreviewContent({
                                                 <View style={[styles.flexRow, styles.mw100, styles.flexShrink1]}>
                                                     <Animated.View style={[styles.flexRow, styles.alignItemsCenter, previewMessageStyle, styles.flexShrink1]}>
                                                         <Text
-                                                            onLayout={onTextLayoutChange}
-                                                            style={[styles.lh20]}
-                                                            numberOfLines={3}
+                                                            style={[styles.headerText]}
+                                                            testID="MoneyRequestReportPreview-reportName"
                                                         >
-                                                            {FixIconPadding}
-                                                            <Text
-                                                                style={[styles.headerText]}
-                                                                testID="MoneyRequestReportPreview-reportName"
-                                                            >
-                                                                {getMoneyReportPreviewName(action, iouReport, isInvoice)}
-                                                            </Text>
+                                                            {getMoneyReportPreviewName(action, iouReport, isInvoice)}
                                                         </Text>
                                                     </Animated.View>
                                                 </View>

From 61d2a654823b173641188072f17d065d75c53c0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Tue, 22 Jul 2025 10:24:13 +0200
Subject: [PATCH 32/42] Fixed subheader alignment on mobile

---
 .../MoneyRequestReportPreviewContent.tsx       | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index f364583e379e..3d55a7cb87f5 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -639,16 +639,14 @@ function MoneyRequestReportPreviewContent({
                                                 {shouldShowEmptyPlaceholder ? (
                                                     <MoneyReportHeaderStatusBarSkeleton />
                                                 ) : (
-                                                    <View style={[styles.flexRow, styles.justifyContentStart, styles.alignItemsCenter]}>
-                                                        <View style={[styles.flexRow, styles.alignItemsCenter, isIconNeeded && styles.gap1]}>
-                                                            <Text style={[styles.flex1, styles.alignItemsCenter, styles.lh16]}>{approvedOrSettledIcon}</Text>
-                                                            <Text
-                                                                style={[styles.textLabelSupporting, styles.lh16]}
-                                                                numberOfLines={1}
-                                                            >
-                                                                {`${reportStatus} ${CONST.DOT_SEPARATOR} ${expenseCount}`}
-                                                            </Text>
-                                                        </View>
+                                                    <View style={[styles.flexRow, styles.justifyContentStart, styles.alignItemsCenter, isIconNeeded && styles.gap1]}>
+                                                        <Text style={[styles.alignItemsCenter, styles.lh16]}>{approvedOrSettledIcon}</Text>
+                                                        <Text
+                                                            style={[styles.textLabelSupporting, styles.lh16]}
+                                                            numberOfLines={1}
+                                                        >
+                                                            {`${reportStatus} ${CONST.DOT_SEPARATOR} ${expenseCount}`}
+                                                        </Text>
                                                     </View>
                                                 )}
                                             </View>

From c974c034891e18cddac9c6134358d122ab4f0631 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Tue, 22 Jul 2025 16:30:25 +0200
Subject: [PATCH 33/42] Fixed wrapping on overflowing report preview name

---
 .../MoneyRequestReportPreviewContent.tsx                        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 3d55a7cb87f5..9eb4c5df16b5 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -625,7 +625,7 @@ function MoneyRequestReportPreviewContent({
                                 <View style={[reportPreviewStyles.contentContainerStyle, styles.gap4]}>
                                     <View style={[styles.expenseAndReportPreviewTextContainer, styles.overflowHidden]}>
                                         <View style={[styles.flexRow, styles.justifyContentBetween, styles.gap1]}>
-                                            <View style={[styles.flexColumn, styles.gap1]}>
+                                            <View style={[styles.flexColumn, styles.gap1, styles.flexShrink1]}>
                                                 <View style={[styles.flexRow, styles.mw100, styles.flexShrink1]}>
                                                     <Animated.View style={[styles.flexRow, styles.alignItemsCenter, previewMessageStyle, styles.flexShrink1]}>
                                                         <Text

From ba7a27016db61b1fd5851c66f7fc18a578b9a0aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Tue, 22 Jul 2025 17:38:03 +0200
Subject: [PATCH 34/42] Added flexshrink1 to another container wrapping title

---
 .../MoneyRequestReportPreviewContent.tsx                        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 9eb4c5df16b5..e8e6b30c0610 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -624,7 +624,7 @@ function MoneyRequestReportPreviewContent({
                             <View style={[reportPreviewStyles.wrapperStyle]}>
                                 <View style={[reportPreviewStyles.contentContainerStyle, styles.gap4]}>
                                     <View style={[styles.expenseAndReportPreviewTextContainer, styles.overflowHidden]}>
-                                        <View style={[styles.flexRow, styles.justifyContentBetween, styles.gap1]}>
+                                        <View style={[styles.flexRow, styles.justifyContentBetween, styles.flexShrink1, styles.gap1]}>
                                             <View style={[styles.flexColumn, styles.gap1, styles.flexShrink1]}>
                                                 <View style={[styles.flexRow, styles.mw100, styles.flexShrink1]}>
                                                     <Animated.View style={[styles.flexRow, styles.alignItemsCenter, previewMessageStyle, styles.flexShrink1]}>

From bdda448ff50cc72d953ecf29507fe43c39dc74af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Wed, 23 Jul 2025 10:39:29 +0200
Subject: [PATCH 35/42] Small changes for better code quality and fixed empty
 space before status

---
 .../MoneyRequestReportPreviewContent.tsx                   | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index e8e6b30c0610..355945b94964 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -639,11 +639,10 @@ function MoneyRequestReportPreviewContent({
                                                 {shouldShowEmptyPlaceholder ? (
                                                     <MoneyReportHeaderStatusBarSkeleton />
                                                 ) : (
-                                                    <View style={[styles.flexRow, styles.justifyContentStart, styles.alignItemsCenter, isIconNeeded && styles.gap1]}>
-                                                        <Text style={[styles.alignItemsCenter, styles.lh16]}>{approvedOrSettledIcon}</Text>
+                                                    <View style={[styles.flexRow, styles.justifyContentStart, styles.alignItemsCenter]}>
+                                                        {isIconNeeded && <View style={[styles.alignItemsCenter, styles.lh16, styles.ml0]}>{approvedOrSettledIcon}</View>}
                                                         <Text
                                                             style={[styles.textLabelSupporting, styles.lh16]}
-                                                            numberOfLines={1}
                                                         >
                                                             {`${reportStatus} ${CONST.DOT_SEPARATOR} ${expenseCount}`}
                                                         </Text>
@@ -745,7 +744,7 @@ function MoneyRequestReportPreviewContent({
                                                         style={[styles.textLabelSupporting]}
                                                         numberOfLines={1}
                                                     >
-                                                        Total
+                                                        {translate('common.total')}
                                                     </Text>
                                                     <Text style={[styles.headerText]}>{convertToDisplayString(totalDisplaySpend, iouReport?.currency)}</Text>
                                                 </View>

From 7c1f2abeac4c389f2d855763cd02dda3d42387e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Wed, 23 Jul 2025 10:43:22 +0200
Subject: [PATCH 36/42] Prettier run

---
 .../MoneyRequestReportPreviewContent.tsx                    | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 355945b94964..1ddfdad9ebc4 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -641,11 +641,7 @@ function MoneyRequestReportPreviewContent({
                                                 ) : (
                                                     <View style={[styles.flexRow, styles.justifyContentStart, styles.alignItemsCenter]}>
                                                         {isIconNeeded && <View style={[styles.alignItemsCenter, styles.lh16, styles.ml0]}>{approvedOrSettledIcon}</View>}
-                                                        <Text
-                                                            style={[styles.textLabelSupporting, styles.lh16]}
-                                                        >
-                                                            {`${reportStatus} ${CONST.DOT_SEPARATOR} ${expenseCount}`}
-                                                        </Text>
+                                                        <Text style={[styles.textLabelSupporting, styles.lh16]}>{`${reportStatus} ${CONST.DOT_SEPARATOR} ${expenseCount}`}</Text>
                                                     </View>
                                                 )}
                                             </View>

From 55b6110cf2fed420c84e38208557a700fef36e7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Wed, 23 Jul 2025 13:42:04 +0200
Subject: [PATCH 37/42] Fixed typo

---
 .../MoneyRequestReportPreviewContent.tsx                        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 1ddfdad9ebc4..8bf2790027d4 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -640,7 +640,7 @@ function MoneyRequestReportPreviewContent({
                                                     <MoneyReportHeaderStatusBarSkeleton />
                                                 ) : (
                                                     <View style={[styles.flexRow, styles.justifyContentStart, styles.alignItemsCenter]}>
-                                                        {isIconNeeded && <View style={[styles.alignItemsCenter, styles.lh16, styles.ml0]}>{approvedOrSettledIcon}</View>}
+                                                        {isIconNeeded && <View style={[styles.alignItemsCenter, styles.lh16, styles.ml1]}>{approvedOrSettledIcon}</View>}
                                                         <Text style={[styles.textLabelSupporting, styles.lh16]}>{`${reportStatus} ${CONST.DOT_SEPARATOR} ${expenseCount}`}</Text>
                                                     </View>
                                                 )}

From 6c2d83bc35f067125e88c756f279d5553fa747f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Wed, 23 Jul 2025 13:44:32 +0200
Subject: [PATCH 38/42] Properly fixed typo in margin

---
 .../MoneyRequestReportPreviewContent.tsx                        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 8bf2790027d4..3e95700e6a41 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -640,7 +640,7 @@ function MoneyRequestReportPreviewContent({
                                                     <MoneyReportHeaderStatusBarSkeleton />
                                                 ) : (
                                                     <View style={[styles.flexRow, styles.justifyContentStart, styles.alignItemsCenter]}>
-                                                        {isIconNeeded && <View style={[styles.alignItemsCenter, styles.lh16, styles.ml1]}>{approvedOrSettledIcon}</View>}
+                                                        {isIconNeeded && <View style={[styles.alignItemsCenter, styles.lh16, styles.mr1]}>{approvedOrSettledIcon}</View>}
                                                         <Text style={[styles.textLabelSupporting, styles.lh16]}>{`${reportStatus} ${CONST.DOT_SEPARATOR} ${expenseCount}`}</Text>
                                                     </View>
                                                 )}

From 173f4decc3b0fb9e9435cc1430f38732d2614bd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Fri, 25 Jul 2025 10:54:22 +0200
Subject: [PATCH 39/42] Improved efficiency of getReportStatusTranslation as
 proposed by @mountiny

---
 .../MoneyRequestReportPreviewContent.tsx       |  2 +-
 src/libs/ReportUtils.ts                        | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 3e95700e6a41..92bf42ca6208 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -289,7 +289,7 @@ function MoneyRequestReportPreviewContent({
         [translate, numberOfRequests],
     );
 
-    const reportStatus = useMemo(() => getReportStatusTranslation(iouReport), [iouReport]);
+    const reportStatus = useMemo(() => getReportStatusTranslation(iouReport?.stateNum, iouReport?.statusNum), [iouReport?.stateNum, iouReport?.statusNum]);
 
     const totalAmountStyle = shouldUseNarrowLayout ? [styles.flexColumnReverse, styles.alignItemsStretch] : [styles.flexRow, styles.alignItemsBaseline];
 
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 4c2f36d07914..391ba84ccd03 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -11140,27 +11140,27 @@ function getMoneyReportPreviewName(action: ReportAction, iouReport: OnyxEntry<Re
  * 6      |  4	     |  Paid              |
  * ========================================
  */
-function getReportStatusTranslation(report?: Report) {
-    if (!report) {
+function getReportStatusTranslation(stateNum?: number, statusNum?: number): string {
+    if (!stateNum || !statusNum) {
         return '';
     }
 
-    if (report.stateNum === CONST.REPORT.STATE_NUM.OPEN && report.statusNum === CONST.REPORT.STATUS_NUM.OPEN) {
+    if (stateNum === CONST.REPORT.STATE_NUM.OPEN && statusNum === CONST.REPORT.STATUS_NUM.OPEN) {
         return translateLocal('common.draft');
     }
-    if (report.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && report.statusNum === CONST.REPORT.STATUS_NUM.SUBMITTED) {
+    if (stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && statusNum === CONST.REPORT.STATUS_NUM.SUBMITTED) {
         return translateLocal('common.outstanding');
     }
-    if (report.stateNum === CONST.REPORT.STATE_NUM.APPROVED && report.statusNum === CONST.REPORT.STATUS_NUM.CLOSED) {
+    if (stateNum === CONST.REPORT.STATE_NUM.APPROVED && statusNum === CONST.REPORT.STATUS_NUM.CLOSED) {
         return translateLocal('common.done');
     }
-    if (report.stateNum === CONST.REPORT.STATE_NUM.APPROVED && report.statusNum === CONST.REPORT.STATUS_NUM.APPROVED) {
+    if (stateNum === CONST.REPORT.STATE_NUM.APPROVED && statusNum === CONST.REPORT.STATUS_NUM.APPROVED) {
         return translateLocal('iou.approved');
     }
     if (
-        (report.stateNum === CONST.REPORT.STATE_NUM.APPROVED && report.statusNum === CONST.REPORT.STATUS_NUM.REIMBURSED) ||
-        (report.stateNum === CONST.REPORT.STATE_NUM.BILLING && report.statusNum === CONST.REPORT.STATUS_NUM.REIMBURSED) ||
-        (report.stateNum === CONST.REPORT.STATE_NUM.AUTOREIMBURSED && report.statusNum === CONST.REPORT.STATUS_NUM.REIMBURSED)
+        (stateNum === CONST.REPORT.STATE_NUM.APPROVED && statusNum === CONST.REPORT.STATUS_NUM.REIMBURSED) ||
+        (stateNum === CONST.REPORT.STATE_NUM.BILLING && statusNum === CONST.REPORT.STATUS_NUM.REIMBURSED) ||
+        (stateNum === CONST.REPORT.STATE_NUM.AUTOREIMBURSED && statusNum === CONST.REPORT.STATUS_NUM.REIMBURSED)
     ) {
         return translateLocal('iou.settledExpensify');
     }

From 198c9ca174afadca7b10866bae16b030629d65e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Fri, 25 Jul 2025 14:39:26 +0200
Subject: [PATCH 40/42] Adjusted the tests to the changes in
 getReportStatusTranslation

---
 tests/unit/ReportUtilsTest.ts | 55 +++++++++--------------------------
 1 file changed, 13 insertions(+), 42 deletions(-)

diff --git a/tests/unit/ReportUtilsTest.ts b/tests/unit/ReportUtilsTest.ts
index be0fc359620a..e2c1886a20cf 100644
--- a/tests/unit/ReportUtilsTest.ts
+++ b/tests/unit/ReportUtilsTest.ts
@@ -4723,66 +4723,37 @@ describe('ReportUtils', () => {
 
     describe('getReportStatusTranslation', () => {
         it('should return "Draft" for state 0, status 0', () => {
-            const report: Report = {
-                ...createRandomReport(0),
-                stateNum: CONST.REPORT.STATE_NUM.OPEN,
-                statusNum: CONST.REPORT.STATUS_NUM.OPEN,
-            };
-            expect(getReportStatusTranslation(report)).toBe(translateLocal('common.draft'));
+            expect(getReportStatusTranslation(CONST.REPORT.STATE_NUM.OPEN, CONST.REPORT.STATUS_NUM.OPEN)).toBe(translateLocal('common.draft'));
         });
 
         it('should return "Outstanding" for state 1, status 1', () => {
-            const report: Report = {
-                ...createRandomReport(1),
-                stateNum: CONST.REPORT.STATE_NUM.SUBMITTED,
-                statusNum: CONST.REPORT.STATUS_NUM.SUBMITTED,
-            };
-            expect(getReportStatusTranslation(report)).toBe(translateLocal('common.outstanding'));
+            expect(getReportStatusTranslation(CONST.REPORT.STATE_NUM.SUBMITTED, CONST.REPORT.STATUS_NUM.SUBMITTED)).toBe(translateLocal('common.outstanding'));
         });
 
         it('should return "Done" for state 2, status 2', () => {
-            const report: Report = {
-                ...createRandomReport(2),
-                stateNum: CONST.REPORT.STATE_NUM.APPROVED,
-                statusNum: CONST.REPORT.STATUS_NUM.CLOSED,
-            };
-            expect(getReportStatusTranslation(report)).toBe(translateLocal('common.done'));
+            expect(getReportStatusTranslation(CONST.REPORT.STATE_NUM.APPROVED, CONST.REPORT.STATUS_NUM.CLOSED)).toBe(translateLocal('common.done'));
         });
 
         it('should return "Approved" for state 2, status 3', () => {
-            const report: Report = {
-                ...createRandomReport(3),
-                stateNum: CONST.REPORT.STATE_NUM.APPROVED,
-                statusNum: CONST.REPORT.STATUS_NUM.APPROVED,
-            };
-            expect(getReportStatusTranslation(report)).toBe(translateLocal('iou.approved'));
+            expect(getReportStatusTranslation(CONST.REPORT.STATE_NUM.APPROVED, CONST.REPORT.STATUS_NUM.APPROVED)).toBe(translateLocal('iou.approved'));
         });
 
         it('should return "Paid" for state 2, status 4', () => {
-            const report: Report = {
-                ...createRandomReport(4),
-                stateNum: CONST.REPORT.STATE_NUM.APPROVED,
-                statusNum: CONST.REPORT.STATUS_NUM.REIMBURSED,
-            };
-            expect(getReportStatusTranslation(report)).toBe(translateLocal('iou.settledExpensify'));
+            expect(getReportStatusTranslation(CONST.REPORT.STATE_NUM.APPROVED, CONST.REPORT.STATUS_NUM.REIMBURSED)).toBe(translateLocal('iou.settledExpensify'));
         });
 
         it('should return "Paid" for state 3, status 4', () => {
-            const report: Report = {
-                ...createRandomReport(5),
-                stateNum: CONST.REPORT.STATE_NUM.BILLING,
-                statusNum: CONST.REPORT.STATUS_NUM.REIMBURSED,
-            };
-            expect(getReportStatusTranslation(report)).toBe(translateLocal('iou.settledExpensify'));
+            expect(getReportStatusTranslation(CONST.REPORT.STATE_NUM.BILLING, CONST.REPORT.STATUS_NUM.REIMBURSED)).toBe(translateLocal('iou.settledExpensify'));
         });
 
         it('should return "Paid" for state 6, status 4', () => {
-            const report: Report = {
-                ...createRandomReport(6),
-                stateNum: CONST.REPORT.STATE_NUM.AUTOREIMBURSED,
-                statusNum: CONST.REPORT.STATUS_NUM.REIMBURSED,
-            };
-            expect(getReportStatusTranslation(report)).toBe(translateLocal('iou.settledExpensify'));
+            expect(getReportStatusTranslation(CONST.REPORT.STATE_NUM.AUTOREIMBURSED, CONST.REPORT.STATUS_NUM.REIMBURSED)).toBe(translateLocal('iou.settledExpensify'));
+        });
+
+        it('should return an empty string when stateNum or statusNum is undefined', () => {
+            expect(getReportStatusTranslation(undefined, undefined)).toBe('');
+            expect(getReportStatusTranslation(CONST.REPORT.STATE_NUM.OPEN, undefined)).toBe('');
+            expect(getReportStatusTranslation(undefined, CONST.REPORT.STATUS_NUM.OPEN)).toBe('');
         });
     });
 });

From b2618616633de5ebf0059e8139c45c74f5c2ec78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Fri, 25 Jul 2025 14:49:37 +0200
Subject: [PATCH 41/42] Fixed getReportStatusTranslation function to properly
 hangle undefined stateNum & statusNum

---
 src/libs/ReportUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 391ba84ccd03..9da3c97ddf86 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -11141,7 +11141,7 @@ function getMoneyReportPreviewName(action: ReportAction, iouReport: OnyxEntry<Re
  * ========================================
  */
 function getReportStatusTranslation(stateNum?: number, statusNum?: number): string {
-    if (!stateNum || !statusNum) {
+    if (stateNum === undefined || statusNum === undefined) {
         return '';
     }
 

From a61d1d7073b64e5f1ec95f2139975f5bb2b27aa1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Fri, 25 Jul 2025 15:15:43 +0200
Subject: [PATCH 42/42] Added comment to clarify icon occurrence

---
 .../MoneyRequestReportPreviewContent.tsx                         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 92bf42ca6208..6a457d450b24 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -397,6 +397,7 @@ function MoneyRequestReportPreviewContent({
             ? {maxWidth: reportPreviewStyles.transactionPreviewCarouselStyle.width}
             : {};
 
+    // We also show icons in case of Approved or Paid report for easier identification at glance
     const isIconNeeded = useMemo(() => {
         return iouSettled || isApproved;
     }, [iouSettled, isApproved]);