added editing for ocr extracted receipt #117
Conversation
✅ Deploy Preview for paisable ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull Request Overview
This PR adds editing functionality for OCR extracted receipt data, allowing users to review and modify the extracted information before saving it as a transaction. The implementation introduces a two-step process: first extracting data from the receipt, then allowing user verification/editing before final save.
Key changes:
- Separated receipt processing from transaction creation with a confirmation step
- Added modal-based editing interface for extracted receipt data
- Implemented new backend endpoint for saving user-confirmed transactions
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| frontend/src/pages/ReceiptsPage.jsx | Added editing modal, confirmation UI, and two-step transaction creation workflow |
| backend/routes/receiptRoutes.js | Added new route for saving confirmed transactions |
| backend/controllers/receiptController.js | Removed automatic transaction creation and added endpoint for user-confirmed transaction saving |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
|
||
| const savedTransaction = await newTransaction.save(); | ||
|
|
||
| // update the receipt with the final confirmed data |
There was a problem hiding this comment.
Corrected capitalization: 'update' should be 'Update' at the beginning of the comment.
| // update the receipt with the final confirmed data | |
| // Update the receipt with the final confirmed data |
frontend/src/pages/ReceiptsPage.jsx
Outdated
| const handleEditReceiptSubmit = async (formData, transactionId) => { | ||
| try { | ||
| // Update the receiptResult with the edited data | ||
| const updatedReceiptResult = { | ||
| ...receiptResult, | ||
| extractedData: { | ||
| merchant: formData.name, | ||
| amount: parseFloat(formData.cost), | ||
| category: formData.category, | ||
| date: formData.addedOn, | ||
| isIncome: formData.isIncome | ||
| } | ||
| }; | ||
|
|
||
| setReceiptResult(updatedReceiptResult); | ||
| setOpenEditReceiptResult(false); | ||
| } catch (err) { | ||
| setError('Failed to update receipt data. Please try again.'); | ||
| console.error(err); | ||
| } | ||
| }; |
There was a problem hiding this comment.
The function parameter transactionId is not used anywhere in the function body. Either remove it or implement the intended functionality that uses this parameter.
|
what i have done is like, |
|
@archa8 could you please review this PR when you get a chance. |
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
frontend/src/pages/ReceiptsPage.jsx
Outdated
| const handleEditReceiptSubmit = async (formData) => { | ||
| try { | ||
| // Update the receiptResult with the edited data | ||
| const updatedReceiptResult = { | ||
| ...receiptResult, | ||
| extractedData: { | ||
| merchant: formData.name, | ||
| amount: parseFloat(formData.cost), | ||
| category: formData.category, | ||
| date: formData.addedOn, | ||
| isIncome: formData.isIncome | ||
| } | ||
| }; | ||
|
|
||
| setReceiptResult(updatedReceiptResult); | ||
| setOpenEditReceiptResult(false); | ||
| } catch (err) { | ||
| setError('Failed to update receipt data. Please try again.'); | ||
| console.error(err); | ||
| } |
There was a problem hiding this comment.
The function is marked as async but does not contain any await operations. Since it only performs synchronous state updates, the try-catch block will not catch errors from asynchronous operations that don't exist. Remove the async keyword and consider removing the try-catch block as synchronous state updates are unlikely to throw errors.
| const handleEditReceiptSubmit = async (formData) => { | |
| try { | |
| // Update the receiptResult with the edited data | |
| const updatedReceiptResult = { | |
| ...receiptResult, | |
| extractedData: { | |
| merchant: formData.name, | |
| amount: parseFloat(formData.cost), | |
| category: formData.category, | |
| date: formData.addedOn, | |
| isIncome: formData.isIncome | |
| } | |
| }; | |
| setReceiptResult(updatedReceiptResult); | |
| setOpenEditReceiptResult(false); | |
| } catch (err) { | |
| setError('Failed to update receipt data. Please try again.'); | |
| console.error(err); | |
| } | |
| const handleEditReceiptSubmit = (formData) => { | |
| // Update the receiptResult with the edited data | |
| const updatedReceiptResult = { | |
| ...receiptResult, | |
| extractedData: { | |
| merchant: formData.name, | |
| amount: parseFloat(formData.cost), | |
| category: formData.category, | |
| date: formData.addedOn, | |
| isIncome: formData.isIncome | |
| } | |
| }; | |
| setReceiptResult(updatedReceiptResult); | |
| setOpenEditReceiptResult(false); |
frontend/src/pages/ReceiptsPage.jsx
Outdated
| <p className="text-gray-700 dark:text-gray-300"><strong>Date:</strong> {new Date(receiptResult.extractedData.date).toLocaleDateString()}</p> | ||
| <div className="mb-4"> | ||
| <p className="text-gray-700 dark:text-gray-300"><strong>Merchant:</strong> {receiptResult.extractedData.merchant}</p> | ||
| <p className="text-gray-700 dark:text-gray-300"><strong>Amount:</strong> {receiptResult.extractedData.amount.toFixed(2)}</p> |
There was a problem hiding this comment.
Potential runtime error if receiptResult.extractedData.amount is null or undefined. Since the amount comes from user-edited data and parseFloat can return NaN, consider adding a fallback: {(receiptResult.extractedData.amount || 0).toFixed(2)}
| <p className="text-gray-700 dark:text-gray-300"><strong>Amount:</strong> {receiptResult.extractedData.amount.toFixed(2)}</p> | |
| <p className="text-gray-700 dark:text-gray-300"><strong>Amount:</strong> {(parseFloat(receiptResult.extractedData.amount) || 0).toFixed(2)}</p> |
| name: transactionData.name, | ||
| category: transactionData.category, | ||
| cost: transactionData.cost, | ||
| addedOn: new Date(transactionData.addedOn), |
There was a problem hiding this comment.
If transactionData.addedOn is an invalid date string, new Date() will create an Invalid Date object, which could cause issues downstream. Add validation to ensure the date is valid before creating the transaction.
|
@archa8 could you please review this pr again, for any issues. |
1 participant
No description provided.