" mu change"

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

@@ -9,8 +9,10 @@ function ExpenseEditPage() {
   const navigate = useNavigate();
   const [currentDateTime, setCurrentDateTime] = useState("");
   const [amount, setAmount] = useState(location.state?.amount || "");
-  const [categories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
   
+  // 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)
@@ -29,6 +31,10 @@ function ExpenseEditPage() {
     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")) || [];

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

@@ -3,12 +3,12 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import '../ExpenseAmount/TotalExpenseAmount.css';
 
 function TotalExpenseAmount({ totalAmount, category, setCategory, handleManualAmountChange }) {
-  const [amount, setAmount] = useState(totalAmount || ''); 
+  const [amount, setAmount] = useState(totalAmount !== undefined ? totalAmount : 0);
   const location = useLocation();
   const { entryType } = location.state || {};  
   const [entries, setEntries] = useState([]);
   const [categoryError, setCategoryError] = useState('');
-  const [amountError, setAmountError] = useState(''); // State for amount error
+  const [amountError, setAmountError] = useState(''); 
   const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]); 
 
   const navigate = useNavigate(); 
@@ -26,10 +26,10 @@ function TotalExpenseAmount({ totalAmount, category, setCategory, handleManualAm
 
   const handleAddEntry = () => {
     setCategoryError('');
-    setAmountError(''); // Reset amount error
+    setAmountError(''); 
 
     if (amount <= 0) {
-      setAmountError('Amount is required and must be greater than zero'); // Set error message
+      setAmountError('Amount is required and must be greater than zero'); 
       return null; 
     }
 
@@ -91,13 +91,13 @@ function TotalExpenseAmount({ totalAmount, category, setCategory, handleManualAm
   };
 
   const handleAmountMouseDown = (e) => {
-    e.preventDefault(); // Prevents the keyboard from opening
+    e.preventDefault();
-    handleAmountFocus(); // Navigate on first click
+    handleAmountFocus(); 
   };
 
   const handleCategoryMouseDown = (e) => {
-    e.preventDefault(); // Prevents the keyboard from opening
+    e.preventDefault(); 
-    handleCategoryFocus(); // Navigate on first click
+    handleCategoryFocus(); 
   };
 
   const handleAmountDoubleClick = () => {
@@ -110,6 +110,19 @@ function TotalExpenseAmount({ totalAmount, category, setCategory, handleManualAm
     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">
@@ -119,15 +132,12 @@ function TotalExpenseAmount({ totalAmount, category, setCategory, handleManualAm
             id="amount-input"
             type="number"
             value={amount} 
-            onChange={(e) => {
+            onChange={handleAmountChange} 
-              setAmount(e.target.value);
-              handleManualAmountChange(e.target.value); // Ensure it's called properly
-            }} 
             onMouseDown={handleAmountMouseDown} 
             onDoubleClick={handleAmountDoubleClick} 
             placeholder="Enter Amount"
           />
-          {amountError && <span className="error-message">{amountError}</span>} {/* Amount error message */}
+          {amountError && <span className="error-message">{amountError}</span>}
         </div>
         <div className="category-input">
           <label>Category:</label>

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

@@ -113,7 +113,15 @@
 
 
 
-/* Entry icons container */
+
+.dropdown-item.selected {
+  background-color: #bbb3b33d; 
+  color: #ffffff; 
+}
+
+
+
+
 .entry-icons {
   display: flex;
   align-items: center;

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

@@ -10,9 +10,10 @@ function EntriesList() {
   const [entries, setEntries] = useState([]);
   const [editingEntryId, setEditingEntryId] = useState(null);
   const [editedAmount, setEditedAmount] = useState("");
-  const [selectedCategory, setSelectedCategory] = useState([]); // Ensure this is initialized as an array
+  const [selectedCategory, setSelectedCategory] = 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"]);
 
@@ -33,8 +34,15 @@ function EntriesList() {
   const handleEditClick = (entry) => {
     setEditingEntryId(entry.id);
     setEditedAmount(entry.amount);
+
     // Ensure selectedCategory is always an array
-    setSelectedCategory(Array.isArray(entry.category) ? entry.category : []);
+    if (Array.isArray(entry.category)) {
+      setSelectedCategory(entry.category);  
+    } else if (typeof entry.category === "string") {
+      setSelectedCategory([entry.category]);
+    } else {
+      setSelectedCategory([]);  
+    }
   };
 
   const handleSaveClick = (entry) => {
@@ -57,7 +65,7 @@ function EntriesList() {
       const newEntry = {
         id: new Date().getTime(),
         amount: repeatEntry.amount,
-        category: repeatEntry.category || [], // Ensure this is an array
+        category: repeatEntry.category || [],
         type: repeatEntry.type, 
       };
 
@@ -78,15 +86,19 @@ function EntriesList() {
 
   const handleCategoryChange = (category) => {
     setSelectedCategory((prevCategories) => {
-      // Ensure prevCategories is an array
+      if (!Array.isArray(prevCategories)) return [category];
-      if (!Array.isArray(prevCategories)) return [category]; // Initialize as array if not
 
       if (prevCategories.includes(category)) {
-        return prevCategories.filter((cat) => cat !== category); // Remove category if already selected
+        return prevCategories.filter((cat) => cat !== category);
       } else {
-        return [...prevCategories, category]; // Add category if not selected
+        return [...prevCategories, category];
       }
     });
+    setIsDropdownOpen(false);
+  };
+
+  const toggleDropdown = () => {
+    setIsDropdownOpen((prev) => !prev);
   };
 
   return (
@@ -107,20 +119,22 @@ function EntriesList() {
                   className="entry-input"
                 />
                 <div className="custom-dropdown">
-                  <button className="dropdown-button">
+                  <button className="dropdown-button" onClick={toggleDropdown}>
                     {selectedCategory.length > 0 ? selectedCategory.join(', ') : "Select Category"}
                   </button>
+                  {isDropdownOpen && ( 
                     <div className="dropdown-content">
                       {categories.map((cat, idx) => (
                         <div
                           key={idx}
-                        className="dropdown-item"
+                          className={`dropdown-item ${selectedCategory.includes(cat) ? 'selected' : ''}`} 
                           onClick={() => handleCategoryChange(cat)}
                         >
                           {cat}
                         </div>
                       ))}
                     </div>
+                  )}
                 </div>
                 <FontAwesomeIcon
                   icon={faSave}
@@ -137,7 +151,7 @@ function EntriesList() {
               <>
                 <span className="entry-amount">₹{entry.amount}</span>
                 <span className="entry-category">
-                  {Array.isArray(entry.category) ? entry.category.join(', ') : entry.category || "No Category"} {/* Safely check if it's an array */}
+                  {Array.isArray(entry.category) ? entry.category.join(', ') : entry.category || "No Category"} 
                 </span>
                 <div className="entry-icons">
                   <FontAwesomeIcon

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

@@ -3,12 +3,12 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import './TotalAmount.css'; 
 
 function TotalAmount({ totalAmount, category, setCategory , handleManualAmountChange}) {
-  const [amount, setAmount] = useState(totalAmount || ''); 
+  const [amount, setAmount] = useState(totalAmount !== undefined ? totalAmount : 0);
   const location = useLocation();
   const { entryType } = location.state || {};  
   const [entries, setEntries] = useState([]);
   const [categoryError, setCategoryError] = useState('');
-  const [amountError, setAmountError] = useState(''); // State for amount error
+  const [amountError, setAmountError] = useState(''); 
   const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]); 
 
   const navigate = useNavigate(); 
@@ -26,10 +26,10 @@ function TotalAmount({ totalAmount, category, setCategory , handleManualAmountCh
 
   const handleAddEntry = () => {
     setCategoryError('');
-    setAmountError(''); // Reset amount error
+    setAmountError(''); 
 
     if (amount <= 0) {
-      setAmountError('Amount is required and must be greater than zero'); // Set error message
+      setAmountError('Amount is required and must be greater than zero'); 
       return null; 
     }
 
@@ -91,13 +91,13 @@ function TotalAmount({ totalAmount, category, setCategory , handleManualAmountCh
   };
 
   const handleAmountMouseDown = (e) => {
-    e.preventDefault(); // Prevents the keyboard from opening
+    e.preventDefault();
-    handleAmountFocus(); // Navigate on first click
+    handleAmountFocus(); 
   };
 
   const handleCategoryMouseDown = (e) => {
-    e.preventDefault(); // Prevents the keyboard from opening
+    e.preventDefault(); 
-    handleCategoryFocus(); // Navigate on first click
+    handleCategoryFocus(); 
   };
 
   const handleAmountDoubleClick = () => {
@@ -110,6 +110,19 @@ function TotalAmount({ totalAmount, category, setCategory , handleManualAmountCh
     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">
@@ -119,10 +132,7 @@ function TotalAmount({ totalAmount, category, setCategory , handleManualAmountCh
             id="amount-input"
             type="number"
             value={amount} 
-            onChange={(e) => {
+            onChange={handleAmountChange} 
-              setAmount(e.target.value);
-              handleManualAmountChange(e.target.value); 
-            }} 
             onMouseDown={handleAmountMouseDown} 
             onDoubleClick={handleAmountDoubleClick} 
             placeholder="Enter Amount"

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

@@ -9,9 +9,11 @@ function IncomeEdit() {
   const navigate = useNavigate();
   const [currentDateTime, setCurrentDateTime] = useState("");
   const [amount, setAmount] = useState(location.state?.amount || "");
-  const [categories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
   
-  // Ensure selectedCategories is initialized correctly
+  // 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
@@ -29,7 +31,11 @@ function IncomeEdit() {
     const formattedDateTime = now.toLocaleString();
     setCurrentDateTime(formattedDateTime);
 
-    // Fetch entry to edit if no id is passed
+   
+    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(
@@ -50,7 +56,7 @@ function IncomeEdit() {
   }, [location.state]);
 
   const handleBackClick = () => {
-    navigate("/records");
+    navigate("/expense-records");
   };
 
   const handleSave = () => {
@@ -70,7 +76,7 @@ function IncomeEdit() {
     );
     localStorage.setItem("entries", JSON.stringify(updatedEntries));
 
-    navigate("/successPage", { state: updatedEntry });
+    navigate("/expense-successfully", { state: updatedEntry });
     setIsLoading(false);
   };
 
@@ -79,7 +85,7 @@ function IncomeEdit() {
   };
 
   const handleCategorySelect = (category) => {
-
+    // Toggle category selection
     if (selectedCategories.includes(category)) {
       setSelectedCategories(selectedCategories.filter((cat) => cat !== category));
     } else {
@@ -154,5 +160,4 @@ function IncomeEdit() {
     </div>
   );
 }
-
 export default IncomeEdit;

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

@@ -77,7 +77,7 @@ function Records() {
         />
       </div>
       
-      <h1>Expense</h1>
+      <h1>Income</h1>
       <div className="success-datetime">
         <p>{currentDateTime}</p>
       </div>