Image is required for creating an item, required fields actually required, Available After and Available Before defaults changed, delete confirmation modal for deleting an item

frontend/src/pages/Owning.tsx

@@ -71,6 +71,8 @@ const Owning: React.FC = () => {
     useState<ConditionCheck | null>(null);
   const [showReturnStatusModal, setShowReturnStatusModal] = useState(false);
   const [rentalForReturn, setRentalForReturn] = useState<Rental | null>(null);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [itemToDelete, setItemToDelete] = useState<Item | null>(null);
 
   useEffect(() => {
     fetchListings();
@@ -107,15 +109,23 @@ const Owning: React.FC = () => {
     }
   };
 
-  const handleDelete = async (itemId: string) => {
-    if (!window.confirm("Are you sure you want to delete this listing?"))
-      return;
+  const handleDeleteClick = (item: Item) => {
+    setItemToDelete(item);
+    setShowDeleteModal(true);
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!itemToDelete) return;
 
     try {
-      await api.delete(`/items/${itemId}`);
-      setListings(listings.filter((item) => item.id !== itemId));
+      await api.delete(`/items/${itemToDelete.id}`);
+      setListings(listings.filter((item) => item.id !== itemToDelete.id));
+      setShowDeleteModal(false);
+      setItemToDelete(null);
     } catch (err: any) {
-      alert("Failed to delete listing");
+      setError("Failed to delete listing");
+      setShowDeleteModal(false);
+      setItemToDelete(null);
     }
   };
 
@@ -713,7 +723,7 @@ const Owning: React.FC = () => {
                       {item.isAvailable ? "Mark Unavailable" : "Mark Available"}
                     </button>
                     <button
-                      onClick={() => handleDelete(item.id)}
+                      onClick={() => handleDeleteClick(item)}
                       className="btn btn-sm btn-outline-danger"
                     >
                       Delete
@@ -803,6 +813,54 @@ const Owning: React.FC = () => {
         }}
         conditionCheck={selectedConditionCheck}
       />
+
+      {/* Delete Confirmation Modal */}
+      {showDeleteModal && (
+        <div
+          className="modal fade show d-block"
+          tabIndex={-1}
+          style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
+        >
+          <div className="modal-dialog modal-dialog-centered">
+            <div className="modal-content">
+              <div className="modal-header">
+                <h5 className="modal-title">Delete Listing</h5>
+                <button
+                  type="button"
+                  className="btn-close"
+                  onClick={() => {
+                    setShowDeleteModal(false);
+                    setItemToDelete(null);
+                  }}
+                ></button>
+              </div>
+              <div className="modal-body">
+                <p>Are you sure you want to delete {itemToDelete?.name}?</p>
+                <p>This action cannot be undone.</p>
+              </div>
+              <div className="modal-footer">
+                <button
+                  type="button"
+                  className="btn btn-secondary"
+                  onClick={() => {
+                    setShowDeleteModal(false);
+                    setItemToDelete(null);
+                  }}
+                >
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  className="btn btn-danger"
+                  onClick={handleDeleteConfirm}
+                >
+                  Delete
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };