From 9946cbebb359eb7b16f6a65d37a234b667d66673 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Mon, 1 Jul 2024 12:00:04 +0200
Subject: [PATCH 01/12] add an option to rename money report in details

---
 src/components/MenuItem.tsx                   |  9 ++++
 .../ReportActionItem/MoneyReportView.tsx      |  7 +++-
 src/pages/ReportDetailsPage.tsx               | 42 ++++++++++++++++++-
 3 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 8d5fe98bb99d..c38f69e15eb3 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -260,6 +260,9 @@ type MenuItemBaseProps = {
     /** Text to display under the main item */
     furtherDetails?: string;
 
+    /** Render custom content under the main item */
+    furtherDetailsContent?: () => ReactNode;
+
     /** The function that should be called when this component is LongPressed or right-clicked. */
     onSecondaryInteraction?: (event: GestureResponderEvent | MouseEvent) => void;
 
@@ -335,6 +338,7 @@ function MenuItem(
         iconRight = Expensicons.ArrowRight,
         furtherDetailsIcon,
         furtherDetails,
+        furtherDetailsContent,
         description,
         helperText,
         helperTextStyle,
@@ -680,6 +684,11 @@ function MenuItem(
                                                                 </Text>
                                                             </View>
                                                         )}
+                                                        {!!furtherDetailsContent && (
+                                                            <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                                                                {furtherDetailsContent()}
+                                                            </View>
+                                                        )}
                                                         {titleComponent}
                                                     </View>
                                                 </View>
diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx
index a724fd27f134..1d922017a3c9 100644
--- a/src/components/ReportActionItem/MoneyReportView.tsx
+++ b/src/components/ReportActionItem/MoneyReportView.tsx
@@ -64,8 +64,11 @@ function MoneyReportView({report, policy}: MoneyReportViewProps) {
                 <>
                     {ReportUtils.reportFieldsEnabled(report) &&
                         sortedPolicyReportFields.map((reportField) => {
-                            const isTitleField = ReportUtils.isReportFieldOfTypeTitle(reportField);
-                            const fieldValue = isTitleField ? report.reportName : reportField.value ?? reportField.defaultValue;
+                            if(ReportUtils.isReportFieldOfTypeTitle(reportField)) {
+                                return null;
+                            }
+                            
+                            const fieldValue = reportField.value ?? reportField.defaultValue;
                             const isFieldDisabled = ReportUtils.isReportFieldDisabled(report, reportField, policy);
                             const fieldKey = ReportUtils.getReportFieldKey(reportField.fieldID);
 
diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx
index b1ef9fbfdd97..0b001827cd52 100644
--- a/src/pages/ReportDetailsPage.tsx
+++ b/src/pages/ReportDetailsPage.tsx
@@ -1,6 +1,7 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
+import {Str} from 'expensify-common';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx, withOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
@@ -527,6 +528,43 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
         </OfflineWithFeedback>
     );
 
+    const titleField = useMemo<OnyxTypes.PolicyReportField | undefined>((): OnyxTypes.PolicyReportField | undefined => {
+        const fields = ReportUtils.getAvailableReportFields(report, Object.values(policy?.fieldList ?? {}));
+        return fields.find((reportField) => ReportUtils.isReportFieldOfTypeTitle(reportField));
+    }, []);
+    const fieldKey = ReportUtils.getReportFieldKey(titleField?.fieldID ?? '-1');
+    const isFieldDisabled = ReportUtils.isReportFieldDisabled(report, titleField, policy);
+
+    const shouldShowTitleField = caseID !== CASES.MONEY_REQUEST && !isFieldDisabled;
+
+    const nameSectionTitleField = (titleField &&
+        <OfflineWithFeedback
+            pendingAction={report.pendingFields?.[fieldKey]}
+            errors={report.errorFields?.[fieldKey]}
+            errorRowStyles={styles.ph5}
+            key={`menuItem-${fieldKey}`}
+            onClose={() => Report.clearReportFieldErrors(report.reportID, titleField)}
+        >
+            <View style={[styles.flex1, !isFieldDisabled && styles.mt3]}>
+                <MenuItemWithTopDescription
+                    shouldShowRightIcon={!isFieldDisabled}
+                    interactive={!isFieldDisabled}
+                    title={reportName}
+                    titleStyle={styles.newKansasLarge}
+                    shouldCheckActionAllowedOnPress={false}
+                    description={Str.UCFirst(titleField.name)}
+                    onPress={() => Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, report.policyID ?? '-1', titleField.fieldID ?? '-1'))}
+                    furtherDetailsContent={() => (<ParentNavigationSubtitle
+                        parentNavigationSubtitleData={parentNavigationSubtitleData}
+                        parentReportID={report?.parentReportID}
+                        parentReportActionID={report?.parentReportActionID}
+                        pressableStyles={[styles.mt1, styles.mw100]}
+                    />)}
+                />
+            </View>
+        </OfflineWithFeedback>
+    );
+
     const navigateBackToAfterDelete = useRef<Route>();
 
     const deleteTransaction = useCallback(() => {
@@ -555,9 +593,11 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
                 <ScrollView style={[styles.flex1]}>
                     <View style={[styles.reportDetailsTitleContainer, styles.pb0]}>
                         {renderedAvatar}
-                        {isExpenseReport && nameSectionExpenseIOU}
+                        {isExpenseReport && !shouldShowTitleField && nameSectionExpenseIOU}
                     </View>
 
+                    {isExpenseReport && shouldShowTitleField && nameSectionTitleField}
+
                     {!isExpenseReport && nameSectionGroupWorkspace}
 
                     {shouldShowReportDescription && (

From 384abe84b9923244fc71a3da0291a668b18a3c60 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Mon, 1 Jul 2024 12:01:50 +0200
Subject: [PATCH 02/12] fix prettier

---
 src/components/MenuItem.tsx                      |  6 +-----
 .../ReportActionItem/MoneyReportView.tsx         |  4 ++--
 src/pages/ReportDetailsPage.tsx                  | 16 +++++++++-------
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index c38f69e15eb3..03bdff47a45e 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -684,11 +684,7 @@ function MenuItem(
                                                                 </Text>
                                                             </View>
                                                         )}
-                                                        {!!furtherDetailsContent && (
-                                                            <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                                                {furtherDetailsContent()}
-                                                            </View>
-                                                        )}
+                                                        {!!furtherDetailsContent && <View style={[styles.flexRow, styles.alignItemsCenter]}>{furtherDetailsContent()}</View>}
                                                         {titleComponent}
                                                     </View>
                                                 </View>
diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx
index 1d922017a3c9..4bd6d4103bee 100644
--- a/src/components/ReportActionItem/MoneyReportView.tsx
+++ b/src/components/ReportActionItem/MoneyReportView.tsx
@@ -64,10 +64,10 @@ function MoneyReportView({report, policy}: MoneyReportViewProps) {
                 <>
                     {ReportUtils.reportFieldsEnabled(report) &&
                         sortedPolicyReportFields.map((reportField) => {
-                            if(ReportUtils.isReportFieldOfTypeTitle(reportField)) {
+                            if (ReportUtils.isReportFieldOfTypeTitle(reportField)) {
                                 return null;
                             }
-                            
+
                             const fieldValue = reportField.value ?? reportField.defaultValue;
                             const isFieldDisabled = ReportUtils.isReportFieldDisabled(report, reportField, policy);
                             const fieldKey = ReportUtils.getReportFieldKey(reportField.fieldID);
diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx
index 0b001827cd52..5b57a9664f5f 100644
--- a/src/pages/ReportDetailsPage.tsx
+++ b/src/pages/ReportDetailsPage.tsx
@@ -537,7 +537,7 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
 
     const shouldShowTitleField = caseID !== CASES.MONEY_REQUEST && !isFieldDisabled;
 
-    const nameSectionTitleField = (titleField &&
+    const nameSectionTitleField = titleField && (
         <OfflineWithFeedback
             pendingAction={report.pendingFields?.[fieldKey]}
             errors={report.errorFields?.[fieldKey]}
@@ -554,12 +554,14 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
                     shouldCheckActionAllowedOnPress={false}
                     description={Str.UCFirst(titleField.name)}
                     onPress={() => Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, report.policyID ?? '-1', titleField.fieldID ?? '-1'))}
-                    furtherDetailsContent={() => (<ParentNavigationSubtitle
-                        parentNavigationSubtitleData={parentNavigationSubtitleData}
-                        parentReportID={report?.parentReportID}
-                        parentReportActionID={report?.parentReportActionID}
-                        pressableStyles={[styles.mt1, styles.mw100]}
-                    />)}
+                    furtherDetailsContent={() => (
+                        <ParentNavigationSubtitle
+                            parentNavigationSubtitleData={parentNavigationSubtitleData}
+                            parentReportID={report?.parentReportID}
+                            parentReportActionID={report?.parentReportActionID}
+                            pressableStyles={[styles.mt1, styles.mw100]}
+                        />
+                    )}
                 />
             </View>
         </OfflineWithFeedback>

From 51cbec4a422e5146327c750cc77950e6c67e17e8 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Mon, 1 Jul 2024 12:35:24 +0200
Subject: [PATCH 03/12] fix lint errors and slightly refactor MenuItem

---
 src/components/MenuItem.tsx     |  6 +++---
 src/pages/ReportDetailsPage.tsx | 20 +++++++++++---------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 03bdff47a45e..78f3b66b430b 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -261,7 +261,7 @@ type MenuItemBaseProps = {
     furtherDetails?: string;
 
     /** Render custom content under the main item */
-    furtherDetailsContent?: () => ReactNode;
+    furtherDetailsComponent?: ReactElement;
 
     /** The function that should be called when this component is LongPressed or right-clicked. */
     onSecondaryInteraction?: (event: GestureResponderEvent | MouseEvent) => void;
@@ -338,7 +338,7 @@ function MenuItem(
         iconRight = Expensicons.ArrowRight,
         furtherDetailsIcon,
         furtherDetails,
-        furtherDetailsContent,
+        furtherDetailsComponent,
         description,
         helperText,
         helperTextStyle,
@@ -684,7 +684,7 @@ function MenuItem(
                                                                 </Text>
                                                             </View>
                                                         )}
-                                                        {!!furtherDetailsContent && <View style={[styles.flexRow, styles.alignItemsCenter]}>{furtherDetailsContent()}</View>}
+                                                        {!!furtherDetailsComponent && <View style={[styles.flexRow, styles.alignItemsCenter]}>{furtherDetailsComponent}</View>}
                                                         {titleComponent}
                                                     </View>
                                                 </View>
diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx
index 5b57a9664f5f..344a1c660ca6 100644
--- a/src/pages/ReportDetailsPage.tsx
+++ b/src/pages/ReportDetailsPage.tsx
@@ -531,12 +531,21 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
     const titleField = useMemo<OnyxTypes.PolicyReportField | undefined>((): OnyxTypes.PolicyReportField | undefined => {
         const fields = ReportUtils.getAvailableReportFields(report, Object.values(policy?.fieldList ?? {}));
         return fields.find((reportField) => ReportUtils.isReportFieldOfTypeTitle(reportField));
-    }, []);
+    }, [report, policy?.fieldList]);
     const fieldKey = ReportUtils.getReportFieldKey(titleField?.fieldID ?? '-1');
     const isFieldDisabled = ReportUtils.isReportFieldDisabled(report, titleField, policy);
 
     const shouldShowTitleField = caseID !== CASES.MONEY_REQUEST && !isFieldDisabled;
 
+    const nameSectionFurtherDetailsContent = (
+        <ParentNavigationSubtitle
+            parentNavigationSubtitleData={parentNavigationSubtitleData}
+            parentReportID={report?.parentReportID}
+            parentReportActionID={report?.parentReportActionID}
+            pressableStyles={[styles.mt1, styles.mw100]}
+        />
+    );
+
     const nameSectionTitleField = titleField && (
         <OfflineWithFeedback
             pendingAction={report.pendingFields?.[fieldKey]}
@@ -554,14 +563,7 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
                     shouldCheckActionAllowedOnPress={false}
                     description={Str.UCFirst(titleField.name)}
                     onPress={() => Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, report.policyID ?? '-1', titleField.fieldID ?? '-1'))}
-                    furtherDetailsContent={() => (
-                        <ParentNavigationSubtitle
-                            parentNavigationSubtitleData={parentNavigationSubtitleData}
-                            parentReportID={report?.parentReportID}
-                            parentReportActionID={report?.parentReportActionID}
-                            pressableStyles={[styles.mt1, styles.mw100]}
-                        />
-                    )}
+                    furtherDetailsComponent={nameSectionFurtherDetailsContent}
                 />
             </View>
         </OfflineWithFeedback>

From c1b71871f28ea5013f6475622165b6d447ebc25a Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Mon, 1 Jul 2024 16:47:31 +0200
Subject: [PATCH 04/12] fix prettier

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

diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx
index 344a1c660ca6..a10cb4861144 100644
--- a/src/pages/ReportDetailsPage.tsx
+++ b/src/pages/ReportDetailsPage.tsx
@@ -1,7 +1,7 @@
 import type {StackScreenProps} from '@react-navigation/stack';
+import {Str} from 'expensify-common';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
-import {Str} from 'expensify-common';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx, withOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';

From e8ad22ebb086d134930b8b6460d212d92bc6267e Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Tue, 2 Jul 2024 19:28:19 +0200
Subject: [PATCH 05/12] add conditional for name section edit and invitees

---
 src/libs/ReportUtils.ts         | 10 ++++++++++
 src/pages/ReportDetailsPage.tsx |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index b17fe7266079..741ff67c9f17 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -6853,6 +6853,15 @@ function isNonAdminOrOwnerOfPolicyExpenseChat(report: OnyxInputOrEntry<Report>,
     return isPolicyExpenseChat(report) && !(PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPolicyOwner(policy, currentUserAccountID ?? -1) || isReportOwner(report));
 }
 
+function isAdminOwnerOrParticipantOfPolicyExpenseChat(report: OnyxInputOrEntry<Report>, policy: OnyxInputOrEntry<Policy>): boolean {
+    return (
+        (isPolicyExpenseChat(report) && PolicyUtils.isPolicyAdmin(policy)) ||
+        PolicyUtils.isPolicyOwner(policy, currentUserAccountID ?? -1) ||
+        isReportOwner(report) ||
+        isReportParticipant(report)
+    );
+}
+
 /**
  * Whether the user can join a report
  */
@@ -7312,6 +7321,7 @@ export {
     isCurrentUserInvoiceReceiver,
     isDraftReport,
     changeMoneyRequestHoldStatus,
+    isAdminOwnerOrParticipantOfPolicyExpenseChat,
     createDraftWorkspaceAndNavigateToConfirmationScreen,
     isChatUsedForOnboarding,
     getChatUsedForOnboarding,
diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx
index a10cb4861144..041b939a247e 100644
--- a/src/pages/ReportDetailsPage.tsx
+++ b/src/pages/ReportDetailsPage.tsx
@@ -535,7 +535,7 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
     const fieldKey = ReportUtils.getReportFieldKey(titleField?.fieldID ?? '-1');
     const isFieldDisabled = ReportUtils.isReportFieldDisabled(report, titleField, policy);
 
-    const shouldShowTitleField = caseID !== CASES.MONEY_REQUEST && !isFieldDisabled;
+    const shouldShowTitleField = caseID !== CASES.MONEY_REQUEST && !isFieldDisabled && ReportUtils.isAdminOwnerOrParticipantOfPolicyExpenseChat(report, policy);
 
     const nameSectionFurtherDetailsContent = (
         <ParentNavigationSubtitle

From 5fa274a046b8ccae434df97f5b898778e973f3a9 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Tue, 2 Jul 2024 20:52:33 +0200
Subject: [PATCH 06/12] fix typecheck with correct participant arguments

---
 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 741ff67c9f17..4fed0f573cc0 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -6853,12 +6853,12 @@ function isNonAdminOrOwnerOfPolicyExpenseChat(report: OnyxInputOrEntry<Report>,
     return isPolicyExpenseChat(report) && !(PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPolicyOwner(policy, currentUserAccountID ?? -1) || isReportOwner(report));
 }
 
-function isAdminOwnerOrParticipantOfPolicyExpenseChat(report: OnyxInputOrEntry<Report>, policy: OnyxInputOrEntry<Policy>): boolean {
+function isAdminOwnerOrParticipantOfPolicyExpenseChat(report: OnyxEntry<Report>, policy: OnyxEntry<Policy>): boolean {
     return (
         (isPolicyExpenseChat(report) && PolicyUtils.isPolicyAdmin(policy)) ||
         PolicyUtils.isPolicyOwner(policy, currentUserAccountID ?? -1) ||
         isReportOwner(report) ||
-        isReportParticipant(report)
+        isReportParticipant(currentUserAccountID ?? 0, report)
     );
 }
 

From b2531dc67f22d5566b2ee5f4f364dd56ee53a8a6 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Tue, 2 Jul 2024 20:54:58 +0200
Subject: [PATCH 07/12] remove faulty conditional

---
 src/libs/ReportUtils.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 4fed0f573cc0..4535881b21c0 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -6854,12 +6854,7 @@ function isNonAdminOrOwnerOfPolicyExpenseChat(report: OnyxInputOrEntry<Report>,
 }
 
 function isAdminOwnerOrParticipantOfPolicyExpenseChat(report: OnyxEntry<Report>, policy: OnyxEntry<Policy>): boolean {
-    return (
-        (isPolicyExpenseChat(report) && PolicyUtils.isPolicyAdmin(policy)) ||
-        PolicyUtils.isPolicyOwner(policy, currentUserAccountID ?? -1) ||
-        isReportOwner(report) ||
-        isReportParticipant(currentUserAccountID ?? 0, report)
-    );
+    return (isPolicyExpenseChat(report) && PolicyUtils.isPolicyAdmin(policy)) || PolicyUtils.isPolicyOwner(policy, currentUserAccountID ?? -1) || isReportOwner(report);
 }
 
 /**

From b9adf74c949bb416529da727e396b7ec4e4d1b7a Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Wed, 3 Jul 2024 11:18:22 +0200
Subject: [PATCH 08/12] fix faulty conditional for expense title

---
 src/libs/ReportUtils.ts         | 6 +++---
 src/pages/ReportDetailsPage.tsx | 6 ++++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 4535881b21c0..f229e29a5c22 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -6853,8 +6853,8 @@ function isNonAdminOrOwnerOfPolicyExpenseChat(report: OnyxInputOrEntry<Report>,
     return isPolicyExpenseChat(report) && !(PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPolicyOwner(policy, currentUserAccountID ?? -1) || isReportOwner(report));
 }
 
-function isAdminOwnerOrParticipantOfPolicyExpenseChat(report: OnyxEntry<Report>, policy: OnyxEntry<Policy>): boolean {
-    return (isPolicyExpenseChat(report) && PolicyUtils.isPolicyAdmin(policy)) || PolicyUtils.isPolicyOwner(policy, currentUserAccountID ?? -1) || isReportOwner(report);
+function isAdminOwnerOrReportOwner(report: OnyxEntry<Report>, policy: OnyxEntry<Policy>): boolean {
+    return PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPolicyOwner(policy, currentUserAccountID ?? -1) || isReportOwner(report);
 }
 
 /**
@@ -7316,7 +7316,7 @@ export {
     isCurrentUserInvoiceReceiver,
     isDraftReport,
     changeMoneyRequestHoldStatus,
-    isAdminOwnerOrParticipantOfPolicyExpenseChat,
+    isAdminOwnerOrReportOwner,
     createDraftWorkspaceAndNavigateToConfirmationScreen,
     isChatUsedForOnboarding,
     getChatUsedForOnboarding,
diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx
index 041b939a247e..8cbf5ae7d784 100644
--- a/src/pages/ReportDetailsPage.tsx
+++ b/src/pages/ReportDetailsPage.tsx
@@ -535,7 +535,9 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
     const fieldKey = ReportUtils.getReportFieldKey(titleField?.fieldID ?? '-1');
     const isFieldDisabled = ReportUtils.isReportFieldDisabled(report, titleField, policy);
 
-    const shouldShowTitleField = caseID !== CASES.MONEY_REQUEST && !isFieldDisabled && ReportUtils.isAdminOwnerOrParticipantOfPolicyExpenseChat(report, policy);
+    const shouldShowTitleField = caseID !== CASES.MONEY_REQUEST && !isFieldDisabled && ReportUtils.isAdminOwnerOrReportOwner(report, policy);
+
+    console.log(PolicyUtils.isPolicyAdmin(policy));
 
     const nameSectionFurtherDetailsContent = (
         <ParentNavigationSubtitle
@@ -554,7 +556,7 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
             key={`menuItem-${fieldKey}`}
             onClose={() => Report.clearReportFieldErrors(report.reportID, titleField)}
         >
-            <View style={[styles.flex1, !isFieldDisabled && styles.mt3]}>
+            <View style={[styles.flex1]}>
                 <MenuItemWithTopDescription
                     shouldShowRightIcon={!isFieldDisabled}
                     interactive={!isFieldDisabled}

From 2e13e10a8f50d575534fa48c7196d804747730e8 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Wed, 3 Jul 2024 11:39:06 +0200
Subject: [PATCH 09/12] remove leftover code and fix lint

---
 src/pages/ReportDetailsPage.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx
index 5dad0abeee50..12d5d682c470 100644
--- a/src/pages/ReportDetailsPage.tsx
+++ b/src/pages/ReportDetailsPage.tsx
@@ -547,8 +547,6 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
 
     const shouldShowTitleField = caseID !== CASES.MONEY_REQUEST && !isFieldDisabled && ReportUtils.isAdminOwnerOrReportOwner(report, policy);
 
-    console.log(PolicyUtils.isPolicyAdmin(policy));
-
     const nameSectionFurtherDetailsContent = (
         <ParentNavigationSubtitle
             parentNavigationSubtitleData={parentNavigationSubtitleData}

From a6861ac3ae346f5be737dd3e6d1e1b69c856f022 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Wed, 3 Jul 2024 11:50:45 +0200
Subject: [PATCH 10/12] add approver check into title conditional

---
 src/libs/ReportUtils.ts         | 8 +++++---
 src/pages/ReportDetailsPage.tsx | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 27a109f7143b..be81a89b47be 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -6888,8 +6888,10 @@ function isNonAdminOrOwnerOfPolicyExpenseChat(report: OnyxInputOrEntry<Report>,
     return isPolicyExpenseChat(report) && !(PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPolicyOwner(policy, currentUserAccountID ?? -1) || isReportOwner(report));
 }
 
-function isAdminOwnerOrReportOwner(report: OnyxEntry<Report>, policy: OnyxEntry<Policy>): boolean {
-    return PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPolicyOwner(policy, currentUserAccountID ?? -1) || isReportOwner(report);
+function isAdminOwnerApproverOrReportOwner(report: OnyxEntry<Report>, policy: OnyxEntry<Policy>): boolean {
+    const isApprover = isMoneyRequestReport(report) && report?.managerID !== null && currentUserPersonalDetails?.accountID === report?.managerID;
+
+    return PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPolicyOwner(policy, currentUserAccountID ?? -1) || isReportOwner(report) || isApprover;
 }
 
 /**
@@ -7351,7 +7353,7 @@ export {
     isCurrentUserInvoiceReceiver,
     isDraftReport,
     changeMoneyRequestHoldStatus,
-    isAdminOwnerOrReportOwner,
+    isAdminOwnerApproverOrReportOwner,
     createDraftWorkspaceAndNavigateToConfirmationScreen,
     isChatUsedForOnboarding,
     getChatUsedForOnboarding,
diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx
index 12d5d682c470..44721810f035 100644
--- a/src/pages/ReportDetailsPage.tsx
+++ b/src/pages/ReportDetailsPage.tsx
@@ -545,7 +545,7 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
     const fieldKey = ReportUtils.getReportFieldKey(titleField?.fieldID ?? '-1');
     const isFieldDisabled = ReportUtils.isReportFieldDisabled(report, titleField, policy);
 
-    const shouldShowTitleField = caseID !== CASES.MONEY_REQUEST && !isFieldDisabled && ReportUtils.isAdminOwnerOrReportOwner(report, policy);
+    const shouldShowTitleField = caseID !== CASES.MONEY_REQUEST && !isFieldDisabled && ReportUtils.isAdminOwnerApproverOrReportOwner(report, policy);
 
     const nameSectionFurtherDetailsContent = (
         <ParentNavigationSubtitle

From 25f59de2ac9bec806e7508adf21eb7b318d3db85 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Wed, 3 Jul 2024 12:20:31 +0200
Subject: [PATCH 11/12] unify nameSectionExpenseIOU and nameSectionTitleField

---
 src/pages/ReportDetailsPage.tsx | 78 ++++++++++++++++-----------------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx
index 44721810f035..914ba737df36 100644
--- a/src/pages/ReportDetailsPage.tsx
+++ b/src/pages/ReportDetailsPage.tsx
@@ -473,7 +473,7 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
         return result;
     }, [report, parentReportAction, canJoin, isExpenseReport, shouldShowHoldAction, canHoldUnholdReportAction.canHoldRequest]);
 
-    const nameSectionExpenseIOU = (
+    const nameSectionStatic = (
         <View style={[styles.reportDetailsRoomInfo, styles.mw100]}>
             {shouldDisableRename && (
                 <>
@@ -516,28 +516,6 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
         </View>
     );
 
-    const nameSectionGroupWorkspace = (
-        <OfflineWithFeedback
-            pendingAction={report?.pendingFields?.reportName}
-            errors={report?.errorFields?.reportName}
-            errorRowStyles={[styles.ph5]}
-            onClose={() => Report.clearPolicyRoomNameErrors(report?.reportID)}
-        >
-            <View style={[styles.flex1, !shouldDisableRename && styles.mt3]}>
-                <MenuItemWithTopDescription
-                    shouldShowRightIcon={!shouldDisableRename}
-                    interactive={!shouldDisableRename}
-                    title={reportName}
-                    titleStyle={styles.newKansasLarge}
-                    shouldCheckActionAllowedOnPress={false}
-                    description={!shouldDisableRename ? roomDescription : ''}
-                    furtherDetails={chatRoomSubtitle && !isGroupChat ? additionalRoomDetails : ''}
-                    onPress={() => Navigation.navigate(ROUTES.REPORT_SETTINGS_NAME.getRoute(report.reportID))}
-                />
-            </View>
-        </OfflineWithFeedback>
-    );
-
     const titleField = useMemo<OnyxTypes.PolicyReportField | undefined>((): OnyxTypes.PolicyReportField | undefined => {
         const fields = ReportUtils.getAvailableReportFields(report, Object.values(policy?.fieldList ?? {}));
         return fields.find((reportField) => ReportUtils.isReportFieldOfTypeTitle(reportField));
@@ -556,24 +534,48 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
         />
     );
 
-    const nameSectionTitleField = titleField && (
+    const editableSectionParams = {
+        [CASES.MONEY_REPORT]: {
+            pendingAction: report.pendingFields?.[fieldKey],
+            errors: report.errorFields?.[fieldKey],
+            errorRowStyles: styles.ph5,
+            onClose: () => titleField && Report.clearReportFieldErrors(report.reportID, titleField),
+            disabled: isFieldDisabled,
+            onPress: () => Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, report.policyID ?? '-1', titleField?.fieldID ?? '-1')),
+            furtherDetailsComponent: nameSectionFurtherDetailsContent,
+            description: Str.UCFirst(titleField?.name ?? ''),
+        },
+        [CASES.DEFAULT]: {
+            pendingAction: report?.pendingFields?.reportName,
+            errors: report?.errorFields?.reportName,
+            errorRowStyles: styles.ph5,
+            onClose: () => Report.clearPolicyRoomNameErrors(report?.reportID),
+            disabled: shouldDisableRename,
+            containerStyle: !shouldDisableRename && styles.mt3,
+            onPress: () => Navigation.navigate(ROUTES.REPORT_SETTINGS_NAME.getRoute(report.reportID)),
+            furtherDetails: chatRoomSubtitle && !isGroupChat ? additionalRoomDetails : '',
+            description: !shouldDisableRename ? roomDescription : '',
+        },
+    };
+
+    const nameSectionEditable = (
         <OfflineWithFeedback
-            pendingAction={report.pendingFields?.[fieldKey]}
-            errors={report.errorFields?.[fieldKey]}
-            errorRowStyles={styles.ph5}
-            key={`menuItem-${fieldKey}`}
-            onClose={() => Report.clearReportFieldErrors(report.reportID, titleField)}
+            pendingAction={editableSectionParams[caseID].pendingAction}
+            errors={editableSectionParams[caseID].errors}
+            errorRowStyles={editableSectionParams[caseID].errorRowStyles}
+            onClose={editableSectionParams[caseID].onClose}
         >
-            <View style={[styles.flex1]}>
+            <View style={[styles.flex1, editableSectionParams[caseID].containerStyle]}>
                 <MenuItemWithTopDescription
-                    shouldShowRightIcon={!isFieldDisabled}
-                    interactive={!isFieldDisabled}
+                    shouldShowRightIcon={!editableSectionParams[caseID].disabled}
+                    interactive={!editableSectionParams[caseID].disabled}
                     title={reportName}
                     titleStyle={styles.newKansasLarge}
                     shouldCheckActionAllowedOnPress={false}
-                    description={Str.UCFirst(titleField.name)}
-                    onPress={() => Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, report.policyID ?? '-1', titleField.fieldID ?? '-1'))}
-                    furtherDetailsComponent={nameSectionFurtherDetailsContent}
+                    description={editableSectionParams[caseID].description}
+                    onPress={editableSectionParams[caseID].onPress}
+                    furtherDetails={editableSectionParams[caseID].furtherDetails}
+                    furtherDetailsComponent={editableSectionParams[caseID].furtherDetailsComponent}
                 />
             </View>
         </OfflineWithFeedback>
@@ -607,12 +609,10 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
                 <ScrollView style={[styles.flex1]}>
                     <View style={[styles.reportDetailsTitleContainer, styles.pb0]}>
                         {renderedAvatar}
-                        {isExpenseReport && !shouldShowTitleField && nameSectionExpenseIOU}
+                        {isExpenseReport && !shouldShowTitleField && nameSectionStatic}
                     </View>
 
-                    {isExpenseReport && shouldShowTitleField && nameSectionTitleField}
-
-                    {!isExpenseReport && nameSectionGroupWorkspace}
+                    {!isExpenseReport || (isExpenseReport && shouldShowTitleField && nameSectionEditable)}
 
                     {shouldShowReportDescription && (
                         <OfflineWithFeedback pendingAction={report.pendingFields?.description}>

From f2d192e3f3a41dc6781a7250efe2927f019d18be Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Wed, 3 Jul 2024 15:50:16 +0200
Subject: [PATCH 12/12] Revert "unify nameSectionExpenseIOU and
 nameSectionTitleField"

This reverts commit 25f59de2ac9bec806e7508adf21eb7b318d3db85.
---
 src/pages/ReportDetailsPage.tsx | 78 ++++++++++++++++-----------------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx
index 914ba737df36..44721810f035 100644
--- a/src/pages/ReportDetailsPage.tsx
+++ b/src/pages/ReportDetailsPage.tsx
@@ -473,7 +473,7 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
         return result;
     }, [report, parentReportAction, canJoin, isExpenseReport, shouldShowHoldAction, canHoldUnholdReportAction.canHoldRequest]);
 
-    const nameSectionStatic = (
+    const nameSectionExpenseIOU = (
         <View style={[styles.reportDetailsRoomInfo, styles.mw100]}>
             {shouldDisableRename && (
                 <>
@@ -516,6 +516,28 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
         </View>
     );
 
+    const nameSectionGroupWorkspace = (
+        <OfflineWithFeedback
+            pendingAction={report?.pendingFields?.reportName}
+            errors={report?.errorFields?.reportName}
+            errorRowStyles={[styles.ph5]}
+            onClose={() => Report.clearPolicyRoomNameErrors(report?.reportID)}
+        >
+            <View style={[styles.flex1, !shouldDisableRename && styles.mt3]}>
+                <MenuItemWithTopDescription
+                    shouldShowRightIcon={!shouldDisableRename}
+                    interactive={!shouldDisableRename}
+                    title={reportName}
+                    titleStyle={styles.newKansasLarge}
+                    shouldCheckActionAllowedOnPress={false}
+                    description={!shouldDisableRename ? roomDescription : ''}
+                    furtherDetails={chatRoomSubtitle && !isGroupChat ? additionalRoomDetails : ''}
+                    onPress={() => Navigation.navigate(ROUTES.REPORT_SETTINGS_NAME.getRoute(report.reportID))}
+                />
+            </View>
+        </OfflineWithFeedback>
+    );
+
     const titleField = useMemo<OnyxTypes.PolicyReportField | undefined>((): OnyxTypes.PolicyReportField | undefined => {
         const fields = ReportUtils.getAvailableReportFields(report, Object.values(policy?.fieldList ?? {}));
         return fields.find((reportField) => ReportUtils.isReportFieldOfTypeTitle(reportField));
@@ -534,48 +556,24 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
         />
     );
 
-    const editableSectionParams = {
-        [CASES.MONEY_REPORT]: {
-            pendingAction: report.pendingFields?.[fieldKey],
-            errors: report.errorFields?.[fieldKey],
-            errorRowStyles: styles.ph5,
-            onClose: () => titleField && Report.clearReportFieldErrors(report.reportID, titleField),
-            disabled: isFieldDisabled,
-            onPress: () => Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, report.policyID ?? '-1', titleField?.fieldID ?? '-1')),
-            furtherDetailsComponent: nameSectionFurtherDetailsContent,
-            description: Str.UCFirst(titleField?.name ?? ''),
-        },
-        [CASES.DEFAULT]: {
-            pendingAction: report?.pendingFields?.reportName,
-            errors: report?.errorFields?.reportName,
-            errorRowStyles: styles.ph5,
-            onClose: () => Report.clearPolicyRoomNameErrors(report?.reportID),
-            disabled: shouldDisableRename,
-            containerStyle: !shouldDisableRename && styles.mt3,
-            onPress: () => Navigation.navigate(ROUTES.REPORT_SETTINGS_NAME.getRoute(report.reportID)),
-            furtherDetails: chatRoomSubtitle && !isGroupChat ? additionalRoomDetails : '',
-            description: !shouldDisableRename ? roomDescription : '',
-        },
-    };
-
-    const nameSectionEditable = (
+    const nameSectionTitleField = titleField && (
         <OfflineWithFeedback
-            pendingAction={editableSectionParams[caseID].pendingAction}
-            errors={editableSectionParams[caseID].errors}
-            errorRowStyles={editableSectionParams[caseID].errorRowStyles}
-            onClose={editableSectionParams[caseID].onClose}
+            pendingAction={report.pendingFields?.[fieldKey]}
+            errors={report.errorFields?.[fieldKey]}
+            errorRowStyles={styles.ph5}
+            key={`menuItem-${fieldKey}`}
+            onClose={() => Report.clearReportFieldErrors(report.reportID, titleField)}
         >
-            <View style={[styles.flex1, editableSectionParams[caseID].containerStyle]}>
+            <View style={[styles.flex1]}>
                 <MenuItemWithTopDescription
-                    shouldShowRightIcon={!editableSectionParams[caseID].disabled}
-                    interactive={!editableSectionParams[caseID].disabled}
+                    shouldShowRightIcon={!isFieldDisabled}
+                    interactive={!isFieldDisabled}
                     title={reportName}
                     titleStyle={styles.newKansasLarge}
                     shouldCheckActionAllowedOnPress={false}
-                    description={editableSectionParams[caseID].description}
-                    onPress={editableSectionParams[caseID].onPress}
-                    furtherDetails={editableSectionParams[caseID].furtherDetails}
-                    furtherDetailsComponent={editableSectionParams[caseID].furtherDetailsComponent}
+                    description={Str.UCFirst(titleField.name)}
+                    onPress={() => Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, report.policyID ?? '-1', titleField.fieldID ?? '-1'))}
+                    furtherDetailsComponent={nameSectionFurtherDetailsContent}
                 />
             </View>
         </OfflineWithFeedback>
@@ -609,10 +607,12 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
                 <ScrollView style={[styles.flex1]}>
                     <View style={[styles.reportDetailsTitleContainer, styles.pb0]}>
                         {renderedAvatar}
-                        {isExpenseReport && !shouldShowTitleField && nameSectionStatic}
+                        {isExpenseReport && !shouldShowTitleField && nameSectionExpenseIOU}
                     </View>
 
-                    {!isExpenseReport || (isExpenseReport && shouldShowTitleField && nameSectionEditable)}
+                    {isExpenseReport && shouldShowTitleField && nameSectionTitleField}
+
+                    {!isExpenseReport && nameSectionGroupWorkspace}
 
                     {shouldShowReportDescription && (
                         <OfflineWithFeedback pendingAction={report.pendingFields?.description}>