diff --git a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css index 19e8b93..1c8213b 100644 --- a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css +++ b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css @@ -62,7 +62,6 @@ } - .Rupeesicon { width: 30px; height: 30px; @@ -123,7 +122,9 @@ inset 2px 2px 2px #181618; } - +.coin.selected { + background: #4caf50; /* Green color for the selected coin */ +} @media (max-width: 600px) { .amount-container { padding: 10px; @@ -184,10 +185,9 @@ font-size: 28px; } + + - .coin:hover { - background-color: #4caf50; - } .btn-group{ justify-content: space-between; @@ -219,6 +219,7 @@ font-size: 20px; } + .Rupeesicon { width: 30px; height: 30px; @@ -238,6 +239,7 @@ direction: row; gap: 25px; } + } @media (max-width: 375px) { diff --git a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js index 3830739..d4302e8 100644 --- a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js +++ b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js @@ -16,19 +16,23 @@ function ExpenseAmount() { const handleCoinClick = (coinAmount) => { if (isClickable) { - // Update totalAmount based on coin click - const newAmount = parseFloat(totalAmount) + coinAmount; - setTotalAmount(newAmount); // Update the total amount - setLastAddedAmount(coinAmount); // Update the last added amount + + const currentAmount = totalAmount ? parseFloat(totalAmount) : 0; + const newAmount = currentAmount + coinAmount; + + setTotalAmount(newAmount); + setLastAddedAmount(coinAmount); setIsClickable(false); + + setTimeout(() => { setIsClickable(true); - }, 500); + }, 300); } }; const handleSubtractClick = (amount) => { - if (totalAmount >= amount) { // Ensure you do not go negative + if (totalAmount >= amount) { setTotalAmount((prevAmount) => prevAmount - amount); } }; diff --git a/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.js b/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.js index dd43170..4d5b94b 100644 --- a/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.js +++ b/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.js @@ -26,7 +26,7 @@ function TotalExpenseAmount({ totalAmount, category, setCategory, handleManualAm const handleAddEntry = () => { setCategoryError(''); - // Ensure amount is a number and greater than zero + if (amount <= 0) { alert('Amount is required and must be greater than zero'); return null; diff --git a/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js b/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js index b415553..d788e88 100644 --- a/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js +++ b/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js @@ -44,7 +44,7 @@ function ExpenseCategory() { setCustomCategoryCount(customCategoryCount + 1); localStorage.setItem('categories', JSON.stringify(updatedCategories)); alert(`Category "${newCategory}" added!`); - setNewCategory(''); // Clear input field after adding + setNewCategory(''); } else { alert('You can only add up to three custom categories!'); } diff --git a/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.css b/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.css index a107d9b..0b76cb5 100644 --- a/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.css +++ b/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.css @@ -64,12 +64,14 @@ } -.categories ul { +.categories p { list-style-type: none; padding: 5px; - + font-size: 12px; + border-bottom: 1px solid white; } + .categories li { font-size: 16px; color: #deb1b1; diff --git a/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.js b/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.js index 88b4845..4140fd3 100644 --- a/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.js +++ b/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.js @@ -87,11 +87,7 @@ function ExpenseRecords() {

Selected Categories:

- +

{categories.join(', ')}

diff --git a/src/components/pages/Income/Amount/AmountPage.js b/src/components/pages/Income/Amount/AmountPage.js index a504302..621584e 100644 --- a/src/components/pages/Income/Amount/AmountPage.js +++ b/src/components/pages/Income/Amount/AmountPage.js @@ -16,19 +16,22 @@ function AmountPage() { const handleCoinClick = (coinAmount) => { if (isClickable) { - // Update totalAmount based on coin click - const newAmount = parseFloat(totalAmount) + coinAmount; - setTotalAmount(newAmount); // Update the total amount - setLastAddedAmount(coinAmount); // Update the last added amount + + const currentAmount = totalAmount ? parseFloat(totalAmount) : 0; + const newAmount = currentAmount + coinAmount; + + setTotalAmount(newAmount); + setLastAddedAmount(coinAmount); setIsClickable(false); + setTimeout(() => { setIsClickable(true); - }, 500); + }, 300); } }; const handleSubtractClick = (amount) => { - if (totalAmount >= amount) { // Ensure you do not go negative + if (totalAmount >= amount) { setTotalAmount((prevAmount) => prevAmount - amount); } }; diff --git a/src/components/pages/Income/Records/Records.js b/src/components/pages/Income/Records/Records.js index 4777fea..25c355e 100644 --- a/src/components/pages/Income/Records/Records.js +++ b/src/components/pages/Income/Records/Records.js @@ -47,16 +47,14 @@ function Records() { const handleBackClick = () => { navigate("/totalsuccessfully"); }; - const handleBackHomeClick = () => { navigate("/") } - const handleEditClick = () => { const idToEdit = entryId || (lastEntry ? lastEntry.id : null); if (idToEdit) { - navigate("/editpage", { + navigate("/editPage", { state: { id: idToEdit, amount: entry ? entry.amount : lastEntry.amount, @@ -69,7 +67,6 @@ function Records() { }; return ( -
- +

Expense

-

Income

{currentDateTime}

@@ -91,11 +87,7 @@ function Records() {

Selected Categories:

- +

{categories.join(', ')}