"ne changes "

src/App.js

@@ -33,7 +33,7 @@ function App() {
         <Route path="/successPage" element={<IncomeSuccessfully />} />
         <Route path="/records" element={<Records />} />
         <Route element={<Layout />}>
-          <Route path="/income" element={<IncomePage />} />
+          {/* <Route path="/income" element={<IncomePage />} /> */}
           <Route path="/amount" element={<AmountPage />} />
           <Route path="/category" element={<Category />} />
         </Route>
@@ -46,7 +46,7 @@ function App() {
         <Route path="/expense-records" element={<ExpenseRecords/>}/>
         <Route path="/expense-successfully" element={<ExpenseSuccessfully/>}/>
          <Route element={<ExpenseLayout />}>
-         <Route path="/expense" element={<ExpensePage/>}/>
+         {/* <Route path="/expense" element={<ExpensePage/>}/> */}
         <Route path="/expenseAmount" element={<ExpenseAmount/>}/>
         <Route path="/expenseCategory" element={<ExpenseCategory/>}/>
         </Route>

src/components/pages/Expense/Common/ExpenseEditPage.css

@@ -110,6 +110,22 @@
     align-items: center;
     margin-right: 10px;
 }
+@media (max-width: 375px) {
+   
+    .backIcon {
+        position: absolute;
+        top: 13px;
+        margin: 35px;
+        left: 10px;
+    }
+    
+    .arrow-icon {
+        font-size: 18px;
+        cursor: pointer;
+    }
+    
+}
+
 
 @media (max-width: 768px) {
     .edit-titles h1 {

src/components/pages/Expense/Common/TotalExpenseSuccessfully.css

@@ -95,7 +95,21 @@
 .success-date-time{
     color: #fff;
 }
+@media (max-width: 375px) {
+    .arrows {
+        position: absolute;
+    top: 13px;
+    margin: 35px;
+    left: 10px;
+    }
     
+    .arrow-icon-1 {
+        font-size: 18px;
+    
+        cursor: pointer;
+    }
+
+}
 
 @media (max-width: 768px) {
     .success-message h2 {

src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css

@@ -18,14 +18,12 @@
 
 }
 
-
-
   .arrowbtn {
     position: absolute;
     left: 0;
     top: 50%;
     margin: 20px 10px;
-    font-size: 4vw; /* Responsive font-size */
+    font-size: 4vw;
     color: #333;
     cursor: pointer;
   }
@@ -53,6 +51,7 @@
   border-radius: 24px;
   padding: 10px;
   border-radius: 8px;
+  /* margin: 10px; */
   margin-bottom: 20px;
 }
 
@@ -69,13 +68,13 @@
   height: 30px;
 }
 
-
 .rupess_section {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 15px;
-  margin-top: 20px;
+  margin: 10px;
+  margin-top: 50%;
 }
 
 
@@ -102,10 +101,18 @@
 }
 
 
+
+
+
 @media (max-width: 600px) {
   .amount-container {
     padding: 10px;
-    max-width: 100%;
+    max-width: 90%;
+  }
+
+  .amount-display{
+    width: 130px; 
+    height: 20px;
   }
 
   .backarrow {
@@ -116,7 +123,7 @@
     position: absolute;
     /* left: 3%; */
     top: 50%;
-    margin: 17px 30px;
+    margin: 25px 30px;
     /* transform: translateX(-20%); */
     font-size: 18px;
     color: #333;
@@ -128,9 +135,15 @@
   }
 
   .rupess_section {
-    gap: 20px;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 25px;
+    margin: 10px;
+    margin-top: 100%;
   }
   
+
   .coin {
     width: 50px;
     height: 50px;
@@ -139,12 +152,12 @@
   }
  
   .coin-value {
-    font-size: 26px;
+    font-size: 24px;
   }
 
   .Rupeesicon {
-    width: 33px;
-    height: 33px;
+    width: 25px;
+    height: 25px;
   }
 
   .total-amount {
@@ -155,7 +168,15 @@
   .coin:hover {
     background-color: #4caf50;
   }
+  .btn-group{
  
+    justify-content: space-between;
+     margin-top: 20px;
+     position: relative;
+     display: flex;
+      direction: row;
+    gap: 25px;
+   }
 }
 
 @media (min-width: 1024px) {
@@ -181,12 +202,22 @@
   .Rupeesicon {
     width: 30px;
     height: 30px;
-    padding: 10px;
+    padding: 7px;
   }
 
   .total-amount {
     font-size: 40px;
   }
+
+  .btn-group{
+ 
+    justify-content: space-between;
+     margin-top: 20px;
+     position: relative;
+     display: flex;
+      direction: row;
+    gap: 25px;
+   }
 }
 
 @media (max-width: 375px) {
@@ -210,7 +241,7 @@
 
   .rupess_section {
     gap: 20px;
-    margin-top: 10px;
+    margin-top: 90%;
   }
 
   .coin {
@@ -230,4 +261,15 @@
   .total-amount {
     font-size: 26px;
   }
+
+.btn-group{
+ 
+ justify-content: space-between;
+  margin-top: 20px;
+  position: relative;
+  display: flex;
+   direction: row;
+ gap: 25px;
+}
+  
 }

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

@@ -1,27 +1,39 @@
-
-import React from "react";
+import React, { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
-import { useNavigate, useOutletContext ,useLocation } from "react-router-dom";
+import { useNavigate, useOutletContext, useLocation } from "react-router-dom";
 import rupeeIcon from "../../../../assets/Rupees.png";
 import "../ExpenseAmount/ExpenseAmount.css";
 
 function ExpenseAmount() {
-
-   const navigate = useNavigate();
+  const navigate = useNavigate();
   const location = useLocation();
   const { entryType } = location.state || {};
-
-
   const [totalAmount, setTotalAmount] = useOutletContext();
   
+  const [isClickable, setIsClickable] = useState(true);
+  const [lastAddedAmount, setLastAddedAmount] = useState(0);
+
   const handleCoinClick = (amount) => {
-    setTotalAmount((prevAmount) => prevAmount + amount); 
+    if (isClickable) {
+      setTotalAmount((prevAmount) => prevAmount + amount);
+      setLastAddedAmount(amount);
+      setIsClickable(false);
+      setTimeout(() => {
+        setIsClickable(true);
+      }, 500);
+    }  
   };
 
-    const handleBackClick = () => {
+  const handleSubtractClick = (amount) => {
+    if (totalAmount >= amount) { // Ensure you do not go negative
+      setTotalAmount((prevAmount) => prevAmount - amount);
+    }
+  };
+
+  const handleBackClick = () => {
     console.log(entryType);
-    navigate("/expense", { state: { entryType } }); 
+    navigate("/", { state: { entryType } });
   };
 
   return (
@@ -35,34 +47,41 @@ function ExpenseAmount() {
         />
       </div>
 
-    
       <div className="amount-display">
         <h3 className="amount-titles">Amount</h3>
         <img src={rupeeIcon} alt="Rupee Icon" className="Rupeesicon" />
       </div>
 
       <section className="rupess_section">
-        <div className="coin" onClick={() => handleCoinClick(50)}>
+        <div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(50)}>
           <div className="coin-value">50</div>
         </div>
 
-        <div className="coin" onClick={() => handleCoinClick(100)}>
+        <div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(100)}>
           <div className="coin-value">100</div>
         </div>
 
-        <div className="coin" onClick={() => handleCoinClick(200)}>
+        <div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(200)}>
           <div className="coin-value">200</div>
         </div>
 
-        <div className="coin" onClick={() => handleCoinClick(500)}>
+        <div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(500)}>
           <div className="coin-value">500</div>
         </div>
 
-        <div className="coin" onClick={() => handleCoinClick(1000)}>
+        <div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(1000)}>
           <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.css

@@ -11,14 +11,15 @@ body {
   width: 80%;
   max-width: 500px;
   height: 340px;
-  top: 50%;
+  top: 32%;
+  
   left: 50%;
   transform: translate(-50%, -50%);
   color: white;
   font-family: 'Montserrat', sans-serif;
   background: #1e1e1e;
   box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404,
-    inset -2px -2px 2px rgba(255, 255, 255, 0.64),
+    inset -2px -2px 2px  rgba(50, 50, 51, 0.66),
     inset 2px 2px 2px rgba(39, 39, 44, 0.56);
   padding: 8px;
   box-sizing: border-box;
@@ -88,8 +89,9 @@ body {
   
   @media (max-width: 768px) {
     .total-amount-container {
-      width: 90%; 
-      top: 65%; 
+      width: 80%; 
+      height: 45%;
+      top: 35%; 
     }
   
     .input-group {
@@ -103,21 +105,24 @@ body {
     }
   
     .button-group {
-      flex-direction: column; 
+      flex-direction: row; 
       align-items: center;
+      gap: 15px;
     }
   
     .add-entry-1,
     .add-entry-2 {
-      width: 100%; 
-      margin: 10px 0; 
+      width: 50%;
+      margin: 5px 0; 
     }
   }
   
   @media (max-width: 480px) {
     .total-amount-container {
       /* padding: 15px;  */
-      margin: 20px 0px 0px 0px ;
+      top: 35%;
+      margin: 0px 0px 0px 0px ;
+      height: auto;
     }
   
     .add-entry-1,

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { useNavigate , useLocation } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import '../ExpenseAmount/TotalExpenseAmount.css';
 
 function TotalExpenseAmount({ totalAmount, category, setCategory }) {
@@ -26,22 +26,20 @@ function TotalExpenseAmount({ totalAmount, category, setCategory }) {
   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; 
+      alert('Amount is required and must be greater than zero');
+      return null; 
     }
 
-    
     if (!category) {
-        setCategoryError('Category is required');
-        return null; 
+      setCategoryError('Category is required');
+      return null; 
     }
 
     const now = new Date();
     const formattedDateTime = now.toLocaleString();
 
-
     const newEntry = {
       id: Date.now(),
       amount: parseFloat(amount),  
@@ -49,24 +47,20 @@ function TotalExpenseAmount({ totalAmount, category, setCategory }) {
       dateTime: formattedDateTime,
       type: entryType 
     };
-    console.log(entryType)
-
 
     if (!categories.includes(category)) {
-        setCategories([...categories, category]); 
+      setCategories([...categories, category]); 
     }
 
     const updatedEntries = [...entries, newEntry];
 
-   
     if (updatedEntries.length > 5) {
-        updatedEntries.shift(); 
+      updatedEntries.shift(); 
     }
 
     setEntries(updatedEntries);
     localStorage.setItem('entries', JSON.stringify(updatedEntries));
 
-   
     setCategory(''); 
     setAmount(''); 
 
@@ -83,28 +77,62 @@ function TotalExpenseAmount({ totalAmount, category, setCategory }) {
   const handleSaveAndAddEntry = () => {
     const timestamp = handleAddEntry(); 
     if (timestamp) {
-      navigate('/expense'); 
+      navigate('/'); 
     }
   };
 
+  const handleCategoryFocus = () => {
+    navigate('/expenseCategory'); 
+  };
+
+  const handleAmountFocus = () => {
+    navigate('/expenseAmount'); 
+  };
+
+  const handleAmountMouseDown = (e) => {
+    e.preventDefault(); // Prevents the keyboard from opening
+    handleAmountFocus(); // Navigate on first click
+  };
+
+  const handleCategoryMouseDown = (e) => {
+    e.preventDefault(); // Prevents the keyboard from opening
+    handleCategoryFocus(); // Navigate on first click
+  };
+
+  const handleAmountDoubleClick = () => {
+    const input = document.getElementById("amount-input");
+    input.focus();
+  };
+
+  const handleCategoryDoubleClick = () => {
+    const input = document.getElementById("category-input");
+    input.focus();
+  };
+
   return (
     <div className="total-amount-container">
       <div className="input-group">
         <div className="amount-input">
           <label>Total:</label>
           <input
+            id="amount-input"
             type="number"
             value={amount} 
             onChange={(e) => setAmount(e.target.value)} 
+            onMouseDown={handleAmountMouseDown} 
+            onDoubleClick={handleAmountDoubleClick} 
             placeholder="Enter Amount"
           />
         </div>
         <div className="category-input">
           <label>Category:</label>
           <input
+            id="category-input"
             type="text"
             value={category} 
             onChange={(e) => setCategory(e.target.value)} 
+            onMouseDown={handleCategoryMouseDown} 
+            onDoubleClick={handleCategoryDoubleClick} 
             placeholder="Add Category"
           />
           {categoryError && <span className="error-message">{categoryError}</span>}
@@ -118,7 +146,4 @@ function TotalExpenseAmount({ totalAmount, category, setCategory }) {
   );
 }
 
-
-
-
 export default TotalExpenseAmount;

src/components/pages/Expense/ExpenseCategory/ExpenseCategory.css

@@ -70,7 +70,7 @@
   flex-wrap: wrap;
   justify-content: center;
   width: 100%;
-  margin-top: 0px;
+  margin-top: 20%;
 }
 
 .cat-item {
@@ -139,7 +139,9 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
     font-size: 20px; 
   }
 
- 
+ .arrow{
+  margin: 13px 10px;
+ }
 
   .category01 {
     width: 35px;
@@ -158,17 +160,28 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
     top: 40px;
     left: 40px;
   }
+  .category-display{
+    width: 130px;
+  height: 20px;
+  }
+
 
   .category-titles {
-    font-size: 18px;
+    font-size: 15px;
     color: #fff;
 
   }
-
+  .category-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 100%;
+    margin-top: 90%;
+  }
   .category01 {
-    width: 30px;
-    margin: 7px;
-    height: 30px;
+    width: 25px;
+    margin: 5px;
+    height: 25px;
   }
 
   .cat-item {
@@ -186,6 +199,7 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
 @media (max-width: 375px) {
   .category-container {
     padding: 0; 
+
   }
 
   .arrow-icon {
@@ -201,11 +215,20 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
 
   .category-display {
     width: 120px;
-    height: 25px;
-    margin: 35px auto; 
+    height: 20px;
+    margin: 30px auto; 
     font-size: 14px;
   }
 
+  .category-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 100%;
+    margin-top: 75%;
+  }
+  
+
   .category-titles {
     font-size: 14px;
     margin-right: 2px; 
@@ -213,8 +236,8 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
 
   .category01 {
     width: 25px;
+    margin: 4px;
     height: 25px;
-    margin: 5px;
   }
 
   .cat-item {

src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js

@@ -19,7 +19,7 @@ function ExpenseCategory() {
     const entryType = location.state?.entryType; 
 
     const handleBackClick = () => {
-        navigate("/income", { state: { entryType } }); 
+        navigate("/", { state: { entryType } }); 
         console.log(entryType);  
     }
 

src/components/pages/Expense/ExpensePage/ExpensePage.css

@@ -7,6 +7,7 @@
     border-radius: 10px;
     /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
     text-align: center;
+
   }
   
   .arrow-container {
@@ -48,9 +49,8 @@
 
   .button-container {
     display: flex;
-    
     justify-content: center;
-    margin-top: 20px;
+    margin-top: 100%;
   }
   .amount-btn{
     width: 37%;
@@ -156,6 +156,7 @@
    .category-btn {
     font-size: 18px;
     }
+    
   }
   
   

src/components/pages/Expense/ExpenseRecords/ExpenseRecords.css

@@ -157,6 +157,20 @@
         font-size: 14px;
     }
 
+    .back_arrows {
+        position: absolute;
+    top: 13px;
+    margin: 35px;
+    left: 10px;
+    }
+    
+    .arrow-icon {
+        font-size: 18px;
+        margin: 9px 0px 0px 0px;
+        cursor: pointer;
+    }
+
+   
     
 }
 

src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.css

@@ -5,7 +5,10 @@
     justify-content: center;
     align-items: center;
     height: 100vh;
+    /* margin-bottom: 5px; */
+    overflow: hidden;
     position: relative;
+    font-family: 'Montserrat', sans-serif;
 }
 
 .arrow {
@@ -15,7 +18,7 @@
 
 .arr {
     position: absolute;
-    top: 10px;
+    top: 0px;
     left: 0px;
 }
 
@@ -102,7 +105,17 @@
         font-size: 14px;
     }
 
+    .arrow {
+        font-size: 18px;
+        cursor: pointer;
+        position: absolute;
+        top: 8px;
+        margin: 35px;
+        left: 5px;
+    }
+    
     .arr {
+        position: absolute;
         top: 0px;
         left: 0px;
     }
@@ -135,6 +148,18 @@
     }
 }
 
+@media (max-width: 375px) {
+    .arrow {
+        font-size: 18px;
+        cursor: pointer;
+    }
+    
+    .arr {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+    }
+}
 /* Large screens (1025px and up) */
 @media (min-width: 1025px) {
     .btn1, .bt_11 {
@@ -142,7 +167,10 @@
         height: 50px;
         font-size: 18px;
     }
-
+    .arr {
+        top: 0px;
+        left: 0px;
+    }
     .payment-title h1 {
         font-size: 30px;
     }

src/components/pages/Income/Amount/AmountPage.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useState} from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
 import { useNavigate, useLocation , useOutletContext} from "react-router-dom"; 
@@ -9,16 +9,31 @@ function AmountPage() {
   const navigate = useNavigate();
   const location = useLocation();
   const { entryType } = location.state || {};
-
   const [totalAmount, setTotalAmount] = useOutletContext();
   
+  const [isClickable, setIsClickable] = useState(true);
+  const [lastAddedAmount, setLastAddedAmount] = useState(0);
+
   const handleCoinClick = (amount) => {
-    setTotalAmount((prevAmount) => prevAmount + amount);
+    if (isClickable) {
+      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);
+    }
   };
 
   const handleBackClick = () => {
     console.log(entryType);
-    navigate("/income", { state: { entryType } }); 
+    navigate("/", { state: { entryType } });
   };
 
   return (
@@ -38,22 +53,35 @@ function AmountPage() {
       </div>
 
       <section className="rupess_section">
-        <div className="coin" onClick={() => handleCoinClick(50)}>
+        <div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(50)}>
           <div className="coin-value">50</div>
         </div>
-        <div className="coin" onClick={() => handleCoinClick(100)}>
+
+        <div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(100)}>
           <div className="coin-value">100</div>
         </div>
-        <div className="coin" onClick={() => handleCoinClick(200)}>
+
+        <div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(200)}>
           <div className="coin-value">200</div>
         </div>
-        <div className="coin" onClick={() => handleCoinClick(500)}>
+
+        <div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(500)}>
           <div className="coin-value">500</div>
         </div>
-        <div className="coin" onClick={() => handleCoinClick(1000)}>
+
+        <div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(1000)}>
           <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

@@ -26,22 +26,20 @@ function TotalAmount({ totalAmount, category, setCategory }) {
   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; 
+      alert('Amount is required and must be greater than zero');
+      return null; 
     }
 
- 
     if (!category) {
-        setCategoryError('Category is required');
-        return null; 
+      setCategoryError('Category is required');
+      return null; 
     }
 
     const now = new Date();
     const formattedDateTime = now.toLocaleString();
 
-    
     const newEntry = {
       id: Date.now(),
       amount: parseFloat(amount),  
@@ -49,23 +47,20 @@ function TotalAmount({ totalAmount, category, setCategory }) {
       dateTime: formattedDateTime,
       type: entryType 
     };
-    console.log(entryType)
-
 
     if (!categories.includes(category)) {
-        setCategories([...categories, category]); 
+      setCategories([...categories, category]); 
     }
 
     const updatedEntries = [...entries, newEntry];
 
     if (updatedEntries.length > 5) {
-        updatedEntries.shift(); 
+      updatedEntries.shift(); 
     }
 
     setEntries(updatedEntries);
     localStorage.setItem('entries', JSON.stringify(updatedEntries));
 
-    // Reset input fields
     setCategory(''); 
     setAmount(''); 
 
@@ -82,28 +77,62 @@ function TotalAmount({ totalAmount, category, setCategory }) {
   const handleSaveAndAddEntry = () => {
     const timestamp = handleAddEntry(); 
     if (timestamp) {
-      navigate('/income'); 
+      navigate('/'); 
     }
   };
 
+  const handleCategoryFocus = () => {
+    navigate('/category'); 
+  };
+
+  const handleAmountFocus = () => {
+    navigate('/amount'); 
+  };
+
+  const handleAmountMouseDown = (e) => {
+    e.preventDefault(); // Prevents the keyboard from opening
+    handleAmountFocus(); // Navigate on first click
+  };
+
+  const handleCategoryMouseDown = (e) => {
+    e.preventDefault(); // Prevents the keyboard from opening
+    handleCategoryFocus(); // Navigate on first click
+  };
+
+  const handleAmountDoubleClick = () => {
+    const input = document.getElementById("amount-input");
+    input.focus();
+  };
+
+  const handleCategoryDoubleClick = () => {
+    const input = document.getElementById("category-input");
+    input.focus();
+  };
+
   return (
     <div className="total-amount-container">
       <div className="input-group">
         <div className="amount-input">
           <label>Total:</label>
           <input
+            id="amount-input"
             type="number"
             value={amount} 
             onChange={(e) => setAmount(e.target.value)} 
+            onMouseDown={handleAmountMouseDown} 
+            onDoubleClick={handleAmountDoubleClick} 
             placeholder="Enter Amount"
           />
         </div>
         <div className="category-input">
           <label>Category:</label>
           <input
+            id="category-input"
             type="text"
             value={category} 
             onChange={(e) => setCategory(e.target.value)} 
+            onMouseDown={handleCategoryMouseDown} 
+            onDoubleClick={handleCategoryDoubleClick} 
             placeholder="Add Category"
           />
           {categoryError && <span className="error-message">{categoryError}</span>}

src/components/pages/Income/Category/Category.js

@@ -17,7 +17,7 @@ function Category() {
     const entryType = location.state?.entryType; 
 
     const handleBackClick = () => {
-        navigate("/income", { state: { entryType } }); 
+        navigate("/", { state: { entryType } }); 
         console.log(entryType);  
     }
 

src/components/pages/Income/Home.js

@@ -20,13 +20,13 @@ function Home() {
   const handleIncomeClick = () => {
     setEntryType('income'); 
     console.log(entryType)
-    navigate('/income', { state: { entryType: 'income' } }); 
+    navigate('/amount', { state: { entryType: 'income' } }); 
   };
    
   const handleExpenseClick = () => {
     setEntryType('expense'); 
     console.log(entryType)
-    navigate('/expense', { state: { entryType: 'expense' } }); 
+    navigate('/expenseAmount', { state: { entryType: 'expense' } }); 
   }
 
   return (