Index: my-react-app/src/components/ReservationConfirmation.js
===================================================================
--- my-react-app/src/components/ReservationConfirmation.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ my-react-app/src/components/ReservationConfirmation.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
@@ -3,16 +3,9 @@
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
-import { useLocation } from 'react-router-dom';
-import { jwtDecode } from "jwt-decode";
-import {request} from "../axios_helper";
-import restaurants from "./Restaurants";
 
 const ReservationConfirmation = () => {
     const navigate = useNavigate();
 
-    const location = useLocation();
-    const preOrderedItems = location.state?.preOrderedItems || [];
     const [restaurant, setRestaurant] = useState({});
-    const [user, setUser] = useState({});
     const [table, setTable] = useState({});
     const [reservationDateTime, setReservationDateTime] = useState('');
@@ -21,77 +14,46 @@
     const { tableNumber, timeSlot, restaurantId } = useParams();
 
-    const adjustedTimeSlot = new Date(new Date(timeSlot).getTime() + 60 * 60 * 1000).toISOString();
     useEffect(() => {
-        const fetchDetails = async () => {
+        const fetchTableDetails = async () => {
             try {
-                const tableResponse = await axios.get(`http://localhost:8081/api/tables/${tableNumber}`);
+                const tableResponse = await axios.get(`http://localhost:8080/api/tables/${tableNumber}`);
                 setTable(tableResponse.data);
-                const restaurantResponse = await axios.get(`http://localhost:8081/api/restaurants/${restaurantId}`);
+
+                const restaurantResponse = await axios.get(`http://localhost:8080/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 or restaurant details:', error);
+                console.error('Error fetching table details:', error);
             }
         };
-        fetchDetails();
+        fetchTableDetails();
     }, [tableNumber, restaurantId]);
 
     const handleSubmit = async (e) => {
         e.preventDefault();
+        // Handle form submission here
+        try {
+            // Check if restaurant and table are valid
+            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),
-            restaurantId: restaurant.restaurantId,
-            reservationDateTime: adjustedTimeSlot,
-            partySize: parseInt(partySize, 10),
-            status: 'Reserved',
-            specialRequests: specialRequests.trim(),
-            paymentStatus: 'Pending',
-            preOrderedItems: preOrderedItems.map(item => ({
-                preorderedItemName: item.itemName,
-                quantity: item.quantity,
-                price: item.price,
-                menuID: item.menuID
-            }))
-        };
-
-
-        try {
-            const response = await axios.post('http://localhost:8081/api/reservations', payload, {
-                headers: {
-                    'Content-Type': 'application/json'
-                }
+            const response = await axios.post(`http://localhost:8080/api/reservations`, {
+                restaurant: restaurant, // Assuming restaurant has an 'id' property
+                table: table, // Assuming table has an 'id' property
+                checkInTime: timeSlot, // Fill in as needed
+                partySize: partySize,
+                specialRequests: specialRequests
             });
+            // Handle successful reservation creation
+            // console.log("Reservation created:", 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.');
-            }
+            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, 10));
+    const [remainingTime, setRemainingTime] = useState(parseInt(initialRemainingTime));
 
     useEffect(() => {
@@ -99,5 +61,5 @@
             setRemainingTime((prevTime) => {
                 const newTime = prevTime - 1;
-                localStorage.setItem('remainingTime', newTime.toString());
+                localStorage.setItem('remainingTime', newTime.toString()); // Update remaining time in localStorage
                 return newTime;
             });
@@ -108,10 +70,10 @@
 
     useEffect(() => {
+        // Reset remaining time if it reaches zero
         if (remainingTime <= 0) {
             localStorage.removeItem('remainingTime');
-            alert("Time has expired. Please try reserving again.");
-            navigate('/restaurants');
+            // Optionally, handle releasing the hold on the table
         }
-    }, [remainingTime, navigate]);
+    }, [remainingTime]);
 
     const formatTime = (timeInSeconds) => {
@@ -120,17 +82,4 @@
         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}`;
-    };
-
-    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 (
@@ -147,60 +96,29 @@
                                 <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> {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 />
+                                    <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/>
                                 </p>
                                 <p className="card-text text-success">
-                                    <strong>
-                                        Check-in Time: Grace period of 15 minutes +/- the slot. For more information, call the restaurant.
-                                    </strong>
-                                    <br />
+                                    <strong>Check-in Time: grace period of 15 minutes +- the slot, for more call the
+                                        restaurant</strong><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">
                                 <button type="submit" className="btn btn-primary">Submit</button>
-                                <a href="/restaurants" className="btn btn-secondary mx-2">Back to Restaurants</a>
-                                <a href="/" className="btn btn-secondary">Back to Home</a>
+                            </div>
+                            <div className="col-md-6">
+                                <a href="/restaurants" className="btn btn-primary">Back to Home</a>
                             </div>
                         </form>
                     </div>
                 </div>
+
             </div>
         </div>
