my-app/src/AppRoutes.jsx

@@ -9,7 +9,6 @@ import { BookingSettings } from './pages/BookingSettings';
 import { CourseSchedule } from './pages/CourseSchedule';
 import { CourseScheduleView } from './pages/CourseScheduleView';
 import { TestSession } from './pages/TestSession';
-import FullScreenLoader from './components/FullScreenLoader';
 import Home from './pages/Home';
 import CoursePage from './pages/CoursePage';
 import Profile from './pages/Profile';

my-app/src/Layout.jsx

@@ -1,7 +1,7 @@
 // components/Layout.jsx
 import React from 'react';
 import { Outlet, Link } from 'react-router-dom';
-import Navigation from './components/Navigation';
+import Navigation from './components/layout/Navigation';
 
 export default function Layout() {
 	return (

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

@@ -1,12 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Button } from 'react-aria-components';
 import styles from './BookingCard.module.css';
-import { convertDateObjectToString } from '../helpers';
-import Dropdown from './Dropdown';
-import { BookingTitleField } from './BookingTitleField';
-import { ParticipantsSelector } from './ParticipantsSelector';
-import { BookingProvider } from '../context/BookingContext';
-import { PEOPLE } from '../constants/bookingConstants';
+import { convertDateObjectToString } from '../../helpers';
+import Dropdown from '../ui/Dropdown';
+import { BookingTitleField } from '../forms/BookingTitleField';
+import { ParticipantsSelector } from '../forms/ParticipantsSelector';
+import { BookingProvider } from '../../context/BookingContext';
+import { PEOPLE } from '../../constants/bookingConstants';
 
 function BookingCard({ booking, onClick, isExpanded, onBookingUpdate, onBookingDelete }) {
 	const [selectedLength, setSelectedLength] = useState(null);

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

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Button, Dialog, Heading, Modal } from 'react-aria-components';
-import { convertDateObjectToString, getTimeFromIndex } from '../helpers';
-import Dropdown from './Dropdown';
-import { useBookingContext } from '../context/BookingContext';
-import { useSettingsContext } from '../context/SettingsContext';
+import { convertDateObjectToString, getTimeFromIndex } from '../../helpers';
+import Dropdown from '../ui/Dropdown';
+import { useBookingContext } from '../../context/BookingContext';
+import { useSettingsContext } from '../../context/SettingsContext';
 import styles from './BookingModal.module.css';
 
 export function BookingModal({ 

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { CalendarDate } from '@internationalized/date';
 import styles from './BookingsList.module.css';
 import BookingCard from './BookingCard';
-import NotificationBanner from './NotificationBanner';
+import NotificationBanner from '../common/NotificationBanner';
 
 function BookingsList({ bookings, handleEditBooking, onBookingUpdate, onBookingDelete, showSuccessBanner, lastCreatedBooking, onDismissBanner, showDeleteBanner, lastDeletedBooking, onDismissDeleteBanner, showDevelopmentBanner, showBookingConfirmationBanner, showBookingDeleteBanner }) {
 	const [showAll, setShowAll] = useState(false);

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

@@ -1,11 +1,11 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Button } from 'react-aria-components';
-import { convertDateObjectToString, getTimeFromIndex } from '../helpers';
-import Dropdown from './Dropdown';
-import { BookingTitleField } from './BookingTitleField';
-import { ParticipantsSelector } from './ParticipantsSelector';
-import { useBookingContext } from '../context/BookingContext';
-import { useSettingsContext } from '../context/SettingsContext';
+import { convertDateObjectToString, getTimeFromIndex } from '../../helpers';
+import Dropdown from '../ui/Dropdown';
+import { BookingTitleField } from '../forms/BookingTitleField';
+import { ParticipantsSelector } from '../forms/ParticipantsSelector';
+import { useBookingContext } from '../../context/BookingContext';
+import { useSettingsContext } from '../../context/SettingsContext';
 import styles from './InlineBookingForm.module.css';
 
 export function InlineBookingForm({ 

my-app/src/components/common/NotificationBanner.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import styles from './NotificationBanner.module.css';
-import { convertDateObjectToString } from '../helpers';
+import { convertDateObjectToString } from '../../helpers';
 
 const BANNER_VARIANTS = {
 	success: {

my-app/src/components/forms/BookingDatePicker.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DatePicker } from '../react-aria-starter/src/DatePicker'; 
-import { getFutureDate, isDateUnavailable } from '../utils/bookingUtils';
-import { useBookingContext } from '../context/BookingContext';
-import { useSettingsContext } from '../context/SettingsContext';
+import { DatePicker } from '../../react-aria-starter/src/DatePicker'; 
+import { getFutureDate, isDateUnavailable } from '../../utils/bookingUtils';
+import { useBookingContext } from '../../context/BookingContext';
+import { useSettingsContext } from '../../context/SettingsContext';
 
 export function BookingDatePicker() {
 	const booking = useBookingContext();

my-app/src/components/forms/BookingLengthField.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import Dropdown from './Dropdown';
-import { BOOKING_LENGTHS } from '../constants/bookingConstants';
-import { useBookingContext } from '../context/BookingContext';
+import Dropdown from '../ui/Dropdown';
+import { BOOKING_LENGTHS } from '../../constants/bookingConstants';
+import { useBookingContext } from '../../context/BookingContext';
 import styles from './BookingLengthField.module.css';
 
 export function BookingLengthField() {

my-app/src/components/forms/BookingTitleField.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useBookingContext } from '../context/BookingContext';
-import { useSettingsContext } from '../context/SettingsContext';
+import { useBookingContext } from '../../context/BookingContext';
+import { useSettingsContext } from '../../context/SettingsContext';
 import styles from './BookingTitleField.module.css';
 
 export function BookingTitleField({ compact = false }) {

my-app/src/components/forms/ParticipantsSelector.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { PEOPLE, USER } from '../constants/bookingConstants';
-import { useBookingContext } from '../context/BookingContext';
-import { useSettingsContext } from '../context/SettingsContext';
+import { PEOPLE, USER } from '../../constants/bookingConstants';
+import { useBookingContext } from '../../context/BookingContext';
+import { useSettingsContext } from '../../context/SettingsContext';
 import styles from './ParticipantsSelector.module.css';
 
 export function ParticipantsSelector({ compact = false }) {

my-app/src/components/forms/RoomSelectionField.jsx

@@ -1,8 +1,7 @@
 import React, { useMemo } from 'react';
-import Dropdown from './Dropdown';
-import { SMALL_GROUP_ROOMS } from '../constants/bookingConstants';
-import { useBookingContext } from '../context/BookingContext';
-import { useSettingsContext } from '../context/SettingsContext';
+import Dropdown from '../ui/Dropdown';
+import { useBookingContext } from '../../context/BookingContext';
+import { useSettingsContext } from '../../context/SettingsContext';
 import styles from './RoomSelectionField.module.css';
 
 export function RoomSelectionField() {

my-app/src/components/layout/Navigation.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import styles from './Navigation.module.css'; // Import the CSS Module
 import { Link, useLocation } from 'react-router-dom';
 import { ThemeToggle } from './ThemeToggle';
-import { useSettingsContext } from '../context/SettingsContext';
+import { useSettingsContext } from '../../context/SettingsContext';
 
 import 'bootstrap-icons/font/bootstrap-icons.css';
 

my-app/src/components/layout/ThemeToggle.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useTheme } from '../context/ThemeContext';
+import { useTheme } from '../../context/ThemeContext';
 import styles from './ThemeToggle.module.css';
 
 export const ThemeToggle = () => {

my-app/src/components/ui/TimeCard.jsx

@@ -1,7 +1,7 @@
 import { Button } from 'react-aria-components';
 import React from 'react';
 import styles from './TimeCard.module.css';
-import { useBookingContext } from '../context/BookingContext';
+import { useBookingContext } from '../../context/BookingContext';
 
 export default function TimeCard({
     startTimeIndex,

my-app/src/components/ui/TimeCardContainer.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import TimeCard from './TimeCard';
-import { InlineBookingForm } from './InlineBookingForm';
-import { BookingModal } from './BookingModal';
+import { InlineBookingForm } from '../booking/InlineBookingForm';
+import { BookingModal } from '../booking/BookingModal';
 import styles from './TimeCardContainer.module.css';
-import modalStyles from './BookingModal.module.css';
-import { useBookingContext } from '../context/BookingContext';
-import { useSettingsContext } from '../context/SettingsContext';
+import modalStyles from '../booking/BookingModal.module.css';
+import { useBookingContext } from '../../context/BookingContext';
+import { useSettingsContext } from '../../context/SettingsContext';
 
 const SLOT_GROUPING_SIZE = 8;
 

my-app/src/pages/NewBooking.jsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import styles from './NewBooking.module.css';
-import { TimeCardContainer } from '../components/TimeCardContainer';
-import { BookingDatePicker } from '../components/BookingDatePicker';
-import { BookingTitleField } from '../components/BookingTitleField';
-import { ParticipantsSelector } from '../components/ParticipantsSelector';
-import { RoomSelectionField } from '../components/RoomSelectionField';
-import { BookingLengthField } from '../components/BookingLengthField';
+import { TimeCardContainer } from '../components/ui/TimeCardContainer';
+import { BookingDatePicker } from '../components/forms/BookingDatePicker';
+import { BookingTitleField } from '../components/forms/BookingTitleField';
+import { ParticipantsSelector } from '../components/forms/ParticipantsSelector';
+import { RoomSelectionField } from '../components/forms/RoomSelectionField';
+import { BookingLengthField } from '../components/forms/BookingLengthField';
 import { useBookingState } from '../hooks/useBookingState';
 import { BookingProvider } from '../context/BookingContext';
 import { useSettingsContext } from '../context/SettingsContext';

my-app/src/pages/Profile.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSettingsContext } from '../context/SettingsContext';
-import PlaceholderBanner from '../components/PlaceholderBanner';
+import PlaceholderBanner from '../components/common/PlaceholderBanner';
 import styles from './Profile.module.css';
 
 const Profile = () => {

my-app/src/pages/RoomBooking.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import styles from './RoomBooking.module.css';
 import { Link } from 'react-router-dom';
-import BookingsList from '../components/BookingsList';
-import Card from '../components/Card';
+import BookingsList from '../components/booking/BookingsList';
+import Card from '../components/ui/Card';
 import { useSettingsContext } from '../context/SettingsContext';
 import { USER } from '../constants/bookingConstants';