Delete button for bookings page

src/pages/bookings/bookings.js

@@ -61,6 +61,24 @@ const BookingsPage = () => {
     setIsOpen(true);
   };
 
+  const handleDeleteBooking = async (selectedBooking) => {
+    try {
+      const response = await fetch(`${bookingServiceBaseUrl}/bookings/delete/${selectedBooking.id}`, {
+        method: "DELETE",
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
+      });
+      if (response.ok) {
+        setBookings(bookings.filter((booking) => booking.id !== selectedBooking.id));
+      } else {
+        setError("Booking extension failed");
+      }
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
   const handleSubmitExtend = async () => {
     setIsOpen(false);
     setExtendTime(null);
@@ -119,9 +137,15 @@ const BookingsPage = () => {
                   <Text>
                     <strong>Expiry Time:</strong> {booking.endTime}
                   </Text>
+                  <Stack>
+                    
                   <Button mt={4} onClick={() => handleExtendBooking(booking)}>
                     Extend booking
                   </Button>
+                  <Button color={"white"} backgroundColor={"red.500"} mt={4} onClick={() => handleDeleteBooking(booking)}>
+                    Delete booking
+                  </Button>
+                  </Stack>
                 </Box>
               ))}
             </Stack>