my-app/src/components/booking/BookingCard.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { BookingProvider } from '../../context/BookingContext';
 
 import { useBookingCardState } from '../../hooks/useBookingCardState';
@@ -32,6 +32,13 @@ function BookingCard({
 	const { effectiveEditMode } = useResponsiveMode(editMode, isExpanded, isModalOpen, onClick, setIsModalOpen);
 	const actions = useBookingActions(booking, bookingState, onBookingUpdate, onBookingDelete, onClick, effectiveEditMode, setIsModalOpen, onOptionsToggle, isOptionsExpanded);
 
+	// Reset activeView when options accordion closes
+	useEffect(() => {
+		if (!isOptionsExpanded && !isExpanded) {
+			bookingState.setActiveView('closed');
+		}
+	}, [isOptionsExpanded, isExpanded, bookingState]);
+
 	// Create a local booking context for the components
 	const localBookingContext = {
 		title: bookingState.editedTitle,

my-app/src/components/booking/BookingsList.jsx

@@ -35,10 +35,14 @@ function BookingsList({ bookings, handleEditBooking, onBookingUpdate, onBookingD
 	console.log(groupedBookingsArray);
 
 	function handleBookingClick(booking) {
+		// Close any expanded options accordion when expanding a card
+		setOptionsExpandedBookingId(null);
 		setExpandedBookingId(expandedBookingId === booking.id ? null : booking.id);
 	}
 
 	function handleOptionsToggle(booking) {
+		// Close any expanded card when opening options accordion
+		setExpandedBookingId(null);
 		setOptionsExpandedBookingId(optionsExpandedBookingId === booking.id ? null : booking.id);
 	}