frontend: add program

frontend/package-lock.json

@@ -8,8 +8,10 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
-        "react": "^19.1.1",
+        "js-cookie": "^3.0.5",
-        "react-dom": "^19.1.1"
+        "react": "^19.2.0",
+        "react-cookie": "^8.0.1",
+        "react-dom": "^19.2.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.33.0",
@@ -1413,6 +1415,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.7.tgz",
+      "integrity": "sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==",
+      "license": "MIT",
+      "dependencies": {
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1424,7 +1438,6 @@
       "version": "19.1.12",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
       "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -1941,6 +1954,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -1960,7 +1982,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/debug": {
@@ -2431,6 +2452,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2508,6 +2538,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2883,26 +2922,46 @@
       "license": "MIT"
     },
     "node_modules/react": {
-      "version": "19.1.1",
+      "version": "19.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
-      "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
+      "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-dom": {
+    "node_modules/react-cookie": {
-      "version": "19.1.1",
+      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-8.0.1.tgz",
-      "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
+      "integrity": "sha512-QNdAd0MLuAiDiLcDU/2s/eyKmmfMHtjPUKJ2dZ/5CcQ9QKUium4B3o61/haq6PQl/YWFqC5PO8GvxeHKhy3GFA==",
       "license": "MIT",
       "dependencies": {
-        "scheduler": "^0.26.0"
+        "@types/hoist-non-react-statics": "^3.3.6",
+        "hoist-non-react-statics": "^3.3.2",
+        "universal-cookie": "^8.0.0"
       },
       "peerDependencies": {
-        "react": "^19.1.1"
+        "react": ">= 16.3.0"
       }
     },
+    "node_modules/react-dom": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
+      "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -3000,9 +3059,9 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.26.0",
+      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
-      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
       "license": "MIT"
     },
     "node_modules/semver": {
@@ -3199,6 +3258,15 @@
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
+    "node_modules/universal-cookie": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-8.0.1.tgz",
+      "integrity": "sha512-B6ks9FLLnP1UbPPcveOidfvB9pHjP+wekP2uRYB9YDfKVpvcjKgy1W5Zj+cEXJ9KTPnqOKGfVDQBmn8/YCQfRg==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.2"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",

frontend/package.json

@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^19.1.1",
+    "js-cookie": "^3.0.5",
-    "react-dom": "^19.1.1"
+    "react": "^19.2.0",
+    "react-cookie": "^8.0.1",
+    "react-dom": "^19.2.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",

frontend/src/App.css

@@ -9,3 +9,55 @@
 .mainText {
   color: #5f5e5e;
 }
+
+/* General table styles */
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 20px 0;
+    font-size: 1em;
+    font-family: 'Arial', sans-serif;
+}
+
+/* Table header styles */
+th {
+    background-color: #4CAF50; /* Green */
+    color: white;
+    padding: 10px;
+    text-align: left;
+}
+
+/* Table cell styles */
+td {
+    padding: 10px;
+    border: 1px solid #ddd;
+}
+
+/* Zebra striping for table rows */
+tr:nth-child(even) {
+    background-color: #f2f2f2;
+}
+
+/* Responsive table styles */
+@media (max-width: 600px) {
+    table {
+        display: block;
+        overflow-x: auto;
+        white-space: nowrap;
+    }
+    
+    th, td {
+        padding: 8px;
+        font-size: 0.9em;
+    }
+    
+    th {
+        font-weight: bold;
+        background-color: #3C8A3C;
+    }
+}
+
+/* Hover effect for rows */
+tr:hover {
+    background-color: #f1f1f1;
+}

frontend/src/App.tsx

@@ -1,13 +1,17 @@
 import './App.css'
 import Greeting from './components/Greeting'
 import Hosting from './components/Hosting'
+import NameSelector from './components/NameSelector'
+import Program from './components/Program'
 
 function App() {
   return (
     <>
+      <NameSelector/>
       <Greeting/>
       <br/>
       <Hosting/>
+      <Program/>
     </>
   )
 }

frontend/src/NotificationContext.tsx

@@ -0,0 +1,81 @@
+// src/NotificationContext.tsx
+
+import React, { createContext, useContext, useState } from 'react';
+
+type NotificationType = 'success' | 'error';
+
+interface NotificationContextType {
+  notify: (message: string, type: NotificationType) => void;
+}
+
+const NotificationContext = createContext<NotificationContextType | undefined>(undefined);
+
+export const NotificationProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [notification, setNotification] = useState<string | null>(null);
+  const [notificationType, setNotificationType] = useState<NotificationType | null>(null);
+
+  const notify = (message: string, type: NotificationType) => {
+    setNotification(message);
+    setNotificationType(type);
+
+    // Automatically dismiss notification after 3 seconds
+    setTimeout(() => {
+      setNotification(null);
+      setNotificationType(null);
+    }, 3000);
+  };
+
+  return (
+    <NotificationContext.Provider value={{ notify }}>
+      {children}
+      {notification && (
+        <Notification message={notification} onClose={() => setNotification(null)} type={notificationType!} />
+      )}
+    </NotificationContext.Provider>
+  );
+};
+
+export const useNotification = () => {
+  const context = useContext(NotificationContext);
+  if (!context) {
+    throw new Error('useNotification must be used within a NotificationProvider');
+  }
+  return context.notify;
+};
+
+
+interface NotificationProps {
+  message: string;
+  onClose: () => void;
+  type: 'success' | 'error'; // Define notification types
+}
+
+// Notification Component
+const Notification: React.FC<NotificationProps> = ({ message, onClose, type }) => {
+  return (
+    <div style={{ ...styles.notification, backgroundColor: type === 'success' ? '#4caf50' : '#f44336' }}>
+      <p>{message}</p>
+      <button onClick={onClose} style={styles.closeButton}>X</button>
+    </div>
+  );
+};
+
+// Notification styles remain the same...
+const styles: { [key: string]: React.CSSProperties } = {
+  notification: {
+    position: 'fixed',
+    top: '20px',
+    right: '20px',
+    color: 'white',
+    padding: '15px',
+    borderRadius: '5px',
+    zIndex: 1000,
+  },
+  closeButton: {
+    background: 'transparent',
+    border: 'none',
+    color: 'white',
+    cursor: 'pointer',
+    marginLeft: '10px',
+  },
+};

frontend/src/components/Greeting.tsx

@@ -1,13 +1,20 @@
+import { useCookies } from "react-cookie";
+
 function Greeting() {
+    const [cookie] = useCookies<string>(['userName'])
+    const userName = cookie.userName;
+
     return (
         <>
             <h1>Приглашение на Новый год 2025-2026 🎄</h1>
             <p className="mainText">
-                Дорогие, Пятки! 🦶
+                <h3>
+                {userName ? <>{userName}</> : <>Дорогая пятка!</>}
+                ! 🦶
+                </h3>
+                Приглашаем тебя отпраздновать предстоящий Новый Год <b>2025-2026</b> с нами в сосновой избе, в которой, ко всему прочему, будет праздноваться годовщина нашей жизни в ней!
 
-                Приглашаем вас отпраздновать предстоящий Новый Год <b>2025-2026</b> с нами в сосновой избе, в которой, ко всему прочему, будет праздноваться годовщина нашей жизни в ней!
+                Наши двери открыты с <b>30.12.2025</b>. Праздник обычно длится до <b>01.01.2025</b>, но если тебе или твоим спутникам будет безумно плохо, то можно остаться и до второго числа.
-
-                Мы ожидаем вас с <b>30.12.2025</b>. Праздник обычно длится до <b>01.01.2025</b>, но если вам будет безумно плохо, то иожно остаться и до второго числа.
             </p>
         </>
     )

frontend/src/components/Hosting.tsx

@@ -1,5 +1,6 @@
-import { useState } from "react";
 import useFetchHosting from "../utils/fetchHosting";
+import { useNotification } from "../NotificationContext";
+import { useCookies } from "react-cookie";
 
 
 interface ReserveButtonProps {
@@ -10,26 +11,24 @@ interface ReserveButtonProps {
 
 const ReserveButton: React.FC<ReserveButtonProps> = (props) => {
     const { reservedBy, update, id } = props;
-    const [name, setName] = useState(reservedBy);
+    const [cookie] = useCookies<string>(['userName'])
+    const userName = cookie.userName;
     const isReserved = reservedBy !== '';
+    const notify = useNotification();
 
     const handleReserve = async () => {
-        if (name.trim()) {
+        try {
-            await update(name, id); // Call the update function from props with the name and id
+            await update(userName, id);
+            notify(`Успешно забронировано для ${userName}`, 'success');
+        } catch (error) {
+            notify(`Не удалось забронировать: ${error instanceof Error ? error.message : 'Unknown error'}`, 'error');
         }
     };
 
     return (
         <>
-            <input
-                type="text"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder="Введите ваше имя"
-                disabled={isReserved} // Disable if already reserved
-            />
             <button onClick={handleReserve} disabled={isReserved}>
-                {isReserved ? 'Занято' : 'Занять'}
+                {isReserved ? `Занято гостем ${reservedBy}` : 'Занять'}
             </button>
         </>
     );
@@ -42,16 +41,12 @@ function Hosting() {
         <>
             <h2>Поселение</h2>
             <p>
-                Мы готовы вас приютить в наших 150 квадратах. Хоть дом и кажется большим,
+                Мы готовы приютить в наших 150 квадратах всех. У нас есть 6 спальных мест. При этом, если
-                но больше 5 гостей уместить будет сложно (но возможно!). При этом, если
                 вы не хотите тесниться, то рядом с нами есть
-                <a href="https://www.uoti.net/" target="_blank" rel="noopener noreferrer"> отель</a>,
+                <a href="https://www.uoti.net/" target="_blank" rel="noopener noreferrer"> отель</a>, а так же
-                а так же
                 <a href="https://campingsysma.fi/" target="_blank" rel="noopener noreferrer"> кэмпинг-виллы </a>
                 (Лучше бронировать заранее если есть надобность. Оба в 1-1,5км от нашего дома).
-                <br />
+                Спальные места:
-                На данный момент мы можем вместить 5 гостей без лишних усилий.
-                Это подразумевает:
             </p>
             {loading && <div>Loading...</div>}
             {error && <div>Error</div>}
@@ -61,7 +56,7 @@ function Hosting() {
                         <thead>
                             <tr>
                                 <th>Размещение</th>
-                                <th>Вместительность</th>
+                                <th>Спальных мест</th>
                                 <th>Бронирование</th>
                             </tr>
                         </thead>
@@ -77,6 +72,7 @@ function Hosting() {
                     </table>
                 </div>
             )}
+            <br />
         </>
     );
 }

frontend/src/components/NameSelector.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { useCookies } from 'react-cookie';
+import { GUESTS } from '../constants/constants';
+
+const NameSelector = () => {
+    const [cookie, setCookie] = useCookies(['userName']);
+    const [selectedName, setSelectedName] = useState<string | undefined>(cookie.userName);
+
+    const handleSelect = (name: string) => {
+        if (name)
+        setSelectedName(name);
+        setCookie('userName', name, { path: '/' });
+    };
+
+    if (selectedName !== undefined) {
+        console.log('Selected', selectedName)
+        return null;
+    }
+
+    return (
+        <div style={styles.container}>
+            <h2 style={styles.title}>Выбери себя</h2>
+            <div style={styles.namesContainer}>
+                {GUESTS.map((name) => (
+                    <button key={name} style={styles.button} onClick={() => handleSelect(name)}>
+                        {name}
+                    </button>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+const styles = {
+    container: {
+        position: 'fixed' as 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        backgroundColor: 'rgba(0, 0, 0, 1)',
+        display: 'flex',
+        flexDirection: 'column' as 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: '#fff',
+        zIndex: 1000,
+    },
+    title: {
+        marginBottom: '20px',
+    },
+    namesContainer: {
+        display: 'flex',
+        flexDirection: 'column' as 'column',
+    },
+    button: {
+        margin: '10px',
+        padding: '10px 20px',
+        fontSize: '16px',
+        cursor: 'pointer',
+    },
+};
+
+export default NameSelector;

frontend/src/components/Program.tsx

@@ -0,0 +1,89 @@
+const Program = () => {
+  return (
+    <div>
+      <h2>Программа</h2>
+
+      <h3>30 декабря</h3>
+      <table>
+        <thead>
+          <tr>
+            <th>Время</th>
+            <th>Действие</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>15-18</td>
+            <td>Гости приезжают и селятся</td>
+          </tr>
+          <tr>
+            <td>18-19</td>
+            <td>Ужин</td>
+          </tr>
+          <tr>
+            <td>19-N/A</td>
+            <td>Отдых и заготовки к кануну Нового Года</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <h3>31 декабря</h3>
+      <table>
+        <thead>
+          <tr>
+            <th>Время</th>
+            <th>Действие</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>07-10</td>
+            <td>Утро, завтрак</td>
+          </tr>
+          <tr>
+            <td>11-14</td>
+            <td>Сюсьма, прогулки, дополнительные закупки, подготовка к вечеру, обед</td>
+          </tr>
+          <tr>
+            <td>14-19</td>
+            <td>Готовим ужин, чиллим</td>
+          </tr>
+          <tr>
+            <td>19-23:59</td>
+            <td>Ужин, отдых, разговоры, игры</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <h3>1 января</h3>
+      <table>
+        <thead>
+          <tr>
+            <th>Время</th>
+            <th>Действие</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>00-N/A</td>
+            <td>🎄 ☃️ 🍾 🥂 🎇 🎆</td>
+          </tr>
+          <tr>
+            <td>07-12</td>
+            <td>Утро, завтрак</td>
+          </tr>
+          <tr>
+            <td>12-15</td>
+            <td>Сауна/Отдых</td>
+          </tr>
+          <tr>
+            <td>15-N/A</td>
+            <td>Кто-то остается, кто-то собирается домой</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default Program;

frontend/src/constants/constants.ts

@@ -0,0 +1,13 @@
+
+export const API_URL = 'https://example.backend.com/hosting';
+export const GUESTS = [
+    "Медведь",
+    "Ксения",
+    "Дед",
+    "Фил",
+    "Классик",
+    "Янка",
+    "Швед",
+    "Тюлень",
+    "Тюлениха",
+]

frontend/src/main.tsx

@@ -2,9 +2,15 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
+import { NotificationProvider } from './NotificationContext.tsx'
+import { CookiesProvider } from 'react-cookie'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
+    <CookiesProvider>
+      <NotificationProvider>
         <App />
+      </NotificationProvider>
+    </CookiesProvider>
   </StrictMode>,
 )

frontend/src/utils/fetchHosting.tsx

@@ -13,6 +13,11 @@ const mockData: Hosting = {
         capacity: 2
     },
     3: {
+        reservedBy: "",
+        name: "Матрац 90см",
+        capacity: 1
+    },
+    4: {
         reservedBy: "",
         name: "Диван",
         capacity: 1
@@ -28,14 +33,12 @@ const useFetchHosting = () => {
         setLoading(true);
         setError(null);
         try {
-            const response = await fetch('https://example.backend.com/hosting');
+            const response = await fetch('/hosting');
-            if (!response.ok) {
+            if (response.status != 200) {
                 throw new Error('Network response was not ok');
             }
             const result = await response.json();
             setData(result);
-        } catch (error) {
-            setError(error instanceof Error ? error.message : 'Unknown error');
         } finally {
             setLoading(false);
         }
@@ -45,7 +48,7 @@ const useFetchHosting = () => {
         setLoading(true);
         setError(null);
         try {
-            const response = await fetch(`https://example.backend.com/hosting/${id}`, {
+            const response = await fetch(`/hosting/${id}`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -53,19 +56,19 @@ const useFetchHosting = () => {
                 body: JSON.stringify({ reservedBy: name })
             });
 
-            if (!response.ok) {
+            if (!response.ok) { // Check for non-200 responses
-                throw new Error('Network response was not ok');
+                const errorText = await response.text(); // Capture the response text for further insights
+                throw new Error(`Error ${response.status}: ${errorText}`);
             }
 
             // Optional: Fetch the updated data after reservation
             await fetchData();
-        } catch (error) {
-            setError(error instanceof Error ? error.message : 'Unknown error');
         } finally {
             setLoading(false);
         }
     };
 
+
     useEffect(() => {
         //fetchData(); // Initial fetch on mount
     }, []);