' amount functionlity and ui '

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;
@@ -185,9 +186,8 @@
   }
 
  
-  .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) {

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);
     }
   };

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; 

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!');
             }

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; 

src/components/pages/Expense/ExpenseRecords/ExpenseRecords.js

@@ -87,11 +87,7 @@ function ExpenseRecords() {
         
         <div className="categories">
           <h3>Selected Categories:</h3>
-          <ul>
-            {categories.map((category, index) => (
-              <li key={index}>{category}</li>
-            ))}
-          </ul>
+          <p>{categories.join(', ')}</p> 
         </div>
       </div>
       

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);
     }
   };

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 (
-
     <div className="container">
       <div className="back_arrows">
         <FontAwesomeIcon
@@ -80,9 +77,8 @@ function Records() {
         />
       </div>
       
-     
+      <h1>Expense</h1>
       <div className="success-datetime">
-      <h1>Income</h1>
         <p>{currentDateTime}</p>
       </div>
 
@@ -91,11 +87,7 @@ function Records() {
         
         <div className="categories">
           <h3>Selected Categories:</h3>
-          <ul>
-            {categories.map((category, index) => (
-              <li key={index}>{category}</li>
-            ))}
-          </ul>
+          <p>{categories.join(', ')}</p> 
         </div>
       </div>