diff --git a/src/components/pages/Income/Amount/EntriesList.css b/src/components/pages/Income/Amount/EntriesList.css index 7abc359..2c1acef 100644 --- a/src/components/pages/Income/Amount/EntriesList.css +++ b/src/components/pages/Income/Amount/EntriesList.css @@ -49,12 +49,69 @@ /* background-color: #333; */ /* border: 1px solid #ddd; */ border-bottom: 1px solid #ddd; - color: #fff; + color: #ffffff; padding: 5px; border-radius: 5px; margin-right: 10px; flex: 1; } +.entries-list-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; +} + +.custom-dropdown:hover .dropdown-content { + display: block; +} + +.dropdown-item { + padding: 8px 2px; + cursor: pointer; +} + +.dropdown-item input { + margin-right: 8px; +} + + /* Entry icons container */ .entry-icons { diff --git a/src/components/pages/Income/Amount/EntriesList.js b/src/components/pages/Income/Amount/EntriesList.js index ecc92e1..79f0dd0 100644 --- a/src/components/pages/Income/Amount/EntriesList.js +++ b/src/components/pages/Income/Amount/EntriesList.js @@ -10,13 +10,19 @@ function EntriesList() { const [entries, setEntries] = useState([]); const [editingEntryId, setEditingEntryId] = useState(null); const [editedAmount, setEditedAmount] = useState(""); - const [editedCategory, setEditedCategory] = useState(""); + const [selectedCategory, setSelectedCategory] = useState([]); const [repeatEntry, setRepeatEntry] = useState(null); const [isDialogOpen, setIsDialogOpen] = 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) => { @@ -27,12 +33,12 @@ function EntriesList() { const handleEditClick = (entry) => { setEditingEntryId(entry.id); setEditedAmount(entry.amount); - setEditedCategory(entry.category); + setSelectedCategory(entry.category || []); // Ensure selectedCategory is an array }; const handleSaveClick = (entry) => { const updatedEntries = entries.map((e) => - e.id === entry.id ? { ...e, amount: editedAmount, category: editedCategory } : e + e.id === entry.id ? { ...e, amount: editedAmount, category: selectedCategory } : e ); setEntries(updatedEntries); @@ -50,7 +56,7 @@ function EntriesList() { const newEntry = { id: new Date().getTime(), amount: repeatEntry.amount, - category: repeatEntry.category, + category: repeatEntry.category, // Ensure this is an array type: repeatEntry.type, }; @@ -58,7 +64,6 @@ function EntriesList() { setEntries(updatedEntries); localStorage.setItem("entries", JSON.stringify(updatedEntries)); - // Navigate based on entry type if (repeatEntry.type === "income") { navigate("/totalsuccessfully", { state: { entryId: newEntry.id } }); } else { @@ -70,6 +75,16 @@ function EntriesList() { setRepeatEntry(null); }; + const handleCategoryChange = (category) => { + setSelectedCategory(prevCategories => { + if (prevCategories.includes(category)) { + return prevCategories.filter(cat => cat !== category); // Remove category if already selected + } else { + return [...prevCategories, category]; // Add category if not selected + } + }); + }; + return (