"amount page changes "

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

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { Outlet } from 'react-router-dom';
-
 import '../Common/ExpenseLayout.css';
 import TotalExpenseAmount from '../ExpenseAmount/TotalExpenseAmount';
 
@@ -8,14 +7,21 @@ const ExpenseLayout = () => {
   const [totalAmount, setTotalAmount] = useState(0); 
   const [category, setCategory] = useState(''); 
 
+  const handleManualAmountChange = (amount) => {
+    setTotalAmount(amount);
+  };
+
   return (
     <div className="layout-container">
       <div className="page-content">
-      
         <Outlet context={[totalAmount, setTotalAmount, category, setCategory]} />
       </div>
-     
+      <TotalExpenseAmount 
-      <TotalExpenseAmount totalAmount={totalAmount} category={category} setCategory={setCategory} />
+        totalAmount={totalAmount} 
+        category={category} 
+        setCategory={setCategory} 
+        handleManualAmountChange={handleManualAmountChange} // Pass the function here
+      />
     </div>
   );
 };

src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js

@@ -12,12 +12,12 @@ function ExpenseAmount() {
   const [totalAmount, setTotalAmount] = useOutletContext();
   
   const [isClickable, setIsClickable] = useState(true);
-  const [lastAddedAmount, setLastAddedAmount] = useState(0);
 
-  const handleCoinClick = (amount) => {
+  const handleCoinClick = (coinAmount) => {
     if (isClickable) {
-      setTotalAmount((prevAmount) => prevAmount + amount);
+      // Update totalAmount based on coin click
-      setLastAddedAmount(amount);
+      const newAmount = parseFloat(totalAmount) + coinAmount;
+      setTotalAmount(newAmount); // Update the total amount
       setIsClickable(false);
       setTimeout(() => {
         setIsClickable(true);
@@ -25,12 +25,6 @@ function ExpenseAmount() {
     }
   };
 
-  const handleSubtractClick = (amount) => {
-    if (totalAmount >= amount) { // Ensure you do not go negative
-      setTotalAmount((prevAmount) => prevAmount - amount);
-    }
-  };
-
   const handleBackClick = () => {
     console.log(entryType);
     navigate("/", { state: { entryType } });
@@ -73,15 +67,6 @@ function ExpenseAmount() {
           <div className="coin-value">1000</div>
         </div>
       </section>
-
-      <div className="btn-group">
-        <button onClick={() => handleSubtractClick(lastAddedAmount)} disabled={lastAddedAmount === 0}>
-          -
-        </button>
-        <button onClick={() => handleCoinClick(lastAddedAmount)}>
-          +
-        </button>
-      </div>
     </div>
   );
 }

src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import '../ExpenseAmount/TotalExpenseAmount.css';
 
-function TotalExpenseAmount({ totalAmount, category, setCategory }) {
+function TotalExpenseAmount({ totalAmount, category, setCategory, handleManualAmountChange }) {
   const [amount, setAmount] = useState(totalAmount || ''); 
   const location = useLocation();
   const { entryType } = location.state || {};  
@@ -118,7 +118,10 @@ function TotalExpenseAmount({ totalAmount, category, setCategory }) {
             id="amount-input"
             type="number"
             value={amount} 
-            onChange={(e) => setAmount(e.target.value)} 
+            onChange={(e) => {
+              setAmount(e.target.value);
+              handleManualAmountChange(e.target.value); // Ensure it's called properly
+            }} 
             onMouseDown={handleAmountMouseDown} 
             onDoubleClick={handleAmountDoubleClick} 
             placeholder="Enter Amount"