Index: my-react-app/src/components/AppContent.js
===================================================================
--- my-react-app/src/components/AppContent.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
+++ my-react-app/src/components/AppContent.js	(revision f5b256e5542dc70faf511ecc16ef87cc3d52cce5)
@@ -15,5 +15,5 @@
             isAuthenticated: false,
             user: null,
-            loading: false // Add loading state
+            loading: false
         };
     }
@@ -29,12 +29,15 @@
 
     fetchUserDetails = (token) => {
-        console.log("Fetch");
+        console.log("Fetching User Details...");
         axios.get("/api/user")
             .then((response) => {
-                this.setState({ user: response.data, componentToShow: "restaurants", isAuthenticated: true });
+                this.setState({
+                    user: response.data,
+                    componentToShow: "restaurants",
+                    isAuthenticated: true
+                });
             })
             .catch((error) => {
                 console.error("Failed to fetch user details:", error);
-                this.logout();
             });
     };
@@ -52,12 +55,12 @@
     onLogin = (e, email, password) => {
         e.preventDefault();
-        // After successful login, save the token
+
         axios.post("/api/login", { email, password })
             .then((response) => {
                 const token = response.data.token;
-                localStorage.setItem('token', token);  // Save the token
-                console.log(token);
-                this.setAuthToken(token);  // Set the token for future requests
-                this.setState({ componentToShow: "restaurants", isAuthenticated: true });
+                localStorage.setItem('token', token);
+                console.log("Login Token:", token);
+                this.setAuthToken(token);
+                this.fetchUserDetails(token);
             })
             .catch((error) => {
@@ -65,5 +68,4 @@
                 this.setState({ componentToShow: "welcome" });
             });
-
     };
 
@@ -93,13 +95,29 @@
 
     render() {
+        if (this.state.isAuthenticated) {
+            return (
+                <div>
+                    <Buttons login={this.login} logout={this.logout} />
+                    <AuthContent />
+                </div>
+            );
+        }
+
         return (
             <div>
                 <Buttons login={this.login} logout={this.logout} />
                 {this.state.componentToShow === "welcome" && <WelcomeContent />}
-                {this.state.componentToShow === "restaurants" && <AuthContent />}
                 {this.state.componentToShow === "login" && <LoginForm onLogin={this.onLogin} onRegister={this.onRegister} />}
-                {this.state.loading && <div>Loading...</div>} {/* Show loading state */}
             </div>
         );
+        // return (
+        //     <div>
+        //         <Buttons login={this.login} logout={this.logout} />
+        //         {this.state.componentToShow === "welcome" && <WelcomeContent />}
+        //         {this.state.componentToShow === "restaurants" && <AuthContent />}
+        //         {this.state.componentToShow === "login" && <LoginForm onLogin={this.onLogin} onRegister={this.onRegister} />}
+        //         {this.state.loading && <div>Loading...</div>} {/* Show loading state */}
+        //     </div>
+        // );
     }
 }
Index: my-react-app/src/components/AuthContent.js
===================================================================
--- my-react-app/src/components/AuthContent.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
+++ my-react-app/src/components/AuthContent.js	(revision f5b256e5542dc70faf511ecc16ef87cc3d52cce5)
@@ -10,12 +10,24 @@
     }
 
+    // componentDidMount() {
+    //     request(
+    //         "GET",
+    //         "/api/restaurants",
+    //         []
+    //     ).then((response) => {
+    //         this.setState({ data: response.data });
+    //     });
+    // }
     componentDidMount() {
-        request(
-            "GET",
-            "/api/restaurants",
-            []
-        ).then((response) => {
-            this.setState({ data: response.data });
-        });
+        const token = localStorage.getItem('token');
+        console.log("Stored Token on Reload:", token);
+
+        if (token) {
+            this.setAuthToken(token);
+            this.fetchUserDetails(token);
+        } else {
+            console.log("No token found. Redirecting to login.");
+            this.setState({ componentToShow: "login", isAuthenticated: false });
+        }
     }
 
Index: my-react-app/src/components/Header.js
===================================================================
--- my-react-app/src/components/Header.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
+++ my-react-app/src/components/Header.js	(revision f5b256e5542dc70faf511ecc16ef87cc3d52cce5)
@@ -1,17 +1,44 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import { Link, useNavigate } from 'react-router-dom';
+import {jwtDecode} from "jwt-decode";
+import axios from "axios";
 
 const Header = () => {
     const navigate = useNavigate();
-
-    // Check if the user is logged in by looking for a token in localStorage
+    const [user, setUser] = useState({});
     const isLoggedIn = localStorage.getItem('token');
 
     const handleLogout = () => {
-        // Clear the token from localStorage
-        localStorage.removeItem('token');
-        // Redirect to the home page or login page after logging out
-        navigate('/login');
+        localStorage.removeItem("token");
+        localStorage.removeItem("user");
+        setUser(null);
+        navigate("/login");
+
     };
+
+    useEffect(() => {
+        const fetchUser = async () => {
+            try {
+                const token = localStorage.getItem("token");
+                if (!token) return;
+
+                const storedUser = localStorage.getItem("user");
+                if (storedUser) {
+                    setUser(JSON.parse(storedUser));
+                    return;
+                }
+
+                const decodedToken = jwtDecode(token);
+                const userId = decodedToken.iss;
+
+                const { data } = await axios.get(`http://localhost:8081/api/user/${userId}`);
+                setUser(data);
+                localStorage.setItem("user", JSON.stringify(data));
+            } catch (error) {
+                console.error("Error fetching user:", error);
+            }
+        };
+        fetchUser();
+    }, [isLoggedIn]);
 
     return (
@@ -37,7 +64,9 @@
                         <form className="form-inline mt-2 mt-md-0 ml-3">
                             {isLoggedIn ? (
-                                <button className="btn btn-outline-danger my-2 my-sm-0" onClick={handleLogout}>Logout</button>
+                                <button className="btn btn-outline-danger ml-3" onClick={handleLogout}>
+                                    Logout {user?.firstName}
+                                </button>
                             ) : (
-                                <Link className="btn btn-outline-info my-2 my-sm-0" to="/login">Login</Link>
+                                <Link className="btn btn-outline-info ml-3" to="/login">Login</Link>
                             )}
                         </form>
Index: my-react-app/src/components/Login.js
===================================================================
--- my-react-app/src/components/Login.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
+++ my-react-app/src/components/Login.js	(revision f5b256e5542dc70faf511ecc16ef87cc3d52cce5)
@@ -22,10 +22,8 @@
             const { token } = response.data;
 
-            // Store token securely (consider httpOnly cookies)
             localStorage.setItem('token', token);
 
             navigate("/")
         } catch (error) {
-            // Handle login failure
             console.error('Login failed:', error);
             setError('Login failed. Please check your credentials and try again.');
Index: my-react-app/src/components/ReservationConfirmation.js
===================================================================
--- my-react-app/src/components/ReservationConfirmation.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
+++ my-react-app/src/components/ReservationConfirmation.js	(revision f5b256e5542dc70faf511ecc16ef87cc3d52cce5)
@@ -4,4 +4,6 @@
 import { useNavigate } from 'react-router-dom';
 import {jwtDecode} from "jwt-decode";
+import {request} from "../axios_helper";
+import restaurants from "./Restaurants";
 
 const ReservationConfirmation = () => {
@@ -9,4 +11,5 @@
 
     const [restaurant, setRestaurant] = useState({});
+    const [user, setUser] = useState({});
     const [table, setTable] = useState({});
     const [reservationDateTime, setReservationDateTime] = useState('');
@@ -15,6 +18,7 @@
     const { tableNumber, timeSlot, restaurantId } = useParams();
 
+    const adjustedTimeSlot = new Date(new Date(timeSlot).getTime() + 60 * 60 * 1000).toISOString();
     useEffect(() => {
-        const fetchTableDetails = async () => {
+        const fetchDetails = async () => {
             try {
                 const tableResponse = await axios.get(`http://localhost:8081/api/tables/${tableNumber}`);
@@ -23,9 +27,20 @@
                 const restaurantResponse = await axios.get(`http://localhost:8081/api/restaurants/${restaurantId}`);
                 setRestaurant(restaurantResponse.data);
+
+                const token = localStorage.getItem("token");
+                if (!token) {
+                    console.error("No token found");
+                    return;
+                }
+                const decodedToken = jwtDecode(token);
+                const userId = decodedToken.iss;
+
+                const userResponse = await axios.get(`http://localhost:8081/api/user/${userId}`);
+                setUser(userResponse.data);
             } catch (error) {
-                console.error('Error fetching table details:', error);
+                console.error('Error fetching table or restaurant details:', error);
             }
         };
-        fetchTableDetails();
+        fetchDetails();
     }, [tableNumber, restaurantId]);
 
@@ -33,45 +48,39 @@
         e.preventDefault();
 
-        if (!restaurant || !table) {
-            console.error("Restaurant or table is missing.");
-            return;
-        }
+        const payload = {
+            reservationID: 0,
+            userEmail: user.email,
+            rating: parseFloat(restaurant.rating) || null,
+            tableNumber: parseInt(table.id, 10),
+            restaurant: restaurant,
+            reservationDateTime: adjustedTimeSlot,
+            partySize: parseInt(partySize, 10),
+            status: 'Reserved',
+            specialRequests: specialRequests.trim(),
+            paymentStatus: 'Pending',
+        };
+
 
         try {
-            const token = localStorage.getItem("token");
-            if (!token) {
-                console.error("No token found");
-                return;
+            const response = await axios.post('http://localhost:8081/api/reservations', payload);
+            console.log('Reservation created successfully:', response.data);
+            navigate("/reservations")
+        } catch (error) {
+            if (error.response) {
+                alert('The selected time slot is no longer available. Please choose another time.');
+            } else {
+                alert('Network error. Please check your internet connection.');
             }
-
-            // Decode the token to get the user email
-            const decodedToken = jwtDecode(token);
-            console.log(decodedToken)
-            const userId = decodedToken.iss;// Assuming the email is part of the decoded JWT token
-
-            const response = await axios.post(
-                `http://localhost:8081/api/reservations/${userId}`,
-                {
-                    restaurant: restaurant,
-                    table: table,
-                    checkInTime: timeSlot,
-                    partySize: partySize,
-                    specialRequests: specialRequests
-                },
-                {
-                    headers: {
-                        Authorization: `Bearer ${token}` // Include the token here
-                    }
-                }
-            );
-
-            navigate("/reservations");
-        } catch (error) {
-            console.error("Error creating reservation:", error);
         }
     };
 
+    const calculateCheckOutTime = (checkInTime) => {
+        const checkIn = new Date(checkInTime);
+        checkIn.setHours(checkIn.getHours() + 2);
+        return checkIn.toISOString();
+    };
+
     const initialRemainingTime = localStorage.getItem('remainingTime') || 300;
-    const [remainingTime, setRemainingTime] = useState(parseInt(initialRemainingTime));
+    const [remainingTime, setRemainingTime] = useState(parseInt(initialRemainingTime, 10));
 
     useEffect(() => {
@@ -79,5 +88,5 @@
             setRemainingTime((prevTime) => {
                 const newTime = prevTime - 1;
-                localStorage.setItem('remainingTime', newTime.toString()); // Update remaining time in localStorage
+                localStorage.setItem('remainingTime', newTime.toString());
                 return newTime;
             });
@@ -88,10 +97,10 @@
 
     useEffect(() => {
-        // Reset remaining time if it reaches zero
         if (remainingTime <= 0) {
             localStorage.removeItem('remainingTime');
-            // Optionally, handle releasing the hold on the table
+            alert("Time has expired. Please try reserving again.");
+            navigate('/restaurants'); // Redirect or take necessary action
         }
-    }, [remainingTime]);
+    }, [remainingTime, navigate]);
 
     const formatTime = (timeInSeconds) => {
@@ -99,4 +108,12 @@
         const seconds = timeInSeconds % 60;
         return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    };
+
+    const formatTimeSlot = (timeSlot) => {
+        const utcDate = new Date(timeSlot);
+        const localDate = new Date(utcDate.toLocaleString("en-US", { timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone }));
+        const formattedDate = localDate.toLocaleDateString();
+        const formattedTime = localDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        return `${formattedDate} - ${formattedTime}`;
     };
 
@@ -114,32 +131,38 @@
                                 <h5 className="card-title">Reservation Details</h5>
                                 <p className="card-text">
-                                    <strong>Restaurant:</strong> {restaurant.name || 'Loading...'} <br/>
-                                    <strong>Cuisine type:</strong> {restaurant.cuisineType || 'Loading...'} <br/>
-                                    <strong>Selected Time Slot:</strong> {timeSlot} <br/>
-                                    <strong>Party size:</strong> <input type="number" max={table.capacity}
-                                                                        value={partySize}
-                                                                        onChange={(e) => setPartySize(e.target.value)}/>
-                                    <strong>Table size:</strong> {table.capacity} <br/>
-                                    <strong>Special Requests:</strong> <input type="text" value={specialRequests}
-                                                                              onChange={(e) => setSpecialRequests(e.target.value)}/><br/>
+                                    <strong>Restaurant:</strong> {restaurant.name || 'Loading...'} <br />
+                                    <strong>Cuisine type:</strong> {restaurant.cuisineType || 'Loading...'} <br />
+                                    <strong>Selected Time Slot:</strong> {formatTimeSlot(timeSlot)} <br />
+                                    <strong>Party size:</strong>{' '}
+                                    <input
+                                        type="number"
+                                        max={table.capacity}
+                                        value={partySize}
+                                        onChange={(e) => setPartySize(e.target.value)}
+                                    />
+                                    <strong>Table size:</strong> {table.capacity} <br />
+                                    <strong>Special Requests:</strong>{' '}
+                                    <input
+                                        type="text"
+                                        value={specialRequests}
+                                        onChange={(e) => setSpecialRequests(e.target.value)}
+                                    />
+                                    <br />
                                 </p>
                                 <p className="card-text text-success">
-                                    <strong>Check-in Time: grace period of 15 minutes +- the slot, for more call the
-                                        restaurant</strong><br/>
+                                    <strong>
+                                        Check-in Time: Grace period of 15 minutes +/- the slot. For more information, call the restaurant.
+                                    </strong>
+                                    <br />
                                 </p>
                             </div>
                             <div className="card-footer">
                                 <button type="submit" className="btn btn-primary">Submit</button>
-                            </div>
-                            <div className="card-footer">
-                                <a href="/restaurants" className="btn btn-primary">Back to Restaurants</a>
-                            </div>
-                            <div className="card-footer">
-                                <a href="/" className="btn btn-primary">Back to Home</a>
+                                <a href="/restaurants" className="btn btn-secondary mx-2">Back to Restaurants</a>
+                                <a href="/" className="btn btn-secondary">Back to Home</a>
                             </div>
                         </form>
                     </div>
                 </div>
-
             </div>
         </div>
Index: my-react-app/src/components/ReservationEdit.js
===================================================================
--- my-react-app/src/components/ReservationEdit.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
+++ my-react-app/src/components/ReservationEdit.js	(revision f5b256e5542dc70faf511ecc16ef87cc3d52cce5)
@@ -7,13 +7,21 @@
 const ReservationEdit = () => {
     const navigate = useNavigate();
-
+    const { reservationId } = useParams();
     const [isLoading, setIsLoading] = useState(true);
-    const { reservationId } = useParams(); // Extract reservationId from URL params
     const [formData, setFormData] = useState({});
+    const [tableNumber, setTableNumber] = useState({});
     const [table, setTable] = useState({});
     const [restaurant, setRestaurant] = useState({});
+    const [restaurantId, setRestaurantId] = useState({});
     const [timeSlots, setTimeSlots] = useState([]);
     const [filteredTimeSlots, setFilteredTimeSlots] = useState([]);
     const [checkInTime, setCheckInTime] = useState([]);
+    const [tableReservations, setTableReservations] = useState([]);
+
+    const timeSlotInterval = 15;
+
+    const [selectedDate, setSelectedDate] = useState('');
+    const [selectedTime, setSelectedTime] = useState('');
+    const [timeOptions, setTimeOptions] = useState([]);
 
     useEffect(() => {
@@ -22,9 +30,14 @@
                 setIsLoading(true);
                 const response = await axios.get(`http://localhost:8081/api/reservations/${reservationId}`);
-                setCheckInTime(response.data.checkInTime)
+                console.log(response)
+                setCheckInTime(response.data.reservationDateTime);
                 setFormData(response.data);
-                setTable(response.data.table);
-                setRestaurant(response.data.restaurant);
-                setTimeSlots(response.data.table.timeSlots);
+                setRestaurant(response.data.restaurantName);
+                setRestaurantId(response.data.restaurantId);
+
+                setTableNumber(response.data.tableNumber);
+                const tableResponse = await axios.get(`http://localhost:8081/api/tables/${response.data.tableNumber}`);
+                setTable(tableResponse.data)
+
                 setIsLoading(false);
             } catch (error) {
@@ -32,28 +45,98 @@
             }
         };
+
         fetchReservation();
     }, [reservationId]);
 
     useEffect(() => {
-        if (!table || !restaurant) return; // If table or restaurant is not loaded, return early
-
-        const currentTime = new Date();
-
-        const filteredSlots = timeSlots.filter(timeSlot => new Date(timeSlot) >= currentTime);
-        setFilteredTimeSlots(filteredSlots);
-    }, [table, restaurant]);
+        const fetchTableReservations = async () => {
+            try {
+                const response = await axios.get(`http://localhost:8081/api/table-reservations/${table.tableId}`);
+                setTableReservations(response.data);
+                setIsLoading(false);
+            } catch (error) {
+                console.error('Error fetching table reservations:', error);
+            }
+        };
+
+        if (table?.tableId) {
+            fetchTableReservations();
+        }
+    }, [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 isToday = selectedDateObj.toDateString() === now.toDateString();
+        const isTomorrow = selectedDateObj > now && selectedDateObj.getDate() === now.getDate() + 1;
+
+        let currentTime;
+
+        if (isToday) {
+            currentTime = roundToNext15Minutes(new Date());
+        } else {
+            currentTime = 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;
+    };
+
+    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 handleInputChange = (e) => {
         const { name, value } = e.target;
 
-        // Check if the changed input is the time slot select element
-        if (name === 'selectedTimeSlot') {
-            // Update the formData with the selected time slot value
-            setFormData({ ...formData, checkInTime: value });
+        if (name === 'partySize') {
+            const valueAsNumber = Math.min(value, table?.capacity);
+            setFormData(prevState => ({
+                ...prevState,
+                [name]: valueAsNumber
+            }));
         } else {
-            // For other input fields, update formData as usual
-            setFormData({ ...formData, [name]: value });
-        }
-    };
+            setFormData(prevState => ({
+                ...prevState,
+                [name]: value
+            }));
+        }
+    };
+
 
     const handleSubmit = async (e) => {
@@ -68,10 +151,24 @@
 
             const decodedToken = jwtDecode(token);
-            console.log(decodedToken)
             const userId = decodedToken.iss;
 
-            await axios.post(`http://localhost:8081/api/reservations/${reservationId}/${userId}`, formData);
-
-            navigate(`/reservations`)
+            const updatedReservationData = {
+                ...formData,
+                reservationDateTime: `${selectedDate}T${selectedTime}`,
+                checkInTime: checkInTime,
+                reservationID: reservationId,
+            };
+            await axios.post(
+                `http://localhost:8081/api/reservations/${reservationId}/${userId}`,
+                updatedReservationData,
+                {
+                    headers: {
+                        'Content-Type': 'application/json',
+                    }
+                }
+            );
+            console.log(updatedReservationData)
+
+            navigate(`/reservations`);
         } catch (error) {
             console.error('Error updating reservation:', error);
@@ -86,14 +183,36 @@
     };
 
-    const formatCurrentTimeSlot = (timeSlot) => {
-        const date = new Date(timeSlot);
-        const formattedDate = date.toLocaleDateString('en-GB'); // Format date as YYYY-MM-DD
-        const formattedTime = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); // Format time as HH:MM
-        return `${formattedDate} ${formattedTime}`;
-    };
+    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('-');
+        return {
+            startTime: new Date(`1970-01-01T${start}:00`),
+            endTime: new Date(`1970-01-01T${end}:00`)
+        };
+    };
+
+    useEffect(() => {
+        if (formData?.restaurant?.operatingHours && selectedDate) {
+            const options = generateTimeOptions(formData.restaurant.operatingHours);
+            setTimeOptions(options);
+        }
+    }, [restaurant, selectedDate]);
+
+        // useEffect(() => {
+        //     if (checkInTime) {
+        //         const checkInDateObj = new Date(checkInTime);
+        //         setSelectedDate(checkInDateObj.toISOString().split("T")[0]);
+        //         setSelectedTime(checkInDateObj.toTimeString().slice(0, 5));
+        //     }
+        // }, [checkInTime]);
 
     return (
         <div className="container">
-            {isLoading ? ( // Conditional rendering based on loading state
+            {isLoading ? (
                 <p>Loading...</p>
             ) : (
@@ -101,35 +220,67 @@
                     <h1>Edit Reservation</h1>
                     <div className="card-body">
-                        <h2>
-                            {restaurant.name} <StarRating key={restaurant.id} rating={restaurant.rating}/>
+                        <h2 className="card-title">
+                            {formData.restaurant.name} <StarRating key={formData.restaurant.id} rating={formData.restaurant.rating} />
                         </h2>
-                        <p className="card-text">{restaurant.cuisineType}</p>
-                        <p className="card-text">{restaurant.operatingHours}</p>
-                        <p className="card-text">Ul. {restaurant.address}</p>
-                        <br/>
+                        <p className="card-text">{formData.restaurant.name}</p>
+                        <p className="card-text">{formData.restaurant.operatingHours}</p>
+                        <p className="card-text">Ul. {formData.restaurant.address}</p>
+                        <br />
                     </div>
                     <form onSubmit={handleSubmit}>
                         <div className="mb-3">
-                            <label htmlFor="checkInTime" className="form-label">Check-in Time</label>
-                            <select className="form-select mt-2" aria-label="Select Time Slot"
-                                    name="selectedTimeSlot" // Add name attribute
-                                    onChange={handleInputChange}>
-                                <option value="">Select Time Slot</option>
-                                {filteredTimeSlots.map((timeSlot, index) => (
-                                    <option key={index} value={timeSlot}>{formatTimeSlot(timeSlot)}</option>
+                            <label>Select Date:</label>
+                            <input
+                                type="date"
+                                className="form-control mt-2"
+                                onChange={(event) => setSelectedDate(event.target.value)}
+                                value={selectedDate}
+                                min={formattedDate}
+                            />
+
+                            <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>
                                 ))}
                             </select>
-                            <label className=".text-danger">Current check in time: {formatTimeSlot(checkInTime)}</label>
+                            <label className="text-danger">
+                                Current check-in time: {formatTimeSlot(checkInTime)}
+                            </label>
                         </div>
                         <div className="mb-3">
                             <label htmlFor="partySize" className="form-label">Party Size</label>
-                            <input type="number" className="form-control" id="partySize" name="partySize"
-                                   max={table.capacity}
-                                   value={formData.partySize || ''} onChange={handleInputChange}/>
+                            <input
+                                type="number"
+                                className="form-control"
+                                id="partySize"
+                                name="partySize"
+                                max={table?.capacity}
+                                min={1}
+                                value={formData.partySize || ''}
+                                onChange={handleInputChange}
+                            />
+                            <label className="text-danger">
+                                Table capacity: {table?.capacity}
+                            </label>
                         </div>
                         <div className="mb-3">
-                        <label htmlFor="specialRequests" className="form-label">Special Requests</label>
-                            <input type="text" className="form-control" id="specialRequests" name="specialRequests"
-                                   value={formData.specialRequests || ''} onChange={handleInputChange}/>
+                            <label htmlFor="specialRequests" className="form-label">Special Requests</label>
+                            <input
+                                type="text"
+                                className="form-control"
+                                id="specialRequests"
+                                name="specialRequests"
+                                value={formData.specialRequests || ''}
+                                onChange={handleInputChange}
+                            />
                         </div>
                         <button type="submit" className="btn btn-primary">Submit</button>
@@ -139,5 +290,4 @@
         </div>
     );
-
 };
 
Index: my-react-app/src/components/ReservationHistory.js
===================================================================
--- my-react-app/src/components/ReservationHistory.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
+++ my-react-app/src/components/ReservationHistory.js	(revision f5b256e5542dc70faf511ecc16ef87cc3d52cce5)
@@ -5,6 +5,16 @@
 const ReservationHistory = () => {
     const [reservations, setReservations] = useState([]);
+    const [filteredReservations, setFilteredReservations] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
+
+    const [restaurantFilter, setRestaurantFilter] = useState("");
+    const [tableFilter, setTableFilter] = useState("");
+    const [partySizeFilter, setPartySizeFilter] = useState("");
+    const [statusFilter, setStatusFilter] = useState("");
+    const [cancellationReasonFilter, setCancellationReasonFilter] = useState("");
+
+    const [startDate, setStartDate] = useState("");
+    const [endDate, setEndDate] = useState("");
 
     useEffect(() => {
@@ -29,4 +39,5 @@
 
                 setReservations(response.data);
+                setFilteredReservations(response.data);
             } catch (err) {
                 setError("Failed to fetch reservations.");
@@ -39,4 +50,64 @@
     }, []);
 
+    useEffect(() => {
+        let tempReservations = reservations;
+
+        if (restaurantFilter) {
+            tempReservations = tempReservations.filter(res =>
+                res.restaurant?.name.toLowerCase().includes(restaurantFilter.toLowerCase())
+            );
+        }
+        if (tableFilter) {
+            tempReservations = tempReservations.filter(res =>
+                res.table?.id?.toString() === tableFilter
+            );
+        }
+        if (partySizeFilter) {
+            tempReservations = tempReservations.filter(res =>
+                res.partySize?.toString() === partySizeFilter
+            );
+        }
+        if (statusFilter) {
+            tempReservations = tempReservations.filter(res =>
+                res.status.toLowerCase().includes(statusFilter.toLowerCase())
+            );
+        }
+        if (cancellationReasonFilter) {
+            tempReservations = tempReservations.filter(res =>
+                (res.cancellationReason || "None").toLowerCase().includes(cancellationReasonFilter.toLowerCase())
+            );
+        }
+        if (startDate && endDate) {
+            const start = new Date(startDate);
+            const end = new Date(endDate);
+
+            tempReservations = tempReservations.filter(res => {
+                const reservationDate = new Date(res.reservationDateTime);
+                return reservationDate >= start && reservationDate <= end;
+            });
+        }
+
+        setFilteredReservations(tempReservations);
+    }, [
+        restaurantFilter,
+        tableFilter,
+        partySizeFilter,
+        statusFilter,
+        cancellationReasonFilter,
+        startDate,
+        endDate,
+        reservations
+    ]);
+
+    const resetFilters = () => {
+        setRestaurantFilter("");
+        setTableFilter("");
+        setPartySizeFilter("");
+        setStatusFilter("");
+        setCancellationReasonFilter("");
+        setStartDate("");
+        setEndDate("");
+    };
+
     if (loading) return <div>Loading...</div>;
     if (error) return <div className="alert alert-danger">{error}</div>;
@@ -44,33 +115,116 @@
     return (
         <div className="container mt-5">
-            <h3>Past Reservations</h3>
-            <table className="table table-bordered">
-                <thead className="thead-dark">
-                <tr>
-                    <th>#</th>
-                    <th>Restaurant</th>
-                    <th>Table</th>
-                    <th>Date & Time</th>
-                    <th>Party Size</th>
-                    <th>Special Requests</th>
-                    <th>Status</th>
-                    <th>Cancellation Reason</th>
-                </tr>
-                </thead>
-                <tbody>
-                {reservations.map((res, index) => (
-                    <tr key={res.id}>
-                        <td>{index + 1}</td>
-                        <td>{res.restaurant?.name || "N/A"}</td>
-                        <td>{res.table?.id || "N/A"}</td>
-                        <td>{new Date(res.reservationDateTime).toLocaleString()}</td>
-                        <td>{res.partySize}</td>
-                        <td>{res.specialRequests || "None"}</td>
-                        <td>{res.status}</td>
-                        <td>{res.cancellationReason || "None"}</td>
+            <h3 className="mb-4 text-center">Past Reservations</h3>
+
+            <div className="row mb-4 align-items-end">
+                <div className="col-md-2">
+                    <input
+                        type="text"
+                        className="form-control"
+                        placeholder="Filter by Restaurant"
+                        value={restaurantFilter}
+                        onChange={(e) => setRestaurantFilter(e.target.value)}
+                    />
+                </div>
+                <div className="col-md-2">
+                    <input
+                        type="number"
+                        className="form-control"
+                        placeholder="Filter by Table ID"
+                        value={tableFilter}
+                        onChange={(e) => setTableFilter(e.target.value)}
+                    />
+                </div>
+                <div className="col-md-4 d-flex gap-2">
+                    <input
+                        type="date"
+                        className="form-control"
+                        placeholder="Start date"
+                        value={startDate}
+                        onChange={(e) => setStartDate(e.target.value)}
+                    />
+                    <input
+                        type="date"
+                        className="form-control"
+                        placeholder="End date"
+                        value={endDate}
+                        onChange={(e) => setEndDate(e.target.value)}
+                    />
+                </div>
+                <div className="col-md-2">
+                    <input
+                        type="number"
+                        className="form-control"
+                        placeholder="Filter by Party Size"
+                        value={partySizeFilter}
+                        onChange={(e) => setPartySizeFilter(e.target.value)}
+                    />
+                </div>
+                <div className="col-md-2">
+                    <select
+                        value={statusFilter}
+                        onChange={(e) => setStatusFilter(e.target.value)}
+                        className="form-control"
+                    >
+                        <option value="">Filter by status</option>
+                        <option value="successful">Successful</option>
+                        <option value="canceled">Canceled</option>
+                    </select>
+                </div>
+                <div className="col-md-2 mt-2">
+                    <input
+                        type="text"
+                        className="form-control"
+                        placeholder="Filter by Cancellation Reason"
+                        value={cancellationReasonFilter}
+                        onChange={(e) => setCancellationReasonFilter(e.target.value)}
+                    />
+                </div>
+                <div className="col-md-2 mt-2">
+                    <button
+                        onClick={resetFilters}
+                        className="btn btn-outline-secondary w-100"
+                    >
+                        Reset Filters
+                    </button>
+                </div>
+            </div>
+
+            <div className="table-responsive">
+                <table className="table table-striped table-hover table-bordered align-middle">
+                    <thead className="table-dark text-center">
+                    <tr>
+                        <th>#</th>
+                        <th>Restaurant</th>
+                        <th>Table</th>
+                        <th>Date & Time</th>
+                        <th>Party Size</th>
+                        <th>Special Requests</th>
+                        <th>Status</th>
+                        <th>Cancellation Reason</th>
                     </tr>
-                ))}
-                </tbody>
-            </table>
+                    </thead>
+                    <tbody>
+                    {filteredReservations.length > 0 ? (
+                        filteredReservations.map((res, index) => (
+                            <tr key={res.id}>
+                                <td>{index + 1}</td>
+                                <td>{res.restaurant?.name || "N/A"}</td>
+                                <td>{res.table?.id || "N/A"}</td>
+                                <td>{new Date(res.reservationDateTime).toLocaleString()}</td>
+                                <td>{res.partySize}</td>
+                                <td>{res.specialRequests || "None"}</td>
+                                <td>{res.status}</td>
+                                <td>{res.cancellationReason || "None"}</td>
+                            </tr>
+                        ))
+                    ) : (
+                        <tr>
+                            <td colSpan="8" className="text-center">No reservations found.</td>
+                        </tr>
+                    )}
+                    </tbody>
+                </table>
+            </div>
         </div>
     );
Index: my-react-app/src/components/Reservations.js
===================================================================
--- my-react-app/src/components/Reservations.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
+++ my-react-app/src/components/Reservations.js	(revision f5b256e5542dc70faf511ecc16ef87cc3d52cce5)
@@ -20,5 +20,4 @@
                 }
                 const decodedToken = jwtDecode(token);
-                console.log(decodedToken)
                 const userId = decodedToken.iss;
 
@@ -49,49 +48,57 @@
         }
     };
-
-
     return (
         <div className="container">
-            <h2>Reservations</h2>
             <div className="row">
-                {reservations.map(reservation => (
-                    <div key={reservation.reservationID} className="col-md-4 mb-4">
-                        <div className="card">
-                            <div className="card-body">
-                                <div className="card-title">Reservation ID: {reservation.reservationID}</div>
-                                <div className="card-text">Restaurant: {reservation.restaurant.name}</div>
-                                <div className="card-text">Table Number: {reservation.table.id}</div>
-                                {/* Format reservation date and time */}
-                                <div className="card-text">Reservation
-                                    Date: {new Date(reservation.checkInTime).toLocaleDateString('en-US', {
-                                        weekday: 'long',
-                                        year: 'numeric',
-                                        month: 'long',
-                                        day: 'numeric'
-                                    })}</div>
-                                <div className="card-text">Reservation
-                                    Time: {new Date(reservation.checkInTime).toLocaleTimeString('en-US', {
-                                        hour: 'numeric',
-                                        minute: 'numeric',
-                                        hour12: true
-                                    })}</div>
-                                {/* End of formatted date and time */}
-                                <div className="card-text">Party Size: {reservation.partySize}</div>
-                                <div className="card-text text-danger">Special
-                                    Requests: {reservation.specialRequests}</div>
-                                <div className="card-text">Status: {reservation.status}</div>
-                                <div className="card-text text-danger">Grace period of 15 minutes +-</div>
-                                <br/>
-                                <div className="row">
-                                    <div className="col">
-                                        <button className="danger text-bg-warning border-0"
-                                                onClick={() => handleEditReservation(reservation.reservationID)}>Edit
-                                            Reservation
+                {reservations.length === 0 ? (
+                    <div className="text-center mt-5">
+                        <h4>No active reservations</h4>
+                        <p>Looking for a place to dine? Check out our <a href="/restaurants" className="text-primary">restaurants</a>.</p>
+                    </div>
+                ) : (
+                    reservations.map(reservation => (
+                        <div key={reservation.reservationID} className="col-md-4 mb-4">
+                            <div className="card h-100">
+                                <div className="card-body">
+                                    <h5 className="card-title">Reservation ID: {reservation.reservationID}</h5>
+                                    <p className="card-text">Restaurant: {reservation?.restaurant.name || "Not specified"}</p>
+                                    <p className="card-text">Table Number: {reservation?.tableNumber || "Not specified"}</p>
+                                    <p className="card-text">
+                                        Reservation Date: {reservation.checkInTime ?
+                                        new Date(reservation.checkInTime).toLocaleDateString('en-US', {
+                                            weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
+                                        }) :
+                                        "Not specified"}
+                                    </p>
+                                    <p className="card-text">
+                                        Reservation Time: {reservation.checkInTime ?
+                                        new Date(reservation.checkInTime).toLocaleTimeString('en-US', {
+                                            hour: 'numeric', minute: 'numeric', hour12: true
+                                        }) :
+                                        "Not specified"}
+                                    </p>
+                                    <p className="card-text">Reservation made on: {reservation.reservationDateTime ?
+                                        new Date(reservation.reservationDateTime).toLocaleTimeString('en-US', {
+                                            hour: 'numeric', minute: 'numeric', hour12: true
+                                        }) :
+                                        "Not specified"}  {reservation.reservationDateTime ?
+                                        new Date(reservation.reservationDateTime).toLocaleDateString('en-US', {
+                                            weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
+                                        }) :
+                                        "Not specified"} </p>
+                                    <p className="card-text">Party Size: {reservation.partySize || "Not specified"}</p>
+                                    <p className="card-text text-danger">Special Requests: {reservation.specialRequests || "None"}</p>
+                                    <p className="card-text">Status: {reservation.status || "Pending"}</p>
+                                    <p className="card-text text-danger">Grace period of 15 minutes +-</p>
+                                    <div className="d-flex justify-content-between mt-3">
+                                        <button
+                                            className="btn btn-warning"
+                                            onClick={() => handleEditReservation(reservation.reservationID)}>
+                                            Edit Reservation
                                         </button>
-                                    </div>
-                                    <div className="col">
-                                        <button className="danger text-bg-danger border-0"
-                                                onClick={() => handleCancelReservation(reservation.reservationID)}>Cancel
-                                            Reservation
+                                        <button
+                                            className="btn btn-danger"
+                                            onClick={() => handleCancelReservation(reservation.reservationID)}>
+                                            Cancel Reservation
                                         </button>
                                     </div>
@@ -99,12 +106,11 @@
                             </div>
                         </div>
-                    </div>
-                ))}
+                    ))
+                )}
             </div>
         </div>
     );
-    p
-
 };
 
 export default Reservations;
+
Index: my-react-app/src/components/RestaurantContext.js
===================================================================
--- my-react-app/src/components/RestaurantContext.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
+++ my-react-app/src/components/RestaurantContext.js	(revision f5b256e5542dc70faf511ecc16ef87cc3d52cce5)
@@ -17,5 +17,5 @@
         };
 
-        fetchRestaurants().then(r => console.log(fetchRestaurants()));
+        fetchRestaurants();
     }, []);
 
Index: my-react-app/src/components/RestaurantDetails.js
===================================================================
--- my-react-app/src/components/RestaurantDetails.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
+++ my-react-app/src/components/RestaurantDetails.js	(revision f5b256e5542dc70faf511ecc16ef87cc3d52cce5)
@@ -6,14 +6,15 @@
 import StarRating from "./StarRating";
 
+
 const RestaurantDetails = () => {
     const navigate = useNavigate();
+    const { id } = useParams();
 
-    const { id } = useParams();
     const [restaurant, setRestaurant] = useState(null);
     const [selectedTableId, setSelectedTableId] = useState('');
-    const [selectedTimeSlot, setSelectedTimeSlot] = useState('');
+    const [selectedDate, setSelectedDate] = useState('');
+    const [selectedTime, setSelectedTime] = useState('');
+    const [timeOptions, setTimeOptions] = useState([]);
     const [selectedTable, setSelectedTable] = useState(null);
-    const [filteredTimeSlots, setFilteredTimeSlots] = useState([]);
-    const [selectedCapacity, setSelectedCapacity] = useState(''); // Define selectedCapacity state
 
     useEffect(() => {
@@ -32,5 +33,5 @@
 
     useEffect(() => {
-        if (!selectedTableId) return; // If no table is selected, return early
+        if (!selectedTableId) return;
 
         const fetchTableDetails = async () => {
@@ -46,43 +47,69 @@
     }, [selectedTableId]);
 
-    useEffect(() => {
-        if (!selectedTable || !restaurant) return; // If table or restaurant is not loaded, return early
+    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);
 
-        // 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 startTime = new Date();
+        startTime.setHours(startHour, startMinute, 0, 0);
 
+        const endTime = new Date();
+        endTime.setHours(endHour < startHour ? endHour + 24 : endHour, endMinute, 0, 0);
 
-    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}`;
+        return { startTime, endTime };
     };
 
-    const handleTableSelect = (event) => {
-        const selectedTableId = event.target.value;
-        setSelectedTableId(selectedTableId);
+    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 handleTimeSlotSelect = (event) => {
-        const selectedTimeSlot = event.target.value;
-        setSelectedTimeSlot(selectedTimeSlot);
+    useEffect(() => {
+        if (restaurant && selectedDate) {
+            const options = generateTimeOptions(restaurant.operatingHours);
+            setTimeOptions(options);
+        }
+    }, [restaurant, selectedDate]);
+
+    const handleTableSelect = (event) => {
+        setSelectedTableId(event.target.value);
     };
 
-    const handleReservationConfirmation = (restaurant) => {
-        const tableNumber = selectedTableId;
-        const formattedTimeSlot = selectedTimeSlot;
-        const restaurantId = restaurant.restaurantId;
+    const handleReservationConfirmation = () => {
+        const encodedTableId = encodeURIComponent(selectedTableId);
+        const encodedDateTime = encodeURIComponent(`${selectedDate}T${selectedTime}`);
+        const encodedRestaurantId = encodeURIComponent(restaurant.restaurantId);
 
-        const encodedTableNumber = encodeURIComponent(tableNumber);
-        const encodedTimeSlot = encodeURIComponent(formattedTimeSlot);
-        const encodedRestaurantId = encodeURIComponent(restaurantId);
-
-        navigate(`/reservationConfirmation/${encodedTableNumber}/${encodedTimeSlot}/${encodedRestaurantId}`);
+        navigate(`/reservationConfirmation/${encodedTableId}/${encodedDateTime}/${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 (
@@ -91,5 +118,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">
@@ -98,30 +125,60 @@
                         <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, index) => (
-                                <option key={index}
-                                        value={table.id}>{`Capacity: ${table.capacity} - ${table.location}`}</option>
+                            {restaurant.tablesList.map((table) => (
+                                <option key={table.id} value={table.id}>
+                                    {`Capacity: ${table.capacity} - ${table.location}`}
+                                </option>
                             ))}
                         </select>
+
                         {selectedTable && (
                             <>
-                                <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>
+                                <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>
                                     ))}
                                 </select>
                             </>
                         )}
-                        <br/>
-                        {/* Add a button to trigger reservation confirmation */}
-                        <button className="btn btn-primary" onClick={() => handleReservationConfirmation(restaurant)}>
+
+                        <br />
+                        <button
+                            className="btn btn-primary"
+                            onClick={handleReservationConfirmation}
+                            disabled={!selectedTableId || !selectedDate || !selectedTime}
+                        >
                             Confirm Reservation
                         </button>
Index: my-react-app/src/components/Restaurants.js
===================================================================
--- my-react-app/src/components/Restaurants.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
+++ my-react-app/src/components/Restaurants.js	(revision f5b256e5542dc70faf511ecc16ef87cc3d52cce5)
@@ -4,4 +4,21 @@
 import { useNavigate } from 'react-router-dom';
 import {RestaurantContext} from "./RestaurantContext";
+import {Alert} from "bootstrap";
+
+const parseTime = (timeString) => {
+    const [hours, minutes] = timeString.trim().split(':').map(Number);
+    return new Date().setHours(hours, minutes, 0, 0);
+};
+
+const roundToNextQuarter = (date) => {
+    const minutes = date.getMinutes();
+    const roundedMinutes = Math.floor(minutes / 15) * 15;
+    date.setMinutes(roundedMinutes, 0, 0);
+    return date;
+};
+
+const shouldMoveToNextDay = (currentTime, endTime) => {
+    return (endTime - currentTime) <= 2 * 60 * 60 * 1000;
+};
 
 const Restaurants = () => {
@@ -14,7 +31,31 @@
     }, [restaurantContext]);
 
+
+    const generateTimeSlots = (operatingHours) => {
+        const timeSlots = [];
+        const [startTimeStr, endTimeStr] = operatingHours.split('-').map((time) => time.trim());
+
+        const startTime = parseTime(startTimeStr);
+        let endTime = parseTime(endTimeStr);
+
+        const currentTime = new Date().getTime();
+        if (shouldMoveToNextDay(currentTime, endTime)) {
+            endTime += 24 * 60 * 60 * 1000;
+        }
+
+        let currentTimeSlot = new Date(startTime);
+        currentTimeSlot = roundToNextQuarter(currentTimeSlot);
+
+        while (currentTimeSlot.getTime() < endTime) {
+            timeSlots.push(currentTimeSlot.toISOString());
+            currentTimeSlot.setMinutes(currentTimeSlot.getMinutes() + 15);
+        }
+
+        return timeSlots;
+    };
+
     const handleDetailClick = (restaurantId) => {
         navigate(`/restaurants/${restaurantId}`);
-    }
+    };
 
     const handleTimeSlotClick = (table, timeSlot, restaurant) => {
@@ -23,40 +64,49 @@
         const restaurantId = restaurant.restaurantId;
 
-        const encodedTableNumber = encodeURI(tableNumber);
+        const encodedTableNumber = encodeURIComponent(tableNumber);
         const encodedTimeSlot = encodeURIComponent(formattedTimeSlot);
         const encodedRestaurantId = encodeURIComponent(restaurantId);
 
         navigate(`/reservationConfirmation/${encodedTableNumber}/${encodedTimeSlot}/${encodedRestaurantId}`);
-    }
+    };
 
     const renderTimeSlots = (tablesList, restaurant) => {
         const currentTime = new Date().getTime();
-        let renderedTimeSlots = {}; // Object to store rendered slots for each table capacity
+        let renderedTimeSlots = {};
 
-        return tablesList.flatMap(table => {
-            // Render capacity header when encountering a new capacity
+        if (tablesList.length === 0) {
+            return <p>No tables available for reservations at this restaurant.</p>;
+        }
+
+        return tablesList.flatMap((table) => {
+            const tableTimeSlots = generateTimeSlots(restaurant.operatingHours);
+
             if (!renderedTimeSlots[table.capacity]) {
                 renderedTimeSlots[table.capacity] = 0;
                 return (
                     <div key={table.capacity}>
-                        <h3>Table for: {table.capacity}</h3>
-                        {table.timeSlots.map((timeSlot, index) => {
+                        <h3>Table for {table.capacity} guests</h3>
+                        {tableTimeSlots.map((timeSlot, index) => {
                             const timeSlotTime = new Date(timeSlot).getTime();
-                            const tableCapacity = table.capacity;
 
-                            // Check if the time slot is after the current time and limit to 3 slots
-                            if (timeSlotTime > currentTime && renderedTimeSlots[tableCapacity] < 3) {
-                                renderedTimeSlots[tableCapacity]++;
+                            if (timeSlotTime > currentTime && renderedTimeSlots[table.capacity] < 3) {
+                                renderedTimeSlots[table.capacity]++;
                                 const timeSlotDateTime = new Date(timeSlot);
-                                const formattedTime = timeSlotDateTime.toLocaleTimeString();
-                                const formattedDateTime = timeSlotDateTime.toLocaleString(); // Format for both date and time
+                                const formattedTime = timeSlotDateTime.toLocaleTimeString([], {
+                                    hour: '2-digit',
+                                    minute: '2-digit'
+                                });
 
                                 return (
-                                    <button key={index} className="btn btn-primary me-2 mb-2" onClick={() => handleTimeSlotClick(table, timeSlot, restaurant)}>
-                                        {formattedDateTime} {/* Display both date and time */}
+                                    <button
+                                        key={index}
+                                        className="btn btn-primary me-2 mb-2"
+                                        onClick={() => handleTimeSlotClick(table, timeSlot, restaurant)}
+                                    >
+                                        {formattedTime} {}
                                     </button>
                                 );
                             } else {
-                                return null; // Render nothing if the condition is not met
+                                return null;
                             }
                         })}
@@ -64,11 +114,8 @@
                 );
             } else {
-                // If capacity has been rendered, return null to avoid duplicate rendering
                 return null;
             }
         });
-
-    }
-
+    };
 
     return (
@@ -77,19 +124,24 @@
             <div className="row">
                 {restaurants.map((restaurant) => (
-                    <div key={restaurant.id} className="col-md-4 mb-4">
+                    <div key={restaurant.restaurantId} className="col-md-4 mb-4">
                         <div className="card">
                             <div className="card-body">
                                 <h5 className="card-title">
-                                    {restaurant.name} <StarRating key={restaurant.id} rating={restaurant.rating}/>
+                                    {restaurant.name}
                                 </h5>
                                 <p className="card-text">{restaurant.cuisineType}</p>
                                 <p className="card-text">{restaurant.operatingHours}</p>
                                 <p className="card-text">Ul. {restaurant.address}</p>
-                                <div className="d-flex flex-wrap">
-                                    {renderTimeSlots(restaurant.tablesList.flatMap((table) => table), restaurant)}
-                                </div>
+
+                                {restaurant.tablesList && restaurant.tablesList.length > 0 ? (
+                                    <div className="d-flex flex-wrap">
+                                        {renderTimeSlots(restaurant.tablesList, restaurant)}
+                                    </div>
+                                ) : (
+                                    <p>No tables available for reservations at this restaurant.</p>
+                                )}
                             </div>
-                            <button onClick={() => handleDetailClick(restaurant.restaurantId)}
-                                    className="btn btn-primary">View Details
+                            <button onClick={() => handleDetailClick(restaurant.restaurantId)} className="btn btn-primary">
+                                View Details
                             </button>
                         </div>
Index: my-react-app/src/components/TimeSlotList.js
===================================================================
--- my-react-app/src/components/TimeSlotList.js	(revision f5b256e5542dc70faf511ecc16ef87cc3d52cce5)
+++ my-react-app/src/components/TimeSlotList.js	(revision f5b256e5542dc70faf511ecc16ef87cc3d52cce5)
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const TimeSlotList = ({ timeSlots }) => {
+    return (
+        <div>
+            <h3>Available Time Slots</h3>
+            {timeSlots.length > 0 ? (
+                <ul>
+                    {timeSlots.map((slot, index) => (
+                        <li key={index}>{slot}</li>
+                    ))}
+                </ul>
+            ) : (
+                <p>No available time slots.</p>
+            )}
+        </div>
+    );
+};
+
+export default TimeSlotList;
