From cba9f8565a815ff0a41acf92a94e8ce578eef4d7 Mon Sep 17 00:00:00 2001
From: sonali <sonali.humbingo@gmail.com>
Date: Tue, 8 Oct 2024 16:13:01 +0530
Subject: [PATCH] " category disply in dropdown in home page (edit
 functionlity)"

---
 .../pages/Income/Amount/EntriesList.css       | 59 ++++++++++++++++++-
 .../pages/Income/Amount/EntriesList.js        | 51 ++++++++++++----
 2 files changed, 97 insertions(+), 13 deletions(-)

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 (
     <div className="entries-list-container">
       <h4>Previous Last Five Transactions:</h4>
@@ -87,12 +102,22 @@ function EntriesList() {
                   onChange={(e) => setEditedAmount(e.target.value)}
                   className="entry-input"
                 />
-                <input
-                  type="text"
-                  value={editedCategory}
-                  onChange={(e) => setEditedCategory(e.target.value)}
-                  className="entry-input"
-                />
+                <div className="custom-dropdown">
+                  <button className="dropdown-button">
+                    {selectedCategory.length > 0 ? selectedCategory.join(', ') : "Select Category"}
+                  </button>
+                  <div className="dropdown-content">
+                    {categories.map((cat, idx) => (
+                      <div
+                        key={idx}
+                        className="dropdown-item"
+                        onClick={() => handleCategoryChange(cat)}
+                      >
+                        {cat}
+                      </div>
+                    ))}
+                  </div>
+                </div>
                 <FontAwesomeIcon
                   icon={faSave}
                   className="entry-save-icon"
@@ -107,7 +132,9 @@ function EntriesList() {
             ) : (
               <>
                 <span className="entry-amount">₹{entry.amount}</span>
-                <span className="entry-category">{entry.category}</span>
+                <span className="entry-category">
+                  {entry.category.join(', ')} {/* Join array elements with a comma */}
+                </span>
                 <div className="entry-icons">
                   <FontAwesomeIcon
                     icon={faRedoAlt}