From ca5897abbd8f43cd2c0f12a4133c0914c3a70aaa Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Tue, 2 Sep 2025 15:50:55 +0300
Subject: [PATCH 1/2] display status text of an expense report

---
 src/components/AvatarWithDisplayName.tsx      | 7 +++++++
 src/components/HeaderWithBackButton/index.tsx | 3 +++
 src/components/HeaderWithBackButton/types.ts  | 3 +++
 src/components/MoneyReportHeader.tsx          | 1 +
 src/components/ParentNavigationSubtitle.tsx   | 5 +++++
 src/components/ReportSearchHeader/index.tsx   | 1 +
 6 files changed, 20 insertions(+)

diff --git a/src/components/AvatarWithDisplayName.tsx b/src/components/AvatarWithDisplayName.tsx
index ddb34c1a10f0..845e5ec22b0a 100644
--- a/src/components/AvatarWithDisplayName.tsx
+++ b/src/components/AvatarWithDisplayName.tsx
@@ -17,6 +17,7 @@ import {
     getDisplayNamesWithTooltips,
     getParentNavigationSubtitle,
     getReportName,
+    getReportStatusTranslation,
     isChatThread,
     isExpenseReport,
     isInvoiceReport,
@@ -58,6 +59,9 @@ type AvatarWithDisplayNameProps = {
     /** Whether we should enable custom title logic designed for search lis */
     shouldUseCustomSearchTitleName?: boolean;
 
+    /** Whether we should display the status of the report */
+    shouldDisplayStatus?: boolean;
+
     /** Transactions inside report */
     transactions?: TransactionListItemType[];
 
@@ -154,6 +158,7 @@ function AvatarWithDisplayName({
     transactions = [],
     openParentReportInCurrentTab = false,
     avatarBorderColor: avatarBorderColorProp,
+    shouldDisplayStatus = false,
 }: AvatarWithDisplayNameProps) {
     const {localeCompare} = useLocalize();
     const [parentReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report?.parentReportID}`, {canEvict: false, canBeMissing: false});
@@ -177,6 +182,7 @@ function AvatarWithDisplayName({
     const ownerPersonalDetails = getPersonalDetailsForAccountIDs(report?.ownerAccountID ? [report.ownerAccountID] : [], personalDetails);
     const displayNamesWithTooltips = getDisplayNamesWithTooltips(Object.values(ownerPersonalDetails), false, localeCompare);
     const avatarBorderColor = avatarBorderColorProp ?? (isAnonymous ? theme.highlightBG : theme.componentBG);
+    const statusText = shouldDisplayStatus && isExpenseReport(report) ? getReportStatusTranslation(report?.stateNum, report?.statusNum) : undefined;
 
     const actorAccountID = useRef<number | null>(null);
     useEffect(() => {
@@ -272,6 +278,7 @@ function AvatarWithDisplayName({
                                 parentReportActionID={report?.parentReportActionID}
                                 pressableStyles={[styles.alignSelfStart, styles.mw100]}
                                 openParentReportInCurrentTab={openParentReportInCurrentTab}
+                                statusText={statusText}
                             />
                         )}
                         {!!subtitle && (
diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx
index 5ebd0c54cf49..f2a32d7c7e04 100755
--- a/src/components/HeaderWithBackButton/index.tsx
+++ b/src/components/HeaderWithBackButton/index.tsx
@@ -37,6 +37,7 @@ function HeaderWithBackButton({
     report,
     policyAvatar,
     shouldShowReportAvatarWithDisplay = false,
+    shouldDisplayStatus,
     shouldShowBackButton = true,
     shouldShowBorderBottom = false,
     shouldShowCloseButton = false,
@@ -101,6 +102,7 @@ function HeaderWithBackButton({
             return (
                 <AvatarWithDisplayName
                     report={report}
+                    shouldDisplayStatus={shouldDisplayStatus}
                     shouldEnableDetailPageNavigation={shouldEnableDetailPageNavigation}
                     openParentReportInCurrentTab={openParentReportInCurrentTab}
                 />
@@ -135,6 +137,7 @@ function HeaderWithBackButton({
         titleColor,
         translate,
         openParentReportInCurrentTab,
+        shouldDisplayStatus,
     ]);
     const ThreeDotMenuButton = useMemo(() => {
         if (shouldShowThreeDotsButton) {
diff --git a/src/components/HeaderWithBackButton/types.ts b/src/components/HeaderWithBackButton/types.ts
index fcb0541f1542..fc831f9ff45a 100644
--- a/src/components/HeaderWithBackButton/types.ts
+++ b/src/components/HeaderWithBackButton/types.ts
@@ -64,6 +64,9 @@ type HeaderWithBackButtonProps = Partial<ChildrenProps> & {
     /** Whether we should show a border on the bottom of the Header */
     shouldShowBorderBottom?: boolean;
 
+    /** Whether we should display the status of the report */
+    shouldDisplayStatus?: boolean;
+
     /** Whether we should show a download button */
     shouldShowDownloadButton?: boolean;
 
diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index e237e21a9e0b..921b143aa1c3 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -1220,6 +1220,7 @@ function MoneyReportHeader({
         <View style={[styles.pt0, styles.borderBottom]}>
             <HeaderWithBackButton
                 shouldShowReportAvatarWithDisplay
+                shouldDisplayStatus
                 shouldShowPinButton={false}
                 report={moneyRequestReport}
                 shouldShowBackButton={shouldShowBackButton}
diff --git a/src/components/ParentNavigationSubtitle.tsx b/src/components/ParentNavigationSubtitle.tsx
index 74a6f066e1f3..9995665301b6 100644
--- a/src/components/ParentNavigationSubtitle.tsx
+++ b/src/components/ParentNavigationSubtitle.tsx
@@ -37,6 +37,9 @@ type ParentNavigationSubtitleProps = {
 
     /** Whether to open the parent report link in the current tab if possible */
     openParentReportInCurrentTab?: boolean;
+
+    /** The status text of the expense report */
+    statusText?: string;
 };
 
 function ParentNavigationSubtitle({
@@ -45,6 +48,7 @@ function ParentNavigationSubtitle({
     parentReportID = '',
     pressableStyles,
     openParentReportInCurrentTab = false,
+    statusText,
 }: ParentNavigationSubtitleProps) {
     const currentRoute = useRoute();
     const styles = useThemeStyles();
@@ -108,6 +112,7 @@ function ParentNavigationSubtitle({
             style={[styles.optionAlternateText, styles.textLabelSupporting]}
             numberOfLines={1}
         >
+            {!!statusText && <Text style={[styles.optionAlternateText, styles.textLabelSupporting]}>{`${statusText} ${CONST.DOT_SEPARATOR} `}</Text>}
             {!!reportName && (
                 <>
                     <Text style={[styles.optionAlternateText, styles.textLabelSupporting]}>{`${translate('threads.from')} `}</Text>
diff --git a/src/components/ReportSearchHeader/index.tsx b/src/components/ReportSearchHeader/index.tsx
index fd2896f44ec3..406d9e74c4a2 100755
--- a/src/components/ReportSearchHeader/index.tsx
+++ b/src/components/ReportSearchHeader/index.tsx
@@ -10,6 +10,7 @@ function ReportSearchHeader({report, style, transactions, avatarBorderColor}: Re
     const middleContent = useMemo(() => {
         return (
             <AvatarWithDisplayName
+                shouldDisplayStatus
                 report={report}
                 transactions={transactions}
                 shouldUseCustomSearchTitleName

From 803250df8bc693f1f43765da0de6130ef2dd47aa Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Fri, 5 Sep 2025 20:00:00 +0300
Subject: [PATCH 2/2] show the text for iou report and invoice reports too

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

diff --git a/src/components/AvatarWithDisplayName.tsx b/src/components/AvatarWithDisplayName.tsx
index 845e5ec22b0a..d492b62a3108 100644
--- a/src/components/AvatarWithDisplayName.tsx
+++ b/src/components/AvatarWithDisplayName.tsx
@@ -182,7 +182,7 @@ function AvatarWithDisplayName({
     const ownerPersonalDetails = getPersonalDetailsForAccountIDs(report?.ownerAccountID ? [report.ownerAccountID] : [], personalDetails);
     const displayNamesWithTooltips = getDisplayNamesWithTooltips(Object.values(ownerPersonalDetails), false, localeCompare);
     const avatarBorderColor = avatarBorderColorProp ?? (isAnonymous ? theme.highlightBG : theme.componentBG);
-    const statusText = shouldDisplayStatus && isExpenseReport(report) ? getReportStatusTranslation(report?.stateNum, report?.statusNum) : undefined;
+    const statusText = shouldDisplayStatus ? getReportStatusTranslation(report?.stateNum, report?.statusNum) : undefined;
 
     const actorAccountID = useRef<number | null>(null);
     useEffect(() => {