Index: my-react-app/src/components/Reservations.js
===================================================================
--- my-react-app/src/components/Reservations.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ my-react-app/src/components/Reservations.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
@@ -1,13 +1,11 @@
-import React, {useState, useEffect, useContext} from 'react';
+import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import {useNavigate} from "react-router-dom";
-import {jwtDecode} from "jwt-decode";
-import {RestaurantContext} from "./RestaurantContext";
 
 
 const Reservations = () => {
     const navigate = useNavigate();
-    const { restaurants } = useContext(RestaurantContext);
+
     const [reservations, setReservations] = useState([]);
 
@@ -15,13 +13,5 @@
         const fetchReservations = async () => {
             try {
-                const token = localStorage.getItem("token");
-                if (!token) {
-                    console.error("No token found");
-                    return;
-                }
-                const decodedToken = jwtDecode(token);
-                const userId = decodedToken.iss;
-
-                const response = await axios.get(`http://localhost:8081/api/reservations/by/${userId}`);
+                const response = await axios.get('http://localhost:8080/api/reservations'); // Adjust URL as needed
                 setReservations(response.data);
             } catch (error) {
@@ -41,5 +31,5 @@
     const handleCancelReservation = async (reservationID) => {
         try {
-            await axios.delete(`http://localhost:8081/api/reservations/delete/${reservationID}`);
+            await axios.delete(`http://localhost:8080/api/reservations/delete/${reservationID}`);
             setReservations(reservations.filter(reservation => reservation.reservationID !== reservationID));
             alert('Reservation canceled successfully!');
@@ -49,82 +39,49 @@
         }
     };
+
+
     return (
         <div className="container">
+            <h2>Reservations</h2>
             <div className="row">
-                {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: {
-                                        restaurants.find(r => r.restaurantId === reservation.restaurantId)?.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>
-                                    {reservation.preOrderedItems && reservation.preOrderedItems.length > 0 ? (
-                                        <div className="mt-3">
-                                            <h5 className="text-primary">Pre-Ordered Items:</h5>
-                                            <ul className="list-group mb-3">
-                                                {reservation.preOrderedItems.map((item, index) => (
-                                                    <li key={index} className="list-group-item d-flex justify-content-between align-items-center">
-                                                        <span><strong>{item?.preorderedItemName}</strong> × {item.quantity}</span>
-                                                        <span className="badge bg-success rounded-pill">${(item.price * item.quantity).toFixed(2)}</span>
-                                                    </li>
-                                                ))}
-                                            </ul>
-
-                                            <div className="alert alert-info text-center" role="alert">
-                                                <h5>Grand Total: ${reservation.preOrderedItems.reduce((acc, item) => acc + (item.quantity * item.price), 0).toFixed(2)}</h5>
-                                            </div>
-                                        </div>
-                                    ) : (
-                                        <p>No pre-ordered items.</p>
-                                    )}
-                                    <p className="card-text text-danger">Special Requests: {reservation.specialRequests || "None"}</p>
-                                    <p className="card-text">Status: {reservation.status || "Pending"}</p>
-                                    <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
+                {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
                                         </button>
-                                        <button
-                                            className="btn btn-danger"
-                                            onClick={() => handleCancelReservation(reservation.reservationID)}>
-                                            Cancel Reservation
+                                    </div>
+                                    <div className="col">
+                                        <button className="danger text-bg-danger border-0"
+                                                onClick={() => handleCancelReservation(reservation.reservationID)}>Cancel
+                                            Reservation
                                         </button>
                                     </div>
@@ -132,11 +89,12 @@
                             </div>
                         </div>
-                    ))
-                )}
+                    </div>
+                ))}
             </div>
         </div>
     );
+    p
+
 };
 
 export default Reservations;
-
