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>
