Index: my-react-app/src/App.js
===================================================================
--- my-react-app/src/App.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ my-react-app/src/App.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
@@ -1,6 +1,8 @@
-import {BrowserRouter as Router, Navigate, Route, Routes, useNavigate} from 'react-router-dom';
-
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import Customers from './components/Customers';
 import Layout from "./components/Layout";
-import React, {useContext, useEffect, useState} from 'react';
+import React, {useEffect, useState} from 'react';
+import CustomerFormContainer from "./components/CustomerFormContainer";
+import CustomerDetails from "./components/CustomerDetails";
 import ErrorPage from "./components/ErrorPage";
 import Restaurants from "./components/Restaurants";
@@ -9,28 +11,6 @@
 import ReservationConfirmation from "./components/ReservationConfirmation";
 import ReservationEdit from "./components/ReservationEdit";
-import axios from "axios";
-import { CuisineContext } from './components/CuisineContext';
-import RestaurantInfo from "./components/RestaurantInfo";
-import AuthForm from "./components/AuthForm";
-import AppContent from "./components/AppContent";
-import ReservationHistory from "./components/ReservationHistory";
-import AuthContent from "./components/AuthContent";
-import MenuList from "./components/MenuList";
-import ReadOnlyMenuList from "./components/ReadOnlyMenuList";
-
-const ProtectedRoute = ({ element, isAuthenticated }) => {
-    return isAuthenticated ? element : <Navigate to="/login" />;
-};
 
 const App = () => {
-    const [isAuthenticated, setIsAuthenticated] = useState(false);
-
-    useEffect(() => {
-        const token = localStorage.getItem('token');
-        if (token) {
-            setIsAuthenticated(true);
-        }
-    }, []);
-
     return (
         <Router>
@@ -38,24 +18,23 @@
                 <Routes>
                     <Route path="/" element={<Home />} />
-                    <Route path="/restaurants" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<Restaurants />} />} />
-                    <Route path="/restaurants/:id" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<RestaurantDetails />} />} />
-                    <Route path="/reservations" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<Reservations />} />} />
-                    <Route path="/reservationConfirmation/:tableNumber/:timeSlot/:restaurantId" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<ReservationConfirmation />} />} />
-                    <Route path="/reservations/reservationEdit/:reservationId" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<ReservationEdit />} />} />
-                    <Route path="/reservations-past" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<ReservationHistory />} />} />
-                    <Route path="/login" element={<AuthForm setIsAuthenticated={setIsAuthenticated} />} />
-
-                    <Route path="/error" element={<ErrorPage />} />
+                    <Route path="/customers" element={<Customers />} />
+                    <Route path="/customers/add" element={<CustomerFormContainer/>} />
+                    <Route path="/customers/:id" element={<CustomerDetails />} />
+                    <Route path="/customers/edit/:id" element={<CustomerFormContainer/>} />
+                    <Route path="/restaurants" element={<Restaurants />} />
+                    <Route path="/restaurants/:id" element={<RestaurantDetails />} />
+                    <Route path="/reservations" element={<Reservations />} />
+                    <Route path="/reservationConfirmation/:tableNumber/:timeSlot/:restaurantId" element={<ReservationConfirmation />} />
+                    <Route path="/reservations/reservationEdit/:reservationId" element={<ReservationEdit />} />
+                    <Route path="/error" element={<ErrorPage/>}/>
                 </Routes>
             </Layout>
         </Router>
     );
-};
+}
 
 
 const Home = () => {
-    const navigate = useNavigate();
-
-    const todayDate = new Date().toISOString().split('T')[0];
+    const todayDate = new Date().toISOString().split('T')[0]; // Get today's date in 'YYYY-MM-DD' format
 
     const [date, setDate] = useState(todayDate);
@@ -64,10 +43,4 @@
     const [searchValue, setSearchValue] = useState('');
     const [timeSlots, setTimeSlots] = useState([]);
-    let [filteredRestaurants, setFilteredRestaurants] = useState([]);
-
-    const cuisineTypes = useContext(CuisineContext);
-    const [showCuisineSearch, setShowCuisineSearch] = useState(true);
-
-    const [formatedDateTime, setFormatedDateTime] = useState('')
 
     useEffect(() => {
@@ -77,24 +50,15 @@
             const isToday = selectedDate.toDateString() === today.toDateString();
 
-            let startHour = 9;
-            let startMinute = 0;
-            if (isToday) {
-                const currentHour = today.getHours();
-                const currentMinute = today.getMinutes();
-                if (currentHour > 9 || (currentHour === 9 && currentMinute >= 0)) {
-                    startHour = currentHour;
-                    startMinute = Math.ceil(currentMinute / 15) * 15;
-                }
-            }
+            const startHour = isToday ? today.getHours() : 9;
+            const startMinute = isToday ? Math.ceil(today.getMinutes() / 15) * 15 : 0;
 
-            const startTime = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate(), startHour, startMinute);
+            let currentTime = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate(), startHour, startMinute);
             const endTime = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate(), 23, 30);
 
             const slots = [];
-            let currentTime = new Date(startTime);
             while (currentTime <= endTime) {
                 const option = currentTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
                 slots.push(option);
-                currentTime.setMinutes(currentTime.getMinutes() + 15);
+                currentTime.setMinutes(currentTime.getMinutes() + 15); // Increment by 15 minutes
             }
 
@@ -102,8 +66,4 @@
         }
     }, [date]);
-
-    const handleGoToRestaurant = (restaurantId) => {
-        navigate(`/restaurants/${restaurantId}`);
-    };
 
     const handleDateChange = (e) => {
@@ -123,168 +83,22 @@
     };
 
-    const handleSubmit = async (e) => {
+    const handleSubmit = (e) => {
         e.preventDefault();
-        const [year, month, day] = date.split("-");
-        let formattedDateTime;
-
-        if (selectedTime) {
-            const [selectedHours, selectedMinutes] = selectedTime.split(":");
-            if (!isNaN(selectedHours) && !isNaN(selectedMinutes)) {
-                const dateTime = new Date(Date.UTC(year, month - 1, day, selectedHours, selectedMinutes));
-                formattedDateTime = dateTime.toISOString().slice(0, 16).replace('T', ' ');
-                setFormatedDateTime(formattedDateTime);
-            }
-        } else {
-            const now = new Date();
-            const currentTime = now.getHours() * 60 + now.getMinutes();
-            const nextSlot = timeSlots.find(slot => {
-                const [hours, minutes] = slot.split(":");
-                const slotTime = parseInt(hours) * 60 + parseInt(minutes);
-                return slotTime > currentTime;
-            });
-
-            formattedDateTime = nextSlot ? `${date} ${nextSlot}` : `${date} ${timeSlots[0]}`;
-        }
-
-        const data = {
-            dateTime: formattedDateTime,
-            partySize: numPeople,
-            search: searchValue
-        };
-
-        try {
-            const response = await axios.post('http://localhost:8081/api/search', data);
-            const filteredRestaurants = response.data;
-            setFilteredRestaurants(filteredRestaurants);
-            console.log(filteredRestaurants)
-            setShowCuisineSearch(false);
-        } catch (error) {
-            console.error('Error:', error);
-        }
+        console.log(date);
+        console.log(selectedTime);
+        console.log(numPeople);
+        console.log(searchValue);
     };
 
-    const handleSearchByCuisine = async (cuisine) => {
-        const cuisineName = cuisine.replace('Searching by cuisine: ', '');
-        try {
-            const response = await axios.post(`http://localhost:8081/api/search/shortcut/${cuisineName}`, cuisineName);
-            setFilteredRestaurants(response.data)
-            console.log(response.data)
-        } catch (error) {
-            console.error('Error searching by cuisine:', error);
-        }
-        setShowCuisineSearch(false);
-    };
-    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 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;
-    };
-
-    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 handleTimeSlotClick = (table, timeSlot, restaurant) => {
-        const tableNumber = table.id;
-        const formattedTimeSlot = timeSlot;
-        const restaurantId = restaurant.restaurantId;
-
-        const encodedTableNumber = encodeURIComponent(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 = {};
-
-        if (tablesList.length === 0) {
-            return <p>No tables available for reservations at this restaurant.</p>;
-        }
-
-        return tablesList.flatMap((table) => {
-            const tableTimeSlots = generateTimeSlots(restaurant.operatingHours);
-
-            if (!renderedTimeSlots[table.capacity]) {
-                renderedTimeSlots[table.capacity] = 0;
-                return (
-                    <div key={table.capacity}>
-                        <h3>Table for {table.capacity} guests</h3>
-                        {tableTimeSlots.map((timeSlot, index) => {
-                            const timeSlotTime = new Date(timeSlot).getTime();
-
-                            if (timeSlotTime > currentTime && renderedTimeSlots[table.capacity] < 3) {
-                                renderedTimeSlots[table.capacity]++;
-                                const timeSlotDateTime = new Date(timeSlot);
-                                const formattedTime = timeSlotDateTime.toLocaleTimeString([], {
-                                    hour: '2-digit',
-                                    minute: '2-digit'
-                                });
-
-                                return (
-                                    <button
-                                        key={index}
-                                        className="btn btn-primary me-2 mb-2"
-                                        onClick={() => handleTimeSlotClick(table, timeSlot, restaurant)}
-                                    >
-                                        {formattedTime} {}
-                                    </button>
-                                );
-                                <br/>
-                            } else {
-                                return null;
-                            }
-                        })}
-                    </div>
-                );
-            } else {
-                return null;
-            }
-        });
-    };
-
+    const today = new Date().toISOString().split('T')[0];
 
     return (
         <div className="container">
-            <h2 className="display-1">Rezerviraj masa</h2>
+            <h2>Home</h2>
+            <p>Welcome to My Awesome App!</p>
             <form className="row g-2 align-items-center" onSubmit={handleSubmit}>
                 <div className="col-auto">
                     <input className="form-control me-2" type="date" value={date} onChange={handleDateChange}
-                           min={formattedDate}/>
+                           min={today}/>
                 </div>
                 <div className="col-auto">
@@ -309,6 +123,6 @@
                         placeholder="Restaurant or Cuisine"
                         aria-label="Search"
-                        value={searchValue}
-                        onChange={handleInputChange}
+                        value={searchValue} // Set the value of the input field
+                        onChange={handleInputChange} // Call the event handler on change
                     />
                 </div>
@@ -316,54 +130,4 @@
                     <button className="btn btn-outline-success" type="submit">Search</button>
                 </div>
-
-                <div className="border-0">
-                    {filteredRestaurants.map((restaurant) => (
-                        <div key={restaurant.id} className="card mb-3">
-                            <div className="card-body">
-                                <div className="row">
-
-                                    <div className="col-md-4">
-                                        <RestaurantInfo key={restaurant.id} restaurant={restaurant}/>
-                                        <div className="d-flex flex-wrap">
-                                            {restaurant.tablesList && restaurant.tablesList.length > 0 ? (
-                                                renderTimeSlots(restaurant.tablesList, restaurant)
-                                            ) : (
-                                                <p>No tables available for reservations at this restaurant</p>
-                                            )}
-                                        </div>
-                                        <button
-                                            className="btn btn-secondary mt-3"
-                                            onClick={() => handleGoToRestaurant(restaurant.restaurantId)}
-                                        >
-                                            Go to Restaurant
-                                        </button>
-                                    </div>
-
-
-                                    <div className="col-md-8">
-                                        <ReadOnlyMenuList restaurantId={restaurant.restaurantId}/>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-
-
-                {showCuisineSearch && (
-                    <div className="mb-3">
-                        <h2 className="display-2">Search by cuisine type</h2>
-                        <ul className="list-group">
-                            {cuisineTypes.map((cuisine, index) => (
-                                <li key={index} className="list-group-item">
-                                    <button type="button" className="btn btn-outline-primary"
-                                            onClick={() => handleSearchByCuisine(cuisine)}>
-                                        {cuisine}
-                                    </button>
-                                </li>
-                            ))}
-                        </ul>
-                    </div>
-                )}
             </form>
         </div>
@@ -371,3 +135,4 @@
 }
 
+
 export default App;
