Fix - Implement the report status to Reports > Reports and the Report view

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 ? 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 && (

src/components/HeaderWithBackButton/index.tsx

@@ -37,6 +37,7 @@ function HeaderWithBackButton({
     report,
     policyAvatar,
     shouldShowReportAvatarWithDisplay = false,
+    shouldDisplayStatus,
     shouldShowBackButton = true,
     shouldShowBorderBottom = false,
     shouldShowCloseButton = false,
@@ -97,6 +98,7 @@ function HeaderWithBackButton({
             return (
                 <AvatarWithDisplayName
                     report={report}
+                    shouldDisplayStatus={shouldDisplayStatus}
                     shouldEnableDetailPageNavigation={shouldEnableDetailPageNavigation}
                     openParentReportInCurrentTab={openParentReportInCurrentTab}
                 />
@@ -131,6 +133,7 @@ function HeaderWithBackButton({
         titleColor,
         translate,
         openParentReportInCurrentTab,
+        shouldDisplayStatus,
     ]);
     const ThreeDotMenuButton = useMemo(() => {
         if (shouldShowThreeDotsButton) {

src/components/HeaderWithBackButton/types.ts

@@ -63,6 +63,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;
 

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}

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>

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