diff --git a/src/components/pages/Expense/Common/ExpenseEditPage.js b/src/components/pages/Expense/Common/ExpenseEditPage.js index 0a4fff4..6fbaafd 100644 --- a/src/components/pages/Expense/Common/ExpenseEditPage.js +++ b/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")) || []; diff --git a/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.js b/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.js index 091b2ba..2209b27 100644 --- a/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.js +++ b/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 - handleAmountFocus(); // Navigate on first click + e.preventDefault(); + handleAmountFocus(); }; const handleCategoryMouseDown = (e) => { - e.preventDefault(); // Prevents the keyboard from opening - handleCategoryFocus(); // Navigate on first click + e.preventDefault(); + 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 (
@@ -119,15 +132,12 @@ function TotalExpenseAmount({ totalAmount, category, setCategory, handleManualAm id="amount-input" type="number" value={amount} - onChange={(e) => { - setAmount(e.target.value); - handleManualAmountChange(e.target.value); // Ensure it's called properly - }} + onChange={handleAmountChange} onMouseDown={handleAmountMouseDown} onDoubleClick={handleAmountDoubleClick} placeholder="Enter Amount" /> - {amountError && {amountError}} {/* Amount error message */} + {amountError && {amountError}}
diff --git a/src/components/pages/Income/Amount/EntriesList.css b/src/components/pages/Income/Amount/EntriesList.css index 2c1acef..a79976b 100644 --- a/src/components/pages/Income/Amount/EntriesList.css +++ b/src/components/pages/Income/Amount/EntriesList.css @@ -111,9 +111,17 @@ margin-right: 8px; } - -/* Entry icons container */ + + +.dropdown-item.selected { + background-color: #bbb3b33d; + color: #ffffff; +} + + + + .entry-icons { display: flex; align-items: center; diff --git a/src/components/pages/Income/Amount/EntriesList.js b/src/components/pages/Income/Amount/EntriesList.js index 6c8924c..107aeea 100644 --- a/src/components/pages/Income/Amount/EntriesList.js +++ b/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]; // Initialize as array if not + if (!Array.isArray(prevCategories)) return [category]; 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" />
- -
- {categories.map((cat, idx) => ( -
handleCategoryChange(cat)} - > - {cat} -
- ))} -
+ {isDropdownOpen && ( +
+ {categories.map((cat, idx) => ( +
handleCategoryChange(cat)} + > + {cat} +
+ ))} +
+ )}
₹{entry.amount} - {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"}
{ 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 - handleAmountFocus(); // Navigate on first click + e.preventDefault(); + handleAmountFocus(); }; const handleCategoryMouseDown = (e) => { - e.preventDefault(); // Prevents the keyboard from opening - handleCategoryFocus(); // Navigate on first click + e.preventDefault(); + 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 (
@@ -119,10 +132,7 @@ function TotalAmount({ totalAmount, category, setCategory , handleManualAmountCh id="amount-input" type="number" value={amount} - onChange={(e) => { - setAmount(e.target.value); - handleManualAmountChange(e.target.value); - }} + onChange={handleAmountChange} onMouseDown={handleAmountMouseDown} onDoubleClick={handleAmountDoubleClick} placeholder="Enter Amount" diff --git a/src/components/pages/Income/Common/IncomeEdit.js b/src/components/pages/Income/Common/IncomeEdit.js index fbb7a4f..5d38137 100644 --- a/src/components/pages/Income/Common/IncomeEdit.js +++ b/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 = () => { @@ -61,7 +67,7 @@ function IncomeEdit() { id: location.state?.id, amount: amount, dateTime: currentDateTime, - category: selectedCategories.join(", "), + category: selectedCategories.join(", "), }; const storedEntries = JSON.parse(localStorage.getItem("entries")) || []; @@ -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() {
); } - export default IncomeEdit; diff --git a/src/components/pages/Income/Records/Records.js b/src/components/pages/Income/Records/Records.js index 25c355e..34f6a0c 100644 --- a/src/components/pages/Income/Records/Records.js +++ b/src/components/pages/Income/Records/Records.js @@ -77,7 +77,7 @@ function Records() { />
-

Expense

+

Income

{currentDateTime}