Attempt to add reservation table

api/src/routes/reservation.ts

@@ -1,3 +1,5 @@
+//api\src\routes\reservation.ts
+
 import { Router } from "Express";
 import {
   createReservationController,

client/src/App.tsx

@@ -42,6 +42,7 @@ function App() {
         <Route path="/dashboard" element={<Dashboard />} />
         </Routes>
       <Footer />
+      {/* <ReservationTable /> */}
     </Box>
   );
 }

client/src/components/ReservationTable/ReservationTable.tsx

@@ -0,0 +1,65 @@
+// client/src/components/ReservationTable/ReservationTable.tsx
+import React, { useEffect, useState } from 'react';
+// import axios from 'axios';
+import axios from '../axiosInstance';
+
+interface Reservation {
+  _id: string;
+  place: string;
+  user: string;
+  checkIn: Date;
+  checkOut: Date;
+  name: string;
+  phone: string;
+  price: number;
+}
+
+const ReservationTable = () => {
+  const [reservations, setReservations] = useState<Reservation[]>([]);
+
+  useEffect(() => {
+    const fetchReservations = async () => {
+      try {
+        const response = await axios.get('/reservation/:userId');
+        setReservations(response.data);
+      } catch (error) {
+        console.error('Error fetching reservations:', error);
+      }
+    };
+    fetchReservations();
+  }, []);
+
+  return (
+    <div>
+      <h2>Reservations</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>Place</th>
+            <th>User</th>
+            <th>Check-In</th>
+            <th>Check-Out</th>
+            <th>Name</th>
+            <th>Phone</th>
+            <th>Price</th>
+          </tr>
+        </thead>
+        <tbody>
+          {reservations.map((reservation) => (
+            <tr key={reservation._id}>
+              <td>{reservation.place}</td>
+              <td>{reservation.user}</td>
+              <td>{new Date(reservation.checkIn).toLocaleDateString()}</td>
+<td>{new Date(reservation.checkOut).toLocaleDateString()}</td>
+              <td>{reservation.name}</td>
+              <td>{reservation.phone}</td>
+              <td>{reservation.price}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default ReservationTable;

client/src/components/axiosInstance.ts

@@ -0,0 +1,9 @@
+// client/src/axiosInstance.ts
+import axios from 'axios';
+
+const axiosInstance = axios.create({
+  baseURL: '/api',
+});
+
+export default axiosInstance;
+export {};

client/src/pages/Dashboard.tsx

@@ -1,3 +1,5 @@
+//client\src\pages\Dashboard.tsx
+
 import { TabContext, TabList, TabPanel } from "@mui/lab";
 import { Box, Button, Tab, Tabs, TextField, Typography } from "@mui/material";
 import React, { KeyboardEventHandler, useState } from "react";
@@ -6,6 +8,9 @@ import { placeActions } from "../redux/slices/placesSlice";
 import { AppDispatch, RootState } from "../redux/store";
 import { addPlaceThunk } from "../redux/thunk/placesThunk";
 import UserList from "../components/user/UserList";
+import ReservationTable from "../components/ReservationTable/ReservationTable";
+
+
 const Dashboard = () => {
   const [value, setValue] = React.useState("1");
 
@@ -48,7 +53,7 @@ const Dashboard = () => {
             <UserList></UserList>
           </Box>
         </TabPanel>
-        <TabPanel value="2">Reservation Table</TabPanel>
+        <TabPanel value="2"><ReservationTable /></TabPanel>
         <TabPanel value="3">
           <Typography variant="h6">New Place</Typography>
           <Box