Skip to content

bug: OCR result on Receipts page disappears immediately after upload #12

@archa8

Description

@archa8

Expected Behavior

After a user successfully uploads a receipt for OCR processing, they should remain on the "Receipts" page. The "Last Upload Result" card should populate with the extracted data and stay visible, allowing the user to review the results of the scan.

Current Behavior

When a receipt is successfully uploaded and processed, the extracted data flashes in the "Last Upload Result" card for a fraction of a second. The page then immediately and automatically redirects to the dashboard. This makes it impossible for the user to see or verify the result of the OCR scan on the Receipts page.

Possible Solution

The root cause is a race condition in the handleSubmit function within ReceiptsPage.jsx. The function sets the component's state with the API result and then immediately calls Maps('/dashboard'). The redirect happens before the user has a chance to see the updated state. The fix is to remove the automatic redirect and the disruptive alert() call. Instead, a non-blocking success message should be displayed on the page.

Steps to Reproduce

  1. Log in to the application.
  2. Navigate to the "Receipts" page from the main navigation bar.
  3. Select a valid receipt image file using the file input.
  4. Click the "Upload & Create Transaction" button and observe the "Last Upload Result" card on the right. The card will populate with data for a split second before the entire page navigates away to the dashboard.

Context (Environment)

This bug creates a confusing user experience. It defeats the purpose of having a "Last Upload Result" section on the Receipts page, as the user has no time to actually view the result. This prevents them from being able to verify the accuracy of the Gemini OCR scan, which is a key part of the feature's workflow.

Detailed Description

The core issue lies in the frontend logic for handling a successful receipt upload. The handleSubmit function in ReceiptsPage.jsx is currently designed to perform two actions in rapid succession: first, it updates the component's state with the OCR data returned from the backend (setReceiptResult(response.data)), and second, it navigates the user away from the page (Maps('/dashboard')). Because React's state updates can be asynchronous, the navigation often occurs before the component has fully re-rendered with the new data, or so quickly after that the user cannot perceive the change.

Metadata

Metadata

Labels

bugSomething isn't workinghacktoberfestIssues marked with this label are part of Hacktoberfest and open for contributions

Type

No type

Projects

Status

assigned

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions