" change in editpage and totalpage "

src/components/pages/Expense/Common/ExpenseEditPage.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
-import "../Common/ExpenseEditPage.css"
+import "../Common/ExpenseEditPage.css";
 
 function ExpenseEditPage() {
   const location = useLocation();
@@ -17,14 +17,27 @@ function ExpenseEditPage() {
     const now = new Date();
     const formattedDateTime = now.toLocaleString();
     setCurrentDateTime(formattedDateTime);
-  }, []);
+
+    
+    if (!location.state?.id) {
+      const storedEntries = JSON.parse(localStorage.getItem("entries")) || [];
+      const entryToEdit = storedEntries.find(
+        (entry) => entry.id === location.state?.id
+      );
+
+      if (entryToEdit) {
+        setAmount(entryToEdit.amount);
+        setCategory(entryToEdit.category);
+      }
+    }
+  }, [location.state]);
 
   const handleBackClick = () => {
     navigate("/expense-records");
   };
 
   const handleSave = () => {
-    setIsLoading(true); 
+    setIsLoading(true);
     setError(null);
 
     const updatedEntry = {
@@ -34,16 +47,14 @@ function ExpenseEditPage() {
       category: category,
     };
 
-  
     const storedEntries = JSON.parse(localStorage.getItem("entries")) || [];
     const updatedEntries = storedEntries.map((entry) =>
       entry.id === updatedEntry.id ? updatedEntry : entry
     );
     localStorage.setItem("entries", JSON.stringify(updatedEntries));
 
-
-    console.log("Entry updated in local storage:", updatedEntry);
-    navigate("/expense-successfully");
+    // console.log("Entry updated in local storage:", updatedEntry);
+    navigate("/expense-successfully", { state: updatedEntry });
     setIsLoading(false);
   };
 

src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.js

@@ -1,16 +1,16 @@
 import React, { useEffect, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
-import { useNavigate , useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { Player } from "@lottiefiles/react-lottie-player";
 import successAnimation from "../Common/Animation - 1727464749500.json";
-import "../ExpenseSuccessfully/ExpenseSuccessfully.css"
+import "../ExpenseSuccessfully/ExpenseSuccessfully.css";
 
 function ExpenseSuccessfully() {
   const [currentDate, setCurrentDate] = useState(new Date());
   const navigate = useNavigate();
   const location = useLocation(); 
-  const entryType = location.state?.entryType; 
+  const entryType = location.state?.entryType;
 
   useEffect(() => {
     const timer = setInterval(() => {
@@ -21,22 +21,26 @@ function ExpenseSuccessfully() {
   }, []);
 
   const handleBackClick = () => {
-    navigate("/expense-editPage" , { state: { entryType } });
+    const updatedEntry = {
+      id: location.state?.id,
+      amount: location.state?.amount,
+      category: location.state?.category,
+      dateTime: location.state?.dateTime,
+    };
+    
+    navigate("/expense-editPage", { state: updatedEntry });
   };
 
   const handleBackToHome = () => {
-    navigate("/" ,  { state: { entryType } });
+    navigate("/", { state: { entryType } });
   };
 
   const handleBackToRecord = () => {
-    navigate("/expense-records" , { state: { entryType } })
-  }
+    navigate("/expense-records", { state: { entryType } });
+  };
 
   const options = { hour: "2-digit", minute: "2-digit", hour12: true };
-  const formattedDate = `on ${currentDate.toLocaleDateString()} - ${currentDate.toLocaleTimeString(
-    [],
-    options
-  )}`;
+  const formattedDate = `on ${currentDate.toLocaleDateString()} - ${currentDate.toLocaleTimeString([], options)}`;
 
   return (
     <div className="Payment-container">

src/components/pages/Income/Common/IncomeEdit.js

@@ -7,44 +7,50 @@ import "../Common/IncomeEdit.css";
 function IncomeEdit() {
   const location = useLocation();
   const navigate = useNavigate();
-  const [currentDateTime, setCurrentDateTime] = useState("");
-  const [amount, setAmount] = useState(location.state?.amount || "");
-  const [category, setCategory] = useState(location.state?.category || "");
+
+  // Destructure state values passed from previous page
+  const { id, amount: initialAmount, category: initialCategory, dateTime: initialDateTime } = location.state || {};
+
+  const [amount, setAmount] = useState(initialAmount || "");
+  const [category, setCategory] = useState(initialCategory || "");
+  const [currentDateTime, setCurrentDateTime] = useState(initialDateTime || "");
+
   const [error, setError] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    const now = new Date();
-    const formattedDateTime = now.toLocaleString();
-    setCurrentDateTime(formattedDateTime);
-  }, []);
+    if (!initialDateTime) {
+      const now = new Date();
+      const formattedDateTime = now.toLocaleString();
+      setCurrentDateTime(formattedDateTime);
+    }
+  }, [initialDateTime]);
 
   const handleBackClick = () => {
-    navigate("/records");
+    navigate("/records"); // Navigate back to records
   };
 
   const handleSave = () => {
-    setIsLoading(true); 
+    setIsLoading(true);
     setError(null);
 
     const updatedEntry = {
-      id: location.state?.id,
+      id: id,
       amount: amount,
       dateTime: currentDateTime,
       category: category,
     };
 
-    
+    // Save updated entry to localStorage (or backend API if needed)
     const storedEntries = JSON.parse(localStorage.getItem("entries")) || [];
     const updatedEntries = storedEntries.map((entry) =>
       entry.id === updatedEntry.id ? updatedEntry : entry
     );
     localStorage.setItem("entries", JSON.stringify(updatedEntries));
 
-    // Optionally, you can navigate to a success page or display a message here
-    console.log("Entry updated in local storage:", updatedEntry);
-    navigate("/successPage");
-    setIsLoading(false); // End loading
+    // Navigate to success page
+    navigate("/successPage", { state: updatedEntry });
+    setIsLoading(false);
   };
 
   return (

src/components/pages/Income/Income/IncomeSuccessfully.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
-import { useNavigate , useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { Player } from "@lottiefiles/react-lottie-player";
 import successAnimation from "../Common/Animation - 1727464749500.json";
 import "../Income/IncomeSuccessfully.css";
@@ -21,21 +21,26 @@ function IncomeSuccessfully() {
   }, []);
 
   const handleBackClick = () => {
-    navigate("/editPage" , { state: { entryType } });
+    const updatedEntry = {
+      id: location.state?.id,
+      amount: location.state?.amount,
+      category: location.state?.category,
+      dateTime: location.state?.dateTime,
+    };
+    navigate("/editPage", { state: { ...updatedEntry } });  
   };
 
   const handleBackToHome = () => {
-    navigate("/" ,  { state: { entryType } });
+    navigate("/", { state: { entryType } });
   };
 
   const handleBackToRecord = () => {
-    navigate("/records" , { state: { entryType } })
-  }
+    navigate("/records", { state: { entryType } });
+  };
 
   const options = { hour: "2-digit", minute: "2-digit", hour12: true };
   const formattedDate = `on ${currentDate.toLocaleDateString()} - ${currentDate.toLocaleTimeString(
-    [],
-    options
+    [], options
   )}`;
 
   return (
@@ -68,10 +73,10 @@ function IncomeSuccessfully() {
 
           <div className="payment-buttons">
             <div className="btn1" onClick={handleBackToHome}>
-             Home
+              Home
             </div>
             <div className="bt_11" onClick={handleBackToRecord}>
-             Records
+              Records
             </div>
           </div>
         </div>