From f88a717007e4e8620da0ca7fe7d7b2a813bd9083 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Wed, 13 Nov 2024 12:02:22 +0700
Subject: [PATCH 01/15] Add row to workspace chat in Workspace

---
 src/components/MenuItem.tsx                  | 21 +++++++++---
 src/languages/en.ts                          |  1 +
 src/languages/es.ts                          |  1 +
 src/pages/workspace/WorkspaceInitialPage.tsx | 35 ++++++++++++++++++--
 src/styles/index.ts                          |  9 +++++
 5 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 7fb5533fd172b..f213b434736cb 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -224,6 +224,9 @@ type MenuItemBaseProps = {
     /** Whether the secondary right avatar should show as a subscript */
     shouldShowSubscriptRightAvatar?: boolean;
 
+    /** Whether the secondary avatar should show as a subscript */
+    shouldShowSubscriptAvatar?: boolean;
+
     /** Affects avatar size  */
     viewMode?: ValueOf<typeof CONST.OPTION_MODE>;
 
@@ -407,6 +410,7 @@ function MenuItem(
         floatRightAvatars = [],
         floatRightAvatarSize,
         shouldShowSubscriptRightAvatar = false,
+        shouldShowSubscriptAvatar: shouldShowSubscriptAvatarProp = false,
         avatarSize = CONST.AVATAR_SIZE.DEFAULT,
         isSmallAvatarSubscriptMenu = false,
         brickRoadIndicator,
@@ -457,7 +461,7 @@ function MenuItem(
     const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedback.deleted) : false;
     const descriptionVerticalMargin = shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1;
     const fallbackAvatarSize = viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT;
-    const firstIcon = floatRightAvatars.at(0);
+    const firstRightIcon = floatRightAvatars.at(0);
     const combinedTitleTextStyle = StyleUtils.combineStyles(
         [
             styles.flexShrink1,
@@ -472,6 +476,8 @@ function MenuItem(
         ],
         titleStyle ?? {},
     );
+    const firstIcon = Array.isArray(icon) && !!icon.length ? icon.at(0) : undefined;
+    const shouldShowSubscriptAvatar = shouldShowSubscriptAvatarProp && !!firstIcon;
     const descriptionTextStyles = StyleUtils.combineStyles<TextStyle>([
         styles.textLabelSupporting,
         icon && !Array.isArray(icon) ? styles.ml3 : {},
@@ -621,7 +627,7 @@ function MenuItem(
                                                     </View>
                                                 )}
                                                 <View style={[styles.flexRow, styles.pointerEventsAuto, disabled && !shouldUseDefaultCursorWhenDisabled && styles.cursorDisabled]}>
-                                                    {!!icon && Array.isArray(icon) && (
+                                                    {!!icon && Array.isArray(icon) && !shouldShowSubscriptAvatar && (
                                                         <MultipleAvatars
                                                             isHovered={isHovered}
                                                             isPressed={pressed}
@@ -634,6 +640,13 @@ function MenuItem(
                                                             ]}
                                                         />
                                                     )}
+                                                    {!!icon && Array.isArray(icon) && shouldShowSubscriptAvatar && (
+                                                        <SubscriptAvatar
+                                                            mainAvatar={firstIcon as IconType}
+                                                            secondaryAvatar={(icon as IconType[]).at(1)}
+                                                            size={avatarSize}
+                                                        />
+                                                    )}
                                                     {!icon && shouldPutLeftPaddingWhenNoIcon && (
                                                         <View
                                                             style={[
@@ -802,12 +815,12 @@ function MenuItem(
                                                         <Text style={[styles.textLabelSupporting, ...(combinedStyle as TextStyle[])]}>{subtitle}</Text>
                                                     </View>
                                                 )}
-                                                {floatRightAvatars?.length > 0 && !!firstIcon && (
+                                                {floatRightAvatars?.length > 0 && !!firstRightIcon && (
                                                     <View style={[styles.alignItemsCenter, styles.justifyContentCenter, brickRoadIndicator ? styles.mr2 : styles.mrn2]}>
                                                         {shouldShowSubscriptRightAvatar ? (
                                                             <SubscriptAvatar
                                                                 backgroundColor={isHovered ? theme.activeComponentBG : theme.componentBG}
-                                                                mainAvatar={firstIcon}
+                                                                mainAvatar={firstRightIcon}
                                                                 secondaryAvatar={floatRightAvatars.at(1)}
                                                                 size={floatRightAvatarSize ?? fallbackAvatarSize}
                                                             />
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 7f05ea4368377..8afedebbf3228 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -2434,6 +2434,7 @@ const translations = {
                         return 'Member';
                 }
             },
+            expense: 'Submit expenses using your workspace chat below:',
         },
         perDiem: {
             subtitle: 'Set per diem rates to control daily employee spend. ',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 92ffd8728d97e..25f0336d268d8 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -2457,6 +2457,7 @@ const translations = {
                         return 'Miembro';
                 }
             },
+            expense: 'Envíe los gastos utilizando el chat de su espacio de trabajo:',
         },
         perDiem: {
             subtitle: 'Establece las tasas per diem para controlar los gastos diarios de los empleados. ',
diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx
index 8d7acf2369677..77f05b6cbb090 100644
--- a/src/pages/workspace/WorkspaceInitialPage.tsx
+++ b/src/pages/workspace/WorkspaceInitialPage.tsx
@@ -9,9 +9,11 @@ import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import HighlightableMenuItem from '@components/HighlightableMenuItem';
 import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItem from '@components/MenuItem';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
+import Text from '@components/Text';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
@@ -24,7 +26,7 @@ import * as CurrencyUtils from '@libs/CurrencyUtils';
 import getTopmostRouteName from '@libs/Navigation/getTopmostRouteName';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
-import {getDefaultWorkspaceAvatar} from '@libs/ReportUtils';
+import {getDefaultWorkspaceAvatar, getIcons, getReportName, isPolicyExpenseChat} from '@libs/ReportUtils';
 import type {FullScreenNavigatorParamList} from '@navigation/types';
 import * as App from '@userActions/App';
 import * as Policy from '@userActions/Policy/Policy';
@@ -91,6 +93,9 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
     const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`);
     const [connectionSyncProgress] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policy?.id}`);
     const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${route.params?.policyID ?? '-1'}`);
+    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const hasSyncError = PolicyUtils.hasSyncError(policy, isConnectionInProgress(connectionSyncProgress, policy));
     const waitForNavigate = useWaitForNavigation();
     const {singleExecution, isExecuting} = useSingleExecution();
@@ -99,6 +104,17 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
     const {isOffline} = useNetwork();
     const wasRendered = useRef(false);
 
+    const currentUserPolicyExpenseChat = useMemo(() => {
+        return Object.values(reports ?? {}).find((report) => {
+            // If the report has been deleted, then skip it
+            if (!report) {
+                return false;
+            }
+
+            return report.policyID === policy?.id && isPolicyExpenseChat(report) && report.ownerAccountID === currentUserPersonalDetails.accountID;
+        });
+    }, [reports, policy?.id, currentUserPersonalDetails.accountID]);
+
     const prevPendingFields = usePrevious(policy?.pendingFields);
     const policyFeatureStates = useMemo(
         () => ({
@@ -404,7 +420,10 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
                     style={styles.headerBarDesktopHeight}
                 />
 
-                <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexColumn, styles.justifyContentBetween]}>
+                <ScrollView
+                    contentContainerStyle={[styles.flexColumn]}
+                    style={[styles.flexGrow0]}
+                >
                     <OfflineWithFeedback
                         pendingAction={policy?.pendingAction}
                         onClose={() => dismissError(policyID, policy?.pendingAction)}
@@ -437,6 +456,18 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
                         </View>
                     </OfflineWithFeedback>
                 </ScrollView>
+                <View style={[styles.pb4, styles.mh3, styles.mt3]}>
+                    <Text style={[styles.textSupporting, styles.fontSizeLabel, styles.ph4]}>{translate('workspace.common.expense')}</Text>
+                    <MenuItem
+                        title={getReportName(currentUserPolicyExpenseChat)}
+                        description={translate('common.workspaces')}
+                        icon={getIcons(currentUserPolicyExpenseChat, personalDetails)}
+                        onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(currentUserPolicyExpenseChat?.reportID ?? '-1'))}
+                        shouldShowRightIcon
+                        wrapperStyle={styles.expenseMenuItem}
+                        shouldShowSubscriptAvatar
+                    />
+                </View>
                 <ConfirmModal
                     title={translate('workspace.bankAccount.workspaceCurrency')}
                     isVisible={isCurrencyModalOpen}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 8ce6f1b81b609..20b8ed7df7b7c 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2915,6 +2915,15 @@ const styles = (theme: ThemeColors) =>
             alignItems: 'center',
         },
 
+        expenseMenuItem: {
+            borderRadius: 8,
+            paddingLeft: 16,
+            paddingRight: 0,
+            paddingVertical: 12,
+            marginTop: 16,
+            alignItems: 'center',
+        },
+
         sectionSelectCircle: {
             backgroundColor: theme.cardBG,
         },

From 46e39a72089db79c44f3f1a318c1aece49541118 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Mon, 18 Nov 2024 16:41:03 +0700
Subject: [PATCH 02/15] fix: workspace init page style

---
 src/pages/workspace/WorkspaceInitialPage.tsx | 4 ++--
 src/styles/index.ts                          | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx
index 821676e5b91f2..7cc3ad7e3930f 100644
--- a/src/pages/workspace/WorkspaceInitialPage.tsx
+++ b/src/pages/workspace/WorkspaceInitialPage.tsx
@@ -358,7 +358,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
         isEmptyObject(policy) ||
         // We check isPendingDelete for both policy and prevPolicy to prevent the NotFound view from showing right after we delete the workspace
         (PolicyUtils.isPendingDeletePolicy(policy) && PolicyUtils.isPendingDeletePolicy(prevPolicy));
-
+        
     useEffect(() => {
         if (isEmptyObject(prevPolicy) || PolicyUtils.isPendingDeletePolicy(prevPolicy) || !PolicyUtils.isPendingDeletePolicy(policy)) {
             return;
@@ -463,7 +463,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
                     <Text style={[styles.textSupporting, styles.fontSizeLabel, styles.ph4]}>{translate('workspace.common.expense')}</Text>
                     <MenuItem
                         title={getReportName(currentUserPolicyExpenseChat)}
-                        description={translate('common.workspaces')}
+                        description={translate('workspace.common.workspace')}
                         icon={getIcons(currentUserPolicyExpenseChat, personalDetails)}
                         onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(currentUserPolicyExpenseChat?.reportID ?? '-1'))}
                         shouldShowRightIcon
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 8ec75b12e19d2..113ecafd931b4 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2917,7 +2917,7 @@ const styles = (theme: ThemeColors) =>
 
         expenseMenuItem: {
             borderRadius: 8,
-            paddingLeft: 16,
+            paddingLeft: 8,
             paddingRight: 0,
             paddingVertical: 12,
             marginTop: 16,

From e18dc3711d16d6af59300a7b8f00eb52d21d767a Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Tue, 19 Nov 2024 16:35:53 +0700
Subject: [PATCH 03/15] only subscribe policyExpense chat report

---
 src/pages/workspace/WorkspaceInitialPage.tsx | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx
index 7cc3ad7e3930f..1dd8703652e00 100644
--- a/src/pages/workspace/WorkspaceInitialPage.tsx
+++ b/src/pages/workspace/WorkspaceInitialPage.tsx
@@ -27,7 +27,7 @@ import * as CurrencyUtils from '@libs/CurrencyUtils';
 import getTopmostRouteName from '@libs/Navigation/getTopmostRouteName';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
-import {getDefaultWorkspaceAvatar, getIcons, getReportName, isPolicyExpenseChat} from '@libs/ReportUtils';
+import {getDefaultWorkspaceAvatar, getIcons, getPolicyExpenseChat, getReportName, isPolicyExpenseChat} from '@libs/ReportUtils';
 import type {FullScreenNavigatorParamList} from '@navigation/types';
 import * as App from '@userActions/App';
 import * as Policy from '@userActions/Policy/Policy';
@@ -104,17 +104,8 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
     const wasRendered = useRef(false);
-
-    const currentUserPolicyExpenseChat = useMemo(() => {
-        return Object.values(reports ?? {}).find((report) => {
-            // If the report has been deleted, then skip it
-            if (!report) {
-                return false;
-            }
-
-            return report.policyID === policy?.id && isPolicyExpenseChat(report) && report.ownerAccountID === currentUserPersonalDetails.accountID;
-        });
-    }, [reports, policy?.id, currentUserPersonalDetails.accountID]);
+    const currentUserPolicyExpenseChatReportID = getPolicyExpenseChat(currentUserPersonalDetails.accountID, policy?.id ?? '-1')?.reportID ?? '-1';
+    const [currentUserPolicyExpenseChat] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${currentUserPolicyExpenseChatReportID}`);
 
     const prevPendingFields = usePrevious(policy?.pendingFields);
     const policyFeatureStates = useMemo(
@@ -358,7 +349,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
         isEmptyObject(policy) ||
         // We check isPendingDelete for both policy and prevPolicy to prevent the NotFound view from showing right after we delete the workspace
         (PolicyUtils.isPendingDeletePolicy(policy) && PolicyUtils.isPendingDeletePolicy(prevPolicy));
-        
+
     useEffect(() => {
         if (isEmptyObject(prevPolicy) || PolicyUtils.isPendingDeletePolicy(prevPolicy) || !PolicyUtils.isPendingDeletePolicy(policy)) {
             return;
@@ -402,6 +393,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
         <ScreenWrapper
             testID={WorkspaceInitialPage.displayName}
             includeSafeAreaPaddingBottom={false}
+            offlineIndicatorStyle={styles.mtAuto}
         >
             <FullPageNotFoundView
                 onBackButtonPress={Navigation.dismissModal}

From 8629c81f34be6a02eb1b68658cf5ef29b49866dd Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Tue, 19 Nov 2024 16:38:48 +0700
Subject: [PATCH 04/15] fix lint

---
 src/pages/workspace/WorkspaceInitialPage.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx
index 1dd8703652e00..4c5ccd1d7a569 100644
--- a/src/pages/workspace/WorkspaceInitialPage.tsx
+++ b/src/pages/workspace/WorkspaceInitialPage.tsx
@@ -27,7 +27,7 @@ import * as CurrencyUtils from '@libs/CurrencyUtils';
 import getTopmostRouteName from '@libs/Navigation/getTopmostRouteName';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
-import {getDefaultWorkspaceAvatar, getIcons, getPolicyExpenseChat, getReportName, isPolicyExpenseChat} from '@libs/ReportUtils';
+import {getDefaultWorkspaceAvatar, getIcons, getPolicyExpenseChat, getReportName} from '@libs/ReportUtils';
 import type {FullScreenNavigatorParamList} from '@navigation/types';
 import * as App from '@userActions/App';
 import * as Policy from '@userActions/Policy/Policy';
@@ -94,7 +94,6 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
     const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`);
     const [connectionSyncProgress] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policy?.id}`);
     const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${route.params?.policyID ?? '-1'}`);
-    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const hasSyncError = PolicyUtils.hasSyncError(policy, isConnectionInProgress(connectionSyncProgress, policy));

From 6ec4a0f8ecfb88db0516f1bc91e783968527d653 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Tue, 19 Nov 2024 21:46:27 +0700
Subject: [PATCH 05/15] grey out policy expense chat row when creating it
 offline

---
 src/languages/en.ts                          |  2 +-
 src/languages/es.ts                          |  2 +-
 src/pages/workspace/WorkspaceInitialPage.tsx | 30 +++++++++++---------
 src/styles/index.ts                          |  9 ------
 4 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index 97c38ccf69430..4b024269e446f 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -2471,7 +2471,7 @@ const translations = {
                         return 'Member';
                 }
             },
-            expense: 'Submit expenses using your workspace chat below:',
+            submitExpense: 'Submit expenses using your workspace chat below:',
         },
         perDiem: {
             subtitle: 'Set per diem rates to control daily employee spend. ',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index bd6fba1926019..480ec9aff6aec 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -2496,7 +2496,7 @@ const translations = {
                         return 'Miembro';
                 }
             },
-            expense: 'Envíe los gastos utilizando el chat de su espacio de trabajo:',
+            submitExpense: 'Envíe los gastos utilizando el chat de su espacio de trabajo:',
         },
         perDiem: {
             subtitle: 'Establece las tasas per diem para controlar los gastos diarios de los empleados. ',
diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx
index 4c5ccd1d7a569..0837f4c3afe7b 100644
--- a/src/pages/workspace/WorkspaceInitialPage.tsx
+++ b/src/pages/workspace/WorkspaceInitialPage.tsx
@@ -27,7 +27,7 @@ import * as CurrencyUtils from '@libs/CurrencyUtils';
 import getTopmostRouteName from '@libs/Navigation/getTopmostRouteName';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
-import {getDefaultWorkspaceAvatar, getIcons, getPolicyExpenseChat, getReportName} from '@libs/ReportUtils';
+import {getDefaultWorkspaceAvatar, getIcons, getPolicyExpenseChat, getReportName, getReportOfflinePendingActionAndErrors} from '@libs/ReportUtils';
 import type {FullScreenNavigatorParamList} from '@navigation/types';
 import * as App from '@userActions/App';
 import * as Policy from '@userActions/Policy/Policy';
@@ -95,7 +95,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
     const [connectionSyncProgress] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policy?.id}`);
     const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${route.params?.policyID ?? '-1'}`);
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
-    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
+    const {login, accountID} = useCurrentUserPersonalDetails();
     const hasSyncError = PolicyUtils.hasSyncError(policy, isConnectionInProgress(connectionSyncProgress, policy));
     const waitForNavigate = useWaitForNavigation();
     const {singleExecution, isExecuting} = useSingleExecution();
@@ -103,8 +103,9 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
     const wasRendered = useRef(false);
-    const currentUserPolicyExpenseChatReportID = getPolicyExpenseChat(currentUserPersonalDetails.accountID, policy?.id ?? '-1')?.reportID ?? '-1';
+    const currentUserPolicyExpenseChatReportID = getPolicyExpenseChat(accountID, policy?.id ?? '-1')?.reportID ?? '-1';
     const [currentUserPolicyExpenseChat] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${currentUserPolicyExpenseChatReportID}`);
+    const {reportPendingAction} = getReportOfflinePendingActionAndErrors(currentUserPolicyExpenseChat);
 
     const prevPendingFields = usePrevious(policy?.pendingFields);
     const policyFeatureStates = useMemo(
@@ -164,7 +165,6 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
         !isEmptyObject(policy?.errorFields?.avatarURL ?? {}) ||
         !isEmptyObject(policy?.errorFields?.ouputCurrency ?? {}) ||
         !isEmptyObject(policy?.errorFields?.address ?? {});
-    const {login} = useCurrentUserPersonalDetails();
     const shouldShowProtectedItems = PolicyUtils.isPolicyAdmin(policy, login);
     const isPaidGroupPolicy = PolicyUtils.isPaidGroupPolicy(policy);
     const [featureStates, setFeatureStates] = useState(policyFeatureStates);
@@ -451,16 +451,18 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
                     </OfflineWithFeedback>
                 </ScrollView>
                 <View style={[styles.pb4, styles.mh3, styles.mt3]}>
-                    <Text style={[styles.textSupporting, styles.fontSizeLabel, styles.ph4]}>{translate('workspace.common.expense')}</Text>
-                    <MenuItem
-                        title={getReportName(currentUserPolicyExpenseChat)}
-                        description={translate('workspace.common.workspace')}
-                        icon={getIcons(currentUserPolicyExpenseChat, personalDetails)}
-                        onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(currentUserPolicyExpenseChat?.reportID ?? '-1'))}
-                        shouldShowRightIcon
-                        wrapperStyle={styles.expenseMenuItem}
-                        shouldShowSubscriptAvatar
-                    />
+                    <Text style={[styles.textSupporting, styles.fontSizeLabel, styles.ph4]}>{translate('workspace.common.submitExpense')}</Text>
+                    <OfflineWithFeedback pendingAction={reportPendingAction}>
+                        <MenuItem
+                            title={getReportName(currentUserPolicyExpenseChat)}
+                            description={translate('workspace.common.workspace')}
+                            icon={getIcons(currentUserPolicyExpenseChat, personalDetails)}
+                            onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(currentUserPolicyExpenseChat?.reportID ?? '-1'))}
+                            shouldShowRightIcon
+                            wrapperStyle={[styles.br2, styles.pl2, styles.pr0, styles.pv3, styles.mt4, styles.alignItemsCenter]}
+                            shouldShowSubscriptAvatar
+                        />
+                    </OfflineWithFeedback>
                 </View>
                 <ConfirmModal
                     title={translate('workspace.bankAccount.workspaceCurrency')}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 3533c283ffbb9..154f8240b0c54 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2915,15 +2915,6 @@ const styles = (theme: ThemeColors) =>
             alignItems: 'center',
         },
 
-        expenseMenuItem: {
-            borderRadius: 8,
-            paddingLeft: 8,
-            paddingRight: 0,
-            paddingVertical: 12,
-            marginTop: 16,
-            alignItems: 'center',
-        },
-
         sectionSelectCircle: {
             backgroundColor: theme.cardBG,
         },

From a1d4cddbfab3bf1e7f30ab7eea86bcc40229c0df Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Wed, 20 Nov 2024 12:18:12 +0700
Subject: [PATCH 06/15] update padding left

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

diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx
index a65360bf6b2b0..1cc9885f327c3 100644
--- a/src/pages/workspace/WorkspaceInitialPage.tsx
+++ b/src/pages/workspace/WorkspaceInitialPage.tsx
@@ -460,7 +460,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
                             icon={getIcons(currentUserPolicyExpenseChat, personalDetails)}
                             onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(currentUserPolicyExpenseChat?.reportID ?? '-1'))}
                             shouldShowRightIcon
-                            wrapperStyle={[styles.br2, styles.pl2, styles.pr0, styles.pv3, styles.mt4, styles.alignItemsCenter]}
+                            wrapperStyle={[styles.br2, styles.pl4, styles.pr0, styles.pv3, styles.mt4, styles.alignItemsCenter]}
                             shouldShowSubscriptAvatar
                         />
                     </OfflineWithFeedback>

From 2bce254eeb07c48c188f55a3c8d9ee8f0f8e5336 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Fri, 22 Nov 2024 14:39:04 +0700
Subject: [PATCH 07/15] move the expense row to inside ScrollView and update
 the padding style

---
 src/pages/workspace/WorkspaceInitialPage.tsx | 28 ++++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx
index 1cc9885f327c3..cfac4f934dbef 100644
--- a/src/pages/workspace/WorkspaceInitialPage.tsx
+++ b/src/pages/workspace/WorkspaceInitialPage.tsx
@@ -450,21 +450,21 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
                             ))}
                         </View>
                     </OfflineWithFeedback>
+                    <View style={[styles.pb4, styles.mh3, styles.mt3]}>
+                        <Text style={[styles.textSupporting, styles.fontSizeLabel, styles.ph2]}>{translate('workspace.common.submitExpense')}</Text>
+                        <OfflineWithFeedback pendingAction={reportPendingAction}>
+                            <MenuItem
+                                title={getReportName(currentUserPolicyExpenseChat)}
+                                description={translate('workspace.common.workspace')}
+                                icon={getIcons(currentUserPolicyExpenseChat, personalDetails)}
+                                onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(currentUserPolicyExpenseChat?.reportID ?? '-1'))}
+                                shouldShowRightIcon
+                                wrapperStyle={[styles.br2, styles.pl2, styles.pr0, styles.pv3, styles.mt4, styles.alignItemsCenter]}
+                                shouldShowSubscriptAvatar
+                            />
+                        </OfflineWithFeedback>
+                    </View>
                 </ScrollView>
-                <View style={[styles.pb4, styles.mh3, styles.mt3]}>
-                    <Text style={[styles.textSupporting, styles.fontSizeLabel, styles.ph4]}>{translate('workspace.common.submitExpense')}</Text>
-                    <OfflineWithFeedback pendingAction={reportPendingAction}>
-                        <MenuItem
-                            title={getReportName(currentUserPolicyExpenseChat)}
-                            description={translate('workspace.common.workspace')}
-                            icon={getIcons(currentUserPolicyExpenseChat, personalDetails)}
-                            onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(currentUserPolicyExpenseChat?.reportID ?? '-1'))}
-                            shouldShowRightIcon
-                            wrapperStyle={[styles.br2, styles.pl4, styles.pr0, styles.pv3, styles.mt4, styles.alignItemsCenter]}
-                            shouldShowSubscriptAvatar
-                        />
-                    </OfflineWithFeedback>
-                </View>
                 <ConfirmModal
                     title={translate('workspace.bankAccount.workspaceCurrency')}
                     isVisible={isCurrencyModalOpen}

From f46c736a972380fbc27c187546b4fdba68386d04 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Fri, 22 Nov 2024 14:44:32 +0700
Subject: [PATCH 08/15] update background color for hover style

---
 src/components/MenuItem.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index f213b434736cb..cdd79d29aa4f1 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -642,6 +642,7 @@ function MenuItem(
                                                     )}
                                                     {!!icon && Array.isArray(icon) && shouldShowSubscriptAvatar && (
                                                         <SubscriptAvatar
+                                                            backgroundColor={isHovered ? theme.activeComponentBG : theme.componentBG}
                                                             mainAvatar={firstIcon as IconType}
                                                             secondaryAvatar={(icon as IconType[]).at(1)}
                                                             size={avatarSize}
@@ -819,7 +820,7 @@ function MenuItem(
                                                     <View style={[styles.alignItemsCenter, styles.justifyContentCenter, brickRoadIndicator ? styles.mr2 : styles.mrn2]}>
                                                         {shouldShowSubscriptRightAvatar ? (
                                                             <SubscriptAvatar
-                                                                backgroundColor={isHovered ? theme.activeComponentBG : theme.componentBG}
+                                                                backgroundColor={isHovered ? theme.hoverComponentBG : undefined}
                                                                 mainAvatar={firstRightIcon}
                                                                 secondaryAvatar={floatRightAvatars.at(1)}
                                                                 size={floatRightAvatarSize ?? fallbackAvatarSize}

From 001fb0b93a8870abac8e230828557c9c1f3dbb4b Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Fri, 22 Nov 2024 23:06:47 +0700
Subject: [PATCH 09/15] update margin style

---
 src/components/MenuItem.tsx                  | 5 +++--
 src/pages/workspace/WorkspaceInitialPage.tsx | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index cdd79d29aa4f1..ff68917306f03 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -476,6 +476,7 @@ function MenuItem(
         ],
         titleStyle ?? {},
     );
+    const shouldShowAvatar = !!icon && Array.isArray(icon);
     const firstIcon = Array.isArray(icon) && !!icon.length ? icon.at(0) : undefined;
     const shouldShowSubscriptAvatar = shouldShowSubscriptAvatarProp && !!firstIcon;
     const descriptionTextStyles = StyleUtils.combineStyles<TextStyle>([
@@ -627,7 +628,7 @@ function MenuItem(
                                                     </View>
                                                 )}
                                                 <View style={[styles.flexRow, styles.pointerEventsAuto, disabled && !shouldUseDefaultCursorWhenDisabled && styles.cursorDisabled]}>
-                                                    {!!icon && Array.isArray(icon) && !shouldShowSubscriptAvatar && (
+                                                    {shouldShowAvatar && !shouldShowSubscriptAvatar && (
                                                         <MultipleAvatars
                                                             isHovered={isHovered}
                                                             isPressed={pressed}
@@ -640,7 +641,7 @@ function MenuItem(
                                                             ]}
                                                         />
                                                     )}
-                                                    {!!icon && Array.isArray(icon) && shouldShowSubscriptAvatar && (
+                                                    {shouldShowAvatar && shouldShowSubscriptAvatar && (
                                                         <SubscriptAvatar
                                                             backgroundColor={isHovered ? theme.activeComponentBG : theme.componentBG}
                                                             mainAvatar={firstIcon as IconType}
diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx
index cfac4f934dbef..ff3e528cb3079 100644
--- a/src/pages/workspace/WorkspaceInitialPage.tsx
+++ b/src/pages/workspace/WorkspaceInitialPage.tsx
@@ -459,7 +459,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
                                 icon={getIcons(currentUserPolicyExpenseChat, personalDetails)}
                                 onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(currentUserPolicyExpenseChat?.reportID ?? '-1'))}
                                 shouldShowRightIcon
-                                wrapperStyle={[styles.br2, styles.pl2, styles.pr0, styles.pv3, styles.mt4, styles.alignItemsCenter]}
+                                wrapperStyle={[styles.br2, styles.pl2, styles.pr0, styles.pv3, styles.mt3, styles.alignItemsCenter]}
                                 shouldShowSubscriptAvatar
                             />
                         </OfflineWithFeedback>

From 4170aa469f0d758b49feb8fd1e2cced602d9735d Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Sat, 23 Nov 2024 00:15:47 +0700
Subject: [PATCH 10/15] reduce margin

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

diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx
index ff3e528cb3079..a4f90219c36d2 100644
--- a/src/pages/workspace/WorkspaceInitialPage.tsx
+++ b/src/pages/workspace/WorkspaceInitialPage.tsx
@@ -459,7 +459,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
                                 icon={getIcons(currentUserPolicyExpenseChat, personalDetails)}
                                 onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(currentUserPolicyExpenseChat?.reportID ?? '-1'))}
                                 shouldShowRightIcon
-                                wrapperStyle={[styles.br2, styles.pl2, styles.pr0, styles.pv3, styles.mt3, styles.alignItemsCenter]}
+                                wrapperStyle={[styles.br2, styles.pl2, styles.pr0, styles.pv3, styles.mt1, styles.alignItemsCenter]}
                                 shouldShowSubscriptAvatar
                             />
                         </OfflineWithFeedback>

From 5c450e49b65d7d8181a6ac5d52c890e81005a5a7 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Sat, 23 Nov 2024 00:41:46 +0700
Subject: [PATCH 11/15] update correct background color

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

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index ff68917306f03..5a79edfd1e356 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -643,7 +643,7 @@ function MenuItem(
                                                     )}
                                                     {shouldShowAvatar && shouldShowSubscriptAvatar && (
                                                         <SubscriptAvatar
-                                                            backgroundColor={isHovered ? theme.activeComponentBG : theme.componentBG}
+                                                            backgroundColor={isHovered ? theme.hoverComponentBG : undefined}
                                                             mainAvatar={firstIcon as IconType}
                                                             secondaryAvatar={(icon as IconType[]).at(1)}
                                                             size={avatarSize}
@@ -821,7 +821,7 @@ function MenuItem(
                                                     <View style={[styles.alignItemsCenter, styles.justifyContentCenter, brickRoadIndicator ? styles.mr2 : styles.mrn2]}>
                                                         {shouldShowSubscriptRightAvatar ? (
                                                             <SubscriptAvatar
-                                                                backgroundColor={isHovered ? theme.hoverComponentBG : undefined}
+                                                                backgroundColor={isHovered ? theme.activeComponentBG : theme.componentBG}
                                                                 mainAvatar={firstRightIcon}
                                                                 secondaryAvatar={floatRightAvatars.at(1)}
                                                                 size={floatRightAvatarSize ?? fallbackAvatarSize}

From 522bb766608dd8e3b12446ffaf0aaeedb643134f Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Sat, 23 Nov 2024 02:09:50 +0700
Subject: [PATCH 12/15] fix background color if the item is pressed

---
 src/components/MenuItem.tsx                  | 3 ++-
 src/pages/workspace/WorkspaceInitialPage.tsx | 6 +-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 5a79edfd1e356..885fd129cb568 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -643,7 +643,8 @@ function MenuItem(
                                                     )}
                                                     {shouldShowAvatar && shouldShowSubscriptAvatar && (
                                                         <SubscriptAvatar
-                                                            backgroundColor={isHovered ? theme.hoverComponentBG : undefined}
+                                                            // eslint-disable-next-line no-nested-ternary
+                                                            backgroundColor={pressed ? theme.buttonHoveredBG : isHovered ? theme.hoverComponentBG : undefined}
                                                             mainAvatar={firstIcon as IconType}
                                                             secondaryAvatar={(icon as IconType[]).at(1)}
                                                             size={avatarSize}
diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx
index a4f90219c36d2..c33f44e314c94 100644
--- a/src/pages/workspace/WorkspaceInitialPage.tsx
+++ b/src/pages/workspace/WorkspaceInitialPage.tsx
@@ -393,7 +393,6 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
         <ScreenWrapper
             testID={WorkspaceInitialPage.displayName}
             includeSafeAreaPaddingBottom={false}
-            offlineIndicatorStyle={styles.mtAuto}
         >
             <FullPageNotFoundView
                 onBackButtonPress={Navigation.dismissModal}
@@ -415,10 +414,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
                     style={styles.headerBarDesktopHeight}
                 />
 
-                <ScrollView
-                    contentContainerStyle={[styles.flexColumn]}
-                    style={[styles.flexGrow0]}
-                >
+                <ScrollView contentContainerStyle={[styles.flexColumn]}>
                     <OfflineWithFeedback
                         pendingAction={policy?.pendingAction}
                         onClose={() => dismissError(policyID, policy?.pendingAction)}

From 572034c5c112d3aefbff9d9dc11e039721dd1960 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Sat, 23 Nov 2024 02:30:36 +0700
Subject: [PATCH 13/15] fix lint

---
 src/components/MenuItem.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 885fd129cb568..55a23865e4457 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -568,6 +568,15 @@ function MenuItem(
         }
     };
 
+    const getSubscriptpAvatarBackgroundColor = (isHover: boolean, pressed: boolean, hoverBackgroundColor: string, pressedBackgroundColor: string) => {
+        if (pressed) {
+            return pressedBackgroundColor;
+        }
+        if (isHover) {
+            return hoverBackgroundColor;
+        }
+    };
+
     return (
         <View onBlur={onBlur}>
             {!!label && !isLabelHoverable && (
@@ -643,8 +652,7 @@ function MenuItem(
                                                     )}
                                                     {shouldShowAvatar && shouldShowSubscriptAvatar && (
                                                         <SubscriptAvatar
-                                                            // eslint-disable-next-line no-nested-ternary
-                                                            backgroundColor={pressed ? theme.buttonHoveredBG : isHovered ? theme.hoverComponentBG : undefined}
+                                                            backgroundColor={getSubscriptpAvatarBackgroundColor(isHovered, pressed, theme.hoverComponentBG, theme.buttonHoveredBG)}
                                                             mainAvatar={firstIcon as IconType}
                                                             secondaryAvatar={(icon as IconType[]).at(1)}
                                                             size={avatarSize}

From ef84e97c0a5b379e43669c7bfef9e320f4f622ed Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Sat, 23 Nov 2024 02:31:12 +0700
Subject: [PATCH 14/15] rename variable

---
 src/components/MenuItem.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 55a23865e4457..2f9ef67eabc49 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -568,12 +568,12 @@ function MenuItem(
         }
     };
 
-    const getSubscriptpAvatarBackgroundColor = (isHover: boolean, pressed: boolean, hoverBackgroundColor: string, pressedBackgroundColor: string) => {
+    const getSubscriptpAvatarBackgroundColor = (isHovered: boolean, pressed: boolean, hoveredBackgroundColor: string, pressedBackgroundColor: string) => {
         if (pressed) {
             return pressedBackgroundColor;
         }
-        if (isHover) {
-            return hoverBackgroundColor;
+        if (isHovered) {
+            return hoveredBackgroundColor;
         }
     };
 

From 0669d0c67944db1dd398f8ee25ae3391c0be8cfe Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Sat, 23 Nov 2024 03:37:42 +0700
Subject: [PATCH 15/15] move the function to outside

---
 src/components/MenuItem.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 2f9ef67eabc49..259ae3170825d 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -348,6 +348,15 @@ type MenuItemBaseProps = {
 };
 
 type MenuItemProps = (IconProps | AvatarProps | NoIcon) & MenuItemBaseProps;
+
+const getSubscriptpAvatarBackgroundColor = (isHovered: boolean, isPressed: boolean, hoveredBackgroundColor: string, pressedBackgroundColor: string) => {
+    if (isPressed) {
+        return pressedBackgroundColor;
+    }
+    if (isHovered) {
+        return hoveredBackgroundColor;
+    }
+};
 function MenuItem(
     {
         interactive = true,
@@ -568,15 +577,6 @@ function MenuItem(
         }
     };
 
-    const getSubscriptpAvatarBackgroundColor = (isHovered: boolean, pressed: boolean, hoveredBackgroundColor: string, pressedBackgroundColor: string) => {
-        if (pressed) {
-            return pressedBackgroundColor;
-        }
-        if (isHovered) {
-            return hoveredBackgroundColor;
-        }
-    };
-
     return (
         <View onBlur={onBlur}>
             {!!label && !isLabelHoverable && (