Index: my-react-app/src/components/AppContent.js
===================================================================
--- my-react-app/src/components/AppContent.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ 	(revision )
@@ -1,126 +1,0 @@
-import React from "react";
-import axios from "axios";
-import WelcomeContent from "./WelcomeContent";
-import AuthContent from "./AuthContent";
-import LoginForm from "./LoginForm";
-import AuthForm from "./AuthForm";
-import Buttons from './Buttons';
-import restaurants from "./Restaurants";
-
-class AppContent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            componentToShow: "welcome",
-            isAuthenticated: false,
-            user: null,
-            loading: false
-        };
-    }
-
-    componentDidMount() {
-        const token = localStorage.getItem('token');
-        console.log(token);
-        if (token) {
-            this.setAuthToken(token);
-            this.setState({ componentToShow: "restaurants", isAuthenticated: true });
-        }
-    }
-
-    fetchUserDetails = (token) => {
-        console.log("Fetching User Details...");
-        axios.get("/api/user")
-            .then((response) => {
-                this.setState({
-                    user: response.data,
-                    componentToShow: "restaurants",
-                    isAuthenticated: true
-                });
-            })
-            .catch((error) => {
-                console.error("Failed to fetch user details:", error);
-            });
-    };
-
-    login = () => {
-        this.setState({ componentToShow: "login" });
-    }
-
-    logout = () => {
-        localStorage.removeItem('token');
-        this.setAuthToken(null);
-        this.setState({ componentToShow: "welcome", isAuthenticated: false });
-    }
-
-    onLogin = (e, email, password) => {
-        e.preventDefault();
-
-        axios.post("/api/login", { email, password })
-            .then((response) => {
-                const token = response.data.token;
-                localStorage.setItem('token', token);
-                console.log("Login Token:", token);
-                this.setAuthToken(token);
-                this.fetchUserDetails(token);
-            })
-            .catch((error) => {
-                console.error("Login failed:", error);
-                this.setState({ componentToShow: "welcome" });
-            });
-    };
-
-    onRegister = (e, firstName, lastName, email, password) => {
-        e.preventDefault();
-        axios.post("/api/register", { firstName, lastName, email, password })
-            .then((response) => {
-                const token = response.data.token;
-                localStorage.setItem('token', token);
-                console.log(token);
-                this.setAuthToken(token);
-                this.fetchUserDetails(token);
-            })
-            .catch((error) => {
-                this.setState({ componentToShow: "welcome" });
-                console.error(error);
-            });
-    };
-
-    setAuthToken = (token) => {
-        if (token) {
-            axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
-        } else {
-            delete axios.defaults.headers.common["Authorization"];
-        }
-    };
-
-    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 === "login" && <LoginForm onLogin={this.onLogin} onRegister={this.onRegister} />}
-            </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>
-        // );
-    }
-}
-
-
-export default AppContent;
Index: my-react-app/src/components/AppContext.js
===================================================================
--- my-react-app/src/components/AppContext.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ 	(revision )
@@ -1,11 +1,0 @@
-import * as React from "react";
-import WelcomeContent from './WelcomeContent'
-export default class AppContext extends React.Component {
-    render() {
-        return (
-            <div>
-                <WelcomeContent/>
-            </div>
-        )
-    }
-}
Index: my-react-app/src/components/AuthContent.js
===================================================================
--- my-react-app/src/components/AuthContent.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ 	(revision )
@@ -1,48 +1,0 @@
-import * as React from 'react';
-import { request } from "../axios_helper";
-
-export default class AuthContent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            data: []
-        };
-    }
-
-    // componentDidMount() {
-    //     request(
-    //         "GET",
-    //         "/api/restaurants",
-    //         []
-    //     ).then((response) => {
-    //         this.setState({ data: response.data });
-    //     });
-    // }
-    componentDidMount() {
-        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 });
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                {this.state.data && this.state.data.map((restaurant) => (
-                    <div key={restaurant.restaurantId}>
-                        <p>Name: {restaurant.name}</p>
-                        <p>Cuisine Type: {restaurant.cuisineType}</p>
-                        <p>Address: {restaurant.address}</p>
-                        <p>User: {}</p>
-                    </div>
-                ))}
-            </div>
-        );
-    }
-}
Index: my-react-app/src/components/AuthForm.js
===================================================================
--- my-react-app/src/components/AuthForm.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ 	(revision )
@@ -1,204 +1,0 @@
-import React, { useState } from 'react';
-import axios from 'axios';
-import { useNavigate } from 'react-router-dom';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import classNames from 'classnames';
-import MembershipsEnum from './MembershipsEnum';
-
-const AuthForm = () => {
-    const navigate = useNavigate();
-    const [activeTab, setActiveTab] = useState('login');
-    const [credentials, setCredentials] = useState({
-        firstName: '',
-        lastName: '',
-        email: '',
-        password: '',
-        phone: '',
-        address: '',
-        membershipLevel: ''
-    });
-    const [error, setError] = useState('');
-
-    const handleChange = (e) => {
-        const { name, value } = e.target;
-        setCredentials({ ...credentials, [name]: value });
-    };
-
-    const handleLogin = async (e) => {
-        e.preventDefault();
-        try {
-            const response = await axios.post('http://localhost:8081/api/login', {
-                email: credentials.email,
-                password: credentials.password
-            });
-
-            const { token } = response.data;
-            localStorage.setItem('token', token);
-            navigate('/');
-        } catch (err) {
-            setError('Login failed. Please check your credentials.');
-        }
-    };
-
-    const handleRegister = async (e) => {
-        e.preventDefault();
-        try {
-            await axios.post('http://localhost:8081/api/register', {
-                firstName: credentials.firstName,
-                lastName: credentials.lastName,
-                email: credentials.email,
-                password: credentials.password,
-                phone: credentials.phone,
-                address: credentials.address,
-                membershipLevel: credentials.membershipLevel
-            });
-            setActiveTab('login');
-            alert('Registration successful. Please log in.');
-        } catch (err) {
-            setError('Registration failed. Please try again.');
-        }
-    };
-
-    return (
-        <div className="container mt-5">
-            <ul className="nav nav-pills nav-justified mb-3">
-                <li className="nav-item">
-                    <button
-                        className={classNames('nav-link', { active: activeTab === 'login' })}
-                        onClick={() => setActiveTab('login')}
-                    >
-                        Login
-                    </button>
-                </li>
-                <li className="nav-item">
-                    <button
-                        className={classNames('nav-link', { active: activeTab === 'register' })}
-                        onClick={() => setActiveTab('register')}
-                    >
-                        Register
-                    </button>
-                </li>
-            </ul>
-
-            {activeTab === 'login' && (
-                <form onSubmit={handleLogin}>
-                    <div className="form-outline mb-4">
-                        <input
-                            type="email"
-                            name="email"
-                            className="form-control"
-                            placeholder="Email"
-                            value={credentials.email}
-                            onChange={handleChange}
-                            required
-                        />
-                    </div>
-                    <div className="form-outline mb-4">
-                        <input
-                            type="password"
-                            name="password"
-                            className="form-control"
-                            placeholder="Password"
-                            value={credentials.password}
-                            onChange={handleChange}
-                            required
-                        />
-                    </div>
-                    {error && <div className="text-danger mb-3">{error}</div>}
-                    <button type="submit" className="btn btn-primary w-100">Login</button>
-                </form>
-            )}
-
-            {activeTab === 'register' && (
-                <form onSubmit={handleRegister}>
-                    <div className="form-outline mb-4">
-                        <input
-                            type="text"
-                            name="firstName"
-                            className="form-control"
-                            placeholder="First Name"
-                            value={credentials.firstName}
-                            onChange={handleChange}
-                            required
-                        />
-                    </div>
-                    <div className="form-outline mb-4">
-                        <input
-                            type="text"
-                            name="lastName"
-                            className="form-control"
-                            placeholder="Last Name"
-                            value={credentials.lastName}
-                            onChange={handleChange}
-                            required
-                        />
-                    </div>
-                    <div className="form-outline mb-4">
-                        <input
-                            type="email"
-                            name="email"
-                            className="form-control"
-                            placeholder="Email"
-                            value={credentials.email}
-                            onChange={handleChange}
-                            required
-                        />
-                    </div>
-                    <div className="form-outline mb-4">
-                        <input
-                            type="password"
-                            name="password"
-                            className="form-control"
-                            placeholder="Password"
-                            value={credentials.password}
-                            onChange={handleChange}
-                            required
-                        />
-                    </div>
-                    <div className="form-outline mb-4">
-                        <input
-                            type="text"
-                            name="phone"
-                            className="form-control"
-                            placeholder="Phone"
-                            value={credentials.phone}
-                            onChange={handleChange}
-                            required
-                        />
-                    </div>
-                    <div className="form-outline mb-4">
-                        <input
-                            type="text"
-                            name="address"
-                            className="form-control"
-                            placeholder="Address"
-                            value={credentials.address}
-                            onChange={handleChange}
-                            required
-                        />
-                    </div>
-                    <div className="form-outline mb-4">
-                        <select
-                            name="membershipLevel"
-                            className="form-control"
-                            value={credentials.membershipLevel}
-                            onChange={handleChange}
-                            required
-                        >
-                            <option value="">Select Membership Type</option>
-                            {MembershipsEnum().map((membership, index) => (
-                                <option key={index} value={membership}>
-                                    {membership}
-                                </option>
-                            ))}
-                        </select>
-                    </div>
-                    {error && <div className="text-danger mb-3">{error}</div>}
-                    <button type="submit" className="btn btn-success w-100">Register</button>
-                </form>
-            )}
-        </div>
-    );
-};
-
-export default AuthForm;
Index: my-react-app/src/components/Buttons.js
===================================================================
--- my-react-app/src/components/Buttons.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ 	(revision )
@@ -1,12 +1,0 @@
-import * as React from "react";
-
-export default function Buttons(props) {
-    return (
-        <div className="row">
-            <div className="col-md-12 text-center" style={{marginTop:"30px"}}>
-                <button onClick={props.login}>Login</button>
-                <button onClick={props.logout}>Logout</button>
-            </div>
-        </div>
-    )
-}
Index: my-react-app/src/components/CuisineContext.js
===================================================================
--- my-react-app/src/components/CuisineContext.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ 	(revision )
@@ -1,26 +1,0 @@
-import React, { createContext, useState, useEffect } from 'react';
-import axios from 'axios';
-
-export const CuisineContext = createContext();
-
-export const CuisineProvider = ({ children }) => {
-    const [cuisineTypes, setCuisineTypes] = useState([]);
-
-    useEffect(() => {
-        const fetchCuisineTypes = async () => {
-            try {
-                const response = await axios.get('http://localhost:8081/api/cuisineTypes');
-                setCuisineTypes(response.data);
-            } catch (error) {
-                console.error('Error fetching cuisine types:', error);
-            }
-        };
-        fetchCuisineTypes();
-    }, []);
-
-    return (
-        <CuisineContext.Provider value={cuisineTypes}>
-            {children}
-        </CuisineContext.Provider>
-    );
-};
Index: my-react-app/src/components/CustomerDetails.js
===================================================================
--- my-react-app/src/components/CustomerDetails.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
+++ my-react-app/src/components/CustomerDetails.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
@@ -0,0 +1,40 @@
+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:8080/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 d24f17cb212e43f94a77a44d655ba10b4b8143d2)
+++ my-react-app/src/components/CustomerFormContainer.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
@@ -0,0 +1,77 @@
+// 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:8080/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:8080/api/customers/edit/${customer.id}`, formData);
+            } else {
+                await axios.post("http://localhost:8080/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 d24f17cb212e43f94a77a44d655ba10b4b8143d2)
+++ my-react-app/src/components/Customers.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
@@ -0,0 +1,75 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import React, {useEffect, useState} from "react";
+import axios from "axios";
+import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+
+
+const Customers = () => {
+    const [customers, setCustomers] = useState([]);
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        const fetchCustomers = async () => {
+            try {
+                const response = await axios.get("http://localhost:8080/api/customers");
+                setCustomers(response.data);
+            } catch (error) {
+                console.error("Error fetching customers: ", error);
+            }
+        };
+
+        fetchCustomers()
+    }, []);
+
+    const handleDetailClick = (customerId) => {
+        navigate(`/customers/${customerId}`);
+    }
+
+    const handleEditClick = (customerId) => {
+        navigate(`/customers/edit/${customerId}`);
+    }
+
+    const handleDeleteClick = async (customerId) => {
+        try {
+            await axios.delete(`http://localhost:8080/api/customers/delete/${customerId}`);
+            setCustomers(customers.filter(customer => customer.customerID !== customerId));
+            alert('Reservation canceled successfully');
+        } catch (error) {
+            console.error("Error + " + error);
+            alert("An error occurred while deleting");
+        }
+    }
+
+    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.fullName}</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 d24f17cb212e43f94a77a44d655ba10b4b8143d2)
+++ my-react-app/src/components/CustomersForm.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
@@ -0,0 +1,110 @@
+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/ErrorPage.js
===================================================================
--- my-react-app/src/components/ErrorPage.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ my-react-app/src/components/ErrorPage.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
@@ -1,2 +1,3 @@
+// ErrorPage.js
 import React from 'react';
 
@@ -6,4 +7,5 @@
             <h1>Oops! Something went wrong.</h1>
             <p>Please try again later or contact support.</p>
+            {/* Add any additional content or error-specific messages */}
         </div>
     );
Index: my-react-app/src/components/Header.js
===================================================================
--- my-react-app/src/components/Header.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ my-react-app/src/components/Header.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
@@ -1,45 +1,6 @@
-import React, {useEffect, useState} from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import {jwtDecode} from "jwt-decode";
-import axios from "axios";
+import React from 'react';
+import { Link } from 'react-router-dom';
 
 const Header = () => {
-    const navigate = useNavigate();
-    const [user, setUser] = useState({});
-    const isLoggedIn = localStorage.getItem('token');
-
-    const handleLogout = () => {
-        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 (
         <header className="header navbar navbar-expand-lg navbar-light bg-light">
@@ -54,4 +15,10 @@
                         </li>
                         <li className="nav-item">
+                            <Link className="nav-link" to="/customers">Customers</Link>
+                        </li>
+                        <li className="nav-item">
+                            <Link className="nav-link" to="/customers/add">Add Customer</Link>
+                        </li>
+                        <li className="nav-item">
                             <Link className="nav-link" to="/restaurants">Restaurants</Link>
                         </li>
@@ -59,16 +26,4 @@
                             <Link className="nav-link" to="/reservations">Reservations</Link>
                         </li>
-                        <li className="nav-item">
-                            <Link className="nav-link" to="/reservations-past">Reservation history</Link>
-                        </li>
-                        <form className="form-inline mt-2 mt-md-0 ml-3">
-                            {isLoggedIn ? (
-                                <button className="btn btn-outline-danger ml-3" onClick={handleLogout}>
-                                    Logout {user?.firstName}
-                                </button>
-                            ) : (
-                                <Link className="btn btn-outline-info ml-3" to="/login">Login</Link>
-                            )}
-                        </form>
                     </ul>
                 </div>
Index: my-react-app/src/components/Layout.js
===================================================================
--- my-react-app/src/components/Layout.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ my-react-app/src/components/Layout.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
@@ -1,2 +1,3 @@
+// Layout.js
 import React from 'react';
 import Header from './Header';
Index: my-react-app/src/components/Login.js
===================================================================
--- my-react-app/src/components/Login.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ 	(revision )
@@ -1,62 +1,0 @@
-import React, { useState } from 'react';
-import axios from 'axios';
-import {useNavigate} from "react-router-dom";
-
-const Login = ({ onLogin }) => {
-    const navigate = useNavigate();
-    const [credentials, setCredentials] = useState({ username: '', password: '' });
-    const [error, setError] = useState('');
-
-    const handleChange = (e) => {
-        const { name, value } = e.target;
-        setCredentials({ ...credentials, [name]: value });
-    };
-
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        try {
-            const response = await axios.post('http://localhost:8081/api/login', {
-                email: credentials.username,
-                password: credentials.password
-            });
-            const { token } = response.data;
-
-            localStorage.setItem('token', token);
-
-            navigate("/")
-        } catch (error) {
-            console.error('Login failed:', error);
-            setError('Login failed. Please check your credentials and try again.');
-        }
-    };
-
-    return (
-        <div>
-            <h2>Login</h2>
-            <form onSubmit={handleSubmit}>
-                <div>
-                    <label>Username:</label>
-                    <input
-                        type="text"
-                        name="username"
-                        value={credentials.username}
-                        onChange={handleChange}
-                    />
-                </div>
-                <div>
-                    <label>Password:</label>
-                    <input
-                        type="password"
-                        name="password"
-                        value={credentials.password}
-                        onChange={handleChange}
-                    />
-                </div>
-                {error && <div style={{ color: 'red' }}>{error}</div>}
-                <button type="submit">Login</button>
-            </form>
-        </div>
-    );
-};
-
-export default Login;
Index: my-react-app/src/components/LoginForm.js
===================================================================
--- my-react-app/src/components/LoginForm.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ 	(revision )
@@ -1,109 +1,0 @@
-import * as React from "react";
-import bootstrap from 'bootstrap/dist/css/bootstrap.min.css'
-import classNames from 'classnames';
-
-export default class LoginForm extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            active: "login",
-            firstName: "",
-            lastName: "",
-            email: "",
-            password: "",
-            onLogin: props.onLogin,
-            onRegister: props.onRegister
-        }
-    }
-
-    onChangeHandler = (e) => {
-        let name = e.target.name;
-        let value = e.target.value;
-        this.setState({[name]: value})
-    }
-
-    onSubmitLogin = (e) => {
-        this.state.onLogin(e, this.state.email, this.state.password);
-    }
-
-    onSubmitRegister = (e) => {
-        this.state.onRegister(
-            e,
-            this.state.firstName,
-            this.state.lastName,
-            this.state.email,
-            this.state.password)
-    }
-
-    render() {
-        return (
-            <div className="row justify-content-center">
-                <div className="col-4">
-                    <ul className="nav nav-pills nav-justified mb-3" id="ex1" role="tablist">
-                        <li className="nav-item" role="presentation">
-                            <button className={classNames("nav-link", this.state.active === "login" ? "active" : "")}
-                                    id="tab-login" onClick={() => this.setState({active: "login"})}>Login
-                            </button>
-                        </li>
-                        <li className="nav-item" role="presentation">
-                            <button className={classNames("nav-link", this.state.active === "register" ? "active" : "")}
-                                    id="tab-register" onClick={() => this.setState({active: "register"})}>Register
-                            </button>
-                        </li>
-                    </ul>
-
-                    <div className="tab-content">
-                        <div
-                            className={classNames("tab-pane", "fade", this.state.active === "login" ? "show active" : "")}
-                            id="pills-login">
-                            <form onSubmit={this.onSubmitLogin}>
-                                <div className="form-outline mb-4">
-                                    <input type="email" id="email" name="email" className="form-control"
-                                           onChange={this.onChangeHandler}/>
-                                    <label className="form-label" htmlFor="email">Email</label>
-                                </div>
-                                <div className="form-outline mb-4">
-                                    <input type="password" id="loginPassword" name="password" className="form-control"
-                                           onChange={this.onChangeHandler}/>
-                                    <label className="form-label" htmlFor="loginPassword">Password</label>
-                                </div>
-
-                                <button type="submit" className="btn btn-primary btn-block mb-4">Sign In</button>
-                            </form>
-                        </div>
-
-                        <div
-                            className={classNames("tab-pane", "fade", this.state.active === "register" ? "show active" : "")}
-                            id="pills-register">
-                            <form onSubmit={this.onSubmitRegister}>
-                                <div className="form-outline mb-4">
-                                    <input type="text" id="firstName" name="firstName" className="form-control"
-                                           onChange={this.onChangeHandler}/>
-                                    <label className="form-label" htmlFor="firstName">First Name</label>
-                                </div>
-                                <div className="form-outline mb-4">
-                                    <input type="text" id="lastName" name="lastName" className="form-control"
-                                           onChange={this.onChangeHandler}/>
-                                    <label className="form-label" htmlFor="lastName">Last Name</label>
-                                </div>
-                                <div className="form-outline mb-4">
-                                    <input type="email" id="email" name="email" className="form-control"
-                                           onChange={this.onChangeHandler}/>
-                                    <label className="form-label" htmlFor="email">Email</label>
-                                </div>
-                                <div className="form-outline mb-4">
-                                    <input type="password" id="loginPassword" name="password" className="form-control"
-                                           onChange={this.onChangeHandler}/>
-                                    <label className="form-label" htmlFor="loginPassword">Password</label>
-                                </div>
-
-                                <button type="submit" className="btn btn-primary btn-block mb-4">Register</button>
-                            </form>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-
-    }
-}
Index: my-react-app/src/components/MembershipsEnum.js
===================================================================
--- my-react-app/src/components/MembershipsEnum.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ my-react-app/src/components/MembershipsEnum.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
@@ -3,5 +3,21 @@
 
 const MembershipsEnum = () => {
-    return ['GOLD', 'PLATINUM', 'STANDARD'];
+    const [memberships, setMemberships] = useState([]);
+
+    useEffect(() => {
+        const fetchMemberships = async () => {
+            try {
+                const response = await axios.get('http://localhost:8080/api/memberships');
+                // Assuming the response.data is an array of enum values
+                setMemberships(response.data);
+            } catch (error) {
+                console.error('Error fetching enum data:', error);
+            }
+        };
+
+        fetchMemberships();
+    }, []);
+
+    return memberships;
 };
 
Index: my-react-app/src/components/MenuList.js
===================================================================
--- my-react-app/src/components/MenuList.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ 	(revision )
@@ -1,110 +1,0 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-const MenuList = ({ restaurantId, onPreOrderChange, setPreOrderedItems, preOrderedItems }) => {
-    const [menuItems, setMenuItems] = useState([]);
-    const [preOrder, setPreOrder] = useState([]);
-
-    const handleItemSelect = (item) => {
-        setPreOrderedItems(prevItems => [...prevItems, item]);
-    };
-
-    const handleItemToggle = (item) => {
-        setPreOrderedItems(prevItems => {
-            const exists = prevItems.find(i => i.id === item.id);
-            if (exists) {
-                return prevItems.filter(i => i.id !== item.id);
-            } else {
-                return [...prevItems, item];
-            }
-        });
-    };
-
-    useEffect(() => {
-        const fetchMenu = async () => {
-            try {
-                const response = await axios.get(`http://localhost:8081/api/restaurant-menu/${restaurantId}`);
-                setMenuItems(response.data);
-            } catch (err) {
-                console.error('Failed to fetch menu:', err);
-            }
-        };
-        if (restaurantId) {
-            fetchMenu();
-        }
-    }, [restaurantId]);
-
-    const handleAddToPreOrder = (item) => {
-        const existingItem = preOrder.find((i) => i.menuID === item.menuID);
-
-        let updatedPreOrder;
-        if (existingItem) {
-            updatedPreOrder = preOrder.map((i) =>
-                i.menuID === item.menuID ? { ...i, quantity: i.quantity + 1 } : i
-            );
-        } else {
-            updatedPreOrder = [...preOrder, { ...item, quantity: 1 }];
-        }
-
-        setPreOrder(updatedPreOrder);
-        setPreOrderedItems(updatedPreOrder);
-    };
-
-    const calculateTotal = () => {
-        return preOrder.reduce((acc, item) => acc + item.price * item.quantity, 0).toFixed(2);
-    };
-
-    return (
-        <div className="container mt-4">
-            {menuItems.length > 0 && <h3 className="text-center">Menu</h3>}
-            <div className="row">
-                {menuItems.map((item) => (
-                    <div key={item.menuID} className="col-md-4 mb-4">
-                        <div className="card h-100 shadow-sm">
-                            <div className="card-body d-flex flex-column">
-                                <h5 className="card-title">{item.itemName}</h5>
-                                <p className="card-text">{item.description}</p>
-                                <h6 className="card-subtitle mb-2 text-muted">${item.price.toFixed(2)}</h6>
-
-                                {item.tags && item.tags.length > 0 && (
-                                    <div className="mb-2">
-                                        {item.tags.map((tag) => (
-                                            <span key={tag.id} className="badge bg-secondary me-1">
-                                        {tag.tagName}: {tag.tagValue}
-                                    </span>
-                                        ))}
-                                    </div>
-                                )}
-
-                                <button
-                                    className="btn btn-outline-success mt-auto"
-                                    onClick={() => handleAddToPreOrder(item)}
-                                >
-                                    Add to Pre-Order
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                ))}
-            </div>
-
-            {preOrder.length > 0 && (
-                <div className="mt-5">
-                    <h4>Pre-Order Summary</h4>
-                    <ul className="list-group">
-                        {preOrder.map((item) => (
-                            <li key={item.menuID} className="list-group-item d-flex justify-content-between align-items-center">
-                                {item.itemName} (x{item.quantity})
-                                <span>${(item.price * item.quantity).toFixed(2)}</span>
-                            </li>
-                        ))}
-                    </ul>
-                    <h5 className="mt-3">Total: ${calculateTotal()}</h5>
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default MenuList;
Index: my-react-app/src/components/ReadOnlyMenuList.js
===================================================================
--- my-react-app/src/components/ReadOnlyMenuList.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ 	(revision )
@@ -1,87 +1,0 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-const ITEMS_PER_PAGE = 6;
-
-const ReadOnlyMenuList = ({ restaurantId }) => {
-    const [menuItems, setMenuItems] = useState([]);
-    const [currentPage, setCurrentPage] = useState(1);
-
-    useEffect(() => {
-        const fetchMenu = async () => {
-            try {
-                const response = await axios.get(`http://localhost:8081/api/restaurant-menu/${restaurantId}`);
-                setMenuItems(response.data);
-                setCurrentPage(1);
-            } catch (err) {
-                console.error('Failed to fetch menu:', err);
-            }
-        };
-
-        if (restaurantId) {
-            fetchMenu();
-        }
-    }, [restaurantId]);
-
-    const indexOfLastItem = currentPage * ITEMS_PER_PAGE;
-    const indexOfFirstItem = indexOfLastItem - ITEMS_PER_PAGE;
-    const currentItems = menuItems.slice(indexOfFirstItem, indexOfLastItem);
-    const totalPages = Math.ceil(menuItems.length / ITEMS_PER_PAGE);
-
-    const handlePageChange = (pageNumber) => {
-        setCurrentPage(pageNumber);
-    };
-
-    return (
-        <div className="container mt-4">
-            {menuItems.length > 0 && <h3 className="text-center">Menu</h3>}
-            <div className="row">
-                {currentItems.map((item) => (
-                    <div key={item.menuID} className="col-md-6 mb-4">
-                        <div className="card h-100 shadow-sm">
-                            <div className="card-body d-flex flex-column">
-                                <h5 className="card-title">{item.itemName}</h5>
-                                <p className="card-text">{item.description}</p>
-                                <h6 className="card-subtitle mb-2 text-muted">${item.price.toFixed(2)}</h6>
-
-                                {item.tags && item.tags.length > 0 && (
-                                    <div className="mb-2">
-                                        {item.tags.map((tag) => (
-                                            <span key={tag.id} className="badge bg-secondary me-1">
-                                        {tag.tagName}: {tag.tagValue}
-                                    </span>
-                                        ))}
-                                    </div>
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                ))}
-            </div>
-
-            {totalPages > 1 && (
-                <nav className="d-flex justify-content-center">
-                    <ul className="pagination">
-                        {Array.from({ length: totalPages }, (_, index) => (
-                            <li
-                                key={index + 1}
-                                className={`page-item ${currentPage === index + 1 ? 'active' : ''}`}
-                            >
-                                <button
-                                    type="button"
-                                    className="page-link"
-                                    onClick={() => handlePageChange(index + 1)}
-                                >
-                                    {index + 1}
-                                </button>
-                            </li>
-                        ))}
-                    </ul>
-                </nav>
-            )}
-        </div>
-    );
-};
-
-export default ReadOnlyMenuList;
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>
Index: my-react-app/src/components/ReservationEdit.js
===================================================================
--- my-react-app/src/components/ReservationEdit.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ my-react-app/src/components/ReservationEdit.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
@@ -3,25 +3,15 @@
 import {useNavigate, useParams} from 'react-router-dom';
 import StarRating from "./StarRating";
-import {jwtDecode} from "jwt-decode";
 
 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(() => {
@@ -29,16 +19,9 @@
             try {
                 setIsLoading(true);
-                const response = await axios.get(`http://localhost:8081/api/reservations/${reservationId}`);
-                setCheckInTime(response.data.reservationDateTime);
-                setFormData(response.data);
-
-                setRestaurantId(response.data.restaurantId);
-                const restaurantResponse = await axios.get(`http://localhost:8081/api/restaurants/${response.data.restaurantId}`);
-                setRestaurant(restaurantResponse.data);
-
-                setTableNumber(response.data.tableNumber);
-                const tableResponse = await axios.get(`http://localhost:8081/api/tables/${response.data.tableNumber}`);
-                setTable(tableResponse.data)
-
+                const response = await axios.get(`http://localhost:8080/api/reservations/${reservationId}`);
+                setFormData(response.data); // Set form data with reservation data
+                setTable(response.data.table);
+                setRestaurant(response.data.restaurant);
+                setTimeSlots(response.data.table.timeSlots);
                 setIsLoading(false);
             } catch (error) {
@@ -50,76 +33,32 @@
 
     useEffect(() => {
-        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 || !restaurant) return; // If table or restaurant is not loaded, return early
 
-        if (table?.tableId) {
-            fetchTableReservations();
-        }
-    }, [table]);
+        const currentTime = new Date();
 
-    useEffect(() => {
-        if (table?.restaurant?.operatingHours && selectedDate) {
-            const options = generateTimeOptions(table.restaurant.operatingHours);
-            setTimeOptions(options);
-        }
-    }, [table, selectedDate]);
-
+        const filteredSlots = timeSlots.filter(timeSlot => new Date(timeSlot) >= currentTime);
+        setFilteredTimeSlots(filteredSlots);
+    }, [table, restaurant]);
 
     const handleInputChange = (e) => {
         const { name, value } = e.target;
 
-        if (name === 'partySize') {
-            const valueAsNumber = Math.min(value, table?.capacity);
-            setFormData(prevState => ({
-                ...prevState,
-                [name]: valueAsNumber
-            }));
+        // 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 });
         } else {
-            setFormData(prevState => ({
-                ...prevState,
-                [name]: value
-            }));
+            // For other input fields, update formData as usual
+            setFormData({ ...formData, [name]: value });
         }
     };
 
-
     const handleSubmit = async (e) => {
         e.preventDefault();
-
         try {
-            const token = localStorage.getItem("token");
-            if (!token) {
-                console.error("No token found");
-                return;
-            }
-
-            const decodedToken = jwtDecode(token);
-            const userId = decodedToken.iss;
-
-            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`);
+            // Send updated reservation data to the server
+            await axios.post(`http://localhost:8080/api/reservations/${reservationId}`, formData);
+            // Redirect or show success message
+            navigate(`/reservations`)
         } catch (error) {
             console.error('Error updating reservation:', error);
@@ -134,65 +73,7 @@
     };
 
-    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 generateTimeOptions = (operatingHours) => {
-        const now = new Date();
-        const selectedDateObj = new Date(selectedDate);
-        const isToday = selectedDateObj.toDateString() === now.toDateString();
-
-        let options = [];
-        for (const hours of operatingHours.split(',')) {
-            const [start, end] = hours.trim().split('-');
-            const startTime = new Date(selectedDateObj);
-            const endTime = new Date(selectedDateObj);
-            const [startHour, startMinute] = start.split(':').map(Number);
-            const [endHour, endMinute] = end.split(':').map(Number);
-            startTime.setHours(startHour, startMinute, 0);
-            endTime.setHours(endHour, endMinute, 0);
-
-            if (isToday && startTime < now) {
-                startTime.setTime(roundToNext15Minutes(now).getTime());
-            }
-
-            if (endTime <= now) {
-                setNoAvailableMessage('No available time due to closing.');
-                continue;
-            }
-
-            while (startTime <= endTime) {
-                options.push(startTime.toTimeString().slice(0, 5));
-                startTime.setMinutes(startTime.getMinutes() + 15);
-            }
-        }
-
-        return options.length ? options : ['No available time'];
-    };
-
-    const roundToNext15Minutes = (date) => {
-        const ms = 1000 * 60 * 15;
-        const roundedTime = new Date(Math.ceil(date.getTime() / ms) * ms);
-
-        if (roundedTime.getTime() === date.getTime()) {
-            roundedTime.setMinutes(roundedTime.getMinutes() + 15);
-        }
-
-        return roundedTime;
-    };
-
-    useEffect(() => {
-        if (restaurant?.operatingHours && selectedDate) {
-            const options = generateTimeOptions(restaurant.operatingHours);
-            setTimeOptions(options);
-        }
-    }, [restaurant, selectedDate]);
-
-
     return (
         <div className="container">
-            {isLoading ? (
+            {isLoading ? ( // Conditional rendering based on loading state
                 <p>Loading...</p>
             ) : (
@@ -200,67 +81,34 @@
                     <h1>Edit Reservation</h1>
                     <div className="card-body">
-                        <h2 className="card-title">
-                            {restaurant?.name}
-                            <StarRating key={restaurant?.id} rating={restaurant?.rating || 0}/>
+                        <h2>
+                            {restaurant.name} <StarRating key={restaurant.id} rating={restaurant.rating}/>
                         </h2>
-                        <p className="card-text">Operating Hours: {restaurant?.operatingHours}</p>
-                        <p className="card-text">Address: Ul. {restaurant?.address}</p>
+                        <p className="card-text">{restaurant.cuisineType}</p>
+                        <p className="card-text">{restaurant.operatingHours}</p>
+                        <p className="card-text">Ul. {restaurant.address}</p>
                         <br/>
                     </div>
                     <form onSubmit={handleSubmit}>
                         <div className="mb-3">
-                            <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>
+                            <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>
                                 ))}
                             </select>
-                            <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}
-                                min={1}
-                                value={formData.partySize || ''}
-                                onChange={handleInputChange}
-                            />
-                            <label className="text-danger">
-                                Table capacity: {table?.capacity}
-                            </label>
+                            <input type="number" className="form-control" id="partySize" name="partySize"
+                                   max={table.capacity}
+                                   value={formData.partySize || ''} onChange={handleInputChange}/>
                         </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>
@@ -270,4 +118,5 @@
         </div>
     );
+
 };
 
Index: my-react-app/src/components/ReservationHistory.js
===================================================================
--- my-react-app/src/components/ReservationHistory.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ 	(revision )
@@ -1,295 +1,0 @@
-import React, { useEffect, useState } from "react";
-import { jwtDecode } from "jwt-decode";
-import axios from "axios";
-import 'bootstrap/dist/css/bootstrap.min.css';
-import 'bootstrap/dist/js/bootstrap.bundle.min';
-
-const ReservationHistory = () => {
-    const [reservations, setReservations] = useState([]);
-    const [filteredReservations, setFilteredReservations] = useState([]);
-    const [selectedReservation, setSelectedReservation] = useState(null);
-    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(() => {
-        const fetchReservations = async () => {
-            try {
-                const token = localStorage.getItem("token");
-                if (!token) {
-                    setError("User not authenticated.");
-                    setLoading(false);
-                    return;
-                }
-
-                const decodedToken = jwtDecode(token);
-                const userId = decodedToken.iss;
-
-                const response = await axios.get(
-                    `http://localhost:8081/api/past-reservations/${userId}`,
-                    {
-                        headers: { Authorization: `Bearer ${token}` },
-                    }
-                );
-
-                setReservations(response.data);
-                setFilteredReservations(response.data);
-            } catch (err) {
-                setError("Failed to fetch reservations.");
-            } finally {
-                setLoading(false);
-            }
-        };
-
-        fetchReservations();
-    }, []);
-
-    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>;
-
-    const formatDateTime = (dateString) => {
-        if (!dateString) return "N/A";
-        const date = new Date(dateString);
-        return date.toLocaleString("en-GB", {
-            day: "2-digit",
-            month: "short",
-            year: "numeric",
-            hour: "2-digit",
-            minute: "2-digit",
-        });
-    };
-
-    return (
-        <div className="container mt-5">
-            <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"
-                        value={startDate}
-                        onChange={(e) => setStartDate(e.target.value)}
-                    />
-                    <input
-                        type="date"
-                        className="form-control"
-                        value={endDate}
-                        onChange={(e) => setEndDate(e.target.value)}
-                    />
-                </div>
-                <div className="col-md-2">
-                    <input
-                        type="number"
-                        className="form-control"
-                        placeholder="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="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>Check In Date</th>
-                        <th>Reserved on</th>
-                        <th>Party Size</th>
-                        <th>Special Requests</th>
-                        <th>Status</th>
-                        <th>Cancellation Reason</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    {filteredReservations.length > 0 ? (
-                        filteredReservations.map((res, index) => (
-                            <tr key={res.id} onClick={() => setSelectedReservation(res)} style={{ cursor: "pointer" }}>
-                                <td>{index + 1}</td>
-                                <td>{res.restaurant?.name || "N/A"}</td>
-                                <td>{res.table?.id || "N/A"}</td>
-                                <td>{formatDateTime(res.checkInDate)}</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="9" className="text-center">No reservations found.</td>
-                        </tr>
-                    )}
-                    </tbody>
-                </table>
-            </div>
-
-            {/* Modal for reservation details */}
-            {selectedReservation && (
-                <div className="modal fade show d-block" tabIndex="-1" style={{ backgroundColor: "rgba(0,0,0,0.5)" }} onClick={() => setSelectedReservation(null)}>
-                    <div className="modal-dialog modal-lg" onClick={(e) => e.stopPropagation()}>
-                        <div className="modal-content">
-                            <div className="modal-header">
-                                <h5 className="modal-title">Reservation Details</h5>
-                                <button type="button" className="btn-close" onClick={() => setSelectedReservation(null)}></button>
-                            </div>
-                            <div className="modal-body">
-                                <h6>🍽️ Restaurant Info</h6>
-                                <p><strong>Name:</strong> {selectedReservation.restaurant?.name}</p>
-                                <p><strong>Address:</strong> {selectedReservation.restaurant?.address}</p>
-                                <p><strong>Phone:</strong> {selectedReservation.restaurant?.phone}</p>
-                                <p><strong>Rating:</strong> {selectedReservation.restaurant?.rating} ⭐</p>
-                                <p><strong>Cuisine:</strong> {selectedReservation.restaurant?.cuisineType}</p>
-                                <p><strong>Hours:</strong> {selectedReservation.restaurant?.operatingHours}</p>
-                                {selectedReservation.restaurant?.website && (
-                                    <p><strong>Website:</strong> <a href={`https://${selectedReservation.restaurant.website}`} target="_blank" rel="noopener noreferrer">{selectedReservation.restaurant.website}</a></p>
-                                )}
-
-                                <hr />
-
-                                <h6>🪑 Table Info</h6>
-                                <p><strong>Location:</strong> {selectedReservation.table?.location}</p>
-                                <p><strong>Capacity:</strong> {selectedReservation.table?.capacity}</p>
-                                <p><strong>Smoking Area:</strong> {selectedReservation.table?.smokingArea ? "Yes" : "No"}</p>
-                                <p><strong>Description:</strong> {selectedReservation.table?.description}</p>
-                                <p><strong>Reservation Duration:</strong> {selectedReservation.table?.reservationDurationHours} hours</p>
-
-                                <hr />
-
-                                <h6>📋 Reservation Info</h6>
-                                <p><strong>Check-In Date:</strong> {formatDateTime(selectedReservation.checkInDate)}</p>
-                                <p><strong>Reserved on:</strong> {new Date(selectedReservation.reservationDateTime).toLocaleString()}</p>
-                                <p><strong>Party Size:</strong> {selectedReservation.partySize}</p>
-                                <p><strong>Special Requests:</strong> {selectedReservation.specialRequests || "None"}</p>
-                                <p><strong>Status:</strong> {selectedReservation.status}</p>
-                                <p><strong>Cancellation Reason:</strong> {selectedReservation.cancellationReason || "None"}</p>
-                            </div>
-                            <div className="modal-footer">
-                                <button className="btn btn-secondary" onClick={() => setSelectedReservation(null)}>Close</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default ReservationHistory;
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;
-
Index: my-react-app/src/components/RestaurantCard.js
===================================================================
--- my-react-app/src/components/RestaurantCard.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ 	(revision )
@@ -1,22 +1,0 @@
-import React from 'react';
-import StarRating from './StarRating';
-
-const RestaurantCard = ({ restaurant, onDetailClick }) => {
-    return (
-        <div className="col-md-4 mb-4">
-            <div className="card">
-                <div className="card-body">
-                    <h5 className="card-title">
-                        {restaurant.name} <StarRating rating={restaurant.rating} />
-                    </h5>
-                    <p className="card-text">{restaurant.cuisineType}</p>
-                    <p className="card-text">{restaurant.operatingHours}</p>
-                    <p className="card-text">Ul. {restaurant.address}</p>
-                </div>
-                <button onClick={() => onDetailClick(restaurant.restaurantId)} className="btn btn-primary">View Details</button>
-            </div>
-        </div>
-    );
-};
-
-export default RestaurantCard;
Index: my-react-app/src/components/RestaurantContext.js
===================================================================
--- my-react-app/src/components/RestaurantContext.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ 	(revision )
@@ -1,27 +1,0 @@
-import React, { createContext, useState, useEffect } from 'react';
-import axios from 'axios';
-
-export const RestaurantContext = createContext();
-
-export const RestaurantProvider = ({ children }) => {
-    const [restaurants, setRestaurants] = useState([]);
-
-    useEffect(() => {
-        if (restaurants.length > 0) return;
-        const fetchRestaurants = async () => {
-            try {
-                const response = await axios.get('http://localhost:8081/api/restaurants');
-                setRestaurants(response.data);
-            } catch (error) {
-                console.error('Error fetching restaurants:', error);
-            }
-        };
-        fetchRestaurants();
-    }, []);
-
-    return (
-        <RestaurantContext.Provider value={{ restaurants }}>
-            {children}
-        </RestaurantContext.Provider>
-    );
-};
Index: my-react-app/src/components/RestaurantDetails.js
===================================================================
--- my-react-app/src/components/RestaurantDetails.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ my-react-app/src/components/RestaurantDetails.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
@@ -5,18 +5,15 @@
 import { useParams } from 'react-router-dom';
 import StarRating from "./StarRating";
-import MenuList from "./MenuList";
-
 
 const RestaurantDetails = () => {
     const navigate = useNavigate();
+
     const { id } = useParams();
-    const [preOrderedItems, setPreOrderedItems] = useState([]);
-
     const [restaurant, setRestaurant] = useState(null);
     const [selectedTableId, setSelectedTableId] = useState('');
-    const [selectedDate, setSelectedDate] = useState('');
-    const [selectedTime, setSelectedTime] = useState('');
-    const [timeOptions, setTimeOptions] = useState([]);
+    const [selectedTimeSlot, setSelectedTimeSlot] = useState('');
     const [selectedTable, setSelectedTable] = useState(null);
+    const [filteredTimeSlots, setFilteredTimeSlots] = useState([]);
+    const [selectedCapacity, setSelectedCapacity] = useState(''); // Define selectedCapacity state
 
     useEffect(() => {
@@ -24,5 +21,5 @@
             try {
                 if (!id) return;
-                const response = await axios.get(`http://localhost:8081/api/restaurants/${id}`);
+                const response = await axios.get(`http://localhost:8080/api/restaurants/${id}`);
                 setRestaurant(response.data);
             } catch (error) {
@@ -35,9 +32,9 @@
 
     useEffect(() => {
-        if (!selectedTableId) return;
+        if (!selectedTableId) return; // If no table is selected, return early
 
         const fetchTableDetails = async () => {
             try {
-                const response = await axios.get(`http://localhost:8081/api/tables/${selectedTableId}`);
+                const response = await axios.get(`http://localhost:8080/api/tables/${selectedTableId}`);
                 setSelectedTable(response.data);
             } catch (error) {
@@ -49,76 +46,43 @@
     }, [selectedTableId]);
 
-    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);
+    useEffect(() => {
+        if (!selectedTable || !restaurant) return; // If table or restaurant is not loaded, return early
 
-        const startTime = new Date();
-        startTime.setHours(startHour, startMinute, 0, 0);
+        // 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 endTime = new Date();
-        endTime.setHours(endHour < startHour ? endHour + 24 : endHour, endMinute, 0, 0);
 
-        return { startTime, endTime };
+    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}`;
     };
 
-    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 handleTableSelect = (event) => {
+        const selectedTableId = event.target.value;
+        setSelectedTableId(selectedTableId);
     };
 
-    useEffect(() => {
-        if (restaurant && selectedDate) {
-            const options = generateTimeOptions(restaurant.operatingHours);
-            setTimeOptions(options);
-        }
-    }, [restaurant, selectedDate]);
-
-    const handleTableSelect = (event) => {
-        setSelectedTableId(event.target.value);
+    const handleTimeSlotSelect = (event) => {
+        const selectedTimeSlot = event.target.value;
+        setSelectedTimeSlot(selectedTimeSlot);
     };
 
-    const handleReservationConfirmation = () => {
-        const encodedTableId = encodeURIComponent(selectedTableId);
-        const encodedDateTime = encodeURIComponent(`${selectedDate}T${selectedTime}`);
-        const encodedRestaurantId = encodeURIComponent(restaurant.restaurantId);
+    const handleReservationConfirmation = (restaurant) => {
+        const tableNumber = selectedTableId;
+        const formattedTimeSlot = selectedTimeSlot;
+        const restaurantId = restaurant.restaurantId;
 
-        const totalPrice = preOrderedItems.reduce((acc, item) => acc + item.price * item.quantity, 0).toFixed(2);
+        const encodedTableNumber = encodeURIComponent(tableNumber);
+        const encodedTimeSlot = encodeURIComponent(formattedTimeSlot);
+        const encodedRestaurantId = encodeURIComponent(restaurantId);
 
-        navigate(`/reservationConfirmation/${encodedTableId}/${encodedDateTime}/${encodedRestaurantId}`, {
-            state: {
-                preOrderedItems: preOrderedItems,
-                totalPrice: totalPrice,
-            }
-        });
+        navigate(`/reservationConfirmation/${encodedTableNumber}/${encodedTimeSlot}/${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 (
@@ -127,5 +91,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">
@@ -134,63 +98,30 @@
                         <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) => (
-                                <option key={table.id} value={table.id}>
-                                    {`Capacity: ${table.capacity} - ${table.location}`}
-                                </option>
+                            {restaurant.tablesList.map((table, index) => (
+                                <option key={index}
+                                        value={table.id}>{`Capacity: ${table.capacity} - ${table.location}`}</option>
                             ))}
                         </select>
-
                         {selectedTable && (
                             <>
-                                <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>
+                                <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>
                                     ))}
                                 </select>
                             </>
                         )}
-                        <MenuList
-                            restaurantId={restaurant.restaurantId}
-                            setPreOrderedItems={setPreOrderedItems}
-                            preOrderedItems={preOrderedItems}
-                        />
-                        <br />
-                        <button
-                            className="btn btn-primary"
-                            onClick={handleReservationConfirmation}
-                            disabled={!selectedTableId || !selectedDate || !selectedTime}>
+                        <br/>
+                        {/* Add a button to trigger reservation confirmation */}
+                        <button className="btn btn-primary" onClick={() => handleReservationConfirmation(restaurant)}>
                             Confirm Reservation
                         </button>
Index: my-react-app/src/components/RestaurantInfo.js
===================================================================
--- my-react-app/src/components/RestaurantInfo.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ my-react-app/src/components/RestaurantInfo.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
@@ -1,5 +1,4 @@
 import React from 'react';
 import StarRating from "./StarRating";
-import MenuList from "./MenuList";
 
 const RestaurantInfo = ({ restaurant }) => {
@@ -9,8 +8,7 @@
                 {restaurant.name} <StarRating key={restaurant.id} rating={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>
-            <MenuList restaurantId={restaurant.id} />
+            <p className="card-text">{restaurant.cuisineType}</p> {/* Assuming cuisineType is provided */}
+            <p className="card-text">{restaurant.operatingHours}</p> {/* Assuming operatingHours is provided */}
+            <p className="card-text">Ul. {restaurant.address}</p> {/* Assuming address is provided */}
         </div>
     );
Index: my-react-app/src/components/Restaurants.js
===================================================================
--- my-react-app/src/components/Restaurants.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ my-react-app/src/components/Restaurants.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
@@ -1,61 +1,28 @@
-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 StarRating from './StarRating';
 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 = () => {
     const [restaurants, setRestaurants] = useState([]);
     const navigate = useNavigate();
-    const restaurantContext = useContext(RestaurantContext);
 
     useEffect(() => {
-        setRestaurants(restaurantContext.restaurants);
-    }, [restaurantContext]);
+        const fetchRestaurants = async () => {
+            try {
+                const response = await axios.get('http://localhost:8080/api/restaurants');
+                setRestaurants(response.data);
+            } catch (error) {
+                console.error('Error fetching restaurants:', error);
+            }
+        };
 
-
-    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;
-    };
+        fetchRestaurants();
+    }, []);
 
     const handleDetailClick = (restaurantId) => {
         navigate(`/restaurants/${restaurantId}`);
-    };
+    }
 
     const handleTimeSlotClick = (table, timeSlot, restaurant) => {
@@ -64,49 +31,40 @@
         const restaurantId = restaurant.restaurantId;
 
-        const encodedTableNumber = encodeURIComponent(tableNumber);
+        const encodedTableNumber = encodeURI(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 = {};
+        let renderedTimeSlots = {}; // Object to store rendered slots for each table 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);
-
+        return tablesList.flatMap(table => {
+            // Render capacity header when encountering a new capacity
             if (!renderedTimeSlots[table.capacity]) {
                 renderedTimeSlots[table.capacity] = 0;
                 return (
                     <div key={table.capacity}>
-                        <h3>Table for {table.capacity} guests</h3>
-                        {tableTimeSlots.map((timeSlot, index) => {
+                        <h3>Table for: {table.capacity}</h3>
+                        {table.timeSlots.map((timeSlot, index) => {
                             const timeSlotTime = new Date(timeSlot).getTime();
+                            const tableCapacity = table.capacity;
 
-                            if (timeSlotTime > currentTime && renderedTimeSlots[table.capacity] < 3) {
-                                renderedTimeSlots[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]++;
                                 const timeSlotDateTime = new Date(timeSlot);
-                                const formattedTime = timeSlotDateTime.toLocaleTimeString([], {
-                                    hour: '2-digit',
-                                    minute: '2-digit'
-                                });
+                                const formattedTime = timeSlotDateTime.toLocaleTimeString();
+                                const formattedDateTime = timeSlotDateTime.toLocaleString(); // Format for both date and time
 
                                 return (
-                                    <button
-                                        key={index}
-                                        className="btn btn-primary me-2 mb-2"
-                                        onClick={() => handleTimeSlotClick(table, timeSlot, restaurant)}
-                                    >
-                                        {formattedTime} {}
+                                    <button key={index} className="btn btn-primary me-2 mb-2" onClick={() => handleTimeSlotClick(table, timeSlot, restaurant)}>
+                                        {formattedDateTime} {/* Display both date and time */}
                                     </button>
                                 );
                             } else {
-                                return null;
+                                return null; // Render nothing if the condition is not met
                             }
                         })}
@@ -114,8 +72,11 @@
                 );
             } else {
+                // If capacity has been rendered, return null to avoid duplicate rendering
                 return null;
             }
         });
-    };
+
+    }
+
 
     return (
@@ -124,25 +85,18 @@
             <div className="row">
                 {restaurants.map((restaurant) => (
-                    <div key={restaurant.restaurantId} className="col-md-4 mb-4">
+                    <div key={restaurant.id} className="col-md-4 mb-4">
                         <div className="card">
                             <div className="card-body">
                                 <h5 className="card-title">
-                                    {restaurant.name}
+                                    {restaurant.name} <StarRating key={restaurant.id} rating={restaurant.rating}/>
                                 </h5>
                                 <p className="card-text">{restaurant.cuisineType}</p>
                                 <p className="card-text">{restaurant.operatingHours}</p>
                                 <p className="card-text">Ul. {restaurant.address}</p>
-
-                                {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 className="d-flex flex-wrap">
+                                    {renderTimeSlots(restaurant.tablesList.flatMap((table) => table), restaurant)}
+                                </div>
                             </div>
-                            <button onClick={() => handleDetailClick(restaurant.restaurantId)} className="btn btn-primary">
-                                View Details
-                            </button>
+                            <button onClick={() => handleDetailClick(restaurant.restaurantId)} className="btn btn-primary">View Details</button>
                         </div>
                     </div>
Index: my-react-app/src/components/StarRating.js
===================================================================
--- my-react-app/src/components/StarRating.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ my-react-app/src/components/StarRating.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
@@ -2,6 +2,9 @@
 
 const StarRating = ({ rating }) => {
+    // Convert the rating to a number between 0 and 5
     const normalizedRating = Math.min(Math.max(0, rating), 5);
+    // Calculate the number of filled stars
     const filledStars = Math.floor(normalizedRating);
+    // Calculate the number of half stars
     const hasHalfStar = normalizedRating - filledStars >= 0.5;
 
@@ -9,11 +12,9 @@
         <div>
             {[...Array(filledStars)].map((_, index) => (
-                <span key={`filled-${index}`} className="star">&#9733;</span>
+                <span key={index} className="star">&#9733;</span>
             ))}
-
-            {hasHalfStar && <span className="star half">&#9733;</span>}
-
+            {hasHalfStar && <span className="star">&#9734;</span>}
             {[...Array(5 - filledStars - (hasHalfStar ? 1 : 0))].map((_, index) => (
-                <span key={`empty-${index}`} className="star">&#9734;</span>
+                <span key={filledStars + index + 1} className="star">&#9734;</span>
             ))}
         </div>
@@ -22,3 +23,2 @@
 
 export default StarRating;
-
Index: my-react-app/src/components/WelcomeContent.js
===================================================================
--- my-react-app/src/components/WelcomeContent.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ 	(revision )
@@ -1,12 +1,0 @@
-import * as React from "react";
-
-export default class WelcomeContent extends React.Component {
-    render() {
-        return (
-            <div>
-                <h1>Welcome</h1>
-                <p>Login to see</p>
-            </div>
-        )
-    }
-}
