added editing for ocr extracted receipt Closes #11 by AmandeepMandal1077 · Pull Request #117 · Code-A2Z/paisable

AmandeepMandal1077 · 2025-10-10T19:54:20Z

No description provided.

netlify · 2025-10-10T19:54:28Z

✅ Deploy Preview for paisable ready!

Name	Link
🔨 Latest commit	`03eb368`
🔍 Latest deploy log	https://app.netlify.com/projects/paisable/deploys/6904b338ede5e000082a18b4
😎 Deploy Preview	https://deploy-preview-117--paisable.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 95 Accessibility: 100 Best Practices: 100 SEO: 91 PWA: 80 View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

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.}

Copilot · 2025-10-10T19:54:52Z

backend/controllers/receiptController.js

+
+    const savedTransaction = await newTransaction.save();
+
+    // update the receipt with the final confirmed data


Corrected capitalization: 'update' should be 'Update' at the beginning of the comment.

Suggested change

// update the receipt with the final confirmed data

// Update the receipt with the final confirmed data

Copilot · 2025-10-10T19:54:53Z

frontend/src/pages/ReceiptsPage.jsx

+  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);
+    }
+  };


The function parameter transactionId is not used anywhere in the function body. Either remove it or implement the intended functionality that uses this parameter.

AmandeepMandal1077 · 2025-10-10T19:56:22Z

what i have done is like,
when user upload a receipt, user have to explicitly click on 'Save Transaction to continue.

AmandeepMandal1077 · 2025-10-14T14:05:09Z

@archa8 could you please review this PR when you get a chance.

Copilot

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.}

Copilot · 2025-10-22T16:06:41Z

frontend/src/pages/ReceiptsPage.jsx

+  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);
+    }


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.

Suggested change

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);

Copilot · 2025-10-22T16:06:41Z

frontend/src/pages/ReceiptsPage.jsx

-              <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>


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)}

Suggested change

Amount: {receiptResult.extractedData.amount.toFixed(2)}

Amount: {(parseFloat(receiptResult.extractedData.amount) || 0).toFixed(2)}

Copilot · 2025-10-22T16:06:42Z

backend/controllers/receiptController.js

+      name: transactionData.name,
+      category: transactionData.category,
+      cost: transactionData.cost,
+      addedOn: new Date(transactionData.addedOn),


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.

AmandeepMandal1077 · 2025-10-22T17:53:38Z

@archa8 could you please review this pr again, for any issues.

AmandeepMandal1077 · 2025-10-27T07:12:45Z

@archa8 Do I have to make any further changes?

AmandeepMandal1077 · 2025-10-27T07:33:29Z

This PR implements the feature mention in Issue: #11

Copilot

Pull Request Overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.

Comments suppressed due to low confidence (1)

frontend/src/pages/ReceiptsPage.jsx:17

Unused variable isEditingResult.

	const [isEditingResult, setIsEditingResult] = useState(false);

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-10-31T12:47:12Z

frontend/src/pages/ReceiptsPage.jsx

+	// Handle mobile responsive resize
+	useEffect(() => {
+		const handleResize = () => {
+			return setIsMobile(window.innerWidth <= 767);


The handleResize function unnecessarily returns the result of setIsMobile. Since setIsMobile returns undefined, this return statement serves no purpose. Remove the return keyword to make the function's intent clearer.

Suggested change

return setIsMobile(window.innerWidth <= 767);

setIsMobile(window.innerWidth <= 767);

Copilot · 2025-10-31T12:47:12Z

frontend/src/pages/ReceiptsPage.jsx

+							new Date().toISOString().split("T")[0],
+						isIncome: receiptResult.extractedData.isIncome || false,
+					}}
+					categories={categories}


The TransactionModal component expects separate expenseCategories and incomeCategories props (see line 17 of TransactionModal.jsx), but this code passes a single categories prop. This will cause the modal to not display any categories in its dropdown. Update the prop name to match the expected API, or fetch and pass separate category arrays for expenses and income.

Suggested change

categories={categories}

expenseCategories={categories ? categories.filter(cat => !cat.isIncome) : []}

incomeCategories={categories ? categories.filter(cat => cat.isIncome) : []}

Copilot · 2025-10-31T12:47:12Z

frontend/src/pages/ReceiptsPage.jsx

+	const handleNewCategory = (newCategory) => {
+		setCategories((prev) => [...prev, newCategory].sort());


The onNewCategory callback in TransactionModal passes two parameters: newCategory and isIncome (line 65 of TransactionModal.jsx), but handleNewCategory only accepts one parameter. This mismatch means the isIncome flag is ignored, preventing proper categorization of income vs. expense categories. Update the function signature to (newCategory, isIncome) and handle the categories accordingly.

Copilot · 2025-10-31T12:47:12Z

frontend/src/pages/ReceiptsPage.jsx

+
+	const [openEditReceiptResult, setOpenEditReceiptResult] = useState(false);
+	const [categories, setCategories] = useState([]);
+	const [isEditingResult, setIsEditingResult] = useState(false);


The isEditingResult state variable is set in handleEditResult (line 142) and cleared in the modal's onClose callback (line 262), but it is never used elsewhere in the component. This unused state should be removed to reduce complexity.

Suggested change

const [isEditingResult, setIsEditingResult] = useState(false);

Copilot · 2025-10-31T12:47:13Z

frontend/src/pages/ReceiptsPage.jsx

+							</div>
+
+							<img
+								src={`http://localhost:5001${receiptResult.fileUrl}`}


The hardcoded http://localhost:5001 URL creates a production deployment issue and won't work outside of local development. Use an environment variable (e.g., process.env.REACT_APP_API_BASE_URL) or construct the URL dynamically based on the current environment to ensure the application works correctly in all deployment scenarios.

Copilot · 2025-10-31T12:47:13Z

frontend/src/pages/ReceiptsPage.jsx

+				isIncome: receiptResult.extractedData.isIncome || false,
+			};
+
+			const response = await api.post("/receipts/save-transaction", {


Unused variable response.

Suggested change

const response = await api.post("/receipts/save-transaction", {

await api.post("/receipts/save-transaction", {

Copilot

Pull Request Overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-10-31T13:03:56Z

frontend/src/pages/ReceiptsPage.jsx

+								{receiptResult.extractedData.isIncome && (
+									<p className="text-gray-700 dark:text-gray-300">
+										<strong>Income:</strong> Yes
+									</p>
+								)}


The code attempts to access receiptResult.extractedData.isIncome, but the backend's uploadReceipt endpoint (lines 68-73 in receiptController.js) doesn't set this field when creating the receipt. This will always be undefined until after the user saves the transaction. Consider setting a default value for isIncome in the extractedData when the receipt is first created, or handle the undefined case appropriately.

Suggested change

{receiptResult.extractedData.isIncome && (



Income: Yes



)}

{receiptResult.extractedData.isIncome === true && (



Income: Yes



)}

{receiptResult.extractedData.isIncome === false && (



Income: No



)}

Copilot · 2025-10-31T13:03:57Z

frontend/src/pages/ReceiptsPage.jsx

+								src={`${import.meta.env.VITE_API_URL?.replace(
+									"/api",
+									""
+								)}${receiptResult.fileUrl}`}


The image URL construction uses string replacement to remove '/api' from the VITE_API_URL. This is fragile and could break if the API URL doesn't contain '/api' or has it in a different position. Consider using a separate environment variable for the base URL without '/api', or construct the URL more reliably (e.g., using URL parsing).

Copilot · 2025-10-31T13:03:57Z

frontend/src/pages/ReceiptsPage.jsx

+			});
+
+			setTimeout(() => navigate("/dashboard"), 1000);


Using a hardcoded setTimeout delay before navigation can lead to the user missing the success toast if they navigate away. The 1-second delay is arbitrary and may not be sufficient on slower devices. Consider navigating immediately or using the toast's onClose callback to navigate after the toast is dismissed.

Suggested change

});

setTimeout(() => navigate("/dashboard"), 1000);

onClose: () => navigate("/dashboard"),

});

Copilot · 2025-10-31T13:03:57Z

backend/controllers/receiptController.js

+    res.status(201).json({
+      message: 'Transaction saved successfully',
+      transaction: savedTransaction,
+      receipt: receipt


[nitpick] Using shorthand property syntax would be more concise. Change receipt: receipt to just receipt.

Suggested change

receipt: receipt

receipt

archa8

LGTM!

added editing for ocr extracted receipt

6d6f59c

Copilot AI review requested due to automatic review settings October 10, 2025 19:54

Copilot AI reviewed Oct 10, 2025

View reviewed changes

removed unused parameter

3c2693b

Merge branch 'master' into feat/confirm-ocr

202cb04

Copilot AI review requested due to automatic review settings October 22, 2025 16:05

Copilot AI reviewed Oct 22, 2025

View reviewed changes

fix: resolved issues

d56bee1

AmandeepMandal1077 changed the title ~~added editing for ocr extracted receipt~~ added editing for ocr extracted receipt Closes #11 Oct 27, 2025

AmandeepMandal1077 mentioned this pull request Oct 27, 2025

feat: Add review and confirm for OCR #11

Closed

Merge master changes

797fd4b

Copilot AI review requested due to automatic review settings October 31, 2025 12:45

Copilot AI reviewed Oct 31, 2025

View reviewed changes

AmandeepMandal1077 added 2 commits October 31, 2025 18:29

fix: issues

e8a018f

Merge branch 'master' into feat/confirm-ocr

03eb368

Copilot AI review requested due to automatic review settings October 31, 2025 13:01

Copilot AI reviewed Oct 31, 2025

View reviewed changes

archa8 linked an issue Oct 31, 2025 that may be closed by this pull request

feat: Add review and confirm for OCR #11

Closed

archa8 approved these changes Oct 31, 2025

View reviewed changes

archa8 merged commit d14d04e into Code-A2Z:master Oct 31, 2025
10 checks passed


		const savedTransaction = await newTransaction.save();

		// update the receipt with the final confirmed data

	<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>

	return setIsMobile(window.innerWidth <= 767);
	setIsMobile(window.innerWidth <= 767);

	categories={categories}
	expenseCategories={categories ? categories.filter(cat => !cat.isIncome) : []}
	incomeCategories={categories ? categories.filter(cat => cat.isIncome) : []}

		const handleNewCategory = (newCategory) => {
		setCategories((prev) => [...prev, newCategory].sort());

	const response = await api.post("/receipts/save-transaction", {
	await api.post("/receipts/save-transaction", {

Conversation

AmandeepMandal1077 commented Oct 10, 2025

Uh oh!

netlify bot commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for paisable ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 10, 2025

Choose a reason for hiding this comment

Uh oh!

AmandeepMandal1077 commented Oct 10, 2025

Uh oh!

AmandeepMandal1077 commented Oct 14, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

AmandeepMandal1077 commented Oct 22, 2025

Uh oh!

AmandeepMandal1077 commented Oct 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AmandeepMandal1077 commented Oct 27, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Oct 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Oct 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 31, 2025

Choose a reason for hiding this comment

Uh oh!

netlify bot commented Oct 10, 2025 •

edited

Loading

AmandeepMandal1077 commented Oct 27, 2025 •

edited

Loading