Index: my-react-app/src/App.js
===================================================================
--- my-react-app/src/App.js	(revision 142c0f8187ceb8951505669639e95855fbe3be9e)
+++ my-react-app/src/App.js	(revision b67dfd3bdf1aa1bd3175c999b9eabd3c15eb7ea0)
@@ -1,9 +1,6 @@
 import {BrowserRouter as Router, Navigate, Route, Routes, useNavigate} from 'react-router-dom';
 
-import Customers from './components/Customers';
 import Layout from "./components/Layout";
 import React, {useContext, useEffect, useState} from 'react';
-import CustomerFormContainer from "./components/CustomerFormContainer";
-import CustomerDetails from "./components/CustomerDetails";
 import ErrorPage from "./components/ErrorPage";
 import Restaurants from "./components/Restaurants";
@@ -41,8 +38,4 @@
                 <Routes>
                     <Route path="/" element={<Home />} />
-                    <Route path="/customers" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<Customers />} />} />
-                    <Route path="/customers/add" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<CustomerFormContainer />} />} />
-                    <Route path="/customers/:id" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<CustomerDetails />} />} />
-                    <Route path="/customers/edit/:id" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<CustomerFormContainer />} />} />
                     <Route path="/restaurants" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<Restaurants />} />} />
                     <Route path="/restaurants/:id" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<RestaurantDetails />} />} />
Index: my-react-app/src/components/CustomerContext.js
===================================================================
--- my-react-app/src/components/CustomerContext.js	(revision 142c0f8187ceb8951505669639e95855fbe3be9e)
+++ 	(revision )
@@ -1,26 +1,0 @@
-import React, { createContext, useState, useEffect } from 'react';
-import axios from 'axios';
-
-export const CustomerContext = createContext();
-
-export const CustomerProvider = ({children}) => {
-    const[customers, setCustomers] = useState([]);
-
-    useEffect(() => {
-        const fetchCustomers = async () => {
-            try {
-                const response = await axios.get("http://localhost:8081/api/customers");
-                setCustomers(response.data)
-            } catch (error) {
-                console.log("Error fetching customers: ", error);
-            }
-        }
-        fetchCustomers()
-    }, []);
-
-    return(
-        <CustomerContext.Provider value={{customers}}>
-            {children}
-        </CustomerContext.Provider>
-    )
-}
Index: my-react-app/src/components/CustomerDetails.js
===================================================================
--- my-react-app/src/components/CustomerDetails.js	(revision 142c0f8187ceb8951505669639e95855fbe3be9e)
+++ 	(revision )
@@ -1,40 +1,0 @@
-import React, { useEffect, useState } from 'react';
-import axios from 'axios';
-import { useParams } from 'react-router-dom';
-
-const CustomerDetails = () => {
-    const { id } = useParams();
-    const [customer, setCustomer] = useState(null);
-
-    useEffect(() => {
-        const fetchCustomer = async () => {
-            try {
-                const response = await axios.get(`http://localhost:8081/api/customers/${id}`);
-                setCustomer(response.data);
-            } catch (error) {
-                console.error('Error fetching customer:', error);
-            }
-        };
-
-        fetchCustomer();
-    }, [id]);
-
-    if (!customer) {
-        return <div>Loading...</div>;
-    }
-
-    return (
-        <div>
-            <h2>Customer Details</h2>
-            <p className="card-text"><strong>Email:</strong> {customer.email}</p>
-            <p className="card-text"><strong>Phone:</strong> {customer.phone}</p>
-            <p className="card-text"><strong>Address:</strong> {customer.address}</p>
-            <p className="card-text"><strong>Membership
-                Level:</strong> {customer.membershipLevel}</p>
-            <p className="card-text"><strong>Registration
-                Date:</strong> {new Date(customer.registrationDate).toLocaleString()}</p>
-        </div>
-    );
-}
-
-export default CustomerDetails;
Index: my-react-app/src/components/CustomerFormContainer.js
===================================================================
--- my-react-app/src/components/CustomerFormContainer.js	(revision 142c0f8187ceb8951505669639e95855fbe3be9e)
+++ 	(revision )
@@ -1,77 +1,0 @@
-// CustomerFormContainer.js
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
-import CustomerForm from './CustomersForm';
-import MembershipsEnum from "./MembershipsEnum";
-import {useNavigate, useParams} from "react-router-dom";
-
-const CustomerFormContainer = () => {
-    const navigate = useNavigate();
-    const [formData, setFormData] = useState({
-        firstName: '',
-        lastName: '',
-        email: '',
-        password: '',
-        phone: '',
-        address: '',
-        membershipLevel: MembershipsEnum()[0]
-    });
-
-    const { id } = useParams();
-    const [customer, setCustomer] = useState(null);
-
-    useEffect(() => {
-        if (id) {
-            // Fetch customer data only if in edit mode
-            const fetchCustomer = async () => {
-                try {
-                    const response = await axios.get(`http://localhost:8081/api/customers/${id}`);
-                    const customerData = response.data;
-                    setFormData({
-                        firstName: customerData.firstName || '',
-                        lastName: customerData.lastName || '',
-                        email: customerData.email || '',
-                        password: '', // For security reasons, the password field should not be pre-filled
-                        phone: customerData.phone || '',
-                        address: customerData.address || '',
-                        membershipLevel: customerData.membershipLevel || MembershipsEnum()[0]
-                    });
-                } catch (error) {
-                    console.error('Error fetching customer:', error);
-                }
-            };
-
-            fetchCustomer();
-        }
-    }, [id]);
-
-    const handleChange = (e) => {
-        setFormData({ ...formData, [e.target.name]: e.target.value });
-    };
-
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        try {
-            if (customer) {
-                await axios.put(`http://localhost:8081/api/customers/edit/${customer.id}`, formData);
-            } else {
-                await axios.post("http://localhost:8081/api/customers", formData);
-            }
-            navigate("/customers");
-        } catch (error) {
-            navigate("/error");
-        }
-    };
-
-    return (
-        <CustomerForm
-            formData={formData}
-            handleChange={handleChange}
-            handleSubmit={handleSubmit}
-            membershipOptions={MembershipsEnum()}
-            isEdit={!!customer} // Pass a boolean indicating whether it's an update
-        />
-    );
-};
-
-export default CustomerFormContainer;
Index: my-react-app/src/components/Customers.js
===================================================================
--- my-react-app/src/components/Customers.js	(revision 142c0f8187ceb8951505669639e95855fbe3be9e)
+++ 	(revision )
@@ -1,66 +1,0 @@
-import 'bootstrap/dist/css/bootstrap.min.css';
-import React, {useContext, useEffect, useState} from "react";
-import axios from "axios";
-import { Link } from 'react-router-dom';
-import { useNavigate } from 'react-router-dom';
-import {CustomerContext} from "./CustomerContext";
-
-
-const Customers = () => {
-    const [customers, setCustomers] = useState([]);
-    const navigate = useNavigate();
-    const customersContext = useContext(CustomerContext);
-
-    useEffect(() => {
-        setCustomers(customersContext.customers)
-    }, [customersContext]);
-
-    const handleDetailClick = (customerId) => {
-        navigate(`/customers/${customerId}`);
-    }
-
-    const handleEditClick = (customerId) => {
-        navigate(`/customers/edit/${customerId}`);
-    }
-
-    const handleDeleteClick = async (customerId) => {
-        try {
-            await axios.delete(`http://localhost:8081/api/customers/delete/${customerId}`);
-            setCustomers(customers.filter(customer => customer.customerID !== customerId));
-            window.location.reload();
-        } catch (error) {
-            console.error("Error + " + error);
-        }
-    }
-
-    return (
-        <div className="container mt-4">
-            <h1 className="mb-4">Customer List</h1>
-            <div className="row row-cols-1 row-cols-md-3 g-4">
-                {customers
-                    .filter(customer => customer.role !== 'admin')
-                    .map((customer) => (
-                        <div className="col" key={customer.customerId}>
-                            <div className="card h-100">
-                                <div className="card-body">
-                                    <h5 className="card-title">{customer.firstName + " " + customer.lastName}</h5>
-                                    <p className="card-text"><strong>Email:</strong> {customer.email}</p>
-                                    <p className="card-text"><strong>Phone:</strong> {customer.phone}</p>
-                                    <p className="card-text"><strong>Address:</strong> {customer.address}</p>
-                                    <p className="card-text"><strong>Membership Level:</strong> {customer.membershipLevel}</p>
-                                    {/*<p className="card-text"><strong>Registration*/}
-                                    {/*    Date:</strong> {new Date(customer.registrationDate).toLocaleString()}</p>*/}
-                                </div>
-                                <button onClick={() => handleDetailClick(customer.customerId)}>View Details</button>
-                                <button onClick={() => handleEditClick(customer.customerId)}>Edit</button>
-                                <button onClick={() => handleDeleteClick(customer.customerId)}>DELETE</button>
-                            </div>
-                        </div>
-                    ))}
-            </div>
-        </div>
-    );
-
-}
-
-export default Customers;
Index: my-react-app/src/components/CustomersForm.js
===================================================================
--- my-react-app/src/components/CustomersForm.js	(revision 142c0f8187ceb8951505669639e95855fbe3be9e)
+++ 	(revision )
@@ -1,110 +1,0 @@
-import React from 'react';
-import MembershipsEnum from "./MembershipsEnum";
-
-const CustomersForm = ({ formData, handleChange, handleSubmit, membershipOptions, isEdit}) => {
-    return (
-        <div>
-            <form onSubmit={handleSubmit} method="post">
-                <div>
-                    <label htmlFor="firstName">First Name</label>
-                    <div>
-                        <input
-                            type="text"
-                            id="firstName"
-                            name="firstName"
-                            value={formData.firstName}
-                            onChange={handleChange}
-                            required
-                        />
-                    </div>
-                </div>
-                <div>
-                    <label htmlFor="lastName">Last Name</label>
-                    <div>
-                        <input
-                            type="text"
-                            id="lastName"
-                            name="lastName"
-                            value={formData.lastName}
-                            onChange={handleChange}
-                            required
-                        />
-                    </div>
-                </div>
-                <div>
-                    <label htmlFor="email">Email</label>
-                    <div>
-                        <input
-                            type="email"
-                            id="email"
-                            name="email"
-                            value={formData.email}
-                            onChange={handleChange}
-                            required
-                        />
-                    </div>
-                </div>
-                <div>
-                    <label htmlFor="password">Password</label>
-                    <div>
-                        <input
-                            type="password"
-                            id="password"
-                            name="password"
-                            value={formData.password}
-                            onChange={handleChange}
-                            required
-                        />
-                    </div>
-                </div>
-                <div>
-                    <label htmlFor="phone">Phone</label>
-                    <div>
-                        <input
-                            type="text"
-                            id="phone"
-                            name="phone"
-                            value={formData.phone}
-                            onChange={handleChange}
-                            required
-                        />
-                    </div>
-                </div>
-                <div>
-                    <label htmlFor="address">Address</label>
-                    <div>
-                        <input
-                            type="text"
-                            id="address"
-                            name="address"
-                            value={formData.address}
-                            onChange={handleChange}
-                            required
-                        />
-                    </div>
-                </div>
-                <div>
-                    <label htmlFor="membershipLevel">Membership Type</label>
-                    <div>
-                        <select
-                            id="membershipLevel"
-                            name="membershipLevel"
-                            value={formData.membershipLevel}
-                            onChange={handleChange}
-                            required
-                        >
-                            {MembershipsEnum().map((membership, index) => (
-                                <option key={index} value={membership}>
-                                    {membership}
-                                </option>
-                            ))}
-                        </select>
-                    </div>
-                </div>
-                <button type="submit">{isEdit ? 'Update' : 'Register'}</button>
-            </form>
-        </div>
-    );
-};
-
-export default CustomersForm;
Index: my-react-app/src/components/MenuList.js
===================================================================
--- my-react-app/src/components/MenuList.js	(revision 142c0f8187ceb8951505669639e95855fbe3be9e)
+++ my-react-app/src/components/MenuList.js	(revision b67dfd3bdf1aa1bd3175c999b9eabd3c15eb7ea0)
@@ -15,7 +15,7 @@
             const exists = prevItems.find(i => i.id === item.id);
             if (exists) {
-                return prevItems.filter(i => i.id !== item.id); // remove
+                return prevItems.filter(i => i.id !== item.id);
             } else {
-                return [...prevItems, item]; // add
+                return [...prevItems, item];
             }
         });
Index: my-react-app/src/components/ReservationConfirmation.js
===================================================================
--- my-react-app/src/components/ReservationConfirmation.js	(revision 142c0f8187ceb8951505669639e95855fbe3be9e)
+++ my-react-app/src/components/ReservationConfirmation.js	(revision b67dfd3bdf1aa1bd3175c999b9eabd3c15eb7ea0)
@@ -27,5 +27,5 @@
                 const tableResponse = await axios.get(`http://localhost:8081/api/tables/${tableNumber}`);
                 setTable(tableResponse.data);
-
+                console.log(tableResponse.data)
                 const restaurantResponse = await axios.get(`http://localhost:8081/api/restaurants/${restaurantId}`);
                 setRestaurant(restaurantResponse.data);
@@ -63,14 +63,12 @@
             paymentStatus: 'Pending',
             preOrderedItems: preOrderedItems.map(item => ({
-                name: item.itemName,
+                preorderedItemName: item.itemName,
                 quantity: item.quantity,
                 price: item.price
             }))
         };
-        console.log(payload)
 
 
         try {
-            console.log(payload)
             const response = await axios.post('http://localhost:8081/api/reservations', payload, {
                 headers: {
Index: my-react-app/src/components/Reservations.js
===================================================================
--- my-react-app/src/components/Reservations.js	(revision 142c0f8187ceb8951505669639e95855fbe3be9e)
+++ my-react-app/src/components/Reservations.js	(revision b67dfd3bdf1aa1bd3175c999b9eabd3c15eb7ea0)
@@ -101,5 +101,5 @@
                                                 {reservation.preOrderedItems.map((item, index) => (
                                                     <li key={index} className="list-group-item d-flex justify-content-between align-items-center">
-                                                        <span><strong>{item.name}</strong> × {item.quantity}</span>
+                                                        <span><strong>{item?.preorderedItemName}</strong> × {item.quantity}</span>
                                                         <span className="badge bg-success rounded-pill">${(item.price * item.quantity).toFixed(2)}</span>
                                                     </li>
Index: my-react-app/src/components/RestaurantDetails.js
===================================================================
--- my-react-app/src/components/RestaurantDetails.js	(revision 142c0f8187ceb8951505669639e95855fbe3be9e)
+++ my-react-app/src/components/RestaurantDetails.js	(revision b67dfd3bdf1aa1bd3175c999b9eabd3c15eb7ea0)
@@ -112,4 +112,5 @@
     };
 
+    console.log(preOrderedItems)
 
     const roundToNext15Minutes = (date) => {
Index: my-react-app/src/index.js
===================================================================
--- my-react-app/src/index.js	(revision 142c0f8187ceb8951505669639e95855fbe3be9e)
+++ my-react-app/src/index.js	(revision b67dfd3bdf1aa1bd3175c999b9eabd3c15eb7ea0)
@@ -5,5 +5,4 @@
 import { CuisineProvider } from './components/CuisineContext';
 import {RestaurantProvider} from "./components/RestaurantContext";
-import {CustomerProvider} from "./components/CustomerContext";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
@@ -12,7 +11,5 @@
         <CuisineProvider>
             <RestaurantProvider>
-                <CustomerProvider>
                     <App />
-                </CustomerProvider>
             </RestaurantProvider>
         </CuisineProvider>
