" EXPENSE AND INCOME BUF FIX"

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 = (coinAmount) => {
+  const handleCoinClick = (amount) => {
     if (isClickable) {
-      // Update totalAmount based on coin click
+      setTotalAmount((prevAmount) => prevAmount + amount);
-      const newAmount = parseFloat(totalAmount) + coinAmount;
+      setLastAddedAmount(amount);
-      setTotalAmount(newAmount); // Update the total amount
       setIsClickable(false);
       setTimeout(() => {
         setIsClickable(true);
@@ -25,6 +25,12 @@ 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 } });
@@ -67,6 +73,15 @@ 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/Income/Amount/TotalAmount.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom'; 
 import './TotalAmount.css'; 
 
-function TotalAmount({ totalAmount, category, setCategory }) {
+function TotalAmount({ totalAmount, category, setCategory , handleManualAmountChange}) {
   const [amount, setAmount] = useState(totalAmount || ''); 
   const location = useLocation();
   const { entryType } = location.state || {};  
@@ -70,7 +70,7 @@ function TotalAmount({ totalAmount, category, setCategory }) {
   const handleSaveEntry = () => {
     const timestamp = handleAddEntry(); 
     if (timestamp) {
-      navigate('/totalsuccessfully', { state: { timestamp } }); 
+      navigate('/expense-totalsuccessfully', { state: { timestamp } }); 
     }
   };
 
@@ -82,11 +82,11 @@ function TotalAmount({ totalAmount, category, setCategory }) {
   };
 
   const handleCategoryFocus = () => {
-    navigate('/category'); 
+    navigate('/expenseCategory'); 
   };
 
   const handleAmountFocus = () => {
-    navigate('/amount'); 
+    navigate('/expenseAmount'); 
   };
 
   const handleAmountMouseDown = (e) => {
@@ -118,7 +118,10 @@ function TotalAmount({ 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"
@@ -145,5 +148,4 @@ function TotalAmount({ totalAmount, category, setCategory }) {
     </div>
   );
 }
-
 export default TotalAmount;