[$250] Reports - Violations are not visible on expense preview on "Top Spenders" section.

[jponikarchuk]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.2.97-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #78410
Email or phone of affected tester (no customers): ibellicotest+2250@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Motorola MotoG60 / Android 12 (Hybrid app) - Windows 11 / Chrome
App Component: Search

Action Performed:

Prerequisite: Account has at least one workspace.

1. Open the Expensify app.
2. Open any workspace chat.
3. Create a manual expense with date from last month.
4. Navigate to "Reports" > "Top Spenders"
5. Expand the results.
6. Long tap and select the just created expense.
7. Tap on dropdown menu and select "Hold"
8. Enter any reason and hold the expense.
9. Note that after expense is held, no message is visible on expense preview.
10. Open the expense.
11. Note that expense is correctly held.
12. Return to "Top Spenders"
13. Note that violation message is still not visible.

Expected Result:

Violations should be visible on preview of expenses while on "Top Spenders" section.

Actual Result:

After holding an expense while on "Top Spenders" section, no violation message appears on preview. Same behaviour is experienced in "Unapproved Cash" section.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022009792744841457091
• Upwork Job ID: 2009792744841457091
• Last Price Increase: 2026-01-10

Issue Owner

Current Issue Owner: @brianlee-expensify

[melvin-bot]

Triggered auto assignment to @brianlee-expensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[nyomanjyotisa]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Reports - Violations are not visible on expense preview on "Top Spenders" section.

What is the root cause of that problem?

In the Search component, filteredViolations is computed by iterating only through transactions in searchResults.data

App/src/components/Search/index.tsx

Lines 263 to 273 in fd10aa2

	const transactionKeys = Object.keys(searchResults.data).filter((key) => key.startsWith(ONYXKEYS.COLLECTION.TRANSACTION));
	for (const key of transactionKeys) {
	const transaction = searchResults.data[key as keyof typeof searchResults.data] as Transaction;
	if (!transaction || typeof transaction !== 'object' || !('transactionID' in transaction) || !('reportID' in transaction)) {
	continue;
	}
	const report = searchResults.data[`${ONYXKEYS.COLLECTION.REPORT}${transaction.reportID}`];
	const policy = searchResults.data[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`];

But when a group is expanded, TransactionGroupListItem loads transactions from a separate transactionsSnapshot Onyx collection

App/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx

Line 96 in fd10aa2

const [transactionsSnapshot] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${groupItem.transactionsQueryJSON?.hash}`, {canBeMissing: true});

App/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx

Lines 107 to 112 in fd10aa2

	if (!transactionsSnapshot?.data) {
	return [];
	}
	const [sectionData] = getSections({
	type: CONST.SEARCH.DATA_TYPES.EXPENSE,
	data: transactionsSnapshot?.data,

Since these expanded transactions aren't in searchResults.data, their violations are excluded from filteredViolations

What changes do you think we should make in order to solve the problem?

Skip the pre-filtering of violations when the search is grouped (i.e., when validGroupBy is set). For grouped searches like Top Spenders, pass the raw violations collection instead of filteredViolations

    const validGroupBy = groupBy && Object.values(CONST.SEARCH.GROUP_BY).includes(groupBy) ? groupBy : undefined;

    const filteredViolations = useMemo(() => {
        // For grouped searches, skip pre-filtering since expanded groups load data from separate snapshots
        if (validGroupBy) {
            return violations;
        }
        
        if (!violations || !searchResults?.data) {
            return violations;
        }

        ...

App/src/components/Search/index.tsx

Lines 255 to 289 in fd10aa2

	// Filter violations based on user visibility
	const filteredViolations = useMemo(() => {
	if (!violations || !searchResults?.data) {
	return violations;
	}
	const filtered: Record<string, TransactionViolation[]> = {};
	const transactionKeys = Object.keys(searchResults.data).filter((key) => key.startsWith(ONYXKEYS.COLLECTION.TRANSACTION));
	for (const key of transactionKeys) {
	const transaction = searchResults.data[key as keyof typeof searchResults.data] as Transaction;
	if (!transaction || typeof transaction !== 'object' || !('transactionID' in transaction) || !('reportID' in transaction)) {
	continue;
	}
	const report = searchResults.data[`${ONYXKEYS.COLLECTION.REPORT}${transaction.reportID}`];
	const policy = searchResults.data[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`];
	if (report && policy) {
	const transactionViolations = violations[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transaction.transactionID}`];
	if (transactionViolations) {
	const filteredTransactionViolations = mergeProhibitedViolations(
	transactionViolations.filter((violation) => shouldShowViolation(report, policy, violation.name, email ?? '', true, transaction)),
	);
	if (filteredTransactionViolations.length > 0) {
	filtered[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transaction.transactionID}`] = filteredTransactionViolations;
	}
	}
	}
	}
	return filtered;
	}, [violations, searchResults, email]);

What alternative solutions did you explore? (Optional)

None

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022009792744841457091

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @akinwale (External)

[yatin-italy]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Violations are not visible on expense previews in the "Top Spenders" section. After holding an expense while viewing grouped search results, the violation message does not appear on the expense preview.

What is the root cause of that problem?

In Search/index.tsx, filteredViolations is computed by iterating only through transactions in searchResults.data:
index.tsx
Lines 253-287

// Filter violations based on user visibility
const filteredViolations = useMemo(() => {
    if (!violations || !searchResults?.data) {
        return violations;
    }

    const filtered: Record<string, TransactionViolation[]> = {};
    const transactionKeys = Object.keys(searchResults.data).filter((key) =>
        key.startsWith(ONYXKEYS.COLLECTION.TRANSACTION),
    );

    for (const key of transactionKeys) {
        // eslint-disable-next-line @typescript-eslint/no-deprecated
        const transaction = searchResults.data[key as keyof typeof searchResults.data] as SearchTransaction;

        if (
            !transaction ||
            typeof transaction !== 'object' ||
            !('transactionID' in transaction) ||
            !('reportID' in transaction)
        ) {
            continue;
        }

        const report = searchResults.data[`${ONYXKEYS.COLLECTION.REPORT}${transaction.reportID}`];
        const policy = searchResults.data[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`];

        if (report && policy) {
            const transactionViolations =
                violations[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transaction.transactionID}`];

            if (transactionViolations) {
                const filteredTransactionViolations = mergeProhibitedViolations(
                    transactionViolations.filter((violation) =>
                        shouldShowViolation(
                            report,
                            policy,
                            violation.name,
                            email ?? '',
                            true,
                            transaction,
                        ),
                    ),
                );

                if (filteredTransactionViolations.length > 0) {
                    filtered[
                        `${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transaction.transactionID}`
                    ] = filteredTransactionViolations;
                }
            }
        }
    }

    return filtered;
}, [violations, searchResults, email]);

When a group is expanded, TransactionGroupListItem loads transactions from a separate transactionsSnapshot Onyx collection (line 95), but TransactionGroupListExpanded receives filteredViolations which only contains violations for transactions in searchResults.data. As a result, violations for transactions loaded from the snapshot are missing.

What changes do you think we should make in order to solve the problem?

For grouped searches, skip pre-filtering in Search/index.tsx and pass raw violations. Update TransactionGroupListExpanded to filter violations per transaction using shouldShowViolation, matching the pattern in TransactionListItem.

Change 1: Modify filteredViolations computation in Search/index.tsx:

// Filter violations based on user visibility
const filteredViolations = useMemo(() => {
    // For grouped searches, skip pre-filtering since expanded groups load data from separate snapshots
    if (validGroupBy) {
        return violations;
    }

    if (!violations || !searchResults?.data) {
        return violations;
    }

    const filtered: Record<string, TransactionViolation[]> = {};
    const transactionKeys = Object.keys(searchResults.data).filter((key) =>
        key.startsWith(ONYXKEYS.COLLECTION.TRANSACTION),
    );

    for (const key of transactionKeys) {
        // eslint-disable-next-line @typescript-eslint/no-deprecated
        const transaction = searchResults.data[key as keyof typeof searchResults.data] as SearchTransaction;

        if (
            !transaction ||
            typeof transaction !== 'object' ||
            !('transactionID' in transaction) ||
            !('reportID' in transaction)
        ) {
            continue;
        }

        const report = searchResults.data[`${ONYXKEYS.COLLECTION.REPORT}${transaction.reportID}`];
        const policy = searchResults.data[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`];

        if (report && policy) {
            const transactionViolations =
                violations[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transaction.transactionID}`];

            if (transactionViolations) {
                const filteredTransactionViolations = mergeProhibitedViolations(
                    transactionViolations.filter((violation) =>
                        shouldShowViolation(
                            report,
                            policy,
                            violation.name,
                            email ?? '',
                            true,
                            transaction,
                        ),
                    ),
                );

                if (filteredTransactionViolations.length > 0) {
                    filtered[
                        `${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transaction.transactionID}`
                    ] = filteredTransactionViolations;
                }
            }
        }
    }

    return filtered;
}, [violations, searchResults, email, validGroupBy]);

Change 2: Add imports and update violation filtering in TransactionGroupListExpanded.tsx:

import {
    isViolationDismissed,
    mergeProhibitedViolations,
    shouldShowViolation,
} from '@libs/TransactionUtils';

{visibleTransactions.map((transaction, index) => {
    const shouldShowBottomBorder = !isLastTransaction(index) && !isLargeScreenWidth;

    const transactionViolations =
        violations?.[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transaction.transactionID}`];

    const filteredTransactionViolations = transactionViolations?.filter(
        (violation) =>
            !isViolationDismissed(
                transaction,
                violation,
                currentUserDetails.email ?? '',
                currentUserDetails.accountID,
                transaction.report,
                transaction.policy,
            ) &&
            shouldShowViolation(
                transaction.report,
                transaction.policy,
                violation.name,
                currentUserDetails.email ?? '',
                true,
                transaction,
            ),
    );

    const mergedViolations =
        filteredTransactionViolations && filteredTransactionViolations.length > 0
            ? mergeProhibitedViolations(filteredTransactionViolations)
            : undefined;

    const transactionRow = (
        <TransactionItemRow
            hash={transactionsQueryJSON?.hash}
            report={transaction.report}
            transactionItem={transaction}
            violations={mergedViolations}
            isSelected={!!transaction.isSelected}
            dateColumnSize={dateColumnSize}
            amountColumnSize={amountColumnSize}
            taxAmountColumnSize={taxAmountColumnSize}
            shouldShowTooltip={showTooltip}
            shouldUseNarrowLayout={!isLargeScreenWidth}
            shouldShowCheckbox={!!canSelectMultiple}
            onCheckboxPress={() => onCheckboxPress?.(transaction as unknown as TItem)}
            columns={currentColumns}
            onButtonPress={() => {
                openReportInRHP(transaction);
            }}
            style={[
                styles.noBorderRadius,
                styles.p3,
                isLargeScreenWidth && [styles.pv1Half],
                styles.flex1,
            ]}
            isReportItemChild
            isInSingleTransactionReport={isInSingleTransactionReport}
            shouldShowBottomBorder={shouldShowBottomBorder}
            onArrowRightPress={() => openReportInRHP(transaction)}
            shouldShowArrowRightOnNarrowLayout
        />
    );

This uses the report and policy already attached to each transaction from snapshot data (via getSections), matching the pattern used in TransactionListItem (lines 121-127), ensuring violations are filtered correctly for both main search results and expanded snapshot transactions.

What alternative solutions did you explore? (Optional)

None

[truph01]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• Reports - Violations are not visible on expense preview on "Top Spenders" section

What is the root cause of that problem?

• In the logic used to fetch violation data

  App/src/components/Search/index.tsx

  Line 256 in 073940f

  const filteredViolations = useMemo(() => {

  , violations are only retrieved for transactions present in the current search results.

• However, in the "Top Spenders" view, the current search result does not include transactions or violation data. Instead, transaction and violation data are sourced from a different snapshot:

  App/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx

  Line 96 in fd10aa2

  const [transactionsSnapshot] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${groupItem.transactionsQueryJSON?.hash}`, {canBeMissing: true});

• As a result, violations are not shown for transactions in the "Top Spenders" or "Unapproved Cash" sections because they rely on data that isn't part of the main search result payload.

What changes do you think we should make in order to solve the problem?

• In TransactionItemRow, we should re-calculate violation data when the violations prop is empty.

• This fallback ensures that violation info is still rendered using available data from the transaction itself, even when it isn’t present in the passed violations object.

    const {email = '', accountID} = useCurrentUserPersonalDetails();

    const mergedViolations =
        violations ??
        mergeProhibitedViolations(
            transactionItem?.violations?.filter(
                (violation: TransactionViolation) =>
                    !isViolationDismissed(transactionItem, violation, email, accountID, transactionItem.report, transactionItem.policy) &&
                    shouldShowViolation(transactionItem.report, transactionItem.policy, violation.name, email, true, transactionItem),
            ),
        );

• Then, replace existing references to violations with mergedViolations in here and here

What alternative solutions did you explore? (Optional)

[github-actions]

⚠️ @truph01 Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[nkdengineer]

Proposal

Please re-state the problem that we are trying to solve in this issue.

After holding an expense while on "Top Spenders" section, no violation message appears on preview. Same behaviour is experienced in "Unapproved Cash" section.

What is the root cause of that problem?

For group-by filter, the transaction violation data is in the snapshot of each group instead of the search query snapshot then no violation appears.

App/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx

Line 374 in 183c181

violations={violations}

What changes do you think we should make in order to solve the problem?

We should get the violations from snapshot of each group. The logic is the same here

const groupViolations = useMemo(() => {
        if (!transactionsSnapshot?.data) {
            return {};
        }
        const result: Record<string, TransactionViolations | undefined> = {};
        for (const [key, value] of Object.entries(transactionsSnapshot.data)) {
            if (key.startsWith(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS)) {
                result[key] = value as TransactionViolations;
            }
        }
        return result;
    }, [transactionsSnapshot?.data]);

    // Filter violations based on user visibility
    const filteredViolations = useMemo(() => {
        if (!groupViolations || !transactionsSnapshot?.data) {
            return groupViolations;
        }

        const filtered: Record<string, TransactionViolation[]> = {};

        const transactionKeys = Object.keys(transactionsSnapshot.data).filter((key) => key.startsWith(ONYXKEYS.COLLECTION.TRANSACTION));

        for (const key of transactionKeys) {
            const transaction = transactionsSnapshot.data[key as keyof typeof transactionsSnapshot.data] as Transaction;
            if (!transaction || typeof transaction !== 'object' || !('transactionID' in transaction) || !('reportID' in transaction)) {
                continue;
            }

            const report = transactionsSnapshot.data[`${ONYXKEYS.COLLECTION.REPORT}${transaction.reportID}`];
            const policy = transactionsSnapshot.data[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`];

            if (report && policy) {
                const transactionViolations = groupViolations[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transaction.transactionID}`];
                if (transactionViolations) {
                    const filteredTransactionViolations = mergeProhibitedViolations(
                        transactionViolations.filter((violation) => shouldShowViolation(report, policy, violation.name, currentUserDetails?.email ?? '', true, transaction)),
                    );

                    if (filteredTransactionViolations.length > 0) {
                        filtered[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transaction.transactionID}`] = filteredTransactionViolations;
                    }
                }
            }
        }

        return filtered;
    }, [groupViolations, transactionsSnapshot, currentUserDetails?.email]);

App/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx

Line 374 in 183c181

violations={violations}

And then pass the result as violations prop here

violations={filteredViolations}

What alternative solutions did you explore? (Optional)

Since we returned the violations for each transaction item, we can use transactionItem.violations here

And we need to filter out the visibility violation for the current user here by using shouldShowViolation function

App/src/libs/SearchUIUtils.ts

Line 1346 in 183c181

violations: transactionViolations,

App/src/libs/SearchUIUtils.ts

Line 1301 in 183c181

const transactionViolations = getTransactionViolations(allViolations, transactionItem, currentUserEmail, currentAccountID ?? CONST.DEFAULT_NUMBER_ID, report, policy);

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.