my-app/src/components/BookingModal.jsx

@@ -11,7 +11,8 @@ export function BookingModal({
 	hoursAvailable, 
 	endTimeIndex, 
 	setEndTimeIndex,
-	className 
+	className,
+	onClose
 }) {
 	const booking = useBookingContext();
 	const { getCurrentUser } = useSettingsContext();
@@ -87,7 +88,7 @@ export function BookingModal({
 	
 
 	return (
-		<Modal isDismissable className={className} style={{borderRadius: '0.4rem', overflow: 'hidden'}}>
+		<Modal isDismissable onOpenChange={(isOpen) => !isOpen && onClose && onClose()} className={className} style={{borderRadius: '0.4rem', overflow: 'hidden'}}>
 			<Dialog style={{overflow: 'hidden'}}>
 				<form>
 					<Heading slot="title">{booking.title == "" ? "Jacobs bokning" : booking.title}</Heading>
@@ -123,8 +124,8 @@ export function BookingModal({
 					</div>
 
 					<div className={styles.sectionWithTitle}>
-						<label>Tilldelat rum</label>
-						<p>G5:12</p>
+						<label>{booking.selectedRoom !== "allRooms" ? "Rum" : "Tilldelat rum"}</label>
+						<p>{booking.selectedRoom !== "allRooms" ? booking.selectedRoom : (booking.assignedRoom || 'Inget rum tilldelat')}</p>
 					</div>
 
 					<div className={styles.sectionWithTitle}>

my-app/src/components/Dropdown.jsx

@@ -12,7 +12,7 @@ const Dropdown = ({ options, value, onChange, placeholder = {value: "", label: "
 				className={styles.select}
 			>
 				{placeholder && (
-					<option value={placeholder.value} disabled={true} hidden={false}>
+					<option value={placeholder.value} disabled={false} hidden={false}>
 						{placeholder.label}
 					</option>
 				)}

my-app/src/components/RoomSelectionField.jsx

@@ -22,6 +22,7 @@ export function RoomSelectionField() {
 			<h3 className={styles.elementHeading}>Rum</h3>
 			<Dropdown
 				options={roomOptions}
+				value={booking.selectedRoom}
 				onChange={(e) => booking.handleRoomChange(e)}
 				placeholder={{
 					label: "Alla rum",

my-app/src/components/TimeCard.jsx

@@ -77,6 +77,10 @@ export default function TimeCard({
           endTimeIndex={endTimeIndex}
           setEndTimeIndex={setEndTimeIndex}
           className={styles.modalContainer}
+          onClose={() => {
+            // Reset time selections when modal is closed without booking
+            booking.resetTimeSelections();
+          }}
         />
       </DialogTrigger>
     );

my-app/src/hooks/useBookingState.js

@@ -38,6 +38,7 @@ export function useBookingState(addBooking, initialDate = null) {
 	);
 	const [currentRoom, setCurrentRoom] = useState(null);
 	const [selectedRoom, setSelectedRoom] = useState("allRooms");
+	const [assignedRoom, setAssignedRoom] = useState(null);
 	const [selectedStartIndex, setSelectedStartIndex] = useState(null);
 	const [selectedEndIndex, setSelectedEndIndex] = useState(null);
 	const [selectedBookingLength, setSelectedBookingLength] = useState(0);
@@ -59,6 +60,7 @@ export function useBookingState(addBooking, initialDate = null) {
 		setAvailableTimeSlots([]);
 		setSelectedStartIndex(null);
 		setSelectedEndIndex(null);
+		setAssignedRoom(null);
 	}, []);
 
 	const resetSelections = useCallback(() => {
@@ -75,7 +77,7 @@ export function useBookingState(addBooking, initialDate = null) {
 		console.log('TimeCard clicked:', { startHour, hoursAvailable, roomId });
 		setSelectedStartIndex(startHour);
 		setSelectedEndIndex(startHour + hoursAvailable);
-		setSelectedRoom(roomId);
+		setAssignedRoom(roomId);
 	}, []);
 
 	const handleDateChange = useCallback((date) => {
@@ -107,10 +109,13 @@ export function useBookingState(addBooking, initialDate = null) {
 	}, [resetTimeSelections]);
 
 	const handleSave = useCallback(() => {
+		// Use assignedRoom for the booking, not selectedRoom
+		const roomToBook = selectedRoom !== "allRooms" ? selectedRoom : assignedRoom;
+		
 		console.log('Saving booking with:', {
 			selectedStartIndex,
 			selectedEndIndex,
-			selectedRoom,
+			room: roomToBook,
 			title
 		});
 		
@@ -124,8 +129,8 @@ export function useBookingState(addBooking, initialDate = null) {
 			date: selectedDate,
 			startTime: selectedStartIndex,
 			endTime: selectedEndIndex,
-			room: selectedRoom,
-			roomCategory: getRoomCategory(selectedRoom),
+			room: roomToBook,
+			roomCategory: getRoomCategory(roomToBook),
 			title: title !== "" ? title : DEFAULT_BOOKING_TITLE,
 			participants: allParticipants
 		});
@@ -133,7 +138,7 @@ export function useBookingState(addBooking, initialDate = null) {
 		resetSelections();
 		navigate('/');
 		window.scrollTo(0, 0);
-	}, [addBooking, selectedDate, selectedStartIndex, selectedEndIndex, selectedRoom, title, participants, resetSelections, navigate]);
+	}, [addBooking, selectedDate, selectedStartIndex, selectedEndIndex, selectedRoom, assignedRoom, title, participants, resetSelections, navigate]);
 
 	const handleTimeCardExit = useCallback(() => {
 		if (!selectedEndIndex) {
@@ -167,6 +172,7 @@ export function useBookingState(addBooking, initialDate = null) {
 		timeSlotsByRoom,
 		currentRoom,
 		selectedRoom,
+		assignedRoom,
 		selectedStartIndex,
 		selectedEndIndex,
 		selectedBookingLength,
@@ -191,10 +197,12 @@ export function useBookingState(addBooking, initialDate = null) {
 		handleTimeCardExit,
 		handleParticipantChange,
 		handleRemoveParticipant,
+		resetTimeSelections,
 	}), [
 		timeSlotsByRoom,
 		currentRoom,
 		selectedRoom,
+		assignedRoom,
 		selectedStartIndex,
 		selectedEndIndex,
 		selectedBookingLength,
@@ -213,5 +221,6 @@ export function useBookingState(addBooking, initialDate = null) {
 		handleTimeCardExit,
 		handleParticipantChange,
 		handleRemoveParticipant,
+		resetTimeSelections,
 	]);
 }