diff --git a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js index c438113..27a391e 100644 --- a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js +++ b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js @@ -12,16 +12,22 @@ 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 - const newAmount = parseFloat(totalAmount) + coinAmount; - setTotalAmount(newAmount); // Update the total amount + setTotalAmount((prevAmount) => prevAmount + amount); + setLastAddedAmount(amount); setIsClickable(false); setTimeout(() => { setIsClickable(true); }, 500); + } + }; + + const handleSubtractClick = (amount) => { + if (totalAmount >= amount) { // Ensure you do not go negative + setTotalAmount((prevAmount) => prevAmount - amount); } }; @@ -67,6 +73,15 @@ function ExpenseAmount() {
1000
+ +
+ + +
); } diff --git a/src/components/pages/Income/Amount/TotalAmount.js b/src/components/pages/Income/Amount/TotalAmount.js index 7841b08..042d360 100644 --- a/src/components/pages/Income/Amount/TotalAmount.js +++ b/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 }) { ); } - export default TotalAmount;