Merchant: {receiptResult.extractedData.merchant}
-
Amount: {receiptResult.extractedData.amount.toFixed(2)}
+
Amount: {(parseFloat(receiptResult.extractedData.amount) || 0).toFixed(2)}
Category: {receiptResult.extractedData.category}
Date: {new Date(receiptResult.extractedData.date).toLocaleDateString()}
{receiptResult.extractedData.isIncome && (
From 797fd4b405ae59a247909900ea442ae7b50eee54 Mon Sep 17 00:00:00 2001
From: AmandeepMandal1077 <2023kucp1077@iiitkota.ac.in>
Date: Fri, 31 Oct 2025 18:14:54 +0530
Subject: [PATCH 4/5] Merge master changes
---
frontend/src/pages/ReceiptsPage.jsx | 486 ++++++++++++++++------------
1 file changed, 278 insertions(+), 208 deletions(-)
diff --git a/frontend/src/pages/ReceiptsPage.jsx b/frontend/src/pages/ReceiptsPage.jsx
index c969a19..9d73d57 100644
--- a/frontend/src/pages/ReceiptsPage.jsx
+++ b/frontend/src/pages/ReceiptsPage.jsx
@@ -1,212 +1,282 @@
-import React, { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import api from '../api/axios';
-import TransactionModal from '../components/TransactionModal';
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import api from "../api/axios";
+import TransactionModal from "../components/TransactionModal";
+import { toast, Bounce } from "react-toastify";
const ReceiptsPage = () => {
- const [file, setFile] = useState(null);
- const [uploading, setUploading] = useState(false);
- const [receiptResult, setReceiptResult] = useState(null);
- const [error, setError] = useState('');
- const navigate = useNavigate();
-
- const [openEditReceiptResult, setOpenEditReceiptResult] = useState(false);
- const [categories, setCategories] = useState([]);
- const [isEditingResult, setIsEditingResult] = useState(false);
- const [isSaving, setIsSaving] = useState(false);
-
- // Fetch categories when component mounts
- useEffect(() => {
- const fetchCategories = async () => {
- try {
- const response = await api.get('/transactions/categories');
- setCategories(response.data);
- } catch (error) {
- console.error('Failed to fetch categories:', error);
- }
- };
-
- fetchCategories();
- }, []);
-
- const handleFileChange = (e) => {
- setFile(e.target.files[0]);
- setReceiptResult(null);
- setError('');
- };
-
- const handleSubmit = async (e) => {
- e.preventDefault();
- if (!file) {
- setError('Please select a file to upload.');
- return;
- }
-
- const formData = new FormData();
- formData.append('receipt', file);
-
- try {
- setUploading(true);
- setError('');
- const response = await api.post('/receipts/upload', formData, {
- headers: {
- 'Content-Type': 'multipart/form-data',
- },
- });
- setReceiptResult(response.data);
-
- // Open the modal to allow user to edit the extracted data
- setOpenEditReceiptResult(true);
- } catch (err) {
- setError('Upload failed. Please try again.');
- console.error(err);
- } finally {
- setUploading(false);
- }
- };
-
- const handleEditReceiptSubmit = (formData) => {
- // Update the receiptResult with the edited data
- const updatedReceiptResult = {
- ...receiptResult,
- extractedData: {
- merchant: formData.name,
- amount: parseFloat(formData.cost) || 0,
- category: formData.category,
- date: formData.addedOn,
- isIncome: formData.isIncome
- }
- };
-
- setReceiptResult(updatedReceiptResult);
- setOpenEditReceiptResult(false);
- };
-
- // Handle final save to database (second verification step)
- const handleFinalSave = async () => {
- try {
- setIsSaving(true);
-
- const transactionData = {
- name: receiptResult.extractedData.merchant,
- category: receiptResult.extractedData.category,
- cost: receiptResult.extractedData.amount,
- addedOn: receiptResult.extractedData.date,
- isIncome: receiptResult.extractedData.isIncome || false
- };
-
- const response = await api.post('/receipts/save-transaction', {
- receiptId: receiptResult._id,
- transactionData: transactionData
- });
-
- alert('Transaction saved successfully! Redirecting to dashboard...');
- navigate('/dashboard');
- } catch (err) {
- setError('Failed to save transaction. Please try again.');
- console.error(err);
- } finally {
- setIsSaving(false);
- }
- };
-
- // Handle edit button in result div
- const handleEditResult = () => {
- setIsEditingResult(true);
- setOpenEditReceiptResult(true);
- };
-
- const handleNewCategory = (newCategory) => {
- setCategories(prev => [...prev, newCategory].sort());
- };
-
- return (
- <>
-
Upload Receipt
-
-
-
-
-
-
Last Upload Result
- {receiptResult ? (
-
-
-
Merchant: {receiptResult.extractedData.merchant}
-
Amount: {(parseFloat(receiptResult.extractedData.amount) || 0).toFixed(2)}
-
Category: {receiptResult.extractedData.category}
-
Date: {new Date(receiptResult.extractedData.date).toLocaleDateString()}
- {receiptResult.extractedData.isIncome && (
-
Income: Yes
- )}
-
-
-
-
-
-
-
-
-
- ) : (
-
Upload a receipt to see the extracted data here.
- )}
-
-
-
-
- {/* Transaction Modal for editing receipt data */}
- {openEditReceiptResult && receiptResult && (
-
{
- setOpenEditReceiptResult(false);
- setIsEditingResult(false);
- }}
- onSubmit={handleEditReceiptSubmit}
- transaction={{
- name: receiptResult.extractedData.merchant || '',
- category: receiptResult.extractedData.category || '',
- cost: receiptResult.extractedData.amount || 0,
- addedOn: receiptResult.extractedData.date || new Date().toISOString().split('T')[0],
- isIncome: receiptResult.extractedData.isIncome || false
- }}
- categories={categories}
- onNewCategory={handleNewCategory}
- />
- )}
-
- );
+ const [isMobile, setIsMobile] = useState(window.innerWidth <= 767);
+ const [file, setFile] = useState(null);
+ const [uploading, setUploading] = useState(false);
+ const [receiptResult, setReceiptResult] = useState(null);
+ const [error, setError] = useState("");
+ const navigate = useNavigate();
+
+ const [openEditReceiptResult, setOpenEditReceiptResult] = useState(false);
+ const [categories, setCategories] = useState([]);
+ const [isEditingResult, setIsEditingResult] = useState(false);
+ const [isSaving, setIsSaving] = useState(false);
+
+ // Fetch categories when component mounts
+ useEffect(() => {
+ const fetchCategories = async () => {
+ try {
+ const response = await api.get("/transactions/categories");
+ setCategories(response.data);
+ } catch (error) {
+ console.error("Failed to fetch categories:", error);
+ }
+ };
+
+ fetchCategories();
+ }, []);
+
+ // Handle mobile responsive resize
+ useEffect(() => {
+ const handleResize = () => {
+ return setIsMobile(window.innerWidth <= 767);
+ };
+ window.addEventListener("resize", handleResize);
+ return () => window.removeEventListener("resize", handleResize);
+ }, []);
+
+ const handleFileChange = (e) => {
+ setFile(e.target.files[0]);
+ setReceiptResult(null);
+ setError("");
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ if (!file) {
+ setError("Please select a file to upload.");
+ return;
+ }
+
+ const formData = new FormData();
+ formData.append("receipt", file);
+
+ try {
+ setUploading(true);
+ setError("");
+ const response = await api.post("/receipts/upload", formData, {
+ headers: {
+ "Content-Type": "multipart/form-data",
+ },
+ });
+ setReceiptResult(response.data);
+
+ // Open the modal to allow user to edit the extracted data
+ setOpenEditReceiptResult(true);
+ } catch (err) {
+ setError("Upload failed. Please try again.");
+ console.error(err);
+ } finally {
+ setUploading(false);
+ }
+ };
+
+ const handleEditReceiptSubmit = (formData) => {
+ // Update the receiptResult with the edited data
+ const updatedReceiptResult = {
+ ...receiptResult,
+ extractedData: {
+ merchant: formData.name,
+ amount: parseFloat(formData.cost) || 0,
+ category: formData.category,
+ date: formData.addedOn,
+ isIncome: formData.isIncome,
+ },
+ };
+
+ setReceiptResult(updatedReceiptResult);
+ setOpenEditReceiptResult(false);
+ };
+
+ // Handle final save to database (second verification step)
+ const handleFinalSave = async () => {
+ try {
+ setIsSaving(true);
+
+ const transactionData = {
+ name: receiptResult.extractedData.merchant,
+ category: receiptResult.extractedData.category,
+ cost: receiptResult.extractedData.amount,
+ addedOn: receiptResult.extractedData.date,
+ isIncome: receiptResult.extractedData.isIncome || false,
+ };
+
+ const response = await api.post("/receipts/save-transaction", {
+ receiptId: receiptResult._id,
+ transactionData: transactionData,
+ });
+
+ toast.success("Transaction saved successfully!", {
+ position: "top-right",
+ autoClose: 3000,
+ hideProgressBar: false,
+ closeOnClick: false,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ style: {
+ fontSize: "18px",
+ padding: "16px 24px",
+ minWidth: "500px",
+ },
+ theme: "light",
+ transition: Bounce,
+ });
+
+ setTimeout(() => navigate("/dashboard"), 1000);
+ } catch (err) {
+ setError("Failed to save transaction. Please try again.");
+ console.error(err);
+ } finally {
+ setIsSaving(false);
+ }
+ };
+
+ // Handle edit button in result div
+ const handleEditResult = () => {
+ setIsEditingResult(true);
+ setOpenEditReceiptResult(true);
+ };
+
+ const handleNewCategory = (newCategory) => {
+ setCategories((prev) => [...prev, newCategory].sort());
+ };
+
+ return (
+ <>
+
+ Upload Receipt
+
+
+
+
+
+
+ Last Upload Result
+
+ {receiptResult ? (
+
+
+
+ Merchant:{" "}
+ {receiptResult.extractedData.merchant}
+
+
+ Amount:{" "}
+ {(
+ parseFloat(
+ receiptResult.extractedData.amount
+ ) || 0
+ ).toFixed(2)}
+
+
+ Category:{" "}
+ {receiptResult.extractedData.category}
+
+
+ Date:{" "}
+ {new Date(
+ receiptResult.extractedData.date
+ ).toLocaleDateString()}
+
+ {receiptResult.extractedData.isIncome && (
+
+ Income: Yes
+
+ )}
+
+
+
+
+
+
+
+
+
+ ) : (
+
+ Upload a receipt to see the extracted data here.
+
+ )}
+
+
@@ -259,7 +264,6 @@ const ReceiptsPage = () => {
isOpen={openEditReceiptResult}
onClose={() => {
setOpenEditReceiptResult(false);
- setIsEditingResult(false);
}}
onSubmit={handleEditReceiptSubmit}
transaction={{
@@ -271,7 +275,12 @@ const ReceiptsPage = () => {
new Date().toISOString().split("T")[0],
isIncome: receiptResult.extractedData.isIncome || false,
}}
- categories={categories}
+ expenseCategories={categories
+ .filter((cat) => !cat.isIncome)
+ .map((cat) => cat.name || cat)}
+ incomeCategories={categories
+ .filter((cat) => cat.isIncome)
+ .map((cat) => cat.name || cat)}
onNewCategory={handleNewCategory}
/>
)}