From 05e819d86df4e30f45d06a44735dd916828a0487 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 26 Aug 2025 03:29:27 +0530 Subject: [PATCH 01/10] feat: Add the "Add expense" button to two areas of the product. Signed-off-by: krishna2323 --- src/components/MoneyReportHeader.tsx | 36 ++----------- .../MoneyRequestReportTotalSpend.tsx | 2 +- .../MoneyRequestReportTransactionList.tsx | 38 ++++++++++---- .../MoneyRequestReportPreviewContent.tsx | 37 ++------------ .../Search/TransactionGroupListItem.tsx | 20 +++++++- src/components/SelectionList/types.ts | 3 ++ src/libs/ReportUtils.ts | 51 ++++++++++++++++++- 7 files changed, 107 insertions(+), 80 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index a3f34af8e5ee..2a18a4dde06b 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -19,7 +19,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useTransactionsAndViolationsForReport from '@hooks/useTransactionsAndViolationsForReport'; import {setupMergeTransactionData} from '@libs/actions/MergeTransaction'; import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; -import {deleteAppReport, downloadReportPDF, exportReportToCSV, exportReportToPDF, exportToIntegration, markAsManuallyExported, openReport, openUnreportedExpense} from '@libs/actions/Report'; +import {deleteAppReport, downloadReportPDF, exportReportToCSV, exportReportToPDF, exportToIntegration, markAsManuallyExported, openReport} from '@libs/actions/Report'; import {queueExportSearchWithTemplate} from '@libs/actions/Search'; import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID'; import getPlatform from '@libs/getPlatform'; @@ -38,6 +38,7 @@ import {getSecondaryExportReportActions, getSecondaryReportActions} from '@libs/ import { buildTransactionThread, changeMoneyRequestHoldStatus, + getAddExpenseDropdownOptions, getArchiveReason, getIntegrationExportIcon, getIntegrationNameFromExportMessage as getIntegrationNameFromExportMessageUtils, @@ -536,38 +537,7 @@ function MoneyReportHeader({ onlyShowPayElsewhere, }); - const addExpenseDropdownOptions: Array>> = useMemo( - () => [ - { - value: CONST.REPORT.ADD_EXPENSE_OPTIONS.CREATE_NEW_EXPENSE, - text: translate('iou.createExpense'), - icon: Expensicons.Plus, - onSelected: () => { - if (!moneyRequestReport?.reportID) { - return; - } - if (policy && shouldRestrictUserBillableActions(policy.id)) { - Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(policy.id)); - return; - } - startMoneyRequest(CONST.IOU.TYPE.SUBMIT, moneyRequestReport?.reportID); - }, - }, - { - value: CONST.REPORT.ADD_EXPENSE_OPTIONS.ADD_UNREPORTED_EXPENSE, - text: translate('iou.addUnreportedExpense'), - icon: Expensicons.ReceiptPlus, - onSelected: () => { - if (policy && shouldRestrictUserBillableActions(policy.id)) { - Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(policy.id)); - return; - } - openUnreportedExpense(moneyRequestReport?.reportID); - }, - }, - ], - [moneyRequestReport?.reportID, policy, translate], - ); + const addExpenseDropdownOptions = useMemo(() => getAddExpenseDropdownOptions(moneyRequestReport?.reportID, policy), [moneyRequestReport?.reportID, policy]); const [offlineModalVisible, setOfflineModalVisible] = useState(false); diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx index db4573ba39e6..061a000a2fca 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx @@ -36,7 +36,7 @@ function MoneyRequestReportTotalSpend({hasComments, isLoadingReportActions, isEm const isFocused = useIsFocused(); return ( - + ; + /** List of transactions belonging to one report */ transactions: OnyxTypes.Transaction[]; @@ -95,6 +100,7 @@ function MoneyRequestReportTransactionList({ hasComments, isLoadingInitialReportActions: isLoadingReportActions, scrollToNewTransaction, + policy, }: MoneyRequestReportTransactionListProps) { useCopySelectionHelper(); const styles = useThemeStyles(); @@ -111,6 +117,8 @@ function MoneyRequestReportTransactionList({ const shouldShowBreakdown = !!nonReimbursableSpend && !!reimbursableSpend; const transactionsWithoutPendingDelete = useMemo(() => transactions.filter((t) => !isTransactionPendingDelete(t)), [transactions]); + const addExpenseDropdownOptions = useMemo(() => getAddExpenseDropdownOptions(report?.reportID, policy), [report?.reportID, policy]); + const hasPendingAction = useMemo(() => { return transactions.some(getTransactionPendingAction); }, [transactions]); @@ -324,14 +332,26 @@ function MoneyRequestReportTransactionList({ ))} )} - + + {canAddTransaction(report) && ( + {}} + shouldAlwaysShowDropdownMenu + customText={translate('iou.addExpense')} + options={addExpenseDropdownOptions} + isSplitButton={false} + buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL} + /> + )} + + [ - { - value: CONST.REPORT.ADD_EXPENSE_OPTIONS.CREATE_NEW_EXPENSE, - text: translate('iou.createExpense'), - icon: Expensicons.Plus, - onSelected: () => { - if (!iouReport?.reportID) { - return; - } - if (policy && shouldRestrictUserBillableActions(policy.id)) { - Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(policy.id)); - return; - } - startMoneyRequest(CONST.IOU.TYPE.SUBMIT, iouReport?.reportID, undefined, false, chatReportID); - }, - }, - { - value: CONST.REPORT.ADD_EXPENSE_OPTIONS.ADD_UNREPORTED_EXPENSE, - text: translate('iou.addUnreportedExpense'), - icon: Expensicons.ReceiptPlus, - onSelected: () => { - if (policy && shouldRestrictUserBillableActions(policy.id)) { - Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(policy.id)); - return; - } - openUnreportedExpense(iouReport?.reportID, iouReport?.parentReportID); - }, - }, - ], - [chatReportID, iouReport?.parentReportID, iouReport?.reportID, policy, translate], + () => getAddExpenseDropdownOptions(iouReport?.reportID, policy, chatReportID, iouReport?.parentReportID), + [chatReportID, iouReport?.parentReportID, iouReport?.reportID, policy], ); const isReportDeleted = action?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE; diff --git a/src/components/SelectionList/Search/TransactionGroupListItem.tsx b/src/components/SelectionList/Search/TransactionGroupListItem.tsx index 13629002e70a..a2da94ea9866 100644 --- a/src/components/SelectionList/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionList/Search/TransactionGroupListItem.tsx @@ -2,6 +2,7 @@ import React, {useCallback, useMemo, useRef} from 'react'; import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; import {getButtonRole} from '@components/Button/utils'; +import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import {PressableWithFeedback} from '@components/Pressable'; import type {SearchGroupBy} from '@components/Search/types'; @@ -19,6 +20,7 @@ import Text from '@components/Text'; import TransactionItemRow from '@components/TransactionItemRow'; import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; import useLocalize from '@hooks/useLocalize'; +import usePolicy from '@hooks/usePolicy'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useSyncFocus from '@hooks/useSyncFocus'; @@ -26,6 +28,7 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {getReportIDForTransaction} from '@libs/MoneyRequestReportUtils'; import Navigation from '@libs/Navigation/Navigation'; +import {canAddTransaction as canAddTransactionUtil, getAddExpenseDropdownOptions} from '@libs/ReportUtils'; import variables from '@styles/variables'; import {setActiveTransactionThreadIDs} from '@userActions/TransactionThreadNavigation'; import CONST from '@src/CONST'; @@ -52,11 +55,14 @@ function TransactionGroupListItem({ const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); - const isEmpty = groupItem.transactions.length === 0; + const isEmpty = groupItem.transactions.length !== 0; // Currently only the transaction report groups have transactions where the empty view makes sense const shouldDisplayEmptyView = isEmpty && groupBy === CONST.SEARCH.GROUP_BY.REPORTS; const isDisabledOrEmpty = isEmpty || isDisabled; const {isLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); + const policy = usePolicy(groupItem.policyID); + const addExpenseDropdownOptions = useMemo(() => getAddExpenseDropdownOptions(groupItem.reportID, policy), [groupItem.reportID, policy]); + const canAddTransaction = canAddTransactionUtil(groupItem as TransactionReportGroupListItemType); const {amountColumnSize, dateColumnSize, taxAmountColumnSize} = useMemo(() => { const isAmountColumnWide = groupItem.transactions.some((transaction) => transaction.isAmountColumnWide); @@ -199,13 +205,23 @@ function TransactionGroupListItem({ {getHeader} {shouldDisplayEmptyView ? ( - + {translate('search.moneyRequestReport.emptyStateTitle')} + {canAddTransaction && ( + {}} + shouldAlwaysShowDropdownMenu + customText={translate('iou.addExpense')} + options={addExpenseDropdownOptions} + isSplitButton={false} + buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL} + /> + )} ) : ( groupItem.transactions.map((transaction) => ( diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 6e6196c3294b..0a30e4d63c15 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -571,6 +571,9 @@ type SelectionListProps = Partial & { /** Whether this is a multi-select list */ canSelectMultiple?: boolean; + /** Whether selected items should be shown at the top within each section */ + shouldPrioritizeSelectedItems?: boolean; + /** Callback to fire when a row is pressed */ onSelectRow: (item: TItem) => void; diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 1695b92847f9..971e50ef465e 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -13,7 +13,9 @@ import Onyx from 'react-native-onyx'; import type {SvgProps} from 'react-native-svg'; import type {OriginalMessageChangePolicy, OriginalMessageExportIntegration, OriginalMessageModifiedExpense} from 'src/types/onyx/OriginalMessage'; import type {SetRequired, TupleToUnion, ValueOf} from 'type-fest'; +import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types'; import {FallbackAvatar, IntacctSquare, NetSuiteExport, NetSuiteSquare, QBDSquare, QBOExport, QBOSquare, SageIntacctExport, XeroExport, XeroSquare} from '@components/Icon/Expensicons'; +import * as Expensicons from '@components/Icon/Expensicons'; import * as defaultGroupAvatars from '@components/Icon/GroupDefaultAvatars'; import * as defaultWorkspaceAvatars from '@components/Icon/WorkspaceDefaultAvatars'; import type {LocaleContextProps} from '@components/LocaleContextProvider'; @@ -70,10 +72,10 @@ import type {SearchPolicy, SearchReport, SearchTransaction} from '@src/types/ony import type {Comment, TransactionChanges, WaypointCollection} from '@src/types/onyx/Transaction'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type IconAsset from '@src/types/utils/IconAsset'; -import {createDraftTransaction, getIOUReportActionToApproveOrPay, setMoneyRequestParticipants, unholdRequest} from './actions/IOU'; +import {createDraftTransaction, getIOUReportActionToApproveOrPay, setMoneyRequestParticipants, startMoneyRequest, unholdRequest} from './actions/IOU'; import {createDraftWorkspace} from './actions/Policy/Policy'; import {hasCreditBankAccount} from './actions/ReimbursementAccount/store'; -import {handleReportChanged} from './actions/Report'; +import {handleReportChanged, openUnreportedExpense} from './actions/Report'; import type {GuidedSetupData, TaskForParameters} from './actions/Report'; import {isAnonymousUser as isAnonymousUserSession} from './actions/Session'; import {getOnboardingMessages} from './actions/Welcome/OnboardingFlow'; @@ -2551,6 +2553,50 @@ function isMoneyRequestReportEligibleForMerge(reportID: string, isAdmin: boolean return isManager && isExpenseReport(report) && isProcessingReport(report); } +/** + * Returns the dropdown options for the add expense button + * @param iouReport - The IOU report to add an expense to + * @param policy - The policy of the IOU report + * @param backToReport - The report to return to after adding an expense + * @returns The dropdown options for the add expense button + */ +function getAddExpenseDropdownOptions( + iouReportID: string | undefined, + policy: OnyxEntry, + iouRequestBackToReport?: string, + unreportedExpenseBackToReport?: string, +): Array>> { + return [ + { + value: CONST.REPORT.ADD_EXPENSE_OPTIONS.CREATE_NEW_EXPENSE, + text: translateLocal('iou.createExpense'), + icon: Expensicons.Plus, + onSelected: () => { + if (!iouReportID) { + return; + } + if (policy && shouldRestrictUserBillableActions(policy.id)) { + Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(policy.id)); + return; + } + startMoneyRequest(CONST.IOU.TYPE.SUBMIT, iouReportID, undefined, false, iouRequestBackToReport); + }, + }, + { + value: CONST.REPORT.ADD_EXPENSE_OPTIONS.ADD_UNREPORTED_EXPENSE, + text: translateLocal('iou.addUnreportedExpense'), + icon: Expensicons.ReceiptPlus, + onSelected: () => { + if (policy && shouldRestrictUserBillableActions(policy.id)) { + Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(policy.id)); + return; + } + openUnreportedExpense(iouReportID, unreportedExpenseBackToReport); + }, + }, + ]; +} + /** * Checks whether the card transaction support deleting based on liability type */ @@ -11612,6 +11658,7 @@ export { getRootParentReport, getRouteFromLink, canDeleteCardTransactionByLiabilityType, + getAddExpenseDropdownOptions, getTaskAssigneeChatOnyxData, getTransactionDetails, getTransactionReportName, From aa3a3db2e935e2b3bde6d1537d750aedbf699f93 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 26 Aug 2025 03:53:56 +0530 Subject: [PATCH 02/10] fix ESLint. Signed-off-by: krishna2323 --- .../MoneyRequestReportView/MoneyRequestReportActionsList.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx index 16f3aa3260da..27217bcfa07d 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx @@ -724,6 +724,7 @@ function MoneyRequestReportActionsList({ hasComments={reportHasComments} isLoadingInitialReportActions={showReportActionsLoadingState} scrollToNewTransaction={scrollToNewTransaction} + policy={policy} /> } From d5dc8b9e536c6c4975f6e29c7ea206f962643c16 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 27 Aug 2025 09:40:20 +0530 Subject: [PATCH 03/10] remove "comments" text and align "Add expense" button to top. Signed-off-by: krishna2323 --- .../MoneyRequestReportActionsList.tsx | 3 - .../MoneyRequestReportTotalSpend.tsx | 20 +--- .../MoneyRequestReportTransactionList.tsx | 91 ++++++++----------- .../Search/TransactionGroupListItem.tsx | 3 +- 4 files changed, 42 insertions(+), 75 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx index 27217bcfa07d..597a6611b933 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx @@ -598,7 +598,6 @@ function MoneyRequestReportActionsList({ }, [reportScrollManager], ); - const reportHasComments = visibleReportActions.length > 0; /** * Runs when the FlatList finishes laying out @@ -721,8 +720,6 @@ function MoneyRequestReportActionsList({ transactions={transactions} newTransactions={newTransactions} reportActions={reportActions} - hasComments={reportHasComments} - isLoadingInitialReportActions={showReportActionsLoadingState} scrollToNewTransaction={scrollToNewTransaction} policy={policy} /> diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx index 061a000a2fca..1865147416ee 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx @@ -1,7 +1,5 @@ -import {useIsFocused} from '@react-navigation/native'; import React from 'react'; import {View} from 'react-native'; -import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; @@ -13,12 +11,6 @@ type MoneyRequestReportTotalSpendProps = { /** Report for which the total spend is being displayed */ report: OnyxTypes.Report; - /** Whether the report has any comments */ - hasComments: boolean; - - /** Whether the report is loading report actions */ - isLoadingReportActions: boolean; - /** Whether the report has any transactions */ isEmptyTransactions: boolean; @@ -29,21 +21,13 @@ type MoneyRequestReportTotalSpendProps = { hasPendingAction: boolean; }; -function MoneyRequestReportTotalSpend({hasComments, isLoadingReportActions, isEmptyTransactions, totalDisplaySpend, report, hasPendingAction}: MoneyRequestReportTotalSpendProps) { +function MoneyRequestReportTotalSpend({isEmptyTransactions, totalDisplaySpend, report, hasPendingAction}: MoneyRequestReportTotalSpendProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const {shouldUseNarrowLayout} = useResponsiveLayout(); - const isFocused = useIsFocused(); return ( - - - {hasComments || isLoadingReportActions ? translate('common.comments') : ''} - + {!isEmptyTransactions && ( {translate('common.total')} diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index f4e611b09125..f4cd358e72bc 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -55,12 +55,6 @@ type MoneyRequestReportTransactionListProps = { /** Array of report actions for the report that these transactions belong to */ reportActions: OnyxTypes.ReportAction[]; - /** Whether the report that these transactions belong to has any chat comments */ - hasComments: boolean; - - /** Whether the report actions are being loaded, used to show 'Comments' during loading state */ - isLoadingInitialReportActions?: boolean; - /** scrollToNewTransaction callback used for scrolling to new transaction when it is created */ scrollToNewTransaction: (offset: number) => void; }; @@ -92,16 +86,7 @@ const getTransactionKey = (transaction: OnyxTypes.Transaction, key: SortableColu return key === CONST.SEARCH.TABLE_COLUMNS.DATE ? dateKey : key; }; -function MoneyRequestReportTransactionList({ - report, - transactions, - newTransactions, - reportActions, - hasComments, - isLoadingInitialReportActions: isLoadingReportActions, - scrollToNewTransaction, - policy, -}: MoneyRequestReportTransactionListProps) { +function MoneyRequestReportTransactionList({report, transactions, newTransactions, reportActions, scrollToNewTransaction, policy}: MoneyRequestReportTransactionListProps) { useCopySelectionHelper(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -235,8 +220,6 @@ function MoneyRequestReportTransactionList({ <> - {shouldShowBreakdown && ( - - {[ - {text: 'cardTransactions.outOfPocket', value: formattedOutOfPocketAmount}, - {text: 'cardTransactions.companySpend', value: formattedCompanySpendAmount}, - ].map(({text, value}) => ( - - - {translate(text as TranslationPaths)} - - - {value} - - - ))} - - )} - + {canAddTransaction(report) && ( {}} @@ -341,16 +298,44 @@ function MoneyRequestReportTransactionList({ options={addExpenseDropdownOptions} isSplitButton={false} buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL} + success={false} /> )} - + + {shouldShowBreakdown && ( + + {[ + {text: 'cardTransactions.outOfPocket', value: formattedOutOfPocketAmount}, + {text: 'cardTransactions.companySpend', value: formattedCompanySpendAmount}, + ].map(({text, value}) => ( + + + {translate(text as TranslationPaths)} + + + {value} + + + ))} + + )} + + + ({ const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); - const isEmpty = groupItem.transactions.length !== 0; + const isEmpty = groupItem.transactions.length === 0; // Currently only the transaction report groups have transactions where the empty view makes sense const shouldDisplayEmptyView = isEmpty && groupBy === CONST.SEARCH.GROUP_BY.REPORTS; const isDisabledOrEmpty = isEmpty || isDisabled; @@ -220,6 +220,7 @@ function TransactionGroupListItem({ options={addExpenseDropdownOptions} isSplitButton={false} buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL} + success={false} /> )} From 26a8e2c0a8445325fa26b7bcb13986735c577289 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 28 Aug 2025 11:48:02 +0530 Subject: [PATCH 04/10] fix ESLint. Signed-off-by: krishna2323 --- .../MoneyRequestReportTransactionList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 3ea9cde7ed37..03da9c68684c 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -25,7 +25,7 @@ import {convertToDisplayString} from '@libs/CurrencyUtils'; import {getThreadReportIDsForTransactions} from '@libs/MoneyRequestReportUtils'; import {navigationRef} from '@libs/Navigation/Navigation'; import {getIOUActionForTransactionID} from '@libs/ReportActionsUtils'; -import {getAddExpenseDropdownOptions, getMoneyRequestSpendBreakdown} from '@libs/ReportUtils'; +import {canAddTransaction, getAddExpenseDropdownOptions, getMoneyRequestSpendBreakdown} from '@libs/ReportUtils'; import {compareValues, getColumnsToShow, isTransactionAmountTooLong, isTransactionTaxAmountTooLong} from '@libs/SearchUIUtils'; import {getTransactionPendingAction, isTransactionPendingDelete} from '@libs/TransactionUtils'; import shouldShowTransactionYear from '@libs/TransactionUtils/shouldShowTransactionYear'; From 48d8821b859b32cf09ccbccf48f6f6d8f8a53041 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 28 Aug 2025 22:08:15 +0530 Subject: [PATCH 05/10] update "add expense" button styles on reports page. Signed-off-by: krishna2323 --- .../SelectionList/Search/TransactionGroupListItem.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/SelectionList/Search/TransactionGroupListItem.tsx b/src/components/SelectionList/Search/TransactionGroupListItem.tsx index adcfee4dbe76..486b624ab1bb 100644 --- a/src/components/SelectionList/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionList/Search/TransactionGroupListItem.tsx @@ -184,7 +184,7 @@ function TransactionGroupListItem({ {getHeader} {shouldDisplayEmptyView ? ( - + ({ options={addExpenseDropdownOptions} isSplitButton={false} buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL} - success={false} /> )} From 3c946eaac2a614cdf954d9d33d9e8e0b6f54c491 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 29 Aug 2025 12:53:33 +0530 Subject: [PATCH 06/10] fix prettier check. Signed-off-by: krishna2323 --- .../MoneyRequestReportTransactionList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 0b6d15ac4c43..77920d1051db 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -26,7 +26,7 @@ import {getThreadReportIDsForTransactions} from '@libs/MoneyRequestReportUtils'; import {navigationRef} from '@libs/Navigation/Navigation'; import Parser from '@libs/Parser'; import {getIOUActionForTransactionID, getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils'; -import {canAddTransaction, getAddExpenseDropdownOptions, generateReportID, getMoneyRequestSpendBreakdown} from '@libs/ReportUtils'; +import {canAddTransaction, generateReportID, getAddExpenseDropdownOptions, getMoneyRequestSpendBreakdown} from '@libs/ReportUtils'; import {compareValues, getColumnsToShow, isTransactionAmountTooLong, isTransactionTaxAmountTooLong} from '@libs/SearchUIUtils'; import {getTransactionPendingAction, isTransactionPendingDelete} from '@libs/TransactionUtils'; import shouldShowTransactionYear from '@libs/TransactionUtils/shouldShowTransactionYear'; From 4ec11b354d2b048f1188c473a567127a329a3013 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 4 Sep 2025 14:38:52 +0530 Subject: [PATCH 07/10] fix prettier. Signed-off-by: krishna2323 --- src/components/MoneyReportHeader.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 2b94116766c4..ca3953b825a3 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -19,15 +19,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useTransactionsAndViolationsForReport from '@hooks/useTransactionsAndViolationsForReport'; import {setupMergeTransactionData} from '@libs/actions/MergeTransaction'; import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; -import { - createTransactionThreadReport, - deleteAppReport, - downloadReportPDF, - exportReportToCSV, - exportReportToPDF, - exportToIntegration, - markAsManuallyExported, -} from '@libs/actions/Report'; +import {createTransactionThreadReport, deleteAppReport, downloadReportPDF, exportReportToCSV, exportReportToPDF, exportToIntegration, markAsManuallyExported} from '@libs/actions/Report'; import {queueExportSearchWithTemplate, search} from '@libs/actions/Search'; import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID'; import getPlatform from '@libs/getPlatform'; From 6acc96b7ee14e0f7305041d268ef6b300d504423 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 11 Sep 2025 02:40:25 +0530 Subject: [PATCH 08/10] fix prettier and ESLint. Signed-off-by: krishna2323 --- .../MoneyRequestReportActionsList.tsx | 4 ---- .../MoneyRequestReportTransactionList.tsx | 10 +-------- .../Search/TransactionGroupListItem.tsx | 22 +++++++++---------- src/libs/ReportUtils.ts | 11 +++++++++- 4 files changed, 22 insertions(+), 25 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx index 796def64d070..55ffb40fb9d5 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx @@ -91,9 +91,6 @@ type MoneyRequestReportListProps = { /** List of transactions that arrived when the report was open */ newTransactions: OnyxTypes.Transaction[]; - /** Violations indexed by transaction ID */ - violations?: Record; - /** If the report has newer actions to load */ hasNewerActions: boolean; @@ -117,7 +114,6 @@ function MoneyRequestReportActionsList({ reportActions = [], transactions = [], newTransactions, - violations, hasNewerActions, hasOlderActions, showReportActionsLoadingState, diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 2be70d053278..fea3a3f9758c 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -112,15 +112,7 @@ const getTransactionValue = (transaction: OnyxTypes.Transaction, key: SortableCo } }; -function MoneyRequestReportTransactionList({ - report, - transactions, - newTransactions, - reportActions, - violations, - scrollToNewTransaction, - policy -}: MoneyRequestReportTransactionListProps) { +function MoneyRequestReportTransactionList({report, transactions, newTransactions, reportActions, violations, scrollToNewTransaction, policy}: MoneyRequestReportTransactionListProps) { useCopySelectionHelper(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); diff --git a/src/components/SelectionList/Search/TransactionGroupListItem.tsx b/src/components/SelectionList/Search/TransactionGroupListItem.tsx index 2ca11e97ed3c..8d23335bc818 100644 --- a/src/components/SelectionList/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionList/Search/TransactionGroupListItem.tsx @@ -23,8 +23,8 @@ import Text from '@components/Text'; import TransactionItemRow from '@components/TransactionItemRow'; import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; import useLocalize from '@hooks/useLocalize'; -import usePolicy from '@hooks/usePolicy'; import useOnyx from '@hooks/useOnyx'; +import usePolicy from '@hooks/usePolicy'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useSyncFocus from '@hooks/useSyncFocus'; @@ -33,8 +33,8 @@ import useThemeStyles from '@hooks/useThemeStyles'; import {search} from '@libs/actions/Search'; import {getReportIDForTransaction} from '@libs/MoneyRequestReportUtils'; import Navigation from '@libs/Navigation/Navigation'; -import {canAddTransaction as canAddTransactionUtil, getAddExpenseDropdownOptions} from '@libs/ReportUtils'; import {getReportAction} from '@libs/ReportActionsUtils'; +import {canAddTransaction as canAddTransactionUtil, getAddExpenseDropdownOptions} from '@libs/ReportUtils'; import {createAndOpenSearchTransactionThread, getColumnsToShow, getSections} from '@libs/SearchUIUtils'; import variables from '@styles/variables'; import {setActiveTransactionThreadIDs} from '@userActions/TransactionThreadNavigation'; @@ -308,15 +308,15 @@ function TransactionGroupListItem({ {translate('search.moneyRequestReport.emptyStateTitle')} {canAddTransaction && ( - {}} - shouldAlwaysShowDropdownMenu - customText={translate('iou.addExpense')} - options={addExpenseDropdownOptions} - isSplitButton={false} - buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL} - /> - )} + {}} + shouldAlwaysShowDropdownMenu + customText={translate('iou.addExpense')} + options={addExpenseDropdownOptions} + isSplitButton={false} + buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL} + /> + )} ) : ( <> diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 1ca79c1d6224..c319a1ac535f 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -73,7 +73,16 @@ import type {SearchPolicy, SearchReport, SearchTransaction} from '@src/types/ony import type {Comment, TransactionChanges, WaypointCollection} from '@src/types/onyx/Transaction'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type IconAsset from '@src/types/utils/IconAsset'; -import {canApproveIOU, canIOUBePaid, canSubmitReport, createDraftTransaction, getIOUReportActionToApproveOrPay, setMoneyRequestParticipants, startMoneyRequest, unholdRequest} from './actions/IOU'; +import { + canApproveIOU, + canIOUBePaid, + canSubmitReport, + createDraftTransaction, + getIOUReportActionToApproveOrPay, + setMoneyRequestParticipants, + startMoneyRequest, + unholdRequest, +} from './actions/IOU'; import {createDraftWorkspace} from './actions/Policy/Policy'; import {hasCreditBankAccount} from './actions/ReimbursementAccount/store'; import {handleReportChanged, openUnreportedExpense} from './actions/Report'; From 5f6676981d538ea44a96c2fed108da242b5f5c3d Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 11 Sep 2025 02:45:12 +0530 Subject: [PATCH 09/10] add violations prop back. Signed-off-by: krishna2323 --- .../MoneyRequestReportView/MoneyRequestReportActionsList.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx index 55ffb40fb9d5..22be89a2674c 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx @@ -91,6 +91,9 @@ type MoneyRequestReportListProps = { /** List of transactions that arrived when the report was open */ newTransactions: OnyxTypes.Transaction[]; + /** Violations indexed by transaction ID */ + violations?: Record; + /** If the report has newer actions to load */ hasNewerActions: boolean; @@ -114,6 +117,7 @@ function MoneyRequestReportActionsList({ reportActions = [], transactions = [], newTransactions, + violations, hasNewerActions, hasOlderActions, showReportActionsLoadingState, @@ -720,6 +724,7 @@ function MoneyRequestReportActionsList({ transactions={transactions} newTransactions={newTransactions} reportActions={reportActions} + violations={violations} scrollToNewTransaction={scrollToNewTransaction} policy={policy} /> From a0ad950f48bd5846ea117ed66063578b397235ee Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Mon, 15 Sep 2025 04:55:55 +0530 Subject: [PATCH 10/10] fix buttons anchor alignment. Signed-off-by: krishna2323 --- .../MoneyRequestReportTransactionList.tsx | 4 ++++ .../SelectionList/Search/TransactionGroupListItem.tsx | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 99f603386e70..27d8211df95d 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -349,6 +349,10 @@ function MoneyRequestReportTransactionList({report, transactions, newTransaction isSplitButton={false} buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL} success={false} + anchorAlignment={{ + horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, + vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, + }} /> )} diff --git a/src/components/SelectionList/Search/TransactionGroupListItem.tsx b/src/components/SelectionList/Search/TransactionGroupListItem.tsx index 8d23335bc818..ea4791a26984 100644 --- a/src/components/SelectionList/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionList/Search/TransactionGroupListItem.tsx @@ -315,6 +315,10 @@ function TransactionGroupListItem({ options={addExpenseDropdownOptions} isSplitButton={false} buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL} + anchorAlignment={{ + horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, + vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, + }} /> )}