src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -4,36 +4,32 @@
     justify-content: center;
     align-items: center;
     height: 100vh;
-    overflow: hidden;
     position: relative;
     font-family: 'Montserrat', sans-serif;
 }
 
 .backIcon {
     position: absolute;
-    top: 10px;
+    top: 20px;
-    margin: 35px;
+    left: 20px;
-    left: 10px;
 }
 
 .arrow-icon {
-    font-size: 18px;
+    font-size: 24px;
     cursor: pointer;
 }
 
 .edit-content {
 
-   padding: 30px;
+    padding: 20px;
-    margin-bottom: 30px;
     border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); */
     width: 100%;
     max-width: 400px;
 }
 
 .edit-titles h1 {
     color: #fff;
-    margin-bottom: 30px;
     font-size: 30px;
     margin: 0px 0;
     text-align: center;
@@ -41,7 +37,6 @@
 
 .edit-datetime {
     color: #fff;
-    margin-bottom: 30px;
     font-size: 18px;
     text-align: center;
     margin-bottom: 10px;
@@ -49,7 +44,6 @@
 
 .edit-fields {
     color: #fff;
-    padding: 10px 10px;
     margin-bottom: 15px;
     width: 93%;
 }
@@ -57,15 +51,14 @@
 .edit-fields label {
     display: block;
     margin-bottom: 9px;
-    
 }
 
 .edit-fields input {
     width: 100%;
     padding: 10px;
-    /* border: 1px solid #555; */
+    border: 1px solid #555;
     border-radius: 4px;
-    /* background-color: #3A3A3A; */
+    background-color: #3A3A3A;
     color: #fff;
     font-size: 16px;
 }
@@ -75,14 +68,14 @@
     display: flex;
     justify-content: center;
     margin-top: 30px;
-    gap: 5px;
     width: 100%;
 }
 
 .edit-btn {
+
     position: relative;
-    width: 130px;
+    width: 150px;
-    height: 50px;
+    height: 60px;
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -97,8 +90,8 @@
 
 .edit-btn-2 {
     position: relative;
-    width: 130px;
+    width: 150px;
-    height: 50px;
+    height: 60px;
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -111,94 +104,16 @@
     margin-right: 10px;
 }
 
-
- .dropdown {
-  position: relative;
-  width: 100%;
-}
-
-.dropdown input {
-  width: 100%;
-  padding: 8px;
-  cursor: pointer;
-}
-
-.dropdown-list {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-
-  max-height: 150px;
-  overflow-y: auto;
-  z-index: 10;
- 
-}
-
-.dropdown-item {
-  padding: 8px;
-  cursor: pointer;
-}
-
-
-
-.select {
- 
-  background-color: rgba(255, 255, 255, 0.425);
-}
-
-
-@media (max-width: 375px) {
-   
-    .backIcon {
-        position: absolute;
-        top: 13px;
-        margin: 35px;
-        left: 10px;
-    }
-    
-    .arrow-icon {
-        font-size: 18px;
-        cursor: pointer;
-    }
-    .select {
-        width: 100px;
-      background-color: rgba(255, 255, 255, 0.425);
-    }
-    
-}
-
-
 @media (max-width: 768px) {
     .edit-titles h1 {
-        
         font-size: 24px;
     }
 
     .edit-datetime {
-        
         font-size: 16px;
     }
 
     .edit-buttons div {
         font-size: 14px;
     }
-
+}
-    .select {
-        width: 100px;
-      background-color: rgba(255, 255, 255, 0.425);
-    }
-}
-@media (min-width: 1024px) {
-    .edit-btn, .edit-btn-2 {
-        width: 250px;
-        height: 50px;
-        font-size: 20px;
-    }
-    .select {
-        width: 100px;
-      background-color: rgba(255, 255, 255, 0.425);
-    }
-}
-
-

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

@@ -2,97 +2,51 @@ import React, { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
-import "../Common/ExpenseEditPage.css";
+import "../Common/ExpenseEditPage.css"
 
 function ExpenseEditPage() {
   const location = useLocation();
   const navigate = useNavigate();
   const [currentDateTime, setCurrentDateTime] = useState("");
   const [amount, setAmount] = useState(location.state?.amount || "");
-  
+  const [category, setCategory] = useState(location.state?.category || "");
-  // Initial categories
-  const [defaultCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
-  const [categories, setCategories] = useState(defaultCategories);
-
-  const [selectedCategories, setSelectedCategories] = useState(
-    Array.isArray(location.state?.category)
-      ? location.state.category
-      : location.state?.category
-      ? [location.state.category]
-      : []
-  );
-  
   const [error, setError] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
-  const [dropdownVisible, setDropdownVisible] = useState(false);
 
   useEffect(() => {
     const now = new Date();
     const formattedDateTime = now.toLocaleString();
     setCurrentDateTime(formattedDateTime);
-
+  }, []);
-    // Retrieve stored categories from local storage and update categories
-    const storedCategories = JSON.parse(localStorage.getItem("categories")) || [];
-    const uniqueCategories = [...new Set([...defaultCategories, ...storedCategories])];
-    setCategories(uniqueCategories); 
-
-    if (!location.state?.id) {
-      const storedEntries = JSON.parse(localStorage.getItem("entries")) || [];
-      const entryToEdit = storedEntries.find(
-        (entry) => entry.id === location.state?.id
-      );
-
-      if (entryToEdit) {
-        setAmount(entryToEdit.amount);
-        setSelectedCategories(
-          Array.isArray(entryToEdit.category)
-            ? entryToEdit.category
-            : entryToEdit.category
-            ? [entryToEdit.category]
-            : []
-        );
-      }
-    }
-  }, [location.state]);
 
   const handleBackClick = () => {
     navigate("/expense-records");
   };
 
   const handleSave = () => {
-    setIsLoading(true);
+    setIsLoading(true); 
     setError(null);
 
     const updatedEntry = {
       id: location.state?.id,
       amount: amount,
       dateTime: currentDateTime,
-      category: selectedCategories.join(", "), 
+      category: category,
     };
 
+  
     const storedEntries = JSON.parse(localStorage.getItem("entries")) || [];
     const updatedEntries = storedEntries.map((entry) =>
       entry.id === updatedEntry.id ? updatedEntry : entry
     );
     localStorage.setItem("entries", JSON.stringify(updatedEntries));
 
-    navigate("/expense-successfully", { state: updatedEntry });
+
+    console.log("Entry updated in local storage:", updatedEntry);
+    navigate("/expense-successfully");
     setIsLoading(false);
   };
 
-  const toggleDropdown = () => {
-    setDropdownVisible(!dropdownVisible);
-  };
-
-  const handleCategorySelect = (category) => {
-    // Toggle category selection
-    if (selectedCategories.includes(category)) {
-      setSelectedCategories(selectedCategories.filter((cat) => cat !== category));
-    } else {
-      setSelectedCategories([...selectedCategories, category]);
-    }
-  };
-
   return (
     <div className="incomeedit-containers">
       <div className="backIcon">
@@ -125,27 +79,11 @@ function ExpenseEditPage() {
 
         <div className="edit-fields">
           <label>Category:</label>
-          <div className="dropdown" onClick={toggleDropdown}>
+          <input
-            <input
+            type="text"
-              type="text"
+            value={category}
-              value={selectedCategories.join(", ") || ""}
+            onChange={(e) => setCategory(e.target.value)}
-              placeholder="Select Categories"
+          />
-              readOnly
-            />
-            {dropdownVisible && (
-              <div className="dropdown-list">
-                {categories.map((category) => (
-                  <div
-                    key={category}
-                    className={`dropdown-item ${selectedCategories.includes(category) ? "select" : ""}`}
-                    onClick={() => handleCategorySelect(category)}
-                  >
-                    {category}
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
         </div>
 
         <div className="edit-buttons">

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

@@ -1,7 +1,7 @@
 .layout-container {
-    /* display: flex;
+    display: flex;
     flex-direction: column;
-    min-height: 100vh;  */
+    min-height: 100vh; 
     font-family: 'Montserrat', sans-serif;
   }
   

src/components/pages/Expense/Common/ExpenseLayout.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Outlet } from 'react-router-dom';
+
 import '../Common/ExpenseLayout.css';
 import TotalExpenseAmount from '../ExpenseAmount/TotalExpenseAmount';
 
@@ -7,26 +8,14 @@ const ExpenseLayout = () => {
   const [totalAmount, setTotalAmount] = useState(0); 
   const [category, setCategory] = useState(''); 
 
-  const handleManualAmountChange = (value) => {
-    const numericValue = parseFloat(value);
-    if (!isNaN(numericValue)) {
-      setTotalAmount(numericValue);
-    } else {
-      setTotalAmount(0); 
-    }
-  };
-
   return (
     <div className="layout-container">
       <div className="page-content">
+      
         <Outlet context={[totalAmount, setTotalAmount, category, setCategory]} />
       </div>
-      <TotalExpenseAmount 
+     
-        totalAmount={totalAmount} 
+      <TotalExpenseAmount totalAmount={totalAmount} category={category} setCategory={setCategory} />
-        category={category} 
-        setCategory={setCategory} 
-        handleManualAmountChange={handleManualAmountChange} // Pass the function here
-      />
     </div>
   );
 };

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

@@ -5,21 +5,17 @@
     justify-content: center;
     align-items: center;
     height: 100vh;
-    font-family: 'Montserrat', sans-serif;
-    color: white;
     position: relative;
 }
 
 .arrows {
     position: absolute;
-    top: 10px;
+    top: 20px;
-    margin: 35px;
+    left: 20px;
-    left: 10px;
 }
 
 .arrow-icon-1 {
-    font-size: 18px;
+    font-size: 24px;
-
     cursor: pointer;
 }
 
@@ -34,13 +30,13 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-bottom: 0px;
+    margin-bottom: 10px;
 }
 
 .success-title h1 {
     color: #fff;
     font-size: 30px;
-    margin-top: 0px;
+    margin-top: 10px;
     text-align: center;
 }
 
@@ -56,14 +52,14 @@
 .success-button {
     display: flex;
     justify-content: center;
-    gap: 10px;
+    gap: 20px;
-    margin-top: 10px;
+    margin-top: 20px;
 }
 
 .btn-view  {
     position: relative; 
-    width: 100px;
+    width: 120px;
-    height: 30px; 
+    height: 40px; 
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -77,8 +73,8 @@
 }
 .btn-back {
     position: relative; 
-    width: 100px;
+    width: 120px;
-    height: 30px; 
+    height: 40px; 
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -92,25 +88,24 @@
 }
 
 
+
 .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;
-    }
 
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+    .btn-view, .btn-back {
+        padding: 12px 20px;
+        font-size: 16px;
+    }
 }
 
+
+
+
+/* Mobile responsiveness */
 @media (max-width: 768px) {
     .success-message h2 {
         font-size: 20px;
@@ -119,21 +114,4 @@
     .success-title h1 {
         font-size: 24px;
     }
-  
-    
 }
-@media (min-width: 1024px) {
-    .btn-view, .btn-back {
-        width: 200px;
-        height: 50px;
-        font-size: 20px;
-    }
-
-    .success-title h1 {
-        font-size: 32px;
-    }
-
-    .success-message h2 {
-        font-size: 26px;
-    }
-}

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

@@ -22,7 +22,7 @@ function TotalExpenseSuccessfully() {
     const dataToStore = {
       incomeRecord: {
         dateTime: formattedDateTime,
-        entryId: entryId || "Not provided",  
+        entryId: entryId || "Not provided",  // Fallback in case entryId is undefined
       },
     };
     console.log(JSON.stringify(dataToStore));
@@ -33,7 +33,7 @@ function TotalExpenseSuccessfully() {
   };
 
   const handleViewRecordsClick = () => {
-    
+    // Pass entryId to the /records route when navigating
     navigate("/expense-records", { state: { entryId } });
     console.log(entryId);
   };

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

@@ -1,296 +1,191 @@
+
 .amount-container {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  align-items: center;
+    align-items: center;
-  justify-content: center;
+    justify-content: center;
-  padding: 10px;
+    padding: 10px;
-  margin: 0 auto;
+    margin: 0 auto;
-  max-width: 90vw; 
+    max-width: 500px;
-  background-color: #1e1e1e;
+    background-color: #1e1e1e;
-  border-radius: 10px;
+    border-radius: 10px;
-  text-align: center;
+    text-align: center;
-}
+  }
-
+  
-.backarrow {
-  /* position: absolute; */
-  width: 100%;
-
-}
 
+  .backarrow {
+    position: relative;
+    width: 100%;
+    text-align: center; 
+    margin-bottom: 50px;
+  }
+  
+  
   .arrowbtn {
     position: absolute;
     left: 0;
     top: 50%;
-    margin: 20px 10px;
+    margin: 30px 10px;
-    font-size: 4vw;
+    /* transform: translateY(-50%); */
-    color: #333;
+    font-size: 24px;
-    cursor: pointer;
-  }
-
-
-
-.amount-titles {
-  font-size: 24px;
-  width: 100%;
-  color: #fff;
-  margin: 0 auto;
-  text-align: center;
-  flex-grow: 1;
-}
-
-
-.amount-display {
-  display: flex;
-    width: 150px; 
-    height: 30px;
-  align-items: center;
-  justify-content: center;
-  background: #1E1E1E;
-  box-shadow: 0px 0px 22.3px #E335DC, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
-  border-radius: 24px;
-  padding: 10px;
-  border-radius: 8px;
-  /* margin: 10px; */
-  margin-bottom: 20px;
-}
-
-.total-amount {
-  font-size: 36px;
-  color: #fff;
-  margin-right: 10px;
-
-}
-
-.Rupeesicon {
-  width: 30px;
-  height: 30px;
-}
-
-.rupess_section {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 15px;
-  margin: 10px;
-  margin-top: 50%;
-}
-
-
-.coin {
-  width: 50px;
-  height: 50px;
-  background: #E335DC;
-  box-shadow: -10px -10px 12px rgba(50, 50, 51, 0.66), 10px 10px 16px #040404, inset -2px -2px 2px rgba(111, 0, 121, 0.64), inset 2px 2px 2px rgba(102, 0, 98, 0.56);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-  /* border: 2px solid #fff; */
-
-
-}
-
-.coin-value {
-  font-size: 24px;
-  font-weight: bold;
-  color: #fff;
-}
-.btn-group{
-  display: flex;
-  /* margin-top: 5px; */
-  position: relative;
-}
-.minus{
-  width: 60px;
-  background-color: #1E1E1E;
-  color: #fff;
-  margin-top: 5px;
-  box-shadow: -8px -8px 12px rgba(39, 39, 44, 0.48),
-  8px 8px 16px rgba(4, 4, 4, 0.8),
-  inset -2px -2px 2px rgba(41, 37, 41, 0.64),
-  inset 2px 2px 2px #181618;
-
-}
-.plus{
-  width: 60px;
-  margin-top: 5px;
-  background-color: #1E1E1E;
-  color: #fff;
-  box-shadow: -8px -8px 12px rgba(39, 39, 44, 0.48),
-  8px 8px 16px rgba(4, 4, 4, 0.8),
-  inset -2px -2px 2px rgba(41, 37, 41, 0.64),
-  inset 2px 2px 2px #181618;
-}
-
-.coin.selected {
-  background: #4caf50; 
-}
-@media (max-width: 600px) {
-  .amount-container {
-    padding: 10px;
-    max-width: 90%;
-  }
-
-  .amount-display{
-    width: 130px; 
-    height: 20px;
-  }
-
-  .backarrow {
-    justify-content: space-between;
-  }
-
-  .arrowbtn {
-    position: absolute;
-    /* left: 3%; */
-    top: 50%;
-    margin: 25px 30px;
-    /* transform: translateX(-20%); */
-    font-size: 18px;
     color: #333;
     cursor: pointer;
   }
+  
 
   .amount-titles {
-    font-size: 20px;
+    font-size: 24px;
+    width: 100px;
+    color: #fff;
+    margin: 0 auto;
+    text-align: center;
+    flex-grow: 1;
   }
+  
+ 
+  .amount-display {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #1E1E1E;
+    box-shadow: 0px 0px 22.3px #E335DC, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
+    border-radius: 24px;
+    padding: 10px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+  }
+  
+  .total-amount {
+    font-size: 36px;
+    color: #fff;
+    margin-right: 10px;
+  
+  }
+  
+
+  .Rupeesicon {
+    width: 30px;
+    height: 30px;
+  }
+  
 
   .rupess_section {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
-    gap: 25px;
+    gap: 15px;
-    margin: 10px;
+    margin-top: 20px;
-    margin-top: 90%;
   }
   
-
+ 
   .coin {
     width: 50px;
     height: 50px;
-    padding: 15px;
+    
-
+    background: #E335DC;
+      box-shadow: -10px -10px 12px rgba(50, 50, 51, 0.66), 10px 10px 16px #040404, inset -2px -2px 2px rgba(111, 0, 121, 0.64), inset 2px 2px 2px rgba(102, 0, 98, 0.56);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    /* border: 2px solid #fff; */
+    
+  
   }
- 
+  
+  
+  
+
   .coin-value {
     font-size: 24px;
+    font-weight: bold;
+    color: #fff;
   }
 
-  .Rupeesicon {
-    width: 25px;
-    height: 25px;
-  }
-
-  .total-amount {
-    font-size: 28px;
-  }
-
-  .btn-group{
- 
-    justify-content: space-between;
-     margin-top: 20px;
-     position: relative;
-     display: flex;
-      direction: row;
-      gap: 25px;
-   }
-}
-
-@media (min-width: 1024px) {
-  .amount-container {
-    max-width: 800px;
-    padding: 20px;
-  }
-
-  .coin {
-    width: 100px;
-    height: 100px;
-  }
-
-  .arrowbtn {
-    font-size: 18px;
-    margin: 27px 21px;
-  }
-
-  .coin-value {
-    font-size: 20px;
-  }
- 
-
-  .Rupeesicon {
-    width: 30px;
-    height: 30px;
-    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) {
-  .amount-container {
-    padding: 0px;
-    max-width: 90%;
-  } 
-
-  .backarrow {
-    justify-content: space-between;
-  }
-
-  .arrowbtn {
-    font-size: 18px;
-    margin: 27px 21px;
-  }
-
-  .amount-titles {
-    font-size: 18px;
-  }
-
-  .rupess_section {
-    gap: 20px;
-    margin-top: 80%;
-  }
-
-  .coin {
-    width: 40px;
-    height: 35px;
-  }
-
-  .coin-value {
-    font-size: 20px;
-  }
-
-  .Rupeesicon {
-    width: 25px;
-    height: 25px;
-  }
-
-  .total-amount {
-    font-size: 26px;
-  }
-
-.btn-group{
- 
- justify-content: space-between;
-  margin-top: 5px;
-  position: relative;
-  display: flex;
-   direction: row;
- gap: 25px;
-}
   
-}
+
+  @media (max-width: 600px) {
+    .amount-container {
+      padding: 10px;
+      max-width: 100%;
+    }
+  
+    .backarrow {
+      justify-content: space-between;
+    }
+  
+    .arrowbtn {
+      position: absolute;
+      left: 0;
+      top: 50%;
+      margin: 30px 10px;
+      /* transform: translateX(-20%); */
+      font-size: 24px;
+      color: #333;
+      cursor: pointer;
+    }
+  
+    .amount-titles {
+      font-size: 20px;
+    }
+  
+    .rupess_section {
+      gap: 10px;
+    }
+  
+    .coin {
+      width: 50px;
+      height: 50px;
+      padding: 15px;
+      
+    }
+  
+    .coin-value {
+      font-size: 26px;
+    }
+  
+    .Rupeesicon {
+      width: 20px;
+      height: 20px;
+    }
+  
+    .total-amount {
+      font-size: 28px;
+    }
+  
+    
+  .coin:hover {
+    background-color: #4caf50;
+  }
+  
+  }
+  
+
+  @media (min-width: 1024px) {
+    .amount-container {
+      max-width: 800px;
+      padding: 20px;
+    }
+  
+    .coin {
+      width: 100px;
+      height: 100px;
+    }
+  
+    .coin-value {
+      font-size: 20px;
+    }
+  
+    .Rupeesicon {
+      width: 30px;
+      height: 30px;
+      padding: 10px;
+    }
+  
+    .total-amount {
+      font-size: 40px;
+    }
+  }
+  

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

@@ -1,45 +1,27 @@
-import React, { useState } from "react";
+
+import React 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 location = useLocation();
-  const { entryType } = location.state || {};
-  const [totalAmount, setTotalAmount] = useOutletContext();
 
-  const [isClickable, setIsClickable] = useState(true);
+   const navigate = useNavigate();
-  const [lastAddedAmount, setLastAddedAmount] = useState(0);
+  const location = useLocation(); 
+  const { entryType } = location.state || {}; 
 
-  const handleCoinClick = (coinAmount) => {
-    if (isClickable) {
-    
-      const currentAmount = totalAmount ? parseFloat(totalAmount) : 0;
-      const newAmount = currentAmount + coinAmount;
 
-      setTotalAmount(newAmount);
+  const [totalAmount, setTotalAmount] = useOutletContext(); 
-      setLastAddedAmount(coinAmount); 
-      setIsClickable(false);
-      
 
-      setTimeout(() => {
+  const handleCoinClick = (amount) => {
-        setIsClickable(true);
+    setTotalAmount((prevAmount) => prevAmount + amount); 
-      }, 300);
-    }
   };
 
-  const handleSubtractClick = (amount) => {
+    const handleBackClick = () => {
-    if (totalAmount >= amount) { 
-      setTotalAmount((prevAmount) => prevAmount - amount);
-    }
-  };
-
-  const handleBackClick = () => {
     console.log(entryType);
-    navigate("/", { state: { entryType } });
+    navigate("/expense", { state: { entryType } }); 
   };
 
   return (
@@ -53,49 +35,34 @@ 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 ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(50)}>
+        <div className="coin" onClick={() => handleCoinClick(50)}>
           <div className="coin-value">50</div>
         </div>
 
-        <div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(100)}>
+        <div className="coin" onClick={() => handleCoinClick(100)}>
           <div className="coin-value">100</div>
         </div>
 
-        <div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(200)}>
+        <div className="coin" onClick={() => handleCoinClick(200)}>
           <div className="coin-value">200</div>
         </div>
 
-        <div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(500)}>
+        <div className="coin" onClick={() => handleCoinClick(500)}>
           <div className="coin-value">500</div>
         </div>
 
-        <div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(1000)}>
+        <div className="coin" onClick={() => handleCoinClick(1000)}>
           <div className="coin-value">1000</div>
         </div>
+        
       </section>
-
-      <div className="btn-group">
-        <button
-          className="minus"
-          onClick={() => handleSubtractClick(lastAddedAmount)}
-          disabled={lastAddedAmount === 0}
-        >
-          -
-        </button>
-        <button
-          className="plus"
-          onClick={() => handleCoinClick(lastAddedAmount)}
-          disabled={lastAddedAmount === 0}
-        >
-          +
-        </button>
-      </div>
     </div>
   );
 }

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

@@ -1,28 +1,21 @@
-body {
-  margin: 0;
-  overflow: hidden; 
-}
-
-
 .total-amount-container {
-  display: flex;
+    flex-direction: column;
-  flex-direction: column;
+    position: absolute;
-  position: fixed; 
+    width: 80%;
-  width: 80%;
+    max-width: 500px; 
-  max-width: 900px;
+    height: auto;
-  height: 340px;
+    top: 50%; 
-  top: 32%;
+    left: 50%; 
-  left: 50%;
+    transform: translate(-50%, -50%); 
-  transform: translate(-50%, -50%);
+    color: white;
-  color: white;
+    font-family: 'Montserrat', sans-serif;
-  font-family: 'Montserrat', sans-serif;
+    background: #1e1e1e;
-  background: #1e1e1e;
+    box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404,
-  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);
-    inset 2px 2px 2px rgba(39, 39, 44, 0.56);
+    padding: 20px; 
-  padding: 8px;
+    box-sizing: border-box; 
-  box-sizing: border-box;
+  }
-}
   
   .input-group {
     display: flex; 
@@ -62,7 +55,7 @@ body {
   .button-group {
     display: flex;
     justify-content: space-between;
-    width: 40%;
+    width: 80%;
     margin: 20px auto;
   }
   
@@ -88,9 +81,8 @@ body {
   
   @media (max-width: 768px) {
     .total-amount-container {
-      width: 80%; 
+      width: 90%; 
-      height: 45%;
+      top: 60%; 
-      top: 35%; 
     }
   
     .input-group {
@@ -103,41 +95,22 @@ body {
       margin: 10px 0; 
     }
   
-    
+    .button-group {
+      flex-direction: column; 
+      align-items: center;
+    }
   
     .add-entry-1,
     .add-entry-2 {
-      width: 50%;
+      width: 100%; 
-      margin: 5px 0; 
+      margin: 10px 0; 
-    }
-   
-    .button-group {
-      display: flex;
-      justify-content: space-between;
-      width: 80%;
-      margin: 10px auto;
-      flex-direction: row; 
-      align-items: center;
-      gap: 15px;
-    }
-
-
-  }
-  @media (max-width: 375px) {
-    .total-amount-container {
-      /* padding: 15px;  */
-      top: auto;
-      margin: 0px 0px 0px 0px ;
-      height: auto;
     }
   }
-
+  
   @media (max-width: 480px) {
     .total-amount-container {
       /* padding: 15px;  */
-      top: 30%;
+      margin: 40px 0px ;
-      margin: 0px 0px 0px 0px ;
-      height: auto;
     }
   
     .add-entry-1,

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

@@ -1,14 +1,13 @@
 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, handleManualAmountChange }) {
+function TotalExpenseAmount({ totalAmount, category, setCategory }) {
-  const [amount, setAmount] = useState(totalAmount !== undefined ? totalAmount : 0);
+  const [amount, setAmount] = useState(totalAmount || ''); 
   const location = useLocation();
   const { entryType } = location.state || {};  
   const [entries, setEntries] = useState([]);
   const [categoryError, setCategoryError] = useState('');
-  const [amountError, setAmountError] = useState(''); 
   const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]); 
 
   const navigate = useNavigate(); 
@@ -26,21 +25,23 @@ function TotalExpenseAmount({ totalAmount, category, setCategory, handleManualAm
 
   const handleAddEntry = () => {
     setCategoryError('');
-    setAmountError(''); 
 
+   
     if (amount <= 0) {
-      setAmountError('Amount is required and must be greater than zero'); 
+        alert('Amount is required and must be greater than zero');
-      return null; 
+        return null; 
     }
 
+    
     if (!category) {
-      setCategoryError('Category is required');
+        setCategoryError('Category is required');
-      return null; 
+        return null; 
     }
 
     const now = new Date();
     const formattedDateTime = now.toLocaleString();
 
+
     const newEntry = {
       id: Date.now(),
       amount: parseFloat(amount),  
@@ -48,20 +49,24 @@ function TotalExpenseAmount({ totalAmount, category, setCategory, handleManualAm
       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(''); 
 
@@ -78,76 +83,28 @@ function TotalExpenseAmount({ totalAmount, category, setCategory, handleManualAm
   const handleSaveAndAddEntry = () => {
     const timestamp = handleAddEntry(); 
     if (timestamp) {
-      navigate('/'); 
+      navigate('/expense'); 
     }
   };
 
-  const handleCategoryFocus = () => {
-    navigate('/expenseCategory'); 
-  };
-
-  const handleAmountFocus = () => {
-    navigate('/expenseAmount'); 
-  };
-
-  const handleAmountMouseDown = (e) => {
-    e.preventDefault();
-    handleAmountFocus(); 
-  };
-
-  const handleCategoryMouseDown = (e) => {
-    e.preventDefault(); 
-    handleCategoryFocus(); 
-  };
-
-  const handleAmountDoubleClick = () => {
-    const input = document.getElementById("amount-input");
-    input.focus();
-  };
-
-  const handleCategoryDoubleClick = () => {
-    const input = document.getElementById("category-input");
-    input.focus();
-  };
-
-
-  const handleAmountChange = (e) => {
-    let value = e.target.value;
-
-  
-    if (value.startsWith('0') && value.length > 1) {
-      value = value.slice(1);
-    }
-
-    setAmount(value);
-    handleManualAmountChange(value);
-  };
-
   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={handleAmountChange} 
+            onChange={(e) => setAmount(e.target.value)} 
-            onMouseDown={handleAmountMouseDown} 
-            onDoubleClick={handleAmountDoubleClick} 
             placeholder="Enter Amount"
           />
-          {amountError && <span className="error-message">{amountError}</span>}
         </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>}
@@ -161,4 +118,7 @@ function TotalExpenseAmount({ totalAmount, category, setCategory, handleManualAm
   );
 }
 
+
+
+
 export default TotalExpenseAmount;

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

@@ -1,257 +1,158 @@
 
 .category-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  background-color: #1e1e1e;
-  color: white;
-  width: 100%;
-  padding: 10px;
-}
-
-
-
-.arrow {
-  position: absolute;
-  top: 10px;
-  left: 30px;
-}
-
-.arrow-icon {
-  font-size: 18px;
-
-}
-/*   
-.category-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 20px 0;
-  width: 100%;
-  text-align: center;
-} */
-
-.category-titles {
-  font-size: 20px;
-  margin-right: 4px;
-  color: #fff;
-  margin-bottom: 20px; /* Add 10px space below category titles */
-}
-
-.category-display {
-  margin: 35px 0 10px 0; /* 10px space below the display box */
-  width: 150px;
-  height: 30px;
-  background: #1E1E1E;
-  box-shadow: 0px 0px 22.3px #00D092, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
-  border-radius: 24px;
- 
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10px;
-  border-radius: 8px;
-}
-
-
-.category01 {
-  width: 30px;
-  /* top: 10px; */
-  justify-content: center;
-  align-items: center;
-  margin: 2px;
-  height: 30px;
-}
-
-
-.category-list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  width: 100%;
-  margin-top: 20%;
-}
-
-.cat-item {
-  background-color: #2a2a2a;
-  border-radius: 10px;
-  padding: 10px;
-  margin: 10px;
-  min-width: 120px;
-  text-align: center;
-  font-size: 18px;
-  transition: background-color 0.3s ease;
-  cursor: pointer;
-}
-
-
-.cat-item.selected {
-background-color: #007bff; 
-color: #fff; 
-}
-
-.texts  {
-width: 50%; 
-padding: 10px;
-margin: 20px 0;
-font-size: 16px;
-border-bottom: 1px solid #fafafa;
-outline: none;
-color: #ffffff;
-border-radius: 8px;
-transition: border-color 0.3s ease, background-color 0.3s ease;
-}
-
-.add-category {
-  display: flex;
-  align-items: center;
-  margin-top: 10px;
-}
-
-.texts {
-  flex: 1;
-  padding: 5px;
-  margin-right: 10px;
-}
-
-.add-button {
-  padding: 10px 14px;
-  margin: 15px;
-  background-color: #2a2a2a;
-  color: white;
-  border: none;
-  border-radius: 3px;
-  cursor: pointer;
-}
-
-.add-button:hover {
-  background-color: #2a2a2a;
-}
-
-
-
-
-@media (max-width: 768px) {
-  .category-titles {
-    font-size: 20px; 
-  }
-
-
-
- .arrow{
-  margin: 13px 10px;
- }
-
-  .category01 {
-    width: 35px;
-    margin: 10px;
-    height: 3px;
-  }
-
-  .cat-item {
-    min-width: 100px; 
-    font-size: 16px; 
-  }
-}
-
-@media (max-width: 480px) {
-  .arrow {
-    top: 40px;
-    left: 40px;
-  }
-  .category-display{
-    width: 130px;
-  height: 20px;
-  }
-
-
-  .category-titles {
-    font-size: 15px;
-    color: #fff;
-
-  }
-  .category-list {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
-    justify-content: center;
+    align-items: center;
+    justify-content: flex-start;
+    background-color: #1e1e1e;
+    color: white;
     width: 100%;
-    margin-top: 90%;
-  }
-  .category01 {
-    width: 25px;
-    margin: 5px;
-    height: 25px;
-  }
-
-  .cat-item {
-    min-width: 80px; 
-    font-size: 14px;
     padding: 10px;
-    margin: 8px;
   }
 
-  .category-container {
+  
-    padding: 0px;
-  }
-}
-
-@media (max-width: 375px) {
-  .category-container {
-    padding: 0; 
-
-  }
-
-  .arrow-icon {
-    font-size: 18px;
-    margin: 27px 21px;
-  }
 
   .arrow {
-    top: 30px; 
+    position: absolute;
+    top: 10px;
     left: 30px;
-    
   }
-
+  
-  .category-display {
+  .arrow-icon {
-    width: 120px;
+    font-size: 24px;
-    height: 20px;
+  
-    margin: 30px auto; 
-    font-size: 14px;
   }
-
+/*   
-  .category-list {
+  .category-header {
     display: flex;
-    flex-wrap: wrap;
+    align-items: center;
     justify-content: center;
+    margin: 20px 0;
     width: 100%;
-    margin-top: 75%;
+    text-align: center;
+  } */
+  
+  .category-display {
+   margin: 30px;
+    width: 150px;
+    height: 30px;
+    /* left: calc(50% - 207px / 2 - 0.5px); */
+    top: 90px;
+    background: #1E1E1E;
+    box-shadow: 0px 0px 22.3px #00D092, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
+    border-radius: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    border-radius: 8px;
+  }
+  
+  .category-titles {
+    font-size: 24px;
+    margin-right: 4px;
+  }
+  
+  .category-icon {
+    width: 30px;
+    /* top: 10px; */
+    justify-content: center;
+    align-items: center;
+    /* margin: 2px; */
+    height: 30px;
   }
   
 
-  .category-titles {
+  .category-list {
-    font-size: 14px;
+    display: flex;
-    margin-right: 2px; 
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 100%;
+    margin-top: 20px;
   }
-
+  
-  .category01 {
-    width: 25px;
-    margin: 4px;
-    height: 25px;
-  }
-
   .cat-item {
-    min-width: 50px;
+    background-color: #2a2a2a;
-    font-size: 10px; 
+    border-radius: 10px;
-    padding: 8px; 
+    padding: 15px;
-    margin: 6px;
+    margin: 10px;
-  }
+    min-width: 120px;
-
+    text-align: center;
-    
+    font-size: 18px;
-  .texts {
+    transition: background-color 0.3s ease;
-    width: 50%; 
+    cursor: pointer;
-    font-size: 10px; 
-    padding: 8px;
-    margin: 15px 0; 
   }
+  .cat-item.selected {
+    background-color: #007BFF; 
+    color: white; 
+    border-radius: 5px; 
 }
+
+.cat-item.selected {
+  background-color: #007bff; 
+  color: #fff; 
+}
+
+.texts  {
+  width: 50%; 
+  padding: 10px;
+  margin: 20px 0;
+  font-size: 16px;
+  border-bottom: 1px solid #fafafa;
+  outline: none;
+  color: #ffffff;
+  border-radius: 8px;
+  transition: border-color 0.3s ease, background-color 0.3s ease;
+}
+  
+
+
+
+  @media (max-width: 768px) {
+    .category-titles {
+      font-size: 20px; 
+    }
+  
+   
+
+    .category-icon {
+      width: 35px;
+      margin: 10px;
+      height: 35px;
+    }
+  
+    .cat-item {
+      min-width: 100px; 
+      font-size: 16px; 
+    }
+  }
+  
+  @media (max-width: 480px) {
+    .arrow {
+      top: 40px;
+      left: 40px;
+    }
+  
+    .category-titles {
+      font-size: 18px;
+ 
+    }
+  
+    .category-icon {
+      width: 30px;
+      margin: 7px;
+      height: 30px;
+    }
+  
+    .cat-item {
+      min-width: 80px; 
+      font-size: 14px;
+      padding: 10px;
+      margin: 8px;
+    }
+  
+    .category-container {
+      padding: 0px;
+    }
+  }
+  

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

@@ -8,18 +8,21 @@ import '../ExpenseCategory/ExpenseCategory.css';
 
 
 function ExpenseCategory() {
+  
+
     const navigate = useNavigate();
     const [totalAmount, setTotalAmount, category, setCategory] = useOutletContext(); 
     const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
     const [selectedCategories, setSelectedCategories] = useState([]);
     const [customCategoryCount, setCustomCategoryCount] = useState(0);
-    const [newCategory, setNewCategory] = useState('');
     const location = useLocation(); 
 
+
     const entryType = location.state?.entryType; 
 
     const handleBackClick = () => {
-        navigate("/", { state: { entryType } }); 
+        
+        navigate("/expense", { state: { entryType } }); 
         console.log(entryType);  
     }
 
@@ -35,18 +38,16 @@ function ExpenseCategory() {
         }
     };
 
-    const handleAddCategory = () => {
+    const handleAddCategory = (newCategory) => {
-        if (newCategory.trim() === '') return;
         if (!categories.includes(newCategory)) {
             if (customCategoryCount < 3) {
                 const updatedCategories = [...categories, newCategory];
                 setCategories(updatedCategories);
                 setCustomCategoryCount(customCategoryCount + 1);
                 localStorage.setItem('categories', JSON.stringify(updatedCategories));
-                // alert(`Category "${newCategory}" added!`);
+                alert(`Category "${newCategory}" added!`);
-                setNewCategory(''); 
             } else {
-                // alert('You can only add up to three custom categories!');
+                alert('You can only add up to three custom categories!');
             }
         } else {
             alert('Category already exists!');
@@ -74,9 +75,9 @@ function ExpenseCategory() {
 
             <div className='category-display'>
                 <h3 className="category-titles">Categories</h3>
-                <img src={categoryImage} alt="categoryIcon" className="category01" />
+                <img src={categoryImage} alt="categoryIcon" className="category-icon" />
             </div>
-
+  
             <section className='category-list'>
                 {categories.map((cat, index) => (
                     <div 
@@ -90,23 +91,19 @@ function ExpenseCategory() {
             </section>
 
             {customCategoryCount < 3 && (
-                <div className="add-category">
+                <input className='texts'
-                    <input 
+                    type="text" 
-                        className='texts'
+                    placeholder="Add New Category" 
-                        type="text" 
+                    onKeyDown={(e) => {
-                        placeholder="Add New Category" 
+                        if (e.key === 'Enter') {
-                        value={newCategory}
+                            handleAddCategory(e.target.value);
-                        onChange={(e) => setNewCategory(e.target.value)}
+                            e.target.value = '';
-                    />
+                        }
-                    <button 
+                    }} 
-                        className="add-button" 
+                />
-                        onClick={handleAddCategory}
-                    >
-                        Add
-                    </button>
-                </div>
             )}
         </div>
     );
 }
+
 export default ExpenseCategory;

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

@@ -1,13 +1,12 @@
 
 .expense-container {
-    max-width: 100%;
+    max-width: 800px;
     margin: 0 auto;
     padding: 20px;
    justify-content: center;
     border-radius: 10px;
     /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
     text-align: center;
-
   }
   
   .arrow-container {
@@ -49,8 +48,9 @@
 
   .button-container {
     display: flex;
+    
     justify-content: center;
-    margin-top: 100%;
+    margin-top: 20px;
   }
   .amount-btn{
     width: 37%;
@@ -140,7 +140,7 @@
       padding: 10px;
     }
   
-    .amount-icon, .category{
+    .amount-icon, .category-icon {
       width: 40px;
       height: 40px;
       margin: 2px;
@@ -156,38 +156,5 @@
    .category-btn {
     font-size: 18px;
     }
-    
   }
-  
+  
-  
-/* Styles for screens with a width of 375px */
-@media (max-width: 375px) {
-  .arrow-icon {
-    font-size: 12px;
-  }
-
-  .expense-title {
-    font-size: 18px;
-  }
-
-  .expense-date {
-    font-size: 12px;
-  }
-
-  .button-container {
-    flex-direction: row;
-    align-items: center;
-  }
-
-  .amount-btn, .category-btn {
-    width: 90%;
-    font-size: 14px;
-    padding: 12px;
-  }
-
-  .category{
-    width: 25px;
-    height: 25px;
-    margin-bottom: 5px;
-  }
-}

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

@@ -1,23 +1,23 @@
 
+
 .container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100vh;
+    color: white;
     position: relative;
 }
 
 .back_arrows {
     position: absolute;
-    top: 10px;
+    top: 20px;
-    margin: 35px;
+    left: 20px;
-    left: 10px;;
 }
 
 .arrow-icon {
-    font-size: 18px;
+    font-size: 24px;
-    margin: 9px 0px 0px 0px;
     cursor: pointer;
 }
 
@@ -29,9 +29,9 @@
 }
 
 .success-titles h1 {
-    color: #4CAF50;
+    color: #fff;
     font-size: 30px;
-    margin: 0 0; 
+    margin: 10px 0; 
     text-align: center;
 }
 
@@ -45,39 +45,35 @@
     text-align: center;
     font-size: 24px; 
     color: #4CAF50; 
-    margin: 0px 0;
+    margin: 10px 0;
-    padding: 30px;
 }
-
+  
-
+  .categories {
-.categories {
+    margin-top: 10px; 
-    margin-top: 0px; 
     display: flex;
     justify-content: space-between;
     align-items: center; 
-   
 }
-
+  
-.categories h3 {
+  .categories h3 {
     font-size: 15px; 
     color: #9e9696;
-   
+   /* margin: 0px 0px 0px 0px; */
+   /* padding: 5px; */
 }
-
+  
-.categories p {
+  .categories ul {
     list-style-type: none; 
     padding: 5px;
-    font-size: 12px;
+  
-    border-bottom: 1px solid white; 
+  }
-}
+  
-
+  .categories li {
-
-.categories li {
     font-size: 16px;
     color: #deb1b1; 
     border-bottom: 1px solid #e0e0e0; 
     padding: 8px 0; 
-}
+  }
 
 /* Mobile responsiveness */
 @media (max-width: 768px) {
@@ -88,32 +84,31 @@
     .success-datetime {
         font-size: 16px;
     }
+}
 
-    .total-amount {
+.total-amount {
-        color: #4CAF50;
+    color: #fff;
-        font-size: 12px;
+    font-size: 12px;
-        margin: 0px 0; 
+    margin: 20px 0; 
-    }
+}
 
-    .categories {
+.categories {
-        color: #fff;
+    color: #fff;
-        font-size: 10px;
+    font-size: 10px;
-        margin: 10px 0; 
+    margin: 10px 0; 
-    }
 }
 
 .success-buttons {
     display: flex;
     justify-content: center;
-    gap: 10px;
+    gap: 20px;
-    margin-top: 0px;
+    margin-top: 20px;
 }
 
-.btn-home,
+.btn-home {
-.btn-edit {
     position: relative; 
-    width: 140px;
+    width: 150px;
-    height: 50px;  
+    height: 60px; 
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -124,96 +119,23 @@
     justify-content: center;
     align-items: center;
     margin-right: 10px;
+
 }
+.btn-edit {
+    position: relative; 
+    width: 150px;
+    height: 60px; 
+    color: #fff;
+    justify-content: center;
+    align-items: center;
+    background: #1E1E1E;
+    box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
+    border-radius: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 10px;
 
-@media (min-width: 1024px) {
-    .btn-edit, .btn-home {
-        width: 200px;
-        height: 50px;
-        font-size: 20px;
-    }
-
-    .total-amount {
-        color: #4CAF50;
-        font-size: 12px;
-        margin: 0px 0; 
-    }
-}
-
-/* Screen size 375px */
-@media screen and (max-width: 375px) {
-    .success-titles h1 {
-        font-size: 20px;
-    }
-
-    .success-datetime {
-        font-size: 14px;
-    }
-
-    .total-amount {
-        font-size: 18px;
-        /* padding: 20px; */
-    }
-
-    .categories li {
-        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;
-    }
-
-   
-    
 }
 
 
-
-/* Screen size 687px */
-@media screen and (max-width: 687px) {
-    .success-titles h1 {
-        font-size: 22px;
-    }
-
-    .success-datetime {
-        font-size: 16px;
-    }
-
-    .total-amount {
-        font-size: 20px;
-        padding: 25px;
-    }
-
-    .categories li {
-        font-size: 15px;
-    }
-}
-
-/* Screen size 745px */
-@media screen and (max-width: 745px) {
-    .success-titles h1 {
-        font-size: 24px;
-    }
-
-    .success-datetime {
-        font-size: 16px;
-    }
-
-    .total-amount {
-        font-size: 12px;
-        
-    }
-
-    .categories li {
-        font-size: 16px;
-    }
-}

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

@@ -45,11 +45,9 @@ function ExpenseRecords() {
   }, [entry, lastEntry]);
 
   const handleBackClick = () => {
-    navigate("/expense-totalsuccessfully"); 
+    navigate("/"); 
   };
-  const handleBackHomeClick = () => {
+
-    navigate("/")
-  }
   const handleEditClick = () => {
     const idToEdit = entryId || (lastEntry ? lastEntry.id : null);
 
@@ -87,12 +85,16 @@ function ExpenseRecords() {
         
         <div className="categories">
           <h3>Selected Categories:</h3>
-          <p>{categories.join(',')}</p> 
+          <ul>
+            {categories.map((category, index) => (
+              <li key={index}>{category}</li>
+            ))}
+          </ul>
         </div>
       </div>
       
       <div className="success-buttons">
-        <div className="btn-home" onClick={handleBackHomeClick}>Home</div>
+        <div className="btn-home" onClick={handleBackClick}>Home</div>
         <div className="btn-edit" onClick={handleEditClick}>Edit</div>
       </div>
     </div>

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

@@ -1,3 +1,10 @@
+body {
+    background-color: #1E1E1E;
+    margin: 20px;
+    padding: 0;
+    font-family: Arial, sans-serif;
+}
+
 
 .Payment-container {
     display: flex;
@@ -5,44 +12,44 @@
     justify-content: center;
     align-items: center;
     height: 100vh;
-    /* margin-bottom: 5px; */
-    overflow: hidden;
     position: relative;
-    font-family: 'Montserrat', sans-serif;
 }
 
 .arrow {
-    font-size: 18px;
+    font-size: 24px;
     cursor: pointer;
-    margin: 15px;
-    margin-top: 35px ;
 }
 
+
 .arr {
     position: absolute;
-    top: 0px;
+    top: 20px;
-    left: 0px;
+    left: 20px;
 }
 
-.expense-date {
+
+.income-date {
     color: #fff;
     font-size: 18px; 
     text-align: center; 
-    margin-bottom: 0px; 
+    margin-bottom: 10px; 
 }
 
+
 .payment-title {
     text-align: center;
-    margin-bottom: 30px;
+    margin-bottom: 10px;
 }
 
+
 .payment-title h1 {
     color: #fff;
-    font-size: 30px; 
+    font-size: 30px;
-    margin: 0px 0; 
+    margin: 10px 0; 
     text-align: center;
 }
 
+
 .payment-content {
     display: flex;
     flex-direction: column;
@@ -50,6 +57,7 @@
     justify-content: center;
 }
 
+
 .payment-animation {
     display: flex;
     justify-content: center;
@@ -57,13 +65,15 @@
     margin-bottom: 10px;
 }
 
+
 .payment-message h2 {
     color: #fff;
-    font-size: 24px; 
+    font-size: 24px;
     text-align: center;
     margin-bottom: 20px;
 }
 
+
 .payment-buttons {
     display: flex;
     justify-content: center;
@@ -71,10 +81,11 @@
     margin-top: 20px;
 }
 
-.btn1, .bt_11 {
+
+.btn1 {
     position: relative; 
-    width: 130px;   
+    width: 150px;
-    height: 40px;  
+    height: 60px; 
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -87,92 +98,85 @@
     margin-right: 10px;
 }
 
-/* Small screens (up to 600px) */
+
+.bt_11 {
+    position: relative; 
+    width: 150px;
+    height: 60px; 
+    color: #fff;
+    justify-content: center;
+    align-items: center;
+    background: #1E1E1E;
+    box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
+    border-radius: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 10px;
+}
+
+
+
+
 @media (max-width: 600px) {
     .payment-title h1 {
-        font-size: 16px; 
+        font-size: 24px;
     }
 
-    .expense-date {
+    .income-date {
-        font-size: 12px; 
+        font-size: 16px;
     }
 
     .payment-message h2 {
-        font-size: 14px; 
+        font-size: 20px;
     }
 
     .btn1, .bt_11 {
         width: 120px;
-        height: 40px;
+        height: 50px;
-        font-size: 14px;
+        font-size: 16px;
     }
 
-    .arrow {
-        font-size: 18px;
-        cursor: pointer;
-        position: absolute;
-        top: 8px;
-        margin: 35px;
-        left: 5px;
-    }
-    
     .arr {
-        position: absolute;
+        top: 10px;
-        top: 0px;
+        left: 10px;
-        left: 0px;
     }
 }
 
 
 @media (max-width: 1024px) {
     .payment-title h1 {
-        font-size: 22px;
+        font-size: 28px;
     }
 
-    .expense-date {
+    .income-date {
-        font-size: 14px;
+        font-size: 16px;
     }
 
     .payment-message h2 {
-        font-size: 18px;
+        font-size: 22px;
     }
 
     .btn1, .bt_11 {
         width: 140px;
-        height: 50px;
+        height: 55px;
-        font-size: 16px;
-    }
-
-    .arr {
-        top: 0;
-        left: 0px;
-        margin: 5px;
-    }
-}
-
-@media (max-width: 375px) {
-    .arrow {
         font-size: 18px;
-        cursor: pointer;
     }
-    
+
     .arr {
-        position: absolute;
+        top: 15px;
-        top: 0px;
+        left: 15px;
-        left: 0px;
     }
 }
-/* Large screens (1025px and up) */
+
+
 @media (min-width: 1025px) {
     .btn1, .bt_11 {
-        width: 190px;
+        width: 160px;
-        height: 50px;
+        height: 60px;
         font-size: 18px;
     }
-    .arr {
+
-        top: 0px;
-        left: 0px;
-    }
     .payment-title h1 {
         font-size: 30px;
     }

src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.js

@@ -1,16 +1,14 @@
 import React, { useEffect, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { Player } from "@lottiefiles/react-lottie-player";
 import successAnimation from "../Common/Animation - 1727464749500.json";
-import "../ExpenseSuccessfully/ExpenseSuccessfully.css";
+import "../ExpenseSuccessfully/ExpenseSuccessfully.css"
 
 function ExpenseSuccessfully() {
   const [currentDate, setCurrentDate] = useState(new Date());
   const navigate = useNavigate();
-  const location = useLocation(); 
-  const entryType = location.state?.entryType;
 
   useEffect(() => {
     const timer = setInterval(() => {
@@ -21,32 +19,28 @@ function ExpenseSuccessfully() {
   }, []);
 
   const handleBackClick = () => {
-    const updatedEntry = {
+    navigate("/expense-edit");
-      id: location.state?.id,
-      amount: location.state?.amount,
-      category: location.state?.category,
-      dateTime: location.state?.dateTime,
-    };
-    
-    navigate("/expense-editPage", { state: updatedEntry });
   };
 
   const handleBackToHome = () => {
-    navigate("/", { state: { entryType } });
+    navigate("/");
   };
 
   const handleBackToRecord = () => {
-    navigate("/expense-records", { state: { entryType } });
+    navigate("/expense-records")
-  };
+  }
 
   const options = { hour: "2-digit", minute: "2-digit", hour12: true };
-  const formattedDate = `on ${currentDate.toLocaleDateString()} - ${currentDate.toLocaleTimeString([], options)}`;
+  const formattedDate = `on ${currentDate.toLocaleDateString()} - ${currentDate.toLocaleTimeString(
+    [],
+    options
+  )}`;
 
   return (
     <div className="Payment-container">
       <div className="payment-title">
         <h1>Expense</h1>
-        <p className="expense-date">{formattedDate}</p>
+        <p className="income-date">{formattedDate}</p>
         <div className="arr">
           <FontAwesomeIcon
             icon={faArrowLeft}

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

@@ -18,7 +18,7 @@
   position: relative;
   width: 100%;
   text-align: center; 
-  margin-bottom: 30px;
+  margin-bottom: 50px;
 }
 
 
@@ -27,7 +27,7 @@
   left: 0; 
   top: 50%;
   margin: 30px 10px;
-  transform: translateY(90%);
+  /* transform: translateY(-50%); */
   font-size: 24px;
   color: #333;
   cursor: pointer;
@@ -97,29 +97,6 @@
 }
 
 
-.btn-group{
-  display: flex;
-  position: relative;
-}
-.minus{
-  width: 60px;
-  background-color: #1E1E1E;
-  color: #fff;
-  box-shadow: -8px -8px 12px rgba(39, 39, 44, 0.48),
-  8px 8px 16px rgba(4, 4, 4, 0.8),
-  inset -2px -2px 2px rgba(41, 37, 41, 0.64),
-  inset 2px 2px 2px #181618;
-
-}
-.plus{
-  width: 60px;
-  background-color: #1E1E1E;
-  color: #fff;
-  box-shadow: -8px -8px 12px rgba(39, 39, 44, 0.48),
-  8px 8px 16px rgba(4, 4, 4, 0.8),
-  inset -2px -2px 2px rgba(41, 37, 41, 0.64),
-  inset 2px 2px 2px #181618;
-}
 
 
 .coin-value {

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

@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
 import { useNavigate, useLocation , useOutletContext} from "react-router-dom"; 
@@ -7,39 +7,18 @@ import "../Amount/AmountPage.css";
 
 function AmountPage() {
   const navigate = useNavigate();
-  const location = useLocation();
+  const location = useLocation(); 
-  const { entryType } = location.state || {};
+  const { entryType } = location.state || {}; 
-  const [totalAmount, setTotalAmount] = useOutletContext();
 
-  const [isClickable, setIsClickable] = useState(true);
+  const [totalAmount, setTotalAmount] = useOutletContext(); 
-  const [lastAddedAmount, setLastAddedAmount] = useState(0);
 
-  const handleCoinClick = (coinAmount) => {
+  const handleCoinClick = (amount) => {
-    if (isClickable) {
+    setTotalAmount((prevAmount) => prevAmount + amount);
-    
-      const currentAmount = totalAmount ? parseFloat(totalAmount) : 0;
-      const newAmount = currentAmount + coinAmount;
-
-      setTotalAmount(newAmount);
-      setLastAddedAmount(coinAmount); 
-      setIsClickable(false);
-      
-
-      setTimeout(() => {
-        setIsClickable(true);
-      }, 300);
-    }
-  };
-
-  const handleSubtractClick = (amount) => {
-    if (totalAmount >= amount) { 
-      setTotalAmount((prevAmount) => prevAmount - amount);
-    }
   };
 
   const handleBackClick = () => {
     console.log(entryType);
-    navigate("/", { state: { entryType } });
+    navigate("/income", { state: { entryType } }); 
   };
 
   return (
@@ -54,49 +33,29 @@ function AmountPage() {
       </div>
 
       <div className="amount-display">
-        <h3 className="amount-titles">Amount</h3>
+        <h3 className="amount-titles">Amount</h3> 
         <img src={rupeeIcon} alt="Rupee Icon" className="Rupeesicon" />
       </div>
 
       <section className="rupess_section">
-        <div className={`coin ${!isClickable ? "disabled" : ""}`} onClick={() => handleCoinClick(50)}>
+        <div className="coin" 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
-          className="minus"
-          onClick={() => handleSubtractClick(lastAddedAmount)}
-          disabled={lastAddedAmount === 0}
-        >
-          -
-        </button>
-        <button
-          className="plus"
-          onClick={() => handleCoinClick(lastAddedAmount)}
-          disabled={lastAddedAmount === 0}
-        >
-          +
-        </button>
-      </div>
     </div>
   );
 }
+
 export default AmountPage;

src/components/pages/Income/Amount/EntriesList.css

@@ -1,9 +1,10 @@
+
 .entries-list-container {
   background: #1e1e1e;
   box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66),
-    8px 8px 16px #040404,
+              8px 8px 16px #040404,
-    inset -2px -2px 2px rgba(4, 4, 4, 0.64),
+              inset -2px -2px 2px rgba(4, 4, 4, 0.64),
-    inset 2px 2px 2px rgba(39, 39, 44, 0.56);
+              inset 2px 2px 2px rgba(39, 39, 44, 0.56);
   border-radius: 24px;
   padding: 30px;
   max-width: 1000px;
@@ -19,7 +20,7 @@
 
 
 .entry-item {
-
+  
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -48,104 +49,14 @@
   /* background-color: #333; */
   /* border: 1px solid #ddd; */
   border-bottom: 1px solid #ddd;
-  color: #ffffff;
+  color: #fff;
   padding: 5px;
   border-radius: 5px;
   margin-right: 10px;
   flex: 1;
 }
 
-.entries-list-container {
+/* Entry icons container */
-  margin: 20px;
-}
-
-.entry-item {
-  display: flex;
-  align-items: center;
-  margin: 10px 0;
-}
-
-.entry-input {
-  margin-right: 10px;
-  padding: 5px;
-}
-
-.custom-dropdown {
-  position: relative;
-  display: inline-block;
-  margin-right: 10px;
-}
-
-.dropdown-button {
-  background-color: #f1f1f1;
-  color: #333;
-  padding: 1px;
-  font-size: 14px;
-  border: 1px solid #ccc;
-  cursor: pointer;
-  border-radius: 4px;
-}
-
-.dropdown-content {
-  display: none;
-  position: absolute;
-  background-color: #1e1e1e;
-  font-size: 14px;
-  min-width: 10px;
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-  z-index: 1;
-  margin-top: 1px;
-  border-radius: 4px;
-  max-height: 150px;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: #888 #333;
-}
-
-
-.dropdown-content::-webkit-scrollbar {
-  width: 8px;
-}
-
-.dropdown-content::-webkit-scrollbar-track {
-  background: #333;
-}
-
-.dropdown-content::-webkit-scrollbar-thumb {
-  background-color: #888;
-  border-radius: 10px;
-  border: 1px solid #333;
-}
-
-.custom-dropdown:hover .dropdown-content {
-  display: block;
-}
-
-
-.custom-dropdown:hover .dropdown-content {
-  display: block;
-}
-
-.dropdown-item {
-  padding: 8px 2px;
-  cursor: pointer;
-}
-
-.dropdown-item input {
-  margin-right: 8px;
-}
-
-
-
-
-.dropdown-item.selected {
-  background-color: #bbb3b33d;
-  color: #ffffff;
-}
-
-
-
-
 .entry-icons {
   display: flex;
   align-items: center;
@@ -178,18 +89,4 @@
   color: #ff4d4d;
 }
 
-@media (max-width: 480px) {
-  .dropdown-item.selected {
-    background-color: #bbb3b33d;
-    color: #ffffff;
-  }
-}
-
-@media (max-width: 768px) {
-  .dropdown-item.selected {
-    background-color: #bbb3b33d;
-    color: #ffffff;
-  }
-}
-
 

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

@@ -10,20 +10,13 @@ function EntriesList() {
   const [entries, setEntries] = useState([]);
   const [editingEntryId, setEditingEntryId] = useState(null);
   const [editedAmount, setEditedAmount] = useState("");
-  const [selectedCategory, setSelectedCategory] = useState([]);
+  const [editedCategory, setEditedCategory] = useState("");
   const [repeatEntry, setRepeatEntry] = useState(null);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  
-  const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
 
   useEffect(() => {
     const storedEntries = JSON.parse(localStorage.getItem("entries")) || [];
     setEntries(storedEntries.slice(-5));
-
-    const storedCategories = JSON.parse(localStorage.getItem("categories")) || [];
-    const uniqueCategories = [...new Set([...categories, ...storedCategories])];
-    setCategories(uniqueCategories); 
   }, []);
 
   const handleRedoClick = (entry) => {
@@ -34,20 +27,12 @@ function EntriesList() {
   const handleEditClick = (entry) => {
     setEditingEntryId(entry.id);
     setEditedAmount(entry.amount);
-
+    setEditedCategory(entry.category);
-    // Ensure selectedCategory is always an array
-    if (Array.isArray(entry.category)) {
-      setSelectedCategory(entry.category);  
-    } else if (typeof entry.category === "string") {
-      setSelectedCategory([entry.category]);
-    } else {
-      setSelectedCategory([]);  
-    }
   };
 
   const handleSaveClick = (entry) => {
     const updatedEntries = entries.map((e) =>
-      e.id === entry.id ? { ...e, amount: editedAmount, category: selectedCategory } : e
+      e.id === entry.id ? { ...e, amount: editedAmount, category: editedCategory } : e
     );
 
     setEntries(updatedEntries);
@@ -65,14 +50,15 @@ function EntriesList() {
       const newEntry = {
         id: new Date().getTime(),
         amount: repeatEntry.amount,
-        category: repeatEntry.category || [],
+        category: repeatEntry.category,
-        type: repeatEntry.type, 
+        type: repeatEntry.type, // Ensure type is included
       };
 
       const updatedEntries = [...entries, newEntry];
       setEntries(updatedEntries);
       localStorage.setItem("entries", JSON.stringify(updatedEntries));
 
+      // Navigate based on entry type
       if (repeatEntry.type === "income") {
         navigate("/totalsuccessfully", { state: { entryId: newEntry.id } });
       } else {
@@ -84,23 +70,6 @@ function EntriesList() {
     setRepeatEntry(null);
   };
 
-  const handleCategoryChange = (category) => {
-    setSelectedCategory((prevCategories) => {
-      if (!Array.isArray(prevCategories)) return [category];
-
-      if (prevCategories.includes(category)) {
-        return prevCategories.filter((cat) => cat !== category);
-      } else {
-        return [...prevCategories, category];
-      }
-    });
-    setIsDropdownOpen(false);
-  };
-
-  const toggleDropdown = () => {
-    setIsDropdownOpen((prev) => !prev);
-  };
-
   return (
     <div className="entries-list-container">
       <h4>Previous Last Five Transactions:</h4>
@@ -118,24 +87,12 @@ function EntriesList() {
                   onChange={(e) => setEditedAmount(e.target.value)}
                   className="entry-input"
                 />
-                <div className="custom-dropdown">
+                <input
-                  <button className="dropdown-button" onClick={toggleDropdown}>
+                  type="text"
-                    {selectedCategory.length > 0 ? selectedCategory.join(', ') : "Select Category"}
+                  value={editedCategory}
-                  </button>
+                  onChange={(e) => setEditedCategory(e.target.value)}
-                  {isDropdownOpen && ( 
+                  className="entry-input"
-                    <div className="dropdown-content">
+                />
-                      {categories.map((cat, idx) => (
-                        <div
-                          key={idx}
-                          className={`dropdown-item ${selectedCategory.includes(cat) ? 'selected' : ''}`} 
-                          onClick={() => handleCategoryChange(cat)}
-                        >
-                          {cat}
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </div>
                 <FontAwesomeIcon
                   icon={faSave}
                   className="entry-save-icon"
@@ -150,9 +107,7 @@ function EntriesList() {
             ) : (
               <>
                 <span className="entry-amount">₹{entry.amount}</span>
-                <span className="entry-category">
+                <span className="entry-category">{entry.category}</span>
-                  {Array.isArray(entry.category) ? entry.category.join(', ') : entry.category || "No Category"} 
-                </span>
                 <div className="entry-icons">
                   <FontAwesomeIcon
                     icon={faRedoAlt}

src/components/pages/Income/Amount/TotalAmount.css

@@ -1,299 +1,121 @@
-.amount-container {
+.total-amount-container {
-  display: flex;
   flex-direction: column;
-  align-items: center;
+  position: absolute;
+  width: 80%;
+  max-width: 500px; 
+  height: auto;
+  top: 50%; 
+  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(39, 39, 44, 0.56);
+  padding: 20px; 
+  box-sizing: border-box; 
+}
+
+.input-group {
+  display: flex; 
+  flex-wrap: wrap; 
   justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+  width: 100%;
+}
+
+.amount-input,
+.category-input {
+  flex: 1 1 30%; 
+  margin: 10px; 
+  color: white;
+  min-width: 200px; 
+}
+
+label {
+  margin-bottom: 5px;
+}
+
+input {
   padding: 10px;
-  margin: 0 auto;
-  max-width: 90vw; 
   background-color: #1e1e1e;
-  border-radius: 10px;
+  border: none;
-  text-align: center;
+  border-bottom: 1px solid #fafafa;
+  outline: none;
+  color: #ffffff;
+  width: 90%; 
 }
 
-.backarrow {
+input:focus {
-  /* position: absolute; */
+  border-bottom: 1px solid #0056b3;
-  width: 100%;
-
 }
 
-  .arrowbtn {
+.button-group {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    margin: 20px 10px;
-    font-size: 4vw;
-    color: #333;
-    cursor: pointer;
-  }
-
-
-
-.amount-titles {
-  font-size: 24px;
-  width: 100%;
-  color: #fff;
-  margin: 0 auto;
-  text-align: center;
-  flex-grow: 1;
-}
-
-
-.amount-display {
   display: flex;
-    width: 150px; 
+  justify-content: space-between;
-    height: 30px;
+  width: 80%;
-  align-items: center;
+  margin: 20px auto;
-  justify-content: center;
-  background: #1E1E1E;
-  box-shadow: 0px 0px 22.3px #E335DC, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
-  border-radius: 24px;
-  padding: 10px;
-  border-radius: 8px;
-  /* margin: 10px; */
-  margin-bottom: 20px;
 }
 
-.total-amount {
+.add-entry-1,
-  font-size: 36px;
+.add-entry-2 {
-  color: #fff;
+  width: 150px;
-  margin-right: 10px;
-
-}
-
-.Rupeesicon {
-  width: 30px;
-  height: 30px;
-}
-
-.rupess_section {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 15px;
-  margin: 10px;
-  margin-top: 50%;
-}
-
-
-.coin {
-  width: 50px;
   height: 50px;
-  background: #E335DC;
+  color: #fff;
-  box-shadow: -10px -10px 12px rgba(50, 50, 51, 0.66), 10px 10px 16px #040404, inset -2px -2px 2px rgba(111, 0, 121, 0.64), inset 2px 2px 2px rgba(102, 0, 98, 0.56);
+  background: #1e1e1e;
-  border-radius: 50%;
+  box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66),
+    8px 8px 16px #040404,
+    inset -2px -2px 2px rgba(4, 4, 4, 0.64),
+    inset 2px 2px 2px rgba(39, 39, 44, 0.56);
+  border-radius: 24px;
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   cursor: pointer;
-  transition: background-color 0.3s ease;
+}
-  /* border: 2px solid #fff; */
+.error-message{
-
+  color: red;
-
 }
 
-.coin-value {
+@media (max-width: 768px) {
-  font-size: 24px;
+  .total-amount-container {
-  font-weight: bold;
+    width: 90%; 
-  color: #fff;
+    top: 60%; 
-}
+  }
-.btn-group{
-  display: flex;
-  /* margin-top: 5px; */
-  position: relative;
-}
-.minus{
-  width: 60px;
-  background-color: #1E1E1E;
-  color: #fff;
-  margin-top: 5px;
-  box-shadow: -8px -8px 12px rgba(39, 39, 44, 0.48),
-  8px 8px 16px rgba(4, 4, 4, 0.8),
-  inset -2px -2px 2px rgba(41, 37, 41, 0.64),
-  inset 2px 2px 2px #181618;
 
-}
+  .input-group {
-.plus{
+    flex-direction: column; 
-  width: 60px;
+  }
-  margin-top: 5px;
+
-  background-color: #1E1E1E;
+  .amount-input,
-  color: #fff;
+  .category-input {
-  box-shadow: -8px -8px 12px rgba(39, 39, 44, 0.48),
+    width: 100%; 
-  8px 8px 16px rgba(4, 4, 4, 0.8),
+    margin: 10px 0; 
-  inset -2px -2px 2px rgba(41, 37, 41, 0.64),
+  }
-  inset 2px 2px 2px #181618;
+
+  .button-group {
+    flex-direction: column; 
+    align-items: center;
+  }
+
+  .add-entry-1,
+  .add-entry-2 {
+    width: 100%; 
+    margin: 10px 0; 
+  }
 }
 
-.coin.selected {
+@media (max-width: 480px) {
-  background: #4caf50; 
+  .total-amount-container {
-}
+    /* padding: 15px;  */
-@media (max-width: 600px) {
+    margin: 40px 0px ;
-  .amount-container {
+  }
-    padding: 10px;
+
-    max-width: 90%;
+  .add-entry-1,
-  }
+  .add-entry-2 {
-
+    font-size: 14px; 
-  .amount-display{
+    height: 40px;
-    width: 130px; 
+  }
-    height: 20px;
-  }
-
-  .backarrow {
-    justify-content: space-between;
-  }
-
-  .arrowbtn {
-    position: absolute;
-    /* left: 3%; */
-    top: 50%;
-    margin: 25px 30px;
-    /* transform: translateX(-20%); */
-    font-size: 18px;
-    color: #333;
-    cursor: pointer;
-  }
-
-  .amount-titles {
-    font-size: 20px;
-  }
-
-  .rupess_section {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 25px;
-    margin: 10px;
-    margin-top: 90%;
-  }
-  
-
-  .coin {
-    width: 50px;
-    height: 50px;
-    padding: 15px;
-
-  }
- 
-  .coin-value {
-    font-size: 24px;
-  }
-
-  .Rupeesicon {
-    width: 25px;
-    height: 25px;
-  }
-
-  .total-amount {
-    font-size: 28px;
-  }
-
- 
-  
-
-  .btn-group{
- 
-    justify-content: space-between;
-     margin-top: 20px;
-     position: relative;
-     display: flex;
-      direction: row;
-    gap: 25px;
-   }
-}
-
-@media (min-width: 1024px) {
-  .amount-container {
-    max-width: 800px;
-    padding: 20px;
-  }
-
-  .coin {
-    width: 100px;
-    height: 100px;
-  }
-
-  .arrowbtn {
-    font-size: 18px;
-    margin: 27px 21px;
-  }
-
-  .coin-value {
-    font-size: 20px;
-  }
- 
-
-  .Rupeesicon {
-    width: 30px;
-    height: 30px;
-    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) {
-  .amount-container {
-    padding: 0px;
-    max-width: 90%;
-  } 
-
-  .backarrow {
-    justify-content: space-between;
-  }
-
-  .arrowbtn {
-    font-size: 18px;
-    margin: 27px 21px;
-  }
-
-  .amount-titles {
-    font-size: 18px;
-  }
-
-  .rupess_section {
-    gap: 20px;
-    margin-top: 80%;
-  }
-
-  .coin {
-    width: 40px;
-    height: 35px;
-  }
-
-  .coin-value {
-    font-size: 20px;
-  }
-
-  .Rupeesicon {
-    width: 25px;
-    height: 25px;
-  }
-
-  .total-amount {
-    font-size: 26px;
-  }
-
-.btn-group{
- 
- justify-content: space-between;
-  margin-top: 5px;
-  position: relative;
-  display: flex;
-   direction: row;
- gap: 25px;
-}
-  
 }

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

@@ -2,13 +2,12 @@ import React, { useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom'; 
 import './TotalAmount.css'; 
 
-function TotalAmount({ totalAmount, category, setCategory , handleManualAmountChange}) {
+function TotalAmount({ totalAmount, category, setCategory }) {
-  const [amount, setAmount] = useState(totalAmount !== undefined ? totalAmount : 0);
+  const [amount, setAmount] = useState(totalAmount || ''); 
   const location = useLocation();
-  const { entryType } = location.state || {};  
+  const { entryType } = location.state || {}; 
   const [entries, setEntries] = useState([]);
   const [categoryError, setCategoryError] = useState('');
-  const [amountError, setAmountError] = useState(''); 
   const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]); 
 
   const navigate = useNavigate(); 
@@ -26,21 +25,23 @@ function TotalAmount({ totalAmount, category, setCategory , handleManualAmountCh
 
   const handleAddEntry = () => {
     setCategoryError('');
-    setAmountError(''); 
 
+    
     if (amount <= 0) {
-      setAmountError('Amount is required and must be greater than zero'); 
+        alert('Amount is required and must be greater than zero');
-      return null; 
+        return null; 
     }
 
+ 
     if (!category) {
-      setCategoryError('Category is required');
+        setCategoryError('Category is required');
-      return null; 
+        return null; 
     }
 
     const now = new Date();
     const formattedDateTime = now.toLocaleString();
 
+    
     const newEntry = {
       id: Date.now(),
       amount: parseFloat(amount),  
@@ -48,20 +49,23 @@ function TotalAmount({ totalAmount, category, setCategory , handleManualAmountCh
       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(''); 
 
@@ -78,76 +82,28 @@ function TotalAmount({ totalAmount, category, setCategory , handleManualAmountCh
   const handleSaveAndAddEntry = () => {
     const timestamp = handleAddEntry(); 
     if (timestamp) {
-      navigate('/'); 
+      navigate('/income'); 
     }
   };
 
-  const handleCategoryFocus = () => {
-    navigate('/category'); 
-  };
-
-  const handleAmountFocus = () => {
-    navigate('/amount'); 
-  };
-
-  const handleAmountMouseDown = (e) => {
-    e.preventDefault();
-    handleAmountFocus(); 
-  };
-
-  const handleCategoryMouseDown = (e) => {
-    e.preventDefault(); 
-    handleCategoryFocus(); 
-  };
-
-  const handleAmountDoubleClick = () => {
-    const input = document.getElementById("amount-input");
-    input.focus();
-  };
-
-  const handleCategoryDoubleClick = () => {
-    const input = document.getElementById("category-input");
-    input.focus();
-  };
-
-
-  const handleAmountChange = (e) => {
-    let value = e.target.value;
-
-  
-    if (value.startsWith('0') && value.length > 1) {
-      value = value.slice(1);
-    }
-
-    setAmount(value);
-    handleManualAmountChange(value);
-  };
-
   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={handleAmountChange} 
+            onChange={(e) => setAmount(e.target.value)} 
-            onMouseDown={handleAmountMouseDown} 
-            onDoubleClick={handleAmountDoubleClick} 
             placeholder="Enter Amount"
           />
-          {amountError && <span className="error-message">{amountError}</span>}
         </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.css

@@ -1,233 +1,166 @@
 
 .category-container {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  align-items: center;
+    align-items: center;
-  justify-content: flex-start;
+    justify-content: flex-start;
-  background-color: #1e1e1e;
+    background-color: #1e1e1e;
-  color: white;
+    color: white;
-  width: 100%;
+    width: 100%;
+      font-family: 'Montserrat', sans-serif;
+    padding: 10px;
+  }
+
   
-  padding: 10px;
-}
 
-
+  .arrow {
-
+    position: absolute;
-.arrow {
+    top: 10px;
-  position: absolute;
+    left: 30px;
-  top: 10px;
+  }
-  left: 30px;
+  
-}
+  .arrow-icon {
-
+    font-size: 24px;
-.arrow-icon {
+    right: 85px;
-  font-size: 24px;
+    bottom: 40px;
-
+  
-}
+  }
 /*   
-.category-header {
+  .category-header {
-  display: flex;
+    display: flex;
-  align-items: center;
+    align-items: center;
-  justify-content: center;
+    justify-content: center;
-  margin: 20px 0;
+    margin: 20px 0;
-  width: 100%;
+    width: 100%;
-  text-align: center;
+    text-align: center;
-} */
+  } */
+  
+  .category-display {
+   margin: 40px;
+    width: 10px;
+    height: 30px;
+    /* left: calc(50% - 207px / 2 - 0.5px); */
+    top: 90px;
+    background: #1E1E1E;
+    box-shadow: 0px 0px 22.3px #00D092, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
+    border-radius: 24px;
+    
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    border-radius: 8px;
+  }
+  
+  .category-titles {
+    font-size: 24px;
+    color: #fff;
+    margin-right: 4px;
+  }
+  
+  .category-icon {
+    width: 30px;
+    /* top: 10px; */
+    justify-content: center;
+    align-items: center;
+    /* margin: 2px; */
+    height: 30px;
+  }
+  
 
-.category-titles {
+  .category-list {
-  font-size: 20px;
+    display: flex;
-  margin-right: 4px;
+    flex-wrap: wrap;
-  color: #fff;
+    justify-content: center;
-  margin-bottom: 20px; /* Add 10px space below category titles */
+    width: 100%;
-}
+    margin-top: 20px;
-
+  }
-.category-display {
+  
-  margin: 35px 0 10px 0; /* 10px space below the display box */
+  .cat-item {
-  width: 150px;
+    background-color: #2a2a2a;
-  height: 30px;
+    border-radius: 10px;
-  background: #1E1E1E;
+    padding: 15px;
-  box-shadow: 0px 0px 22.3px #00D092, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
+    margin: 10px;
-  border-radius: 24px;
+    min-width: 120px;
- 
+    text-align: center;
-  display: flex;
+    font-size: 18px;
-  align-items: center;
+    transition: background-color 0.3s ease;
-  justify-content: center;
+    cursor: pointer;
-  padding: 10px;
+  }
-  border-radius: 8px;
+  .cat-item.selected {
-}
+    background-color: #007BFF;
-
+    color: white;
-
+    border-radius: 5px; 
-.category-icon {
-  width: 30px;
-  /* top: 10px; */
-  justify-content: center;
-  align-items: center;
-  margin: 2px;
-  height: 30px;
-}
-
-
-.category-list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  width: 100%;
-  margin-top: 0px;
-}
-
-.cat-item {
-  background-color: #2a2a2a;
-  border-radius: 10px;
-  padding: 10px;
-  margin: 10px;
-  min-width: 120px;
-  text-align: center;
-  font-size: 18px;
-  transition: background-color 0.3s ease;
-  cursor: pointer;
-}
-.cat-item.selected {
-  background-color: #007BFF; 
-  color: white; 
-  border-radius: 5px; 
 }
 
 .cat-item.selected {
-background-color: #007bff; 
+  background-color: #007bff; 
-color: #fff; 
+  color: #fff; 
 }
 
 .texts  {
-width: 50%; 
+  width: 50%; 
-padding: 10px;
+  padding: 10px;
-margin: 20px 0;
+  margin: 20px 0;
-font-size: 16px;
+  font-size: 16px;
-border-bottom: 1px solid #fafafa;
+  border-bottom: 1px solid #fafafa;
-outline: none;
+  outline: none;
-color: #ffffff;
+  color: #ffffff;
-border-radius: 8px;
+  border-radius: 8px;
-transition: border-color 0.3s ease, background-color 0.3s ease;
+  transition: border-color 0.3s ease, background-color 0.3s ease;
-}
-
-.add-category {
-  display: flex;
-  align-items: center;
-  margin-top: 10px;
-}
-
-.texts {
-  flex: 1;
-  padding: 5px;
-  margin-right: 10px;
-}
-
-.add-button {
-  padding: 10px 14px;
-  margin: 15px;
-  background-color: #2a2a2a;
-  color: white;
-  border: none;
-  border-radius: 3px;
-  cursor: pointer;
-}
-
-.add-button:hover {
-  background-color: #2a2a2a;
 }
+  
 
 
-@media (max-width: 768px) {
+  
-  .category-titles {
+  /* Mobile responsiveness */
-    font-size: 20px; 
+  @media (max-width: 768px) {
+    .category-titles {
+      font-size: 20px;
+    }
+  
+    .category-container {
+      margin: 10px;
+    }
+
+    .category-icon {
+      width: 35px;
+      margin: 10px;
+      height: 35px;
+    }
+  
+    .cat-item {
+      min-width: 100px;
+      font-size: 16px; 
+    }
   }
-
+  
-  .category01 {
+  @media (max-width: 480px) {
-    width: 28px; 
+    .arrow {
-    height: 28px;
+      top: 30px;
-    margin: 5px;
+      left: 10px;
+    }
+  
+    .category-titles {
+      font-size: 18px;
+ 
+    }
+  
+    .category-icon {
+      width: 30px;
+      margin: 7px;
+      height: 30px;
+    }
+  
+    .cat-item {
+      min-width: 80px; 
+      font-size: 14px;
+      padding: 10px;
+      margin: 8px;
+    }
+  
+    .category-container {
+      padding: 0px;
+    }
   }
-
+  
-  .category-icon {
-    width: 35px;
-    margin: 10px;
-    height: 3px;
-  }
-
-  .cat-item {
-    min-width: 100px; 
-    font-size: 16px; 
-  }
-}
-
-@media (max-width: 480px) {
-  .arrow {
-    top: 40px;
-    left: 40px;
-  }
-
-  .category-titles {
-    font-size: 18px;
-    color: #fff;
-
-  }
-
-  .category-icon {
-    width: 30px;
-    margin: 7px;
-    height: 30px;
-  }
-
-  .cat-item {
-    min-width: 80px; 
-    font-size: 14px;
-    padding: 10px;
-    margin: 8px;
-  }
-
-  .category-container {
-    padding: 0px;
-  }
-}
-
-@media (max-width: 375px) {
-  .category-container {
-    
-    padding: 0
-  }
-
-  .arrow {
-    top: 30px; 
-    left: 20px;
-  }
-
-  .category-display {
-    width: 120px; 
-    height: 25px;
-    margin: 15px auto; 
-    font-size: 14px; 
-  }
-
-  .category-titles {
-    font-size: 16px; 
-    margin-right: 2px; 
-  }
-
-  .category-icon {
-    width: 25px; 
-    height: 25px;
-    margin: 5px;
-  }
-
-  .cat-item {
-    min-width: 70px;
-    font-size: 12px; 
-    padding: 8px; 
-    margin: 6px;
-  }
-
-  .texts {
-    width: 80%; 
-    font-size: 14px; 
-    padding: 8px;
-    margin: 15px 0; 
-  }
-}

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

@@ -11,13 +11,14 @@ function Category() {
     const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
     const [selectedCategories, setSelectedCategories] = useState([]);
     const [customCategoryCount, setCustomCategoryCount] = useState(0);
-    const [newCategory, setNewCategory] = useState('');
     const location = useLocation(); 
 
+
     const entryType = location.state?.entryType; 
 
     const handleBackClick = () => {
-        navigate("/", { state: { entryType } }); 
+        
+        navigate("/income", { state: { entryType } }); 
         console.log(entryType);  
     }
 
@@ -33,18 +34,16 @@ function Category() {
         }
     };
 
-    const handleAddCategory = () => {
+    const handleAddCategory = (newCategory) => {
-        if (newCategory.trim() === '') return;
         if (!categories.includes(newCategory)) {
             if (customCategoryCount < 3) {
                 const updatedCategories = [...categories, newCategory];
                 setCategories(updatedCategories);
                 setCustomCategoryCount(customCategoryCount + 1);
                 localStorage.setItem('categories', JSON.stringify(updatedCategories));
-                // alert(`Category "${newCategory}" added!`);
+                alert(`Category "${newCategory}" added!`);
-                setNewCategory(''); // Clear input field after adding
             } else {
-                // alert('You can only add up to three custom categories!');
+                alert('You can only add up to three custom categories!');
             }
         } else {
             alert('Category already exists!');
@@ -72,9 +71,9 @@ function Category() {
 
             <div className='category-display'>
                 <h3 className="category-titles">Categories</h3>
-                <img src={categoryImage} alt="categoryIcon" className="category01" />
+                <img src={categoryImage} alt="categoryIcon" className="category-icon" />
             </div>
-
+  
             <section className='category-list'>
                 {categories.map((cat, index) => (
                     <div 
@@ -87,23 +86,17 @@ function Category() {
                 ))}
             </section>
 
-            {/* Input and button for adding new category */}
             {customCategoryCount < 3 && (
-                <div className="add-category">
+                <input className='texts'
-                    <input 
+                    type="text" 
-                        className='texts'
+                    placeholder="Add New Category" 
-                        type="text" 
+                    onKeyDown={(e) => {
-                        placeholder="Add New Category" 
+                        if (e.key === 'Enter') {
-                        value={newCategory}
+                            handleAddCategory(e.target.value);
-                        onChange={(e) => setNewCategory(e.target.value)}
+                            e.target.value = '';
-                    />
+                        }
-                    <button 
+                    }} 
-                        className="add-button" 
+                />
-                        onClick={handleAddCategory}
-                    >
-                        Add
-                    </button>
-                </div>
             )}
         </div>
     );

src/components/pages/Income/Common/IncomeEdit.css

@@ -1,3 +1,5 @@
+
+
 .incomeedit-containers {
     display: flex;
     flex-direction: column;
@@ -10,8 +12,8 @@
 
 .backIcon {
     position: absolute;
-    top: 0px;
+    top: 20px;
-    left: 0px;
+    left: 20px;
 }
 
 .arrow-icon {
@@ -20,67 +22,62 @@
 }
 
 .edit-content {
-
+  
-    padding: 10px;
+    padding: 20px;
-    margin-bottom: 30px;
     border-radius: 8px;
     /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); */
-    width: 100%;
+    width: 100%; 
-    max-width: 400px;
+    max-width: 400px; 
 }
 
 .edit-titles h1 {
     color: #fff;
-    margin-bottom: 30px;
     font-size: 30px;
-    margin: 0px 0;
+    margin: 0px 0; 
     text-align: center;
 }
 
 .edit-datetime {
     color: #fff;
-    margin-bottom: 30px;
+    font-size: 18px; 
-    font-size: 18px;
     text-align: center;
-    margin-bottom: 10px;
+    margin-bottom: 10px; 
 }
 
 .edit-fields {
     color: #fff;
-    margin-bottom: 15px;
+    margin-bottom: 15px; 
     width: 93%;
 }
 
 .edit-fields label {
     display: block;
-    margin-bottom: 9px;
+    margin-bottom: 9px; 
-    
 }
 
 .edit-fields input {
-    width: 100%;
+    width: 100%; 
-    padding: 10px;
+    padding: 10px; 
-    /* border: 1px solid #555; */
+    border: 1px solid #555; 
-    border-radius: 4px;
+    border-radius: 4px; 
-    /* background-color: #3A3A3A; */
+    background-color: #3A3A3A;
-    color: #fff;
+    color: #fff; 
-    font-size: 16px;
+    font-size: 16px; 
 }
 
-
+/* Button styling */
 .edit-buttons {
     display: flex;
-    justify-content: center;
+    justify-content: center; 
     margin-top: 30px;
-    gap: 5px;
+    width: 100%; 
-    width: 100%;
 }
 
 .edit-btn {
-
+    /* item */
-    position: relative;
+    position: relative; 
-    width: 130px;
+    width: 150px;
-    height: 50px;
+    height: 60px; 
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -94,9 +91,9 @@
 }
 
 .edit-btn-2 {
-    position: relative;
+    position: relative; 
-    width: 130px;
+    width: 150px;
-    height: 50px;
+    height: 60px; 
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -111,26 +108,17 @@
 
 @media (max-width: 768px) {
     .edit-titles h1 {
-        
+        font-size: 24px; 
-        font-size: 24px;
     }
 
     .edit-datetime {
-        
+        font-size: 16px; 
-        font-size: 16px;
     }
 
     .edit-buttons div {
         font-size: 14px;
     }
-
-    
-}
-@media (min-width: 1024px) {
-    .edit-btn, .edit-btn-2 {
-        width: 250px;
-        height: 50px;
-        font-size: 20px;
-    }
 }
 
+
+

src/components/pages/Income/Common/IncomeEdit.js

@@ -9,88 +9,42 @@ function IncomeEdit() {
   const navigate = useNavigate();
   const [currentDateTime, setCurrentDateTime] = useState("");
   const [amount, setAmount] = useState(location.state?.amount || "");
-  
+  const [category, setCategory] = useState(location.state?.category || "");
-  // Initial categories
-  const [defaultCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
-  const [categories, setCategories] = useState(defaultCategories);
-
-  const [selectedCategories, setSelectedCategories] = useState(
-    Array.isArray(location.state?.category)
-      ? location.state.category
-      : location.state?.category
-      ? [location.state.category]
-      : []
-  );
-  
   const [error, setError] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
-  const [dropdownVisible, setDropdownVisible] = useState(false);
 
   useEffect(() => {
     const now = new Date();
     const formattedDateTime = now.toLocaleString();
     setCurrentDateTime(formattedDateTime);
-
+  }, []);
-   
-    const storedCategories = JSON.parse(localStorage.getItem("categories")) || [];
-    const uniqueCategories = [...new Set([...defaultCategories, ...storedCategories])];
-    setCategories(uniqueCategories); 
-
-    if (!location.state?.id) {
-      const storedEntries = JSON.parse(localStorage.getItem("entries")) || [];
-      const entryToEdit = storedEntries.find(
-        (entry) => entry.id === location.state?.id
-      );
-
-      if (entryToEdit) {
-        setAmount(entryToEdit.amount);
-        setSelectedCategories(
-          Array.isArray(entryToEdit.category)
-            ? entryToEdit.category
-            : entryToEdit.category
-            ? [entryToEdit.category]
-            : []
-        );
-      }
-    }
-  }, [location.state]);
 
   const handleBackClick = () => {
-    navigate("/expense-records");
+    navigate("/records");
   };
 
   const handleSave = () => {
-    setIsLoading(true);
+    setIsLoading(true); 
     setError(null);
 
     const updatedEntry = {
       id: location.state?.id,
       amount: amount,
       dateTime: currentDateTime,
-      category: selectedCategories.join(", "), 
+      category: category,
     };
 
+    
     const storedEntries = JSON.parse(localStorage.getItem("entries")) || [];
     const updatedEntries = storedEntries.map((entry) =>
       entry.id === updatedEntry.id ? updatedEntry : entry
     );
     localStorage.setItem("entries", JSON.stringify(updatedEntries));
 
-    navigate("/expense-successfully", { state: updatedEntry });
+    // Optionally, you can navigate to a success page or display a message here
-    setIsLoading(false);
+    console.log("Entry updated in local storage:", updatedEntry);
-  };
+    navigate("/successPage");
-
+    setIsLoading(false); // End loading
-  const toggleDropdown = () => {
-    setDropdownVisible(!dropdownVisible);
-  };
-
-  const handleCategorySelect = (category) => {
-    // Toggle category selection
-    if (selectedCategories.includes(category)) {
-      setSelectedCategories(selectedCategories.filter((cat) => cat !== category));
-    } else {
-      setSelectedCategories([...selectedCategories, category]);
-    }
   };
 
   return (
@@ -125,27 +79,11 @@ function IncomeEdit() {
 
         <div className="edit-fields">
           <label>Category:</label>
-          <div className="dropdown" onClick={toggleDropdown}>
+          <input
-            <input
+            type="text"
-              type="text"
+            value={category}
-              value={selectedCategories.join(", ") || ""}
+            onChange={(e) => setCategory(e.target.value)}
-              placeholder="Select Categories"
+          />
-              readOnly
-            />
-            {dropdownVisible && (
-              <div className="dropdown-list">
-                {categories.map((category) => (
-                  <div
-                    key={category}
-                    className={`dropdown-item ${selectedCategories.includes(category) ? "select" : ""}`}
-                    onClick={() => handleCategorySelect(category)}
-                  >
-                    {category}
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
         </div>
 
         <div className="edit-buttons">
@@ -160,4 +98,5 @@ function IncomeEdit() {
     </div>
   );
 }
+
 export default IncomeEdit;

src/components/pages/Income/Common/Layout.js

@@ -7,28 +7,14 @@ const Layout = () => {
   const [totalAmount, setTotalAmount] = useState(0); 
   const [category, setCategory] = useState(''); 
 
-
-  const handleManualAmountChange = (value) => {
-    const numericValue = parseFloat(value);
-    if (!isNaN(numericValue)) {
-      setTotalAmount(numericValue);
-    } else {
-      setTotalAmount(0); 
-    }
-  };
-
   return (
     <div className="layout-container">
       <div className="page-content">
-  
+      
-        <Outlet context={[totalAmount, setTotalAmount, category, setCategory, handleManualAmountChange]} />
+        <Outlet context={[totalAmount, setTotalAmount, category, setCategory]} />
       </div>
-      <TotalAmount 
+     
-        totalAmount={totalAmount} 
+      <TotalAmount totalAmount={totalAmount} category={category} setCategory={setCategory} />
-        category={category} 
-        setCategory={setCategory} 
-        handleManualAmountChange={handleManualAmountChange} 
-      />
     </div>
   );
 };

src/components/pages/Income/Home.css

@@ -123,7 +123,7 @@
   }
 
   .buttons {
-    max-width: 80%;
+    max-width: 100%;
   }
 
   .expense-btn, .income-btn {

src/components/pages/Income/Home.js

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

src/components/pages/Income/Income/IncomePage.css

@@ -1,8 +1,9 @@
+/* IncomePage.css */
 
+/* Main container */
 .income-container {
   max-width: 800px;
   margin: 0 auto;
-  font-family: 'Montserrat', sans-serif;
   padding: 20px;
  justify-content: center;
   border-radius: 10px;
@@ -13,15 +14,14 @@
 .arrow-container {
   position: relative;
   width: 100%;
-  margin: 10px;
+  text-align: center; /* Center the title and date */
-  text-align: center;
   margin-bottom: 20px;
 }
 
-
+/* Arrow icon */
 .arrow-icon {
   position: absolute;
-  left: 0; 
+  left: 0; /* Place the arrow on the left */
   top: 50%;
   margin: 40px 5px;
   transform: translateY(-50%);
@@ -30,7 +30,7 @@
   cursor: pointer;
 }
 
-
+/* Title */
 .income-title {
   font-size: 24px;
   color: #fff;
@@ -40,16 +40,16 @@
   margin-top: 10px; 
 }
 
-
+/* Date and time */
 .income-date {
   font-size: 14px;
   color: #fff;
   font-family: 'Montserrat', sans-serif;
-  text-align: center; 
+  text-align: center; /* Center the date */
   margin: 10px;
 }
 
-
+/* Button container */
 .button-container {
   display: flex;
   font-family: 'Montserrat', sans-serif;
@@ -111,21 +111,21 @@
 
 
 
-
+/* Icons in buttons */
  .category-icon {
   width: 30px;
   height: 30px;
   margin-bottom: 10px;
 }
 
+/* Responsive styling */
+
+/* Mobile-specific styles */
 @media (max-width: 600px) {
 
-  .arrow-container{
+
-    margin: 20px;
-  }
   .arrow-icon {
     font-size: 15px;
- 
   }
 
   .expense-title {
@@ -166,37 +166,3 @@
   font-size: 18px;
   }
 }
-
-/* Styles for screens with a width of 375px */
-@media (max-width: 375px) {
-  .arrow-container {
-    font-size: 12px;
-  }
-
-
-
-  .income-title {
-    font-size: 18px;
-  }
-
-  .income-date {
-    font-size: 12px;
-  }
-
-  .button-container {
-    flex-direction: row;
-    align-items: center;
-  }
-
-  .amount-btn, .category-btn {
-    width: 90%;
-    font-size: 14px;
-    padding: 12px;
-  }
-
-  .category-icon {
-    width: 25px;
-    height: 25px;
-    margin-bottom: 5px;
-  }
-}

src/components/pages/Income/Income/IncomeSuccessfully.css

@@ -1,10 +1,11 @@
 body {
     background-color: #1E1E1E;
     margin: 20px;
-    font-family: 'Montserrat', sans-serif;
     padding: 0;
+    font-family: Arial, sans-serif;
 }
 
+
 .Payment-container {
     display: flex;
     flex-direction: column;
@@ -19,31 +20,36 @@ body {
     cursor: pointer;
 }
 
+
 .arr {
     position: absolute;
-    top: 10px;
+    top: 20px;
-    left: 10px;
+    left: 20px;
 }
 
-.expense-date {
+
+.income-date {
     color: #fff;
     font-size: 18px; 
     text-align: center; 
-    margin-bottom: 0px; 
+    margin-bottom: 10px; 
 }
 
+
 .payment-title {
     text-align: center;
-    margin-bottom: 30px;
+    margin-bottom: 10px;
 }
 
+
 .payment-title h1 {
     color: #fff;
-    font-size: 30px; /* Default font size */
+    font-size: 30px;
-    margin: 0px 0; 
+    margin: 10px 0; 
     text-align: center;
 }
 
+
 .payment-content {
     display: flex;
     flex-direction: column;
@@ -51,6 +57,7 @@ body {
     justify-content: center;
 }
 
+
 .payment-animation {
     display: flex;
     justify-content: center;
@@ -58,13 +65,15 @@ body {
     margin-bottom: 10px;
 }
 
+
 .payment-message h2 {
     color: #fff;
-    font-size: 24px; /* Default font size */
+    font-size: 24px;
     text-align: center;
     margin-bottom: 20px;
 }
 
+
 .payment-buttons {
     display: flex;
     justify-content: center;
@@ -72,10 +81,11 @@ body {
     margin-top: 20px;
 }
 
-.btn1, .bt_11 {
+
+.btn1 {
     position: relative; 
-    width: 130px;   /* Default width */
+    width: 150px;
-    height: 40px;   /* Default height */
+    height: 60px; 
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -88,50 +98,69 @@ body {
     margin-right: 10px;
 }
 
-/* Small screens (up to 600px) */
+
+.bt_11 {
+    position: relative; 
+    width: 150px;
+    height: 60px; 
+    color: #fff;
+    justify-content: center;
+    align-items: center;
+    background: #1E1E1E;
+    box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
+    border-radius: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 10px;
+}
+
+
+
+
 @media (max-width: 600px) {
     .payment-title h1 {
-        font-size: 16px; /* Smaller font size */
+        font-size: 24px;
     }
 
-    .expense-date {
+    .income-date {
-        font-size: 12px; /* Smaller font size */
+        font-size: 16px;
     }
 
     .payment-message h2 {
-        font-size: 14px; /* Smaller font size */
+        font-size: 20px;
     }
 
     .btn1, .bt_11 {
         width: 120px;
-        height: 40px;
+        height: 50px;
-        font-size: 14px;
+        font-size: 16px;
     }
 
     .arr {
-        top: 0px;
+        top: 10px;
-        left: 0px;
+        left: 10px;
     }
 }
 
-/* Medium screens (601px to 1024px) */
+
 @media (max-width: 1024px) {
     .payment-title h1 {
-        font-size: 22px;
+        font-size: 28px;
     }
 
-    .expense-date {
+    .income-date {
-        font-size: 14px;
+        font-size: 16px;
     }
 
     .payment-message h2 {
-        font-size: 18px;
+        font-size: 22px;
     }
 
     .btn1, .bt_11 {
         width: 140px;
-        height: 50px;
+        height: 55px;
-        font-size: 16px;
+        font-size: 18px;
     }
 
     .arr {
@@ -140,11 +169,11 @@ body {
     }
 }
 
-/* Large screens (1025px and up) */
+
 @media (min-width: 1025px) {
     .btn1, .bt_11 {
-        width: 190px;
+        width: 160px;
-        height: 50px;
+        height: 60px;
         font-size: 18px;
     }
 

src/components/pages/Income/Income/IncomeSuccessfully.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { Player } from "@lottiefiles/react-lottie-player";
 import successAnimation from "../Common/Animation - 1727464749500.json";
 import "../Income/IncomeSuccessfully.css";
@@ -9,8 +9,6 @@ import "../Income/IncomeSuccessfully.css";
 function IncomeSuccessfully() {
   const [currentDate, setCurrentDate] = useState(new Date());
   const navigate = useNavigate();
-  const location = useLocation(); 
-  const entryType = location.state?.entryType; 
 
   useEffect(() => {
     const timer = setInterval(() => {
@@ -21,26 +19,21 @@ function IncomeSuccessfully() {
   }, []);
 
   const handleBackClick = () => {
-    const updatedEntry = {
+    navigate("/editPage");
-      id: location.state?.id,
-      amount: location.state?.amount,
-      category: location.state?.category,
-      dateTime: location.state?.dateTime,
-    };
-    navigate("/editPage", { state: { ...updatedEntry } });  
   };
 
   const handleBackToHome = () => {
-    navigate("/", { state: { entryType } });
+    navigate("/");
   };
 
   const handleBackToRecord = () => {
-    navigate("/records", { state: { entryType } });
+    navigate("/records")
-  };
+  }
 
   const options = { hour: "2-digit", minute: "2-digit", hour12: true };
   const formattedDate = `on ${currentDate.toLocaleDateString()} - ${currentDate.toLocaleTimeString(
-    [], options
+    [],
+    options
   )}`;
 
   return (
@@ -73,10 +66,10 @@ function IncomeSuccessfully() {
 
           <div className="payment-buttons">
             <div className="btn1" onClick={handleBackToHome}>
-              Home
+             Home
             </div>
             <div className="bt_11" onClick={handleBackToRecord}>
-              Records
+             Records
             </div>
           </div>
         </div>

src/components/pages/Income/Records/Records.css

@@ -1,9 +1,11 @@
 
+
 .container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+      font-family: 'Montserrat', sans-serif;
     height: 100vh;
     color: white;
     position: relative;
@@ -11,13 +13,12 @@
 
 .back_arrows {
     position: absolute;
-    top: 0px;
+    top: 20px;
-    left: 0px;
+    left: 20px;
 }
 
 .arrow-icon {
     font-size: 24px;
-    margin: 22px 10px 0px 10px;
     cursor: pointer;
 }
 
@@ -41,12 +42,11 @@
     text-align: center; 
 }
 
-.total-amount {
+.total-amount h2 {
-    text-align: center;
     font-size: 24px; 
     color: #4CAF50; 
-    margin: 10px 0;
+    margin: 10px 0; 
-}
+  }
   
   .categories {
     margin-top: 10px; 
@@ -63,7 +63,7 @@
 }
   
   .categories ul {
-    list-style-type: none; 
+    list-style-type: none;
     padding: 5px;
   
   }
@@ -72,10 +72,10 @@
     font-size: 16px;
     color: #deb1b1; 
     border-bottom: 1px solid #e0e0e0; 
-    padding: 8px 0; 
+    padding: 8px 0;
   }
 
-/* Mobile responsiveness */
+
 @media (max-width: 768px) {
     .success-titles h1 {
         font-size: 24px; 
@@ -87,11 +87,13 @@
 }
 
 .total-amount {
-    color: #fff;
+    text-align: center;
-    font-size: 12px;
+    font-size: 24px; 
-    margin: 20px 0; 
+    color: #4CAF50; 
+    margin: 10px 0;
 }
 
+
 .categories {
     color: #fff;
     font-size: 10px;
@@ -101,14 +103,14 @@
 .success-buttons {
     display: flex;
     justify-content: center;
-    gap: 10px;
+    gap: 20px;
-    margin-top: 0px;
+    margin-top: 20px;
 }
 
 .btn-home {
     position: relative; 
-    width: 140px;
+    width: 150px;
-    height: 50px;  
+    height: 60px; 
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -123,8 +125,8 @@
 }
 .btn-edit {
     position: relative; 
-    width: 140px;
+    width: 150px;
-    height: 50px; 
+    height: 60px; 
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -138,18 +140,4 @@
 
 }
 
-@media (min-width: 1024px) {
-    .btn-edit, .btn-home {
-        width: 200px;
-        height: 50px;
-        font-size: 20px;
-    }
 
-    .success-title h1 {
-        font-size: 32px;
-    }
-
-    .success-message h2 {
-        font-size: 26px;
-    }
-}

src/components/pages/Income/Records/Records.js

@@ -47,14 +47,12 @@ 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,
@@ -77,8 +75,9 @@ function Records() {
         />
       </div>
       
-      <h1>Income</h1>
+     
       <div className="success-datetime">
+      <h1>Income</h1>
         <p>{currentDateTime}</p>
       </div>
 
@@ -87,12 +86,16 @@ function Records() {
         
         <div className="categories">
           <h3>Selected Categories:</h3>
-          <p>{categories.join(', ')}</p> 
+          <ul>
+            {categories.map((category, index) => (
+              <li key={index}>{category}</li>
+            ))}
+          </ul>
         </div>
       </div>
       
       <div className="success-buttons">
-        <div className="btn-home" onClick={handleBackHomeClick}>Home</div>
+        <div className="btn-home" onClick={handleBackClick}>Home</div>
         <div className="btn-edit" onClick={handleEditClick}>Edit</div>
       </div>
     </div>

src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}