Index: my-react-app/src/components/MenuList.js
===================================================================
--- my-react-app/src/components/MenuList.js	(revision e15e8d976a275ebb70018ca698e8c0f11b3f09df)
+++ my-react-app/src/components/MenuList.js	(revision e15e8d976a275ebb70018ca698e8c0f11b3f09df)
@@ -0,0 +1,99 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+const MenuList = ({ restaurantId, onPreOrderChange, setPreOrderedItems, preOrderedItems }) => {
+    const [menuItems, setMenuItems] = useState([]);
+    const [preOrder, setPreOrder] = useState([]);
+
+    const handleItemSelect = (item) => {
+        setPreOrderedItems(prevItems => [...prevItems, item]);
+    };
+
+    const handleItemToggle = (item) => {
+        setPreOrderedItems(prevItems => {
+            const exists = prevItems.find(i => i.id === item.id);
+            if (exists) {
+                return prevItems.filter(i => i.id !== item.id); // remove
+            } else {
+                return [...prevItems, item]; // add
+            }
+        });
+    };
+
+    useEffect(() => {
+        const fetchMenu = async () => {
+            try {
+                const response = await axios.get(`http://localhost:8081/api/restaurant-menu/${restaurantId}`);
+                setMenuItems(response.data);
+            } catch (err) {
+                console.error('Failed to fetch menu:', err);
+            }
+        };
+        if (restaurantId) {
+            fetchMenu();
+        }
+    }, [restaurantId]);
+
+    const handleAddToPreOrder = (item) => {
+        const existingItem = preOrder.find((i) => i.menuID === item.menuID);
+
+        let updatedPreOrder;
+        if (existingItem) {
+            updatedPreOrder = preOrder.map((i) =>
+                i.menuID === item.menuID ? { ...i, quantity: i.quantity + 1 } : i
+            );
+        } else {
+            updatedPreOrder = [...preOrder, { ...item, quantity: 1 }];
+        }
+
+        setPreOrder(updatedPreOrder);
+        setPreOrderedItems(updatedPreOrder);
+    };
+
+    const calculateTotal = () => {
+        return preOrder.reduce((acc, item) => acc + item.price * item.quantity, 0).toFixed(2);
+    };
+
+    return (
+        <div className="container mt-4">
+            <h3 className="text-center">Menu</h3>
+            <div className="row">
+                {menuItems.map((item) => (
+                    <div key={item.menuID} className="col-md-4 mb-4">
+                        <div className="card h-100 shadow-sm">
+                            <div className="card-body d-flex flex-column">
+                                <h5 className="card-title">{item.itemName}</h5>
+                                <p className="card-text">{item.description}</p>
+                                <h6 className="card-subtitle mb-2 text-muted">${item.price.toFixed(2)}</h6>
+                                <button
+                                    className="btn btn-outline-success mt-auto"
+                                    onClick={() => handleAddToPreOrder(item)}
+                                >
+                                    Add to Pre-Order
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {preOrder.length > 0 && (
+                <div className="mt-5">
+                    <h4>Pre-Order Summary</h4>
+                    <ul className="list-group">
+                        {preOrder.map((item) => (
+                            <li key={item.menuID} className="list-group-item d-flex justify-content-between align-items-center">
+                                {item.itemName} (x{item.quantity})
+                                <span>${(item.price * item.quantity).toFixed(2)}</span>
+                            </li>
+                        ))}
+                    </ul>
+                    <h5 className="mt-3">Total: ${calculateTotal()}</h5>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default MenuList;
Index: my-react-app/src/components/ReservationConfirmation.js
===================================================================
--- my-react-app/src/components/ReservationConfirmation.js	(revision f5b256e5542dc70faf511ecc16ef87cc3d52cce5)
+++ my-react-app/src/components/ReservationConfirmation.js	(revision e15e8d976a275ebb70018ca698e8c0f11b3f09df)
@@ -3,5 +3,6 @@
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
-import {jwtDecode} from "jwt-decode";
+import { useLocation } from 'react-router-dom';
+import { jwtDecode } from "jwt-decode";
 import {request} from "../axios_helper";
 import restaurants from "./Restaurants";
@@ -10,4 +11,6 @@
     const navigate = useNavigate();
 
+    const location = useLocation();
+    const preOrderedItems = location.state?.preOrderedItems || [];
     const [restaurant, setRestaurant] = useState({});
     const [user, setUser] = useState({});
@@ -59,4 +62,5 @@
             specialRequests: specialRequests.trim(),
             paymentStatus: 'Pending',
+            preOrderedItems: preOrderedItems.map(item => `${item.itemName}:${item.quantity}:${item.price}`)
         };
 
@@ -117,4 +121,9 @@
         return `${formattedDate} - ${formattedTime}`;
     };
+
+    const grandTotal = preOrderedItems.reduce((acc, item) => acc + item.price * item.quantity, 0).toFixed(2);
+    const itemQuantityString = preOrderedItems
+        .map(item => `${item.itemName}:${item.quantity}`)
+        .join(',');
 
     return (
@@ -156,4 +165,26 @@
                                     <br />
                                 </p>
+                                {preOrderedItems.length > 0 ? (
+                                    <div className="row">
+                                        {preOrderedItems.map((item) => (
+                                            <div key={item.menuID} className="col-md-4 mb-4">
+                                                <div className="list-group shadow-sm p-3">
+                                                    <p className="item"><strong>Item:</strong> {item.itemName}</p>
+                                                    <p className="item"><strong>Price:</strong> ${item.price.toFixed(2)}</p>
+                                                    <p className="item"><strong>Quantity:</strong> {item.quantity}</p>
+                                                    <p className="item"><strong>Total:</strong> ${(item.price * item.quantity).toFixed(2)}</p>
+                                                </div>
+                                            </div>
+                                        ))}
+
+                                        <div className="col-12 mt-4">
+                                            <div className="list-group shadow-sm p-4 text-center">
+                                                <h4>Grand Total: ${grandTotal}</h4>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ) : (
+                                    <p>No pre-ordered items.</p>
+                                )}
                             </div>
                             <div className="card-footer">
Index: my-react-app/src/components/ReservationEdit.js
===================================================================
--- my-react-app/src/components/ReservationEdit.js	(revision f5b256e5542dc70faf511ecc16ef87cc3d52cce5)
+++ my-react-app/src/components/ReservationEdit.js	(revision e15e8d976a275ebb70018ca698e8c0f11b3f09df)
@@ -65,39 +65,26 @@
     }, [table]);
 
-    const generateTimeSlots = (operatingHours, interval) => {
-        const slots = [];
-        const [startTimeStr, endTimeStr] = operatingHours.split('-');
-        const [startHours, startMinutes] = startTimeStr.split(':').map(Number);
-        const [endHours, endMinutes] = endTimeStr.split(':').map(Number);
-
-        const startTime = new Date();
-        startTime.setHours(startHours, startMinutes, 0, 0);
-
-        const endTime = new Date();
-        endTime.setHours(endHours, endMinutes, 0, 0);
-
-        let currentTime = startTime;
-        while (currentTime <= endTime) {
-            slots.push(new Date(currentTime).toISOString());
-            currentTime = new Date(currentTime.getTime() + interval * 60000);
-        }
-
-        return slots;
-    };
-
     const generateTimeOptions = (operatingHours) => {
-        const { startTime, endTime } = parseOperatingHours(operatingHours);
         const now = new Date();
-
         const selectedDateObj = new Date(selectedDate);
+
+        const { startTime, endTime } = parseOperatingHours(operatingHours, selectedDateObj);
+
         const isToday = selectedDateObj.toDateString() === now.toDateString();
-        const isTomorrow = selectedDateObj > now && selectedDateObj.getDate() === now.getDate() + 1;
 
         let currentTime;
 
         if (isToday) {
-            currentTime = roundToNext15Minutes(new Date());
+            const roundedNow = roundToNext15Minutes(now);
+
+            if (roundedNow < startTime) {
+                currentTime = startTime;
+            } else if (roundedNow > endTime) {
+                return [];
+            } else {
+                currentTime = roundedNow;
+            }
         } else {
-            currentTime = new Date(startTime);
+            currentTime = startTime;
         }
 
@@ -111,14 +98,16 @@
     };
 
-    useEffect(() => {
-        const operatingHours = table?.restaurant?.operatingHours || "09:00-00:00";
-        const allTimeSlots = generateTimeSlots(operatingHours, timeSlotInterval);
-
-        const availableSlots = allTimeSlots.filter((slot) =>
-            !tableReservations.includes(slot)
-        );
-
-        setFilteredTimeSlots(availableSlots);
-    }, [tableReservations, table]);
+    const roundToNext15Minutes = (date) => {
+        const ms = 1000 * 60 * 15;
+        return new Date(Math.ceil(date.getTime() / ms) * ms);
+    };
+
+    useEffect(() => {
+        if (table?.restaurant?.operatingHours && selectedDate) {
+            const options = generateTimeOptions(table.restaurant.operatingHours);
+            setTimeOptions(options);
+        }
+    }, [table, selectedDate]);
+
 
     const handleInputChange = (e) => {
@@ -189,10 +178,17 @@
     const formattedDate = `${year}-${month}-${day}`;
 
-    const parseOperatingHours = (operatingHours) => {
+    const parseOperatingHours = (operatingHours, forDate) => {
         const [start, end] = operatingHours.split('-');
-        return {
-            startTime: new Date(`1970-01-01T${start}:00`),
-            endTime: new Date(`1970-01-01T${end}:00`)
-        };
+
+        const [startHour, startMinute] = start.split(':').map(Number);
+        const [endHour, endMinute] = end.split(':').map(Number);
+
+        const startTime = new Date(forDate);
+        startTime.setHours(startHour, startMinute, 0, 0);
+
+        const endTime = new Date(forDate);
+        endTime.setHours(endHour, endMinute, 0, 0);
+
+        return { startTime, endTime };
     };
 
Index: my-react-app/src/components/Reservations.js
===================================================================
--- my-react-app/src/components/Reservations.js	(revision f5b256e5542dc70faf511ecc16ef87cc3d52cce5)
+++ my-react-app/src/components/Reservations.js	(revision e15e8d976a275ebb70018ca698e8c0f11b3f09df)
@@ -24,4 +24,5 @@
                 const response = await axios.get(`http://localhost:8081/api/reservations/by/${userId}`);
                 setReservations(response.data);
+                console.log(response.data)
             } catch (error) {
                 console.error('Error fetching reservations:', error);
@@ -88,4 +89,35 @@
                                         "Not specified"} </p>
                                     <p className="card-text">Party Size: {reservation.partySize || "Not specified"}</p>
+                                    {reservation.preOrderedItems && reservation.preOrderedItems.length > 0 ? (
+                                        <div className="mt-3">
+                                            <h5 className="text-primary">Pre-Ordered Items:</h5>
+                                            <ul className="list-group mb-3">
+                                                {reservation.preOrderedItems.map((itemStr, index) => {
+                                                    const parts = itemStr.split(':');
+                                                    const name = parts[0];
+                                                    const quantity = parseInt(parts[1], 10) || 0;
+                                                    const price = parseFloat(parts[2]) || 0;
+
+                                                    return (
+                                                        <li key={index} className="list-group-item d-flex justify-content-between align-items-center">
+                                                            <span><strong>{name}</strong> × {quantity}</span>
+                                                            <span className="badge bg-success rounded-pill">${(price * quantity).toFixed(2)}</span>
+                                                        </li>
+                                                    );
+                                                })}
+                                            </ul>
+
+                                            <div className="alert alert-info text-center" role="alert">
+                                                <h5>Grand Total: ${reservation.preOrderedItems.reduce((acc, itemStr) => {
+                                                    const parts = itemStr.split(':');
+                                                    const quantity = parseInt(parts[1], 10) || 0;
+                                                    const price = parseFloat(parts[2]) || 0;
+                                                    return acc + (quantity * price);
+                                                }, 0).toFixed(2)}</h5>
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <p>No pre-ordered items.</p>
+                                    )}
                                     <p className="card-text text-danger">Special Requests: {reservation.specialRequests || "None"}</p>
                                     <p className="card-text">Status: {reservation.status || "Pending"}</p>
Index: my-react-app/src/components/RestaurantDetails.js
===================================================================
--- my-react-app/src/components/RestaurantDetails.js	(revision f5b256e5542dc70faf511ecc16ef87cc3d52cce5)
+++ my-react-app/src/components/RestaurantDetails.js	(revision e15e8d976a275ebb70018ca698e8c0f11b3f09df)
@@ -5,4 +5,5 @@
 import { useParams } from 'react-router-dom';
 import StarRating from "./StarRating";
+import MenuList from "./MenuList";
 
 
@@ -10,4 +11,5 @@
     const navigate = useNavigate();
     const { id } = useParams();
+    const [preOrderedItems, setPreOrderedItems] = useState([]);
 
     const [restaurant, setRestaurant] = useState(null);
@@ -100,6 +102,14 @@
         const encodedRestaurantId = encodeURIComponent(restaurant.restaurantId);
 
-        navigate(`/reservationConfirmation/${encodedTableId}/${encodedDateTime}/${encodedRestaurantId}`);
-    };
+        const totalPrice = preOrderedItems.reduce((acc, item) => acc + item.price * item.quantity, 0).toFixed(2);
+
+        navigate(`/reservationConfirmation/${encodedTableId}/${encodedDateTime}/${encodedRestaurantId}`, {
+            state: {
+                preOrderedItems: preOrderedItems,
+                totalPrice: totalPrice,
+            }
+        });
+    };
+
 
     const roundToNext15Minutes = (date) => {
@@ -174,11 +184,14 @@
                             </>
                         )}
-
+                        <MenuList
+                            restaurantId={restaurant.restaurantId}
+                            setPreOrderedItems={setPreOrderedItems}
+                            preOrderedItems={preOrderedItems}
+                        />
                         <br />
                         <button
                             className="btn btn-primary"
                             onClick={handleReservationConfirmation}
-                            disabled={!selectedTableId || !selectedDate || !selectedTime}
-                        >
+                            disabled={!selectedTableId || !selectedDate || !selectedTime}>
                             Confirm Reservation
                         </button>
Index: my-react-app/src/components/RestaurantInfo.js
===================================================================
--- my-react-app/src/components/RestaurantInfo.js	(revision f5b256e5542dc70faf511ecc16ef87cc3d52cce5)
+++ my-react-app/src/components/RestaurantInfo.js	(revision e15e8d976a275ebb70018ca698e8c0f11b3f09df)
@@ -1,4 +1,5 @@
 import React from 'react';
 import StarRating from "./StarRating";
+import MenuList from "./MenuList";
 
 const RestaurantInfo = ({ restaurant }) => {
@@ -8,7 +9,8 @@
                 {restaurant.name} <StarRating key={restaurant.id} rating={restaurant.rating}/>
             </h2>
-            <p className="card-text">{restaurant.cuisineType}</p> {/* Assuming cuisineType is provided */}
-            <p className="card-text">{restaurant.operatingHours}</p> {/* Assuming operatingHours is provided */}
-            <p className="card-text">Ul. {restaurant.address}</p> {/* Assuming address is provided */}
+            <p className="card-text">{restaurant.cuisineType}</p>
+            <p className="card-text">{restaurant.operatingHours}</p>
+            <p className="card-text">Ul. {restaurant.address}</p>
+            <MenuList restaurantId={restaurant.id} />
         </div>
     );
