Change Item without location working.

inventory-manager/src/components/myorg/items/OrganizationItemDetails.css

 /* OrganizationItemDetails.css */
-
 .organization-item-details {
     max-width: 600px;
     margin: 0 auto;
@@ -7,30 +6,43 @@
     border: 1px solid #ddd;
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    text-align: center; /* Center the entire content */
+    text-align: center;
+    align-items: center;
 }
 
 .item-details {
     margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* Center the entire content */
+    text-align: center;
 }
 
 .item-details span {
     display: block;
     margin-bottom: 10px;
-    text-align: left; /* Align text to the left within each span */
+    text-align: left;
+    width: 100%;
 }
 
-.delete-item-button {
+.modify-item-button {
     display: block;
     margin-top: 20px;
     padding: 10px 20px;
     color: #fff;
-    background-color: #d9534f; /* Dark red color */
-    border: 1px solid #d9534f;
+    background-color: #5bc0de; /* Blue color for modify button */
+    border: 1px solid #5bc0de;
     border-radius: 5px;
     cursor: pointer;
 }
 
-.delete-item-button:hover {
-    background-color: #c9302c; /* Darker red color on hover */
-}
\ No newline at end of file
+.modify-item-button:hover {
+    background-color: #46b8da; /* Darker blue color on hover */
+}
+
+/* Style for dropdowns */
+.item-details select {
+    padding: 8px;
+    width: 100%;
+    margin-bottom: 10px;
+}

inventory-manager/src/components/myorg/items/OrganizationItemDetails.jsx

@@ -42,6 +42,12 @@ const OrganizationItemDetails = ({ token }) => {
         }
     };
 
+    const handleDropdownChange = (field, value) => {
+        setModifiedFields((prevFields) => ({
+            ...prevFields,
+            [field]: value,
+        }));
+    };
     const handleModifyItem = async () => {
         // Logic to handle item modification
         try {
@@ -143,22 +149,30 @@ const OrganizationItemDetails = ({ token }) => {
                 <div>
                     <h3>Modify Item</h3>
                     <div className="modify-item-fields">
-                        <label>
-                            Status:
-                            <input
-                                type="text"
-                                value={modifiedFields.status}
-                                onChange={(e) => setModifiedFields({ ...modifiedFields, status: e.target.value })}
-                            />
-                        </label>
-                        <label>
-                            Category:
-                            <input
-                                type="text"
-                                value={modifiedFields.category}
-                                onChange={(e) => setModifiedFields({ ...modifiedFields, category: e.target.value })}
-                            />
-                        </label>
+                        <div>
+                            <span>Status:</span>
+                            <select value={modifiedFields.status} defaultValue={itemInfo.data[6]} onChange={(e) => handleDropdownChange('status', e.target.value)}>
+                                <option value="AVAILABLE">Available</option>
+                                <option value="BORROWED">Borrowed</option>
+                            </select>
+                        </div>
+                        <div>
+                            <span>Category:</span>
+                            <select value={modifiedFields.category} defaultValue={itemInfo.data[5]} onChange={(e) => handleDropdownChange('category', e.target.value)}>
+                                <option value="STATIONERY">Stationery</option>
+                                <option value="MARKETING">Marketing</option>
+                                <option value="ELECTRONICS">Electronics</option>
+                                <option value="SUPPLIES">Supplies</option>
+                                <option value="PERISHABLES">Perishables</option>
+                                <option value="MERCHANDISE">Merchandise</option>
+                                <option value="TOOLS">Tools</option>
+                                <option value="CHEMICALS">Chemicals</option>
+                                <option value="FLAMMABLE">Flammable</option>
+                                <option value="OTHER">Other</option>
+                                <option value="UNIQUE">Unique</option>
+                                <option value="BOOKS">Books</option>
+                            </select>
+                        </div>
                         <label>
                             Description:
                             <input