Index: my-react-app/src/components/RestaurantDetails.js
===================================================================
--- my-react-app/src/components/RestaurantDetails.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ my-react-app/src/components/RestaurantDetails.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
@@ -5,18 +5,15 @@
 import { useParams } from 'react-router-dom';
 import StarRating from "./StarRating";
-import MenuList from "./MenuList";
-
 
 const RestaurantDetails = () => {
     const navigate = useNavigate();
+
     const { id } = useParams();
-    const [preOrderedItems, setPreOrderedItems] = useState([]);
-
     const [restaurant, setRestaurant] = useState(null);
     const [selectedTableId, setSelectedTableId] = useState('');
-    const [selectedDate, setSelectedDate] = useState('');
-    const [selectedTime, setSelectedTime] = useState('');
-    const [timeOptions, setTimeOptions] = useState([]);
+    const [selectedTimeSlot, setSelectedTimeSlot] = useState('');
     const [selectedTable, setSelectedTable] = useState(null);
+    const [filteredTimeSlots, setFilteredTimeSlots] = useState([]);
+    const [selectedCapacity, setSelectedCapacity] = useState(''); // Define selectedCapacity state
 
     useEffect(() => {
@@ -24,5 +21,5 @@
             try {
                 if (!id) return;
-                const response = await axios.get(`http://localhost:8081/api/restaurants/${id}`);
+                const response = await axios.get(`http://localhost:8080/api/restaurants/${id}`);
                 setRestaurant(response.data);
             } catch (error) {
@@ -35,9 +32,9 @@
 
     useEffect(() => {
-        if (!selectedTableId) return;
+        if (!selectedTableId) return; // If no table is selected, return early
 
         const fetchTableDetails = async () => {
             try {
-                const response = await axios.get(`http://localhost:8081/api/tables/${selectedTableId}`);
+                const response = await axios.get(`http://localhost:8080/api/tables/${selectedTableId}`);
                 setSelectedTable(response.data);
             } catch (error) {
@@ -49,76 +46,43 @@
     }, [selectedTableId]);
 
-    const today = new Date();
-    const year = today.getFullYear();
-    const month = String(today.getMonth() + 1).padStart(2, '0');
-    const day = String(today.getDate()).padStart(2, '0');
-    const formattedDate = `${year}-${month}-${day}`;
-    const parseOperatingHours = (operatingHours) => {
-        const [start, end] = operatingHours.split('-');
-        const [startHour, startMinute] = start.split(':').map(Number);
-        const [endHour, endMinute] = end.split(':').map(Number);
+    useEffect(() => {
+        if (!selectedTable || !restaurant) return; // If table or restaurant is not loaded, return early
 
-        const startTime = new Date();
-        startTime.setHours(startHour, startMinute, 0, 0);
+        // Filter time slots based on the selected table
+        const currentTime = new Date();
+        const filteredSlots = selectedTable.timeSlots.filter(timeSlot => new Date(timeSlot) >= currentTime);
+        setFilteredTimeSlots(filteredSlots);
+    }, [selectedTable, restaurant]);
 
-        const endTime = new Date();
-        endTime.setHours(endHour < startHour ? endHour + 24 : endHour, endMinute, 0, 0);
 
-        return { startTime, endTime };
+    const formatTimeSlot = (timeSlot) => {
+        const date = new Date(timeSlot);
+        const formattedDate = date.toLocaleDateString();
+        const formattedTime = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        return `${formattedDate} - ${formattedTime}`;
     };
 
-    const generateTimeOptions = (operatingHours) => {
-        const { startTime, endTime } = parseOperatingHours(operatingHours);
-        const now = new Date();
-
-        const selectedDateObj = new Date(selectedDate);
-        const isToday = selectedDateObj.toDateString() === now.toDateString();
-
-        let currentTime = isToday ? roundToNext15Minutes(new Date()) : new Date(startTime);
-
-        const options = [];
-        while (currentTime <= endTime) {
-            options.push(currentTime.toTimeString().slice(0, 5));
-            currentTime = new Date(currentTime.getTime() + 15 * 60 * 1000);
-        }
-
-        return options;
+    const handleTableSelect = (event) => {
+        const selectedTableId = event.target.value;
+        setSelectedTableId(selectedTableId);
     };
 
-    useEffect(() => {
-        if (restaurant && selectedDate) {
-            const options = generateTimeOptions(restaurant.operatingHours);
-            setTimeOptions(options);
-        }
-    }, [restaurant, selectedDate]);
-
-    const handleTableSelect = (event) => {
-        setSelectedTableId(event.target.value);
+    const handleTimeSlotSelect = (event) => {
+        const selectedTimeSlot = event.target.value;
+        setSelectedTimeSlot(selectedTimeSlot);
     };
 
-    const handleReservationConfirmation = () => {
-        const encodedTableId = encodeURIComponent(selectedTableId);
-        const encodedDateTime = encodeURIComponent(`${selectedDate}T${selectedTime}`);
-        const encodedRestaurantId = encodeURIComponent(restaurant.restaurantId);
+    const handleReservationConfirmation = (restaurant) => {
+        const tableNumber = selectedTableId;
+        const formattedTimeSlot = selectedTimeSlot;
+        const restaurantId = restaurant.restaurantId;
 
-        const totalPrice = preOrderedItems.reduce((acc, item) => acc + item.price * item.quantity, 0).toFixed(2);
+        const encodedTableNumber = encodeURIComponent(tableNumber);
+        const encodedTimeSlot = encodeURIComponent(formattedTimeSlot);
+        const encodedRestaurantId = encodeURIComponent(restaurantId);
 
-        navigate(`/reservationConfirmation/${encodedTableId}/${encodedDateTime}/${encodedRestaurantId}`, {
-            state: {
-                preOrderedItems: preOrderedItems,
-                totalPrice: totalPrice,
-            }
-        });
+        navigate(`/reservationConfirmation/${encodedTableNumber}/${encodedTimeSlot}/${encodedRestaurantId}`);
     };
 
-    const roundToNext15Minutes = (date) => {
-        const minutes = date.getMinutes();
-        const remainder = minutes % 15;
-        if (remainder === 0) return date;
-
-        date.setMinutes(minutes + 15 - remainder);
-        date.setSeconds(0, 0);
-        return date;
-    };
 
     return (
@@ -127,5 +91,5 @@
                 <>
                     <h2 className="card-title">
-                        {restaurant.name} <StarRating key={restaurant.id} rating={restaurant.rating} />
+                        {restaurant.name} <StarRating key={restaurant.id} rating={restaurant.rating}/>
                     </h2>
                     <div className="restaurant-details">
@@ -134,63 +98,30 @@
                         <p>Address: {restaurant.address}</p>
                         <p>Phone: {restaurant.phone}</p>
-                        <p>
-                            Website: <a href={restaurant.website}>{restaurant.website}</a>
-                        </p>
+                        <p>Website: <a href={restaurant.website}>{restaurant.website}</a></p>
                         <p>Social Media Links: {restaurant.socialMediaLinks}</p>
 
                         <label>Select Table:</label>
-                        <select
-                            className="form-select"
-                            aria-label="Select Table"
-                            onChange={handleTableSelect}
-                            value={selectedTableId}
-                        >
+                        <select className="form-select" aria-label="Select Table" onChange={handleTableSelect}
+                                value={selectedTableId}>
                             <option value="">Select Table</option>
-                            {restaurant.tablesList.map((table) => (
-                                <option key={table.id} value={table.id}>
-                                    {`Capacity: ${table.capacity} - ${table.location}`}
-                                </option>
+                            {restaurant.tablesList.map((table, index) => (
+                                <option key={index}
+                                        value={table.id}>{`Capacity: ${table.capacity} - ${table.location}`}</option>
                             ))}
                         </select>
-
                         {selectedTable && (
                             <>
-                                <label>Select Date:</label>
-                                <input
-                                    type="date"
-                                    className="form-control mt-2"
-                                    onChange={(event) => setSelectedDate(event.target.value)}
-                                    value={selectedDate}
-                                    min={formattedDate}
-                                    onKeyDown={(e) => e.preventDefault()}
-                                />
-                                {!selectedDate && <p style={{ color: "red" }}>Please select a valid date.</p>}
-
-                                <label>Select Time:</label>
-                                <select
-                                    className="form-select mt-2"
-                                    onChange={(event) => setSelectedTime(event.target.value)}
-                                    value={selectedTime}
-                                    disabled={!selectedDate}
-                                >
-                                    <option value="">Select Time</option>
-                                    {timeOptions.map((time, index) => (
-                                        <option key={index} value={time}>
-                                            {time}
-                                        </option>
+                                <label>Select Time Slot:</label>
+                                <select className="form-select mt-2" aria-label="Select Time Slot" onChange={handleTimeSlotSelect}>
+                                    <option value="">Select Time Slot</option>
+                                    {filteredTimeSlots.map((timeSlot, index) => (
+                                        <option key={index} value={timeSlot}>{formatTimeSlot(timeSlot)}</option>
                                     ))}
                                 </select>
                             </>
                         )}
-                        <MenuList
-                            restaurantId={restaurant.restaurantId}
-                            setPreOrderedItems={setPreOrderedItems}
-                            preOrderedItems={preOrderedItems}
-                        />
-                        <br />
-                        <button
-                            className="btn btn-primary"
-                            onClick={handleReservationConfirmation}
-                            disabled={!selectedTableId || !selectedDate || !selectedTime}>
+                        <br/>
+                        {/* Add a button to trigger reservation confirmation */}
+                        <button className="btn btn-primary" onClick={() => handleReservationConfirmation(restaurant)}>
                             Confirm Reservation
                         </button>
